15 CSS Testimonials & Reviews 07 / 15
Crypto Aurora
Deep-space aurora mesh background with animated gradient bands, hexagon clip-path avatars, holographic shimmer card borders on hover, volume bars, on-chain wallet hashes, and neon-per-chain color accents.
The code
<section class="tm-cau" aria-label="On-chain reviews">
<span class="tm-cau-aurora" aria-hidden="true">
<span class="tm-cau-band tm-cau-ab1"></span>
<span class="tm-cau-band tm-cau-ab2"></span>
<span class="tm-cau-band tm-cau-ab3"></span>
<span class="tm-cau-band tm-cau-ab4"></span>
</span>
<header class="tm-cau-header">
<div class="tm-cau-logo-text">ChainVerify · On-Chain Reviews</div>
<div class="tm-cau-header-stat">
<div class="tm-cau-hstat-num">$2.4B</div>
<div class="tm-cau-hstat-lbl">volume protected · 48,220 reviews</div>
</div>
</header>
<div class="tm-cau-grid">
<article class="tm-cau-card tm-cau-c1 tm-cau-feat">
<span class="tm-cau-al" aria-hidden="true"></span>
<span class="tm-cau-qm" aria-hidden="true">“</span>
<div class="tm-cau-token">◆ DeFi · Verified Trader</div>
<div class="tm-cau-vol-bar" aria-hidden="true">
<span class="tm-cau-vb" style="height:8px"></span>
<span class="tm-cau-vb" style="height:14px"></span>
<span class="tm-cau-vb" style="height:10px"></span>
<span class="tm-cau-vb" style="height:18px"></span>
<span class="tm-cau-vb" style="height:12px"></span>
<span class="tm-cau-vb" style="height:20px"></span>
<span class="tm-cau-vb" style="height:8px"></span>
</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">I've used six DeFi protocols in three years. The <b>gas optimization alone</b> paid for itself in a single month of active trading. No rug, no drama — just protocol doing exactly what it promised, on-chain, auditable, forever. That kind of integrity is rare in this space.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">0x</span>
<span><cite class="tm-cau-an">0xVelvet.eth</cite><span class="tm-cau-ar">DeFi power user · 3y holder</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x7f4a...c3b2</span>
</article>
<article class="tm-cau-card tm-cau-c2">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ NFT · Verified Collector</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Minted on day one. Floor is <b>14× entry</b>. The roadmap delivered every milestone. This is what web3 was supposed to feel like.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">NK</span>
<span><cite class="tm-cau-an">NeonKoi.eth</cite><span class="tm-cau-ar">NFT collector · Top 0.1%</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x2a9f...81de</span>
</article>
<article class="tm-cau-card tm-cau-c3">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ DAO · Core Contributor</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Governance is <b>actually governable</b>. Voted on 40+ proposals. My voice moved the protocol. That's not something I can say about many DAOs.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">PR</span>
<span><cite class="tm-cau-an">ProtocolRaven</cite><span class="tm-cau-ar">DAO core contributor</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0xb3d1...59ac</span>
</article>
<article class="tm-cau-card tm-cau-c4">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ Yield · Verified</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q"><b>38% APY</b>, zero impermanent loss surprises. The risk dashboard is the most honest I've seen in DeFi. Period.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">AL</span>
<span><cite class="tm-cau-an">AlphaSatoshi</cite><span class="tm-cau-ar">Yield farmer · 2y</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x4e8c...f12a</span>
</article>
<article class="tm-cau-card tm-cau-c5">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ Bridge · Verified</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Bridged <b>$400K across chains</b> last quarter. Zero failed transactions. Settlement was faster than CEX withdrawals. Genuinely shocked.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">WX</span>
<span><cite class="tm-cau-an">WhalexBTC</cite><span class="tm-cau-ar">Multi-chain trader</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x9c2b...7e34</span>
</article>
</div>
</section> <section class="tm-cau" aria-label="On-chain reviews">
<span class="tm-cau-aurora" aria-hidden="true">
<span class="tm-cau-band tm-cau-ab1"></span>
<span class="tm-cau-band tm-cau-ab2"></span>
<span class="tm-cau-band tm-cau-ab3"></span>
<span class="tm-cau-band tm-cau-ab4"></span>
</span>
<header class="tm-cau-header">
<div class="tm-cau-logo-text">ChainVerify · On-Chain Reviews</div>
<div class="tm-cau-header-stat">
<div class="tm-cau-hstat-num">$2.4B</div>
<div class="tm-cau-hstat-lbl">volume protected · 48,220 reviews</div>
</div>
</header>
<div class="tm-cau-grid">
<article class="tm-cau-card tm-cau-c1 tm-cau-feat">
<span class="tm-cau-al" aria-hidden="true"></span>
<span class="tm-cau-qm" aria-hidden="true">“</span>
<div class="tm-cau-token">◆ DeFi · Verified Trader</div>
<div class="tm-cau-vol-bar" aria-hidden="true">
<span class="tm-cau-vb" style="height:8px"></span>
<span class="tm-cau-vb" style="height:14px"></span>
<span class="tm-cau-vb" style="height:10px"></span>
<span class="tm-cau-vb" style="height:18px"></span>
<span class="tm-cau-vb" style="height:12px"></span>
<span class="tm-cau-vb" style="height:20px"></span>
<span class="tm-cau-vb" style="height:8px"></span>
</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">I've used six DeFi protocols in three years. The <b>gas optimization alone</b> paid for itself in a single month of active trading. No rug, no drama — just protocol doing exactly what it promised, on-chain, auditable, forever. That kind of integrity is rare in this space.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">0x</span>
<span><cite class="tm-cau-an">0xVelvet.eth</cite><span class="tm-cau-ar">DeFi power user · 3y holder</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x7f4a...c3b2</span>
</article>
<article class="tm-cau-card tm-cau-c2">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ NFT · Verified Collector</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Minted on day one. Floor is <b>14× entry</b>. The roadmap delivered every milestone. This is what web3 was supposed to feel like.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">NK</span>
<span><cite class="tm-cau-an">NeonKoi.eth</cite><span class="tm-cau-ar">NFT collector · Top 0.1%</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x2a9f...81de</span>
</article>
<article class="tm-cau-card tm-cau-c3">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ DAO · Core Contributor</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Governance is <b>actually governable</b>. Voted on 40+ proposals. My voice moved the protocol. That's not something I can say about many DAOs.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">PR</span>
<span><cite class="tm-cau-an">ProtocolRaven</cite><span class="tm-cau-ar">DAO core contributor</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0xb3d1...59ac</span>
</article>
<article class="tm-cau-card tm-cau-c4">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ Yield · Verified</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q"><b>38% APY</b>, zero impermanent loss surprises. The risk dashboard is the most honest I've seen in DeFi. Period.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">AL</span>
<span><cite class="tm-cau-an">AlphaSatoshi</cite><span class="tm-cau-ar">Yield farmer · 2y</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x4e8c...f12a</span>
</article>
<article class="tm-cau-card tm-cau-c5">
<span class="tm-cau-al" aria-hidden="true"></span>
<div class="tm-cau-token">◆ Bridge · Verified</div>
<div class="tm-cau-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-cau-q">Bridged <b>$400K across chains</b> last quarter. Zero failed transactions. Settlement was faster than CEX withdrawals. Genuinely shocked.</blockquote>
<figcaption class="tm-cau-author">
<span class="tm-cau-av" aria-hidden="true">WX</span>
<span><cite class="tm-cau-an">WhalexBTC</cite><span class="tm-cau-ar">Multi-chain trader</span></span>
</figcaption>
<span class="tm-cau-wallet" aria-hidden="true">0x9c2b...7e34</span>
</article>
</div>
</section>/* Crypto Aurora — animated aurora mesh background. The aurora layer
is contained inside .tm-cau via overflow:hidden + position:absolute
(not viewport-fixed). Holographic shimmer borders fire on card hover
via a gradient inset + mask trick. Hexagon avatars use clip-path. */
.tm-cau {
--tm-cau-bg: #04040f;
--tm-cau-s1: #7b2fff;
--tm-cau-s2: #00d4ff;
--tm-cau-s3: #ff2d9b;
--tm-cau-s4: #39ff7a;
--tm-cau-card: rgba(255,255,255,0.035);
--tm-cau-border: rgba(255,255,255,0.07);
--tm-cau-text: #e8e8ff;
--tm-cau-muted: #6060a0;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-cau-bg);
font-family: 'Oxanium', system-ui, sans-serif;
color: var(--tm-cau-text);
overflow: hidden;
min-height: 520px;
}
.tm-cau-aurora {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.tm-cau-band {
position: absolute;
border-radius: 50%;
filter: blur(80px);
animation: tm-cau-float 10s ease-in-out infinite alternate;
}
.tm-cau-ab1 { width: 700px; height: 350px; background: linear-gradient(135deg, var(--tm-cau-s1), transparent); top: -100px; left: -100px; opacity: 0.25; animation-delay: 0s; }
.tm-cau-ab2 { width: 600px; height: 300px; background: linear-gradient(45deg, var(--tm-cau-s2), transparent); top: 100px; right: -150px; opacity: 0.2; animation-delay: -3s; }
.tm-cau-ab3 { width: 500px; height: 250px; background: linear-gradient(225deg, var(--tm-cau-s3), transparent); bottom: -80px; left: 200px; opacity: 0.18; animation-delay: -6s; }
.tm-cau-ab4 { width: 400px; height: 200px; background: linear-gradient(315deg, var(--tm-cau-s4), transparent); bottom: 50px; right: 100px; opacity: 0.14; animation-delay: -9s; }
@keyframes tm-cau-float {
from { transform: translate(0,0) scale(1) rotate(0deg); }
to { transform: translate(30px,20px) scale(1.12) rotate(8deg); }
}
.tm-cau-header {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.tm-cau-logo-text {
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tm-cau-s2);
}
.tm-cau-header-stat { text-align: right; }
.tm-cau-hstat-num {
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
}
.tm-cau-hstat-lbl {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tm-cau-muted);
margin-top: 3px;
}
.tm-cau-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 2px;
}
.tm-cau-card {
background: var(--tm-cau-card);
border: 1px solid var(--tm-cau-border);
backdrop-filter: blur(24px);
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
animation: tm-cau-in 0.7s cubic-bezier(.22, 1, .36, 1) both;
display: flex;
flex-direction: column;
}
.tm-cau-card:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.14);
transform: translateY(-2px);
}
.tm-cau-card:nth-child(1) { animation-delay: 0.05s; }
.tm-cau-card:nth-child(2) { animation-delay: 0.12s; }
.tm-cau-card:nth-child(3) { animation-delay: 0.19s; }
.tm-cau-card:nth-child(4) { animation-delay: 0.26s; }
.tm-cau-card:nth-child(5) { animation-delay: 0.33s; }
@keyframes tm-cau-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-cau-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2), var(--tm-cau-s3), var(--tm-cau-s4));
opacity: 0;
transition: opacity 0.4s;
z-index: -1;
}
.tm-cau-card:hover::before { opacity: 0.5; }
.tm-cau-card::after {
content: '';
position: absolute;
inset: 0;
background: var(--tm-cau-bg);
opacity: 0.97;
z-index: -1;
transition: opacity 0.4s;
}
.tm-cau-card:hover::after { opacity: 0.94; }
.tm-cau-feat {
grid-row: 1 / 3;
}
.tm-cau-al {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.tm-cau-c1 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s2)); }
.tm-cau-c2 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s2), var(--tm-cau-s4)); }
.tm-cau-c3 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s3), var(--tm-cau-s1)); }
.tm-cau-c4 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s4), var(--tm-cau-s2)); }
.tm-cau-c5 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s3)); }
.tm-cau-qm {
font-size: 5rem;
line-height: 0.8;
font-weight: 800;
opacity: 0.07;
position: absolute;
top: 16px;
left: 20px;
pointer-events: none;
font-family: 'Oxanium', serif;
}
.tm-cau-c1 .tm-cau-qm { color: var(--tm-cau-s1); }
.tm-cau-token {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
margin-bottom: 14px;
width: fit-content;
}
.tm-cau-c1 .tm-cau-token { background: rgba(123,47,255,0.15); color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-c2 .tm-cau-token { background: rgba(0,212,255,0.12); color: var(--tm-cau-s2); border: 1px solid rgba(0,212,255,0.25); }
.tm-cau-c3 .tm-cau-token { background: rgba(255,45,155,0.12); color: var(--tm-cau-s3); border: 1px solid rgba(255,45,155,0.25); }
.tm-cau-c4 .tm-cau-token { background: rgba(57,255,122,0.12); color: var(--tm-cau-s4); border: 1px solid rgba(57,255,122,0.25); }
.tm-cau-c5 .tm-cau-token { background: rgba(123,47,255,0.15); color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-vol-bar {
display: flex;
align-items: flex-end;
gap: 2px;
height: 22px;
margin-bottom: 12px;
}
.tm-cau-vb {
width: 4px;
background: currentColor;
border-radius: 2px 2px 0 0;
animation: tm-cau-vbanim 1.2s ease-in-out infinite alternate;
}
.tm-cau-c1 .tm-cau-vol-bar { color: rgba(123,47,255,0.6); }
.tm-cau-vb:nth-child(1) { animation-delay: 0s; }
.tm-cau-vb:nth-child(2) { animation-delay: 0.15s; }
.tm-cau-vb:nth-child(3) { animation-delay: 0.3s; }
.tm-cau-vb:nth-child(4) { animation-delay: 0.45s; }
.tm-cau-vb:nth-child(5) { animation-delay: 0.6s; }
.tm-cau-vb:nth-child(6) { animation-delay: 0.75s; }
.tm-cau-vb:nth-child(7) { animation-delay: 0.9s; }
@keyframes tm-cau-vbanim {
from { opacity: 0.4; }
to { opacity: 1; }
}
.tm-cau-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
font-size: 12px;
}
.tm-cau-c1 .tm-cau-stars, .tm-cau-c5 .tm-cau-stars { color: var(--tm-cau-s1); }
.tm-cau-c2 .tm-cau-stars { color: var(--tm-cau-s2); }
.tm-cau-c3 .tm-cau-stars { color: var(--tm-cau-s3); }
.tm-cau-c4 .tm-cau-stars { color: var(--tm-cau-s4); }
.tm-cau-q {
font-size: 0.88rem;
line-height: 1.65;
color: rgba(232,232,255,0.78);
font-weight: 300;
margin: 0 0 20px;
font-style: normal;
flex: 1;
}
.tm-cau-q b { font-weight: 700; color: var(--tm-cau-text); }
.tm-cau-feat .tm-cau-q { font-size: 1.05rem; }
.tm-cau-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 14px;
margin-top: auto;
}
.tm-cau-av {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
font-family: 'Space Mono', ui-monospace, monospace;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
flex-shrink: 0;
}
.tm-cau-c1 .tm-cau-av, .tm-cau-c5 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s1), rgba(123,47,255,0.5)); color: #fff; }
.tm-cau-c2 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s2), rgba(0,212,255,0.5)); color: #000; }
.tm-cau-c3 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s3), rgba(255,45,155,0.5)); color: #fff; }
.tm-cau-c4 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s4), rgba(57,255,122,0.5)); color: #000; }
.tm-cau-an {
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--tm-cau-text);
line-height: 1.3;
display: block;
}
.tm-cau-ar {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-cau-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
.tm-cau-wallet {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 8px;
color: rgba(255,255,255,0.2);
position: absolute;
bottom: 10px;
right: 12px;
letter-spacing: 0.05em;
}
@media (max-width: 820px) {
.tm-cau-grid { grid-template-columns: 1fr; }
.tm-cau-feat { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.tm-cau-band, .tm-cau-vb, .tm-cau-card { animation: none; }
.tm-cau-card:hover { transform: none; }
} /* Crypto Aurora — animated aurora mesh background. The aurora layer
is contained inside .tm-cau via overflow:hidden + position:absolute
(not viewport-fixed). Holographic shimmer borders fire on card hover
via a gradient inset + mask trick. Hexagon avatars use clip-path. */
.tm-cau {
--tm-cau-bg: #04040f;
--tm-cau-s1: #7b2fff;
--tm-cau-s2: #00d4ff;
--tm-cau-s3: #ff2d9b;
--tm-cau-s4: #39ff7a;
--tm-cau-card: rgba(255,255,255,0.035);
--tm-cau-border: rgba(255,255,255,0.07);
--tm-cau-text: #e8e8ff;
--tm-cau-muted: #6060a0;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-cau-bg);
font-family: 'Oxanium', system-ui, sans-serif;
color: var(--tm-cau-text);
overflow: hidden;
min-height: 520px;
}
.tm-cau-aurora {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.tm-cau-band {
position: absolute;
border-radius: 50%;
filter: blur(80px);
animation: tm-cau-float 10s ease-in-out infinite alternate;
}
.tm-cau-ab1 { width: 700px; height: 350px; background: linear-gradient(135deg, var(--tm-cau-s1), transparent); top: -100px; left: -100px; opacity: 0.25; animation-delay: 0s; }
.tm-cau-ab2 { width: 600px; height: 300px; background: linear-gradient(45deg, var(--tm-cau-s2), transparent); top: 100px; right: -150px; opacity: 0.2; animation-delay: -3s; }
.tm-cau-ab3 { width: 500px; height: 250px; background: linear-gradient(225deg, var(--tm-cau-s3), transparent); bottom: -80px; left: 200px; opacity: 0.18; animation-delay: -6s; }
.tm-cau-ab4 { width: 400px; height: 200px; background: linear-gradient(315deg, var(--tm-cau-s4), transparent); bottom: 50px; right: 100px; opacity: 0.14; animation-delay: -9s; }
@keyframes tm-cau-float {
from { transform: translate(0,0) scale(1) rotate(0deg); }
to { transform: translate(30px,20px) scale(1.12) rotate(8deg); }
}
.tm-cau-header {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.tm-cau-logo-text {
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tm-cau-s2);
}
.tm-cau-header-stat { text-align: right; }
.tm-cau-hstat-num {
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
}
.tm-cau-hstat-lbl {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tm-cau-muted);
margin-top: 3px;
}
.tm-cau-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 2px;
}
.tm-cau-card {
background: var(--tm-cau-card);
border: 1px solid var(--tm-cau-border);
backdrop-filter: blur(24px);
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
animation: tm-cau-in 0.7s cubic-bezier(.22, 1, .36, 1) both;
display: flex;
flex-direction: column;
}
.tm-cau-card:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.14);
transform: translateY(-2px);
}
.tm-cau-card:nth-child(1) { animation-delay: 0.05s; }
.tm-cau-card:nth-child(2) { animation-delay: 0.12s; }
.tm-cau-card:nth-child(3) { animation-delay: 0.19s; }
.tm-cau-card:nth-child(4) { animation-delay: 0.26s; }
.tm-cau-card:nth-child(5) { animation-delay: 0.33s; }
@keyframes tm-cau-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-cau-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, var(--tm-cau-s1), var(--tm-cau-s2), var(--tm-cau-s3), var(--tm-cau-s4));
opacity: 0;
transition: opacity 0.4s;
z-index: -1;
}
.tm-cau-card:hover::before { opacity: 0.5; }
.tm-cau-card::after {
content: '';
position: absolute;
inset: 0;
background: var(--tm-cau-bg);
opacity: 0.97;
z-index: -1;
transition: opacity 0.4s;
}
.tm-cau-card:hover::after { opacity: 0.94; }
.tm-cau-feat {
grid-row: 1 / 3;
}
.tm-cau-al {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.tm-cau-c1 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s2)); }
.tm-cau-c2 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s2), var(--tm-cau-s4)); }
.tm-cau-c3 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s3), var(--tm-cau-s1)); }
.tm-cau-c4 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s4), var(--tm-cau-s2)); }
.tm-cau-c5 .tm-cau-al { background: linear-gradient(to right, var(--tm-cau-s1), var(--tm-cau-s3)); }
.tm-cau-qm {
font-size: 5rem;
line-height: 0.8;
font-weight: 800;
opacity: 0.07;
position: absolute;
top: 16px;
left: 20px;
pointer-events: none;
font-family: 'Oxanium', serif;
}
.tm-cau-c1 .tm-cau-qm { color: var(--tm-cau-s1); }
.tm-cau-token {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
margin-bottom: 14px;
width: fit-content;
}
.tm-cau-c1 .tm-cau-token { background: rgba(123,47,255,0.15); color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-c2 .tm-cau-token { background: rgba(0,212,255,0.12); color: var(--tm-cau-s2); border: 1px solid rgba(0,212,255,0.25); }
.tm-cau-c3 .tm-cau-token { background: rgba(255,45,155,0.12); color: var(--tm-cau-s3); border: 1px solid rgba(255,45,155,0.25); }
.tm-cau-c4 .tm-cau-token { background: rgba(57,255,122,0.12); color: var(--tm-cau-s4); border: 1px solid rgba(57,255,122,0.25); }
.tm-cau-c5 .tm-cau-token { background: rgba(123,47,255,0.15); color: var(--tm-cau-s1); border: 1px solid rgba(123,47,255,0.3); }
.tm-cau-vol-bar {
display: flex;
align-items: flex-end;
gap: 2px;
height: 22px;
margin-bottom: 12px;
}
.tm-cau-vb {
width: 4px;
background: currentColor;
border-radius: 2px 2px 0 0;
animation: tm-cau-vbanim 1.2s ease-in-out infinite alternate;
}
.tm-cau-c1 .tm-cau-vol-bar { color: rgba(123,47,255,0.6); }
.tm-cau-vb:nth-child(1) { animation-delay: 0s; }
.tm-cau-vb:nth-child(2) { animation-delay: 0.15s; }
.tm-cau-vb:nth-child(3) { animation-delay: 0.3s; }
.tm-cau-vb:nth-child(4) { animation-delay: 0.45s; }
.tm-cau-vb:nth-child(5) { animation-delay: 0.6s; }
.tm-cau-vb:nth-child(6) { animation-delay: 0.75s; }
.tm-cau-vb:nth-child(7) { animation-delay: 0.9s; }
@keyframes tm-cau-vbanim {
from { opacity: 0.4; }
to { opacity: 1; }
}
.tm-cau-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
font-size: 12px;
}
.tm-cau-c1 .tm-cau-stars, .tm-cau-c5 .tm-cau-stars { color: var(--tm-cau-s1); }
.tm-cau-c2 .tm-cau-stars { color: var(--tm-cau-s2); }
.tm-cau-c3 .tm-cau-stars { color: var(--tm-cau-s3); }
.tm-cau-c4 .tm-cau-stars { color: var(--tm-cau-s4); }
.tm-cau-q {
font-size: 0.88rem;
line-height: 1.65;
color: rgba(232,232,255,0.78);
font-weight: 300;
margin: 0 0 20px;
font-style: normal;
flex: 1;
}
.tm-cau-q b { font-weight: 700; color: var(--tm-cau-text); }
.tm-cau-feat .tm-cau-q { font-size: 1.05rem; }
.tm-cau-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 14px;
margin-top: auto;
}
.tm-cau-av {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
font-family: 'Space Mono', ui-monospace, monospace;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
flex-shrink: 0;
}
.tm-cau-c1 .tm-cau-av, .tm-cau-c5 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s1), rgba(123,47,255,0.5)); color: #fff; }
.tm-cau-c2 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s2), rgba(0,212,255,0.5)); color: #000; }
.tm-cau-c3 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s3), rgba(255,45,155,0.5)); color: #fff; }
.tm-cau-c4 .tm-cau-av { background: linear-gradient(135deg, var(--tm-cau-s4), rgba(57,255,122,0.5)); color: #000; }
.tm-cau-an {
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--tm-cau-text);
line-height: 1.3;
display: block;
}
.tm-cau-ar {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-cau-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
.tm-cau-wallet {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 8px;
color: rgba(255,255,255,0.2);
position: absolute;
bottom: 10px;
right: 12px;
letter-spacing: 0.05em;
}
@media (max-width: 820px) {
.tm-cau-grid { grid-template-columns: 1fr; }
.tm-cau-feat { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.tm-cau-band, .tm-cau-vb, .tm-cau-card { animation: none; }
.tm-cau-card:hover { transform: none; }
}