chromacanvas-studio / style.css
keexbuttowski's picture
Create a polished graphic design portfolio website for an experienced designer showcasing work produced over multiple years. The website should feel professional, confident, and refined, suitable for agencies, studios, and direct clients.
6494c8b verified
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Animation classes */
.fade-in {
animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Project hover effect */
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Hero section overlay */
.hero-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
z-index: 1;
}
/* Form input focus */
input:focus, textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
/* Client logos */
.client-logo {
transition: all 0.3s ease;
filter: grayscale(100%);
opacity: 0.7;
}
.client-logo:hover {
filter: grayscale(0);
opacity: 1;
}
/* Responsive typography */
@media (max-width: 640px) {
.hero-title {
font-size: 2.5rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.1rem;
}
}