@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap&subset=latin,latin-ext,greek";:root{--animation: "";--grey: #919fa9;--greyText: #afb8bf;--greybg: #e4e9eb;--borderColour: var(--greyText)}.event-module{display:flex;position:relative;& label[for=mobile-filter-icon]>input{display:none}& nav{block-size:fit-content;border-radius:var(--border-radius-large);border:var(--border-soft);background:var(--bg-soft);padding:var(--box-padding);font-size:var(--text-size-label);--selectedShade: black;--unselectedShade: white;margin-inline-end:var(--gap);z-index:3;top:var(--gap);.filter-bar {> div:not(:last-child) {margin-block-end: var(--gap);} .border-bottom {border-bottom: var(--border-soft); padding-block-end: var(--gap);} .search-section {background-color: #fff;} .academy-filter-btn-container {display: flex; align-items: center; gap: var(--gap-tiny); margin-bottom: var(--gap-small); .academy-filter-btn {display: flex; align-items: center; justify-content: center; padding: var(--box-padding-shallow); border-radius: var(--border-radius-large); border: var(--border-medium); transition: all .3s ease; &:not(:has(input:checked)):hover {scale: 1.05; transform-origin: center;} & input {display: none;} &:has(input:checked) {background: var(--theme-blue); color: white; cursor: auto;}}} .btns-container {display: flex; justify-content: center; & button {text-transform: uppercase; font-size: var(--text-size-small); font-weight: var(--text-weight-medium); padding-block: calc(.5 * var(--box-padding-small)); background-color: var(--theme-blue); border-radius: var(--border-radius-small); box-shadow: var(--shadow-standard); inline-size: 100%; text-align: center; transition: scale .3s ease-in-out; color: white; &:hover,:focus-visible {scale: 1.02;}}}} .filter-side-buttons {display: flex; gap: var(--gap-tiny); align-items: center; & button {padding-block: calc(.25 * var(--box-padding-small)); padding-inline: calc(.5 * var(--box-padding-small)); border-radius: var(--border-radius-standard); border: var(--border-soft); cursor: pointer; &:hover {background: var(--greybg); font-weight: var(--text-weight-bold); color: var(--theme);}}} & .scrolling ul {overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bg-scrollbar-thumb) var(--bg-scrollbar-track); padding-right: 6px; max-height: 15rem; &::-webkit-scrollbar {width: 8px;} &::-webkit-scrollbar-track {background: var(--bg-scrollbar-track);} &::-webkit-scrollbar-thumb {background-color: var(--bg-scrollbar-thumb); border-radius: 6px; border: 1px solid var(--bg-scrollbar-thumb-outline);}} & ul {margin-block-start: var(--gap-tiny); list-style: none; padding: 0; & li {position: relative; padding-inline-start: var(--gap); cursor: pointer; & span {color: var(--grey); font-size: 11px;} &::before {content: ""; top: .25rem; left: 0; width: 1rem; height: 1rem; position: absolute; border: .1875rem currentColor double; opacity: .5; background-color: var(--unselectedShade);}} & li.active::before {background-color: var(--selectedShade); border: .1875rem white double; opacity: 1;}} .select-all {display: flex; align-items: center; justify-content: space-between;}}& section{container-type:inline-size;container-name:event-module-preview-container;flex:1;.scroller-component__slides {scroll-padding-inline-end: var(--inline-reverse-padding);} .scroller-component > h3 {font-size: var(--text-size-large); font-weight: var(--text-weight-regular); padding-block-start: var(--gap); margin-block-end: var(--gap); text-align: center;} .search-results-indicator {h3 {margin-bottom: var(--gap-tiny); font-weight: var(--text-weight-medium);} .chips-container {display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-tiny); font-weight: var(--text-weight-medium); margin-block-end: var(--gap);} .composable-chip {padding: 0 .5rem; margin: 0 .25rem; border-radius: var(--border-radius-standard); background-color: var(--bg-soft); cursor: pointer; border: var(--border-soft); text-wrap: nowrap; transition: all .3s ease-in-out;} .composable-chip[data-hover-type="strikethrough"]:hover {text-decoration: line-through;} .composable-chip[data-hover-type="scale"]:hover {scale: 1.05;}}}.expand svg {fill: none; rotate: 90deg; transition: rotate .3s var(--transition-in-out-quadratic); inline-size: var(--icon-size-tiny); block-size: var(--icon-size-tiny);} .slide-animation {animation: var(--animation) var(--duration) infinite;}}.no-events{display:grid;place-items:center;block-size:50vh}.horizontal-cards{padding-block-start:0;:nth-child(2) {scroll-initial-target: nearest;} > .event-card[data-page="event-page"] {background: var(--bg-soft); border-radius: var(--border-radius-standard); box-shadow: var(--shadow-standard); overflow: clip; padding: var(--box-padding-large); display: flex; flex-direction: column; gap: var(--gap-tiny); position: relative; scroll-snap-stop: always; scroll-snap-align: center; animation: scale linear both; animation-timeline: view(x); animation-range: contain; .slide-container-card {inline-size: 10rem; block-size: 4rem; display: flex; align-items: center; overflow-y: hidden; position: relative; margin-block: var(--gap-tiny); .logo {block-size: 4rem;}} > h3 {min-block-size: 5.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-block-end: var(--gap-small);} .badge {border: solid var(--theme); font-weight: var(--text-weight-medium); border-radius: var(--border-radius-standard); padding: calc(.5 * var(--box-padding-small)) var(--box-padding-small); inline-size: fit-content; color: var(--text-white);} &:is(:hover,:focus-visible) {box-shadow: var(--shadow-outline);}}}.horizontal-cards>.event-card[data-page=event-page] .slide-animation{animation-play-state:paused}.horizontal-cards>.event-card[data-page=event-page][data-active=true] .slide-animation{animation-play-state:running}.event-page-cta{margin:auto 0 0 auto;font-weight:var(--text-weight-medium);background-color:var(--theme);border-radius:var(--border-radius-standard);color:#fff;padding:var(--box-padding-small) var(--btn-padding-inline);appearance:none;text-decoration:none;text-transform:none;user-select:none;touch-action:manipulation;cursor:pointer;word-break:keep-all;transition:all var(--speed-slow) var(--transition-out-quadratic);z-index:4;transition:all var(--speed-standard) var(--transition-in-out-quadratic);box-shadow:var(--shadow-standard);&:hover{scale:1.025}}@keyframes vslide2{0%{transform:translateY(0)}25%{transform:translateY(0)}37.5%{transform:translateY(4.2rem)}62.5%{transform:translateY(4.2rem)}75%{transform:translateY(4.2rem)}to{transform:translateY(0)}}@keyframes vslide3{0%{transform:translateY(0)}22%{transform:translateY(0)}33%{transform:translateY(4.2rem)}55%{transform:translateY(4.2rem)}66%{transform:translateY(8.4rem)}88%{transform:translateY(8.4rem)}to{transform:translateY(0)}}@keyframes vslide4{0%{transform:translateY(0)}17%{transform:translateY(0)}25.5%{transform:translateY(4.2rem)}42.5%{transform:translateY(4.2rem)}51%{transform:translateY(8.4rem)}68%{transform:translateY(8.4rem)}76.5%{transform:translateY(12.6rem)}93.5%{transform:translateY(12.6rem)}to{transform:translateY(0)}}@keyframes hslide2{0%{transform:translate(0)}25%{transform:translate(0)}37.5%{transform:translate(-6rem)}62.5%{transform:translate(-6rem)}75%{transform:translate(-6rem)}to{transform:translate(0)}}@keyframes hslide3{0%{transform:translate(0)}22%{transform:translate(0)}33%{transform:translate(-6rem)}55%{transform:translate(-6rem)}66%{transform:translate(-12rem)}88%{transform:translate(-12rem)}to{transform:translate(0)}}@keyframes hslide4{0%{transform:translate(0)}17%{transform:translate(0)}25.5%{transform:translate(-6rem)}42.5%{transform:translate(-6rem)}51%{transform:translate(-12rem)}68%{transform:translate(-12rem)}76.5%{transform:translate(-18rem)}93.5%{transform:translate(-12rem)}to{transform:translate(0)}}@keyframes scale{0%{transform:scale(.8);opacity:.5}50%{transform:none;opacity:1}to{transform:scale(.8);opacity:.5}}[data-filter=list-view]{padding-block-start:var(--gap);container-type:inline-size;container-name:event-cards-container;max-inline-size:45rem;margin-inline:auto;> h3 {font-size: var(--text-size-large); font-weight: var(--text-weight-regular); margin-block-end: var(--gap-small);}}.event-row-item{border-radius:var(--border-radius-standard);background-color:var(--bg-soft);padding-block:var(--box-padding);padding-inline:calc(1.5 * var(--box-padding));transition:rotate .3s;margin-bottom:var(--gap-small);animation-name:zoomIn,fadeIn;animation-duration:var(--speed-standard);animation-fill-mode:forwards;animation-timing-function:var(--transition-out-quadratic);transition:all .3s ease-in-out;& summary{display:grid;grid-template-columns:var(--icon-size-tiny) 6rem 1fr var(--icon-size-tiny);align-items:center;gap:var(--gap);.slide-container-row {inline-size: 6rem; block-size: 4rem; display: flex; align-items: center; overflow: hidden; position: relative; .logo {display: flex; block-size: 4rem;}} .titlegroup {.eyebrow {font-size: var(--text-size-small); margin-block-end: var(--gap-tiny);} .title {font-size: var(--text-size-standard); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}} .loc {font-size: var(--text-size-small);} .expand,.ppl,.vt {& SVG {inline-size: var(--icon-size-tiny); block-size: var(--icon-size-tiny);}} .ppl SVG {color: var(--theme-magenta);} .vt SVG {color: var(--theme-light-blue);}}.description {& p {margin-block-end: var(--gap-small);} & a {inline-size: fit-content; text-wrap: nowrap; text-transform: uppercase; font-size: var(--text-size-small); border: none;}} .date {display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--text-size-larger); font-weight: var(--text-weight-bold); margin: 0 var(--gap-tiny); line-height: 1; & span {text-transform: uppercase; font-size: var(--text-size-tag);}} .call-to-action {border-radius: var(--border-radius-standard);} &:hover {transform: scale(1.02);}}.event-row-item[open]{& summary{padding-block-end:var(--gap-small);.expand svg {rotate: -90deg;}}}.event-card-loading-placeholder{display:grid;gap:var(--gap-small);.placeholder-item {display: flex; align-items: center; gap: var(--gap-small); padding-block: var(--box-padding-small); padding-inline: calc(1.5 * var(--box-padding)); border: var(--border-soft); border-radius: var(--border-radius-standard);} .placeholder-logo {width: 6rem; height: 2.6rem; background-color: var(--grey-lightest); border-radius: var(--border-radius-small); animation: shimmer 1.5s infinite;} .placeholder-content {flex: 1; display: flex; flex-direction: column; gap: var(--gap-tiny);} .placeholder-title,.placeholder-date {height: 1rem; background-color: var(--grey-lightest); border-radius: var(--border-radius-small); opacity: .5; animation: shimmer 3s infinite;} .placeholder-title {width: 40%;} .placeholder-date {width: 30%;}}.filter-bar-loading-placeholder{display:flex;flex-direction:column;gap:var(--gap-small);border-radius:var(--border-radius-large);border:var(--border-soft);background:var(--bg-soft);padding:var(--box-padding);inline-size:15.7rem;margin-inline-end:var(--gap);.placeholder-search {block-size: 2.3rem; inline-size: 100%; background-color: var(--grey-light); border-radius: var(--border-radius-small); margin-block-end: var(--gap-small); animation: shimmer 1.5s infinite;} .placeholder-title {height: 1rem; width: 60%; background-color: var(--grey-light); border-radius: var(--border-radius-small); animation: shimmer 1.5s infinite;} .placeholder-types {display: flex; flex-direction: column; gap: var(--gap-tiny);} .placeholder-type {height: 1.5rem; width: 80%; background-color: var(--grey-light); border-radius: var(--border-radius-small); animation: shimmer 1.5s infinite;} .placeholder-vendors {display: flex; flex-direction: column; gap: var(--gap-tiny);} .placeholder-vendor {height: 1.5rem; width: 90%; background-color: var(--grey-light); border-radius: var(--border-radius-small); animation: shimmer 1.5s infinite;} .placeholder-buttons {display: flex; gap: var(--gap-small);} .placeholder-button {height: 2rem; width: 30%; background-color: var(--grey-light); border-radius: var(--border-radius-small); animation: shimmer 1.5s infinite;}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.placeholder-logo,.placeholder-title,.placeholder-date,.placeholder-search,.placeholder-type,.placeholder-vendor,.placeholder-button{background:linear-gradient(90deg,var(--grey-lightest) 25%,var(--grey-light) 50%,var(--grey-lightest) 75%);background-size:200% 100%}@container event-cards-container (max-width: 584px){.event-row-item{padding-block-end:var(--gap-small);& summary{display:grid;grid-template-columns:1fr 1fr 1fr auto;grid-template-areas:"logo title title date" "icon time time expand";row-gap:var(--gap-small);.logo {grid-area: logo; align-self: center; justify-self: center;} .titlegroup {grid-area: title;} .dateloc {grid-area: date;} .ppl,.vt {grid-area: icon; align-self: center; justify-self: center;} .loc,.event-time {grid-area: time;} .expand,.close {grid-area: expand; align-self: center; justify-self: center;}}}}@media (min-width: 680px){.event-module{& label[for=mobile-filter-icon]{display:none}& nav{position:sticky}}}@media (max-width: 680px){.event-module{position:relative;flex-direction:column;& label[for=mobile-filter-icon]{display:flex;gap:var(--gap-tiny);width:fit-content;align-items:center;justify-content:center;border:var(--border-soft);border-radius:var(--border-radius-huge);padding:var(--box-padding-small) var(--box-padding);& svg{inline-size:var(--icon-size-tiny);block-size:var(--icon-size-tiny);fill:none}&:has(#mobile-filter-icon:checked){background:var(--bg-soft);& svg[data-icon=expand-filter]{display:none}}&:has(#mobile-filter-icon:not(:checked)){& svg[data-icon=close-filter]{display:none}}}&:has(#mobile-filter-icon:not(:checked)) nav{display:none}& nav{position:absolute;top:3rem;background:var(--bg-popup);backdrop-filter:blur(var(--blur-medium));border-radius:var(--border-radius-small);box-shadow:var(--shadow-standard);padding-inline:calc(2 * var(--box-padding-large));color:var(--text-dark);transform-origin:top;animation-name:slideRight;animation-duration:var(--speed-slow);animation-fill-mode:both;animation-timing-function:var(--transition-out-quadratic);.filter-bar {.academy-filter-btn-container > .academy-filter-btn {border: .5px var(--text-dark) solid;} .filter-side-buttons button {border: .5px var(--text-dark) solid;}}}}body:has(#mobile-filter-icon:checked) .event-module nav{display:block}}