/* * 自家橫幅（放在首頁原本的廣告版位；partials/house-ad、HouseAds）。 * **這個檔是產生的**：來源是設計稿 02-UI雛形/housead-v3.html，用 `node tools/build-promo-css.js` 轉出來，不要手改。 * class 叫 hb（不是 ad）、圖放 /images/family-promo/，是為了不被廣告攔截器藏起來。 */ /* ===== 橫幅骨架：左邊文案、右邊是產品真正的宣傳圖 ===== 電腦 150px 高；手機 150px 高、圖縮小靠右。不會自己動。 每一則有兩個版本：.l 白底（首頁淺色模式用）、.d 黑底（首頁深色模式用） */ .hb { container-type: inline-size; position: relative; display: flex; align-items: center; height: 150px; border-radius: 12px; overflow: hidden; text-decoration: none; isolation: isolate; } .hb-copy { position: relative; z-index: 3; flex: 1; min-width: 0; padding: 0 0 0 36px; display: flex; flex-direction: column; align-items: flex-start; } .hb-brand { font-size: 13px; font-weight: 700; letter-spacing: .03em; } .hb-title { margin-top: 4px; font-size: 32px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; } .hb-sub { margin-top: 4px; max-width: 100%; font-size: 14.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hb-cta { position: relative; z-index: 3; flex: none; margin: 0 36px 0 24px; border-radius: 8px; font-size: 15px; font-weight: 700; padding: 11px 22px; white-space: nowrap; } .hb-art { position: relative; z-index: 1; flex: none; align-self: stretch; } .hb-art i { position: absolute; display: block; background-repeat: no-repeat; } :root[data-mode="dark"] .hb { color: #fff; } :root[data-mode="dark"] .hb .hb-sub { opacity: .86; } :root:not([data-mode="dark"]) .hb { color: #15171c; background: #fff; border: 1px solid #e3e6ea; } :root:not([data-mode="dark"]) .hb .hb-sub { color: #5d636e; } /* 中等寬度（橫幅本身 761～1000px，例如爭議度下方那一格只佔三欄中的兩欄）：副標收起來、標題可以折兩行 */ /* 窄（橫幅本身 760px 以下，手機）：文案在左上、按鈕在左下、圖靠右露出一部分 */ /* ----- OnceHit（OnceEvent）：官方宣傳圖裡的刮刮卡、轉盤、紅包 ----- */ .hb.event .hb-art { width: 470px; } .hb.event .hb-art i { background-image: url(/images/family-promo/og-event.jpg); background-size: 640px 640px; } .hb.event .a1 { left: 0; top: -14px; width: 190px; height: 180px; background-position: -68px -70px; transform: scale(.82) rotate(-4deg); } /* 刮刮卡 */ .hb.event .a2 { left: 150px; top: -20px; width: 180px; height: 190px; background-position: -424px -58px; transform: scale(.86); } /* 轉盤 */ .hb.event .a3 { left: 300px; top: -18px; width: 180px; height: 186px; background-position: -408px -392px; transform: scale(.8) rotate(5deg); } /* 紅包 */ /* 黑底：圖淡出融進深藍金的底 */ :root[data-mode="dark"] .hb.event { background: #1a2540; } :root[data-mode="dark"] .hb.event::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, #151c2e 0%, #24324c 55%, #5d5136 100%); } :root[data-mode="dark"] .hb.event .hb-art i { border-radius: 26px; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); } :root[data-mode="dark"] .hb.event .hb-brand { color: #e9d7a5; } :root[data-mode="dark"] .hb.event .hb-title b { color: #f1d894; font-weight: 900; } :root[data-mode="dark"] .hb.event .hb-cta { background: #f1d894; color: #1a2540; } :root[data-mode="dark"] .hb.event:hover .hb-cta { background: #ffe9ad; } /* 白底：三張圖切成圓角方塊，像三個擺在桌上的獎品，帶陰影 */ :root:not([data-mode="dark"]) .hb.event .hb-art i { border-radius: 34px; box-shadow: 0 10px 22px rgba(26,37,64,.28); -webkit-mask-image: none; mask-image: none; } :root:not([data-mode="dark"]) .hb.event .a1 { width: 150px; height: 150px; background-position: -86px -86px; top: 2px; left: 26px; transform: scale(.74) rotate(-6deg); } :root:not([data-mode="dark"]) .hb.event .a2 { width: 150px; height: 150px; background-position: -440px -78px; top: 0; left: 166px; transform: scale(.84); } :root:not([data-mode="dark"]) .hb.event .a3 { width: 150px; height: 150px; background-position: -422px -410px; top: 2px; left: 306px; transform: scale(.74) rotate(6deg); } :root:not([data-mode="dark"]) .hb.event .hb-brand { color: #8a6a1f; } :root:not([data-mode="dark"]) .hb.event .hb-title b { color: #b07d12; font-weight: 900; } :root:not([data-mode="dark"]) .hb.event .hb-cta { background: #1a2540; color: #f1d894; } :root:not([data-mode="dark"]) .hb.event:hover .hb-cta { background: #25345a; } /* ----- OnceClip：官方宣傳圖的手機 ----- */ .hb.clip .hb-art i { background-image: url(/images/family-promo/og-clip.jpg); } /* 黑底：官方圖右半邊（手機與後面的紫色光暈）淡出接到底色 */ :root[data-mode="dark"] .hb.clip { background: #0e192f; } :root[data-mode="dark"] .hb.clip .hb-art { width: 290px; } :root[data-mode="dark"] .hb.clip .hb-art i { inset: 0; background-size: 864px auto; background-position: -574px -150px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 74%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 74%, transparent 100%); } :root[data-mode="dark"] .hb.clip .hb-brand { color: #c9b8ff; } :root[data-mode="dark"] .hb.clip .hb-cta { background: #8b5cf6; color: #fff; } :root[data-mode="dark"] .hb.clip:hover .hb-cta { background: #a078ff; } /* 白底：把手機那一塊切成一張圓角的相片，微微傾斜、帶陰影 */ :root:not([data-mode="dark"]) .hb.clip .hb-art { width: 270px; } :root:not([data-mode="dark"]) .hb.clip .hb-art i { left: 0; top: -34px; width: 250px; height: 218px; border-radius: 16px; background-size: 700px auto; background-position: -438px -84px; transform: rotate(-4deg); box-shadow: 0 12px 26px rgba(76,29,149,.28); } :root:not([data-mode="dark"]) .hb.clip .hb-brand { color: #6d28d9; } :root:not([data-mode="dark"]) .hb.clip .hb-cta { background: #7c3aed; color: #fff; } :root:not([data-mode="dark"]) .hb.clip:hover .hb-cta { background: #6d28d9; } /* ----- OncePing：官網的機器貓 ----- */ .hb.ping .hb-art { width: 250px; } .hb.ping .hb-art i { left: 20px; top: -28px; width: 206px; height: 206px; background-image: url(/images/family-promo/ping-mascot.png); background-size: 206px 206px; } /* 黑底：深藍格線底，機器貓淡出 */ :root[data-mode="dark"] .hb.ping { background: #08152a; } :root[data-mode="dark"] .hb.ping::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(120,170,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,255,.06) 1px, transparent 1px); background-size: 28px 28px; } :root[data-mode="dark"] .hb.ping .hb-art i { -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); } :root[data-mode="dark"] .hb.ping .hb-brand { color: #8fd0ff; } :root[data-mode="dark"] .hb.ping .hb-cta { background: #1ea7fd; color: #04101f; } :root[data-mode="dark"] .hb.ping:hover .hb-cta { background: #5cc3ff; } /* 白底：機器貓放在一個深藍的圓形徽章裡（它本來就是在深色底上發光的圖），外面一圈淡藍 */ :root:not([data-mode="dark"]) .hb.ping .hb-art i { top: -3px; left: 46px; width: 156px; height: 156px; border-radius: 50%; background-size: 196px 196px; background-position: center; box-shadow: 0 0 0 6px #dcecff, 0 10px 24px rgba(8,21,42,.3); } :root:not([data-mode="dark"]) .hb.ping .hb-brand { color: #0b6fbf; } :root:not([data-mode="dark"]) .hb.ping .hb-cta { background: #0b63ce; color: #fff; } :root:not([data-mode="dark"]) .hb.ping:hover .hb-cta { background: #0a55b0; } /* ----- OnceTool 的四個工具：各自上架 Chrome 商店用的宣傳圖 ----- */ .hb.tool .hb-art i { background-repeat: no-repeat; } /* 圖示型（Comment、Subscribe）：宣傳圖左邊那塊帶點點底的圖示方塊 */ .hb.tile .hb-art { width: 160px; } .hb.tile .hb-art i { left: 9px; top: 9px; width: 132px; height: 132px; border-radius: 20px; background-size: 132px 132px; } :root:not([data-mode="dark"]) .hb.tile .hb-art i { box-shadow: 0 10px 22px rgba(15,23,42,.24); transform: rotate(-4deg); } :root[data-mode="dark"] .hb.tile .hb-art i { box-shadow: 0 0 0 1px rgba(255,255,255,.08); } /* 畫面型（Like、語音）：宣傳圖右邊的產品畫面 */ .hb.shot .hb-art { width: 262px; } :root[data-mode="dark"] .hb.shot .hb-art i { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } :root:not([data-mode="dark"]) .hb.shot .hb-art i { border-radius: 14px; transform: rotate(-3deg); } .hb.like .hb-art i { left: 0; top: 0; width: 250px; height: 150px; background-image: url(/images/family-promo/tool-like.png); background-size: 250px 150px; } :root:not([data-mode="dark"]) .hb.like .hb-art i { top: 4px; height: 142px; background-position: 0 -4px; box-shadow: 0 12px 26px rgba(70,60,160,.32); } :root[data-mode="dark"] .hb.like { background: #463ca0; } :root[data-mode="dark"] .hb.like .hb-brand { color: #d3ceff; } :root[data-mode="dark"] .hb.like .hb-cta { background: #fff; color: #3a3191; } :root[data-mode="dark"] .hb.like:hover .hb-cta { background: #ecebff; } :root:not([data-mode="dark"]) .hb.like .hb-brand { color: #4f46e5; } :root:not([data-mode="dark"]) .hb.like .hb-cta { background: #4f46e5; color: #fff; } :root:not([data-mode="dark"]) .hb.like:hover .hb-cta { background: #4338ca; } .hb.comment .hb-art i { background-image: url(/images/family-promo/tool-comment.png); } :root[data-mode="dark"] .hb.comment { background: #0f271b; } :root[data-mode="dark"] .hb.comment::before, :root[data-mode="dark"] .hb.subscribe::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.2px); background-size: 18px 18px; } :root[data-mode="dark"] .hb.comment .hb-brand { color: #34d399; } :root[data-mode="dark"] .hb.comment .hb-cta { background: #10b981; color: #04130c; } :root[data-mode="dark"] .hb.comment:hover .hb-cta { background: #34d399; } :root:not([data-mode="dark"]) .hb.comment .hb-brand { color: #059669; } :root:not([data-mode="dark"]) .hb.comment .hb-cta { background: #059669; color: #fff; } :root:not([data-mode="dark"]) .hb.comment:hover .hb-cta { background: #047857; } .hb.subscribe .hb-art i { background-image: url(/images/family-promo/tool-subscribe.png); } :root[data-mode="dark"] .hb.subscribe { background: #33121b; } :root[data-mode="dark"] .hb.subscribe .hb-brand { color: #ff8f8f; } :root[data-mode="dark"] .hb.subscribe .hb-cta { background: #ef4444; color: #fff; } :root[data-mode="dark"] .hb.subscribe:hover .hb-cta { background: #f87171; } :root:not([data-mode="dark"]) .hb.subscribe .hb-brand { color: #dc2626; } :root:not([data-mode="dark"]) .hb.subscribe .hb-cta { background: #dc2626; color: #fff; } :root:not([data-mode="dark"]) .hb.subscribe:hover .hb-cta { background: #b91c1c; } .hb.voice .hb-art i { left: 26px; top: -1px; width: 200px; height: 152px; background-image: url(/images/family-promo/tool-voice.png); background-size: 200px 152px; } :root:not([data-mode="dark"]) .hb.voice .hb-art i { top: 6px; height: 138px; background-position: 0 -6px; transform: rotate(3deg); box-shadow: 0 12px 26px rgba(16,55,121,.32); } :root[data-mode="dark"] .hb.voice { background: #103779; } :root[data-mode="dark"] .hb.voice .hb-brand { color: #b3cdff; } :root[data-mode="dark"] .hb.voice .hb-cta { background: #fff; color: #103779; } :root[data-mode="dark"] .hb.voice:hover .hb-cta { background: #e6efff; } :root:not([data-mode="dark"]) .hb.voice .hb-brand { color: #1d4ed8; } :root:not([data-mode="dark"]) .hb.voice .hb-cta { background: #1d4ed8; color: #fff; } :root:not([data-mode="dark"]) .hb.voice:hover .hb-cta { background: #1e40af; } /* 整列寬與窄各印一份文字（標題在窄的時候要換行、品牌名要縮短），用 class 切換 */ .hb .hb-on-m { display: none; } /* 中等寬度：橫幅自己 761～1000px */ @container (min-width: 761px) and (max-width: 1000px) { :root:not([data-mode="dark"]) .hb .hb-sub, :root[data-mode="dark"] .hb .hb-sub { display: none; } :root:not([data-mode="dark"]) .hb .hb-title, :root[data-mode="dark"] .hb .hb-title { font-size: 26px; } :root:not([data-mode="dark"]) .hb .hb-copy, :root[data-mode="dark"] .hb .hb-copy { padding-left: 28px; } :root:not([data-mode="dark"]) .hb .hb-cta, :root[data-mode="dark"] .hb .hb-cta { margin: 0 28px 0 16px; } :root:not([data-mode="dark"]) .hb.event .hb-art, :root[data-mode="dark"] .hb.event .hb-art { width: 330px; } :root:not([data-mode="dark"]) .hb.event .a1, :root[data-mode="dark"] .hb.event .a1 { display: none; } :root:not([data-mode="dark"]) .hb.event .a2, :root[data-mode="dark"] .hb.event .a2 { left: 6px; } :root:not([data-mode="dark"]) .hb.event .a3, :root[data-mode="dark"] .hb.event .a3 { left: 158px; } :root:not([data-mode="dark"]) .hb.event .a2 { left: 22px; } :root:not([data-mode="dark"]) .hb.event .a3 { left: 164px; } } /* 窄：橫幅自己 760px 以下（手機） */ @container (max-width: 760px) { .hb .hb-on-d { display: none; } .hb .hb-on-m { display: inline; } :root:not([data-mode="dark"]) .hb .hb-art, :root[data-mode="dark"] .hb .hb-art { position: absolute; top: 0; bottom: 0; } :root:not([data-mode="dark"]) .hb .hb-copy, :root[data-mode="dark"] .hb .hb-copy { padding: 14px 0 0 16px; align-self: flex-start; max-width: 62%; } :root:not([data-mode="dark"]) .hb .hb-brand, :root[data-mode="dark"] .hb .hb-brand { font-size: 11.5px; } :root:not([data-mode="dark"]) .hb .hb-title, :root[data-mode="dark"] .hb .hb-title { font-size: 20px; } :root:not([data-mode="dark"]) .hb .hb-sub, :root[data-mode="dark"] .hb .hb-sub { display: none; } :root:not([data-mode="dark"]) .hb .hb-cta, :root[data-mode="dark"] .hb .hb-cta { position: absolute; left: 16px; bottom: 16px; margin: 0; font-size: 13px; padding: 7px 14px; } :root:not([data-mode="dark"]) .hb.event .hb-art, :root[data-mode="dark"] .hb.event .hb-art { right: 0; width: 190px; } :root:not([data-mode="dark"]) .hb.event .a1, :root[data-mode="dark"] .hb.event .a1 { display: none; } :root:not([data-mode="dark"]) .hb.event .a2, :root[data-mode="dark"] .hb.event .a2 { left: -24px; top: -34px; transform: scale(.62); } :root:not([data-mode="dark"]) .hb.event .a3, :root[data-mode="dark"] .hb.event .a3 { left: 52px; top: 2px; transform: scale(.56) rotate(5deg); } :root:not([data-mode="dark"]) .hb.event .a2 { left: -4px; top: -16px; transform: scale(.6); } :root:not([data-mode="dark"]) .hb.event .a3 { left: 62px; top: 14px; transform: scale(.54) rotate(6deg); } :root[data-mode="dark"] .hb.clip .hb-art { right: -40px; width: 260px; } :root[data-mode="dark"] .hb.clip .hb-art i { background-size: 600px auto; background-position: -340px -85px; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 34%); mask-image: linear-gradient(90deg, transparent 20%, #000 34%); } :root:not([data-mode="dark"]) .hb.clip .hb-art { right: -14px; width: 150px; } :root:not([data-mode="dark"]) .hb.clip .hb-art i { top: 10px; width: 150px; height: 150px; background-size: 430px auto; background-position: -268px -48px; } :root:not([data-mode="dark"]) .hb.ping .hb-art, :root[data-mode="dark"] .hb.ping .hb-art { right: 2px; width: 170px; } :root:not([data-mode="dark"]) .hb.ping .hb-art i, :root[data-mode="dark"] .hb.ping .hb-art i { left: 0; width: 170px; height: 170px; top: -10px; background-size: 170px 170px; } :root:not([data-mode="dark"]) .hb.ping .hb-art { right: 14px; width: 116px; } :root:not([data-mode="dark"]) .hb.ping .hb-art i { top: 17px; left: 0; width: 116px; height: 116px; background-size: 146px 146px; box-shadow: 0 0 0 5px #dcecff, 0 8px 18px rgba(8,21,42,.3); } :root:not([data-mode="dark"]) .hb.tile .hb-art, :root[data-mode="dark"] .hb.tile .hb-art { right: 16px; width: 104px; } :root:not([data-mode="dark"]) .hb.tile .hb-art i, :root[data-mode="dark"] .hb.tile .hb-art i { left: 0; top: 23px; width: 104px; height: 104px; border-radius: 16px; background-size: 104px 104px; } :root:not([data-mode="dark"]) .hb.shot .hb-art, :root[data-mode="dark"] .hb.shot .hb-art { right: -56px; width: 190px; } :root:not([data-mode="dark"]) .hb.like .hb-art i, :root[data-mode="dark"] .hb.like .hb-art i { top: 18px; width: 190px; height: 114px; background-size: 190px 114px; background-position: 0 0; } :root:not([data-mode="dark"]) .hb.voice .hb-art i, :root[data-mode="dark"] .hb.voice .hb-art i { left: 0; top: 14px; width: 164px; height: 124px; background-size: 164px 124px; background-position: 0 0; } } /* 手機上卡片貼齊螢幕，但橫幅左右留 12px（跟原本的廣告版位一樣）。這一條看的是螢幕寬度 */ @media (max-width: 767px) { .hb { margin-left: 12px; margin-right: 12px; } .hb.hb-in { margin-left: 0; margin-right: 0; } /* 外面的容器已經有留白（資訊流那一列） */ }