diff --git a/css/style.css b/css/style.css
index bc2efef..047c7f9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -836,6 +836,12 @@ section {
margin-top: 30px;
}
+.events-tabpanel .event-details h3 {
+ font-size: 1.8rem;
+ color: var(--primary-color);
+ margin-bottom: 0;
+}
+
@media (max-width: 768px) {
.event-details {
grid-template-columns: 1fr;
@@ -947,77 +953,184 @@ section {
text-align: center;
}
-/* Events Carousel Styling */
-.events-carousel {
- margin-top: 40px;
+.events-overview {
+ width: 100%;
+ max-width: 1100px;
+ margin: 40px auto 0;
+ padding: 0;
+ background: var(--white);
+ border-radius: 8px;
+ overflow: hidden;
}
-.events-carousel .carousel-inner {
- padding: 40px 20px;
- min-height: 500px;
- background: var(--white);
+.events-overview-content {
+ position: relative;
+}
+
+.events-overview h3 {
+ font-size: 1.8rem;
+ color: var(--primary-color);
+ margin-bottom: 20px;
+}
+
+.events-overview p {
+ margin: 0 0 24px;
+ color: var(--text-light);
+ line-height: 1.8;
+}
+
+.events-overview-media {
+ position: relative;
+ width: 100%;
+}
+
+.events-overview img {
+ width: 100%;
+ max-width: none;
+ display: block;
border-radius: 8px;
}
-.events-carousel .carousel-item {
- transition: transform 0.6s ease-in-out;
-}
-
-.events-carousel .carousel-indicators {
- margin-bottom: -30px;
-}
-
-.events-carousel .carousel-indicators button {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- background-color: var(--secondary-color);
- opacity: 0.5;
- border: none;
-}
-
-.events-carousel .carousel-indicators button.active {
- opacity: 1;
-}
-
-.events-carousel .carousel-control-prev,
-.events-carousel .carousel-control-next {
- width: 50px;
- height: 50px;
- background-color: var(--secondary-color);
- border-radius: 50%;
+.events-overview-text {
+ position: absolute;
top: 50%;
+ left: 32px;
+ width: min(48%, 520px);
+ padding: 28px;
+ background: rgba(255, 255, 255, 0.92);
+ border-left: 4px solid var(--secondary-color);
transform: translateY(-50%);
- opacity: 0.8;
}
-.events-carousel .carousel-control-prev {
- left: -25px;
+.events-tabs {
+ max-width: 1100px;
+ margin: 32px auto 0;
+ background: var(--white);
+ border-radius: 8px;
+ overflow: hidden;
}
-.events-carousel .carousel-control-next {
- right: -25px;
+.events-tablist {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ border-bottom: 1px solid #e8e6e1;
}
-.events-carousel .carousel-control-prev:hover,
-.events-carousel .carousel-control-next:hover {
- opacity: 1;
- background-color: var(--primary-color);
+.events-tab {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ min-height: 64px;
+ padding: 15px 20px;
+ border: 0;
+ border-bottom: 3px solid transparent;
+ background: var(--white);
+ color: var(--text-light);
+ font: inherit;
+ font-weight: 600;
+ cursor: pointer;
+ transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
-.events-carousel .carousel-control-prev-icon,
-.events-carousel .carousel-control-next-icon {
- width: 20px;
- height: 20px;
+.events-tab:hover,
+.events-tab:focus-visible {
+ background: var(--light-bg);
+ color: var(--primary-color);
}
-.events-carousel .events-info,
-.events-carousel .event-details,
-.events-carousel .events-dates {
+.events-tab:focus-visible {
+ outline: 2px solid var(--secondary-color);
+ outline-offset: -4px;
+}
+
+.events-tab.is-active {
+ color: var(--primary-color);
+ border-bottom-color: var(--secondary-color);
+}
+
+.events-tab i {
+ color: var(--secondary-color);
+ font-size: 1.2rem;
+}
+
+.events-tabpanel {
+ padding: 40px;
+}
+
+.events-tabpanel[hidden] {
+ display: none;
+}
+
+.events-tabpanel .event-details,
+.events-tabpanel .events-dates {
max-width: 900px;
margin: 0 auto;
}
+.events-tabpanel .event-details {
+ margin-top: 0;
+}
+
+.events-tabpanel .event-details h3,
+.events-tabpanel .events-dates h3 {
+ grid-column: 1 / -1;
+}
+
+.events-tabpanel .events-dates {
+ margin-top: 48px;
+}
+
+.events-tabpanel .events-dates h3 + .dates-grid {
+ margin-bottom: 32px;
+}
+
+.events-year-accordion {
+ border-bottom: 1px solid #e8e6e1;
+}
+
+.events-year-accordion:first-of-type {
+ border-top: 1px solid #e8e6e1;
+}
+
+.events-year-accordion summary {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 4px;
+ color: var(--primary-color);
+ font-size: 1.35rem;
+ font-weight: 600;
+ cursor: pointer;
+ list-style: none;
+}
+
+.events-year-accordion summary::-webkit-details-marker {
+ display: none;
+}
+
+.events-year-accordion summary::after {
+ content: '\f078';
+ color: var(--secondary-color);
+ font-family: 'Font Awesome 5 Free';
+ font-size: 0.9rem;
+ font-weight: 900;
+ transition: transform 0.2s ease;
+}
+
+.events-year-accordion[open] summary::after {
+ transform: rotate(180deg);
+}
+
+.events-year-accordion summary:focus-visible {
+ outline: 2px solid var(--secondary-color);
+ outline-offset: -2px;
+}
+
+.events-year-accordion .dates-grid {
+ margin-bottom: 24px;
+}
+
/* Suppliers Section */
.section-suppliers {
background: var(--light-bg);
@@ -1410,7 +1523,89 @@ section {
}
.dates-grid {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: 1fr;
+ }
+
+ .date-card {
+ padding: 12px 14px;
+ gap: 10px;
+ min-height: 58px;
+ }
+
+ .date-icon {
+ width: 26px;
+ font-size: 1.25rem;
+ text-align: center;
+ }
+
+ .date-info {
+ flex: 1;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: baseline;
+ column-gap: 8px;
+ }
+
+ .date-day {
+ font-size: 0.72rem;
+ letter-spacing: 0.3px;
+ white-space: nowrap;
+ }
+
+ .date-number {
+ font-size: 1rem;
+ margin-top: 0;
+ white-space: nowrap;
+ }
+
+ .date-time {
+ font-size: 0.82rem;
+ margin-top: 0;
+ white-space: nowrap;
+ }
+
+ .events-overview {
+ margin-top: 25px;
+ padding: 0;
+ }
+
+ .events-overview-content {
+ display: block;
+ }
+
+ .events-overview-text {
+ position: static;
+ width: 100%;
+ padding: 20px;
+ background: var(--white);
+ border-left: 0;
+ transform: none;
+ }
+
+ .events-overview h3 {
+ font-size: 1.5rem;
+ }
+
+ .events-overview p {
+ font-size: 0.95rem;
+ line-height: 1.65;
+ }
+
+ .events-tabs {
+ margin-top: 24px;
+ }
+
+ .events-tab {
+ min-height: 58px;
+ padding: 12px 10px;
+ }
+
+ .events-tabpanel {
+ padding: 28px 20px;
+ }
+
+ .events-tabpanel .events-dates {
+ margin-top: 36px;
}
.footer-content {
@@ -1454,6 +1649,32 @@ section {
grid-template-columns: 1fr;
}
+ .date-card {
+ padding: 10px 12px;
+ gap: 8px;
+ }
+
+ .date-icon {
+ width: 22px;
+ font-size: 1.1rem;
+ }
+
+ .date-info {
+ column-gap: 6px;
+ }
+
+ .date-day {
+ font-size: 0.68rem;
+ }
+
+ .date-number {
+ font-size: 0.95rem;
+ }
+
+ .date-time {
+ font-size: 0.78rem;
+ }
+
.event-details {
gap: 15px;
}
diff --git a/index.html b/index.html
index 8851fd5..e32e09d 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,15 @@