/** * Shared styles: tokens, event cards, the carousel, the filter row. * * Values here were measured off the live React site rather than estimated, so * the two builds line up: type scale, colours, image sizes and spacing all * match www.spiritualliving.org. * * Specificity note: every rule is prefixed with .csl-events, and rules that * style a button, select or input also name the element. The Elementor kit * styles buttons with selectors at (0,1,1), which beats a bare single class, so * ".csl-events button.x" at (0,2,1) is the floor for anything interactive. * Without that the theme's orange button skin wins. */ .csl-events { --csl-orange: #ed9150; --csl-orange-dark: #d97c3b; --csl-purple: #6c4f6e; --csl-purple-dark: #5a4159; --csl-ink: #292c31; --csl-body: #4b4b4b; --csl-label: #333333; --csl-panel: rgba(108, 79, 110, 0.06); --csl-panel-solid: #f0f0f0; --csl-rule: #dcdcdc; --csl-field-border: rgba(41, 44, 49, 0.15); --csl-max: 1120px; --csl-gap: 30px; /* Elementor publishes its global body typeface as a custom property on the kit class, which sits on , so it inherits down to here. Taking it from the variable means the components follow the site's body font automatically, including when it is changed in Site Settings. Helvetica is the fallback when Elementor is absent or the global is unset. */ --csl-font: var(--e-global-typography-text-font-family, Helvetica), Helvetica, Arial, sans-serif; box-sizing: border-box; color: var(--csl-body); font-family: var(--csl-font); font-size: 16px; line-height: 25px; margin-left: auto; margin-right: auto; max-width: var(--csl-max); } .csl-events *, .csl-events *::before, .csl-events *::after { box-sizing: inherit; } .csl-events a { text-decoration: none; } .csl-events p { margin: 0; } .csl-events-empty, .csl-events-loading { color: var(--csl-body); padding: 40px 0; text-align: center; } .csl-events .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .csl-events .csl-icon { flex: none; height: 1em; width: 1em; } .csl-events a.csl-events-button { background: var(--csl-orange); border-radius: 2px; color: #fff; display: inline-block; font-size: 14px; letter-spacing: 0.5px; line-height: 1; padding: 13px 15px; text-transform: uppercase; transition: background-color 0.18s ease; } .csl-events a.csl-events-button:hover, .csl-events a.csl-events-button:focus-visible { background: var(--csl-orange-dark); color: #fff; } /* Event card ------------------------------------------------------------------------- */ .csl-events .csl-event-card { display: flex; height: 100%; } .csl-events .csl-event-card--stack { flex-direction: column; /* The live slide is 324px wide with the card inset 34px each side, which is what makes the 240px image read narrower than its column. */ padding: 0 34px; } .csl-events .csl-event-card--row { align-items: flex-start; flex-direction: row; } .csl-events .csl-event-card__media { display: block; flex: none; line-height: 0; overflow: hidden; } .csl-events .csl-event-card--stack .csl-event-card__media { aspect-ratio: 1 / 1; max-width: 240px; width: 100%; } .csl-events .csl-event-card--row .csl-event-card__media { height: 150px; margin-right: 20px; width: 150px; } .csl-events .csl-event-card__media img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; } .csl-events .csl-event-card__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .csl-events .csl-event-card__date { color: var(--csl-ink); font-size: 14px; font-weight: 700; letter-spacing: 0.15px; line-height: 19px; margin: 0 0 15px; } .csl-events .csl-event-card--stack .csl-event-card__date { margin-top: 20px; } .csl-events .csl-event-card--row .csl-event-card__date { line-height: 21px; } .csl-events .csl-event-card__title { font-size: 18px; font-weight: 700; letter-spacing: 0.15px; line-height: 24px; margin: 0 0 15px; } .csl-events .csl-event-card--row .csl-event-card__title { font-weight: 600; line-height: 21px; margin-bottom: 5px; } .csl-events .csl-event-card__title a { color: var(--csl-orange); } .csl-events .csl-event-card__title a:hover, .csl-events .csl-event-card__title a:focus-visible { color: var(--csl-orange-dark); } .csl-events .csl-event-card__summary { color: var(--csl-body); font-size: 16px; font-weight: 700; line-height: 25px; margin: 0; } .csl-events .csl-event-card__topic { color: var(--csl-body); font-size: 14px; font-weight: 400; line-height: 25px; margin: 0; } .csl-events .csl-event-card__more { margin: 10px 0 0; } .csl-events .csl-event-card--stack .csl-event-card__more { margin-top: auto; padding-top: 10px; } .csl-events .csl-event-card__more a { align-items: center; color: var(--csl-purple); display: inline-flex; font-size: 16px; font-weight: 400; gap: 5px; line-height: 25px; text-transform: uppercase; } .csl-events .csl-event-card__more a:hover, .csl-events .csl-event-card__more a:focus-visible { color: var(--csl-orange); } .csl-events .csl-event-card__chevron { font-size: 15px; line-height: 1; } /* Carousel ------------------------------------------------------------------------- */ .csl-events-carousel { padding: 60px 0; } .csl-events .csl-events-carousel__heading { color: var(--csl-ink); font-family: "Ernest_Emily", var(--csl-font); font-size: 48px; line-height: 54px; margin: 0 0 30px; text-align: center; } .csl-events .csl-events-carousel__viewport { align-items: center; display: flex; gap: 6px; } .csl-events .csl-events-carousel__track { display: grid; gap: 0; grid-auto-columns: calc(100% / 3); grid-auto-flow: column; list-style: none; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 0; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .csl-events .csl-events-carousel__track::-webkit-scrollbar { display: none; } .csl-events .csl-events-carousel__slide { margin: 0; min-width: 0; scroll-snap-align: start; } .csl-events button.csl-events-carousel__arrow { background: none; border: 0; border-radius: 0; color: var(--csl-body); cursor: pointer; flex: none; font-size: 34px; line-height: 1; padding: 8px 4px; transition: color 0.18s ease, opacity 0.18s ease; } .csl-events button.csl-events-carousel__arrow:hover:not(:disabled) { background: none; color: var(--csl-orange); } .csl-events button.csl-events-carousel__arrow:disabled { background: none; cursor: default; opacity: 0.25; } .csl-events .csl-events-carousel__more { margin: 34px 0 0; text-align: center; } /* List ------------------------------------------------------------------------- */ .csl-events .csl-events-list { display: grid; gap: 40px var(--csl-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .csl-events .csl-events-list__item { margin: 0; } /* Filters ------------------------------------------------------------------------- */ .csl-events .csl-filters { align-items: flex-end; background: var(--csl-panel); display: grid; gap: 15px 20px; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; margin: 0 0 24px; padding: 15px; } .csl-events .csl-filters__field { display: flex; flex-direction: column; min-width: 0; } .csl-events .csl-filters__label, .csl-events .csl-viewas__label { color: var(--csl-label); font-size: 12px; font-weight: 700; letter-spacing: -0.24px; line-height: 12px; margin: 0 0 12px; text-transform: uppercase; } .csl-events .csl-filters__input { align-items: center; background: #fff; border: 1px solid var(--csl-field-border); border-radius: 2px; display: flex; gap: 8px; padding: 0 10px; } .csl-events .csl-filters__input .csl-icon { color: var(--csl-purple); font-size: 14px; opacity: 0.85; } .csl-events select.csl-filters__control, .csl-events input.csl-filters__control { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #545454; flex: 1 1 auto; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 25px; margin: 0; min-width: 0; padding: 6px 0; width: 100%; } .csl-events select.csl-filters__control { cursor: pointer; padding-right: 14px; } .csl-events .csl-filters__input--select { position: relative; } .csl-events .csl-filters__input--select::after { border-bottom: 1px solid #8a8a8a; border-right: 1px solid #8a8a8a; content: ""; height: 6px; pointer-events: none; position: absolute; right: 12px; top: calc(50% - 5px); transform: rotate(45deg); width: 6px; } .csl-events select.csl-filters__control:focus-visible, .csl-events input.csl-filters__control:focus-visible { outline: 2px solid var(--csl-orange); outline-offset: 3px; } .csl-events .csl-filters__field--reset { justify-content: flex-end; } .csl-events button.csl-filters__reset { align-items: center; background: none; border: 0; border-radius: 0; color: var(--csl-orange); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 13px; font-weight: 600; gap: 6px; letter-spacing: normal; line-height: 1.2; padding: 10px 0; text-transform: uppercase; white-space: nowrap; } .csl-events button.csl-filters__reset:hover:not(:disabled), .csl-events button.csl-filters__reset:focus-visible:not(:disabled) { background: none; color: var(--csl-orange-dark); } .csl-events button.csl-filters__reset:disabled { background: none; color: #a9a9a9; cursor: default; } /* Toolbar: View As on the left, month stepper on the right ------------------------------------------------------------------------- */ .csl-events .csl-toolbar { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin: 0 0 20px; } .csl-events .csl-viewas { margin: 0; } .csl-events .csl-viewas__group { display: flex; } .csl-events button.csl-viewas__button { align-items: center; background: #fff; border: 1px solid #ccc; border-radius: 0; color: #373a3c; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 13px; height: 26px; justify-content: center; letter-spacing: normal; line-height: 1; padding: 3px 6px; text-transform: none; transition: background-color 0.15s ease, color 0.15s ease; width: 30px; } .csl-events button.csl-viewas__button + .csl-viewas__button { margin-left: -1px; } .csl-events button.csl-viewas__button:hover { background: #f0f0f0; color: #373a3c; } .csl-events button.csl-viewas__button.is-active { background: var(--csl-purple); border-color: var(--csl-purple); color: #fff; position: relative; z-index: 1; } .csl-events button.csl-viewas__button .csl-icon { height: 14px; width: 14px; } /* Month stepper ------------------------------------------------------------------------- */ .csl-events .csl-monthnav__label { color: var(--csl-label); font-size: 12px; font-weight: 700; letter-spacing: -0.24px; line-height: 12px; margin: 0 0 12px; text-transform: uppercase; } .csl-events .csl-monthnav__group { display: flex; } .csl-events button.csl-monthnav__button { background: #fff; border: 1px solid #ccc; border-radius: 4px; color: #373a3c; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; line-height: 1.4; padding: 6px 16px; text-transform: none; transition: background-color 0.15s ease, color 0.15s ease; white-space: nowrap; width: auto; } .csl-events button.csl-monthnav__button + .csl-monthnav__button { margin-left: -1px; } .csl-events button.csl-monthnav__button:hover:not(:disabled), .csl-events button.csl-monthnav__button:focus-visible:not(:disabled) { background: var(--csl-panel-solid); color: var(--csl-ink); position: relative; z-index: 1; } .csl-events button.csl-monthnav__button:disabled { background: #fff; color: #373a3c; cursor: not-allowed; opacity: 0.5; } /* Responsive ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .csl-events .csl-events-carousel__track { grid-auto-columns: 50%; } .csl-events .csl-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csl-events .csl-event-card--stack { padding: 0 20px; } } @media (max-width: 767px) { .csl-events { --csl-gap: 20px; } .csl-events .csl-events-carousel__track { grid-auto-columns: 84%; } .csl-events .csl-event-card--stack { padding: 0 10px; } .csl-events button.csl-events-carousel__arrow { display: none; } .csl-events .csl-events-list { grid-template-columns: minmax(0, 1fr); } .csl-events .csl-filters { grid-template-columns: minmax(0, 1fr); } .csl-events .csl-event-card--row .csl-event-card__media { height: 110px; margin-right: 15px; width: 110px; } .csl-events .csl-toolbar { align-items: flex-start; flex-direction: column; } .csl-events button.csl-monthnav__button { flex: 1 1 auto; padding: 6px 10px; } .csl-events .csl-monthnav { width: 100%; } .csl-events .csl-events-carousel__heading { font-size: 36px; line-height: 42px; } }