/* File: style.css */
:where([class^="ri-"])::before { content: "\f3c2"; }
html {
scroll-behavior: smooth;
font-family: 'Inter', sans-serif;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@keyframes twinkle {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
.space-bg {
background: linear-gradient(to bottom, white,white);
position: relative;
overflow: hidden;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite;
}
.floating-animation {
animation: float 6s ease-in-out infinite;
}
.space-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.space-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.glow-text {
text-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}
body {
background-color: #fafafa;
color: #1f2937;
}
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.skill-icon {
transition: transform 0.3s ease;
}
.skill-icon:hover {
transform: translateY(-5px);
}
.modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-content {
transition: transform 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal.active .modal-content {
transform: translateY(0);
}
.progress-bar {
position: relative;
height: 8px;
border-radius: 4px;
background-color: #e5e7eb;
overflow: hidden;
}
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #4F46E5;
border-radius: 4px;
transition: width 1s ease;
}
.custom-checkbox {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #e5e7eb;
border-radius: 4px;
background-color: white;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.custom-checkbox:checked {
background-color: #4F46E5;
border-color: #4F46E5;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
top: 4px;
left: 7px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: .4s;
border-radius: 24px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .switch-slider {
background-color: #4F46E5;
}
input:checked + .switch-slider:before {
transform: translateX(26px);
}
.custom-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: #e5e7eb;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4F46E5;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.custom-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #4F46E5;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 2px solid #e5e7eb;
outline: none;
transition: border-color 0.3s ease;
font-size: 0.875rem;
}
.form-input:focus {
border-color: #4F46E5;
}
.form-input.error {
border-color: #ef4444;
}
.form-label {
position: absolute;
left: 1rem;
top: 0.75rem;
color: #6b7280;
transition: all 0.2s ease;
pointer-events: none;
font-size: 0.875rem;
}
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
top: -0.5rem;
left: 0.75rem;
font-size: 0.75rem;
padding: 0 0.25rem;
background-color: white;
color: #4F46E5;
}
.form-input.error + .form-label {
color: #ef4444;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #4F46E5;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.hamburger {
width: 24px;
height: 18px;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #838588;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 0px;
}
.hamburger span:nth-child(2) {
top: 8px;
}
.hamburger span:nth-child(3) {
top: 16px;
}
.hamburger.active span:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
animation: fadeIn 0.8s ease forwards;
}
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }