diff --git a/assets/css/style.css b/assets/css/style.css index 1bf04c9..6e9162d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1352,11 +1352,6 @@ section { mask: url('../images/icon/balloon.svg') center / contain no-repeat; } -@media (prefers-reduced-motion: no-preference) { - .fa-before-lead.fa-before-lead--balloon::before { - animation: ebook-balloon-float 2.4s ease-in-out infinite; - } -} /* 金句:基底只放結構:視覺請用 --mission / --awakening,兩句互不覆寫 */ .slogan-quote { @@ -1559,47 +1554,6 @@ a { background: #fffdf5; color: #e0b400; z-index: 2; - box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35); -} - -@media (prefers-reduced-motion: no-preference) { - .merged-storyline .story-node::before { - animation: - timeline-diamond-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards, - timeline-diamond-glow 2.1s ease-in-out 0.65s infinite; - } - - .merged-storyline .story-node:nth-of-type(1)::before { - animation-delay: 0.05s, 0.7s; - } - - .merged-storyline .story-node:nth-of-type(2)::before { - animation-delay: 0.12s, 0.9s; - } - - .merged-storyline .story-node:nth-of-type(3)::before { - animation-delay: 0.19s, 1.1s; - } - - .merged-storyline .story-node:nth-of-type(4)::before { - animation-delay: 0.26s, 1.3s; - } - - .merged-storyline .story-node:nth-of-type(5)::before { - animation-delay: 0.33s, 1.5s; - } - - .merged-storyline .story-node:nth-of-type(6)::before { - animation-delay: 0.4s, 1.7s; - } - - .merged-storyline .story-node:nth-of-type(7)::before { - animation-delay: 0.47s, 1.9s; - } - - .merged-storyline .story-node:nth-of-type(8)::before { - animation-delay: 0.54s, 2.1s; - } } .merged-storyline .story-node::after { @@ -1752,8 +1706,15 @@ a { } .merged-storyline .timeline-ebook-cta .fa-hand-pointer { + display: inline-block; font-size: 1.1em; - animation: timeline-finger-nudge 1.15s ease-in-out infinite; + flex-shrink: 0; +} + +@media (prefers-reduced-motion: no-preference) { + .merged-storyline .timeline-ebook-cta .fa-hand-pointer { + animation: timeline-finger-nudge 1.15s ease-in-out infinite; + } } @keyframes timeline-finger-nudge { @@ -1768,57 +1729,31 @@ a { } } -@keyframes timeline-diamond-enter { - 0% { - opacity: 0; - transform: scale(0.45); - box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); - color: #c9a000; - } - - 70% { - transform: scale(1.18); - box-shadow: - 0 0 0 3px rgba(255, 204, 0, 0.55), - 0 0 16px 4px rgba(255, 204, 0, 0.45); - color: #ffdd33; - } - - 100% { - opacity: 1; - transform: scale(1); - box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35); - color: #e0b400; - } -} - -@keyframes timeline-diamond-glow { +/* 頂/底邊(水平)佔較長 keyframe 比例,整圈放慢 */ +@keyframes ebook-balloon-orbit { 0%, 100% { - transform: scale(1); - box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.3); - color: #e0b400; + left: 0; + top: 0; } - 50% { - transform: scale(1.14); - box-shadow: - 0 0 0 3px rgba(255, 204, 0, 0.5), - 0 0 14px 5px rgba(255, 204, 0, 0.55); - color: #ffea4d; - } -} - -@keyframes ebook-balloon-float { - - 0%, - 100% { - transform: translateY(0); + /* 上邊:左上 → 右上 */ + 36% { + left: calc(100% - 1.15em); + top: 0; } - 50% { - transform: translateY(-5px); + /* 右邊:右上 → 右下 */ + 46% { + left: calc(100% - 1.15em); + top: calc(100% - 1.15em); + } + + /* 下邊:右下 → 左下 */ + 86% { + left: 0; + top: calc(100% - 1.15em); } } @@ -1827,9 +1762,10 @@ a { animation: none; } - .merged-storyline .story-node::before, - .fa-before-lead.fa-before-lead--balloon::before { + body.ebook-ssg2-page .ebook-intro-notes.fa-before-lead--balloon::before { animation: none; + left: 0; + top: 0; } } @@ -2811,9 +2747,33 @@ body.ebook-ssg2-page .ebook-intro.section p.ebook-intro-lead + p.ebook-intro-not margin-top: -0.5rem; } -body.ebook-ssg2-page .ebook-intro-notes { - max-width: 42rem; +/* 電子書叮嚀(ebook.html):區塊貼合文字;氣球沿外圈留白四角走,不壓字 */ +body.ebook-ssg2-page .ebook-intro-notes.fa-before-lead.fa-before-lead--balloon { + position: relative; + display: block; + box-sizing: border-box; + width: fit-content; + max-width: min(36rem, calc(100% - 2rem)); margin: 0 auto 1rem; + padding: 1.2em calc(0.55em + 10px); + padding-left: calc(0.55em + 10px); + text-align: center; +} + +body.ebook-ssg2-page .ebook-intro-notes.fa-before-lead--balloon::before { + left: 0; + top: 0; + transform: none; + width: 1.15em; + height: 1.15em; + z-index: 0; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + body.ebook-ssg2-page .ebook-intro-notes.fa-before-lead--balloon::before { + animation: ebook-balloon-orbit 11s linear infinite; + } } body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note { @@ -2821,6 +2781,10 @@ body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note { font-size: 0.88rem; color: #777; line-height: 1.5; + text-align: center; + text-wrap: balance; + position: relative; + z-index: 1; } body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note+.ebook-intro-note {