:root{
--primary:#2c3e50;
--primary-dark:#1a2530;
--primary-light:#34495e;
--secondary:#3498db;
--secondary-dark:#2980b9;
--secondary-light:#5dade2;
--accent:#e74c3c;
--accent-dark:#c0392b;
--success:#27ae60;
--success-dark:#229954;
--warning:#f39c12;
--warning-dark:#d68910;
--light:#ecf0f1;
--light-gray:#f8f9fa;
--dark:#34495e;
--darker:#2c3e50;
--gray:#95a5a6;
--dark-gray:#7f8c8d;
--spacing-xs:0.25rem;
--spacing-sm:0.5rem;
--spacing-md:1rem;
--spacing-lg:1.5rem;
--spacing-xl:2rem;
--spacing-xxl:3rem;
--border-radius-sm:5px;
--border-radius-md:8px;
--border-radius-lg:10px;
--border-radius-xl:15px;
--shadow-sm:0 2px 4px rgba(0,0,0,0.1);
--shadow-md:0 4px 6px rgba(0,0,0,0.1);
--shadow-lg:0 10px 15px rgba(0,0,0,0.1);
--shadow-xl:0 20px 25px rgba(0,0,0,0.1);
--transition-fast:0.2s ease;
--transition-normal:0.3s ease;
--transition-slow:0.5s ease;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
line-height:1.6;
color:#333;
background-color:var(--light-gray);
min-height:100vh;
display:flex;
flex-direction:column;
}
h1,h2,h3,h4,h5,h6{
color:var(--primary);
font-weight:600;
line-height:1.3;
margin-bottom:var(--spacing-md);
}
h1{
font-size:2.5rem;
margin-top:0;
}
h2{
font-size:2rem;
border-bottom:2px solid var(--secondary);
padding-bottom:var(--spacing-sm);
}
h3{
font-size:1.5rem;
}
h4{
font-size:1.25rem;
}
p{
margin-bottom:var(--spacing-md);
}
a{
color:var(--secondary);
text-decoration:none;
transition:color var(--transition-fast);
}
a:hover{
color:var(--secondary-dark);
text-decoration:underline;
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 var(--spacing-md);
}
header{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:white;
padding:var(--spacing-lg);
box-shadow:var(--shadow-md);
position:sticky;
top:0;
z-index:100;
}
.header-content{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:0 auto;
}
.header-content h1{
color:white;
margin:0;
font-size:1.8rem;
}
nav{
display:flex;
gap:var(--spacing-md);
}
nav button{
background:rgba(255,255,255,0.2);
color:white;
border:1px solid rgba(255,255,255,0.3);
padding:var(--spacing-sm) var(--spacing-md);
border-radius:var(--border-radius-sm);
cursor:pointer;
transition:all var(--transition-fast);
font-weight:500;
}
nav button:hover{
background:rgba(255,255,255,0.3);
transform:translateY(-1px);
}
main{
flex:1;
padding:var(--spacing-xl) 0;
}
.search-filters{
background:white;
border-radius:var(--border-radius-lg);
padding:var(--spacing-lg);
margin-bottom:var(--spacing-xl);
box-shadow:var(--shadow-md);
}
.search-container{
display:flex;
margin-bottom:var(--spacing-lg);
gap:var(--spacing-sm);
}
.search-container input{
flex:1;
padding:var(--spacing-md);
border:2px solid #ddd;
border-radius:var(--border-radius-sm);
font-size:1rem;
}
.search-container button{
background:var(--secondary);
color:white;
border:none;
padding:var(--spacing-md) var(--spacing-xl);
border-radius:var(--border-radius-sm);
cursor:pointer;
font-size:1rem;
font-weight:500;
transition:background var(--transition-fast);
}
.search-container button:hover{
background:var(--secondary-dark);
}
.filters{
margin-top:var(--spacing-lg);
}
.filter-section{
margin-bottom:var(--spacing-lg);
}
.filter-section h3{
margin-top:0;
margin-bottom:var(--spacing-sm);
color:var(--dark);
font-size:1.2rem;
}
.filter-tags{
display:flex;
flex-wrap:wrap;
gap:var(--spacing-sm);
}
.filter-tag{
background:var(--light);
padding:var(--spacing-sm) var(--spacing-md);
border-radius:20px;
cursor:pointer;
transition:all var(--transition-fast);
font-size:0.9rem;
border:1px solid #ddd;
}
.filter-tag:hover{
background:var(--secondary);
color:white;
border-color:var(--secondary);
}
.filter-tag.selected{
background:var(--secondary);
color:white;
border-color:var(--secondary);
}
.modules-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:var(--spacing-lg);
}
.module-card{
background:white;
border-radius:var(--border-radius-lg);
padding:var(--spacing-lg);
box-shadow:var(--shadow-md);
transition:all var(--transition-normal);
border:1px solid #eee;
display:flex;
flex-direction:column;
height:100%;
}
.module-card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-lg);
border-color:var(--secondary-light);
}
.module-header{
border-bottom:2px solid var(--secondary);
padding-bottom:var(--spacing-md);
margin-bottom:var(--spacing-md);
flex-shrink:0;
}
.module-title{
margin:0 0 var(--spacing-sm) 0;
color:var(--primary);
font-size:1.4rem;
}
.module-meta{
display:flex;
flex-wrap:wrap;
gap:var(--spacing-xs);
margin-bottom:var(--spacing-sm);
}
.meta-tag{
background:var(--light);
padding:var(--spacing-xs) var(--spacing-sm);
border-radius:15px;
font-size:0.85rem;
font-weight:500;
}
.module-description{
margin-bottom:var(--spacing-md);
color:var(--dark-gray);
}
.module-stats{
display:flex;
justify-content:space-between;
margin-bottom:var(--spacing-md);
font-size:0.9rem;
flex-shrink:0;
}
.stat-item{
text-align:center;
}
.stat-value{
font-weight:bold;
color:var(--primary);
font-size:1.1rem;
}
.stat-label{
color:var(--dark-gray);
font-size:0.8rem;
}
.module-actions{
display:flex;
gap:var(--spacing-xs);
flex-wrap:wrap;
flex-shrink:0;
}
.module-actions a{
width:100%;
}
.btn{
background:var(--secondary);
color:white;
border:none;
padding:var(--spacing-sm) var(--spacing-md);
border-radius:var(--border-radius-sm);
cursor:pointer;
font-size:0.9rem;
font-weight:500;
transition:all var(--transition-fast);
align-items:center;
gap:var(--spacing-xs);
flex:1;
}
.btn:hover{
background:var(--secondary-dark);
transform:translateY(-1px);
}
.btn-secondary{
background:var(--gray);
}
.btn-secondary:hover{
background:var(--dark-gray);
}
.btn-success{
background:var(--success);
}
.btn-success:hover{
background:var(--success-dark);
}
.btn-warning{
background:var(--warning);
}
.btn-warning:hover{
background:var(--warning-dark);
}
.btn-danger{
background:var(--accent);
}
.btn-danger:hover{
background:var(--accent-dark);
}
.btn-sm{
padding:var(--spacing-xs) var(--spacing-sm);
font-size:0.8rem;
}
.vote-btn{
background:var(--gray);
padding:var(--spacing-xs) var(--spacing-sm);
min-width:60px;
}
.vote-btn.up{
background:var(--success);
}
.vote-btn.down{
background:var(--accent);
}
.vote-btn:hover{
opacity:0.9;
transform:scale(1.05);
}
.vote-count{
font-weight:bold;
min-width:20px;
text-align:center;
}
.pagination{
display:flex;
justify-content:center;
margin-top:var(--spacing-xl);
gap:var(--spacing-xs);
}
.pagination button{
background:white;
border:1px solid #ddd;
padding:var(--spacing-sm) var(--spacing-md);
border-radius:var(--border-radius-sm);
cursor:pointer;
transition:all var(--transition-fast);
}
.pagination button:hover{
background:var(--light);
border-color:var(--secondary);
}
.pagination button.active{
background:var(--secondary);
color:white;
border-color:var(--secondary);
}
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
z-index:1000;
align-items:center;
justify-content:center;
}
.open{
display:flex;
}
.modal-content{
background:white;
border-radius:var(--border-radius-lg);
padding:var(--spacing-xl);
margin:var(--spacing-xl);
max-width:800px;
max-height:90vh;
overflow-y:auto;
position:relative;
animation:modalSlideIn var(--transition-normal);
}
@keyframes modalSlideIn{
from{
opacity:0;
transform:translateY(-50px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.close-modal{
position:absolute;
top:var(--spacing-md);
right:var(--spacing-md);
font-size:1.5rem;
cursor:pointer;
color:var(--dark-gray);
background:none;
border:none;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
transition:background var(--transition-fast);
}
.close-modal:hover{
background:var(--light);
color:var(--dark);
}
.tabs{
display:flex;
border-bottom:1px solid #ddd;
margin-bottom:var(--spacing-lg);
}
.tab{
padding:var(--spacing-md) var(--spacing-lg);
cursor:pointer;
border-bottom:3px solid transparent;
font-weight:500;
transition:all var(--transition-fast);
}
.tab:hover{
background:var(--light);
}
.tab.active{
border-bottom:3px solid var(--secondary);
color:var(--secondary);
}
.tab-content{
display:none;
}
.tab-content.active{
display:block;
}
.skill-list{
display:flex;
flex-wrap:wrap;
gap:var(--spacing-xs);
margin:var(--spacing-sm) 0;
}
.skill-chip{
background:#e3f2fd;
color:#1976d2;
padding:var(--spacing-xs) var(--spacing-sm);
border-radius:12px;
font-size:0.85rem;
}
.skill-chip:hover{
background:#bbdefb;
}
.competency-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:var(--spacing-lg);
}
.competency-area{
border:1px solid #ddd;
border-radius:var(--border-radius-md);
overflow:hidden;
}
.area-header{
background:var(--primary);
color:white;
padding:var(--spacing-md);
margin:0;
font-size:1.1rem;
}
.skills-list{
padding:var(--spacing-md);
max-height:400px;
overflow-y:auto;
}
.skill-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:var(--spacing-sm) 0;
border-bottom:1px solid #f0f0f0;
}
.skill-item:last-child{
border-bottom:none;
}
.skill-info{
flex:1;
}
.skill-name{
font-weight:500;
margin:0 0 var(--spacing-xs) 0;
font-size:0.95rem;
}
.skill-modules{
color:var(--dark-gray);
font-size:0.85rem;
margin:0;
}
.skill-status{
padding:var(--spacing-xs) var(--spacing-sm);
border-radius:12px;
font-size:0.8rem;
font-weight:bold;
white-space:nowrap;
}
.status-mastered{
background:#d4edda;
color:#155724;
}
.status-in-progress{
background:#cce5ff;
color:#004085;
}
.status-gap{
background:#f8d7da;
color:#721c24;
}
.status-recommended{
background:#fff3cd;
color:#856404;
}
.visualization{
display:flex;
align-items:center;
gap:var(--spacing-sm);
margin:var(--spacing-md) 0;
}
.progress-container{
flex:1;
height:20px;
background:#eee;
border-radius:10px;
overflow:hidden;
}
.progress-segment{
height:100%;
float:left;
}
.progress-mastered{
background:var(--success);
}
.progress-in-progress{
background:var(--secondary);
}
.progress-gap{
background:var(--accent);
}
.legend{
display:flex;
gap:var(--spacing-md);
margin-top:var(--spacing-md);
flex-wrap:wrap;
}
.legend-item{
display:flex;
align-items:center;
gap:var(--spacing-xs);
}
.legend-color{
width:20px;
height:20px;
border-radius:3px;
}
.profile-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:var(--spacing-md);
margin-bottom:var(--spacing-xl);
}
.stat-card{
background:white;
border-radius:var(--border-radius-lg);
padding:var(--spacing-lg);
text-align:center;
box-shadow:var(--shadow-md);
transition:transform var(--transition-fast);
}
.stat-card:hover{
transform:translateY(-3px);
}
.stat-number{
font-size:2.5rem;
font-weight:bold;
margin:0 0 var(--spacing-xs) 0;
}
.stat-number.mastered{
color:var(--success);
}
.stat-number.in-progress{
color:var(--secondary);
}
.stat-number.gap{
color:var(--accent);
}
.stat-number.recommended{
color:var(--warning);
}
.stat-label{
color:var(--dark);
margin:0;
font-weight:500;
}
.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:var(--spacing-md);
}
.project-card{
border:1px solid #ddd;
border-radius:var(--border-radius-md);
padding:var(--spacing-md);
background:var(--light);
}
.project-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:var(--spacing-sm);
}
.project-title{
margin:0;
color:var(--primary);
font-size:1.1rem;
}
.project-type{
background:white;
padding:var(--spacing-xs) var(--spacing-sm);
border-radius:12px;
font-size:0.8rem;
font-weight:500;
}
.gap-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:var(--spacing-md);
border:1px solid #eee;
border-radius:var(--border-radius-md);
margin-bottom:var(--spacing-sm);
background:white;
}
.gap-info h4{
margin:0 0 var(--spacing-xs) 0;
}
.gap-info p{
margin:0;
color:var(--dark-gray);
font-size:0.9rem;
}
.gap-priority{
padding:var(--spacing-xs) var(--spacing-sm);
border-radius:12px;
font-size:0.8rem;
font-weight:bold;
}
.priority-high{
background:#f8d7da;
color:#721c24;
}
.priority-medium{
background:#fff3cd;
color:#856404;
}
.priority-low{
background:#cce5ff;
color:#004085;
}
@media (max-width:768px){
.header-content{
flex-direction:column;
gap:var(--spacing-md);
}
.search-container{
flex-direction:column;
}
.search-container input,
.search-container button{
width:100%;
}
.modules-grid{
grid-template-columns:1fr;
}
.competency-grid{
grid-template-columns:1fr;
}
.profile-stats{
grid-template-columns:1fr 1fr;
}
h1{
font-size:2rem;
}
h2{
font-size:1.5rem;
}
}
@media (max-width:480px){
.module-actions{
flex-direction:column;
}
.btn{
width:100%;
justify-content:center;
}
.profile-stats{
grid-template-columns:1fr;
}
.filter-tags{
flex-direction:column;
}
.filter-tag{
width:100%;
text-align:center;
}
}
.text-center{
text-align:center;
}
.text-right{
text-align:right;
}
.mb-0{
margin-bottom:0;
}
.mt-0{
margin-top:0;
}
.m-0{
margin:0;
}
.p-0{
padding:0;
}
.d-flex{
display:flex;
}
.justify-content-between{
justify-content:space-between;
}
.align-items-center{
align-items:center;
}
.w-100{
width:100%;
}
.hidden{
display:none;
}
.loading{
display:flex;
justify-content:center;
align-items:center;
padding:var(--spacing-xl);
}
.spinner{
width:40px;
height:40px;
border:4px solid var(--light);
border-top:4px solid var(--secondary);
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}
input,select,textarea{
font-family:inherit;
font-size:1rem;
padding:var(--spacing-sm);
border:1px solid #ddd;
border-radius:var(--border-radius-sm);
transition:border-color var(--transition-fast);
}
input:focus,select:focus,textarea:focus{
outline:none;
border-color:var(--secondary);
box-shadow:0 0 0 2px rgba(52,152,219,0.2);
}
.alert{
padding:var(--spacing-md);
border-radius:var(--border-radius-sm);
margin-bottom:var(--spacing-md);
}
.alert-success{
background:#d4edda;
color:#155724;
border:1px solid #c3e6cb;
}
.alert-error{
background:#f8d7da;
color:#721c24;
border:1px solid #f5c6cb;
}
.alert-warning{
background:#fff3cd;
color:#856404;
border:1px solid #ffeeba;
}
.alert-info{
background:#cce5ff;
color:#004085;
border:1px solid #b8daff;
}
.tag-filters{
display:flex;
flex-wrap:wrap;
gap:15px;
margin:20px 0;
padding:20px;
background:var(--light);
border-radius:var(--border-radius-md);
border:1px solid #e9ecef;
max-width:1025px;
}
.filter-group{
display:flex;
flex-direction:column;
min-width:150px;
flex:1;
}
.filter-group label{
font-size:0.9rem;
font-weight:500;
margin-bottom:8px;
color:var(--dark);
}
.filter-group select,
.filter-group input{
padding:10px;
border:1px solid #ced4da;
border-radius:var(--border-radius-sm);
font-size:0.95rem;
background:white;
transition:border-color var(--transition-fast);
}
.filter-group select:focus,
.filter-group input:focus{
outline:none;
border-color:var(--secondary);
box-shadow:0 0 0 2px rgba(52,152,219,0.2);
}
.filter-actions{
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:10px;
min-width:150px;
}
.filter-actions button{
padding:10px 15px;
border:none;
border-radius:var(--border-radius-sm);
cursor:pointer;
font-weight:500;
transition:all var(--transition-fast);
font-size:0.95rem;
}
.apply-filters{
background:var(--secondary);
color:white;
}
.clear-filters{
background:var(--gray);
color:white;
}
.apply-filters:hover{
background:var(--secondary-dark);
transform:translateY(-1px);
}
.clear-filters:hover{
background:var(--dark-gray);
transform:translateY(-1px);
}
@media (max-width:768px){
.tag-filters{
flex-direction:column;
gap:15px;
}
.filter-group{
min-width:100%;
}
.filter-actions{
flex-direction:row;
min-width:100%;
}
.filter-actions button{
flex:1;
}
}
.notification{
position:fixed;
top:20px;
right:20px;
background:var(--success);
color:white;
padding:15px 20px;
border-radius:var(--border-radius-sm);
box-shadow:var(--shadow-lg);
z-index:2000;
display:none;
animation:slideIn 0.3s ease;
}
@keyframes slideIn{
from{
transform:translateX(100%);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}
.notification.show{
display:block;
}
.modules-grid.filtering{
opacity:0.7;
pointer-events:none;
}
.no-results{
grid-column:1 / -1;
text-align:center;
padding:3rem;
color:var(--dark-gray);
}
.no-results h3{
color:var(--dark);
margin-bottom:var(--spacing-md);
}
.module-card.filtered{
border-left:4px solid var(--secondary);
}
.search-header{
display:flex;
justify-content:space-between;
align-items:center;
}
.search-stats{
color:var(--dark);
font-weight:500;
}
.filters-container{
background:white;
border-radius:10px;
padding:1.5rem;
margin-bottom:2rem;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
display:none;
max-width:1025px;
}
.filters-container.active{
display:block;
}
.selected-skills-container{
margin:1rem 0;
max-width:1025px;
}
.selected-skills{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
margin-bottom:1rem;
}
.selected-skill{
background:var(--secondary);
color:white;
padding:0.25rem 0.75rem;
border-radius:15px;
display:flex;
align-items:center;
gap:0.5rem;
}
.remove-skill{
background:none;
border:none;
color:white;
cursor:pointer;
font-weight:bold;
}
.skill-categories{
display:grid;
gap:1.5rem;
margin-top:1.5rem;
}
.skill-category{
border:1px solid #ddd;
border-radius:8px;
overflow:hidden;
}
.category-header{
background:var(--primary);
color:white;
padding:1rem;
margin:0;
}
.skills-list{
padding:1rem;
max-height:300px;
overflow-y:auto;
}
.skill-item{
padding:1px;
border-bottom:1px solid #f0f0f0;
cursor:pointer;
display:flex;
align-items:center;
gap:0.5rem;
}
.skill-item:hover{
background:var(--light);
}
.skill-checkbox{
margin-right:0.5rem;
}
.result-score{
background:var(--success);
color:white;
padding:0.25rem 0.5rem;
border-radius:12px;
font-size:0.8rem;
font-weight:bold;
}
.skill-match-highlight{
background:#fff3cd;
padding:0.1rem 0.3rem;
border-radius:3px;
}
.no-results{
grid-column:1 / -1;
text-align:center;
padding:2rem;
color:var(--dark-gray);
}
@media (max-width:768px){
.search-header{
flex-direction:column;
gap:1rem;
align-items:flex-start;
}
.skill-categories{
grid-template-columns:1fr;
}
.selected-skills{
flex-direction:column;
}
.selected-skill{
width:100%;
justify-content:space-between;
}
}
header{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:white;
padding:1rem 0;
box-shadow:var(--shadow-md);
position:sticky;
top:0;
z-index:100;
}
.header-content{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:0 auto;
}
.header-content h1{
color:white;
margin:0;
font-size:1.8rem;
font-weight:600;
}
.logo img{
max-height:40px;
width:auto;
}
nav{
display:flex;
gap:1rem;
margin-top:0.5rem;
}
.nav-btn{
background:rgba(255,255,255,0.1);
color:white;
border:1px solid rgba(255,255,255,0.3);
padding:0.375rem 0.75rem;
border-radius:4px;
cursor:pointer;
transition:all 0.2s ease;
font-size:0.95rem;
font-weight:500;
text-decoration:none;
display:inline-block;
line-height:1.5;
min-width:115px;
text-align:center;
}
.nav-btn:hover{
background:rgba(255,255,255,0.2);
transform:translateY(-1px);
border-color:rgba(255,255,255,0.5);
}
.nav-btn.active{
background:rgba(255,255,255,0.2);
border-color:white;
font-weight:600;
}
@media (max-width:768px){
.header-content{
flex-direction:column;
gap:0.5rem;
text-align:center;
}
nav{
flex-wrap:wrap;
justify-content:center;
margin-top:0.5rem;
}
.nav-btn{
margin:0.25rem;
min-width:115px;
text-align:center;
}
}
:root{
--primary:#2c3e50;
--secondary:#3498db;
--accent:#e74c3c;
--light:#ecf0f1;
--dark:#34495e;
--success:#27ae60;
}
body{
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
line-height:1.6;
color:#333;
max-width:1200px;
margin:0 auto;
padding:20px;
background-color:#f8f9fa;
}
header{
background:linear-gradient(135deg,var(--primary),var(--dark));
color:white;
padding:1rem;
border-radius:10px;
margin-bottom:2rem;
display:flex;
justify-content:space-between;
align-items:center;
}
.profile-header{
display:flex;
gap:1.5rem;
margin-bottom:2rem;
}
.avatar{
width:100px;
height:100px;
border-radius:50%;
background:var(--secondary);
display:flex;
align-items:center;
justify-content:center;
font-size:2.5rem;
color:white;
}
.profile-info h1{
margin:0 0 0.5rem 0;
color:var(--primary);
}
.profile-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:1rem;
margin-bottom:2rem;
}
.stat-card{
background:white;
border-radius:10px;
padding:1.5rem;
text-align:center;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.stat-number{
font-size:2rem;
font-weight:bold;
color:var(--secondary);
margin:0;
}
.stat-label{
color:var(--dark);
margin:0.5rem 0 0 0;
}
.section{
background:white;
border-radius:10px;
padding:1.5rem;
margin-bottom:2rem;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
border-bottom:2px solid var(--secondary);
padding-bottom:0.5rem;
}
.goals-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:1rem;
}
.goal-card{
border:1px solid #ddd;
border-radius:8px;
padding:1rem;
background:var(--light);
}
.goal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:0.5rem;
}
.goal-title{
margin:0;
color:var(--primary);
}
.goal-status{
padding:0.25rem 0.5rem;
border-radius:12px;
font-size:0.8rem;
font-weight:bold;
}
.status-planning{
background:#fff3cd;
color:#856404;
}
.status-in-progress{
background:#cce5ff;
color:#004085;
}
.status-completed{
background:#d4edda;
color:#155724;
}
.skills-list{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
margin-top:1rem;
}
.skill-chip{
background:#e3f2fd;
color:#1976d2;
padding:0.25rem 0.5rem;
border-radius:12px;
font-size:0.8rem;
}
.progress-bar{
height:10px;
background:#eee;
border-radius:5px;
margin:0.5rem 0;
overflow:hidden;
}
.progress-fill{
height:100%;
background:var(--success);
border-radius:5px;
}
.module-history{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(500px,1fr));
gap:1rem;
}
.history-item{
border-left:3px solid var(--success);
padding-left:1rem;
margin-bottom:1rem;
}
.history-title{
font-weight:bold;
margin:0 0 0.25rem 0;
}
.history-date{
color:#666;
font-size:0.9rem;
margin-bottom:0;
}
button{
background:var(--secondary);
color:white;
border:none;
padding:0.5rem 1rem;
border-radius:5px;
cursor:pointer;
}
button:hover{
background:#2980b9;
}
button.secondary{
background:var(--gray);
color:white;
}
button.secondary:hover{
background:var(--dark-gray);
transform:translateY(-1px);
}
.section{
background:white;
border-radius:10px;
padding:1.5rem;
margin-bottom:2rem;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
border-bottom:2px solid #3498db;
padding-bottom:0.5rem;
}
.goals-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(500px, 1fr));
gap:1.5rem;
}
.goal-card{
background:#f8f9fa;
border-radius:10px;
padding:1rem;
}
.goal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.5rem;
}
.goal-title{
margin:0;
}
.goal-status{
padding:0.25rem 0.75rem;
border-radius:12px;
font-size:0.8rem;
}
.status-in-progress{
background:#cce5ff;
color:#004085;
}
.status-planning{
background:#fff3cd;
color:#856404;
}
.status-completed{
background:#d4edda;
color:#155724;
}
.progress-bar{
width:100%;
height:8px;
background:#e0e0e0;
border-radius:4px;
overflow:hidden;
margin:0.5rem 0;
}
.progress-fill{
height:100%;
background:#3498db;
}
.skills-list{
display:flex;
flex-wrap:wrap;
gap:0.25rem;
margin-top:0.5rem;
}
.skill-chip{
background:#e3f2fd;
color:#1976d2;
padding:0.25rem 0.5rem;
border-radius:12px;
font-size:0.8rem;
}
.btn.added {
background:#27ae60;
border-color:#27ae60;
}
@media (max-width:768px){
.profile-stats,
.goals-grid,
.module-history{
display:flex;
flex-direction:column;
gap:1rem;
}
}
@media (max-width:480px){
.profile-stats,
.goals-grid,
.module-history{
display:flex;
flex-direction:column;
gap:0.75rem;
}
}
.goal-actions{
display:flex;
gap:var(--spacing-xs);
flex-wrap:wrap;
flex-shrink:0;
}