/* ============================================================================ RMBL Events — The Events Calendar in the RMBL design system. Every colour here is an Elementor kit variable and every face a kit typography variable (memory `kit-brand-globals`, CLAUDE.md §7): no brand value is written as a literal, so a kit change reaches the calendar. The kit map: --e-global-color-primary #EF4123 red: rules, fills WITHOUT text --e-global-color-c2330f7 #C2330F red fill CARRYING text < 24px (buttons) --e-global-color-d1035af #D0350F red TEXT < 24px (links, datelines) --e-global-color-1a1b1ee #1A1B1E headings on light --e-global-color-text #26272B body text --e-global-color-66676bb #66676B muted text < 24px --e-global-color-77787b5 #77787B Bodoni numerals 24px+, icons --e-global-color-e8e6dff #E8E6DF hairline on light --e-global-color-9663063 #FFF3D3 cream --e-global-color-faf7f00 #FAF7F0 paper --e-global-color-058b7b6 #002E6D navy: focus ring, link hover --e-global-color-8483da4 #FFFFFF TEC ships its own design language — Helvetica Neue, #334AFF blue, 4px radii. Each override below names the rule it is satisfying. Rules cited are files in docs/rmbl-design-system-handoff/rules/. ============================================================================ */ /* --------------------------------------------------------------------------- TOKEN MAP — the primary mechanism, and the one to reach for first. The Events Calendar has its own design-token layer (`--tec-color-*`). Mapping it onto the kit once here colours everything TEC paints from those tokens, including markup this stylesheet never names. The per-selector overrides further down are the EXCEPTIONS — the places TEC hard-codes a value instead of reading its own token. Add to this block before adding another selector. Discovered the hard way: the first cut of this file chased selectors one at a time and an audit still found TEC blue and rgb(20,24,39) surviving in a dozen places (tools/playwright/events-audit.mjs). The token layer was the fix. --------------------------------------------------------------------------- */ .tribe-common, .tribe-events, .tribe-events-single, .rmbl-events-page { /* text */ --tec-color-text-primary: var(--e-global-color-text); --tec-color-text-primary-light: var(--e-global-color-66676bb); --tec-color-text-secondary: var(--e-global-color-66676bb); --tec-color-text-disabled: var(--e-global-color-b9b8b3, #b9b8b3); --tec-color-text-events-title: var(--e-global-color-1a1b1ee); --tec-color-text-event-date: var(--e-global-color-d1035af); --tec-color-text-secondary-event-date: var(--e-global-color-66676bb); /* icons */ --tec-color-icon-primary: var(--e-global-color-1a1b1ee); --tec-color-icon-primary-alt: var(--e-global-color-77787b5); --tec-color-icon-secondary: var(--e-global-color-77787b5); --tec-color-icon-active: var(--e-global-color-1a1b1ee); --tec-color-icon-focus: var(--e-global-color-058b7b6); --tec-color-icon-error: var(--e-global-color-c2330f7); --tec-color-event-icon: var(--e-global-color-1a1b1ee); --tec-color-event-icon-hover: var(--e-global-color-d1035af); /* accents — TEC's #334aff blue becomes the brand red. rules/01: a fill carrying text below 24px is #C2330F; a red fill with no text is #EF4123. */ --tec-color-accent-primary: var(--e-global-color-c2330f7); --tec-color-accent-primary-hover: var(--e-global-color-d1035af); --tec-color-accent-primary-active: var(--e-global-color-c2330f7); --tec-color-accent-primary-background: var(--e-global-color-faf7f00); --tec-color-accent-secondary: var(--e-global-color-1a1b1ee); --tec-color-accent-secondary-hover: var(--e-global-color-1a1b1ee); --tec-color-accent-secondary-active: var(--e-global-color-1a1b1ee); --tec-color-accent-secondary-background: var(--e-global-color-faf7f00); /* links */ --tec-color-link-primary: var(--e-global-color-1a1b1ee); --tec-color-link-accent: var(--e-global-color-d1035af); --tec-color-link-accent-hover: var(--e-global-color-058b7b6); /* borders — rules/03: the hairline on light is #E8E6DF */ --tec-color-border-default: var(--e-global-color-e8e6dff); --tec-color-border-secondary: var(--e-global-color-e8e6dff); --tec-color-border-tertiary: var(--e-global-color-66676bb); --tec-color-border-active: var(--e-global-color-primary); /* backgrounds */ --tec-color-background: var(--e-global-color-8483da4); --tec-color-background-secondary: var(--e-global-color-faf7f00); --tec-color-background-events: var(--e-global-color-8483da4); } .tribe-common, .tribe-events, .tribe-common *, .tribe-events * { box-sizing: border-box; } /* --- Faces and sizes (rules/02) ------------------------------------------- TEC sets Helvetica Neue on essentially everything via .tribe-common-*. The system's text face is Futura; display (Bodoni) is reserved for the rungs named below. */ /* `.tribe-events-single` is NOT inside `.tribe-common` — verified — so it needs naming separately or the whole single-event page renders in TEC's Helvetica Neue. That was invisible in screenshots on this Linux box, where Helvetica is not installed and the fallback resembles Futura; on a Mac it would render Helvetica. */ .tribe-events-single, .tribe-events-single *, .tribe-common, .tribe-events, .tribe-common .tribe-common-b1, .tribe-common .tribe-common-b2, .tribe-common .tribe-common-b3, .tribe-common .tribe-common-h1, .tribe-common .tribe-common-h2, .tribe-common .tribe-common-h3, .tribe-common .tribe-common-h4, .tribe-common .tribe-common-h5, .tribe-common .tribe-common-h6, .tribe-common .tribe-common-h7, .tribe-common .tribe-common-h8, .tribe-common button, .tribe-common input, .tribe-common select { font-family: var(--e-global-typography-text-font-family), Jost, "Century Gothic", sans-serif; } /* THE BRAND IS SQUARE (rules/03 — radius 0 on images, buttons, cards, inputs, panels). TEC uses 4px in a dozen places. */ .tribe-common .tribe-common-c-btn, .tribe-common .tribe-common-form-control-text__input, .tribe-common input, .tribe-common select, .tribe-common button, .tribe-events .tribe-events-c-search__button, .tribe-events .tribe-events-c-view-selector__button, .tribe-events .tribe-events-c-subscribe-dropdown__button, .tribe-events .tribe-events-c-subscribe-dropdown__content, .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-events-calendar-month__day-cell, .tribe-events .tribe-events-calendar-month__multiday-event-bar-inner { border-radius: 0 !important; } /* --- Focus (rules/07, binding): 2px solid navy at 3px offset, an outline, on every interactive element. Never a shadow. ------------------------------- */ .tribe-common a:focus-visible, .tribe-common button:focus-visible, .tribe-common input:focus-visible, .tribe-common select:focus-visible, .tribe-events a:focus-visible, .tribe-events button:focus-visible { outline: 2px solid var(--e-global-color-058b7b6) !important; outline-offset: 3px !important; box-shadow: none !important; } /* --- Buttons (rules/03) --------------------------------------------------- md metric: 46px min-height, 16px, 13/28 pad, 600, lowercase, .02em, radius 0. Primary fill #C2330F with a white label; hover goes to cream with a dark label; active returns to #C2330F with the medium 135° shadow. */ .tribe-events .tribe-events-c-search__button, .tribe-events .tribe-events-c-search__button:not(:disabled) { background-color: var(--e-global-color-c2330f7) !important; color: var(--e-global-color-8483da4) !important; border: 0 !important; font-weight: 600 !important; font-size: 16px !important; line-height: 20px !important; letter-spacing: .02em !important; text-transform: none !important; min-height: 46px !important; padding: 13px 28px !important; transition: background-color 180ms cubic-bezier(.3, 0, .2, 1), color 180ms cubic-bezier(.3, 0, .2, 1); } .tribe-events .tribe-events-c-search__button:hover { background-color: var(--e-global-color-9663063) !important; color: var(--e-global-color-1a1b1ee) !important; } .tribe-events .tribe-events-c-search__button:active { background-color: var(--e-global-color-c2330f7) !important; color: var(--e-global-color-8483da4) !important; box-shadow: 5px 5px 10px rgba(0, 0, 0, .20) !important; } /* Outline variant (rules/03): transparent, 1px border, label in the border colour; hover fills with the border colour and flips the label. Used for the two secondary controls — the view selector and subscribe. An outline button subtracts its border per side so it lands on the same 46px. */ .tribe-events .tribe-events-c-view-selector__button, .tribe-events .tribe-events-c-subscribe-dropdown__button { background-color: transparent !important; border: 1px solid var(--e-global-color-1a1b1ee) !important; color: var(--e-global-color-1a1b1ee) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 20px !important; letter-spacing: .02em !important; text-transform: none !important; min-height: 46px !important; padding: 12px 27px !important; transition: background-color 180ms cubic-bezier(.3, 0, .2, 1), color 180ms cubic-bezier(.3, 0, .2, 1); } .tribe-events .tribe-events-c-view-selector__button:hover, .tribe-events .tribe-events-c-subscribe-dropdown__button:hover { background-color: var(--e-global-color-1a1b1ee) !important; color: var(--e-global-color-8483da4) !important; } /* Icon colour. `fill: currentColor` does NOT work here even with !important and a winning selector: TEC sets a `color` further up the icon's own chain, so currentColor resolves to its blue and the fill comes out blue while the rule is "applied". The token is therefore named outright, and TEC's own `--tec-color-icon-active` is set alongside so anything it paints follows too. */ .tribe-events .tribe-events-c-view-selector__button, .tribe-events .tribe-events-c-events-bar__search-button, .tribe-events .tribe-events-c-subscribe-dropdown__button { --tec-color-icon-active: var(--e-global-color-1a1b1ee); --tec-color-icon-primary: var(--e-global-color-1a1b1ee); } .tribe-events .tribe-events-c-view-selector__button svg, .tribe-events .tribe-events-c-view-selector__button svg *, .tribe-events .tribe-events-c-events-bar__search-button svg, .tribe-events .tribe-events-c-events-bar__search-button svg *, .tribe-events .tribe-events-c-subscribe-dropdown__button svg, .tribe-events .tribe-events-c-subscribe-dropdown__button svg * { fill: var(--e-global-color-1a1b1ee) !important; } .tribe-events .tribe-events-c-view-selector__button:hover svg *, .tribe-events .tribe-events-c-events-bar__search-button:hover svg *, .tribe-events .tribe-events-c-subscribe-dropdown__button:hover svg * { fill: var(--e-global-color-8483da4) !important; } /* The search-toggle is the same outline control as the view selector. */ .tribe-events .tribe-events-c-events-bar__search-button { background-color: transparent !important; border: 1px solid var(--e-global-color-1a1b1ee) !important; border-radius: 0 !important; color: var(--e-global-color-1a1b1ee) !important; min-height: 46px !important; } .tribe-events .tribe-events-c-events-bar__search-button:hover { background-color: var(--e-global-color-1a1b1ee) !important; color: var(--e-global-color-8483da4) !important; } /* The subscribe dropdown panel: a panel, so it takes a hairline and the medium shadow, not TEC's rounded card. */ .tribe-events .tribe-events-c-subscribe-dropdown__list { border: 1px solid var(--e-global-color-e8e6dff) !important; border-radius: 0 !important; box-shadow: 5px 5px 10px rgba(0, 0, 0, .20) !important; background: var(--e-global-color-8483da4) !important; } .tribe-events .tribe-events-c-subscribe-dropdown__list-item a { font-size: 15px !important; color: var(--e-global-color-text) !important; text-decoration: none !important; } .tribe-events .tribe-events-c-subscribe-dropdown__list-item:hover { background: var(--e-global-color-faf7f00) !important; } .tribe-events .tribe-events-c-subscribe-dropdown__list-item a:hover { color: var(--e-global-color-d1035af) !important; } /* --- Fields (rules/03): 46px, 16px text, 12/16 pad, 1px #B9B8B3, radius 0, white fill. Focus: red border plus a 2px red glow. --------------------- */ .tribe-events .tribe-common-form-control-text__input, .tribe-events input[type="text"], .tribe-events input[type="search"] { border: 1px solid #b9b8b3 !important; /* --rmbl-n-400: input borders. Not a brand colour; no kit slot exists for it. */ border-radius: 0 !important; min-height: 46px !important; font-size: 16px !important; padding: 12px 16px 12px 44px !important; background: var(--e-global-color-8483da4) !important; } .tribe-events .tribe-common-form-control-text__input:focus { border-color: var(--e-global-color-primary) !important; box-shadow: 0 0 0 2px rgba(239, 65, 35, .25) !important; outline: none !important; } .tribe-events .tribe-events-c-events-bar__search-container, .tribe-events .tribe-events-c-events-bar { border: 0 !important; background: transparent !important; box-shadow: none !important; } /* --- The event row: it is the SITE'S card, not a new one ------------------- These are the exact rungs the Story Card uses (.rmbl-hubcard__d / __t / __x in rmbl-article-template), so an event and a story read identically. §12 records why that matters: the print-newsletter page shipped its own type at a different size and that was the defect, not the labels. */ /* Dateline — the __d rung: 12px, 600, .12em, uppercase, #D0350F. */ .tribe-events .tribe-events-calendar-list__event-datetime, .tribe-events .tribe-events-calendar-list__event-datetime *, .tribe-events .tribe-events-calendar-day__event-datetime, .tribe-events .tribe-events-calendar-photo__event-datetime, .tribe-events .tribe-events-calendar-month__calendar-event-datetime { font-weight: 600 !important; font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--e-global-color-d1035af) !important; } /* Title — the __t rung: 20px, 600, 1.3, #1A1B1E, hover #D0350F, no underline. The rest colour matters: "the one sanctioned red-on-hover text" (rules/01) is a card title going #1A1B1E -> #D0350F. These titles arrive red at REST because rmbl-article-template sets `a:not(.elementor-button){color:#d0350f!important}` site-wide, which reaches inside the shortcode — the same bleed that turned the print-newsletter card titles red (§12). Countered here at matching specificity rather than by weakening the site-wide rule, which other pages rely on. */ .tribe-events .tribe-events-calendar-list__event-title, .tribe-events .tribe-events-calendar-day__event-title, .tribe-events .tribe-events-calendar-photo__event-title, .tribe-events .tribe-events-calendar-month__calendar-event-title, .tribe-events .tribe-events-calendar-month__multiday-event-bar-title { font-weight: 600 !important; font-size: 20px !important; line-height: 1.3 !important; margin: 0 0 6px !important; } .tribe-events .tribe-events-calendar-list__event-title a, .tribe-events .tribe-events-calendar-day__event-title a, .tribe-events .tribe-events-calendar-photo__event-title a, .tribe-events .tribe-events-calendar-month__calendar-event-title a, .elementor-widget-theme-post-content .tribe-events .tribe-events-calendar-list__event-title a, .rmbl-interior-body .tribe-events .tribe-events-calendar-list__event-title a:not(.elementor-button) { color: var(--e-global-color-1a1b1ee) !important; text-decoration: none !important; transition: color 180ms cubic-bezier(.3, 0, .2, 1); } .tribe-events .tribe-events-calendar-list__event-title a:hover, .tribe-events .tribe-events-calendar-day__event-title a:hover, .tribe-events .tribe-events-calendar-photo__event-title a:hover, .tribe-events .tribe-events-calendar-month__calendar-event-title a:hover, .elementor-widget-theme-post-content .tribe-events .tribe-events-calendar-list__event-title a:hover, .rmbl-interior-body .tribe-events .tribe-events-calendar-list__event-title a:not(.elementor-button):hover { color: var(--e-global-color-d1035af) !important; } /* Support copy — the __x rung: 15px, 1.5, #66676B. 15px is the bounded dense step and a list row is a card, which is where rules/02 permits it. */ .tribe-events .tribe-events-calendar-list__event-description, .tribe-events .tribe-events-calendar-list__event-description p, .tribe-events .tribe-events-calendar-day__event-description p, .tribe-events .tribe-events-calendar-photo__event-description p, .tribe-events .tribe-events-calendar-list__event-venue, .tribe-events .tribe-events-calendar-list__event-venue * { font-size: 15px !important; line-height: 1.5 !important; color: var(--e-global-color-66676bb) !important; margin: 0 !important; } .tribe-events .tribe-events-calendar-list__event-description p + p { margin-top: 8px !important; } .tribe-events .tribe-events-calendar-list__event-venue-title { font-weight: 600 !important; margin-right: .35em !important; } /* TEC zeroes the font-size on the
to kill inline gaps and restores it on the children, so the whitespace between the venue name and its address collapses to nothing and it renders "RMBL 365615 Teocalli Ave." (measured: the title's right edge and the address's left edge are the same pixel). The margin above restores the gap; the comma is the separator this reads best with. */ .tribe-events .tribe-events-calendar-list__event-venue-title:has(+ .tribe-events-calendar-list__event-venue-address)::after { content: ","; margin-left: -.2em; } /* The excerpt holds no links of its own; any that slip through are body links. */ .tribe-events .tribe-events-calendar-list__event-description a { color: var(--e-global-color-d1035af) !important; } /* Cost: the system has no price rung, so it takes the support rung with the dateline's weight — enough to read as a fact, not as a heading. */ .tribe-events .tribe-events-calendar-list__event-cost, .tribe-events .tribe-events-calendar-day__event-cost { font-size: 15px !important; font-weight: 600 !important; color: var(--e-global-color-text) !important; } /* The date rail. rules/01: Bodoni numerals at 24px and above are #77787B; the weekday label is a marker, so it takes the dateline's shape in muted grey. */ .tribe-events .tribe-events-calendar-list__event-date-tag-daynum { font-family: var(--e-global-typography-primary-font-family), "Bodoni Moda", Didot, serif !important; font-weight: 400 !important; font-size: 40px !important; line-height: 1 !important; color: var(--e-global-color-77787b5) !important; background: transparent !important; } .tribe-events .tribe-events-calendar-list__event-date-tag-weekday { font-weight: 600 !important; font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--e-global-color-66676bb) !important; } /* Month separator: the h6 rung (18px, 600, uppercase, .08em) over a hairline. */ .tribe-events .tribe-events-calendar-list__month-separator { border-top: 1px solid var(--e-global-color-e8e6dff) !important; padding-top: 16px !important; margin-top: 32px !important; } .tribe-events .tribe-events-calendar-list__month-separator-text { font-weight: 600 !important; font-size: 18px !important; letter-spacing: .02em !important; text-transform: none !important; /* an H3: Title Case as typed by TEC, not capitals (owner 2026-10-06) */ color: var(--e-global-color-1a1b1ee) !important; background: transparent !important; } .tribe-events .tribe-events-calendar-list__month-separator::after { display: none !important; } /* Rows: a card has no border and no fill (rules/03) — the hairline separating one row from the next is the content divider, not a box. */ .tribe-events .tribe-events-calendar-list__event-row { border: 0 !important; padding: 24px 0 !important; } .tribe-events .tribe-events-calendar-list__event-row + .tribe-events-calendar-list__event-row { border-top: 1px solid var(--e-global-color-e8e6dff) !important; } /* --- Top bar and navigation ---------------------------------------------- */ .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-events-c-top-bar__datepicker-time { font-family: var(--e-global-typography-primary-font-family), "Bodoni Moda", Didot, serif !important; font-weight: 400 !important; font-size: 28px !important; color: var(--e-global-color-1a1b1ee) !important; text-transform: none !important; } .tribe-events .tribe-events-c-top-bar__today-button { font-weight: 600 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: .02em !important; border: 1px solid var(--e-global-color-e8e6dff) !important; border-radius: 0 !important; color: var(--e-global-color-text) !important; min-height: 38px !important; padding: 10px 20px !important; } .tribe-events .tribe-events-c-top-bar__today-button:hover { border-color: var(--e-global-color-primary) !important; color: var(--e-global-color-d1035af) !important; } .tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next, .tribe-events .tribe-events-c-nav__prev a, .tribe-events .tribe-events-c-nav__next a { font-weight: 600 !important; font-size: 15px !important; text-transform: none !important; color: var(--e-global-color-d1035af) !important; text-decoration: none !important; } .tribe-events .tribe-events-c-nav__prev:hover, .tribe-events .tribe-events-c-nav__next:hover { color: var(--e-global-color-058b7b6) !important; } .tribe-events .tribe-events-c-nav { border-top: 1px solid var(--e-global-color-e8e6dff) !important; } .tribe-events .tribe-events-c-nav__list { padding-top: 24px !important; } /* --- Month grid ----------------------------------------------------------- */ .tribe-events .tribe-events-calendar-month__day, .tribe-events .tribe-events-calendar-month__header-column { border-color: var(--e-global-color-e8e6dff) !important; } .tribe-events .tribe-events-calendar-month__header-column-title { font-weight: 600 !important; font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--e-global-color-66676bb) !important; } .tribe-events .tribe-events-calendar-month__day-date-daynum { font-family: var(--e-global-typography-primary-font-family), "Bodoni Moda", Didot, serif !important; font-weight: 400 !important; font-size: 24px !important; color: var(--e-global-color-77787b5) !important; } /* Today: a red fill with NO text is #EF4123 (rules/01) — here it is the 2px open rule under the day number, which is the system's own marker for a selected/open state. */ .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum { color: var(--e-global-color-1a1b1ee) !important; border-bottom: 2px solid var(--e-global-color-primary) !important; display: inline-block; padding-bottom: 2px; } .tribe-events .tribe-events-calendar-month__multiday-event-bar-inner { background: var(--e-global-color-9663063) !important; /* cream, carrying #1A1B1E text */ border: 0 !important; } .tribe-events .tribe-events-calendar-month__multiday-event-bar-title { color: var(--e-global-color-1a1b1ee) !important; font-size: 15px !important; } .tribe-events .tribe-events-calendar-month__calendar-event-title { font-size: 15px !important; } .tribe-events .tribe-events-calendar-month__calendar-event-datetime { font-size: 11px !important; } /* --- Category pills (rules/03: pills are 14px, 7/20 pad, radius-pill; the selected state substitutes a #C2330F fill for the border) ---------------- */ .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper + .tribe-events-calendar-list__event-details, .tribe-events .tribe-events-c-small-cta__link { color: var(--e-global-color-d1035af) !important; } /* --- Archive band: the cream plain-band hero (rules/06, one of the four sanctioned hero variants), so /events/ announces itself like every other page. Full-bleed band, content held to the 1440 column. ------------------ */ .rmbl-ev-band { background: var(--e-global-color-9663063); /* Full-bleed by position, not by negative margins: TEC's wrapper is itself inset from the viewport (measured: x=132 inside a 1176px parent at 1440), so `margin-left: calc(50% - 50vw)` resolved against the wrong box and pushed the band 132px off the right edge. A centred transform is independent of the parent's offset. */ /* `width: 100vw` INCLUDES the scrollbar, so on a scrolling page it is ~2px wider than the layout viewport and widens it — measured: /events/ reported innerWidth 392 at a 390 viewport while every untouched page reported 390. The band's parent is , which is already the full width, so 100% bleeds correctly and has no scrollbar term in it. */ width: 100%; padding: 64px 0; /* No bottom margin: TEC's own header spacing below already lands on the system's 96px section pad, and adding to it opened a ~150px void. */ margin-bottom: 0; } .rmbl-ev-band__inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 50px); } /* On a category archive TEC prints its own

as well, so the page carried the name twice. The band is the page's heading; TEC's is hidden from sight but left in the document for assistive tech (it is the same string, so nothing is lost). */ /* Scoped to "a band is actually present as my previous sibling", so if the band ever fails to insert, TEC's own title stays visible rather than the page losing its heading altogether — which is exactly what happened while the marker was wrong. */ .rmbl-ev-band + .tribe-events-view .tribe-events-header__title { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } .rmbl-ev-band__lead { font-family: var(--e-global-typography-text-font-family), Jost, sans-serif; font-size: 18px; line-height: 1.55; color: var(--e-global-color-text); max-width: 830px; margin: 16px auto 0; text-align: center; /* rules/06: kicker, title, lead and CTA are centred as a group */ } .rmbl-ev-band__h { font-family: var(--e-global-typography-primary-font-family), "Bodoni Moda", Didot, serif; font-weight: 400; font-size: clamp(44px, 6.4vw, 92px); line-height: 1.02; text-transform: none; color: var(--e-global-color-1a1b1ee); margin: 0; text-align: center; /* rules/06: hero content is centred at every breakpoint */ } /* --- Single event --------------------------------------------------------- */ /* The reading measure is 830px. Written when PAGES aligned it LEFT (the 2026-09-08 split); on 2026-10-05 the owner centred it on pages too (docs/design-system-notes.md §0d). This single is NOT yet converted: its title, schedule and venue/organizer meta all run the full width, so centring the description alone would misalign it. Centring the event single is a follow-up that has to move the whole template together. */ .tribe-events-single .tribe-events-single-event-description, .tribe-events-single .tribe-events-single-event-description p, .tribe-events-single .tribe-events-single-event-description ul, .tribe-events-single .tribe-events-single-event-description ol { max-width: 830px; margin-left: 0; margin-right: auto; } .tribe-events-single .tribe-events-single-event-description p { font-size: 18px !important; line-height: 1.55 !important; color: var(--e-global-color-text) !important; margin: 0 0 20px !important; } .tribe-events-single .tribe-events-single-event-title { font-family: var(--e-global-typography-primary-font-family), "Bodoni Moda", Didot, serif !important; font-weight: 400 !important; font-size: clamp(44px, 6.4vw, 92px) !important; line-height: 1.02 !important; text-transform: none !important; color: var(--e-global-color-1a1b1ee) !important; } .tribe-events-single .tribe-events-schedule { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 32px !important; } .tribe-events-single .tribe-events-schedule h2, .tribe-events-single .tribe-events-schedule .tribe-events-schedule__datetime { font-family: var(--e-global-typography-text-font-family), Jost, sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--e-global-color-d1035af) !important; } /* The meta columns' labels are markers, not headings. */ .tribe-events-single .tribe-events-event-meta .tribe-events-single-section-title, .tribe-events-single .tribe-events-meta-group .tribe-events-single-section-title { font-family: var(--e-global-typography-text-font-family), Jost, sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--e-global-color-66676bb) !important; margin: 0 0 12px !important; } .tribe-events-single .tribe-events-event-meta { background: transparent !important; border: 0 !important; border-top: 1px solid var(--e-global-color-e8e6dff) !important; padding-top: 32px !important; } .tribe-events-single .tribe-events-event-meta dt { font-weight: 600 !important; font-size: 15px !important; } .tribe-events-single .tribe-events-event-meta dd { font-size: 15px !important; color: var(--e-global-color-66676bb) !important; } .tribe-events-single .tribe-events-back a, .tribe-events-single .tribe-events-back a:hover { color: var(--e-global-color-d1035af) !important; } /* "This event has already taken place." — a note, not an alert. rules/01 gives cream as the success/neutral wash; the red-100 wash is reserved for errors, and a past event is not an error. */ .tribe-events-single .tribe-events-notices, .tribe-events .tribe-events-notices { background: var(--e-global-color-9663063) !important; border: 0 !important; border-left: 4px solid var(--e-global-color-primary) !important; border-radius: 0 !important; color: var(--e-global-color-1a1b1ee) !important; box-shadow: none !important; padding: 16px 20px !important; max-width: 830px; } .tribe-events-single .tribe-events-notices ul, .tribe-events .tribe-events-notices ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .tribe-events-single .tribe-events-notices li { font-size: 16px !important; } /* The "add to calendar" control on a single event — the outline metric. */ .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button-text { letter-spacing: .02em !important; } /* --- Embedded in a page (the [tribe_events] shortcode) -------------------- TEC centres its own 1176px container. The page it sits on is left-aligned to the content column, so a centred calendar reads as a misalignment against the intro paragraph directly above it. Hold the site's existing wide step (1160px, the same value .rmbl-wide uses) and align it LEFT. */ .rmbl-events-page .tribe-events, .rmbl-events-page .tribe-common--breakpoint-medium.tribe-events { max-width: 1160px !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .rmbl-events-page .tribe-events-view--shortcode { padding: 0 !important; } /* An event description in a list row must not run the full 1160px. */ .rmbl-events-page .tribe-events-calendar-list__event-description { max-width: 830px; } /* --- The "browse by" chip row on the embedded page ------------------------ The chips themselves are the site's own .rmbl-hubchip (rmbl-article-template), which already carries the kit type, the hairline border, the red hover border and the focus ring. Only the ROW is styled here — the component is reused, not reinvented (the lesson §12 records from the print-newsletter cards). */ .rmbl-evchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; } .rmbl-evchips__l { font-family: var(--e-global-typography-text-font-family), Jost, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--e-global-color-66676bb); margin-right: 8px; } /* .rmbl-hubchip's shipped rules target `.rmbl-hubchip a`, because there it wraps an Elementor widget. Here the chip IS the anchor, so the same values are applied to the element itself — same numbers, no new ones. */ a.rmbl-hubchip, .elementor-widget-theme-post-content a.rmbl-hubchip, .rmbl-interior-body a.rmbl-hubchip:not(.elementor-button) { display: inline-block; font-family: var(--e-global-typography-text-font-family), Jost, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2; border: 1px solid var(--e-global-color-e8e6dff); padding: 9px 16px; color: var(--e-global-color-1a1b1ee) !important; text-decoration: none !important; transition: border-color 180ms cubic-bezier(.3, 0, .2, 1); } a.rmbl-hubchip:hover, .elementor-widget-theme-post-content a.rmbl-hubchip:hover, .rmbl-interior-body a.rmbl-hubchip:not(.elementor-button):hover { border-color: var(--e-global-color-primary); } a.rmbl-hubchip:focus-visible { outline: 2px solid var(--e-global-color-058b7b6); outline-offset: 3px; } /* --- Reduced motion (rules/04) ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tribe-events *, .tribe-common * { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* --- Breakpoints (rules/06: 768 is the tablet step, 390 the phone reference). The band loses half its padding; titles hold their rung. ----- */ @media (max-width: 768px) { .rmbl-ev-band { padding: 40px 0; } .rmbl-events-page .tribe-events { max-width: 100% !important; } /* Below 768 TEC collapses the events bar to icon-only toggles. The md button's 13/28 padding is wider than the whole control there, which squeezed the view selector to an empty 37px box with its label clipped out of sight. These controls keep the 46px touch height (rules/06: touch targets) and drop to icon padding; only the two that genuinely go full-width do so. */ .tribe-events .tribe-events-c-view-selector__button, .tribe-events .tribe-events-c-events-bar__search-button { padding: 10px 12px !important; min-width: 46px !important; width: auto !important; } .tribe-events .tribe-events-c-search__button, .tribe-events .tribe-events-c-subscribe-dropdown__button { width: 100% !important; } .rmbl-evchips { gap: 6px; } } /* The empty state. rules/11 permits deriving a component the system determines but never names; this is the paper surface with a hairline and the muted text rung. DERIVED: empty state — --rmbl-paper ground, hairline per rules/03, body-sm muted per rules/01. Pending ratification. */ .tribe-events .tribe-events-c-messages { background: transparent !important; border: 0 !important; padding: 0 !important; list-style: none !important; } .tribe-events .tribe-events-c-messages__message { background: var(--e-global-color-faf7f00) !important; border: 1px solid var(--e-global-color-e8e6dff) !important; border-radius: 0 !important; color: var(--e-global-color-66676bb) !important; font-size: 16px !important; padding: 24px !important; list-style: none !important; } .tribe-events .tribe-events-c-messages__message-list-item { list-style: none !important; } .tribe-events .tribe-events-c-messages__message-list-item-icon { display: none !important; } /* Breadcrumb on a category archive — body links are #D0350F, hover navy (rules/01). */ .tribe-events .tribe-events-header__breadcrumbs a, .tribe-events .tribe-events-c-breadcrumbs__list-item a, .tribe-events .tribe-events-c-breadcrumbs__list-item-link { color: var(--e-global-color-d1035af) !important; text-decoration: none !important; } .tribe-events .tribe-events-header__breadcrumbs a:hover, .tribe-events .tribe-events-c-breadcrumbs__list-item-link:hover { color: var(--e-global-color-058b7b6) !important; text-decoration: underline !important; } .tribe-events .tribe-events-c-breadcrumbs__list-item, .tribe-events .tribe-events-header__breadcrumbs { font-size: 15px !important; color: var(--e-global-color-66676bb) !important; } /* ===================================================================== Audit fixes, 2026-09-22 — found by tools/playwright/events-audit.mjs, which checks the closed sets in rules/01–03 at 1440 / 768 / 390. Screenshots had not caught any of these. ===================================================================== */ /* TEC's own button classes carry more specificity than `.tribe-common button` (`.tribe-common .tribe-common-c-btn` is two classes), so the face rule above lost to them and the search / today / view-selector controls stayed Helvetica. */ .tribe-common .tribe-common-c-btn, .tribe-common .tribe-common-c-btn-border-small, .tribe-events .tribe-events-c-search__button, .tribe-events .tribe-events-c-top-bar__today-button, .tribe-events .tribe-events-c-view-selector__button, .tribe-events .tribe-events-c-view-selector__list-item-text, .tribe-events .tribe-events-c-subscribe-dropdown__button, .tribe-events .tribe-events-calendar-list__event-date-tag-weekday, .tribe-events .tribe-events-calendar-month__calendar-event-datetime, .tribe-events .tribe-events-calendar-month__calendar-event-datetime time, .tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next, .tribe-events .tribe-events-c-nav__today, .tribe-events .tribe-events-c-breadcrumbs__list-item, .tribe-events .tribe-events-c-breadcrumbs__list-item-link, .tribe-events .tribe-events-c-messages__message, .tribe-events time, .tribe-events address { font-family: var(--e-global-typography-text-font-family), Jost, "Century Gothic", sans-serif !important; } /* rules/02: 12px is the bottom of the ladder. TEC's month datetime renders 11px. */ .tribe-events .tribe-events-calendar-month__calendar-event-datetime, .tribe-events .tribe-events-calendar-month__calendar-event-datetime time, .tribe-events .tribe-events-calendar-month__calendar-event-datetime span { font-size: 12px !important; } /* rules/03: the brand is square. The multiday bar rounds its leading and trailing ends (9.5px), and a past day cell carries a 4px radius below 768. */ .tribe-events .tribe-events-calendar-month__multiday-event-bar, .tribe-events .tribe-events-calendar-month__multiday-event, .tribe-events .tribe-events-calendar-month__day, .tribe-events .tribe-events-calendar-month__day--past, .tribe-events .tribe-events-calendar-month__day-cell { border-radius: 0 !important; } /* The remaining TEC-blue icons: the ones inside the events bar and the view selector's own list, which the earlier rule did not name. Same reason as before — `currentColor` resolves against a `color` TEC sets on the icon's own chain, so the token is named outright. */ .tribe-events .tribe-events-c-events-bar svg *, .tribe-events .tribe-events-c-view-selector__list-item svg *, .tribe-events .tribe-events-c-messages svg *, .tribe-events .tribe-events-c-breadcrumbs svg *, .tribe-events .tribe-events-c-top-bar svg *, .tribe-events .tribe-events-c-nav svg * { fill: var(--e-global-color-1a1b1ee) !important; } .tribe-events .tribe-events-c-nav__prev svg *, .tribe-events .tribe-events-c-nav__next svg * { fill: var(--e-global-color-d1035af) !important; } /* rules/01: TEC's text primary is rgb(20,24,39), which is not in the closed set. */ .tribe-events .tribe-events-c-messages__message, .tribe-events .tribe-events-c-breadcrumbs__list-item, .tribe-events .tribe-common-form-control-text__input, .tribe-events-single, .tribe-events-single .tribe-events-content, .tribe-events-single .tribe-events-event-meta, .tribe-events-single .tribe-events-meta-group, .tribe-events-single .tribe-events-meta-list { color: var(--e-global-color-text) !important; } .tribe-events-single .tribe-events-event-meta dt, .tribe-events-single .tribe-events-meta-group .tribe-events-meta-label { color: var(--e-global-color-1a1b1ee) !important; } /* rules/03 and rules/04, BINDING: below 1100px every interactive target is 44px minimum. TEC's pager links, the subscribe/add-to-calendar control, the single event's back link and its category links all render 16–21px tall. Padding is used rather than a height so the text keeps its own rung and the row does not grow on desktop, where the rule does not apply. */ @media (max-width: 1100px) { .tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next, .tribe-events .tribe-events-c-nav__today, .tribe-events .tribe-events-c-subscribe-dropdown__button, .tribe-events .tribe-events-c-breadcrumbs__list-item-link, .tribe-events .tribe-events-calendar-month__multiday-event-hidden-link, .tribe-events-single .tribe-events-back a, .tribe-events-single .tribe-events-event-meta a, .tribe-events-single .tribe-events-c-subscribe-dropdown__button { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* The label inside the subscribe button must not fight the button's own height. */ .tribe-events .tribe-events-c-subscribe-dropdown__button-text { min-height: 0 !important; } /* rules/04: inputs take 16px below 1100 so iOS does not zoom on focus. */ .tribe-events .tribe-common-form-control-text__input { font-size: 16px !important; } } /* `.tribe-events-back` and `.tribe-events-sub-nav` are SIBLINGS of `.tribe-events-single`, not descendants, so neither the face rule nor the colour rule above reached them — the "« All Events" link and the prev/next event nav were the last two Helvetica runs on the page. */ .tribe-events-back, .tribe-events-back a, .tribe-events-sub-nav, .tribe-events-sub-nav a, .tribe-events-sub-nav li { font-family: var(--e-global-typography-text-font-family), Jost, "Century Gothic", sans-serif !important; color: var(--e-global-color-text) !important; } .tribe-events-back a { color: var(--e-global-color-d1035af) !important; font-weight: 600 !important; } .tribe-events-back a:hover, .tribe-events-sub-nav a:hover { color: var(--e-global-color-058b7b6) !important; } .tribe-events-sub-nav a { color: var(--e-global-color-d1035af) !important; text-decoration: none !important; } .tribe-events-sub-nav { border-top-color: var(--e-global-color-e8e6dff) !important; } /* TEC paints some icons through the `color` property rather than `fill`, so setting fill alone left `color` off-palette on the same elements. */ .tribe-events svg, .tribe-events .tribe-common-c-svgicon { color: var(--e-global-color-1a1b1ee) !important; } .tribe-events .tribe-events-c-nav svg { color: var(--e-global-color-d1035af) !important; } @media (max-width: 1100px) { /* The view title / date-picker toggle ("Upcoming", "July 2026") renders 42px. */ .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-common-c-btn__clear { min-height: 44px !important; } .tribe-events-sub-nav a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } } /* The subscribe / add-to-calendar control is a DIV that looks like a button (`.tribe-common-c-btn-border`, 46px) wrapping the real `