70 lines
1.4 KiB
CSS
70 lines
1.4 KiB
CSS
|
/* EDUCATION (THE DOJO) */
|
||
|
|
.curriculum-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: var(--space-3);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
border-left: 2px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.curriculum-item:hover {
|
||
|
|
background: var(--color-void-100);
|
||
|
|
}
|
||
|
|
|
||
|
|
.curriculum-item.active {
|
||
|
|
background: var(--color-void-100);
|
||
|
|
border-left-color: var(--color-cyan-500);
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-tree {
|
||
|
|
position: relative;
|
||
|
|
padding: var(--space-8);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-node {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
background: var(--color-void-100);
|
||
|
|
border: 2px solid var(--color-void-300);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
transition: all 0.3s;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-node:hover {
|
||
|
|
transform: scale(1.1);
|
||
|
|
border-color: var(--color-cyan-400);
|
||
|
|
box-shadow: 0 0 15px rgba(0, 219, 245, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-node.unlocked {
|
||
|
|
border-color: var(--color-lime-500);
|
||
|
|
color: var(--color-lime-500);
|
||
|
|
background: rgba(132, 204, 22, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-node.locked {
|
||
|
|
opacity: 0.5;
|
||
|
|
border-style: dashed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-connector {
|
||
|
|
position: absolute;
|
||
|
|
background: var(--color-void-300);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skill-connector.active {
|
||
|
|
background: var(--color-lime-500);
|
||
|
|
box-shadow: 0 0 5px rgba(132, 204, 22, 0.5);
|
||
|
|
}
|