180 lines
3.4 KiB
CSS
180 lines
3.4 KiB
CSS
/* Home page specific styles */
|
|
.container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, var(--background), rgba(8, 61, 119, 0.05));
|
|
}
|
|
|
|
.title {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 2.5rem;
|
|
text-align: center;
|
|
letter-spacing: -1px;
|
|
animation: fadeIn 0.8s ease-in-out;
|
|
}
|
|
|
|
.gradientText {
|
|
background: linear-gradient(90deg,
|
|
var(--color-yale-blue) 0%,
|
|
var(--color-charcoal) 35%,
|
|
var(--color-cerise) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: inline-block;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.searchContainer {
|
|
width: 100%;
|
|
max-width: 42rem;
|
|
margin-bottom: 2.5rem;
|
|
animation: scaleIn 0.5s ease-in-out;
|
|
animation-delay: 0.3s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.searchForm {
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.searchInput {
|
|
width: 100%;
|
|
padding: 1.2rem 1.5rem;
|
|
font-size: 1.2rem;
|
|
border: 2px solid transparent;
|
|
border-radius: 30px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
background-color: white;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.searchInput:focus {
|
|
box-shadow: 0 6px 16px rgba(8, 61, 119, 0.2);
|
|
border-color: var(--color-yale-blue);
|
|
}
|
|
|
|
.searchInput::placeholder {
|
|
color: rgba(46, 64, 87, 0.5);
|
|
}
|
|
|
|
.searchButton {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
padding: 0 1.8rem;
|
|
background-color: var(--color-yale-blue);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.searchButton:hover {
|
|
background-color: var(--color-charcoal);
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
max-width: 42rem;
|
|
background-color: white;
|
|
padding: 2rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.yearGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.brandSection {
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
color: var(--color-charcoal);
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
animation-delay: 0.6s;
|
|
animation-fill-mode: both;
|
|
position: relative;
|
|
}
|
|
|
|
.brandSection::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 50px;
|
|
height: 3px;
|
|
background-color: var(--color-naples-yellow);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.brandSection p {
|
|
font-weight: 600;
|
|
margin-bottom: 0.8rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.brandList {
|
|
margin-top: 0.8rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.brandLink {
|
|
color: var(--color-yale-blue);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
transition: all 0.2s ease;
|
|
background-color: white;
|
|
border: 1px solid rgba(8, 61, 119, 0.1);
|
|
}
|
|
|
|
.brandLink:hover {
|
|
background-color: var(--color-sunset);
|
|
color: var(--color-charcoal);
|
|
} |