/* =========================
THE EVENTS CALENDAR — MONTH VIEW POLISH
Paste into:
Appearance > Customize > Additional CSS
========================= */
/* 1) Overall calendar container */
.tribe-common–breakpoint-medium.tribe-events .tribe-events-calendar-month__body {
background: #f7f8fb;
border: 1px solid #e3e7ee;
border-radius: 10px;
overflow: hidden;
}
/* 2) Header row for weekdays */
.tribe-common–breakpoint-medium.tribe-events .tribe-events-calendar-month__weekdays {
background: #1f3a5f;
}
.tribe-common–breakpoint-medium.tribe-events .tribe-events-calendar-month__weekday {
color: #ffffff;
font-weight: 700;
letter-spacing: 0.02em;
font-size: 0.95rem;
padding-top: 12px;
padding-bottom: 12px;
}
/* 3) Normal day cells */
.tribe-events-calendar-month__day-cell {
background: #ffffff;
border-color: #e3e7ee;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* 4) Slight hover effect on day cells */
.tribe-common–breakpoint-medium .tribe-events-calendar-month__day-cell:hover {
background: #fbfcfe;
}
/* 5) Date number styling */
.tribe-events-calendar-month__day-date {
font-weight: 700;
color: #22324a;
}
/* 6) Make previous/next month days visibly muted */
.tribe-events-calendar-month__day–other-month {
background: #f3f5f8;
}
.tribe-events-calendar-month__day–other-month .tribe-events-calendar-month__day-date {
color: #9aa4b2 !important;
font-weight: 500;
opacity: 0.8;
}
.tribe-events-calendar-month__day–other-month .tribe-events-calendar-month__calendar-event-title a,
.tribe-events-calendar-month__day–other-month .tribe-events-calendar-month__more-link {
color: #a8b1bc !important;
font-weight: 400;
}
/* 7) Past days in the current month slightly subdued */
.tribe-events-calendar-month__day–past:not(.tribe-events-calendar-month__day–other-month) {
background: #fcfcfd;
}
.tribe-events-calendar-month__day–past:not(.tribe-events-calendar-month__day–other-month) .tribe-events-calendar-month__day-date {
color: #6f7c8d;
}
/* 8) Current day highlight */
.tribe-events-calendar-month__day–current .tribe-events-calendar-month__day-cell,
.tribe-events-calendar-month__day–current {
background: #fff8e8;
}
.tribe-events-calendar-month__day–current .tribe-events-calendar-month__day-date {
color: #8a5a00;
font-weight: 800;
}
/* 9) Event links look cleaner */
.tribe-events-calendar-month__calendar-event-title a {
color: #1f3a5f;
font-weight: 600;
text-decoration: none;
line-height: 1.3;
}
.tribe-events-calendar-month__calendar-event-title a:hover {
color: #2d5d93;
text-decoration: underline;
}
/* 10) Event pills/cards */
.tribe-events-calendar-month__calendar-event {
background: #eef4fb;
border-left: 3px solid #1f3a5f;
border-radius: 6px;
padding: 4px 6px;
margin-bottom: 4px;
}
/* 11) “More events” link */
.tribe-events-calendar-month__more-link {
color: #2d5d93;
font-weight: 600;
text-decoration: none;
}
.tribe-events-calendar-month__more-link:hover {
text-decoration: underline;
}
/* 12) Mobile month view cleanup */
.tribe-events-calendar-month__day-cell–mobile {
border-color: #e3e7ee;
background: #ffffff;
}
.tribe-events-calendar-month__day–other-month .tribe-events-calendar-month__day-cell–mobile {
background: #f3f5f8;
}