CSS
/* ─── 03 Neon Pricing Cards — rotating conic-gradient border ───── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Exo+2:wght@300;700;900&display=swap');
/* @property is a document-level registration; can't be scoped to a
wrapper. Declared once here and referenced from .nn-crd. */
@property --nn-crd-a {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.nn-crd {
position: relative;
width: 100%;
min-height: 640px;
background: #070711;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 16px;
font-family: 'Space Grotesk', sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.nn-crd *,
.nn-crd *::before,
.nn-crd *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Ambient gradient backdrop — was body::before fixed; scoped. */
.nn-crd::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 15% 50%, rgba(0,180,255,0.06) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 85% 50%, rgba(180,0,255,0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.nn-crd .stage {
position: relative;
z-index: 1;
display: flex;
gap: 28px;
padding: 24px;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
}
.nn-crd .card {
position: relative;
width: 220px;
padding: 32px 24px 28px;
border-radius: 4px;
background: rgba(12,12,28,0.95);
display: flex;
flex-direction: column;
gap: 16px;
cursor: pointer;
transition: transform 0.3s ease;
}
.nn-crd .card-featured { padding-top: 40px; }
.nn-crd .card:hover { transform: translateY(-6px); }
/* Rotating conic border via pseudo */
.nn-crd .card::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: 6px;
background: conic-gradient(
from var(--nn-crd-a),
var(--c1) 0deg,
var(--c2) 90deg,
transparent 130deg,
transparent 230deg,
var(--c2) 270deg,
var(--c1) 360deg
);
animation: nn-crd-spin 3s linear infinite;
z-index: 0;
}
@keyframes nn-crd-spin { to { --nn-crd-a: 360deg; } }
.nn-crd .card::after {
content: '';
position: absolute;
inset: 1.5px;
border-radius: 3px;
background: #0c0c1e;
z-index: 1;
}
.nn-crd .card > * { position: relative; z-index: 2; }
.nn-crd .card-cyan { --c1: #00eeff; --c2: rgba(0,238,255,0.3); }
.nn-crd .card-pink { --c1: #ff2d78; --c2: rgba(255,45,120,0.3); }
.nn-crd .card-violet { --c1: #bf5fff; --c2: rgba(191,95,255,0.3); }
.nn-crd .card-cyan:hover::before { box-shadow: 0 0 28px rgba(0,238,255,0.45), 0 0 60px rgba(0,238,255,0.2); }
.nn-crd .card-pink:hover::before { box-shadow: 0 0 28px rgba(255,45,120,0.45), 0 0 60px rgba(255,45,120,0.2); }
.nn-crd .card-violet:hover::before { box-shadow: 0 0 28px rgba(191,95,255,0.45), 0 0 60px rgba(191,95,255,0.2); }
/* Content */
.nn-crd .card-tier {
font-family: 'Exo 2', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.nn-crd .card-cyan .card-tier { color: #00eeff; text-shadow: 0 0 10px #00eeff; }
.nn-crd .card-pink .card-tier { color: #ff2d78; text-shadow: 0 0 10px #ff2d78; }
.nn-crd .card-violet .card-tier { color: #bf5fff; text-shadow: 0 0 10px #bf5fff; }
.nn-crd .card-price {
font-family: 'Exo 2', sans-serif;
font-weight: 900;
font-size: 42px;
color: #f0f0ff;
line-height: 1;
letter-spacing: -0.02em;
}
.nn-crd .card-price sup {
font-size: 18px;
font-weight: 600;
vertical-align: super;
color: rgba(240,240,255,0.6);
}
.nn-crd .card-period {
font-size: 12px;
color: rgba(240,240,255,0.35);
margin-top: 2px;
letter-spacing: 0.05em;
}
.nn-crd .card-divider { height: 1px; background: rgba(255,255,255,0.07); }
.nn-crd .card-cyan .card-divider { background: linear-gradient(90deg, transparent, rgba(0,238,255,0.35), transparent); }
.nn-crd .card-pink .card-divider { background: linear-gradient(90deg, transparent, rgba(255,45,120,0.35), transparent); }
.nn-crd .card-violet .card-divider { background: linear-gradient(90deg, transparent, rgba(191,95,255,0.35), transparent); }
.nn-crd .card-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nn-crd .card-features li {
font-size: 12px;
color: rgba(210,210,240,0.7);
padding-left: 18px;
position: relative;
letter-spacing: 0.02em;
line-height: 1.4;
}
.nn-crd .card-features li::before {
content: '▸';
position: absolute;
left: 0;
font-size: 10px;
}
.nn-crd .card-cyan .card-features li::before { color: #00eeff; text-shadow: 0 0 6px #00eeff; }
.nn-crd .card-pink .card-features li::before { color: #ff2d78; text-shadow: 0 0 6px #ff2d78; }
.nn-crd .card-violet .card-features li::before { color: #bf5fff; text-shadow: 0 0 6px #bf5fff; }
.nn-crd .card-cta {
margin-top: auto;
padding: 11px 0;
text-align: center;
font-family: 'Exo 2', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
transition: all 0.25s ease;
width: 100%;
}
.nn-crd .card-cyan .card-cta {
background: rgba(0,238,255,0.1);
color: #00eeff;
border: 1px solid rgba(0,238,255,0.5);
text-shadow: 0 0 8px rgba(0,238,255,0.8);
box-shadow: 0 0 12px rgba(0,238,255,0.15);
}
.nn-crd .card-cyan .card-cta:hover { background: rgba(0,238,255,0.22); box-shadow: 0 0 22px rgba(0,238,255,0.4); }
.nn-crd .card-pink .card-cta {
background: linear-gradient(135deg, rgba(255,45,120,0.85), rgba(200,20,90,0.85));
color: #fff;
text-shadow: 0 0 8px rgba(255,45,120,0.5);
box-shadow: 0 0 18px rgba(255,45,120,0.4), 0 0 40px rgba(255,45,120,0.15);
}
.nn-crd .card-pink .card-cta:hover { box-shadow: 0 0 28px rgba(255,45,120,0.65), 0 0 60px rgba(255,45,120,0.25); }
.nn-crd .card-violet .card-cta {
background: rgba(191,95,255,0.12);
color: #bf5fff;
border: 1px solid rgba(191,95,255,0.5);
text-shadow: 0 0 8px rgba(191,95,255,0.8);
box-shadow: 0 0 12px rgba(191,95,255,0.15);
}
.nn-crd .card-violet .card-cta:hover { background: rgba(191,95,255,0.22); box-shadow: 0 0 22px rgba(191,95,255,0.4); }
.nn-crd .badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: 'Exo 2', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 14px;
background: linear-gradient(135deg, #ff2d78, #d4006a);
color: #fff;
z-index: 10;
text-shadow: 0 0 6px rgba(255,45,120,0.8);
box-shadow: 0 0 12px rgba(255,45,120,0.5);
}
@media (prefers-reduced-motion: reduce) {
.nn-crd .card::before { animation: none !important; }
.nn-crd .card { transition: none !important; }
}