.epcal {
--epcal-accent: var(--nectar-accent-color, #222b2d); --epcal-on-accent: #ffffff; --epcal-ink: var(--epcal-accent); --epcal-accent-dark: color-mix(in srgb, var(--epcal-accent) 80%, #000000); --epcal-accent-light: color-mix(in srgb, var(--epcal-accent) 18%, #ffffff);
--epcal-soft: color-mix(in srgb, var(--epcal-accent) 6%, #ffffff); --epcal-charcoal: #222b2d;
--epcal-muted: #5b676a;
--epcal-border: #dde5e7;
--epcal-radius: 0; color: var(--epcal-charcoal);
} @supports not (color: color-mix(in srgb, red 50%, blue)) {
.epcal {
--epcal-accent-dark: #111617;
--epcal-accent-light: #e6eaeb;
--epcal-soft: #f4f6f6;
}
}
.epcal [hidden] {
display: none !important;
}
.epcal__sr {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.epcal__icon {
width: 1rem;
height: 1rem;
flex: 0 0 auto;
color: var(--epcal-ink);
}
.epcal a {
color: var(--epcal-ink);
}
.epcal__muted {
color: var(--epcal-muted);
}
.epcal__notice,
.epcal__empty {
padding: 1.5rem 0;
color: var(--epcal-muted);
} .epcal__tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 4rem;
min-height: 4.5rem;
padding: 0.375rem 0.25rem;
border: 1px solid var(--epcal-border);
background: #fff;
line-height: 1.05;
text-align: center;
}
.epcal__tile-mon {
color: var(--epcal-ink);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.epcal__tile-day {
margin: 0.125rem 0;
color: var(--epcal-charcoal);
font-size: 1.625rem;
font-weight: 700;
}
.epcal__tile-dow {
color: var(--epcal-muted);
font-size: 0.6875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.epcal__tile--sm {
width: 3.25rem;
min-height: 3.625rem;
}
.epcal__tile--sm .epcal__tile-day {
font-size: 1.25rem;
}
.epcal__tile--lg {
width: 5.5rem;
min-height: 6rem;
}
.epcal__tile--lg .epcal__tile-day {
font-size: 2.25rem;
} .epcal__meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin: 0.25rem 0 0;
color: var(--epcal-muted);
font-size: 0.9375rem;
line-height: 1.5;
}
.epcal__meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.epcal__repeat {
color: var(--epcal-ink);
font-weight: 600;
}
.epcal__change {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0.625rem 0 0;
padding: 0.5rem 0.75rem;
background: #fdf6e3;
color: #6b4700;
font-size: 0.9375rem;
line-height: 1.45;
}
.epcal__change .epcal__icon {
margin-top: 0.15rem;
color: #8a5a00;
}
.epcal__excerpt {
display: -webkit-box;
margin: 0.5rem 0 0;
overflow: hidden;
color: var(--epcal-muted);
font-size: 0.9375rem;
line-height: 1.55;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} .epcal .epcal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.125rem;
border: 1px solid var(--epcal-accent);
border-radius: var(--epcal-radius);
background: var(--epcal-accent);
color: var(--epcal-on-accent);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.epcal .epcal__btn:hover {
background: var(--epcal-accent-dark);
border-color: var(--epcal-accent-dark);
color: var(--epcal-on-accent);
}
.epcal .epcal__btn--ghost {
background: transparent;
color: var(--epcal-charcoal);
}
.epcal .epcal__btn--ghost:hover {
background: var(--epcal-soft);
border-color: var(--epcal-charcoal);
color: var(--epcal-charcoal);
}
.epcal a:focus-visible,
.epcal button:focus-visible {
outline: 2px solid var(--epcal-ink);
outline-offset: 2px;
} .epcal__filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1.75rem;
}
.epcal .epcal__chip {
padding: 0.4375rem 0.9375rem;
border: 1px solid var(--epcal-border);
border-radius: var(--epcal-radius);
background: #fff;
color: var(--epcal-charcoal);
font-size: 0.875rem;
line-height: 1.3;
cursor: pointer;
}
.epcal .epcal__chip:hover {
border-color: var(--epcal-charcoal);
}
.epcal .epcal__chip[aria-pressed="true"] {
background: var(--epcal-accent);
border-color: var(--epcal-accent);
color: var(--epcal-on-accent);
}
.epcal__month + .epcal__month {
margin-top: 2rem;
}
.epcal .epcal__month-title {
margin: 0 0 0.25rem;
padding: 0 0 0.625rem;
border-bottom: 2px solid var(--epcal-charcoal);
color: var(--epcal-charcoal);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.3;
text-transform: uppercase;
}
.epcal__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
padding: 1.25rem 0;
border-bottom: 1px solid var(--epcal-border);
}
.epcal__item.has-image {
grid-template-columns: auto minmax(0, 1fr) 10rem;
}
.epcal .epcal__title {
margin: 0;
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
}
.epcal .epcal__title a {
color: var(--epcal-charcoal);
text-decoration: none;
}
.epcal .epcal__title a:hover {
color: var(--epcal-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.epcal__thumb {
position: relative;
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--epcal-soft);
}
.epcal__more-wrap {
margin-top: 1.5rem;
text-align: center;
}
.epcal .epcal__more {
padding: 0.6875rem 1.5rem;
border: 1px solid var(--epcal-charcoal);
border-radius: var(--epcal-radius);
background: transparent;
color: var(--epcal-charcoal);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
}
.epcal .epcal__more:hover {
background: var(--epcal-accent);
border-color: var(--epcal-accent);
color: var(--epcal-on-accent);
} .epcal .epcal__heading {
margin: 0 0 1.5rem;
color: var(--epcal-charcoal);
}
.epcal__featured {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.epcal__card {
display: flex;
flex-direction: column;
border: 1px solid var(--epcal-border);
border-radius: var(--epcal-radius);
background: #fff;
}
.epcal__card-media {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--epcal-soft);
}
.epcal__tile--overlay {
position: absolute;
left: 1rem;
bottom: 1rem;
border: 0;
z-index: 1;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.epcal__card.no-image {
padding: 1.5rem 1.5rem 0;
border-top: 4px solid var(--epcal-accent);
}
.epcal__card.no-image .epcal__tile {
align-self: flex-start;
margin-bottom: 1rem;
}
.epcal__card.no-image .epcal__card-body {
padding: 0 0 1.5rem;
}
.epcal__card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.25rem 1.5rem 1.5rem;
}
.epcal .epcal__card-date {
margin: 0 0 0.25rem;
color: var(--epcal-ink);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.epcal .epcal__card-title {
margin: 0;
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
}
.epcal .epcal__card-title a {
color: var(--epcal-charcoal);
text-decoration: none;
}
.epcal .epcal__card-title a:hover {
color: var(--epcal-ink);
}
.epcal__card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin: auto 0 0;
padding-top: 1.125rem;
}
.epcal__compact-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: center;
padding: 0.875rem 0;
border-bottom: 1px solid var(--epcal-border);
}
.epcal__compact-item:first-child {
border-top: 1px solid var(--epcal-border);
}
.epcal__compact .epcal__title {
font-size: 1.0625rem;
}
.epcal__compact .epcal__meta {
font-size: 0.875rem;
}
.epcal .epcal__all {
margin: 1.25rem 0 0;
}
.epcal .epcal__all a {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--epcal-ink);
font-weight: 700;
text-decoration: none;
}
.epcal .epcal__all a:hover {
text-decoration: underline;
text-underline-offset: 3px;
} .epcal--event {
margin: 0 0 2rem;
}
.epcal__hero {
position: relative;
aspect-ratio: 16 / 9;
max-height: 480px;
margin: 0 0 1.5rem;
overflow: hidden;
background: var(--epcal-soft);
}
.epcal__panel {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 1.5rem;
padding: 1.5rem;
border: 1px solid var(--epcal-border);
border-top: 4px solid var(--epcal-accent);
background: #fff;
}
.epcal .epcal__when {
margin: 0 0 0.5rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.epcal__ended {
display: inline-block;
margin: 0 0 0.5rem;
padding: 0.125rem 0.5rem;
background: var(--epcal-soft);
color: var(--epcal-muted);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.epcal__facts {
font-size: 1rem;
}
.epcal__facts li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 0 0 0.375rem;
line-height: 1.5;
}
.epcal__facts .epcal__icon {
margin-top: 0.25rem;
}
.epcal__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--epcal-border);
}
.epcal__add {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 0.875rem;
font-size: 0.9375rem;
}
.epcal__add-label {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--epcal-muted);
}
.epcal__add a {
font-weight: 600;
}
.epcal__also {
margin-top: 1.5rem;
}
.epcal .epcal__also-title {
margin: 0 0 0.5rem;
color: var(--epcal-muted);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.3;
text-transform: uppercase;
}
.epcal__also-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
gap: 0.25rem 1.5rem;
}
.epcal__also-list li {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--epcal-border);
font-size: 0.9375rem;
}
.epcal__also-list a {
font-weight: 600;
text-decoration: none;
}
.epcal-content {
margin-top: 1.5rem;
} @media (max-width: 640px) {
.epcal__item,
.epcal__item.has-image {
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
}
.epcal__item .epcal__thumb {
grid-column: 2;
aspect-ratio: 2 / 1;
}
.epcal__tile {
width: 3.5rem;
min-height: 4rem;
}
.epcal__tile-day {
font-size: 1.375rem;
}
.epcal__panel {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.25rem;
}
.epcal__tile--lg {
flex-direction: row;
gap: 0.5rem;
width: auto;
min-height: 0;
justify-content: flex-start;
padding: 0.5rem 0.75rem;
justify-self: start;
}
.epcal__tile--lg .epcal__tile-day {
font-size: 1.5rem;
margin: 0;
}
.epcal__card.no-image {
padding: 1.25rem 1.25rem 0;
}
.epcal__card-body {
padding: 1.125rem 1.25rem 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.epcal .epcal__btn {
transition: none;
}
} .epcal ul,
.epcal ol {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.epcal li {
margin-left: 0 !important;
list-style: none !important;
background-image: none !important;
}
.epcal li::before,
.epcal li::marker {
content: none !important;
display: none !important;
}
.epcal li.epcal__item {
padding: 1.25rem 0 !important;
}
.epcal li.epcal__compact-item {
padding: 0.875rem 0 !important;
}
.epcal .epcal__facts li,
.epcal .epcal__also-list li {
padding-left: 0 !important;
}
.epcal .epcal__also-list li {
padding: 0.5rem 0 !important;
}
.epcal h2,
.epcal h3,
.epcal h4 {
letter-spacing: normal;
text-transform: none;
}
.epcal .epcal__month-title,
.epcal .epcal__also-title {
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
.epcal button {
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
font-family: inherit !important;
}
.epcal[data-epcal] .epcal__chip {
padding: 0.4375rem 0.9375rem !important;
border-radius: var(--epcal-radius) !important;
line-height: 1.3 !important;
}
.epcal[data-epcal] .epcal__more {
padding: 0.6875rem 1.5rem !important;
border-radius: var(--epcal-radius) !important;
} .epcal .epcal__thumb img,
.epcal .epcal__card-media img,
.epcal .epcal__hero img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
object-fit: cover !important;
}
.epcal .epcal__hero,
.epcal .epcal__card-media,
.epcal .epcal__thumb {
margin-left: 0;
margin-right: 0;
}
.epcal svg.epcal__icon {
width: 1rem !important;
height: 1rem !important;
}