/* ===== A2AER 全站公共样式（由 views/header.php 内联样式外抽生成） ===== */ /* 1. 移动端溢出修复（不强制水平 padding：各页面自带 px-4，通栏区块如首页 Hero/CTA 需贴边） */ @media (max-width: 767px) { #mainContent { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } #mainContent > header { padding-left: 12px !important; padding-right: 12px !important; } .max-w-7xl, .max-w-6xl, .max-w-4xl { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .grid > * { max-width: 100% !important; } pre, code { white-space: pre-wrap !important; word-break: break-all !important; max-width: 100% !important; } table { display: block; overflow-x: auto; max-width: 100%; } img, svg { max-width: 100% !important; height: auto !important; } } /* 2. 系统字体栈（国内秒开，无需等待外部字体） */ @font-face { font-family: 'Inter'; src: local('Inter'), local('system-ui'), local('-apple-system'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'); } /* 3. Tailwind v2 预编译缺失类补齐 + 站点特效 */ body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Tailwind v3 兼容色板（预编译 v2 缺失的类名） */ .bg-indigo-50{background-color:#eef2ff}.bg-indigo-100{background-color:#e0e7ff}.bg-indigo-500{background-color:#6366f1}.bg-indigo-600{background-color:#4f46e5}.bg-indigo-700{background-color:#4338ca}.text-indigo-400{color:#818cf8}.text-indigo-500{color:#6366f1}.text-indigo-600{color:#4f46e5}.text-indigo-700{color:#4338ca}.border-indigo-200{border-color:#c7d2fe}.border-indigo-300{border-color:#a5b4fc}.border-indigo-400{border-color:#818cf8}.hover\:bg-indigo-100:hover{background-color:#e0e7ff}.hover\:bg-indigo-500:hover{background-color:#6366f1}.hover\:border-indigo-300:hover{border-color:#a5b4fc}.hover\:text-indigo-500:hover{color:#6366f1}.hover\:text-indigo-600:hover{color:#4f46e5}.focus\:border-indigo-400:focus{border-color:#818cf8}.bg-purple-50{background-color:#faf5ff}.bg-purple-500{background-color:#a855f7}.text-purple-500{color:#a855f7}.text-purple-600{color:#9333ea}.bg-pink-50{background-color:#fdf2f8}.bg-pink-500{background-color:#ec4899}.text-pink-500{color:#ec4899}.bg-amber-50{background-color:#fffbeb}.text-amber-400{color:#fbbf24}.text-amber-500{color:#f59e0b}.text-amber-600{color:#d97706}.border-amber-200{border-color:#fde68a}.bg-emerald-50{background-color:#ecfdf5}.bg-emerald-600{background-color:#059669}.bg-green-50{background-color:#f0fdf4}.bg-green-500{background-color:#22c55e}.bg-green-600{background-color:#16a34a}.text-green-500{color:#22c55e}.text-green-600{color:#16a34a}.border-green-200{border-color:#bbf7d0}.text-red-500{color:#ef4444}.bg-blue-50{background-color:#eff6ff}.border-blue-200{border-color:#bfdbfe}.text-blue-700{color:#1d4ed8}.hover\:bg-blue-100:hover{background-color:#dbeafe}.bg-red-50{background-color:#fef2f2}.border-red-200{border-color:#fecaca}.text-red-700{color:#b91c1c}.hover\:bg-green-100:hover{background-color:#dcfce7}.hover\:border-green-300:hover{border-color:#86efac}.hover\:text-green-700:hover{color:#15803d}.hover\:bg-red-100:hover{background-color:#fee2e2}.hover\:border-red-300:hover{border-color:#fca5a5}.hover\:text-red-600:hover{color:#dc2626}.hover\:bg-red-50:hover{background-color:#fef2f2}.text-green-700{color:#15803d}.border-green-200{border-color:#bbf7d0}.text-amber-700{color:#b45309}.bg-amber-50{background-color:#fffbeb}.border-amber-200{border-color:#fde68a}.bg-red-500{background-color:#ef4444}.bg-yellow-500{background-color:#eab308}.ring-indigo-500{--tw-ring-color:#6366f1}.ring-indigo-500\/20{--tw-ring-color:rgba(99,102,241,0.2)}.ring-indigo-100{--tw-ring-color:#e0e7ff}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-indigo-500\/15:focus{--tw-ring-color:rgba(99,102,241,0.15)} /* 渐变工具类：标准 from/to/via 由 Tailwind v2 CDN 原生提供，勿在此重定义 （此前覆盖版在 --tw-gradient-stops 中引用未定义的 var(--tw-gradient-via)， 导致无 via 的渐变（如 from-indigo-600 to-purple-600）整条失效 → 白字白底按钮）。 此处仅补 v2 不支持的斜杠透明度写法（v3 独有语法） */ .from-gray-900\/40{--tw-gradient-from:rgba(17,24,39,0.4);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)} .from-indigo-100\/70{--tw-gradient-from:rgba(224,231,255,0.7);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)} .from-indigo-100\/60{--tw-gradient-from:rgba(224,231,255,0.6);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)} .from-indigo-500\/20{--tw-gradient-from:rgba(99,102,241,0.2);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)} .from-gray-50\/80{--tw-gradient-from:rgba(249,250,251,0.8);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)} .via-purple-100\/50{--tw-gradient-via:rgba(243,232,255,0.5);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to,transparent)} .via-purple-100\/40{--tw-gradient-via:rgba(233,213,255,0.4);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to,transparent)} .to-purple-500\/20{--tw-gradient-to:rgba(168,85,247,0.2)} .to-gray-50\/50{--tw-gradient-to:rgba(249,250,251,0.5)} .to-indigo-50\/30{--tw-gradient-to:rgba(238,242,255,0.3)} .border-gray-100\/80{border-color:rgba(243,244,246,0.8)} /* v2 渐变色板补齐：CDN 的 stops 插件缺 amber/emerald/teal/orange/cyan/rose 组 （注意 to-* 只设 --tw-gradient-to，不重定义 --tw-gradient-stops） */ .from-amber-50{--tw-gradient-from:#fffbeb;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))} .to-orange-50{--tw-gradient-to:#fff7ed} .hover\:from-amber-100:hover{--tw-gradient-from:#fef3c7;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))} .hover\:to-orange-100:hover{--tw-gradient-to:#ffedd5} .from-emerald-500{--tw-gradient-from:#10b981;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))} .to-teal-600{--tw-gradient-to:#0d9488} .from-amber-500{--tw-gradient-from:#f59e0b;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))} .to-orange-600{--tw-gradient-to:#ea580c} .to-cyan-600{--tw-gradient-to:#0891b2} .to-rose-600{--tw-gradient-to:#e11d48} .from-cyan-50{--tw-gradient-from:#ecfeff;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))} .to-rose-50{--tw-gradient-to:#fff1f2} .to-emerald-50{--tw-gradient-to:#ecfdf5} .to-emerald-600{--tw-gradient-to:#059669} .from-green-600{--tw-gradient-from:#16a34a;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(22,163,74,0))} .hover\:to-emerald-500:hover{--tw-gradient-to:#10b981} /* 渐变紫系色值校准（v2 旧紫 #8b5cf6 → 设计稿 v3 紫 #a855f7 系） */ .via-purple-500{--tw-gradient-via:#a855f7;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to,rgba(168,85,247,0))} .to-purple-500{--tw-gradient-to:#a855f7} .to-purple-600{--tw-gradient-to:#9333ea} .max-w-xs{max-width:20rem}.aspect-video{aspect-ratio:16/9}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.backdrop-blur-\[2px\]{backdrop-filter:blur(2px)} /* ===== Tailwind v3 侧栏关键类（v2 预编译缺失） ===== */ .-translate-x-full{transform:translateX(-100%)} .translate-x-0{transform:translateX(0)} .translate-x-full{transform:translateX(100%)} .-translate-y-1\/2{transform:translateY(-50%)} .-translate-x-1\/2{transform:translateX(-50%)} .inset-0{top:0;right:0;bottom:0;left:0} .w-\[300px\]{width:300px}.h-\[300px\]{height:300px} @media(min-width:1024px){ .lg\:ml-60{margin-left:15rem} .lg\:ml-16{margin-left:4rem} .lg\:\!translate-x-0,.lg\:translate-x-0{transform:translateX(0)!important} .lg\:flex{display:flex!important} .lg\:hidden{display:none!important} .lg\:px-4{padding-left:1rem;padding-right:1rem} .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem} .lg\:px-8{padding-left:2rem;padding-right:2rem} .lg\:block{display:block!important} .md\:w-\[500px\],.lg\:w-\[500px\]{width:500px} .md\:h-\[500px\],.lg\:h-\[500px\]{height:500px} } @media(min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:inline{display:inline!important}} @media(min-width:768px){.md\:pb-0{padding-bottom:0}.md\:text-5xl{font-size:3rem}.md\:text-lg{font-size:1.125rem}.md\:w-\[500px\]{width:500px}.md\:h-\[500px\]{height:500px}.md\:w-\[800px\]{width:800px}.md\:h-\[800px\]{height:800px}} .bg-black\/30{background-color:rgba(0,0,0,0.3)} .shadow-gray-200\/50{box-shadow:0 10px 15px -3px rgba(229,231,235,0.5),0 4px 6px -2px rgba(229,231,235,0.25)} .ring-indigo-500\/20{--tw-ring-color:rgba(99,102,241,0.2)} .focus\:ring-indigo-500\/15:focus{--tw-ring-color:rgba(99,102,241,0.15)} .shadow-indigo-500\/30{box-shadow:0 0 15px rgba(99,102,241,0.3)} .shadow-green-500\/30{box-shadow:0 0 15px rgba(34,197,94,0.3)} .bg-indigo-200\/30{background-color:rgba(199,210,254,0.3)}.bg-purple-200\/30{background-color:rgba(233,213,255,0.3)}.bg-indigo-100\/70{background-color:rgba(224,233,255,0.7)}.bg-purple-100\/50{background-color:rgba(243,232,255,0.5)}.bg-pink-100{background-color:#fce7f3} /* WAP 端防溢出 */ html { overflow-x: hidden; } body { overflow-x: hidden; } pre, code { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } img { max-width: 100%; height: auto; } .overflow-x-auto { max-width: 100%; } /* 渐变文字 */ .gradient-text { background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 发光效果 */ .glow-purple { box-shadow: 0 0 40px rgba(168, 85, 247, 0.3); } .glow-blue { box-shadow: 0 0 40px rgba(99, 102, 241, 0.3); } .glow-text { text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } /* 卡片悬浮 */ .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.08); } .card-hover:hover .card-glow { opacity: 1; } .card-glow { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05)); opacity: 0; transition: opacity 0.4s; border-radius: inherit; } /* 背景动画 */ .bg-grid { background-image: linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.06) 1px, transparent 1px); background-size: 50px 50px; } /* 浮动动画 */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-float-delay { animation: float 6s ease-in-out infinite 2s; } /* 脉冲光环 */ @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } .animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; } /* 滑入动画 */ @keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-up { animation: slide-up 0.6s ease-out forwards; } .animate-slide-down { animation: slide-down 0.3s ease-out forwards; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } @keyframes slide-down { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } } /* 毛玻璃效果 — 浅色下用柔白实底替代模糊 */ .glass { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(229, 231, 235, 0.9); } /* iOS 安全区域 */ .safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } @supports (padding-bottom: env(safe-area-inset-bottom)) { .safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom); } } /* 移动端触控优化 */ @media (max-width: 767px) { input, textarea, select, button, a { touch-action: manipulation; font-size: 16px !important; /* 防止 iOS 自动缩放 */ } .touch-target { min-height: 44px; min-width: 44px; } } /* 边框光效 */ .border-glow { position: relative; } .border-glow::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899); border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.3s; } .border-glow:hover::before { opacity: 1; } /* 按钮光效 */ .btn-glow { position: relative; overflow: hidden; } .btn-glow::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .btn-glow:hover::before { left: 100%; } /* 分类卡片 */ .category-card { background: linear-gradient(135deg, #ffffff, #f9fafb); border: 1px solid rgba(229, 231, 235, 0.8); transition: all 0.3s; } .category-card:hover { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-color: rgba(99, 102, 241, 0.3); transform: scale(1.05); box-shadow: 0 8px 30px -10px rgba(99, 102, 241, 0.15); } .category-card:hover .cat-icon { background: linear-gradient(135deg, #6366f1, #a855f7); } .category-card:hover .cat-icon svg { color: #ffffff; } .cat-icon { transition: all 0.3s ease; } /* 统计数字动画 */ .stat-number { background: linear-gradient(135deg, #4338ca, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ===== Markdown 渲染样式 ===== */ .msg-markdown { font-size: 0.875rem; line-height: 1.7; color: #374151; } .msg-markdown p { margin-bottom: 0.5rem; } .msg-markdown p:last-child { margin-bottom: 0; } .msg-markdown strong { font-weight: 600; color: #111827; } .msg-markdown em { font-style: italic; } .msg-markdown a { color: #4f46e5; text-decoration: underline; } .msg-markdown ul, .msg-markdown ol { padding-left: 1.5rem; margin-bottom: 0.5rem; } .msg-markdown ul { list-style-type: disc; } .msg-markdown ol { list-style-type: decimal; } .msg-markdown li { margin-bottom: 0.25rem; } .msg-markdown h1, .msg-markdown h2, .msg-markdown h3 { font-weight: 700; color: #111827; margin-top: 1rem; margin-bottom: 0.5rem; } .msg-markdown h1 { font-size: 1.25rem; } .msg-markdown h2 { font-size: 1.125rem; } .msg-markdown h3 { font-size: 1rem; } .msg-markdown blockquote { border-left: 3px solid #c7d2fe; padding-left: 0.75rem; color: #6b7280; margin: 0.5rem 0; } .msg-markdown code:not(pre code) { background: #f3f4f6; color: #dc2626; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .msg-markdown pre { background: #1e293b; border-radius: 0.75rem; padding: 1rem; margin: 0.5rem 0; overflow-x: auto; } .msg-markdown pre code { background: transparent; color: #e2e8f0; padding: 0; font-size: 0.8125rem; line-height: 1.6; } .msg-markdown table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.8125rem; } .msg-markdown th, .msg-markdown td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; } .msg-markdown th { background: #f9fafb; font-weight: 600; } .msg-markdown hr { border: none; border-top: 1px solid #e5e7eb; margin: 0.75rem 0; } /* 滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f3f4f6; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } .scrollbar-none::-webkit-scrollbar { display: none; } .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } /* ===== 侧边栏样式 ===== */ .sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.75rem; color: #6b7280; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9375rem; font-weight: 500; } .sidebar-link:hover { color: #111827; background-color: #f3f4f6; transform: translateX(4px); } .sidebar-link.active, .sidebar-active { background-color: #eef2ff; color: #4f46e5; border: 1px solid rgba(99, 102, 241, 0.25); box-shadow: 0 0 20px rgba(99, 102, 241, 0.08); } .sidebar-link svg { flex-shrink: 0; } aside::-webkit-scrollbar { width: 4px; } aside::-webkit-scrollbar-track { background: transparent; } aside::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; } #sidebar.sidebar-open { transform: translateX(0) !important; } #sidebar-overlay.overlay-visible { display: block !important; } /* 侧栏折叠 */ .sidebar-collapsed { width: 64px !important; } .sidebar-collapsed .sidebar-text { display: none !important; } .sidebar-collapsed .sidebar-text\:inline { display: none !important; } .sidebar-collapsed nav { overflow: visible !important; } .sidebar-collapsed nav a { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } .sidebar-collapsed .sidebar-link { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } .sidebar-collapsed .sidebar-link svg { margin: 0; } .sidebar-collapsed .sidebar-link span { display: none; } .sidebar-collapsed .px-3 { padding-left: 0 !important; padding-right: 0 !important; } .sidebar-collapsed .px-4 { padding-left: 0 !important; padding-right: 0 !important; } .sidebar-collapsed .lg\:px-6 { padding-left: 0 !important; padding-right: 0 !important; } .sidebar-collapsed input { width: 0 !important; padding-left: 36px !important; padding-right: 0 !important; } .sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } /* 折叠时 LOGO 居中 */ .sidebar-collapsed .h-16 { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } .sidebar-collapsed .h-16 a { gap: 0; } /* 折叠时图标悬浮提示 */ .sidebar-collapsed .sidebar-link { position: relative; overflow: visible; } .sidebar-collapsed .sidebar-link:hover::after { content: attr(data-title); position: fixed; left: 72px; top: auto; margin-top: -14px; background: #1e293b; color: #f1f5f9; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; white-space: nowrap; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.35); pointer-events: none; line-height: 1.4; } /* 提示文字前加小三角指示器 */ .sidebar-collapsed .sidebar-link:hover::before { content: ''; position: fixed; left: 66px; margin-top: -4px; border: 5px solid transparent; border-right-color: #1e293b; z-index: 9999; pointer-events: none; } /* ===== T2 修复：Tailwind v3 arbitrary value 类补齐（v2 预编译缺失，视图已在使用） ===== */ .z-\[100\]{z-index:100} .z-\[110\]{z-index:110} .text-\[10px\]{font-size:10px} .text-\[11px\]{font-size:11px} .max-w-\[90vw\]{max-width:90vw} .max-w-\[130px\]{max-width:130px} .max-h-\[75vh\]{max-height:75vh} .min-w-\[16px\]{min-width:16px} .h-\[16px\]{height:16px} .leading-\[1\.1\]{line-height:1.1} .w-\[400px\]{width:400px}.h-\[400px\]{height:400px} .w-\[500px\]{width:500px}.h-\[500px\]{height:500px} .w-\[600px\]{width:600px}.h-\[600px\]{height:600px} .blur-\[120px\]{filter:blur(120px)} .blur-\[150px\]{filter:blur(150px)} .hover\:scale-\[1\.02\]:hover{transform:scale(1.02)}