/** * stelr Events Calendar — front-end styles. * Palette and type scale are deliberately shared across every piece * (rail, rows, modal) so the calendar reads as one designed object. * * Font family and every color below are the plugin's defaults only. * The actual values used on the page come from Sessions → Appearance, * output as CSS custom property overrides on .stelr-cal-wrap in * (see Stelr_Cal_Settings::print_frontend_overrides()) — these * defaults just mean a site that has never opened that screen still * looks exactly like this. */ .stelr-cal-wrap, .stelr-cal-wrap * { box-sizing: border-box; } body.stelr-cal-modal-open { overflow: hidden; } .stelr-cal-wrap { --stelr-ivory: #fffef8; --stelr-cream: #f2efe6; --stelr-blue: #0128ff; --stelr-blue-dark: #06025e; --stelr-blue-light: #7593ff; --stelr-blue-grey: #cad5fb; --stelr-grey: #6a6a6a; --stelr-grey-light: #b9b9b2; --stelr-border: #e4e1d6; --stelr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --stelr-font-display: 'Fraunces', Georgia, serif; font-family: var(--stelr-font); max-width: 1100px; margin: 0 auto; } .stelr-cal { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0; background: var(--stelr-ivory); color: var(--stelr-blue-dark); border: 1px solid var(--stelr-border); border-radius: 4px; margin-top: 20px; position: relative; /* containing block for .stelr-cal-rail.is-pinned-bottom below */ } /* ---------- Filter bar ---------- */ .stelr-cal-filters-sticky-container { margin-bottom: 20px; } .stelr-cal-input-search-container { display: flex; align-items: center; gap: 16px; } .stelr-cal-input-search { position: relative; flex: 1; } .stelr-cal-input-search input[type='search'] { width: 100%; padding: 14px 44px 14px 18px; border: 1px solid var(--stelr-blue-light); border-radius: 4px; background: var(--stelr-ivory); font-family: var(--stelr-font); font-style: italic; font-size: 0.95rem; color: var(--stelr-blue-dark); } .stelr-cal-input-search input[type='search']::placeholder { color: var(--stelr-blue-light); font-style: italic; } .stelr-cal-input-search input[type='search']:focus { outline: 2px solid var(--stelr-blue); outline-offset: -1px; } .stelr-cal-search-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--stelr-blue-light); cursor: pointer; display: flex; align-items: center; justify-content: center; } .stelr-cal-see-more-wrapper { flex-shrink: 0; } .stelr-cal-see-more { border: 0; border-radius: 4px; padding: 14px 24px; font-family: var(--stelr-font); font-size: 0.9rem; font-weight: 600; color: var(--stelr-ivory); background: var(--stelr-blue-light); cursor: pointer; transition: background-color 0.2s ease; } .stelr-cal-see-more.is-expanded { background: var(--stelr-blue); } .stelr-cal-filters-panel { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; } .stelr-cal-filters-panel.is-open { max-height: 600px; } .stelr-cal-filters-panel.stelr-cal-overflow-visible { /* Only added once the slide-open transition has finished (see the JS): overflow:hidden is what makes the slide animation work, but it also clips the dropdown checklists that pop out below each filter button, so it has to come off before those can be used. */ overflow: visible; } /* A flat wrapping row — matching the reference site's own flat list of six selects — rather than hard-coded 2-then-4 row groupings. Partner and Speaker get a wider flex-basis so they naturally wrap onto their own row above the narrower four. */ .stelr-cal-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .stelr-filter { position: relative; flex: 1 1 calc(25% - 9px); min-width: 160px; } .stelr-filter-wide { flex: 1 1 calc(50% - 6px); } .stelr-filter-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 4px; background: var(--stelr-cream); color: var(--stelr-blue-dark); padding: 14px 16px; font-family: var(--stelr-font); font-style: italic; font-size: 0.9rem; cursor: pointer; } .stelr-filter-chevron { display: flex; color: var(--stelr-blue-light); transition: transform 0.2s ease; } .stelr-filter.is-open .stelr-filter-chevron { transform: rotate(180deg); } .stelr-filter-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--stelr-ivory); border: 1px solid var(--stelr-border); border-radius: 4px; box-shadow: 0 12px 30px rgba(6, 2, 94, 0.14); padding: 10px; } .stelr-filter-option { display: flex; align-items: center; gap: 8px; padding: 7px 6px; font-size: 0.88rem; font-style: normal; cursor: pointer; border-radius: 3px; } .stelr-filter-option:hover { background: var(--stelr-cream); } .stelr-cal-actions-container { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 0.88rem; } .stelr-cal-clear-filters { color: var(--stelr-blue-dark); text-decoration: underline; } .stelr-cal-see-map { border: 0; background: none; padding: 0; cursor: pointer; color: var(--stelr-blue-dark); font-family: var(--stelr-font); } .stelr-cal-see-map span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .stelr-cal-see-map label { cursor: pointer; } .stelr-cal-no-results { padding: 24px 28px; color: var(--stelr-grey); font-style: italic; } /* ---------- Day rail ---------- */ /* These exact values — scale, height, colors, the 0.5s transition — are copied straight from the reference site's own compiled CSS, not approximated. Base items sit at 30% scale; the immediate neighbour of the active day ("sibling") grows to 50%; the active day itself ("current") sits at full scale — with height changing alongside scale so the list visibly reflows as a day becomes active, rather than just shrinking/growing in place. */ .stelr-cal-rail { grid-column: 1; background: var(--stelr-cream); border-right: 1px solid var(--stelr-border); border-radius: 4px 0 0 4px; padding: 60px 0; align-self: start; max-height: calc(100vh - 40px); overflow: hidden; /* Position is controlled entirely by JS (see setupRail in stelr-calendar.js), not CSS position:sticky. Sticky depends on every single ancestor — including ones inside the site's own theme, which this plugin has no visibility into — never setting overflow to anything but visible; one such rule anywhere up the tree silently breaks it with no error or warning. A JS-calculated position:fixed sidesteps that failure mode: it only breaks under the much rarer transform/filter/perspective on an ancestor, not overflow. The three states below are the ones that behavior toggles between. */ } .stelr-cal-rail.is-pinned { position: fixed; /* top is set dynamically by JS (centered in the viewport), not fixed here — see updatePinning() in stelr-calendar.js. */ z-index: 5; } .stelr-cal-rail.is-pinned-bottom { position: absolute; top: auto; bottom: 0; left: 0; } .stelr-cal-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .stelr-cal-rail-tab { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--stelr-blue-dark); font-size: 1.25rem; font-weight: 300; height: 50px; margin-bottom: 30px; text-align: center; transform: scale(0.3); transform-origin: center; transition: transform 0.5s ease, height 0.5s ease, color 0.3s ease; } .stelr-cal-rail-tab:not(.is-current) { color: var(--stelr-blue-grey); } .stelr-cal-rail-weekday { display: block; } .stelr-cal-rail-num { display: block; font-size: 110px; font-weight: 300; line-height: 100px; } .stelr-cal-rail-tab:hover { color: var(--stelr-blue-light); } .stelr-cal-rail-tab.is-sibling { color: var(--stelr-blue-light); height: 80px; transform: scale(0.5); } .stelr-cal-rail-tab.is-current { height: 120px; transform: scale(1); } .stelr-cal-rail-tab.is-current .stelr-cal-rail-num { color: var(--stelr-blue); } /* ---------- Session list ---------- */ .stelr-cal-list { grid-column: 2; min-width: 0; } .stelr-cal-day { padding-top: 8px; } .stelr-cal-day-heading { display: flex; align-items: center; gap: 16px; margin: 0; padding: 18px 28px; font-family: var(--stelr-font); font-size: 0.95rem; font-weight: 600; color: var(--stelr-blue); } .stelr-cal-day-heading::before, .stelr-cal-day-heading::after { content: ''; flex: 1; height: 1px; background: var(--stelr-blue-light); opacity: 0.5; } .stelr-cal-item { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 132px 18px 28px; cursor: pointer; border-top: 1px solid var(--stelr-border); transition: background-color 0.15s ease; } .stelr-cal-item .stelr-cal-inside { display: contents; /* keeps the grid columns above driving layout, .inside is a structural wrapper only */ } .stelr-cal-day .stelr-cal-item:nth-child(odd) { background: var(--stelr-cream); } .stelr-cal-day .stelr-cal-item:nth-child(even) { background: var(--stelr-blue-grey); } .stelr-cal-item:hover, .stelr-cal-item:focus-visible { filter: brightness(0.97); } .stelr-cal-item:focus-visible { outline: 2px solid var(--stelr-blue); outline-offset: -2px; } .stelr-cal-event-date { display: flex; flex-direction: column; line-height: 1.15; color: var(--stelr-blue-dark); } .stelr-cal-event-date .stelr-cal-event-day { font-size: 0.75rem; color: var(--stelr-grey); } .stelr-cal-event-date .stelr-cal-event-day b { display: block; font-family: var(--stelr-font-display); font-size: 1.6rem; font-weight: 500; color: var(--stelr-blue-dark); } .stelr-cal-year { font-size: 0.72rem; color: var(--stelr-grey-light); } .stelr-cal-event-details { min-width: 0; } .stelr-cal-event-title { display: block; font-weight: 600; font-size: 1rem; color: var(--stelr-blue-dark); margin-bottom: 4px; } .stelr-cal-event-partners { font-size: 0.88rem; color: var(--stelr-blue); } .stelr-cal-partner.cohost::before { content: '– '; color: var(--stelr-grey); } .stelr-cal-event-themes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; } .stelr-cal-theme, .stelr-cal-region { font-size: 0.76rem; color: var(--stelr-grey); } .stelr-cal-event-metas { white-space: nowrap; } .stelr-cal-event-format .stelr-cal-term { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--stelr-blue-light); color: var(--stelr-blue); border-radius: 20px; padding: 5px 14px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; background: var(--stelr-ivory); } .stelr-cal-event-format .stelr-cal-term svg { flex-shrink: 0; width: 12px; height: auto; } .stelr-cal-item[data-format='online'] .stelr-cal-term { border-color: var(--stelr-grey); color: var(--stelr-grey); } .stelr-cal-event-ressources { position: absolute; top: 0; right: 0; bottom: 0; width: 104px; } .stelr-cal-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--stelr-blue-dark); color: var(--stelr-ivory); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .stelr-cal-status-open { background: var(--stelr-blue); } .stelr-cal-empty { font-family: var(--stelr-font); color: var(--stelr-grey); padding: 24px; text-align: center; } /* ---------- Modal ---------- */ .stelr-cal-modal-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0s linear 0.28s; } .stelr-cal-modal-overlay[hidden] { display: flex; /* keep display flex so the fade-out transition can run before unmount */ } .stelr-cal-modal-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.28s ease, visibility 0s linear 0s; } .stelr-cal-modal { background: var(--stelr-ivory); border-radius: 6px; max-width: 560px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 40px; position: relative; box-shadow: 0 24px 60px rgba(6, 2, 94, 0.18); font-family: var(--stelr-font); color: var(--stelr-blue-dark); transform: scale(0.94) translateY(10px); opacity: 0; transition: transform 0.28s ease, opacity 0.28s ease; } .stelr-cal-modal-overlay.is-open .stelr-cal-modal { transform: scale(1) translateY(0); opacity: 1; } .stelr-cal-modal-close { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .stelr-cal-modal-close svg { width: 20px; height: 20px; display: block; } .stelr-cal-map-det .stelr-cal-date { display: flex; flex-direction: column; margin-bottom: 10px; } .stelr-cal-day-full { font-size: 0.9rem; font-weight: 600; color: var(--stelr-blue-dark); } .stelr-cal-hours { font-size: 0.88rem; color: var(--stelr-grey); } .stelr-cal-map-det .stelr-cal-title { font-family: var(--stelr-font-display); font-size: 1.5rem; font-weight: 500; margin: 0 0 10px; padding-right: 30px; } .stelr-cal-map-det .stelr-cal-partner { font-size: 0.92rem; color: var(--stelr-blue); margin-bottom: 16px; } .stelr-cal-format-and-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; } .stelr-cal-status-badge { display: inline-block; border: 1px solid var(--stelr-blue-dark); color: var(--stelr-blue-dark); border-radius: 20px; padding: 5px 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; } .stelr-cal-event-address { margin-bottom: 14px; font-size: 0.95rem; } .stelr-cal-address-link { display: inline-block; margin-left: 12px; color: var(--stelr-blue); font-weight: 600; text-decoration: underline; } .stelr-cal-venue-desc { font-size: 0.88rem; color: var(--stelr-grey); font-style: italic; margin-bottom: 14px; } .stelr-cal-venue-desc p:first-child { margin-top: 0; } .stelr-cal-detail-speakers { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; padding-top: 4px; } .stelr-cal-speaker-chip { display: flex; align-items: center; gap: 10px; width: calc(50% - 7px); } .stelr-cal-speaker-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--stelr-cream); } .stelr-cal-speaker-photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--stelr-blue); background: var(--stelr-blue-grey); } .stelr-cal-speaker-info { display: flex; flex-direction: column; min-width: 0; } .stelr-cal-speaker-name { font-size: 0.88rem; font-weight: 600; color: var(--stelr-blue-dark); } .stelr-cal-speaker-meta { font-size: 0.78rem; color: var(--stelr-grey); } .stelr-cal-detail-desc { font-size: 0.95rem; line-height: 1.6; border-top: 1px solid var(--stelr-border); padding-top: 16px; } .stelr-cal-detail-desc p:first-child { margin-top: 0; } /* ---------- Back to top ---------- */ .stelr-cal-back-to-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--stelr-blue-light); background: var(--stelr-ivory); color: var(--stelr-blue); font-size: 1.2rem; cursor: pointer; box-shadow: 0 6px 16px rgba(6, 2, 94, 0.12); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 9000; } .stelr-cal-back-to-top:hover { transform: translateY(-2px); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .stelr-cal-modal-overlay, .stelr-cal-modal, .stelr-cal-rail-tab, .stelr-cal-back-to-top, .stelr-cal-filters-panel, .stelr-cal-filters-toggle, .stelr-filter-chevron { transition: none !important; } } /* ---------- Responsive: stacked card layout ---------- */ @media (max-width: 860px) { .stelr-cal { display: block; border-radius: 0; border-left: 0; border-right: 0; } .stelr-cal-rail { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--stelr-border); padding: 18px 0; } /* Higher specificity than the base .is-pinned/.is-pinned-bottom rules (defined outside this media query), so this wins even if the JS hasn't removed the class yet during a resize — belt and braces against the fixed/absolute positioning ever applying on the mobile horizontal-row layout. */ .stelr-cal-rail.is-pinned, .stelr-cal-rail.is-pinned-bottom { position: static; top: auto; left: auto; bottom: auto; width: auto !important; } .stelr-cal-rail-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 26px; padding: 0 20px; } /* The reference site scales non-current days to 70% on narrow screens rather than the dramatic 30% used on desktop — a horizontal strip has much less room to exaggerate the effect in. */ .stelr-cal-rail-tab { margin-bottom: 0; } .stelr-cal-rail-tab:not(.is-current) { transform: scale(0.7) !important; } .stelr-cal-day-heading { padding: 16px; font-size: 0.85rem; } .stelr-cal-item { display: block; padding: 16px 16px 0; margin-bottom: 16px; } .stelr-cal-day .stelr-cal-item:nth-child(odd), .stelr-cal-day .stelr-cal-item:nth-child(even) { background: var(--stelr-cream); } .stelr-cal-event-date { flex-direction: row; align-items: baseline; gap: 6px; margin-bottom: 10px; } .stelr-cal-event-details { margin-bottom: 12px; } .stelr-cal-event-metas { margin-bottom: 16px; } .stelr-cal-event-ressources { /* Must stay relative (not static) here: its child .stelr-cal-status is position:absolute;inset:0, and needs this element as its positioned ancestor. Without it, .stelr-cal-status skips up to .stelr-cal-item — which stays position:relative at every breakpoint — and inset:0 then covers the *entire card*, hiding the date/title/host/tags behind a full-card status overlay. */ position: relative; width: auto; height: 40px; margin: 0 -16px; } .stelr-cal-modal { padding: 28px 22px; } .stelr-cal-input-search-container { flex-direction: column; align-items: stretch; } .stelr-filter, .stelr-filter-wide { flex: 1 1 100%; } .stelr-cal-actions-container { flex-direction: column; align-items: flex-start; gap: 10px; } .stelr-cal-speaker-chip { width: 100%; } }