/* Black/white/green skin for The Events Calendar. TEC declares its --tec-* custom properties on :root () and prints its stylesheets AFTER ours, so we can't beat them on source order. Instead we redeclare them on TEC's own content wrapper (.tribe-events / .tribe-common): descendants inherit OUR values from the closer ancestor, which wins over :root by cascade PROXIMITY, independent of load order. TEC's whole component library reads these vars, so this reskins the lot without per-selector fights. Values are our tokens, so events follow light/dark. Guessed var names a given TEC version doesn't define are simply inert. */ .tribe-events, .tribe-common { /* Backgrounds → none: let the page --paper show through (no coloured fills). */ --tec-color-background: transparent; --tec-color-background-secondary: transparent; --tec-color-background-secondary-hover: var(--surface); --tec-color-background-transparent: transparent; --tec-color-background-events: transparent; /* Text + icons → ink / muted. */ --tec-color-text-primary: var(--ink); --tec-color-text-secondary: var(--paper); --tec-color-text-primary-a11y: var(--ink); --tec-color-icon-primary: var(--muted); --tec-color-icon-hover: var(--ink); --tec-color-icon-active: var(--ink); --tec-color-text-event-title: var(--ink); /* Accents → BCR green; TEC's dark-navy "secondary" accent → ink. Multiday and accent backgrounds get a faint green tint rather than a solid block. */ --tec-color-accent-primary: var(--accent); --tec-color-accent-primary-hover: var(--accent-dark); --tec-color-accent-primary-active: var(--accent-dark); --tec-color-accent-primary-multiday: color-mix(in srgb, var(--accent) 24%, transparent); --tec-color-accent-primary-background: color-mix(in srgb, var(--accent) 12%, transparent); --tec-color-accent-secondary: var(--ink); /* Links → our --link. */ --tec-color-link-primary: var(--ink); --tec-color-link-accent: var(--link); --tec-color-link-accent-hover: var(--link); /* Borders → our border; active → ink. */ --tec-color-border-default: var(--border); --tec-color-border-secondary: var(--border); --tec-color-border-tertiary: var(--border); --tec-color-border-active: var(--ink); /* Flat look — no shadows. */ --tec-color-box-shadow: transparent; --tec-box-shadow-default: none; /* Buttons (names vary by version; inert if unused). */ --tec-color-button-primary: var(--accent); --tec-color-button-primary-hover: var(--accent-dark); /* Some layout values are delivered as css variables too */ --tec-spacer-13: 32px; } /* A few wrappers carry a hardcoded fill rather than a variable — flatten them. */ .tribe-common, .tribe-events, .tribe-events .tribe-events-c-events-bar, .tribe-events .tribe-events-header, .tribe-events .datepicker { background: transparent; } /* ── Date tag → our .datemark tile ─────────────────────────────────────────── TEC's list date badge (weekday over day-number) restyled to match the bcr/next-event .datemark, using the SAME tokens so the two never drift. The leading `.tribe-events` makes these 0,3,0 — above TEC's own `.tribe-events .…-datetime` (0,2,0), which sets display:flex + height:100% — and events.css now loads last (functions.php), so they win outright. */ .tribe-events .tribe-events-calendar-list__event-date-tag { padding: 0; background: transparent; } .tribe-events .tribe-events-calendar-list__event-date-tag .tribe-events-calendar-list__event-date-tag-datetime { display: block; /* over TEC's flex column */ height: auto; /* over TEC's height:100% */ width: 2.5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius, 8px); overflow: hidden; text-align: center; line-height: 1; background: var(--surface); font-variant-numeric: tabular-nums; } .tribe-events .tribe-events-calendar-list__event-date-tag .tribe-events-calendar-list__event-date-tag-weekday { display: block; margin: 0; padding: 0.2rem 0; background: var(--accent-dark); /* darker green: white text passes AA contrast */ color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .tribe-events .tribe-events-calendar-list__event-date-tag .tribe-events-calendar-list__event-date-tag-daynum { display: block; margin: 0; padding: 0.2rem 0 0.3rem; color: var(--ink); font-size: 1.5rem; font-weight: 700; }