/* =========================================================================
Per-project theme overrides โ kept separate from the shared pearl theme.
Use the `theme-XXX` class on to scope.
========================================================================= */
/* =========================================================================
Legend World โ Sci-fi neon cyberpunk
========================================================================= */
body.theme-legend {
--legend-cyan: #00E5FF;
--legend-magenta: #FF2C97;
--legend-amber: #FFB347;
--legend-green: #10F5A5;
--legend-violet: #A06BFF;
--legend-red: #FF3354;
--legend-void: #020610;
--legend-deep: #06101E;
}
body.theme-legend::before {
background:
radial-gradient(ellipse 50% 40% at 80% 0%, rgba(0, 229, 255, 0.12), transparent 60%),
radial-gradient(ellipse 40% 30% at 10% 30%, rgba(255, 44, 151, 0.10), transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(160, 107, 255, 0.10), transparent 60%),
radial-gradient(ellipse at top, #06101E 0%, #050A15 45%, #020610 100%);
}
body.theme-legend .gradient-text {
background: linear-gradient(120deg, #00E5FF, #A06BFF, #FF2C97, #FFB347, #00E5FF);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-legend .eyebrow {
color: var(--legend-cyan);
background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(160, 107, 255, 0.08));
border-color: rgba(0, 229, 255, 0.3);
font-family: 'Inter', sans-serif;
font-weight: 700;
letter-spacing: 0.18em;
}
body.theme-legend h1, body.theme-legend .h-section, body.theme-legend .admin-card h3,
body.theme-legend .feature-tile h4 {
font-family: 'Inter', sans-serif;
letter-spacing: -0.01em;
}
/* Legend hero artwork */
.legend-art {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 480px;
margin-inline: auto;
}
.legend-globe {
position: absolute;
inset: 8%;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(0, 229, 255, 0.35), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(160, 107, 255, 0.25), transparent 55%),
radial-gradient(circle at center, #0a1830, #02060f);
box-shadow:
inset 0 0 60px rgba(0, 229, 255, 0.18),
0 0 60px rgba(0, 229, 255, 0.18),
0 0 120px rgba(160, 107, 255, 0.12);
overflow: hidden;
}
.legend-globe::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, transparent 0, transparent 22px, rgba(0, 229, 255, 0.10) 22px, rgba(0, 229, 255, 0.10) 23px),
repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(0, 229, 255, 0.07) 22px, rgba(0, 229, 255, 0.07) 23px);
mask: radial-gradient(circle, black 60%, transparent 80%);
-webkit-mask: radial-gradient(circle, black 60%, transparent 80%);
}
.legend-globe::after {
content: '';
position: absolute;
top: 18%; left: 18%;
width: 30%; height: 22%;
background: radial-gradient(ellipse, rgba(255, 255, 255, 0.15), transparent 70%);
border-radius: 50%;
filter: blur(8px);
}
/* Country tiles scattered on globe */
.legend-tile {
position: absolute;
background: rgba(0, 229, 255, 0.12);
border: 1px solid var(--legend-cyan);
border-radius: 4px;
box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}
.legend-tile.t1 { top: 22%; left: 28%; width: 18%; height: 12%; }
.legend-tile.t2 { top: 42%; left: 55%; width: 12%; height: 10%; background: rgba(255, 44, 151, 0.18); border-color: var(--legend-magenta); box-shadow: 0 0 12px rgba(255, 44, 151, 0.6); }
.legend-tile.t3 { top: 60%; left: 30%; width: 14%; height: 12%; background: rgba(16, 245, 165, 0.15); border-color: var(--legend-green); box-shadow: 0 0 10px rgba(16, 245, 165, 0.5); }
.legend-tile.t4 { top: 35%; left: 70%; width: 10%; height: 8%; background: rgba(255, 179, 71, 0.15); border-color: var(--legend-amber); box-shadow: 0 0 10px rgba(255, 179, 71, 0.5); }
/* Hexagonal HUD ring */
.legend-ring {
position: absolute;
inset: -2%;
border: 1px solid rgba(0, 229, 255, 0.4);
border-radius: 50%;
animation: orbit 24s linear infinite;
}
.legend-ring::before, .legend-ring::after {
content: '';
position: absolute;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--legend-cyan);
box-shadow: 0 0 16px var(--legend-cyan);
}
.legend-ring::before { top: -6px; left: 50%; transform: translateX(-50%); }
.legend-ring::after { bottom: -6px; right: 30%; background: var(--legend-magenta); box-shadow: 0 0 16px var(--legend-magenta); }
.legend-ring-2 {
position: absolute;
inset: -10%;
border: 1px dashed rgba(160, 107, 255, 0.3);
border-radius: 50%;
animation: orbitReverse 32s linear infinite;
}
/* HUD readouts on the side */
.legend-hud {
position: absolute;
font-family: 'Inter', monospace;
font-size: 0.65rem;
color: var(--legend-cyan);
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(2, 6, 16, 0.8);
border: 1px solid rgba(0, 229, 255, 0.3);
padding: 4px 8px;
border-radius: 3px;
}
.legend-hud.h1 { top: 5%; left: 0; }
.legend-hud.h2 { top: 30%; right: 0; color: var(--legend-magenta); border-color: rgba(255, 44, 151, 0.4); }
.legend-hud.h3 { bottom: 22%; left: 2%; color: var(--legend-green); border-color: rgba(16, 245, 165, 0.4); }
.legend-hud.h4 { bottom: 4%; right: 4%; color: var(--legend-amber); border-color: rgba(255, 179, 71, 0.4); }
/* Cover artwork (used in project card on home/projects pages) */
.cover-legend {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(0, 229, 255, 0.18), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(255, 44, 151, 0.18), transparent 55%),
linear-gradient(135deg, #06101E, #02060F);
display: grid;
place-items: center;
overflow: hidden;
}
.cover-legend::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(0, 229, 255, 0.07) 18px, rgba(0, 229, 255, 0.07) 19px),
repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0, 229, 255, 0.05) 18px, rgba(0, 229, 255, 0.05) 19px);
}
.cover-legend .lw-mark {
position: relative;
z-index: 1;
width: 50%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background:
radial-gradient(circle at center, rgba(0, 229, 255, 0.5), rgba(160, 107, 255, 0.35) 50%, transparent 75%);
display: grid;
place-items: center;
border: 2px solid rgba(0, 229, 255, 0.5);
box-shadow: 0 0 30px rgba(0, 229, 255, 0.4), inset 0 0 30px rgba(255, 44, 151, 0.2);
}
.cover-legend .lw-mark::after {
content: 'LW';
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 1.8rem;
letter-spacing: 0.05em;
color: #fff;
text-shadow: 0 0 16px rgba(0, 229, 255, 0.8);
}
/* =========================================================================
Workforce Hub โ Clean corporate dashboard
========================================================================= */
body.theme-workforce {
--wf-primary: #4F8BFF;
--wf-primary-dark: #2563EB;
--wf-teal: #14B8A6;
--wf-success: #22C55E;
--wf-warn: #F59E0B;
--wf-danger: #EF4444;
--wf-bg: #0F172A;
--wf-bg-2: #1E293B;
}
body.theme-workforce::before {
background:
radial-gradient(ellipse 50% 40% at 80% 0%, rgba(79, 139, 255, 0.12), transparent 60%),
radial-gradient(ellipse 40% 30% at 10% 30%, rgba(20, 184, 166, 0.10), transparent 60%),
radial-gradient(ellipse at top, #1E293B 0%, #0F172A 45%, #0A0F1E 100%);
}
body.theme-workforce .gradient-text {
background: linear-gradient(120deg, #4F8BFF, #14B8A6, #22C55E, #4F8BFF);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-workforce .eyebrow {
color: var(--wf-teal);
background: linear-gradient(135deg, rgba(79, 139, 255, 0.12), rgba(20, 184, 166, 0.08));
border-color: rgba(79, 139, 255, 0.3);
}
/* Dashboard mockup */
.wf-dash {
width: 100%;
background: linear-gradient(180deg, #0F172A, #0A0F1E);
border: 1px solid rgba(79, 139, 255, 0.18);
border-radius: 18px;
padding: 22px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(79, 139, 255, 0.1);
position: relative;
}
.wf-dash-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(79, 139, 255, 0.12);
}
.wf-dash-title {
font-weight: 700;
font-size: 0.95rem;
color: #E2E8F0;
}
.wf-dash-title small {
color: #64748B;
font-weight: 400;
display: block;
font-size: 0.72rem;
}
.wf-avatar-row {
display: flex;
gap: -8px;
}
.wf-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #4F8BFF, #14B8A6);
border: 2px solid #0F172A;
margin-inline-start: -10px;
display: grid; place-items: center;
font-size: 0.7rem;
font-weight: 700;
color: #fff;
}
.wf-avatar:first-child { margin: 0; }
.wf-avatar.a2 { background: linear-gradient(135deg, #22C55E, #14B8A6); }
.wf-avatar.a3 { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.wf-avatar.a4 { background: linear-gradient(135deg, #A06BFF, #4F8BFF); }
/* KPI strip */
.wf-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.wf-kpi {
background: rgba(79, 139, 255, 0.08);
border: 1px solid rgba(79, 139, 255, 0.15);
border-radius: 10px;
padding: 10px 12px;
}
.wf-kpi-label {
font-size: 0.6rem;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.wf-kpi-value {
font-size: 1.4rem;
font-weight: 700;
color: #E2E8F0;
margin-top: 4px;
}
.wf-kpi.green .wf-kpi-value { color: var(--wf-success); }
.wf-kpi.amber .wf-kpi-value { color: var(--wf-warn); }
.wf-kpi.red .wf-kpi-value { color: var(--wf-danger); }
.wf-kpi-spark {
height: 4px;
margin-top: 6px;
border-radius: 99px;
background: linear-gradient(90deg, #4F8BFF, transparent);
}
@media (max-width: 520px) {
.wf-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* Attendance table */
.wf-table {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(79, 139, 255, 0.12);
border-radius: 10px;
overflow: hidden;
}
.wf-table-head {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 0.7fr;
padding: 10px 14px;
background: rgba(79, 139, 255, 0.06);
font-size: 0.65rem;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid rgba(79, 139, 255, 0.12);
}
.wf-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 0.7fr;
padding: 10px 14px;
font-size: 0.78rem;
color: #CBD5E1;
align-items: center;
border-bottom: 1px solid rgba(79, 139, 255, 0.06);
}
.wf-row:last-child { border-bottom: none; }
.wf-row .wf-emp {
display: flex;
align-items: center;
gap: 8px;
}
.wf-row .wf-emp .wf-avatar { width: 24px; height: 24px; font-size: 0.62rem; margin: 0; border-width: 0; }
.wf-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 99px;
font-size: 0.62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.wf-badge.in { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
.wf-badge.late { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.wf-badge.off { background: rgba(239, 68, 68, 0.15); color: #FCA5A5; }
/* Cover artwork */
.cover-workforce {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 25%, rgba(79, 139, 255, 0.22), transparent 55%),
radial-gradient(circle at 75% 75%, rgba(20, 184, 166, 0.20), transparent 55%),
linear-gradient(135deg, #1E293B, #0F172A);
display: grid;
place-items: center;
overflow: hidden;
}
.cover-workforce .wf-mark {
position: relative;
width: 55%;
aspect-ratio: 1 / 1;
background:
linear-gradient(135deg, #4F8BFF, #14B8A6);
border-radius: 22%;
display: grid;
place-items: center;
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 2.4rem;
color: #fff;
box-shadow:
0 14px 40px rgba(79, 139, 255, 0.45),
inset 0 2px 0 rgba(255, 255, 255, 0.25);
letter-spacing: -0.04em;
}
.cover-workforce .wf-mark::after {
content: '๐ฅ';
font-size: 2.4rem;
}
/* Make project cards look good with these new covers */
.project-card .project-cover { position: relative; }
/* =========================================================================
Luxora โ Luxury fashion ยท Rose-gold + champagne
========================================================================= */
body.theme-luxora {
--lux-rose: #D4A574;
--lux-champagne: #F4D7C3;
--lux-cream: #FFF7EE;
--lux-burgundy: #5C2A2A;
--lux-dark: #1A0E0A;
}
body.theme-luxora::before {
background:
radial-gradient(ellipse 60% 50% at 80% 0%, rgba(212, 165, 116, 0.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 30%, rgba(244, 215, 195, 0.12), transparent 60%),
radial-gradient(ellipse at top, #2A1612 0%, #1A0E0A 60%, #0B0504 100%);
}
body.theme-luxora .gradient-text {
background: linear-gradient(120deg, #F4D7C3, #D4A574, #E8C5A0, #F4D7C3, #FFE9D6);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-luxora .eyebrow {
color: var(--lux-rose);
background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(244, 215, 195, 0.08));
border-color: rgba(212, 165, 116, 0.35);
}
/* Luxora hero โ product showcase card */
.lux-card {
width: 100%;
max-width: 360px;
background: linear-gradient(180deg, #2A1612, #1A0E0A);
border-radius: 22px;
padding: 22px;
box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 40px rgba(212, 165, 116, 0.15);
border: 1px solid rgba(212, 165, 116, 0.25);
}
.lux-image {
aspect-ratio: 4 / 5;
border-radius: 14px;
background:
radial-gradient(circle at 50% 40%, rgba(244, 215, 195, 0.5), transparent 60%),
linear-gradient(160deg, #5C2A2A, #1A0E0A);
display: grid;
place-items: center;
font-size: 4rem;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.lux-image::after {
content: '๐';
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.lux-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--lux-rose);
margin-bottom: 6px;
}
.lux-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 600;
color: #FFE9D6;
margin-bottom: 14px;
}
.lux-price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.lux-price {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
font-weight: 700;
color: #FFE9D6;
}
.lux-currency-badges { display: flex; gap: 6px; }
.lux-currency-badges span {
font-size: 0.65rem;
padding: 3px 7px;
border-radius: 99px;
background: rgba(212, 165, 116, 0.15);
color: var(--lux-champagne);
border: 1px solid rgba(212, 165, 116, 0.3);
}
.lux-cta {
width: 100%;
padding: 12px;
border-radius: 99px;
background: linear-gradient(135deg, #F4D7C3, #D4A574);
color: #1A0E0A;
font-weight: 700;
text-align: center;
font-size: 0.92rem;
letter-spacing: 0.05em;
}
.cover-luxora {
width: 100%; height: 100%;
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(244, 215, 195, 0.25), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(212, 165, 116, 0.20), transparent 55%),
linear-gradient(135deg, #2A1612, #0B0504);
display: grid; place-items: center;
overflow: hidden;
}
.cover-luxora .lux-mark {
width: 50%; aspect-ratio: 1 / 1;
border-radius: 50%;
background: linear-gradient(135deg, #F4D7C3, #D4A574);
display: grid; place-items: center;
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
font-size: 2.6rem;
color: #1A0E0A;
box-shadow: 0 12px 40px rgba(212, 165, 116, 0.45), inset 0 2px 0 rgba(255,255,255,0.3);
font-style: italic;
}
.cover-luxora .lux-mark::after { content: 'L'; }
/* =========================================================================
Plato โ Restaurant ยท Warm crimson + cream
========================================================================= */
body.theme-plato {
--plato-crimson: #E63946;
--plato-cream: #F1FAEE;
--plato-terra: #E76F51;
--plato-dark: #1D1B1A;
}
body.theme-plato::before {
background:
radial-gradient(ellipse 50% 40% at 80% 0%, rgba(231, 111, 81, 0.20), transparent 60%),
radial-gradient(ellipse 60% 50% at 20% 100%, rgba(230, 57, 70, 0.15), transparent 60%),
radial-gradient(ellipse at top, #2A1A18 0%, #1D1310 60%, #0B0605 100%);
}
body.theme-plato .gradient-text {
background: linear-gradient(120deg, #E63946, #E76F51, #F4A261, #F1FAEE, #E63946);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-plato .eyebrow {
color: var(--plato-terra);
background: linear-gradient(135deg, rgba(231, 111, 81, 0.15), rgba(230, 57, 70, 0.08));
border-color: rgba(231, 111, 81, 0.35);
}
/* Plato hero โ restaurant menu mockup */
.plato-menu {
width: 100%;
max-width: 360px;
background: linear-gradient(180deg, #2A1A18, #1D1310);
border: 1px solid rgba(231, 111, 81, 0.25);
border-radius: 22px;
padding: 24px;
box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.plato-menu-head {
text-align: center;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(231, 111, 81, 0.3);
}
.plato-menu-head .title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 700;
color: #F1FAEE;
}
.plato-menu-head .sub {
color: var(--plato-terra);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 4px;
}
.plato-item {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 0;
}
.plato-item + .plato-item { border-top: 1px solid rgba(231, 111, 81, 0.12); }
.plato-emoji {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(231, 111, 81, 0.15);
display: grid; place-items: center;
font-size: 1.2rem;
}
.plato-info .n { font-size: 0.85rem; font-weight: 600; color: #F1FAEE; }
.plato-info .d { font-size: 0.7rem; color: #C0B5B0; margin-top: 2px; }
.plato-price {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--plato-terra);
}
.plato-order {
margin-top: 16px;
width: 100%;
padding: 12px;
border-radius: 12px;
background: linear-gradient(135deg, #E63946, #E76F51);
color: #F1FAEE;
text-align: center;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
.cover-plato {
width: 100%; height: 100%;
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(231, 111, 81, 0.25), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(230, 57, 70, 0.20), transparent 55%),
linear-gradient(135deg, #2A1A18, #0B0605);
display: grid; place-items: center;
}
.cover-plato .pl-mark {
width: 55%; aspect-ratio: 1 / 1;
border-radius: 28%;
background: linear-gradient(135deg, #E63946, #E76F51);
display: grid; place-items: center;
font-size: 3rem;
box-shadow: 0 14px 40px rgba(230, 57, 70, 0.5), inset 0 2px 0 rgba(255,255,255,0.2);
}
.cover-plato .pl-mark::after { content: '๐ฝ'; }
/* =========================================================================
TrailPath โ Logistics ยท Emerald + slate
========================================================================= */
body.theme-trail {
--trail-emerald: #10B981;
--trail-slate: #475569;
--trail-blue: #3B82F6;
--trail-dark: #0F172A;
}
body.theme-trail::before {
background:
radial-gradient(ellipse 50% 40% at 80% 0%, rgba(16, 185, 129, 0.15), transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 30%, rgba(59, 130, 246, 0.12), transparent 60%),
radial-gradient(ellipse at top, #1E293B 0%, #0F172A 60%, #060A14 100%);
}
body.theme-trail .gradient-text {
background: linear-gradient(120deg, #10B981, #34D399, #3B82F6, #10B981);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-trail .eyebrow {
color: var(--trail-emerald);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.08));
border-color: rgba(16, 185, 129, 0.35);
}
/* TrailPath hero โ route map mockup */
.trail-map {
width: 100%;
max-width: 380px;
aspect-ratio: 4 / 5;
background:
linear-gradient(180deg, #1E293B, #0F172A);
border: 1px solid rgba(16, 185, 129, 0.25);
border-radius: 22px;
padding: 20px;
box-shadow: 0 30px 70px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
}
.trail-map::before {
content: '';
position: absolute;
inset: 20px;
border-radius: 14px;
background:
radial-gradient(circle at 60% 30%, rgba(16, 185, 129, 0.15), transparent 40%),
repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(16, 185, 129, 0.06) 18px, rgba(16, 185, 129, 0.06) 19px),
repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(16, 185, 129, 0.04) 18px, rgba(16, 185, 129, 0.04) 19px),
#0A101D;
}
.trail-route {
position: absolute;
top: 30%; left: 20%;
width: 60%; height: 50%;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
}
.trail-pin {
position: absolute;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--trail-emerald);
display: grid; place-items: center;
font-size: 0.95rem;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), inset 0 2px 0 rgba(255,255,255,0.4);
border: 2px solid #0F172A;
z-index: 1;
}
.trail-pin.p1 { top: 30%; right: 15%; }
.trail-pin.p1::after { content: '๐'; }
.trail-pin.p2 { top: 65%; left: 15%; background: var(--trail-blue); }
.trail-pin.p2::after { content: '๐'; }
.trail-eta-card {
position: absolute;
bottom: 20px;
left: 20px; right: 20px;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 12px;
padding: 12px 16px;
}
.trail-eta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
}
.trail-eta-label { color: #94A3B8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.trail-eta-val { color: var(--trail-emerald); font-weight: 700; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
.trail-eta-driver { color: #CBD5E1; font-size: 0.75rem; margin-top: 6px; }
.cover-trail {
width: 100%; height: 100%;
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.22), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.18), transparent 55%),
linear-gradient(135deg, #1E293B, #060A14);
display: grid; place-items: center;
}
.cover-trail .tr-mark {
width: 55%; aspect-ratio: 1 / 1;
border-radius: 22%;
background: linear-gradient(135deg, #10B981, #34D399);
display: grid; place-items: center;
font-size: 2.8rem;
box-shadow: 0 14px 40px rgba(16, 185, 129, 0.45), inset 0 2px 0 rgba(255,255,255,0.2);
}
.cover-trail .tr-mark::after { content: '๐'; }
/* =========================================================================
Mindscape โ Online learning ยท Violet + amber
========================================================================= */
body.theme-mind {
--mind-violet: #7C3AED;
--mind-amber: #F59E0B;
--mind-light: #FFFBEB;
--mind-dark: #1E1B4B;
}
body.theme-mind::before {
background:
radial-gradient(ellipse 50% 40% at 80% 0%, rgba(124, 58, 237, 0.20), transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 30%, rgba(245, 158, 11, 0.12), transparent 60%),
radial-gradient(ellipse at top, #2D1F62 0%, #1E1B4B 60%, #0B0830 100%);
}
body.theme-mind .gradient-text {
background: linear-gradient(120deg, #7C3AED, #A855F7, #F59E0B, #7C3AED);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-mind .eyebrow {
color: var(--mind-amber);
background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(245, 158, 11, 0.08));
border-color: rgba(124, 58, 237, 0.35);
}
/* Mindscape hero โ course card */
.mind-card {
width: 100%;
max-width: 360px;
background: linear-gradient(180deg, #2D1F62, #1E1B4B);
border: 1px solid rgba(124, 58, 237, 0.3);
border-radius: 22px;
padding: 22px;
box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 50px rgba(124, 58, 237, 0.15);
}
.mind-thumb {
aspect-ratio: 16 / 9;
border-radius: 14px;
margin-bottom: 16px;
background:
radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.3), transparent 60%),
linear-gradient(135deg, #7C3AED, #1E1B4B);
display: grid; place-items: center;
font-size: 3rem;
position: relative;
overflow: hidden;
}
.mind-thumb::before {
content: 'โถ';
position: absolute;
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
display: grid; place-items: center;
color: var(--mind-violet);
font-size: 1.3rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mind-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.mind-meta span {
font-size: 0.65rem;
padding: 3px 8px;
border-radius: 99px;
background: rgba(245, 158, 11, 0.15);
color: var(--mind-amber);
border: 1px solid rgba(245, 158, 11, 0.3);
letter-spacing: 0.05em;
}
.mind-card h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
font-weight: 600;
color: #FFFBEB;
margin-bottom: 12px;
}
.mind-progress {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: #C4B5FD;
margin-bottom: 6px;
}
.mind-bar {
height: 6px;
border-radius: 99px;
background: rgba(124, 58, 237, 0.2);
overflow: hidden;
}
.mind-bar::after {
content: '';
display: block;
width: 68%; height: 100%;
background: linear-gradient(90deg, #7C3AED, #F59E0B);
border-radius: 99px;
}
.mind-lessons { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.mind-lesson {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(124, 58, 237, 0.1);
font-size: 0.78rem;
color: #E9D5FF;
}
.mind-lesson.done { color: var(--mind-amber); }
.mind-lesson .ic { font-size: 0.85rem; }
.cover-mind {
width: 100%; height: 100%;
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.30), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(245, 158, 11, 0.20), transparent 55%),
linear-gradient(135deg, #2D1F62, #0B0830);
display: grid; place-items: center;
}
.cover-mind .md-mark {
width: 55%; aspect-ratio: 1 / 1;
border-radius: 22%;
background: linear-gradient(135deg, #7C3AED, #F59E0B);
display: grid; place-items: center;
font-size: 2.8rem;
box-shadow: 0 14px 40px rgba(124, 58, 237, 0.5), inset 0 2px 0 rgba(255,255,255,0.2);
}
.cover-mind .md-mark::after { content: '๐'; }
/* =========================================================================
VaultFolio โ Crypto ยท Neon green + dark
========================================================================= */
body.theme-vault {
--vault-green: #10F5A5;
--vault-deep: #022C22;
--vault-gold: #F59E0B;
--vault-dark: #00130C;
}
body.theme-vault::before {
background:
radial-gradient(ellipse 50% 40% at 80% 0%, rgba(16, 245, 165, 0.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 30%, rgba(245, 158, 11, 0.10), transparent 60%),
radial-gradient(ellipse at top, #022C22 0%, #00130C 60%, #00060A 100%);
}
body.theme-vault .gradient-text {
background: linear-gradient(120deg, #10F5A5, #34D399, #F59E0B, #10F5A5);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.theme-vault .eyebrow {
color: var(--vault-green);
background: linear-gradient(135deg, rgba(16, 245, 165, 0.15), rgba(245, 158, 11, 0.08));
border-color: rgba(16, 245, 165, 0.35);
font-family: 'JetBrains Mono', 'Inter', monospace;
}
/* VaultFolio hero โ portfolio panel */
.vault-panel {
width: 100%;
max-width: 380px;
background: linear-gradient(180deg, #022C22, #00130C);
border: 1px solid rgba(16, 245, 165, 0.3);
border-radius: 22px;
padding: 22px;
box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 60px rgba(16, 245, 165, 0.15);
font-family: 'Inter', sans-serif;
}
.vault-net {
text-align: center;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(16, 245, 165, 0.15);
}
.vault-net-label {
font-size: 0.62rem;
color: #6EE7B7;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.vault-net-value {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
font-weight: 700;
color: #ECFDF5;
margin-top: 4px;
letter-spacing: -0.02em;
}
.vault-net-change {
color: var(--vault-green);
font-size: 0.8rem;
font-weight: 600;
margin-top: 2px;
}
.vault-chart {
height: 60px;
margin: 12px 0 14px;
background:
url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
}
.vault-coins { display: flex; flex-direction: column; gap: 8px; }
.vault-coin {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
background: rgba(16, 245, 165, 0.06);
border: 1px solid rgba(16, 245, 165, 0.12);
border-radius: 10px;
}
.vault-coin-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 0.95rem;
font-weight: 700;
background: rgba(16, 245, 165, 0.15);
color: var(--vault-green);
}
.vault-coin-info .sym { font-size: 0.82rem; font-weight: 700; color: #ECFDF5; }
.vault-coin-info .nm { font-size: 0.65rem; color: #6EE7B7; }
.vault-coin-amt { text-align: end; }
.vault-coin-amt .v { font-size: 0.82rem; font-weight: 700; color: #ECFDF5; font-family: 'Inter', monospace; }
.vault-coin-amt .c { font-size: 0.65rem; color: var(--vault-green); font-family: 'Inter', monospace; }
.vault-coin-amt .c.down { color: #FCA5A5; }
.cover-vault {
width: 100%; height: 100%;
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(16, 245, 165, 0.25), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(245, 158, 11, 0.18), transparent 55%),
linear-gradient(135deg, #022C22, #00060A);
display: grid; place-items: center;
}
.cover-vault .v-mark {
width: 55%; aspect-ratio: 1 / 1;
border-radius: 22%;
background: linear-gradient(135deg, #10F5A5, #022C22);
border: 2px solid rgba(16, 245, 165, 0.5);
display: grid; place-items: center;
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 2.4rem;
color: #022C22;
text-shadow: 0 0 12px rgba(16, 245, 165, 0.8);
box-shadow: 0 14px 40px rgba(16, 245, 165, 0.45), inset 0 2px 0 rgba(255,255,255,0.2);
}
.cover-vault .v-mark::after { content: 'โฟ'; color: #022C22; }