.boland-events {
--boland-events-ink: #050505;
--boland-events-muted: #646464;
box-sizing: border-box;
width: 100%;
padding: 0;
background: transparent;
color: var(--boland-events-ink);
font-family: "ITC Avant Garde Gothic Medium", sans-serif;
text-align: center;
}
.boland-events *,
.boland-events *::before,
.boland-events *::after {
box-sizing: border-box;
}
.boland-events__heading {
margin: 0 0 clamp(2rem, 5vw, 3.25rem);
color: var(--boland-events-ink);
font: inherit;
font-size: clamp(1.75rem, 3vw, 2.35rem);
font-weight: 500;
line-height: 1.2;
}
.boland-events__search {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: min(100%, 370px);
margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.boland-events__search-field {
position: relative;
flex: 0 1 310px;
width: 310px;
max-width: 310px;
min-width: 0;
}
.boland-events__search-input {
width: 100%;
height: 38px;
max-height: 38px;
margin: 0;
padding: 0 1rem 0 2.65rem;
border: 2px solid var(--boland-events-ink);
border-radius: 999px;
outline: 0;
background: #fff;
box-shadow: none;
color: var(--boland-events-ink);
font: inherit;
font-size: 1rem;
line-height: 1;
-webkit-appearance: none;
appearance: none;
}
.boland-events__search-input::placeholder {
color: var(--boland-events-ink);
opacity: 1;
}
.boland-events__search-input:focus {
border-color: #84951c;
box-shadow: 0 0 0 3px rgba(132, 149, 28, 0.2);
}
.boland-events__search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.boland-events__search-button {
position: absolute;
top: 50%;
left: 0.72rem;
z-index: 1;
display: grid;
width: 26px;
height: 26px;
margin: 0;
padding: 0;
transform: translateY(-50%);
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--boland-events-ink);
cursor: pointer;
}
.boland-events__search-button img {
display: block;
width: 18px;
height: 18px;
object-fit: contain;
}
.boland-events__search-button:focus-visible,
.boland-events__reset:focus-visible {
outline: 3px solid #84951c;
outline-offset: 3px;
}
.boland-events__reset {
flex: 0 0 auto;
margin: 0;
padding: 0.55rem 0.15rem;
border: 0;
background: transparent;
box-shadow: none;
color: var(--boland-events-ink);
font: inherit;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
}
.boland-events__reset:hover {
text-decoration: underline;
}
.boland-events__results {
width: min(100%, 760px);
min-height: 5.5rem;
margin: 0 auto;
opacity: 1;
transition: opacity 160ms ease;
}
.boland-events__results[aria-busy="true"] {
opacity: 0.45;
}
.boland-events__list {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
}
.boland-events__event {
margin: 0;
padding: 0;
}
.boland-events__event-title {
margin: 0 0 0.45rem;
font-family: "ITC Avant Garde Gothic Medium", sans-serif;
font-size: clamp(1.45rem, 1.5vw, 1.5rem);
font-stretch: condensed;
font-weight: 800;
line-height: 1.12;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.boland-events__event-date {
display: block;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
}
.boland-events__empty,
.boland-events__loading {
margin: 0;
font-size: 1rem;
line-height: 1.5;
} .boland-calendar {
--boland-calendar-green: #9eaa13;
--boland-calendar-ink: #000;
position: relative;
z-index: 0;
box-sizing: border-box;
width: 100%;
max-width: 1125px;
margin: 0 auto;
padding: 0;
background: transparent;
color: var(--boland-calendar-ink);
font-family: "ITC Avant Garde Gothic Medium", "Avant Garde Medium", sans-serif;
overflow: visible;
}
.boland-calendar--subscribe-open {
z-index: 2147483000;
}
.boland-calendar *,
.boland-calendar *::before,
.boland-calendar *::after {
box-sizing: border-box;
}
.boland-calendar__viewport {
width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.boland-calendar__viewport:focus-visible {
outline: 3px solid var(--boland-calendar-green);
outline-offset: 4px;
}
.boland-calendar__shell {
min-width: 700px;
opacity: 1;
transition: opacity 180ms ease;
}
.boland-calendar__shell[aria-busy="true"] {
opacity: 0.48;
}
.boland-calendar__toolbar {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 52px;
align-items: center;
min-height: 50px;
background: var(--boland-calendar-green);
color: #fff;
}
.boland-calendar__month {
margin: 0;
padding: 0.45rem 0;
color: #fff;
font-family: "GoBold Regular", "ITC Avant Garde Gothic Bold", sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 22px;
letter-spacing: 1.32px;
text-align: center;
text-transform: uppercase;
}
.boland-calendar__month:focus {
outline: 0;
}
.boland-calendar__nav {
display: grid;
width: 100%;
height: 50px;
margin: 0;
padding: 0;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #fff;
cursor: pointer;
transition: transform 220ms ease, opacity 180ms ease;
}
.boland-calendar__nav:hover {
transform: scale(0.88);
background: transparent;
}
.boland-calendar__nav:focus-visible {
outline: 2px solid #fff;
outline-offset: -5px;
}
.boland-calendar__nav:disabled {
cursor: wait;
opacity: 0.55;
}
.boland-calendar__nav svg {
display: block;
}
.boland-calendar__table {
width: 100%;
margin: 0;
border: 1px solid var(--boland-calendar-ink);
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background: transparent;
}
.boland-calendar__table th {
height: 48px;
padding: 18px 4px 16px;
border: 1px solid var(--boland-calendar-ink);
background: #fff;
color: var(--boland-calendar-ink);
font-family: "GoBold Regular", "ITC Avant Garde Gothic Bold", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 12px;
letter-spacing: 0.72px;
text-align: center;
text-transform: uppercase;
}
.boland-calendar__day {
height: 61px;
padding: 4px 5px 6px;
vertical-align: top;
border: 1px solid var(--boland-calendar-ink);
background: #fff;
color: var(--boland-calendar-ink);
font-family: "Avant Gothic Demi", "ITC Avant Garde Gothic Medium", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.45px;
text-align: center;
}
.boland-calendar__day-number {
display: block;
color: inherit;
}
.boland-calendar__day--past .boland-calendar__day-number {
color: rgba(0, 0, 0, 0.66);
}
.boland-calendar__day--today .boland-calendar__day-number {
color: var(--boland-calendar-green);
}
.boland-calendar__day--outside .boland-calendar__day-number,
.boland-calendar__day--outside .boland-calendar__events {
opacity: 0.3;
}
.boland-calendar__events {
display: grid;
gap: 4px;
margin: 3px 0 0;
padding: 0;
list-style: none;
}
.boland-calendar__events li {
margin: 0;
padding: 0;
}
.boland-calendar__events a {
display: block;
margin: 0;
padding: 4px 6px;
overflow: hidden;
border: 0;
border-radius: 0;
background: var(--boland-calendar-green);
color: var(--boland-calendar-ink);
font-family: "ITC Avant Garde Gothic Medium", "Avant Garde Medium", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.3px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
transition: transform 220ms ease;
}
.boland-calendar__events a:hover {
transform: scale(0.98);
background: var(--boland-calendar-green);
color: var(--boland-calendar-ink);
}
.boland-calendar__events a:focus-visible {
outline: 3px solid var(--boland-calendar-ink);
outline-offset: -3px;
}
.boland-calendar__subscribe-wrap {
position: relative;
z-index: 2147483000;
display: flex;
justify-content: center;
margin-top: 31px;
}
.boland-calendar__subscribe {
display: inline-flex;
min-height: 39px;
align-items: center;
justify-content: center;
gap: 0.7rem;
margin: 0;
padding: 10px 25px 7px;
border: 0;
border-radius: 0;
background: var(--boland-calendar-green);
box-shadow: none;
color: #fff;
font-family: "Avant Gothic Demi", "ITC Avant Garde Gothic Medium", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 22px;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: transform 240ms ease;
}
.boland-calendar__subscribe:hover {
transform: scale(0.96);
background: var(--boland-calendar-green);
color: #fff;
text-decoration: none;
}
.boland-calendar__subscribe:focus-visible {
outline: 3px solid var(--boland-calendar-ink);
outline-offset: 3px;
}
.boland-calendar__subscribe svg {
display: block;
flex: 0 0 auto;
transition: transform 220ms ease;
}
.boland-calendar__subscribe[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.boland-calendar__subscribe-menu {
--boland-calendar-green: #9eaa13;
--boland-calendar-ink: #000;
position: fixed;
z-index: 2147483647;
display: grid;
width: max-content;
min-width: 235px;
max-width: calc(100vw - 32px);
padding: 5px 0;
border: 1px solid var(--boland-calendar-ink);
background: #fff;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.boland-calendar__subscribe-menu[hidden] {
display: none;
}
.boland-calendar__subscribe-menu a {
display: block;
margin: 0;
padding: 9px 16px;
background: #fff;
color: var(--boland-calendar-ink);
font-family: "ITC Avant Garde Gothic Medium", "Avant Garde Medium", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.35;
text-align: left;
text-decoration: none;
white-space: nowrap;
transition: color 180ms ease, padding-left 180ms ease;
}
.boland-calendar__subscribe-menu a:hover,
.boland-calendar__subscribe-menu a:focus-visible {
padding-left: 20px;
background: #fff;
color: var(--boland-calendar-green);
text-decoration: none;
}
.boland-calendar__subscribe-menu a:focus-visible {
outline: 2px solid var(--boland-calendar-green);
outline-offset: -3px;
}
.boland-calendar__error {
margin: 0.75rem 0 0;
color: #9f1d1d;
font-size: 14px;
line-height: 1.4;
text-align: center;
}
@media (max-width: 520px) {
.boland-events__search {
align-items: stretch;
flex-wrap: wrap;
}
.boland-events__search-field {
flex-basis: calc(100% - 4rem);
}
.boland-calendar__month {
font-size: 16px;
}
}
@media (min-width: 521px) and (max-width: 768px) {
.boland-calendar__month {
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.boland-events__results,
.boland-calendar__shell,
.boland-calendar__nav,
.boland-calendar__events a,
.boland-calendar__subscribe,
.boland-calendar__subscribe svg,
.boland-calendar__subscribe-menu a {
transition: none;
}
}