13 CSS Neumorphism & Soft UI Designs
Aurum Profile & Testimonial
A rose-parchment profile layout. The main profile card uses a triple-layer avatar mount: outer extruded ring → inset groove ring → gradient avatar, so the portrait feels poured into the background rather than placed on top. A pulsing green presence indicator adds life. Deeply inset stats strip, individually extruded tag pills, five social hover-lift buttons, and a gradient follow CTA. A large pull-quote testimonial sits beside it with a decorative 120px ghost quotation mark. Four mini connection cards below each have their own embedded circular avatar and a neumorphic connect button. Playfair Display + DM Sans. Best for portfolios, team pages, social profiles.
The code
<section class="nm-prf" aria-label="Profile and testimonial showcase">
<div class="card">
<div class="profile-card">
<div class="avatar-mount">
<span class="avatar-ring" aria-hidden="true"></span>
<span class="avatar-img" aria-hidden="true">🧑🎨</span>
<span class="avatar-status" aria-hidden="true"></span>
</div>
<div class="profile-id">
<div class="profile-name">Jordan Ellis</div>
<div class="profile-role">Senior Product Designer · Figma</div>
</div>
<div class="profile-bio">
"Crafting interfaces that feel as good as they look. Obsessed with depth, texture, and the tiny details that make users pause."
</div>
<div class="stats-strip">
<div class="stat-cell">
<div class="stat-n">248</div>
<div class="stat-l">Projects</div>
</div>
<div class="stat-cell">
<div class="stat-n">14.2k</div>
<div class="stat-l">Followers</div>
</div>
<div class="stat-cell">
<div class="stat-n">98%</div>
<div class="stat-l">Rating</div>
</div>
</div>
<div class="tag-row">
<span class="tag">Neumorphism</span>
<span class="tag">Design Systems</span>
<span class="tag">Motion</span>
<span class="tag">Accessibility</span>
</div>
<div class="socials">
<button type="button" class="social-btn" aria-label="Twitter/X">𝕏</button>
<button type="button" class="social-btn" aria-label="Dribbble">🏀</button>
<button type="button" class="social-btn" aria-label="LinkedIn">in</button>
<button type="button" class="social-btn" aria-label="GitHub">♥</button>
<button type="button" class="social-btn" aria-label="Behance">Bē</button>
</div>
<button type="button" class="follow-btn">+ Follow Jordan</button>
</div>
<div class="testimonial-card">
<div class="stars" aria-label="5 out of 5 stars">
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
</div>
<div class="quote-text">
The level of craft in Jordan's work is unmatched. The neumorphic design system they built for our fintech product reduced user confusion by 40% — every shadow, every depth cue was deliberate. It genuinely feels like holding a physical object.
</div>
<div class="quote-author">
<div class="q-avatar" aria-hidden="true">
<span class="q-avatar-img">👩💼</span>
</div>
<div>
<div class="q-name">Priya Nair</div>
<div class="q-role">VP of Design · <span class="q-company">Verse Finance</span></div>
</div>
</div>
</div>
<div class="connections-row">
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-1">🧑💻</span>
</div>
<div class="conn-name">Lena Park</div>
<div class="conn-role">UI Engineer · Stripe</div>
<div class="conn-mutual">6 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-2">👨🎨</span>
</div>
<div class="conn-name">Marc Osei</div>
<div class="conn-role">Motion Designer · Apple</div>
<div class="conn-mutual">12 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-3">👩🔬</span>
</div>
<div class="conn-name">Aiko Tanaka</div>
<div class="conn-role">UX Researcher · Google</div>
<div class="conn-mutual">3 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-4">🧑💼</span>
</div>
<div class="conn-name">Dele Owusu</div>
<div class="conn-role">Product Lead · Notion</div>
<div class="conn-mutual">8 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
</div>
</div>
</section> <section class="nm-prf" aria-label="Profile and testimonial showcase">
<div class="card">
<div class="profile-card">
<div class="avatar-mount">
<span class="avatar-ring" aria-hidden="true"></span>
<span class="avatar-img" aria-hidden="true">🧑🎨</span>
<span class="avatar-status" aria-hidden="true"></span>
</div>
<div class="profile-id">
<div class="profile-name">Jordan Ellis</div>
<div class="profile-role">Senior Product Designer · Figma</div>
</div>
<div class="profile-bio">
"Crafting interfaces that feel as good as they look. Obsessed with depth, texture, and the tiny details that make users pause."
</div>
<div class="stats-strip">
<div class="stat-cell">
<div class="stat-n">248</div>
<div class="stat-l">Projects</div>
</div>
<div class="stat-cell">
<div class="stat-n">14.2k</div>
<div class="stat-l">Followers</div>
</div>
<div class="stat-cell">
<div class="stat-n">98%</div>
<div class="stat-l">Rating</div>
</div>
</div>
<div class="tag-row">
<span class="tag">Neumorphism</span>
<span class="tag">Design Systems</span>
<span class="tag">Motion</span>
<span class="tag">Accessibility</span>
</div>
<div class="socials">
<button type="button" class="social-btn" aria-label="Twitter/X">𝕏</button>
<button type="button" class="social-btn" aria-label="Dribbble">🏀</button>
<button type="button" class="social-btn" aria-label="LinkedIn">in</button>
<button type="button" class="social-btn" aria-label="GitHub">♥</button>
<button type="button" class="social-btn" aria-label="Behance">Bē</button>
</div>
<button type="button" class="follow-btn">+ Follow Jordan</button>
</div>
<div class="testimonial-card">
<div class="stars" aria-label="5 out of 5 stars">
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
<span class="star" aria-hidden="true">★</span>
</div>
<div class="quote-text">
The level of craft in Jordan's work is unmatched. The neumorphic design system they built for our fintech product reduced user confusion by 40% — every shadow, every depth cue was deliberate. It genuinely feels like holding a physical object.
</div>
<div class="quote-author">
<div class="q-avatar" aria-hidden="true">
<span class="q-avatar-img">👩💼</span>
</div>
<div>
<div class="q-name">Priya Nair</div>
<div class="q-role">VP of Design · <span class="q-company">Verse Finance</span></div>
</div>
</div>
</div>
<div class="connections-row">
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-1">🧑💻</span>
</div>
<div class="conn-name">Lena Park</div>
<div class="conn-role">UI Engineer · Stripe</div>
<div class="conn-mutual">6 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-2">👨🎨</span>
</div>
<div class="conn-name">Marc Osei</div>
<div class="conn-role">Motion Designer · Apple</div>
<div class="conn-mutual">12 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-3">👩🔬</span>
</div>
<div class="conn-name">Aiko Tanaka</div>
<div class="conn-role">UX Researcher · Google</div>
<div class="conn-mutual">3 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
<div class="conn-card">
<div class="conn-avatar" aria-hidden="true">
<span class="conn-avatar-img conn-avatar-img-4">🧑💼</span>
</div>
<div class="conn-name">Dele Owusu</div>
<div class="conn-role">Product Lead · Notion</div>
<div class="conn-mutual">8 mutual connections</div>
<button type="button" class="conn-add">+ Connect</button>
</div>
</div>
</div>
</section>/* ─── 12 Aurum Profile & Testimonial — rose parchment ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');
.nm-prf {
--nm-prf-bg: #f0e8e4;
--nm-prf-sd: #d4c8c4;
--nm-prf-sl: #fff8f6;
--nm-prf-ib: #e8deda;
--nm-prf-acc: #c4786a;
--nm-prf-ac2: #e09a8c;
--nm-prf-ac3: #9a5048;
--nm-prf-lav: #9a6880;
--nm-prf-lv2: #c0a0b8;
--nm-prf-tl: #5a8a88;
--nm-prf-txt: #7a6a68;
--nm-prf-txt2:#2a1a18;
--nm-prf-neu: 10px 10px 24px var(--nm-prf-sd), -10px -10px 24px var(--nm-prf-sl);
--nm-prf-neu-sm: 6px 6px 14px var(--nm-prf-sd), -6px -6px 14px var(--nm-prf-sl);
--nm-prf-neu-sm-in: inset 4px 4px 10px var(--nm-prf-sd), inset -4px -4px 10px var(--nm-prf-sl);
position: relative;
width: 100%;
min-height: 900px;
background: var(--nm-prf-bg);
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--nm-prf-txt);
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
overflow: hidden;
box-sizing: border-box;
}
.nm-prf *,
.nm-prf *::before,
.nm-prf *::after { box-sizing: border-box; }
.nm-prf .card {
position: relative;
width: 100%;
max-width: 860px;
display: grid;
grid-template-columns: 290px 1fr;
grid-template-rows: auto auto;
gap: 20px;
padding: 36px;
background: var(--nm-prf-bg);
border-radius: 44px;
box-shadow: 22px 22px 54px var(--nm-prf-sd), -22px -22px 54px var(--nm-prf-sl);
}
/* Profile card */
.nm-prf .profile-card {
grid-row: 1 / 3;
background: var(--nm-prf-bg);
border-radius: 28px;
box-shadow: var(--nm-prf-neu);
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
position: relative;
}
.nm-prf .profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
border-radius: 28px 28px 0 0;
background: radial-gradient(ellipse at 50% -10%, rgba(196, 120, 106, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.nm-prf .avatar-mount {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--nm-prf-bg);
box-shadow: var(--nm-prf-neu);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.nm-prf .avatar-ring {
position: absolute;
inset: 8px;
border-radius: 50%;
background: var(--nm-prf-ib);
box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .avatar-img {
width: 84px;
height: 84px;
border-radius: 50%;
background: linear-gradient(145deg, var(--nm-prf-ac2), var(--nm-prf-lav));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
position: relative;
z-index: 2;
user-select: none;
box-shadow: 0 4px 12px rgba(154, 80, 72, 0.2);
}
.nm-prf .avatar-status {
position: absolute;
bottom: 10px;
right: 10px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #6ab87a;
box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 8px rgba(106, 184, 122, 0.5);
z-index: 10;
animation: nm-prf-status-pulse 2.5s ease-in-out infinite;
}
@keyframes nm-prf-status-pulse {
0%, 100% { box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 6px rgba(106, 184, 122, 0.4); }
50% { box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 14px rgba(106, 184, 122, 0.7); }
}
.nm-prf .profile-id { text-align: center; position: relative; }
.nm-prf .profile-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: var(--nm-prf-txt2);
letter-spacing: -0.5px;
}
.nm-prf .profile-role {
font-size: 13px;
color: var(--nm-prf-acc);
font-weight: 500;
letter-spacing: 0.3px;
margin-top: 2px;
}
.nm-prf .profile-bio {
font-size: 12px;
color: var(--nm-prf-txt);
text-align: center;
line-height: 1.7;
font-style: italic;
padding: 0 4px;
position: relative;
}
.nm-prf .stats-strip {
width: 100%;
background: var(--nm-prf-ib);
border-radius: 18px;
box-shadow: var(--nm-prf-neu-sm-in);
display: flex;
position: relative;
}
.nm-prf .stat-cell {
flex: 1;
padding: 12px 8px;
text-align: center;
border-right: 1px solid rgba(180, 160, 155, 0.2);
}
.nm-prf .stat-cell:last-child { border-right: none; }
.nm-prf .stat-n {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
font-weight: 700;
color: var(--nm-prf-txt2);
}
.nm-prf .stat-l {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--nm-prf-txt);
margin-top: 2px;
}
.nm-prf .tag-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.nm-prf .tag {
background: var(--nm-prf-bg);
border-radius: 100px;
padding: 6px 12px;
font-size: 10px;
font-weight: 600;
color: var(--nm-prf-txt);
box-shadow: var(--nm-prf-neu-sm);
transition: all 0.15s;
}
.nm-prf .tag:hover {
box-shadow: 7px 7px 16px var(--nm-prf-sd), -7px -7px 16px var(--nm-prf-sl);
color: var(--nm-prf-acc);
}
.nm-prf .socials { display: flex; gap: 10px; position: relative; }
.nm-prf .social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--nm-prf-bg);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--nm-prf-txt2);
box-shadow: var(--nm-prf-neu-sm);
transition: all 0.18s ease;
}
.nm-prf .social-btn:hover {
transform: translateY(-2px);
box-shadow: 8px 8px 18px var(--nm-prf-sd), -8px -8px 18px var(--nm-prf-sl);
}
.nm-prf .social-btn:active { box-shadow: var(--nm-prf-neu-sm-in); transform: scale(0.94); }
.nm-prf .follow-btn {
width: 100%;
border: none;
cursor: pointer;
padding: 13px;
border-radius: 100px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
background: linear-gradient(145deg, var(--nm-prf-acc), var(--nm-prf-ac3));
box-shadow: 8px 8px 18px rgba(154, 80, 72, 0.35), -5px -5px 14px var(--nm-prf-sl);
transition: all 0.18s;
position: relative;
}
.nm-prf .follow-btn:hover {
transform: translateY(-2px);
box-shadow: 10px 14px 24px rgba(154, 80, 72, 0.4), -5px -5px 14px var(--nm-prf-sl);
}
.nm-prf .follow-btn:active {
box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2);
transform: scale(0.98);
}
/* Testimonial card */
.nm-prf .testimonial-card {
background: var(--nm-prf-bg);
border-radius: 24px;
box-shadow: var(--nm-prf-neu);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
.nm-prf .testimonial-card::before {
content: '"';
position: absolute;
top: -10px;
left: 18px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 120px;
font-weight: 700;
color: var(--nm-prf-acc);
opacity: 0.08;
line-height: 1;
pointer-events: none;
}
.nm-prf .stars { display: flex; gap: 4px; }
.nm-prf .star { font-size: 14px; color: var(--nm-prf-acc); }
.nm-prf .quote-text {
font-family: 'Playfair Display', Georgia, serif;
font-size: 15px;
font-style: italic;
color: var(--nm-prf-txt2);
line-height: 1.7;
letter-spacing: 0.2px;
}
.nm-prf .quote-author { display: flex; align-items: center; gap: 14px; }
.nm-prf .q-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--nm-prf-bg);
box-shadow: var(--nm-prf-neu-sm);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.nm-prf .q-avatar::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--nm-prf-ib);
box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .q-avatar-img {
position: relative;
z-index: 2;
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(145deg, var(--nm-prf-lv2), var(--nm-prf-tl));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.nm-prf .q-name { font-weight: 700; font-size: 13px; color: var(--nm-prf-txt2); }
.nm-prf .q-role { font-size: 11px; color: var(--nm-prf-txt); margin-top: 2px; }
.nm-prf .q-company { color: var(--nm-prf-acc); font-weight: 600; }
/* Connection cards */
.nm-prf .connections-row { display: flex; gap: 12px; flex-wrap: wrap; }
.nm-prf .conn-card {
flex: 1;
min-width: 130px;
background: var(--nm-prf-bg);
border-radius: 20px;
box-shadow: var(--nm-prf-neu-sm);
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
}
.nm-prf .conn-card:hover {
transform: translateY(-2px);
box-shadow: 8px 8px 20px var(--nm-prf-sd), -8px -8px 20px var(--nm-prf-sl);
}
.nm-prf .conn-card:active { box-shadow: var(--nm-prf-neu-sm-in); }
.nm-prf .conn-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--nm-prf-bg);
box-shadow: var(--nm-prf-neu-sm);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.nm-prf .conn-avatar::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--nm-prf-ib);
box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .conn-avatar-img {
position: relative;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.nm-prf .conn-avatar-img-1 { background: linear-gradient(145deg, var(--nm-prf-ac2), var(--nm-prf-acc)); }
.nm-prf .conn-avatar-img-2 { background: linear-gradient(145deg, var(--nm-prf-lv2), var(--nm-prf-lav)); }
.nm-prf .conn-avatar-img-3 { background: linear-gradient(145deg, #a0c8c0, var(--nm-prf-tl)); }
.nm-prf .conn-avatar-img-4 { background: linear-gradient(145deg, #d0b880, #b09060); }
.nm-prf .conn-name { font-size: 12px; font-weight: 700; color: var(--nm-prf-txt2); text-align: center; }
.nm-prf .conn-role { font-size: 10px; color: var(--nm-prf-txt); text-align: center; }
.nm-prf .conn-mutual {
font-size: 9px;
color: var(--nm-prf-txt);
text-align: center;
font-weight: 500;
letter-spacing: 0.3px;
}
.nm-prf .conn-add {
padding: 6px 14px;
border-radius: 100px;
background: var(--nm-prf-bg);
border: none;
cursor: pointer;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--nm-prf-acc);
box-shadow: var(--nm-prf-neu-sm);
transition: all 0.15s;
}
.nm-prf .conn-add:hover { box-shadow: 6px 6px 12px var(--nm-prf-sd), -6px -6px 12px var(--nm-prf-sl); }
.nm-prf .conn-add:active { box-shadow: var(--nm-prf-neu-sm-in); }
@media (max-width: 720px) {
.nm-prf .card { grid-template-columns: 1fr; }
.nm-prf .profile-card { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.nm-prf .avatar-status { animation: none; }
.nm-prf .social-btn,
.nm-prf .follow-btn,
.nm-prf .tag,
.nm-prf .conn-card { transition: none; }
} /* ─── 12 Aurum Profile & Testimonial — rose parchment ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');
.nm-prf {
--nm-prf-bg: #f0e8e4;
--nm-prf-sd: #d4c8c4;
--nm-prf-sl: #fff8f6;
--nm-prf-ib: #e8deda;
--nm-prf-acc: #c4786a;
--nm-prf-ac2: #e09a8c;
--nm-prf-ac3: #9a5048;
--nm-prf-lav: #9a6880;
--nm-prf-lv2: #c0a0b8;
--nm-prf-tl: #5a8a88;
--nm-prf-txt: #7a6a68;
--nm-prf-txt2:#2a1a18;
--nm-prf-neu: 10px 10px 24px var(--nm-prf-sd), -10px -10px 24px var(--nm-prf-sl);
--nm-prf-neu-sm: 6px 6px 14px var(--nm-prf-sd), -6px -6px 14px var(--nm-prf-sl);
--nm-prf-neu-sm-in: inset 4px 4px 10px var(--nm-prf-sd), inset -4px -4px 10px var(--nm-prf-sl);
position: relative;
width: 100%;
min-height: 900px;
background: var(--nm-prf-bg);
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--nm-prf-txt);
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
overflow: hidden;
box-sizing: border-box;
}
.nm-prf *,
.nm-prf *::before,
.nm-prf *::after { box-sizing: border-box; }
.nm-prf .card {
position: relative;
width: 100%;
max-width: 860px;
display: grid;
grid-template-columns: 290px 1fr;
grid-template-rows: auto auto;
gap: 20px;
padding: 36px;
background: var(--nm-prf-bg);
border-radius: 44px;
box-shadow: 22px 22px 54px var(--nm-prf-sd), -22px -22px 54px var(--nm-prf-sl);
}
/* Profile card */
.nm-prf .profile-card {
grid-row: 1 / 3;
background: var(--nm-prf-bg);
border-radius: 28px;
box-shadow: var(--nm-prf-neu);
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
position: relative;
}
.nm-prf .profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
border-radius: 28px 28px 0 0;
background: radial-gradient(ellipse at 50% -10%, rgba(196, 120, 106, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.nm-prf .avatar-mount {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--nm-prf-bg);
box-shadow: var(--nm-prf-neu);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.nm-prf .avatar-ring {
position: absolute;
inset: 8px;
border-radius: 50%;
background: var(--nm-prf-ib);
box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .avatar-img {
width: 84px;
height: 84px;
border-radius: 50%;
background: linear-gradient(145deg, var(--nm-prf-ac2), var(--nm-prf-lav));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
position: relative;
z-index: 2;
user-select: none;
box-shadow: 0 4px 12px rgba(154, 80, 72, 0.2);
}
.nm-prf .avatar-status {
position: absolute;
bottom: 10px;
right: 10px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #6ab87a;
box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 8px rgba(106, 184, 122, 0.5);
z-index: 10;
animation: nm-prf-status-pulse 2.5s ease-in-out infinite;
}
@keyframes nm-prf-status-pulse {
0%, 100% { box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 6px rgba(106, 184, 122, 0.4); }
50% { box-shadow: 0 0 0 3px var(--nm-prf-bg), 0 0 14px rgba(106, 184, 122, 0.7); }
}
.nm-prf .profile-id { text-align: center; position: relative; }
.nm-prf .profile-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: var(--nm-prf-txt2);
letter-spacing: -0.5px;
}
.nm-prf .profile-role {
font-size: 13px;
color: var(--nm-prf-acc);
font-weight: 500;
letter-spacing: 0.3px;
margin-top: 2px;
}
.nm-prf .profile-bio {
font-size: 12px;
color: var(--nm-prf-txt);
text-align: center;
line-height: 1.7;
font-style: italic;
padding: 0 4px;
position: relative;
}
.nm-prf .stats-strip {
width: 100%;
background: var(--nm-prf-ib);
border-radius: 18px;
box-shadow: var(--nm-prf-neu-sm-in);
display: flex;
position: relative;
}
.nm-prf .stat-cell {
flex: 1;
padding: 12px 8px;
text-align: center;
border-right: 1px solid rgba(180, 160, 155, 0.2);
}
.nm-prf .stat-cell:last-child { border-right: none; }
.nm-prf .stat-n {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
font-weight: 700;
color: var(--nm-prf-txt2);
}
.nm-prf .stat-l {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--nm-prf-txt);
margin-top: 2px;
}
.nm-prf .tag-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.nm-prf .tag {
background: var(--nm-prf-bg);
border-radius: 100px;
padding: 6px 12px;
font-size: 10px;
font-weight: 600;
color: var(--nm-prf-txt);
box-shadow: var(--nm-prf-neu-sm);
transition: all 0.15s;
}
.nm-prf .tag:hover {
box-shadow: 7px 7px 16px var(--nm-prf-sd), -7px -7px 16px var(--nm-prf-sl);
color: var(--nm-prf-acc);
}
.nm-prf .socials { display: flex; gap: 10px; position: relative; }
.nm-prf .social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--nm-prf-bg);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--nm-prf-txt2);
box-shadow: var(--nm-prf-neu-sm);
transition: all 0.18s ease;
}
.nm-prf .social-btn:hover {
transform: translateY(-2px);
box-shadow: 8px 8px 18px var(--nm-prf-sd), -8px -8px 18px var(--nm-prf-sl);
}
.nm-prf .social-btn:active { box-shadow: var(--nm-prf-neu-sm-in); transform: scale(0.94); }
.nm-prf .follow-btn {
width: 100%;
border: none;
cursor: pointer;
padding: 13px;
border-radius: 100px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
background: linear-gradient(145deg, var(--nm-prf-acc), var(--nm-prf-ac3));
box-shadow: 8px 8px 18px rgba(154, 80, 72, 0.35), -5px -5px 14px var(--nm-prf-sl);
transition: all 0.18s;
position: relative;
}
.nm-prf .follow-btn:hover {
transform: translateY(-2px);
box-shadow: 10px 14px 24px rgba(154, 80, 72, 0.4), -5px -5px 14px var(--nm-prf-sl);
}
.nm-prf .follow-btn:active {
box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2);
transform: scale(0.98);
}
/* Testimonial card */
.nm-prf .testimonial-card {
background: var(--nm-prf-bg);
border-radius: 24px;
box-shadow: var(--nm-prf-neu);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
}
.nm-prf .testimonial-card::before {
content: '"';
position: absolute;
top: -10px;
left: 18px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 120px;
font-weight: 700;
color: var(--nm-prf-acc);
opacity: 0.08;
line-height: 1;
pointer-events: none;
}
.nm-prf .stars { display: flex; gap: 4px; }
.nm-prf .star { font-size: 14px; color: var(--nm-prf-acc); }
.nm-prf .quote-text {
font-family: 'Playfair Display', Georgia, serif;
font-size: 15px;
font-style: italic;
color: var(--nm-prf-txt2);
line-height: 1.7;
letter-spacing: 0.2px;
}
.nm-prf .quote-author { display: flex; align-items: center; gap: 14px; }
.nm-prf .q-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--nm-prf-bg);
box-shadow: var(--nm-prf-neu-sm);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.nm-prf .q-avatar::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--nm-prf-ib);
box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .q-avatar-img {
position: relative;
z-index: 2;
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(145deg, var(--nm-prf-lv2), var(--nm-prf-tl));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.nm-prf .q-name { font-weight: 700; font-size: 13px; color: var(--nm-prf-txt2); }
.nm-prf .q-role { font-size: 11px; color: var(--nm-prf-txt); margin-top: 2px; }
.nm-prf .q-company { color: var(--nm-prf-acc); font-weight: 600; }
/* Connection cards */
.nm-prf .connections-row { display: flex; gap: 12px; flex-wrap: wrap; }
.nm-prf .conn-card {
flex: 1;
min-width: 130px;
background: var(--nm-prf-bg);
border-radius: 20px;
box-shadow: var(--nm-prf-neu-sm);
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
}
.nm-prf .conn-card:hover {
transform: translateY(-2px);
box-shadow: 8px 8px 20px var(--nm-prf-sd), -8px -8px 20px var(--nm-prf-sl);
}
.nm-prf .conn-card:active { box-shadow: var(--nm-prf-neu-sm-in); }
.nm-prf .conn-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--nm-prf-bg);
box-shadow: var(--nm-prf-neu-sm);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.nm-prf .conn-avatar::after {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--nm-prf-ib);
box-shadow: var(--nm-prf-neu-sm-in);
}
.nm-prf .conn-avatar-img {
position: relative;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.nm-prf .conn-avatar-img-1 { background: linear-gradient(145deg, var(--nm-prf-ac2), var(--nm-prf-acc)); }
.nm-prf .conn-avatar-img-2 { background: linear-gradient(145deg, var(--nm-prf-lv2), var(--nm-prf-lav)); }
.nm-prf .conn-avatar-img-3 { background: linear-gradient(145deg, #a0c8c0, var(--nm-prf-tl)); }
.nm-prf .conn-avatar-img-4 { background: linear-gradient(145deg, #d0b880, #b09060); }
.nm-prf .conn-name { font-size: 12px; font-weight: 700; color: var(--nm-prf-txt2); text-align: center; }
.nm-prf .conn-role { font-size: 10px; color: var(--nm-prf-txt); text-align: center; }
.nm-prf .conn-mutual {
font-size: 9px;
color: var(--nm-prf-txt);
text-align: center;
font-weight: 500;
letter-spacing: 0.3px;
}
.nm-prf .conn-add {
padding: 6px 14px;
border-radius: 100px;
background: var(--nm-prf-bg);
border: none;
cursor: pointer;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--nm-prf-acc);
box-shadow: var(--nm-prf-neu-sm);
transition: all 0.15s;
}
.nm-prf .conn-add:hover { box-shadow: 6px 6px 12px var(--nm-prf-sd), -6px -6px 12px var(--nm-prf-sl); }
.nm-prf .conn-add:active { box-shadow: var(--nm-prf-neu-sm-in); }
@media (max-width: 720px) {
.nm-prf .card { grid-template-columns: 1fr; }
.nm-prf .profile-card { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.nm-prf .avatar-status { animation: none; }
.nm-prf .social-btn,
.nm-prf .follow-btn,
.nm-prf .tag,
.nm-prf .conn-card { transition: none; }
}