/* ───────────────────────────────────────────────────────────── * GoGo 先生 · Design Tokens * 墨黑 70% / 紙白 25% / 先生紅 5% * Inter · Noto Sans TC · JetBrains Mono · Noto Serif TC * ───────────────────────────────────────────────────────────── */ /* 字型改由各頁 的 + 載入， * 消除 CSS @import 的序列 render-block（見 feature-043）。 * 字重已刪減：Inter 去 300、Noto Sans TC 去 300、Noto Serif TC 去 600（全站 0/3 使用）。 */ /* 零位移 fallback（feature-044）：async 字型 swap 期間用 metric 對齊的本地字型， * 寬度對齊品牌字型 → 文字不重排、視覺切換最小。本地字型不存在時瀏覽器自動跳到下一個（system-ui）。 */ @font-face { font-family: "Inter-fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 105.1%; /* Inter 比 Arial 寬 5.1%（量測） */ } @font-face { font-family: "NotoSansTC-fallback"; src: local("PingFang TC"), local("PingFang SC"), local("Heiti TC"), local("Microsoft JhengHei"); size-adjust: 100%; /* PingFang 寬度 = Noto Sans TC（量測 1.0000） */ } :root { /* ── INK · 墨黑（主背景） ── */ --go-ink: #0a0a0a; /* PRIMARY · INK */ --go-ink-2: #141414; /* SURFACE 02 · 深炭 */ --go-ink-3: #1c1c1c; /* SURFACE 03 · 石墨 */ /* ── PAPER · 紙白（前景文字 / on-dark）· 全局提亮到最醒目 ── */ --go-paper: #ffffff; /* ON-DARK · TEXT (純白最高亮) */ --go-paper-2: #f4f0e7; /* ON-DARK ALT (bumped 從 #ece8df) */ --go-muted: rgba(255,255,255,0.82); /* MUTED 改用純白基底 + 0.82 alpha */ --go-faint: rgba(255,255,255,0.32); /* FAINT 線/邊 */ --go-line: rgba(255,255,255,0.26); /* HAIRLINE */ --go-grid: rgba(255,255,255,0.07); /* 棋盤格紋 */ --go-border-card: rgba(193,39,45,0.45); /* 卡片/影片紅邊框 */ /* 卡片邊框暖光 · 日出地平線感（紅+黃+藍）· 靜態 */ --go-glow-horizon: 0 8px 22px -10px rgba(193,39,45,0.55), 0 14px 36px -10px rgba(251,188,5,0.28), 0 -3px 14px -6px rgba(66,133,244,0.22), inset 0 -1px 0 rgba(251,188,5,0.22), inset 0 1px 0 rgba(193,39,45,0.18); /* ── 先生紅 · 5% 重點 ── */ --go-red: #c1272d; /* ACCENT KEY · 印章紅 */ --go-red-bright: #e23b42; /* ACCENT HOVER */ --go-red-deep: #8b1a1a; /* ACCENT DEEP */ /* ── 金銀銅 · 限定場景（金=ADR-0007 五場景含排行榜 Top3；銀=中性冷灰；銅=暖褐 ADR-0008 系）── */ --go-gold: #c9a961; /* 金 · 印章金 */ --go-gold-deep: #8a6f3a; --go-silver: #c8ccd2; /* 銀 · 中性冷灰 */ --go-bronze: #b97a45; /* 銅 · 暖褐 */ /* ── 字體系統 ── * 含零位移 fallback（feature-044）：async 字型載入前用 metric 對齊的 fallback， * swap 時不重排、視覺切換最小。中文 PingFang 寬度本就 = Noto Sans TC（量測 1.0000）， * Inter 比 Arial 寬 5.1% → fallback size-adjust 105.1%。fallback 字型不存在時自動降級到 system-ui。 */ --font-display: "Inter", "Inter-fallback", "Noto Sans TC", "NotoSansTC-fallback", system-ui, sans-serif; --font-sans: "Noto Sans TC", "NotoSansTC-fallback", "Inter", "Inter-fallback", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --font-stamp: "Noto Serif TC", serif; /* ── 字級 ── (bumped small/tiny/body 加大壓縮跟大字差距) */ --t-display: 56px; --t-h1: 42px; --t-h2: 28px; --t-h3: 20px; --t-body: 17px; --t-small: 14px; --t-tiny: 12px; --t-mark: 64px; /* ── 字距 ── */ --ls-display: -0.04em; /* Inter 大字 */ --ls-tight: -0.01em; /* H1 中文 */ --ls-base: 0.02em; /* body */ --ls-mono: 0.18em; /* meta */ --ls-mono-wide: 0.3em; /* eyebrow */ /* ── 行高 ── */ --lh-tight: 1.05; --lh-snug: 1.3; --lh-body: 1.65; /* ── 間距 ── */ --s-1: 4px; --s-2: 8px; --s-3: 14px; --s-4: 20px; --s-5: 28px; --s-6: 36px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ── 圓角 ── */ --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --radius-4: 16px; --radius-pill: 999px; /* ── 陰影 ── */ --shadow-card: 0 16px 40px -16px rgba(0,0,0,0.65); --shadow-stone: 0 24px 60px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04); --shadow-red: 0 16px 40px -18px rgba(193,39,45,0.55); /* ── 棋盤格紋 (32px 一格 · 紙白細線) ── */ --goban-32: linear-gradient(0deg, var(--go-grid) 1px, transparent 1px), linear-gradient(90deg, var(--go-grid) 1px, transparent 1px); --goban-44: linear-gradient(0deg, var(--go-faint) 1px, transparent 1px), linear-gradient(90deg, var(--go-faint) 1px, transparent 1px); /* ── 語意 ── */ --bg: var(--go-ink); --fg: var(--go-paper); --fg-mute: var(--go-muted); --accent: var(--go-red); --border: var(--go-line); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); } /* 預留捲軸空間，避免載入時捲軸出現導致內容變窄重排（防版面跳動 · feature-044）。 * 桌面有效；行動裝置為 overlay 捲軸本就不佔寬。 */ html { scrollbar-gutter: stable; } /* ────────────────────────────────────────────────────────────── * Aurora · 流動式漸層星光（fixed 底層，z-index -2 / -1） * 用法：在 body 內加
* 並把 body bg 改 transparent、各 section bg 改半透明 rgba 才會 bleed through * ────────────────────────────────────────────────────────────── */ .aurora { position: fixed; inset: 0; z-index: -2; background: var(--go-ink); overflow: hidden; pointer-events: none; } .aurora::before, .aurora::after { content: ""; position: absolute; inset: -40%; pointer-events: none; will-change: transform; } .aurora::before { background: radial-gradient(ellipse 50% 42% at 18% 22%, rgba(193,39,45,0.75), transparent 60%), radial-gradient(ellipse 44% 38% at 82% 78%, rgba(193,39,45,0.65), transparent 60%), radial-gradient(ellipse 42% 36% at 58% 14%, rgba(66,133,244,0.75), transparent 60%), radial-gradient(ellipse 36% 30% at 28% 78%, rgba(66,133,244,0.55), transparent 60%); filter: blur(80px); animation: aurora-drift-1 18s ease-in-out infinite; } .aurora::after { background: radial-gradient(ellipse 48% 42% at 85% 22%, rgba(251,188,5,0.65), transparent 60%), radial-gradient(ellipse 42% 36% at 14% 82%, rgba(193,39,45,0.6), transparent 60%), radial-gradient(ellipse 38% 32% at 50% 55%, rgba(66,133,244,0.55), transparent 60%), radial-gradient(ellipse 32% 28% at 72% 60%, rgba(251,188,5,0.45), transparent 60%); filter: blur(95px); animation: aurora-drift-2 24s ease-in-out infinite reverse; } @keyframes aurora-drift-1 { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 20% { transform: translate(8%, -10%) rotate(2deg) scale(1.15); } 40% { transform: translate(-6%, 8%) rotate(-3deg) scale(1.25); } 60% { transform: translate(10%, 5%) rotate(1deg) scale(0.95); } 80% { transform: translate(-8%, -6%) rotate(-2deg) scale(1.1); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } } @keyframes aurora-drift-2 { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(-12%, 6%) rotate(-3deg) scale(1.2); } 50% { transform: translate(8%, -10%) rotate(4deg) scale(0.9); } 75% { transform: translate(-5%, 8%) rotate(-2deg) scale(1.3); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); } } .aurora-stars { position: fixed; inset: -10%; z-index: -1; pointer-events: none; background-image: radial-gradient(2.5px 2.5px at 12% 18%, rgba(246,243,236,1), transparent 60%), radial-gradient(2px 2px at 28% 42%, rgba(251,188,5,1), transparent 60%), radial-gradient(2.5px 2.5px at 47% 28%, rgba(246,243,236,0.95), transparent 60%), radial-gradient(2px 2px at 62% 12%, rgba(66,133,244,1), transparent 60%), radial-gradient(2.5px 2.5px at 78% 38%, rgba(246,243,236,1), transparent 60%), radial-gradient(2px 2px at 88% 22%, rgba(251,188,5,0.95), transparent 60%), radial-gradient(2.5px 2.5px at 18% 62%, rgba(246,243,236,0.95), transparent 60%), radial-gradient(2px 2px at 36% 78%, rgba(66,133,244,1), transparent 60%), radial-gradient(2px 2px at 54% 88%, rgba(246,243,236,0.85), transparent 60%), radial-gradient(2px 2px at 72% 70%, rgba(251,188,5,0.95), transparent 60%), radial-gradient(2.5px 2.5px at 86% 92%, rgba(246,243,236,1), transparent 60%), radial-gradient(2px 2px at 8% 92%, rgba(66,133,244,0.9), transparent 60%), radial-gradient(2px 2px at 42% 55%, rgba(246,243,236,0.85), transparent 60%), radial-gradient(2px 2px at 68% 48%, rgba(251,188,5,0.85), transparent 60%), radial-gradient(2.5px 2.5px at 22% 35%, rgba(66,133,244,0.85), transparent 60%), radial-gradient(1.5px 1.5px at 5% 30%, rgba(251,188,5,0.7), transparent 60%), radial-gradient(1.5px 1.5px at 95% 50%, rgba(66,133,244,0.7), transparent 60%), radial-gradient(1.5px 1.5px at 38% 8%, rgba(246,243,236,0.7), transparent 60%), radial-gradient(1.5px 1.5px at 58% 96%, rgba(251,188,5,0.7), transparent 60%), radial-gradient(1.5px 1.5px at 92% 78%, rgba(66,133,244,0.7), transparent 60%); background-repeat: no-repeat; background-size: 100% 100%; will-change: transform, opacity; animation: stars-twinkle 3s ease-in-out infinite alternate, stars-drift 40s linear infinite; } @keyframes stars-twinkle { 0% { opacity: 0.45; } 50% { opacity: 0.85; } 100% { opacity: 1; } } @keyframes stars-drift { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2.5%, -3%); } 75% { transform: translate(-2%, -2.5%); } 100% { transform: translate(0, 0); } } /* 啟用 aurora 的頁面：body 加 .has-aurora，自動把 body bg 設透明 */ body.has-aurora { background: transparent; } /* ── 卡片邊框暖光（日出地平線感）· 套用全站常見 card class ── */ .method, .benefit, .tl-row, .course-card, .course-row, .yt-card, .student-card, .stone-card, .channel, .shop-card, .value-card, .media-card, .faq-list, .founder-list, .hero-video, .plan { box-shadow: var(--go-glow-horizon); } /* ── 影片元素 · 加粗紅邊 3px + 動態漸層流光（紅→金→藍循環）── */ .hero-video, .yt-card, .yt-thumb, .yt-featured, .yt-featured-video, .student-photo--yt, .video-modal-frame { border-width: 3px !important; border-color: rgba(193,39,45,0.65) !important; animation: video-glow-flow 8s ease-in-out infinite; } @keyframes video-glow-flow { 0%, 100% { box-shadow: 0 -6px 28px -4px rgba(193,39,45,0.5), 8px 6px 40px -8px rgba(251,188,5,0.32), -8px 6px 40px -8px rgba(66,133,244,0.28), 0 0 0 1px rgba(193,39,45,0.35); } 33% { box-shadow: 6px -6px 32px -4px rgba(251,188,5,0.4), -8px 8px 44px -8px rgba(193,39,45,0.55), 8px 0 40px -8px rgba(66,133,244,0.35), 0 0 0 1px rgba(251,188,5,0.3); } 66% { box-shadow: -6px -4px 32px -4px rgba(66,133,244,0.4), 8px 8px 44px -8px rgba(251,188,5,0.4), 0 6px 40px -8px rgba(193,39,45,0.5), 0 0 0 1px rgba(66,133,244,0.3); } } @media (prefers-reduced-motion: reduce) { .hero-video, .yt-card, .yt-thumb, .yt-featured, .yt-featured-video, .student-photo--yt, .video-modal-frame { animation: none; } } /* ── 煙霧遮罩 · 上下兩道 scrim · 焦點聚焦中段 ── */ body.has-aurora::before, body.has-aurora::after { content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: 70; /* 在 sticky-cta(80) 之下、aurora/content 之上 */ } body.has-aurora::before { top: 0; height: 120px; background: linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 50%, transparent 100%); } body.has-aurora::after { bottom: 0; height: 90px; background: linear-gradient(to top, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.15) 50%, transparent 100%); } @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .aurora-stars { animation: none; } } body { font-family: var(--font-sans); font-size: var(--t-body); font-weight: 500; /* bumped 400→500 中文字看起來扎實 */ line-height: var(--lh-body); letter-spacing: var(--ls-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 全站 small text 統一加重（描述文、條列、meta）── */ p, li { font-weight: 500; } img { display: block; max-width: 100%; } /* ── Typography primitives ── */ .go-display { font-family: var(--font-display); font-weight: 900; font-size: var(--t-display); letter-spacing: var(--ls-display); line-height: var(--lh-tight); color: var(--go-paper); } .go-h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-h1); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--go-paper); } .go-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-h2); letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--go-paper); } .go-meta { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-tiny); letter-spacing: var(--ls-mono-wide); color: var(--go-muted); text-transform: uppercase; } .go-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); color: var(--go-paper-2); } /* ────────────────────────────────────────────────────────────── * 副標 chip 背板系統 · 中性 ghost 分類 / 項目 tag * 註：course-tag / course-row-tag（階段標籤）刻意「不」走 chip — * 改為各頁 inline 的純文字 eyebrow（紅字無底），與全站 section eyebrow 一致。 * 原膠囊版含藍色漸層，違反禁區 §9 #3（不可加藍綠橙紫黃）+ 朱印章為方形語彙，已移除（feature-037 後續）。 * ────────────────────────────────────────────────────────────── */ .product-cat, .shop-cat, .student-meta { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(246,243,236,0.05); border: 1px solid var(--go-faint); border-radius: var(--radius-pill); color: var(--go-paper-2); } /* 紅 .num 前綴在 chip 內保留紅 */ .course-tag .num, .course-row-tag .num { color: var(--go-red); font-weight: 700; } /* ── Buttons ── */ .go-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 28px; background: var(--go-paper); color: var(--go-ink); border: 0; border-radius: var(--radius-1); font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.2em; cursor: pointer; transition: background .2s ease, transform .2s ease; } .go-btn:hover { background: var(--go-paper-2); transform: translateY(-1px); } .go-btn--red { background: var(--go-red); color: var(--go-paper); box-shadow: var(--shadow-red); } .go-btn--red:hover { background: var(--go-red-bright); } .go-btn--ghost { background: transparent; color: var(--go-paper); box-shadow: inset 0 0 0 1px var(--go-faint); } .go-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--go-paper); background: transparent; } /* ── 印章 Stamp (red square with 先) ── */ .go-stamp { width: 44px; height: 44px; background: var(--go-red); display: grid; place-items: center; border-radius: var(--radius-1); font-family: var(--font-stamp); font-weight: 900; font-size: 24px; color: var(--go-paper); line-height: 1; } /* ── 棋盤格紋背景 ── */ .go-goban-bg { background-color: var(--go-ink); background-image: var(--goban-32); background-size: 32px 32px; } /* ───────────────────────────────────────────────────────────── * Admin Topbar — 後台 Sticky Header * 四頁共用：admin.html / roster.html / disciple.html / quests.html * HTML 結構仍每頁手寫（待之後另議是否抽 partial） * ───────────────────────────────────────────────────────────── */ .a-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: rgba(10,10,10,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--go-line); box-shadow: 0 1px 0 var(--go-line); } .a-brand { display: flex; align-items: center; gap: 10px; } .a-brand .word { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.05em; line-height: 1; color: var(--go-paper); } .a-brand .word .dot { color: var(--go-red); } .a-brand .div { width: 1px; height: 18px; background: var(--go-faint); } .a-brand .role { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.32em; color: var(--go-muted); text-transform: uppercase; } .a-user { display: flex; align-items: center; gap: 10px; } .a-user .av { width: 32px; height: 32px; border-radius: 50%; background: var(--go-red); color: var(--go-paper); display: grid; place-items: center; font-family: var(--font-stamp); font-weight: 900; font-size: 16px; } .a-user .who { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; color: var(--go-paper-2); text-transform: uppercase; } .a-back { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--go-red); /* admin 導航返回鍵走先生紅（守 §9） */ text-decoration: none; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; } .a-back:hover { color: var(--go-red-bright); } /* hover 提亮 */ /* ─── feature-037 · 區塊圖片背板系統 ────────────────────────── 用法：容器加 class="has-bp"，內第一個子元素放
缺圖時只顯示暗色 scrim（優雅降級 · 無破圖）；不用 ::before 避免與既有卡片偽元素衝突。 */ .has-bp { position: relative; isolation: isolate; } /* 用 .has-bp > .bp-layer 提高 specificity（0,2,0），蓋過區塊既有的 `.xxx-card > * { position:relative }` 否則 bp-layer 被改成 relative → 高度 0 → 背板不顯示（course/quest/badge 卡踩過此雷）。 */ .has-bp > .bp-layer { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 70% 30%; border-radius: inherit; overflow: hidden; pointer-events: none; /* 對齊 landing 風格濾鏡（brightness↓ saturate↓）：壓暗+去飽和讓圖更內斂、文字更突出。 filter 只作用在圖（::after 為純黑 scrim，brightness 不改黑色 alpha）。 */ filter: brightness(0.62) saturate(0.8); } .has-bp > .bp-layer::after { content: ""; position: absolute; inset: 0; /* 比舊版更暗、更均勻（最亮角 0.3→0.55，貼近 landing overlay ~0.5–0.65） */ background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.72) 55%, rgba(10,10,10,0.55) 100%); } .has-bp > *:not(.bp-layer) { position: relative; z-index: 1; } /* ────────────────────────────────────────────────────────────── * Icon 系統（feature-039）· 全站 emoji → 品牌線條 icon * · 用 mask + currentColor 自動繼承色 * 尺寸隨字級（1em）；放大用 font-size 或 .ico--lg。保留 → 箭頭與 ● 項目點不在此系統。 * ────────────────────────────────────────────────────────────── */ .ico{display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:-0.14em;} .ico--lg{width:1.3em;height:1.3em;vertical-align:-0.28em;} .ico--trophy{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fsvg%3E');} .ico--medal{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.21%2015%202.66%207.14a2%202%200%200%201%20.13-2.2L4.4%202.8A2%202%200%200%201%206%202h12a2%202%200%200%201%201.6.8l1.6%202.14a2%202%200%200%201%20.14%202.2L16.79%2015%22%2F%3E%3Cpath%20d%3D%22M11%2012%205.12%202.2%22%2F%3E%3Cpath%20d%3D%22m13%2012%205.88-9.8%22%2F%3E%3Cpath%20d%3D%22M8%207h8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M12%2018v-2h-.5%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.21%2015%202.66%207.14a2%202%200%200%201%20.13-2.2L4.4%202.8A2%202%200%200%201%206%202h12a2%202%200%200%201%201.6.8l1.6%202.14a2%202%200%200%201%20.14%202.2L16.79%2015%22%2F%3E%3Cpath%20d%3D%22M11%2012%205.12%202.2%22%2F%3E%3Cpath%20d%3D%22m13%2012%205.88-9.8%22%2F%3E%3Cpath%20d%3D%22M8%207h8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M12%2018v-2h-.5%22%2F%3E%3C%2Fsvg%3E');} .ico--swords{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2214.5%2017.5%203%206%203%203%206%203%2017.5%2014.5%22%2F%3E%3Cline%20x1%3D%2213%22%20x2%3D%2219%22%20y1%3D%2219%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20x2%3D%2220%22%20y1%3D%2216%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2219%22%20x2%3D%2221%22%20y1%3D%2221%22%20y2%3D%2219%22%2F%3E%3Cpolyline%20points%3D%2214.5%206.5%2018%203%2021%203%2021%206%2017.5%209.5%22%2F%3E%3Cline%20x1%3D%225%22%20x2%3D%229%22%20y1%3D%2214%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%227%22%20x2%3D%224%22%20y1%3D%2217%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%223%22%20x2%3D%225%22%20y1%3D%2219%22%20y2%3D%2221%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2214.5%2017.5%203%206%203%203%206%203%2017.5%2014.5%22%2F%3E%3Cline%20x1%3D%2213%22%20x2%3D%2219%22%20y1%3D%2219%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20x2%3D%2220%22%20y1%3D%2216%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2219%22%20x2%3D%2221%22%20y1%3D%2221%22%20y2%3D%2219%22%2F%3E%3Cpolyline%20points%3D%2214.5%206.5%2018%203%2021%203%2021%206%2017.5%209.5%22%2F%3E%3Cline%20x1%3D%225%22%20x2%3D%229%22%20y1%3D%2214%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%227%22%20x2%3D%224%22%20y1%3D%2217%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%223%22%20x2%3D%225%22%20y1%3D%2219%22%20y2%3D%2221%22%2F%3E%3C%2Fsvg%3E');} .ico--lock{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E');} .ico--phone{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E');} .ico--mail{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E');} .ico--link{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%2F%3E%3C%2Fsvg%3E');} .ico--wave{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2011V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%2F%3E%3Cpath%20d%3D%22M14%2010V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v2%22%2F%3E%3Cpath%20d%3D%22M10%2010.5V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202v8%22%2F%3E%3Cpath%20d%3D%22M18%208a2%202%200%201%201%204%200v6a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2011V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%2F%3E%3Cpath%20d%3D%22M14%2010V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v2%22%2F%3E%3Cpath%20d%3D%22M10%2010.5V6a2%202%200%200%200-2-2a2%202%200%200%200-2%202v8%22%2F%3E%3Cpath%20d%3D%22M18%208a2%202%200%201%201%204%200v6a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%2F%3E%3C%2Fsvg%3E');} .ico--sparkles{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.94%2014.5A2%202%200%200%200%208.5%2013.06l-5.64-1.45a.5.5%200%200%201%200-.97L8.5%209.19a2%202%200%200%200%201.44-1.44l1.45-5.64a.5.5%200%200%201%20.97%200l1.45%205.64a2%202%200%200%200%201.44%201.44l5.64%201.45a.5.5%200%200%201%200%20.97l-5.64%201.45a2%202%200%200%200-1.44%201.44l-1.45%205.64a.5.5%200%200%201-.97%200z%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.94%2014.5A2%202%200%200%200%208.5%2013.06l-5.64-1.45a.5.5%200%200%201%200-.97L8.5%209.19a2%202%200%200%200%201.44-1.44l1.45-5.64a.5.5%200%200%201%20.97%200l1.45%205.64a2%202%200%200%200%201.44%201.44l5.64%201.45a.5.5%200%200%201%200%20.97l-5.64%201.45a2%202%200%200%200-1.44%201.44l-1.45%205.64a.5.5%200%200%201-.97%200z%22%2F%3E%3C%2Fsvg%3E');} .ico--party{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.8%2011.3%202%2022l10.7-3.79%22%2F%3E%3Cpath%20d%3D%22M4%203h.01%22%2F%3E%3Cpath%20d%3D%22M22%208h.01%22%2F%3E%3Cpath%20d%3D%22M15%202h.01%22%2F%3E%3Cpath%20d%3D%22M22%2020h.01%22%2F%3E%3Cpath%20d%3D%22m22%202-2.24.75a2.9%202.9%200%200%200-1.96%203.12c.1.86-.57%201.63-1.45%201.63h-.38c-.86%200-1.6.6-1.76%201.44L14%2010%22%2F%3E%3Cpath%20d%3D%22m22%2013-.82-.33c-.86-.34-1.82.2-1.98%201.11C19.09%2014.5%2018.48%2015%2017.77%2015H17%22%2F%3E%3Cpath%20d%3D%22m11%202%20.33.82c.34.86-.2%201.82-1.11%201.98C9.5%204.91%209%205.52%209%206.23V7%22%2F%3E%3Cpath%20d%3D%22M11%2013c1.93%201.93%202.83%204.17%202%205-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5%20.83-.83%203.07.07%205%202Z%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.8%2011.3%202%2022l10.7-3.79%22%2F%3E%3Cpath%20d%3D%22M4%203h.01%22%2F%3E%3Cpath%20d%3D%22M22%208h.01%22%2F%3E%3Cpath%20d%3D%22M15%202h.01%22%2F%3E%3Cpath%20d%3D%22M22%2020h.01%22%2F%3E%3Cpath%20d%3D%22m22%202-2.24.75a2.9%202.9%200%200%200-1.96%203.12c.1.86-.57%201.63-1.45%201.63h-.38c-.86%200-1.6.6-1.76%201.44L14%2010%22%2F%3E%3Cpath%20d%3D%22m22%2013-.82-.33c-.86-.34-1.82.2-1.98%201.11C19.09%2014.5%2018.48%2015%2017.77%2015H17%22%2F%3E%3Cpath%20d%3D%22m11%202%20.33.82c.34.86-.2%201.82-1.11%201.98C9.5%204.91%209%205.52%209%206.23V7%22%2F%3E%3Cpath%20d%3D%22M11%2013c1.93%201.93%202.83%204.17%202%205-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5%20.83-.83%203.07.07%205%202Z%22%2F%3E%3C%2Fsvg%3E');} .ico--star{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E');} .ico--star-o{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E');} .ico--check{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E');} .ico--close{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E');} .ico--warning{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3Z%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3Z%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E');} .ico--clock{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E');} .ico--key{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22m10.7%2012.3%208.3-8.3%22%2F%3E%3Cpath%20d%3D%22m17%206%203%203%22%2F%3E%3Cpath%20d%3D%22m14%209%203%203%22%2F%3E%3C%2Fsvg%3E');mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22m10.7%2012.3%208.3-8.3%22%2F%3E%3Cpath%20d%3D%22m17%206%203%203%22%2F%3E%3Cpath%20d%3D%22m14%209%203%203%22%2F%3E%3C%2Fsvg%3E');} /* ────────────────────────────────────────────────────────────── * Grain 噪點材質（feature-040）· .go-grain 區塊疊一層極淡 film grain * 用 ::after（注意：套用的元素 ::after 須未被佔用）· mix-blend-mode 讓暗底也可見 * ────────────────────────────────────────────────────────────── */ .go-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20256%20256%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.82%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%%27%20height%3D%27100%%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E");background-size:200px 200px;opacity:0.10;mix-blend-mode:overlay;}