/* * The Events Calendar 6.x - "legacy look" compatibility layer * Site: fisioterapista-bologna.net (Zambonelli) - theme: breakthrough-pro (Genesis) * * WHY THIS FILE EXISTS * The 5.5.0.1 -> 6.17.3.1 upgrade replaced the whole rendering system (the legacy V1 views were * removed in 6.0.0). The old calendar looked "right" mostly because it declared almost no * typography of its own and INHERITED the theme's fonts and colours. Version 6 ships its own * design system and forces Helvetica Neue plus an electric blue (#334aff) on everything. * This layer puts the site's own look back on top of v6, without touching any plugin file. * * HOW IT IS BUILT * v6 is driven by CSS custom properties, so this is mostly a REMAP of those properties rather * than a pile of !important. Every value below was MEASURED on the real pages, not guessed: * - old look : web.archive.org snapshot 2026-05-15 (plus 2022-11-30 for the event list), * re-rendered with the live theme stylesheets so the theme layer was present; * - new look : the live site, 2026-09-04. * * HOW TO EDIT * Change the values in the "KNOBS" block below. Everything else reads from it, so editing a * value there is enough - no other part of the file needs to be touched. */ /* ============================================================================ * 1. KNOBS - this is the block to edit * ==========================================================================*/ :root { /* --- Site typography (taken from the theme, so the calendar blends in again) --- */ --zb-font-body: "Alegreya Sans", sans-serif; /* theme body font */ --zb-font-heading: "PT Serif", serif; /* theme heading font */ /* --- Site colours --- */ --zb-text: #4e4756; /* theme body text */ --zb-heading: #25212a; /* theme heading colour */ --zb-link: #d2414b; /* theme link colour (red) */ --zb-rule: #c2c2c2; /* thin separator line */ /* --- Client request 2026-09-04: event titles no longer red, but the body text colour (the plugin's own --tec-color-text-primary value) --- */ --zb-event-title: #4e4756; /* --- Client request 2026-09-04: the "featured" marker (the "Segnalati" label, its star and the vertical bar on the left of a featured event) takes the colour of the ACTIVE MENU ITEM instead of the red accent. Measured live on the site menu: rgb(74,79,155). --- */ --zb-featured: #4a4f9b; --zb-featured-icon: #4a4f9b; /* the star next to the label; set to #4e4756 to leave it dark */ /* --- Search button: the old one was dark grey, NOT blue --- */ --zb-button-bg: #666666; --zb-button-bg-hover: #999999; --zb-button-text: #ffffff; --zb-button-radius: 0; /* the old button had square corners */ /* --- Search bar --- */ --zb-bar-bg: #f5f5f5; /* old bar background */ --zb-bar-views-bg: #e0e0e0; /* old "view as" box background */ --zb-bar-input-underline: #b9b9b9; /* old dashed underline below the inputs */ /* --- "No events" notice: the old one was the light blue info box --- */ --zb-notice-bg: #d9edf7; --zb-notice-text: #3a87ad; --zb-notice-border: #bce8f1; /* --- Sizes copied from the old stylesheet --- */ --zb-size-page-title: 30px; --zb-size-event-title: 32px; --zb-size-month-sep: 24px; --zb-size-button: 13px; --zb-size-datetime: 13px; --zb-size-single-title: 34px; /* single event page: the old H1 size */ /* --- Single event page: the old H1 was near-black, NOT the link red --- */ --zb-single-title-color: #141827; } /* ============================================================================ * 2. REMAP OF THE PLUGIN'S OWN VARIABLES * This single block is what puts the site's font and colours back across the whole * calendar, including the parts not styled explicitly further down. * ==========================================================================*/ :root { /* Typography: v6 forces Helvetica Neue here; the old views inherited the theme instead. */ --tec-font-family-sans-serif: var(--zb-font-body); --tec-font-family-base: var(--zb-font-body); /* Text colours */ --tec-color-text-primary: var(--zb-text); --tec-color-text-secondary: var(--zb-text); /* Event titles: the client asked for the body text colour, not the link red (2026-09-04). Setting this one variable also covers the day, latest-past, month-multiday and widget-list titles, plus their :hover / :focus / :visited states, which v6 all derives from it. The SINGLE event page title is restated separately in its own section. */ --tec-color-text-events-title: var(--zb-event-title); --tec-color-text-event-title-list: var(--zb-event-title); /* Accent / links: the v6 default is #334aff, the site uses its own red */ --tec-color-accent-primary: var(--zb-link); --tec-color-accent-primary-hover: var(--zb-link); --tec-color-accent-primary-active: var(--zb-link); --tec-color-accent-secondary: var(--zb-link); --tec-color-accent-secondary-hover: var(--zb-link); --tec-color-link-primary: var(--zb-link); --tec-color-link-accent: var(--zb-link); /* Buttons */ --tec-color-button-primary: var(--zb-button-bg); --tec-color-button-primary-hover: var(--zb-button-bg-hover); --tec-color-button-primary-active: var(--zb-button-bg-hover); /* Search bar submit button (v6 routes it through its own variables) */ --tec-color-background-events-bar-submit-button: var(--zb-button-bg); --tec-color-background-events-bar-submit-button-hover: var(--zb-button-bg-hover); --tec-color-background-events-bar-submit-button-active: var(--zb-button-bg-hover); --tec-color-text-events-bar-submit-button: var(--zb-button-text); --tec-color-text-events-bar-submit-button-hover: var(--zb-button-text); --tec-color-text-events-bar-submit-button-active: var(--zb-button-text); /* Backgrounds */ --tec-color-background-events-bar: var(--zb-bar-bg); --tec-color-background-messages: var(--zb-notice-bg); --tec-color-border-default: var(--zb-rule); } /* ============================================================================ * 3. SEARCH BAR * ==========================================================================*/ /* The old bar was a flat light-grey band: no white card, no border. */ .tribe-events .tribe-events-c-events-bar, .tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-c-events-bar { background-color: var(--zb-bar-bg); border: 0; } /* The old submit button: dark grey, square, compact, uppercase. */ .tribe-events .tribe-events-c-search__button, .tribe-events button.tribe-events-c-search__button, .tribe-common .tribe-common-c-btn, .tribe-common button.tribe-common-c-btn, .tribe-common a.tribe-common-c-btn { background-color: var(--zb-button-bg); border-radius: var(--zb-button-radius); color: var(--zb-button-text); font-family: var(--zb-font-body); font-size: var(--zb-size-button); font-weight: 700; letter-spacing: normal; padding: 10px 20px; text-transform: uppercase; } .tribe-events .tribe-events-c-search__button:hover, .tribe-events .tribe-events-c-search__button:focus, .tribe-events button.tribe-events-c-search__button:hover, .tribe-events button.tribe-events-c-search__button:focus, .tribe-common .tribe-common-c-btn:hover, .tribe-common .tribe-common-c-btn:focus, .tribe-common button.tribe-common-c-btn:hover, .tribe-common button.tribe-common-c-btn:focus { background-color: var(--zb-button-bg-hover); color: var(--zb-button-text); } /* The old search field: transparent, italic, thin dashed underline instead of a box. */ .tribe-events .tribe-events-c-events-bar .tribe-common-form-control-text__input, .tribe-events .tribe-events-c-search__input { background-color: transparent; border: 0; border-bottom: 1px dashed var(--zb-bar-input-underline); border-radius: 0; box-shadow: none; font-family: var(--zb-font-body); font-size: 15px; font-style: italic; } /* The old view switcher sat in its own slightly darker box. */ .tribe-events .tribe-events-c-events-bar__views { background-color: var(--zb-bar-views-bg); } .tribe-events .tribe-events-c-view-selector__list-item-text, .tribe-events .tribe-events-c-view-selector__button-text { font-family: var(--zb-font-body); font-size: 15px; } /* ============================================================================ * 4. "NO EVENTS" NOTICE - back to the old light blue info box * ==========================================================================*/ .tribe-events .tribe-events-c-messages__message, .tribe-events .tribe-events-c-messages__message--notice { background-color: var(--zb-notice-bg); border: 1px solid var(--zb-notice-border); border-radius: 4px; color: var(--zb-notice-text); font-family: var(--zb-font-body); padding: 8px 35px 8px 14px; text-align: left; text-shadow: 0 1px 0 #fff; } .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-messages__message-list { text-align: left; } /* ============================================================================ * 5. EVENT LIST * ==========================================================================*/ /* * Event titles used the theme's serif face, larger than the v6 default. * NOTE ON SPECIFICITY: v6 also puts "tribe-common-h6 tribe-common-h4--min-medium" on the title * and sizes it from ".tribe-common--breakpoint-medium.tribe-common .tribe-common-h4--min-medium" * (0,3,0). A plain ".tribe-events ." (0,2,0) loses on font-size, so the size rules below * are matched to that same specificity - measured, not assumed. */ .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-list__event-title, .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-day__event-title, .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-latest-past__event-title, .tribe-events .tribe-events-calendar-list__event-title, .tribe-events .tribe-events-calendar-day__event-title, .tribe-events .tribe-events-calendar-latest-past__event-title { font-family: var(--zb-font-heading); font-size: var(--zb-size-event-title); font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; } .tribe-events .tribe-events-calendar-list__event-title-link, .tribe-events .tribe-events-calendar-day__event-title-link, .tribe-events .tribe-events-calendar-latest-past__event-title-link { color: var(--zb-event-title); font-family: var(--zb-font-heading); text-decoration: none; } /* Date / time line. */ .tribe-events .tribe-events-calendar-list__event-datetime, .tribe-events .tribe-events-calendar-day__event-datetime, .tribe-events .tribe-events-calendar-latest-past__event-datetime { color: var(--zb-text); font-family: var(--zb-font-body); font-size: var(--zb-size-datetime); font-weight: 700; } /* * Description, venue and cost in the site's body font. * Same specificity trap as the title: these carry tribe-common-b1/b2 classes sized from * ".tribe-common--breakpoint-medium.tribe-common .tribe-common-b*" (0,3,0), so the matching * prefixed selectors are listed too - without them the font-size silently stays at v6's. */ .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-list__event-description, .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-day__event-description, .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-latest-past__event-description, .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-list__event-venue, .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-list__event-cost, .tribe-events .tribe-events-calendar-list__event-description, .tribe-events .tribe-events-calendar-day__event-description, .tribe-events .tribe-events-calendar-latest-past__event-description, .tribe-events .tribe-events-calendar-list__event-venue, .tribe-events .tribe-events-calendar-list__event-cost { color: var(--zb-text); font-family: var(--zb-font-body); font-size: 17px; } /* Month separator: the old one was centred serif with a thin rule running behind it. */ .tribe-events .tribe-events-calendar-list__month-separator { align-items: center; display: flex; justify-content: center; margin: 1.25em auto; position: relative; } /* Also carries tribe-common-h7 / h6--min-medium, hence the prefixed selector for the size. */ .tribe-common--breakpoint-medium.tribe-common .tribe-events-calendar-list__month-separator-text, .tribe-events .tribe-events-calendar-list__month-separator-text { background-color: #fff; color: var(--zb-heading); font-family: var(--zb-font-heading); font-size: var(--zb-size-month-sep); font-weight: 700; letter-spacing: normal; padding: 0 20px; position: relative; z-index: 1; } /* v6 draws the rule only to the right of the label; extend it to both sides. */ .tribe-events .tribe-events-calendar-list__month-separator:before, .tribe-events .tribe-events-calendar-list__month-separator:after { background-color: var(--zb-rule); content: ""; display: block; flex: auto; height: 1px; margin: 0; } /* ============================================================================ * 6. FEATURED EVENTS ("Segnalati") - label, star and left-hand bar * * Asked by the client on 2026-09-04: the featured marker must stop using the red link colour * and take the colour of the ACTIVE MENU ITEM instead. That colour was MEASURED on the live * menu (the "EVENTI" item, li.current-menu-item > a) and is rgb(74,79,155) = #4a4f9b. * * WHY THESE RULES AND NOT A VARIABLE * v6 paints the whole featured marker from --tec-color-accent-primary. Section 2 maps that * variable to the site red, and it also drives ordinary links, buttons and the navigation * arrows - so it is deliberately NOT re-mapped here. The rules below target the featured * marker only. * * THE MARKER IS FOUR SEPARATE THINGS, one per view; there is no single element and no single * selector. All four are listed, including the views that happen to have no featured event * today (month, day), so the look stays consistent when one is published. * * NOTE ON THE LABEL: the "Segnalati" span ships with the class tribe-common-a11y-visual-hide * and is therefore invisible on phones; v6 un-hides it from breakpoint-medium up, and colours * it from a (0,3,0) selector - hence the prefixed selectors below. A plain ".tribe-events ..." * would be (0,2,0) and would silently lose. * ==========================================================================*/ /* * The "Segnalati" label. Two sets of selectors on purpose: * - the (0,3,0) prefixed ones win on DESKTOP, where v6 colours the label from a selector of * that same specificity (an unprefixed rule would silently lose); * - the plain ones cover PHONES, where the label is only screen-reader visible but should * still carry the same colour if it is ever un-hidden. */ .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-datetime-featured-text, .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-day__event-datetime-featured-text, .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-latest-past__event-datetime-featured-text, .tribe-events .tribe-events-calendar-list__event-datetime-featured-text, .tribe-events .tribe-events-calendar-day__event-datetime-featured-text, .tribe-events .tribe-events-calendar-latest-past__event-datetime-featured-text, .tribe-events .tribe-events-calendar-month__calendar-event-datetime-featured-text, .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-datetime-featured-text { color: var(--zb-featured); } /* * The small star in front of the label. Its SVG path is filled with "currentcolor", so the * colour has to be set on the wrapper. Today it inherits #4e4756, i.e. it was already * NOT red - it is recoloured too so that star, label and bar read as one marker. * The multiday bar icon is left out on purpose: it sits on a coloured bar, not on white. */ .tribe-events .tribe-events-calendar-list__event-datetime-featured-icon, .tribe-events .tribe-events-calendar-day__event-datetime-featured-icon, .tribe-events .tribe-events-calendar-latest-past__event-datetime-featured-icon, .tribe-events .tribe-events-calendar-month__calendar-event-datetime-featured-icon, .tribe-events .tribe-events-calendar-month__calendar-event-tooltip-datetime-featured-icon, .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-datetime-featured-icon { color: var(--zb-featured-icon); } /* The vertical bar down the left of a featured event - a different pseudo-element per view. */ .tribe-events .tribe-events-calendar-list__event-row--featured .tribe-events-calendar-list__event-date-tag-datetime:after, .tribe-events .tribe-events-calendar-latest-past__event-row--featured .tribe-events-calendar-latest-past__event-date-tag-datetime:after, .tribe-events .tribe-events-calendar-day__event--featured:after, .tribe-events .tribe-events-calendar-month__calendar-event--featured:before { background-color: var(--zb-featured); } /* ============================================================================ * 7. SINGLE EVENT PAGE * * Measured on the SAME event in the archive (snapshot 2025-11-13, i.e. before the upgrade): * the old title was an H1 in the theme's serif at 34px and NEAR-BLACK (#141827). Section 2 * remaps --tec-color-text-events-title, which drives every LIST title; this page's title is * not a link and was a different, darker colour in the old design, so it is restated here. * It is therefore NOT affected by the 2026-09-04 change to the list titles. * ==========================================================================*/ .tribe-events-single .tribe-events-single-event-title, .tribe-events-single-event-title, .tribe-common .tribe-events-single-event-title { color: var(--zb-single-title-color); font-family: var(--zb-font-heading); font-size: var(--zb-size-single-title); font-weight: 700; letter-spacing: -1px; line-height: 1.2; } /* ============================================================================ * 8. NAVIGATION ("previous / next events") * ==========================================================================*/ .tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next, .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-nav__prev, .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-nav__next { color: var(--zb-link); font-family: var(--zb-font-body); font-size: 16px; font-weight: 700; } .tribe-events .tribe-events-c-nav__prev-icon-svg path, .tribe-events .tribe-events-c-nav__next-icon-svg path, .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-nav__prev-icon-svg path, .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-nav__next-icon-svg path { fill: var(--zb-link); } /* ============================================================================ * 9. TOP BAR (date picker / "today") - v6 only, kept but toned down to the site font * ==========================================================================*/ .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-events-c-top-bar__today-button { font-family: var(--zb-font-body); letter-spacing: normal; } /* Same specificity note as the event title: v6 sizes this from a (0,3,1) selector. */ .tribe-common--breakpoint-medium.tribe-common button.tribe-events-c-top-bar__datepicker-button, .tribe-events button.tribe-events-c-top-bar__datepicker-button { color: var(--zb-heading); font-size: 24px; } /* ============================================================================ * 10. OPTIONAL - page title * * The old page showed a centred "Prossimi Eventi" heading above the search bar. * Version 6 does not render it at all. The block below puts a heading back, but the text is * FIXED in CSS, so it would also read "Prossimi Eventi" on the past-events view. * Disabled on purpose: a small PHP filter is the correct way to restore the real, dynamic * title. To use it anyway, remove the comment markers around the rule. * ==========================================================================*/ /* .tribe-events .tribe-events-header:before { color: var(--zb-heading); content: "Prossimi Eventi"; display: block; font-family: var(--zb-font-heading); font-size: var(--zb-size-page-title); font-weight: 700; margin-bottom: 0.5em; text-align: center; } */ /* ============================================================================ * 11. HORIZONTAL OVERFLOW ON PHONES * * At a 360px viewport the page scrolled sideways by 7px. Measured cause: the GetResponse * webform wrapper in the site FOOTER carries a hard "width: 340px" while the column is only * 306px wide. Its iframe already has max-width:100%; the wrapper does not, so the wrapper is * what sticks out. This is NOT caused by The Events Calendar and NOT by this stylesheet - it * was verified identical with this file disabled. * * ⚠️ SCOPE: the footer is on every page, so the same 7px happen site-wide, but this stylesheet * is only enqueued on calendar pages, so the fix only applies there. Making it site-wide is a * one-line change in the loader - deliberately not done without asking. * ⚠️ Other pages have far worse pre-existing overflow from other sources (e.g. /contatti/ * overflows by ~299px because of the Google map), which this rule does not address. * ==========================================================================*/ .grwf2-wrapper, .grwf2-wrapper iframe { max-width: 100%; } /* ============================================================================ * 12. SMALL SCREENS * ==========================================================================*/ @media (max-width: 767px) { :root { /* * 22px, not 26px. In the list view the title column is only ~213px wide on a 360px * screen (the date tag takes the left side), and v6 sets overflow-wrap:break-word, * so a long word is cut mid-word. Measured on the real titles: 26px and 24px break * "ANTIGIMNASTIKA", 22px does not. If a future event has a longer word it can break * again - lower this value, it is the only knob involved. */ --zb-size-event-title: 22px; --zb-size-month-sep: 20px; /* * The single-event H1 must shrink on phones or long words break mid-word * ("ANTIGIMNASTI / KA"). The old site did the same: measured at 30.6px on a 360px * viewport, against 34px on desktop. 26px keeps the longest real title on one line. */ --zb-size-single-title: 26px; } .tribe-events .tribe-events-c-search__button, .tribe-events button.tribe-events-c-search__button { width: 100%; } }