:where([class^="ri-"])::before { content: "\f3c2"; }
:root {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--accent-primary: #00A3FF;
--accent-secondary: #00E088;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, rgba(0,163,255,0.15) 0%, rgba(0,224,136,0.15) 100%);
}
.glass-nav {
backdrop-filter: blur(10px);
background-color: rgba(15, 23, 42, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
margin-top: 8px;
border-radius: 2px;
}
.skill-bar {
height: 8px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.skill-progress {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}
.card {
background-color: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-color: rgba(0, 163, 255, 0.3);
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
transform: translateX(-50%);
}
.timeline-item::after {
content: '';
position: absolute;
left: 0;
top: 16px;
bottom: -16px;
width: 2px;
background-color: rgba(255, 255, 255, 0.1);
transform: translateX(-50%);
}
.timeline-item:last-child::after {
display: none;
}
.form-input {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary);
transition: all 0.3s ease;
}
.form-input:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2);
outline: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 163, 255, 0.3);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--accent-primary);
color: var(--accent-primary);
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline:hover {
background-color: var(--accent-primary);
color: #fff;
}
.social-icon {
transition: all 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
color: var(--accent-primary);
}
.project-tag {
background-color: rgba(0, 163, 255, 0.1);
color: var(--accent-primary);
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
}
.active-nav-item {
color: var(--accent-primary);
position: relative;
}
.active-nav-item::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
border-radius: 1px;
}
.typing-cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: var(--accent-primary);
margin-left: 2px;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-primary);
}
/* Animated background shapes */
.shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
opacity: 0.1;
filter: blur(40px);
animation: float 15s infinite ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(5%, 5%) rotate(5deg);
}
50% {
transform: translate(0, 10%) rotate(0deg);
}
75% {
transform: translate(-5%, 5%) rotate(-5deg);
}
}
/* Project filter buttons */
.filter-btn {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-secondary);
transition: all 0.3s ease;
}
.filter-btn.active {
background-color: var(--accent-primary);
color: #fff;
border-color: var(--accent-primary);
}
.filter-btn:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
/* Custom switch */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.1);
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Custom checkbox */
.custom-checkbox {
position: relative;
padding-left: 30px;
cursor: pointer;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.custom-checkbox:hover .checkmark {
background-color: rgba(255, 255, 255, 0.1);
}
.custom-checkbox input:checked ~ .checkmark {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
border-color: transparent;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 7px;
top: 3px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

/* --- Projects.css Additional Styles --- */

 .glass-nav { backdrop-filter: blur(10px); background-color: rgba(15, 23, 42, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .card { background-color: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border-color: rgba(0, 163, 255, 0.3); } .project-tag { background-color: rgba(0, 163, 255, 0.1); color: var(--accent-primary); font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; } .filter-btn { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); transition: all 0.3s ease; } .filter-btn.active { background-color: var(--accent-primary); color: #fff; border-color: var(--accent-primary); } .filter-btn:hover:not(.active) { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .search-input { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); transition: all 0.3s ease; } .search-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2); outline: none; } .sort-select { appearance: none; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; } .sort-select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2); outline: none; } .custom-checkbox { position: relative; padding-left: 30px; cursor: pointer; user-select: none; } .custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; } .custom-checkbox:hover .checkmark { background-color: rgba(255, 255, 255, 0.1); } .custom-checkbox input:checked ~ .checkmark { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-color: transparent; } .checkmark:after { content: ""; position: absolute; display: none; } .custom-checkbox input:checked ~ .checkmark:after { display: block; } .custom-checkbox .checkmark:after { left: 7px; top: 3px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .active-filter-pill { background: rgba(0, 163, 255, 0.1); color: var(--accent-primary); border: 1px solid rgba(0, 163, 255, 0.3); } .project-detail-modal { background-color: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px); } .project-detail-content { background-color: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, 0.1); } .tech-badge { background-color: rgba(0, 163, 255, 0.1); color: var(--accent-primary); font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; } .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }