style(ui): 全站 Memphis 换肤为玻璃拟态+极光渐变
设计 token 与中央类名保持不变,重写视觉:磨砂玻璃卡片、 紫→青渐变按钮、柔光阴影、发丝边框;emoji 图标换 SVG; 登录/支付/公告弹窗改为随主题的玻璃卡片。 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin
+172
-107
@@ -121,32 +121,32 @@ const caps = computed(() => {
|
||||
{
|
||||
key: 't2i', title: '文字生图', model: imageModels.value[0]?.id,
|
||||
desc: '一句话出图，画幅与分辨率按所选模型的可用范围给出。',
|
||||
tint: '#a7f3d0', color: '#065f46',
|
||||
tint: 'linear-gradient(135deg,#34d399,#2dd4bf)', color: '#fff',
|
||||
metas: [resRange.value, `${imageModels.value.length} 个模型`].filter(Boolean),
|
||||
},
|
||||
{
|
||||
key: 'i2i', title: '参考图生图', model: i2iModels[0]?.id,
|
||||
desc: '上传参考图换风格、改构图、做变体，支持多张参考。',
|
||||
tint: '#ffc1cc', color: '#9f1239',
|
||||
tint: 'linear-gradient(135deg,#e879f9,#f472b6)', color: '#fff',
|
||||
metas: ['多图参考', `${i2iModels.length} 个模型`],
|
||||
},
|
||||
{
|
||||
key: 't2v', title: '文字生视频', model: videoModels.value[0]?.id,
|
||||
desc: '一段描述生成短片，时长与分辨率按模型能力可选。',
|
||||
tint: '#bae6fd', color: '#075985',
|
||||
tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)', color: '#fff',
|
||||
metas: [durationRange.value, videoRes.value, `${videoModels.value.length} 个模型`].filter(Boolean),
|
||||
},
|
||||
{
|
||||
key: 'i2v', title: '图生视频', model: i2vModels[0]?.id,
|
||||
desc: '给参考图或首帧，让静态画面动起来。',
|
||||
tint: '#fef08a', color: '#92400e',
|
||||
tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)', color: '#fff',
|
||||
metas: ['参考图', `${i2vModels.length} 个模型`],
|
||||
},
|
||||
].filter((c) => c.model)
|
||||
})
|
||||
|
||||
// ---- model cards: the admin-set alias wins, so no upstream naming leaks ----
|
||||
const MODEL_TINT = ['#ec5b13', '#ffc1cc', '#bae6fd', '#a7f3d0', '#fef08a', '#f472b6', '#94a3b8']
|
||||
const MODEL_TINT = ['#7c5cfc', '#22d3ee', '#e879f9', '#34d399', '#a78bfa', '#38bdf8', '#94a3b8']
|
||||
const modelCards = computed(() => managed.value.map((m, i) => {
|
||||
const bits = []
|
||||
if (m.resolutions?.length) bits.push(m.resolutions.join(' / '))
|
||||
@@ -201,12 +201,18 @@ function useExample(ex) {
|
||||
<section class="hero-band relative overflow-hidden pt-14 md:pt-20 pb-12">
|
||||
<div class="anime-stars"></div>
|
||||
|
||||
<!-- floating memphis shapes (desktop only) -->
|
||||
<!-- floating aurora shapes (desktop only) -->
|
||||
<div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block">
|
||||
<span class="deco deco-a">🎨</span>
|
||||
<span class="deco deco-b">⚡</span>
|
||||
<span class="deco deco-a">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z"/></svg>
|
||||
</span>
|
||||
<span class="deco deco-b">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
|
||||
</span>
|
||||
<span class="deco deco-c">4K</span>
|
||||
<span class="deco deco-d">🎬</span>
|
||||
<span class="deco deco-d">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h13v12H3z"/><path d="M16 10l5-3v10l-5-3"/></svg>
|
||||
</span>
|
||||
<span class="deco deco-star">✦</span>
|
||||
<span class="deco deco-star deco-star-2">✦</span>
|
||||
</div>
|
||||
@@ -241,7 +247,7 @@ function useExample(ex) {
|
||||
</section>
|
||||
|
||||
<!-- ============ GALLERY MARQUEE (hero + bento imagery) ============ -->
|
||||
<section v-if="gallery.length" class="mt-6 -mx-4 md:-mx-8 overflow-hidden marquee-mask border-y-[3px] border-y-[color:var(--ink)] bg-[var(--surface)] py-4">
|
||||
<section v-if="gallery.length" class="mt-6 -mx-4 md:-mx-8 overflow-hidden marquee-mask border-y border-y-[color:var(--ink-soft)] bg-[var(--surface)] py-4">
|
||||
<div class="marquee flex gap-4 px-4 md:px-8 w-max">
|
||||
<button v-for="(card, i) in [...gallery, ...gallery]" :key="card.id + '-' + i" type="button"
|
||||
class="gcard" :style="cardBg(card)" :aria-label="card.title" @click="useExample(card)">
|
||||
@@ -257,17 +263,22 @@ function useExample(ex) {
|
||||
<!-- ============ KPI STRIP ============ -->
|
||||
<section class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div v-for="k in [
|
||||
{ v: modelCount, l: '在线模型', e: '🧩', bg: 'var(--m-yellow)' },
|
||||
{ v: caps.length, l: '创作方式', e: '🎨', bg: 'var(--m-pink)' },
|
||||
{ v: resRange, l: '输出分辨率', e: '🖼️', bg: 'var(--m-blue)' },
|
||||
{ v: avgLabel, l: '平均出片 · 近 24h', e: '⚡', bg: 'var(--m-mint)' },
|
||||
{ v: modelCount, l: '在线模型', i: 'models', tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)' },
|
||||
{ v: caps.length, l: '创作方式', i: 'wand', tint: 'linear-gradient(135deg,#e879f9,#f472b6)' },
|
||||
{ v: resRange, l: '输出分辨率', i: 'image', tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)' },
|
||||
{ v: avgLabel, l: '平均出片 · 近 24h', i: 'bolt', tint: 'linear-gradient(135deg,#34d399,#2dd4bf)' },
|
||||
]" :key="k.l"
|
||||
class="kpi-card px-5 py-4" :style="{ background: k.bg }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-lg">{{ k.e }}</span>
|
||||
<span class="text-[26px] font-black tabular-nums text-[#111]">{{ k.v }}</span>
|
||||
class="kpi-card px-5 py-4">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="kpi-ico" :style="{ background: k.tint }">
|
||||
<svg v-if="k.i === 'models'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
|
||||
<svg v-else-if="k.i === 'wand'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 4 5 5L7 22l-5-5z"/><path d="m14 7 3 3"/><path d="M9 6V4M7 8H5M9 10v2M11 8h2"/></svg>
|
||||
<svg v-else-if="k.i === 'image'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 16 5-5 3 3 4-4 6 6"/><circle cx="9" cy="9" r="1.4"/></svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
|
||||
</span>
|
||||
<span class="text-[26px] font-black tabular-nums text-[color:var(--fg)]">{{ k.v }}</span>
|
||||
</div>
|
||||
<div class="mt-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-[#111]/60">{{ k.l }}</div>
|
||||
<div class="mt-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-[color:var(--fg-3)]">{{ k.l }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -371,15 +382,15 @@ function useExample(ex) {
|
||||
注册即可开始，图像与视频都能试；不满意就换个模型，额度按次计费。
|
||||
</p>
|
||||
<button type="button" @click="go('/user')"
|
||||
class="mt-7 group inline-flex items-center gap-3 rounded-xl bg-[var(--m-orange)] text-white border-[3px] border-[color:var(--ink)] shadow-[5px_5px_0_var(--shadow-ink)] hover:shadow-[7px_7px_0_var(--shadow-ink)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-0.5 active:shadow-none pl-6 pr-3 py-3 text-sm font-extrabold transition-all">
|
||||
class="mt-7 group inline-flex items-center gap-3 rounded-xl text-white pl-6 pr-3 py-3 text-sm font-extrabold transition-all cta-go">
|
||||
免费开始
|
||||
<span class="w-8 h-8 rounded-lg bg-white text-[#111] border-2 border-[#111] grid place-items-center font-black group-hover:translate-x-1 transition-transform">→</span>
|
||||
<span class="w-8 h-8 rounded-lg bg-white/20 border border-white/30 grid place-items-center font-black group-hover:translate-x-1 transition-transform">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- thin footer line -->
|
||||
<footer class="mt-16 pt-10 border-t-[3px] border-t-[color:var(--ink)] flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-[color:var(--fg-3)]">
|
||||
<footer class="mt-16 pt-10 border-t border-t-[color:var(--ink-soft)] flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-[color:var(--fg-3)]">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-semibold text-[color:var(--fg-2)]">{{ site.title }}</span>
|
||||
<span>·</span>
|
||||
@@ -401,15 +412,18 @@ function useExample(ex) {
|
||||
gap: 0.5rem;
|
||||
max-width: 36rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 7px 7px 0 var(--shadow-ink);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.composer:focus-within {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 10px 10px 0 var(--m-orange);
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(124 92 252 / 0.5);
|
||||
box-shadow: 0 18px 50px var(--accent-glow), var(--glass-shadow);
|
||||
}
|
||||
.composer-input {
|
||||
flex: 1;
|
||||
@@ -425,48 +439,50 @@ function useExample(ex) {
|
||||
.composer-input::placeholder { color: var(--fg-faint); }
|
||||
.composer-go {
|
||||
flex: none;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid rgb(255 255 255 / 0.16);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
padding: 0.65rem 1.2rem;
|
||||
border-radius: 0.7rem;
|
||||
background: var(--m-orange);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
box-shadow: 0 6px 18px var(--accent-glow);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
|
||||
}
|
||||
.composer-go:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); filter: brightness(1.06); }
|
||||
.composer-go:active { transform: scale(0.96) translateY(2px); box-shadow: 0 0 0 var(--shadow-ink); }
|
||||
.composer-go:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); filter: brightness(1.07); }
|
||||
.composer-go:active { transform: scale(0.96) translateY(1px); box-shadow: 0 3px 10px var(--accent-glow); }
|
||||
|
||||
.chip {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
cursor: pointer;
|
||||
border: 2px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--surface);
|
||||
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.chip:hover {
|
||||
color: #111;
|
||||
background: var(--m-yellow);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
transform: translate(-1px, -1px);
|
||||
color: var(--fg);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.45);
|
||||
box-shadow: 0 4px 14px rgb(124 92 252 / 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
html.dark .chip:hover { color: #111; }
|
||||
|
||||
/* ---------- hero cards (kind=hero) ---------- */
|
||||
.fcard {
|
||||
position: absolute;
|
||||
border: 3px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 7px 7px 0 var(--shadow-ink);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
animation: fcardIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
|
||||
}
|
||||
@@ -511,28 +527,46 @@ html.dark .chip:hover { color: #111; }
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 1.35rem;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.cap-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3rem;
|
||||
right: -3rem;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgb(124 92 252 / 0.22), transparent 65%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.cap-card:hover {
|
||||
transform: translate(-3px, -3px);
|
||||
box-shadow: 9px 9px 0 var(--m-orange);
|
||||
transform: translateY(-4px);
|
||||
border-color: rgb(124 92 252 / 0.45);
|
||||
box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(124 92 252 / 0.14);
|
||||
}
|
||||
html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
.cap-arrow { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--fg-3); transition: color 0.15s ease; }
|
||||
.cap-card:hover .cap-arrow { color: var(--m-orange); }
|
||||
.cap-card:hover::before { opacity: 1; }
|
||||
.cap-arrow { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--fg-3); transition: color 0.15s ease, transform 0.15s ease; }
|
||||
.cap-card:hover .cap-arrow { color: var(--m-orange); transform: translate(2px, -2px); }
|
||||
.cap-icon {
|
||||
position: relative;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border-radius: 0.7rem;
|
||||
border: 2px solid var(--ink);
|
||||
border-radius: 0.8rem;
|
||||
border: 1px solid var(--ink-soft);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 0.9rem;
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.cap-icon svg { width: 1.25rem; height: 1.25rem; }
|
||||
.cap-meta {
|
||||
@@ -542,7 +576,7 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
color: var(--fg-2);
|
||||
padding: 0.18rem 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1.5px solid var(--ink-soft);
|
||||
border: 1px solid var(--ink-soft);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
@@ -550,14 +584,14 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
.tile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: 1.1rem;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--m-blue); }
|
||||
.tile:hover { transform: translateY(-3px); border-color: rgb(34 211 238 / 0.5); box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(34 211 238 / 0.14); }
|
||||
.tile-veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -584,14 +618,14 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: 1.1rem;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.work:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--m-pink); }
|
||||
.work:hover { transform: translateY(-3px); border-color: rgb(232 121 249 / 0.5); box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(232 121 249 / 0.14); }
|
||||
.work-img { display: block; width: 100%; aspect-ratio: 4 / 5; transition: transform 0.5s ease; }
|
||||
.work:hover .work-img { transform: scale(1.04); }
|
||||
.work-overlay {
|
||||
@@ -627,11 +661,12 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: rgb(11 13 19);
|
||||
background: var(--m-yellow);
|
||||
border: 2px solid #111;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #7c5cfc, #22d3ee);
|
||||
border: 1px solid rgb(255 255 255 / 0.25);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
box-shadow: 0 4px 14px rgb(124 92 252 / 0.4);
|
||||
}
|
||||
|
||||
/* ---------- model row ---------- */
|
||||
@@ -643,14 +678,15 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
width: 14.5rem;
|
||||
overflow: hidden;
|
||||
padding: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
border: 2.5px solid var(--ink);
|
||||
border-radius: 1.1rem;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--surface);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: box-shadow 0.18s ease, transform 0.18s ease;
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.model-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--m-mint); }
|
||||
html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
.model-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.45); box-shadow: var(--glass-shadow-lg); }
|
||||
.model-glow {
|
||||
position: absolute;
|
||||
top: -2.5rem;
|
||||
@@ -659,39 +695,43 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
height: 8rem;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
opacity: 0.3;
|
||||
opacity: 0.35;
|
||||
}
|
||||
.model-tag {
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
padding: 0.18rem 0.55rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1.5px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
}
|
||||
.model-tag.is-image { background: var(--m-mint); color: #065f46; }
|
||||
.model-tag.is-video { background: var(--m-blue); color: #075985; }
|
||||
.model-tag.is-image { background: rgb(52 211 153 / 0.16); color: rgb(5 150 105); border-color: rgb(52 211 153 / 0.4); }
|
||||
.model-tag.is-video { background: rgb(34 211 238 / 0.16); color: rgb(8 145 178); border-color: rgb(34 211 238 / 0.4); }
|
||||
html.dark .model-tag.is-image { color: rgb(110 231 183); }
|
||||
html.dark .model-tag.is-video { color: rgb(103 232 249); }
|
||||
|
||||
/* ---------- hero band + memphis deco ---------- */
|
||||
/* ---------- hero band + aurora deco ---------- */
|
||||
.hero-band {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
/* Floating crayon chips scattered around the headline — each is a small
|
||||
ink-outlined tile with a hard shadow and its own idle animation. */
|
||||
/* Floating glass chips scattered around the headline — each is a small
|
||||
frosted tile with a soft shadow and its own idle animation. */
|
||||
.deco {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.deco svg { width: 45%; height: 45%; color: var(--m-orange); }
|
||||
.deco-a {
|
||||
left: 7%; top: 22%;
|
||||
width: 3.6rem; height: 3.6rem;
|
||||
border-radius: 0.9rem;
|
||||
background: var(--m-yellow);
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
transform: rotate(-8deg);
|
||||
animation: memphis-float 6s ease-in-out infinite;
|
||||
}
|
||||
@@ -699,34 +739,35 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
right: 8%; top: 16%;
|
||||
width: 3rem; height: 3rem;
|
||||
border-radius: 999px;
|
||||
background: var(--m-pink);
|
||||
font-size: 1.2rem;
|
||||
transform: rotate(6deg);
|
||||
animation: memphis-wiggle 3.5s ease-in-out infinite;
|
||||
}
|
||||
.deco-b svg { color: var(--m-orange-2); }
|
||||
.deco-c {
|
||||
left: 13%; bottom: 16%;
|
||||
width: 3.2rem; height: 2.4rem;
|
||||
border-radius: 0.6rem;
|
||||
background: var(--m-blue);
|
||||
border-radius: 0.7rem;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--m-orange);
|
||||
transform: rotate(9deg);
|
||||
animation: memphis-float 7s ease-in-out infinite reverse;
|
||||
}
|
||||
.deco-d {
|
||||
right: 13%; bottom: 20%;
|
||||
width: 3.4rem; height: 2.6rem;
|
||||
border-radius: 0.7rem;
|
||||
background: var(--m-mint);
|
||||
font-size: 1.15rem;
|
||||
border-radius: 0.8rem;
|
||||
transform: rotate(-7deg);
|
||||
animation: memphis-bounce 4s ease-in-out infinite;
|
||||
}
|
||||
.deco-d svg { color: #34d399; }
|
||||
.deco-star {
|
||||
left: 22%; top: 10%;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
font-size: 1.7rem;
|
||||
color: var(--m-orange);
|
||||
animation: memphis-wiggle 4s ease-in-out infinite;
|
||||
@@ -739,14 +780,37 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .deco { animation: none; } }
|
||||
|
||||
/* KPI tiles — flat crayon fills, dark ink type (readable in both themes). */
|
||||
/* KPI tiles — frosted cards with a gradient icon chip. */
|
||||
.kpi-card {
|
||||
border: 2.5px solid var(--ink);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.kpi-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); }
|
||||
.kpi-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.4); box-shadow: var(--glass-shadow-lg); }
|
||||
.kpi-ico {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.6rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
flex: none;
|
||||
box-shadow: 0 4px 12px rgb(124 92 252 / 0.3);
|
||||
}
|
||||
.kpi-ico svg { width: 1.05rem; height: 1.05rem; }
|
||||
|
||||
/* ---------- CTA button ---------- */
|
||||
.cta-go {
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
border: 1px solid rgb(255 255 255 / 0.2);
|
||||
box-shadow: 0 10px 30px var(--accent-glow);
|
||||
}
|
||||
.cta-go:hover { transform: translateY(-2px); box-shadow: 0 14px 38px var(--accent-glow); filter: brightness(1.07); }
|
||||
.cta-go:active { transform: translateY(1px) scale(0.98); box-shadow: 0 4px 14px var(--accent-glow); }
|
||||
|
||||
/* ---------- gallery marquee ---------- */
|
||||
.marquee-mask {
|
||||
@@ -767,18 +831,19 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.gcard:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 7px 7px 0 var(--m-orange);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgb(124 92 252 / 0.5);
|
||||
box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(124 92 252 / 0.16);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee { animation: none; }
|
||||
|
||||
Reference in New Issue
Block a user