/* giftyou.com.tw CRO 增強樣式 A: 手機商品頁 sticky 詢價 CTA B: 文章頁轉換區 */ /* ===== A. 手機 sticky 詢價 CTA (僅手機顯示) ===== */ .gy-sticky-cta { display: none; } @media (max-width: 768px) { .gy-sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; gap: 8px; padding: 8px 10px; background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.12); border-top: 1px solid #eee; } .gy-sticky-cta .gy-sticky-line { flex: 0 0 36%; display: flex; align-items: center; justify-content: center; gap: 6px; background: #06C755; color: #fff; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; } .gy-sticky-cta .gy-sticky-quote { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(249,87,56,1); color: #fff; border: 0; border-radius: 8px; font-weight: 700; font-size: 16px; cursor: pointer; min-height: 46px; } body.gy-sticky-on { padding-bottom: 66px; } /* 避免 sticky 擋住頁尾 (marker class 由 JS 加，因 route class 在 ) */ } /* ===== B. 文章頁轉換區 ===== */ .gy-article-cta { margin: 36px 0 8px; } .gy-cta-box { background: linear-gradient(135deg,#fff7f4,#ffeee8); border: 1px solid #ffd8c9; border-radius: 14px; padding: 26px 20px; text-align: center; } .gy-cta-title { font-size: 20px; font-weight: 800; color: #2a2320; margin-bottom: 6px; } .gy-cta-sub { font-size: 14px; color: #6b5f59; margin-bottom: 18px; } .gy-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .gy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 15px; transition: all .25s cubic-bezier(.4,0,.2,1); } .gy-btn-primary { background: rgba(249,87,56,1); color: #fff; } .gy-btn-line { background: #06C755; color: #fff; } .gy-btn:hover { transform: translateY(-2px); opacity: .95; } .gy-rel-title { font-size: 17px; font-weight: 800; color: #2a2320; margin: 30px 0 12px; } .gy-rel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .gy-rel-card { display: block; border: 1px solid #eee; border-radius: 10px; overflow: hidden; text-decoration: none; background: #fff; transition: all .25s; } .gy-rel-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-3px); } .gy-rel-img { display: block; width: 100%; padding-top: 92%; background-size: cover; background-position: center; background-color: #f6f6f6; } .gy-rel-name { display: block; font-weight: 700; font-size: 14px; color: #2a2320; padding: 8px 10px 2px; } .gy-rel-sub { display: block; font-size: 12px; color: #8a7f79; padding: 0 10px 10px; } @media (max-width: 768px) { .gy-rel-grid { grid-template-columns: repeat(2,1fr); } }