CSS
/* 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; }
}