/** * Anova Events Calendar — frontend styles. * * Everything visual is scoped to `.oxpec:not(.oxpec--raw)`, so a calendar * rendered with the "Raw (advanced)" design receives the full class structure * and none of these rules. * * The calendar inherits the theme's font on purpose: a plugin that imports its * own typeface looks pasted onto the page. Colour, rhythm and structure are * ours; the voice stays the theme's. */ /* -------------------------------------------------------------------------- * 1. Tokens * * One declaration block, two roots. The modal is reparented to and so * cannot inherit from the calendar, but it is the same design — giving it its * own copy of the palette is how the two drifted apart. Everything a theme can * retune is declared here and only here. * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw), .oxpec-modal--styled { --oxpec-primary: #2f6feb; --oxpec-primary-ink: #ffffff; /* * The two softer steps of the accent, mixed toward the page rather than * toward white, so they follow the scheme instead of fighting it. Safe to * derive here — unlike `--oxpec-cat`, neither `--oxpec-primary` nor * `--oxpec-surface` ever varies per element, so resolving them on the root * is resolving them everywhere. */ --oxpec-primary-soft: color-mix(in srgb, var(--oxpec-primary) 12%, var(--oxpec-surface)); --oxpec-primary-mid: color-mix(in srgb, var(--oxpec-primary) 32%, var(--oxpec-surface)); --oxpec-radius: 10px; --oxpec-radius-sm: 6px; --oxpec-gap: 0.75rem; --oxpec-cell-min: 6.5rem; /* * One base size and four steps expressed as ratios of it, rather than four * independent values. A calendar with a typography size set overrides * `--oxpec-fs-base` alone — from the inline style, so it beats the theme — * and the whole scale moves with it, keeping each theme's own proportions * instead of flattening them to a single set of numbers. */ --oxpec-fs-base: 0.94rem; --oxpec-fs-xs: calc(var(--oxpec-fs-base) * 0.766); --oxpec-fs-sm: calc(var(--oxpec-fs-base) * 0.872); --oxpec-fs-md: var(--oxpec-fs-base); --oxpec-fs-lg: calc(var(--oxpec-fs-base) * 1.223); /* Fallback accent for events with no category. */ --oxpec-cat: var(--oxpec-primary); /* * How an event looks. A theme is expressed by retuning these and nothing * else: the event rule in section 8 is written once and covers both modes * and both variants, so "Soft cards" cannot end up tinted in the grid and * flat in the agenda, and "Minimal" cannot end up indistinguishable from * "Compact" because one of them was only described for one mode. * * Note what these tokens hold: amounts, sizes and shapes — never a colour * mixed from `--oxpec-cat`. A custom property is substituted where it is * *declared*, so `color-mix(… var(--oxpec-cat) …)` written here would * resolve against the root's `--oxpec-cat` and freeze every card to the same * colour, which is exactly what the per-event category colour is for. The * rules in section 8 pull `--oxpec-cat` in themselves, on the element that * carries it. */ --oxpec-event-surface-mix: 0%; --oxpec-event-surface-mix-hover: 0%; --oxpec-event-shadow: none; --oxpec-event-shadow-hover: none; --oxpec-event-radius: 0; /* The accent is a pseudo-element, so one set of tokens covers a hairline * rule, a bar and a dot without any of them needing their own layout. */ --oxpec-event-accent-width: 2px; --oxpec-event-accent-height: 100%; --oxpec-event-accent-radius: 0; --oxpec-event-accent-top: 0; /* Density, per variant: a grid cell and an agenda row need different room * for the same theme. */ --oxpec-event-pad-compact: 0.1rem 0.2rem; --oxpec-event-pad-full: 0.15rem 0.2rem; --oxpec-event-indent-compact: 0.55rem; --oxpec-event-indent-full: 0.85rem; /* The agenda's vertical rail belongs to the mode, but its weight is a * theme's to soften. */ --oxpec-rail: var(--oxpec-line); --oxpec-rail-dot: var(--oxpec-line-strong); } /* * The palette — the only part a scheme changes. It is declared apart from the * rest of the tokens and against a list of selectors, so anything that *hosts* * a calendar can adopt the same surface without copying the values: the * composer preview does exactly that, and a dark calendar on a white page was * the reason to separate them. * * Every theme, mode and component reads these, so none of them needs a dark * variant of its own. The category colours are deliberately untouched — they * are the one thing the site owner chose. */ .oxpec:not(.oxpec--raw), .oxpec-modal--styled, .oxpec-page { --oxpec-ink: #15171c; --oxpec-ink-soft: #4a5160; --oxpec-muted: #79808f; --oxpec-line: #e3e6ec; --oxpec-line-strong: #cdd2dc; --oxpec-surface: #ffffff; --oxpec-surface-alt: #f7f8fa; } .oxpec--scheme-dark:not(.oxpec--raw), .oxpec-modal--scheme-dark.oxpec-modal--styled, .oxpec-page--dark { --oxpec-ink: #f2f4f8; --oxpec-ink-soft: #c3c9d4; --oxpec-muted: #8d95a3; --oxpec-line: #2f343d; --oxpec-line-strong: #444b57; --oxpec-surface: #1b1e25; --oxpec-surface-alt: #23272f; } /* The host page itself. Only the composer preview uses this today; on the * front end the site's own theme owns the page. */ .oxpec-page { background: var(--oxpec-surface); color: var(--oxpec-ink); } .oxpec:not(.oxpec--raw) { color: var(--oxpec-ink); font-size: var(--oxpec-fs-md); line-height: 1.45; position: relative; container-type: inline-size; } /* * The base typography block. Every property falls back to `inherit`, so a * calendar nobody has set a font on still takes the site theme's voice — which * is the behaviour this stylesheet has always had, now expressed as a default * rather than as an absence. * * The modal is listed alongside because it is reparented to and inherits * from the page, not from the calendar; it carries its own copy of these * properties for the same reason it carries its own palette. */ .oxpec:not(.oxpec--raw), .oxpec-modal--styled { font-family: var(--oxpec-font-family, inherit); font-weight: var(--oxpec-font-weight, inherit); font-style: var(--oxpec-font-style, inherit); text-decoration: var(--oxpec-font-decoration, none); } .oxpec:not(.oxpec--raw) *, .oxpec:not(.oxpec--raw) *::before, .oxpec:not(.oxpec--raw) *::after { box-sizing: border-box; } .oxpec:not(.oxpec--raw) .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .oxpec:not(.oxpec--raw) :focus-visible { outline: 2px solid var(--oxpec-primary); outline-offset: 2px; border-radius: var(--oxpec-radius-sm); } /* -------------------------------------------------------------------------- * 2. Header * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oxpec-gap); margin-bottom: 1.25rem; } .oxpec:not(.oxpec--raw) .oxpec__nav { display: flex; align-items: center; gap: 0.35rem; } .oxpec:not(.oxpec--raw) .oxpec__title { margin: 0; font-size: var(--oxpec-fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; min-width: 9ch; text-align: center; } .oxpec:not(.oxpec--raw) .oxpec__header-actions { display: flex; align-items: center; gap: 0.4rem; } .oxpec:not(.oxpec--raw) .oxpec__nav-btn, .oxpec:not(.oxpec--raw) .oxpec__mode-btn, .oxpec:not(.oxpec--raw) .oxpec__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.15rem; padding: 0 0.75rem; border: 1px solid var(--oxpec-line); border-radius: var(--oxpec-radius-sm); background: var(--oxpec-surface); color: var(--oxpec-ink-soft); font: inherit; font-size: var(--oxpec-fs-sm); line-height: 1; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .oxpec:not(.oxpec--raw) .oxpec__nav-btn--prev, .oxpec:not(.oxpec--raw) .oxpec__nav-btn--next { width: 2.15rem; padding: 0; font-size: 1.1rem; } .oxpec:not(.oxpec--raw) .oxpec__nav-btn:hover, .oxpec:not(.oxpec--raw) .oxpec__mode-btn:hover, .oxpec:not(.oxpec--raw) .oxpec__btn:hover { border-color: var(--oxpec-line-strong); color: var(--oxpec-ink); } .oxpec:not(.oxpec--raw) .oxpec__mode-switch { display: inline-flex; gap: 0; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn { gap: 0.4rem; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn-icon { flex: none; width: 0.95em; height: 0.95em; opacity: 0.75; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn--active .oxpec__mode-btn-icon { opacity: 1; } /* Below the container breakpoint the icon carries the meaning on its own and * the switch stops competing with the month title for the row. */ @container (max-width: 30rem) { .oxpec:not(.oxpec--raw) .oxpec__mode-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn { width: 2.15rem; padding: 0; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn-icon { width: 1rem; height: 1rem; } } /* Written as :not() rather than :first/:last so the group works with two * buttons or three. */ .oxpec:not(.oxpec--raw) .oxpec__mode-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .oxpec:not(.oxpec--raw) .oxpec__mode-btn--active { background: var(--oxpec-primary); border-color: var(--oxpec-primary); color: var(--oxpec-primary-ink); } .oxpec:not(.oxpec--raw) .oxpec__btn--filter { background: var(--oxpec-primary); border-color: var(--oxpec-primary); color: var(--oxpec-primary-ink); } .oxpec:not(.oxpec--raw) .oxpec__btn--filter:hover { color: var(--oxpec-primary-ink); filter: brightness(0.94); } /* -------------------------------------------------------------------------- * 3. Filters * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec__filters { margin-bottom: 1.25rem; } .oxpec:not(.oxpec--raw) .oxpec__filters-inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--oxpec-gap); } .oxpec:not(.oxpec--raw) .oxpec__filter { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .oxpec:not(.oxpec--raw) .oxpec__filter--keyword { flex: 1 1 12rem; } .oxpec:not(.oxpec--raw) .oxpec__filter--category { flex: 1 1 100%; } .oxpec:not(.oxpec--raw) .oxpec__filter--actions { flex-direction: row; gap: 0.4rem; } .oxpec:not(.oxpec--raw) .oxpec__filter-label { font-size: var(--oxpec-fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--oxpec-muted); } .oxpec:not(.oxpec--raw) .oxpec__select, .oxpec:not(.oxpec--raw) .oxpec__input { min-height: 2.15rem; padding: 0.25rem 0.55rem; border: 1px solid var(--oxpec-line); border-radius: var(--oxpec-radius-sm); background: var(--oxpec-surface); color: var(--oxpec-ink); font: inherit; font-size: var(--oxpec-fs-sm); max-width: 100%; } .oxpec:not(.oxpec--raw) .oxpec__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .oxpec:not(.oxpec--raw) .oxpec__chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; } .oxpec:not(.oxpec--raw) .oxpec__chip-label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.65rem; border: 1px solid var(--oxpec-line); border-radius: 999px; font-size: var(--oxpec-fs-sm); color: var(--oxpec-ink-soft); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .oxpec:not(.oxpec--raw) .oxpec__chip-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--oxpec-cat); flex: none; } .oxpec:not(.oxpec--raw) .oxpec__chip-input:checked + .oxpec__chip-label { border-color: var(--oxpec-cat); background: var(--oxpec-cat); color: #fff; } .oxpec:not(.oxpec--raw) .oxpec__chip-input:checked + .oxpec__chip-label .oxpec__chip-dot { background: #fff; } .oxpec:not(.oxpec--raw) .oxpec__chip-input:focus-visible + .oxpec__chip-label { outline: 2px solid var(--oxpec-primary); outline-offset: 2px; } /* -------------------------------------------------------------------------- * 4. Legend * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 1rem; padding: 0; list-style: none; } .oxpec:not(.oxpec--raw) .oxpec__legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--oxpec-fs-sm); color: var(--oxpec-ink-soft); } .oxpec:not(.oxpec--raw) .oxpec__legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--oxpec-cat); } /* -------------------------------------------------------------------------- * 5. Body states * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec__body { position: relative; min-height: 4rem; } .oxpec:not(.oxpec--raw) .oxpec__empty { margin: 0; padding: 2.5rem 1rem; text-align: center; color: var(--oxpec-muted); font-size: var(--oxpec-fs-sm); } .oxpec:not(.oxpec--raw) .oxpec__loader { position: absolute; inset: 0; display: none; background: color-mix(in srgb, var(--oxpec-surface) 72%, transparent); border-radius: var(--oxpec-radius); z-index: 2; } .oxpec:not(.oxpec--raw).is-loading .oxpec__loader { display: block; } .oxpec:not(.oxpec--raw).is-loading .oxpec__body { opacity: 0.45; transition: opacity 0.15s ease; } .oxpec:not(.oxpec--raw) .oxpec__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .oxpec:not(.oxpec--raw) .oxpec__notice { margin: 0; padding: 0.85rem 1rem; border: 1px dashed var(--oxpec-line-strong); border-radius: var(--oxpec-radius); color: var(--oxpec-muted); font-size: var(--oxpec-fs-sm); } /* -------------------------------------------------------------------------- * 6. Calendar mode — the month grid * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec-grid__weekdays, .oxpec:not(.oxpec--raw) .oxpec-grid__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .oxpec:not(.oxpec--raw) .oxpec-grid__weekday { padding: 0 0.5rem 0.6rem; font-size: var(--oxpec-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oxpec-muted); } .oxpec:not(.oxpec--raw) .oxpec-grid__weekday-abbr { text-decoration: none; border: 0; cursor: default; } .oxpec:not(.oxpec--raw) .oxpec-grid__day { display: flex; flex-direction: column; gap: 0.35rem; min-height: var(--oxpec-cell-min); padding: 0.5rem; } .oxpec:not(.oxpec--raw) .oxpec-grid__day-header { display: flex; align-items: center; justify-content: flex-start; } .oxpec:not(.oxpec--raw) .oxpec-grid__day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: var(--oxpec-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--oxpec-ink-soft); } .oxpec:not(.oxpec--raw) .oxpec-grid__day--outside { opacity: 0.4; } .oxpec:not(.oxpec--raw) .oxpec-grid__day--past .oxpec-grid__day-number { color: var(--oxpec-muted); font-weight: 500; } .oxpec:not(.oxpec--raw) .oxpec-grid__day--today .oxpec-grid__day-number { background: var(--oxpec-primary); color: var(--oxpec-primary-ink); } .oxpec:not(.oxpec--raw) .oxpec-grid__events { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding: 0; list-style: none; } /* * The overflow list ships collapsed, and `hidden` is how it says so — but the * UA's `[hidden] { display: none }` is a plain type-less rule, so the `display: * flex` above outranked it and every event past the limit stayed on screen * underneath its own "+N more" button. The attribute has to be honoured at the * same specificity that set the display in the first place. */ .oxpec:not(.oxpec--raw) .oxpec-grid__events[hidden] { display: none; } .oxpec:not(.oxpec--raw) .oxpec-grid__more { align-self: flex-start; padding: 0.1rem 0.25rem; border: 0; background: none; color: var(--oxpec-muted); font: inherit; font-size: var(--oxpec-fs-xs); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .oxpec:not(.oxpec--raw) .oxpec-grid__more:hover { color: var(--oxpec-ink); } /* -------------------------------------------------------------------------- * 7. Agenda mode — events grouped day by day * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec-agenda { margin: 0; padding: 0; list-style: none; } .oxpec:not(.oxpec--raw) .oxpec-agenda__group { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--oxpec-line); } .oxpec:not(.oxpec--raw) .oxpec-agenda__group:first-child { border-top: 0; padding-top: 0; } .oxpec:not(.oxpec--raw) .oxpec-agenda__date-time { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding-top: 0.15rem; } .oxpec:not(.oxpec--raw) .oxpec-agenda__date-day { font-size: 1.6rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .oxpec:not(.oxpec--raw) .oxpec-agenda__date-month, .oxpec:not(.oxpec--raw) .oxpec-agenda__date-weekday { font-size: var(--oxpec-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--oxpec-muted); } .oxpec:not(.oxpec--raw) .oxpec-agenda__group--today .oxpec-agenda__date-day { color: var(--oxpec-primary); } .oxpec:not(.oxpec--raw) .oxpec-agenda__group--past { opacity: 0.65; } /* The placeholder that keeps today in the list on a day with nothing on it. * Quiet enough not to look like an event, present enough to be an answer. */ .oxpec:not(.oxpec--raw) .oxpec-agenda__none { margin: 0; padding: 0.35rem 0; font-size: var(--oxpec-fs-sm); font-style: italic; color: var(--oxpec-muted); } .oxpec:not(.oxpec--raw) .oxpec-agenda__items { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; min-width: 0; } /* The vertical rail is what makes an agenda an agenda, so it belongs to the * mode rather than to any one theme. Themes restyle or hide it. */ .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda { position: relative; } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__group { position: relative; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1.5rem; border-top: 0; padding: 0 0 1.75rem; } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__group::before { content: ""; position: absolute; left: 3.75rem; top: 0.6rem; bottom: 0; width: 1px; background: var(--oxpec-rail); } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__group:last-child::before { bottom: auto; height: 0; } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__group::after { content: ""; position: absolute; left: calc(3.75rem - 3px); top: 0.6rem; width: 7px; height: 7px; border-radius: 50%; background: var(--oxpec-rail-dot); } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__group--today::after { background: var(--oxpec-primary); box-shadow: 0 0 0 4px var(--oxpec-primary-soft); } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__date-time { align-items: flex-end; text-align: right; padding-right: 0.5rem; } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__date-day { font-size: 1.35rem; } .oxpec:not(.oxpec--raw).oxpec--mode-agenda .oxpec-agenda__items { padding-left: 0.35rem; } /* -------------------------------------------------------------------------- * 8. Event * * This is the single source of truth for how an event looks. It is written * once, entirely against the tokens from section 1, and it is what both modes * and both variants render — the grid cell and the agenda row differ only in * the density tokens below. Themes never restate it; they retune the tokens. * ----------------------------------------------------------------------- */ .oxpec:not(.oxpec--raw) .oxpec-event--compact { --oxpec-event-padding: var(--oxpec-event-pad-compact); --oxpec-event-indent: var(--oxpec-event-indent-compact); } .oxpec:not(.oxpec--raw) .oxpec-event--full { --oxpec-event-padding: var(--oxpec-event-pad-full); --oxpec-event-indent: var(--oxpec-event-indent-full); } /* * The surface belongs to the
, not to the link inside it: the action * buttons are the link's sibling, so anything painted on the link alone leaves * them outside the card and flush against the accent. */ .oxpec:not(.oxpec--raw) .oxpec-event { position: relative; min-width: 0; padding: var(--oxpec-event-padding); padding-left: var(--oxpec-event-indent); border-radius: var(--oxpec-event-radius); /* `--oxpec-cat` is read here, on the element that carries the category * colour, and not baked into a token up at the root. */ background-color: color-mix(in srgb, var(--oxpec-cat) var(--oxpec-event-surface-mix), transparent); box-shadow: var(--oxpec-event-shadow); transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .oxpec:not(.oxpec--raw) .oxpec-event::before { content: ""; position: absolute; left: 0; top: var(--oxpec-event-accent-top); width: var(--oxpec-event-accent-width); height: var(--oxpec-event-accent-height); border-radius: var(--oxpec-event-accent-radius); background: var(--oxpec-cat); } .oxpec:not(.oxpec--raw) .oxpec-event:hover { background-color: color-mix(in srgb, var(--oxpec-cat) var(--oxpec-event-surface-mix-hover), transparent); box-shadow: var(--oxpec-event-shadow-hover); } .oxpec:not(.oxpec--raw) .oxpec-event:hover .oxpec-event__title { color: var(--oxpec-cat); } .oxpec:not(.oxpec--raw) .oxpec-event__link { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; } /* * Titles and times each take a typography block of their own. Every one of * these reads its custom property with the value it used to hardcode as the * fallback, so an override that was never set changes nothing: the property is * absent, the fallback applies, and the theme keeps deciding. That is also the * whole of the inheritance rule — an unset title family resolves to `inherit`, * which is the base block on the root. */ .oxpec:not(.oxpec--raw) .oxpec-event__title { margin: 0; font-family: var(--oxpec-title-font-family, inherit); font-size: var(--oxpec-title-font-size, var(--oxpec-fs-md)); font-weight: var(--oxpec-title-font-weight, 600); font-style: var(--oxpec-title-font-style, inherit); text-decoration: var(--oxpec-title-font-decoration, none); line-height: 1.3; letter-spacing: -0.005em; color: var(--oxpec-ink); } .oxpec:not(.oxpec--raw) .oxpec-event__time { display: block; margin: 0; font-family: var(--oxpec-time-font-family, inherit); font-size: var(--oxpec-time-font-size, var(--oxpec-fs-sm)); font-weight: var(--oxpec-time-font-weight, inherit); font-style: var(--oxpec-time-font-style, inherit); text-decoration: var(--oxpec-time-font-decoration, none); color: var(--oxpec-muted); } /* "No time set" is the absence of a time, not a time. It keeps the slot so the * cards stay aligned down a column, but reads a shade lighter and in italics so * the eye does not weigh it the same as an actual hour. */ .oxpec:not(.oxpec--raw) .oxpec-event--no-time .oxpec-event__time { font-style: italic; opacity: 0.75; } .oxpec:not(.oxpec--raw) .oxpec-event__excerpt { margin: 0.35rem 0 0; font-size: var(--oxpec-fs-sm); color: var(--oxpec-ink-soft); } /* The category pills are the one piece of event markup the modal also builds, * so they are described here for both. */ .oxpec:not(.oxpec--raw) .oxpec-event__categories, .oxpec-modal--styled .oxpec-event__categories { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; } .oxpec:not(.oxpec--raw) .oxpec-event__category, .oxpec-modal--styled .oxpec-event__category { padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--oxpec-cat) 14%, transparent); color: color-mix(in srgb, var(--oxpec-cat) 78%, #000); font-size: var(--oxpec-fs-xs); font-weight: 600; letter-spacing: 0.01em; } .oxpec:not(.oxpec--raw) .oxpec-event__status { display: inline-block; margin-top: 0.35rem; padding: 0.1rem 0.45rem; border-radius: var(--oxpec-radius-sm); background: #fdecec; color: #a02020; font-size: var(--oxpec-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .oxpec:not(.oxpec--raw) .oxpec-event--cancelled .oxpec-event__title { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--oxpec-muted); } .oxpec:not(.oxpec--raw) .oxpec-event--past { opacity: 0.7; } .oxpec:not(.oxpec--raw) .oxpec-event__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; } .oxpec:not(.oxpec--raw) .oxpec-event__button { display: inline-flex; align-items: center; min-height: 1.95rem; padding: 0 0.7rem; border: 1px solid var(--oxpec-line); border-radius: var(--oxpec-radius-sm); font-size: var(--oxpec-fs-xs); font-weight: 600; color: var(--oxpec-ink-soft); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .oxpec:not(.oxpec--raw) .oxpec-event__button:hover { border-color: var(--oxpec-cat); color: var(--oxpec-cat); } /* Compact events (grid cells) stay on one line. */ .oxpec:not(.oxpec--raw) .oxpec-event--compact .oxpec-event__title { font-size: var(--oxpec-title-font-size, var(--oxpec-fs-sm)); font-weight: var(--oxpec-title-font-weight, 500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oxpec:not(.oxpec--raw) .oxpec-event--compact .oxpec-event__time { font-size: var(--oxpec-time-font-size, var(--oxpec-fs-xs)); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- * 9. Themes * * A theme is the same choice in either mode. Most of the difference is carried * by retuning the tokens the two modes already consume; only the treatment of * an event needs rules of its own. Nothing here is mode-specific unless it * genuinely has to be, which is what keeps the matrix honest. * * `raw` has no rules at all — it is a theme by absence. * ----------------------------------------------------------------------- */ /* --- Minimal editorial: hairlines, air, colour only where it means something */ .oxpec.oxpec--theme-minimal, .oxpec-modal--theme-minimal { --oxpec-cell-min: 6.5rem; /* A 2px rule instead of a filled chip: the colour reads without a surface, * and the same rule is what marks an agenda row. */ --oxpec-event-accent-width: 2px; --oxpec-event-indent-compact: 0.5rem; --oxpec-event-indent-full: 0.95rem; --oxpec-event-pad-full: 0.05rem 0 0.1rem; } .oxpec.oxpec--theme-minimal.oxpec--mode-calendar .oxpec-grid__weekdays { border-bottom: 1px solid var(--oxpec-line-strong); } .oxpec.oxpec--theme-minimal.oxpec--mode-calendar .oxpec-grid__week { border-bottom: 1px solid var(--oxpec-line); } .oxpec.oxpec--theme-minimal.oxpec--mode-calendar .oxpec-grid__day { padding: 0.6rem 0.4rem 0.9rem; } .oxpec.oxpec--theme-minimal .oxpec-grid__day--weekend .oxpec-grid__day-number { color: var(--oxpec-muted); } /* --- Soft cards: rounded surfaces, tinted events ------------------------- */ .oxpec.oxpec--theme-cards, .oxpec-modal--theme-cards { --oxpec-radius: 10px; --oxpec-cell-min: 6.75rem; /* The tint is the whole point of this theme. It is an *amount* here; the * rule in section 8 mixes it with whatever category colour the card * carries, so the grid chip and the agenda card both get their own. */ --oxpec-event-surface-mix: 12%; --oxpec-event-surface-mix-hover: 22%; --oxpec-event-radius: var(--oxpec-radius-sm); --oxpec-event-accent-width: 3px; --oxpec-event-accent-radius: var(--oxpec-radius-sm) 0 0 var(--oxpec-radius-sm); --oxpec-event-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); --oxpec-event-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 14px 28px -18px rgba(16, 24, 40, 0.35); --oxpec-event-pad-compact: 0.3rem 0.45rem; --oxpec-event-pad-full: 0.85rem 1rem; --oxpec-event-indent-compact: 0.8rem; --oxpec-event-indent-full: 1.35rem; /* The cards already carry the rhythm; a full-strength rail behind them * reads as clutter. */ --oxpec-rail: color-mix(in srgb, var(--oxpec-line) 55%, transparent); } .oxpec.oxpec--theme-cards.oxpec--mode-calendar .oxpec-grid__weeks { display: flex; flex-direction: column; gap: 0.4rem; } .oxpec.oxpec--theme-cards.oxpec--mode-calendar .oxpec-grid__week { gap: 0.4rem; } .oxpec.oxpec--theme-cards.oxpec--mode-calendar .oxpec-grid__day { border: 1px solid var(--oxpec-line); border-radius: var(--oxpec-radius); background: var(--oxpec-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .oxpec.oxpec--theme-cards.oxpec--mode-calendar .oxpec-grid__day--has-events:hover { border-color: var(--oxpec-line-strong); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px -12px rgba(16, 24, 40, 0.2); } .oxpec.oxpec--theme-cards.oxpec--mode-calendar .oxpec-grid__day--outside { background: var(--oxpec-surface-alt); opacity: 0.65; } .oxpec.oxpec--theme-cards.oxpec--mode-calendar .oxpec-grid__day--today { border-color: var(--oxpec-primary-mid); background: var(--oxpec-primary-soft); } .oxpec.oxpec--theme-cards .oxpec-event:hover .oxpec-event__title { color: var(--oxpec-ink); } .oxpec.oxpec--theme-cards .oxpec-event__time { color: color-mix(in srgb, var(--oxpec-cat) 70%, #000); font-weight: var(--oxpec-time-font-weight, 600); } /* * The same mix in the dark scheme walks the category colour toward #000 on a * #1b1e25 surface, which is how the time ended up all but unreadable. Lift it * toward the page instead: the direction of the mix follows the scheme, so the * time lands a step *above* the card's accent bar — the same colour at full * strength — rather than a step below the background. */ .oxpec.oxpec--theme-cards.oxpec--scheme-dark .oxpec-event__time { color: color-mix(in srgb, var(--oxpec-cat) 72%, #fff); } .oxpec.oxpec--theme-cards.oxpec--mode-agenda .oxpec-agenda__items { gap: 0.6rem; } /* --- Compact: small type, tight rows, colour reduced to a dot ------------ */ .oxpec.oxpec--theme-compact, .oxpec-modal--theme-compact { --oxpec-fs-base: 0.85rem; --oxpec-fs-xs: calc(var(--oxpec-fs-base) * 0.8); --oxpec-fs-sm: calc(var(--oxpec-fs-base) * 0.894); --oxpec-fs-md: var(--oxpec-fs-base); --oxpec-fs-lg: calc(var(--oxpec-fs-base) * 1.176); --oxpec-cell-min: 4.5rem; --oxpec-gap: 0.5rem; --oxpec-radius-sm: 4px; /* Colour reduced to a dot — the same dot in a grid cell and in an agenda * row, which is what stops this theme from collapsing into Minimal. */ --oxpec-event-accent-width: 0.4rem; --oxpec-event-accent-height: 0.4rem; --oxpec-event-accent-radius: 50%; --oxpec-event-accent-top: 0.45em; --oxpec-event-indent-compact: 0.7rem; --oxpec-event-indent-full: 0.8rem; --oxpec-event-pad-compact: 0.05rem 0; --oxpec-event-pad-full: 0 0; } .oxpec.oxpec--theme-compact.oxpec--mode-calendar .oxpec-grid__weekdays { border-bottom: 1px solid var(--oxpec-line); } .oxpec.oxpec--theme-compact.oxpec--mode-calendar .oxpec-grid__week { border-bottom: 1px solid var(--oxpec-line); } .oxpec.oxpec--theme-compact.oxpec--mode-calendar .oxpec-grid__day { padding: 0.3rem 0.35rem 0.45rem; gap: 0.15rem; } .oxpec.oxpec--theme-compact .oxpec-grid__day-number { min-width: 1.4rem; height: 1.4rem; font-size: var(--oxpec-fs-xs); } .oxpec.oxpec--theme-compact .oxpec-grid__events { gap: 0.05rem; } /* One line per event: the dot comes from the accent token, the time and the * title sit side by side. */ .oxpec.oxpec--theme-compact .oxpec-event--compact .oxpec-event__link { line-height: 1.25; } .oxpec.oxpec--theme-compact .oxpec-event--compact .oxpec-event__content { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; } .oxpec.oxpec--theme-compact .oxpec-event--compact .oxpec-event__time { flex: none; font-weight: var(--oxpec-time-font-weight, 600); color: var(--oxpec-ink-soft); } .oxpec.oxpec--theme-compact.oxpec--mode-agenda .oxpec-agenda__group { padding-bottom: 0.9rem; } .oxpec.oxpec--theme-compact.oxpec--mode-agenda .oxpec-agenda__items { gap: 0.35rem; } .oxpec.oxpec--theme-compact.oxpec--mode-agenda .oxpec-agenda__date-day { font-size: 1.2rem; } /* -------------------------------------------------------------------------- * 12. Modal * ----------------------------------------------------------------------- */ /* * The modal lives at the end of , not inside the calendar: the calendar * root is a CSS container, and a container is the containing block for its * `position: fixed` descendants. It cannot inherit the calendar's tokens, so * it is named alongside it in section 1 and carries the same theme class — * which is why it now follows the theme instead of being stuck on the * defaults. */ /* * The tooltip that carries a title too long for its month cell. It sits at the * end of for the same reason the modal does — the calendar root is a CSS * container, so a `position: fixed` child of it would be pinned to the calendar * rather than to the viewport, and a month cell clips its own overflow anyway. * * Unlike the modal it is deliberately *not* themed. A tooltip is chrome rather * than calendar content: one neutral bubble is legible over a light theme and a * dark one alike, and it never has to be told which scheme it was opened from. * * It also has to be reachable by the pointer — SC 1.4.13 asks that content * shown on hover be hoverable — so no `pointer-events: none` here, which is the * usual shortcut for a bubble like this. */ .oxpec-tip { position: fixed; z-index: 99998; max-width: min(320px, calc(100vw - 24px)); padding: 0.45rem 0.6rem; border-radius: 5px; background: #1d2327; color: #fff; font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: 1.4; text-align: left; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .oxpec-tip[hidden] { display: none; } .oxpec-modal--styled { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; color: var(--oxpec-ink); font-size: var(--oxpec-fs-md); line-height: 1.45; } .oxpec-modal[hidden] { display: none; } .oxpec-modal--styled *, .oxpec-modal--styled *::before, .oxpec-modal--styled *::after { box-sizing: border-box; } .oxpec-modal--styled :focus-visible { outline: 2px solid var(--oxpec-primary); outline-offset: 2px; border-radius: var(--oxpec-radius-sm); } /* Only the spacing differs here: in the dialog the pills sit under the title * rather than at the end of a card. */ .oxpec-modal--styled .oxpec-event__categories { margin: 0 0 0.9rem; } .oxpec-modal--styled .oxpec-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 20, 28, 0.55); backdrop-filter: blur(2px); } .oxpec-modal--styled .oxpec-modal__dialog { position: relative; width: min(34rem, 100%); max-height: min(85vh, 44rem); overflow-y: auto; padding: 1.75rem; border-radius: calc(var(--oxpec-radius) * 1.4); background: var(--oxpec-surface); box-shadow: 0 24px 60px -20px rgba(16, 24, 40, 0.45); animation: oxpec-modal-in 0.18s ease-out; } @keyframes oxpec-modal-in { from { opacity: 0; transform: translateY(8px); } } .oxpec-modal--styled .oxpec-modal__close { position: absolute; top: 0.6rem; right: 0.75rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--oxpec-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; } .oxpec-modal--styled .oxpec-modal__close:hover { background: var(--oxpec-surface-alt); color: var(--oxpec-ink); } .oxpec-modal--styled .oxpec-modal__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--oxpec-radius); margin-bottom: 1.1rem; } .oxpec-modal--styled .oxpec-modal__title { margin: 0 0 0.5rem; font-size: 1.35rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; padding-right: 2rem; } .oxpec-modal--styled .oxpec-modal__meta { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.9rem; font-size: var(--oxpec-fs-sm); color: var(--oxpec-ink-soft); } .oxpec-modal--styled .oxpec-modal__meta-item { display: flex; gap: 0.5rem; } .oxpec-modal--styled .oxpec-modal__meta-label { flex: none; min-width: 4.5rem; color: var(--oxpec-muted); font-size: var(--oxpec-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15rem; } .oxpec-modal--styled .oxpec-modal__meta-sub { display: block; margin-top: 0.1rem; font-size: var(--oxpec-fs-xs); color: var(--oxpec-muted); } .oxpec-modal--styled .oxpec-modal__excerpt { margin: 0 0 1.2rem; color: var(--oxpec-ink-soft); font-size: var(--oxpec-fs-sm); } .oxpec-modal--styled .oxpec-modal__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .oxpec-modal--styled .oxpec-modal__button { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 0.95rem; border: 1px solid var(--oxpec-line); border-radius: var(--oxpec-radius-sm); font-size: var(--oxpec-fs-sm); font-weight: 600; color: var(--oxpec-ink-soft); text-decoration: none; } .oxpec-modal--styled .oxpec-modal__button--primary { background: var(--oxpec-primary); border-color: var(--oxpec-primary); color: var(--oxpec-primary-ink); } .oxpec-modal--styled .oxpec-modal__button:hover { filter: brightness(0.96); } /* -------------------------------------------------------------------------- * 12b. Single event details block * ----------------------------------------------------------------------- */ .oxpec-single:not(.oxpec--raw) { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--oxpec-line); } .oxpec-single:not(.oxpec--raw) .oxpec-single__details { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; } .oxpec-single:not(.oxpec--raw) .oxpec-single__row { display: grid; grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr); gap: 1rem; align-items: start; } .oxpec-single:not(.oxpec--raw) .oxpec-single__label { margin: 0; font-size: var(--oxpec-fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--oxpec-muted); padding-top: 0.15rem; } .oxpec-single:not(.oxpec--raw) .oxpec-single__value { margin: 0; font-size: var(--oxpec-fs-md); color: var(--oxpec-ink); } .oxpec-single:not(.oxpec--raw) .oxpec-single__value .oxpec-event__categories { margin: 0; } .oxpec-single:not(.oxpec--raw) .oxpec-single__address, .oxpec-single:not(.oxpec--raw) .oxpec-single__map { font-size: var(--oxpec-fs-sm); color: var(--oxpec-muted); } .oxpec-single:not(.oxpec--raw) .oxpec-single__map { color: var(--oxpec-primary); } @container (max-width: 40rem) { .oxpec-single:not(.oxpec--raw) .oxpec-single__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } } /* -------------------------------------------------------------------------- * 13. Responsive * * Below the breakpoint the seven-column grid stops being readable, so it * becomes a day list. Empty days are dropped rather than shrunk. * ----------------------------------------------------------------------- */ @container (max-width: 40rem) { .oxpec:not(.oxpec--raw) .oxpec-grid__weekdays { display: none; } .oxpec:not(.oxpec--raw) .oxpec-grid__week { display: block; border-bottom: 0; } .oxpec:not(.oxpec--raw) .oxpec-grid__day { flex-direction: row; align-items: flex-start; gap: 0.75rem; min-height: 0; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--oxpec-line); } .oxpec:not(.oxpec--raw) .oxpec-grid__day--empty, .oxpec:not(.oxpec--raw) .oxpec-grid__day--outside { display: none; } .oxpec:not(.oxpec--raw) .oxpec-grid__day-header { flex: none; width: 2rem; } .oxpec:not(.oxpec--raw) .oxpec-grid__events { flex: 1 1 auto; min-width: 0; gap: 0.35rem; } .oxpec:not(.oxpec--raw) .oxpec-event--compact .oxpec-event__title { white-space: normal; } .oxpec:not(.oxpec--raw) .oxpec-agenda__group { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.85rem; } .oxpec--mode-agenda .oxpec-agenda__group { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; } .oxpec--mode-agenda .oxpec-agenda__group::before { left: 3rem; } .oxpec--mode-agenda .oxpec-agenda__group::after { left: calc(3rem - 3px); } .oxpec:not(.oxpec--raw) .oxpec__header { justify-content: center; } } /* Fallback for browsers without container queries. */ @supports not (container-type: inline-size) { @media (max-width: 640px) { .oxpec:not(.oxpec--raw) .oxpec-grid__weekdays { display: none; } .oxpec:not(.oxpec--raw) .oxpec-grid__week { display: block; } .oxpec:not(.oxpec--raw) .oxpec-grid__day--empty, .oxpec:not(.oxpec--raw) .oxpec-grid__day--outside { display: none; } .oxpec:not(.oxpec--raw) .oxpec-grid__day { flex-direction: row; min-height: 0; border-bottom: 1px solid var(--oxpec-line); } } } /* -------------------------------------------------------------------------- * 14. Motion preferences * ----------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .oxpec:not(.oxpec--raw) *, .oxpec:not(.oxpec--raw) *::before, .oxpec:not(.oxpec--raw) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }