:root {
--primary-color: #ff7e29;
--secondary-color: #ffaa5c;
--bg-dark: #121212;
}
body {
font-family: 'Tajawal', sans-serif;
background: linear-gradient(135deg, #0c0c0c, #1a1a1a, #2c2c2c);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem;
margin: 0;
color: white;
}
.nav-container {
background: rgba(25, 25, 25, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 126, 41, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 126, 41, 0.15),
inset 0 0 15px rgba(255, 255, 255, 0.05);
}
.nav-item {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.nav-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(255, 126, 41, 0.1), transparent);
transform: translateY(-100%);
transition: transform 0.5s ease;
z-index: 0;
}
.nav-item:hover::before {
transform: translateY(0);
}
.nav-item:hover {
color: var(--primary-color) !important;
background: rgba(40, 40, 40, 0.8) !important;
transform: translateY(-5px) scale(1.05);
border-color: rgba(255, 126, 41, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.nav-icon {
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.nav-item:hover .nav-icon {
color: var(--primary-color) !important;
transform: scale(1.2);
filter: drop-shadow(0 0 5px rgba(255, 126, 41, 0.7));
}
.nav-text {
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.nav-item:hover .nav-text {
text-shadow: 0 0 8px rgba(255, 126, 41, 0.7);
}
/* تأثير النقر */
.nav-item:active {
transform: scale(0.95);
}
/* تصميم متجاوب */
@media (max-width: 1024px) {
.nav-container {
flex-wrap: wrap;
padding: 1rem;
}
.nav-item {
width: calc(33.333% - 0.5rem);
margin: 0.25rem;
}
}
@media (max-width: 640px) {
.nav-item {
width: calc(50% - 0.5rem);
}
}
/* تأثير النبض للعنصر النشط */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 126, 41, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(255, 126, 41, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 126, 41, 0); }
}
.active {
color: var(--primary-color) !important;
background: rgba(40, 40, 40, 0.8) !important;
border-color: rgba(255, 126, 41, 0.3);
animation: pulse 2s infinite;
}
.active .nav-icon {
color: var(--primary-color) !important;
filter: drop-shadow(0 0 5px rgba(255, 126, 41, 0.7));
}
!doctype>