/* Upcoming Events — layout, the two heading sizes, the event-title weight and the row-rule colour. Everything else is inherited: every TEXT colour, and the table's type scale and line-height, come from the theme's global style.css so the component restyles with the rest of the site. Three deliberate exceptions: - Headings. Global h2 (2rem) and h3 (1.75rem) are only a quarter-rem apart and both bold, which flattens the title against the label beneath it. The size, weight and line-height below restore that contrast. - Event titles. Bold, so each row has a clear heading above its teaser. - Row rules. Left colourless they fall back to currentColor — near-black, far heavier than the hairline this table wants. */ .com-upcoming-events { /* Row separators only — decorative, so no contrast minimum applies (they carry no text). Deliberately not used for any text colour. */ --com-ue-rule: hsl(0 0% 85% / 1); --com-ue-rule-head: hsl(0 0% 72% / 1); } .com-upcoming-events { width: 100%; margin-left: auto; margin-right: auto; } /* ---- Headings ------------------------------------------------------------ Size, weight and line-height are set here; colour still comes from the global h1–h6 rules. The tight line-heights matter at these sizes: the global 1.3 leaves a 66px line box on the 3rem title, which gapes when it wraps to two lines on a narrow screen. Margins are set because the global headings carry margin-top: 2.5rem, which would open a large gap between the two headings and push the first away from the block above. Targeted by class, not tag — the smaller heading renders as

normally but is promoted to

when the large heading is empty (see index.php), so these must hold at either level. */ .com-upcoming-events-title { margin: 0 0 0.3em; font-size: 3rem; font-weight: 400; line-height: 1.1; } .com-upcoming-events-subtitle { margin: 0 0 0.9rem; font-size: 1.35rem; font-weight: 600; line-height: 1.3; } /* ---- Optional media / icon --------------------------------------------- Only present when the editor turns it on. Without .has-media the wrapper is an ordinary block, so a component with no media renders exactly as before. No fixed share of the width: both columns are `flex: 1 1 auto`, so each is sized from its own content and then grows to absorb an equal part of whatever space is left. The proportions therefore follow the content rather than a percentage — an icon (capped at 260px) leaves the events list most of the row, while a wide image takes closer to half. */ .com-upcoming-events-layout.has-media { display: flex; align-items: flex-start; gap: 2rem; } /* min-width: 0 on both: a flex item otherwise refuses to shrink below its min-content width, which would let a wide image or the table's natural width push the other column out of the row. */ .com-upcoming-events-layout.has-media .com-upcoming-events-media, .com-upcoming-events-layout.has-media .com-upcoming-events-content { flex: 1 1 auto; min-width: 0; } /* The media is LAST in the DOM (content first, for screen readers), so left placement is purely visual. Reordering is safe here only because the media holds no text and no focusable elements. */ .com-upcoming-events-layout.media-left .com-upcoming-events-media { order: -1; } /* Icon only — no img rule, by design. A side image took so much width that the description column dropped to ~293px, less than half what it gets otherwise. */ .com-upcoming-events-media { /* A definite width, NOT width:100%. Now that the column is fluid rather than pinned to 50%, a percentage width would resolve against a container whose own size is being derived from this content — the flex item ends up with no intrinsic width and collapses (it measured 15px). 260px gives the column a real base size to grow from; max-width keeps it shrinking on narrow screens. Tabler icons are a 24px viewBox with stroke-width 2, and the stroke scales with the box — at this size that would render as an ~25px slab, so it is thinned. Centred in case the column grows past the icon. */ .w-icon { display: block; width: 260px; max-width: 100%; height: auto; margin-inline: auto; stroke-width: 1; } } /* ---- Table -------------------------------------------------------------- */ .com-upcoming-events-table { width: 100%; margin: 0; border-collapse: collapse; th, td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; overflow-wrap: break-word; /* The theme's global `td { border: solid black 1px }` (style.css:175) boxes in every cell. Setting border-bottom alone leaves the other three sides black, so all four are cleared before the one rule we want is drawn. Order matters: the reset has to precede border-bottom. */ border: 0; border-bottom: 1px solid var(--com-ue-rule); } thead th { padding-top: 0; padding-bottom: 0.45rem; /* Slightly stronger than the body rows, to close off the header. */ border-bottom-color: var(--com-ue-rule-head); } /* Keeps the date column tight so the event column takes the slack. */ .com-upcoming-events-col-date { width: 10rem; } /* Optional per-row thumbnail column, sitting between the date and the text so the picture and the description read as one group. Narrow and fixed — the text column should absorb any spare width, not this. */ .com-upcoming-events-col-thumb { width: 6rem; padding-left: 0.25rem; } } /* ---- Per-row thumbnails ------------------------------------------------- */ .com-upcoming-events-thumb { width: 4.75rem; height: 4.75rem; overflow: hidden; display: flex; align-items: center; justify-content: center; img { /* A square box with object-fit, unlike the side icon: event photos arrive at whatever aspect ratio editors uploaded, and a ragged column of differing heights would pull the rows out of alignment. Cropping to a square is the lesser evil here — the picture is decorative and the title carries meaning. */ width: 100%; height: 100%; object-fit: cover; display: block; } } .com-upcoming-events-thumb-icon { display: flex; width: 60%; .w-icon { width: 100%; height: auto; stroke-width: 1.25; } } /* The text column's own "Event" header: clipped, NOT display:none, so the column keeps an accessible name while "Event" shows over the thumbnails instead. A display:none is removed from the accessibility tree entirely. */ .com-upcoming-events-hdr-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Date cell ---------------------------------------------------------- */ .com-upcoming-events-day, .com-upcoming-events-time { display: block; } /* No white-space rule here on purpose. Wrapping is controlled in the date strings themselves (WNMU\Events), which bind month/day/year with non-breaking spaces — so a long date may wrap only after its weekday, and the numeric form has no spaces to break at. A nowrap here would override that and force long dates to overflow the column. */ /* ---- Event cell --------------------------------------------------------- */ /* Bold so the event name reads as the row's heading against its description. Applies to the class, not a[], so an event with no permalink renders as bold plain text rather than going light. Colour is still the theme's link colour. */ .com-upcoming-events-name { display: block; font-weight: 700; } /* Source site, shown only on rows pulled from another network site. Understated by design: it should answer "whose event is this?" for anyone who looks, without competing with the event name or the teaser. Dimmed with opacity rather than a grey colour value. That keeps the component's inherit-all-text-colour policy (see the header comment) — the label stays a lightened version of whatever the theme sets, so it still works if this ever sits in a section with a dark background, where a fixed grey would fail. content-and-image's .kicker mutes the same way. Don't dim it further without checking the arithmetic. Inherited black composites against the background, so the ratio is fixed by the opacity: 0.6 -> #666 5.74:1 on white, 5.52:1 on #f0f0f0 <- set here 0.55 -> #737 4.74:1 on white, 4.61:1 on #f0f0f0 <- actual AA floor 0.5 -> #808 3.95:1 on white FAILS WCAG 1.4.3 0.6 is chosen over the 0.55 floor to leave room for a section with a light grey background. Text this size gets no relaxed threshold — the 3:1 large-text allowance starts at 24px, or 18.66px bold. Sentence case, NOT the uppercase eyebrow used by dept-contact's dt. That idiom suits short labels ("PHONE"); these are proper nouns up to 35 characters, and uppercasing "Community and Workforce Development" makes it both wider and harder to read — the opposite of understated. */ .com-upcoming-events-site { display: block; margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.3; opacity: 0.6; } .com-upcoming-events-desc { margin: 0.2rem 0 0; } /* Proximity does the grouping. Tight to the title above, roomier before the teaser below, so the label reads as part of the event's name rather than as the first line of its description. This is what makes it distinctive without any decoration; without it, equal gaps leave the label floating between two things it could equally belong to. */ .com-upcoming-events-site + .com-upcoming-events-desc { margin-top: 0.4rem; } /* ---- Empty state -------------------------------------------------------- */ .com-upcoming-events-empty { margin: 0; } /* ---- All-events button -------------------------------------------------- Modelled on .com-info-board-cta (info-board/style.css:222), the only filled button inside editor-components and the only one reading a brand token. This theme has no shared button class — the global stylesheet carries no generic button rules at all, and the four styles that exist (.fpi-btn and modifiers, .com-info-board-cta, .com-hero-links-link, plus two hardcoded #0066cc one-offs) are unconnected. Building a shared one would mean touching four other components, so this stays namespaced like every other component's styles. Two deliberate departures from the info-board copy: - A wrapper

carries the top margin. The button is inline-block, so a margin on it alone would not collapse predictably against the table's last hairline, and the extra element gives the margin somewhere to live without affecting the button's own hit area. - A :focus-visible ring. .com-info-board-cta has no focus style whatsoever, which is a real keyboard-accessibility gap; it should not be propagated just because this is a copy. The ring is drawn with box-shadow rather than outline so it follows the 8px radius. */ /* The wrapper also carries the alignment, set by the editor. text-align is what moves it, which works precisely because the button is inline-block — no margin arithmetic, and it behaves the same under the table and under the empty state. Class names follow the media-left/media-right precedent at :80: bare, scoped by the compound selector rather than by their own prefix. `cta-left` needs no rule, since left is the inherited default. */ .com-upcoming-events-cta-wrap { margin: 1.25rem 0 0; } .com-upcoming-events-cta-wrap.cta-center { text-align: center; } .com-upcoming-events-cta-wrap.cta-right { text-align: right; } .com-upcoming-events-cta { display: inline-block; padding: 0.62rem 1.1rem; background: var(--color-primary-purple); color: hsl(0 0% 100% / 1); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: background ease-out 200ms; } .com-upcoming-events-cta:hover, .com-upcoming-events-cta:focus-visible { /* Same hover value as info-board's, kept in step deliberately. */ background: hsl(269deg 53% 22% / 1); color: hsl(0 0% 100% / 1); } .com-upcoming-events-cta:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(0 0% 100% / 1), 0 0 0 4px var(--color-primary-purple); } /* ---- Media drops out before the type does ------------------------------- Hidden on small screens, as specified. The 1000px threshold is inherited from the earlier fixed 50/50 layout, where it was necessary: at a 900px viewport the events list got 47% of the row and its event column came out at only 206px. The columns are content-sized now, so that constraint is gone — measured with the hide rule defeated, the event column is 481px at a 900px viewport and still 367px at 760px, with the icon shrinking to 150px and 124px respectively. The split would therefore hold well below 1000px. Kept at 1000px deliberately rather than lowered on my own initiative: it only makes the media appear on fewer screens, which is safe, and "hidden on small screens" is still satisfied. Drop it toward the 700px type breakpoint below if tablets should show the media too. Viewport-based, matching the rest of the theme, so it is an approximation of the component's own width — narrower page templates (the Info page with a Table of Contents) give the component less room at the same viewport. display: none also drops it from the accessibility tree, which is right — it is decorative. */ @media (width <= 1000px) { .com-upcoming-events-layout.has-media { display: block; } .com-upcoming-events-media { display: none; } } /* ---- Narrow screens ---------------------------------------------------- The table keeps its real semantics at every width; only the date column, cell padding and the heading sizes shrink. */ @media (width <= 700px) { .com-upcoming-events-title { font-size: 2.1rem; } .com-upcoming-events-subtitle { font-size: 1.15rem; } .com-upcoming-events-table { th, td { padding-right: 0.6rem; } .com-upcoming-events-col-date { width: 6.5rem; } } /* Drop the weekday, leaving "Aug. 17, 2026". It is the least load-bearing part of the date and the first thing to force a wrap in this column. The trailing space is inside the span (see index.php), so nothing is orphaned, and the