box-sizing: border-box;
}
{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 40px 20px;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.year-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
perspective: 1000px;
}
.year-tile {
background: white;
padding: 40px 30px;
border-radius: 16px;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
position: relative;
overflow: hidden;
animation: slideInRotate 0.8s ease-out;
animation-fill-mode: both;
transform-style: preserve-3d;
}
.year-tile:nth-child(1) {
animation-delay: 0.1s;
border-top: 4px solid #0083b4;
}
.year-tile:nth-child(2) {
animation-delay: 0.3s;
border-top: 4px solid #80bc00;
}
.year-tile:nth-child(3) {
animation-delay: 0.5s;
border-top: 4px solid #92278f;
}
@keyframes slideInRotate {
0% {
opacity: 0;
transform: translateY(100px) rotateX(-90deg);
}
100% {
opacity: 1;
transform: translateY(0) rotateX(0deg);
}
}
.year-tile::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.year-tile:hover::before {
left: 100%;
}
.year-tile:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.year-tile.active {
background: linear-gradient(135deg, #0083b4 0%, #92278f 100%);
color: white;
transform: translateY(-15px) scale(1.08);
box-shadow: 0 25px 50px rgba(0,131,180,0.4);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 25px 50px rgba(0,131,180,0.4);
}
50% {
box-shadow: 0 25px 60px rgba(146,39,143,0.5);
}
}
.year-tile h2 {
font-size: 3em;
background: linear-gradient(135deg, #0083b4, #92278f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
transition: all 0.3s ease;
font-weight: 800;
}
.year-tile.active h2 {
-webkit-text-fill-color: white;
transform: scale(1.1);
}
.year-tile p {
font-size: 1.1em;
color: #666;
transition: all 0.3s ease;
font-weight: 500;
}
.year-tile.active p {
color: rgba(255,255,255,0.95);
}
.news-section {
display: none;
}
.news-section.active {
display: block;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.news-item {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: popIn 0.6s ease-out;
animation-fill-mode: both;
position: relative;
}
.news-item:nth-child(1) { animation-delay: 0.1s; }
.news-item:nth-child(2) { animation-delay: 0.2s; }
.news-item:nth-child(3) { animation-delay: 0.3s; }
.news-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.5) rotate(-5deg);
}
50% {
transform: scale(1.05) rotate(2deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.news-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #0083b4, #80bc00, #92278f);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.news-item:hover::after {
transform: scaleX(1);
}
.news-item:hover {
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(0,131,180,0.3);
}
.news-image-wrapper {
overflow: hidden;
position: relative;
}
.news-image {
width: 100%;
height: 220px;
object-fit: cover;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: brightness(0.95);
}
.news-item:hover .news-image {
transform: scale(1.15);
filter: brightness(1.1);
}
.news-info {
padding: 25px;
position: relative;
}
.news-info a {
text-decoration: none;
color: #333;
font-size: 1.25em;
font-weight: 600;
line-height: 1.5;
display: block;
transition: all 0.3s ease;
position: relative;
}
.news-info a:hover {
color: #0083b4;
}
@media (max-width: 1024px) {
.year-tiles {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.year-tiles {
grid-template-columns: 1fr;
}
.year-tile h2 {
font-size: 2.5em;
}
.news-grid {
grid-template-columns: 1fr;
}
}
/* Floating particles animation */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.year-tile:hover {
animation: none;
}
