… */ .mec-event-article.mec-single-event-novel{ position:relative; overflow:hidden; /* DO NOT set background here — we want the inline color to win */ border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:.55rem .75rem; color:#fff; -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%); box-shadow:0 6px 18px rgba(0,0,0,.35); margin-top:.4rem; transition:transform .2s ease, box-shadow .2s ease; } /* Fallback if MEC did NOT output a background */ .mec-event-article.mec-single-event-novel:not([style*="background"]){ background:rgba(0,0,0,.45); } /* Subtle dark veil so bright colors still read as “glass” */ .mec-event-article.mec-single-event-novel::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); pointer-events:none; z-index:0; } /* Left accent bar uses the same color as the chip (inherits) */ .mec-event-article.mec-single-event-novel::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: inherit; /* inherits the element's background */ opacity:.95; border-top-left-radius:inherit; border-bottom-left-radius:inherit; z-index:1; } /* Keep content above overlays */ .mec-event-article.mec-single-event-novel > *{ position:relative; z-index:2; } .mec-event-article.mec-single-event-novel .mec-event-title{ font-size:.95rem !important; font-weight:600; letter-spacing:.03em; color:#fff !important; margin:0 !important; } .mec-event-article.mec-single-event-novel:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.45); } /* (Remove any older swatch hacks so they don’t fight the inline color) */ .mec-event-article.mec-single-event-novel .mec-event-color, .mec-event-article.mec-single-event-novel .mec-color{ display:none !important; } /* ------------------------------------------------------- RESPONSIVE ------------------------------------------------------- */ @media (max-width:1024px){ .mec-calendar-day,.mec-table-nullday{ min-height:90px; } } @media (max-width:768px){ .mec-skin-monthly-view-month-navigator-container .mec-month-navigator h2{ font-size:1.25rem; } .mec-calendar-day,.mec-table-nullday{ border-radius:8px; min-height:80px; } } * ======================================================= PATCH ② — Light-mode glass (avoids washed-out look) ======================================================= */ body.light-mode .mec-skin-monthly-view-month-navigator-container .mec-month-navigator{ background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 8px 18px rgba(0,0,0,.12); } body.light-mode .mec-skin-monthly-view-month-navigator-container .mec-month-navigator h2{ color:#0d1a33; } body.light-mode .mec-month-navigator .mec-previous-month a, body.light-mode .mec-month-navigator .mec-next-month a{ background: rgba(0,115,230,.14); color: #005bb5; border: 1px solid rgba(0,115,230,.28); } body.light-mode .mec-month-navigator .mec-previous-month a:hover, body.light-mode .mec-month-navigator .mec-next-month a:hover{ background: rgba(0,115,230,.25); color:#fff; } /* Weekday strip */ body.light-mode dl.mec-calendar-table-head{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,255,.86)) !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 8px 18px rgba(0,0,0,.10); } body.light-mode dt.mec-calendar-day-head{ color:#0d1a33 !important; border-right: 1px solid rgba(0,0,0,.06) !important; } /* Day cells */ body.light-mode .mec-calendar-day, body.light-mode .mec-table-nullday{ background: rgba(255,255,255,.92) !important; color:#10122d; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), inset -1px 0 0 rgba(0,0,0,.06); } body.light-mode .mec-table-nullday{ background: rgba(250,250,252,.78) !important; color: rgba(16,18,45,.55); } /* Selected day chip in light mode */ body.light-mode .mec-calendar-novel-selected-day{ background: rgba(0,115,230,.18) !important; color:#005bb5; box-shadow: inset 0 0 0 1px rgba(0,115,230,.35); } /* Event chips — keep inline color, but restore contrast on light bg */ body.light-mode .mec-event-article.mec-single-event-novel{ border: 1px solid rgba(0,0,0,.10); box-shadow: 0 6px 16px rgba(0,0,0,.12); color:#10122d; } body.light-mode .mec-event-article.mec-single-event-novel:not([style*="background"]){ background: rgba(255,255,255,.96); } body.light-mode .mec-event-article.mec-single-event-novel::before{ background: rgba(0,0,0,.08); /* slight veil for readability on bright colors */ } /* ======================================================= PATCH ① — Month grid corners & outlines ======================================================= */ /* Let the glass frame clip everything so corners stay rounded */ .mec-calendar.mec-event-container-novel, .mec-wrap.mec-monthly-wrap{ overflow: hidden; /* critical to stop square outlines at outer corners */ } /* Weekday header row uses the container’s frame, not its own */ dl.mec-calendar-table-head{ border-width: 0 !important; /* container draws the frame */ border-radius: 14px 14px 0 0 !important; /* smooth top corners */ overflow: hidden; /* clip inner borders on corners */ } /* Soft divider at the bottom of the header row */ dl.mec-calendar-table-head::after{ content:""; display:block; height:1px; background: rgba(255,255,255,.12); } /* Day cells: draw inner grid lines only (no double outer border) */ .mec-calendar-day, .mec-table-nullday{ border: 0 !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), /* bottom line */ inset -1px 0 0 rgba(255,255,255,.06); /* left line */ border-radius: 12px !important; } /* Don’t draw a right edge on the last cell of each row */ .mec-calendar .mec-calendar-row dt:last-child{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); } /* Make sure very outer day cells inherit rounded corners too */ dl.mec-calendar-table-head dt:first-child{ border-top-left-radius: 14px; } dl.mec-calendar-table-head dt:last-child{ border-top-right-radius:14px; } .mec-calendar .mec-calendar-row:last-of-type dt:first-child{ border-bottom-left-radius: 14px; } .mec-calendar .mec-calendar-row:last-of-type dt:last-child{ border-bottom-right-radius:14px; } /* ======================================================= PATCH ② — Light-mode glass (avoid washed-out UI) ======================================================= */ body.light-mode .mec-skin-monthly-view-month-navigator-container .mec-month-navigator{ background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 8px 18px rgba(0,0,0,.12); } body.light-mode .mec-skin-monthly-view-month-navigator-container .mec-month-navigator h2{ color:#0d1a33; } body.light-mode .mec-month-navigator .mec-previous-month a, body.light-mode .mec-month-navigator .mec-next-month a{ background: rgba(0,115,230,.14); color: #005bb5; border: 1px solid rgba(0,115,230,.28); } body.light-mode .mec-month-navigator .mec-previous-month a:hover, body.light-mode .mec-month-navigator .mec-next-month a:hover{ background: rgba(0,115,230,.25); color:#fff; } /* Weekday strip */ body.light-mode dl.mec-calendar-table-head{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,255,.86)) !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 8px 18px rgba(0,0,0,.10); } body.light-mode dt.mec-calendar-day-head{ color:#0d1a33 !important; border-right: 1px solid rgba(0,0,0,.06) !important; } /* Day cells in light mode */ body.light-mode .mec-calendar-day, body.light-mode .mec-table-nullday{ background: rgba(255,255,255,.92) !important; color:#10122d; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), inset -1px 0 0 rgba(0,0,0,.06); } body.light-mode .mec-table-nullday{ background: rgba(250,250,252,.78) !important; color: rgba(16,18,45,.55); } /* Selected day chip in light mode */ body.light-mode .mec-calendar-novel-selected-day{ background: rgba(0,115,230,.18) !important; color:#005bb5; box-shadow: inset 0 0 0 1px rgba(0,115,230,.35); } /* Event chips — keep MEC’s inline event color, add contrast on light bg */ body.light-mode .mec-event-article.mec-single-event-novel{ border: 1px solid rgba(0,0,0,.10); box-shadow: 0 6px 16px rgba(0,0,0,.12); color:#10122d; } /* Only supply a white bg if MEC didn’t set one inline */ body.light-mode .mec-event-article.mec-single-event-novel:not([style*="background"]){ background: rgba(255,255,255,.96); } /* slight veil so bright category colors don’t blow out text */ body.light-mode .mec-event-article.mec-single-event-novel::before{ background: rgba(0,0,0,.08); } /* ======================================================= ORAS ✦ MEC — Single Event polish (sidebar, export, schedule) ======================================================= */ /* 1) Sidebar/right column: make all meta text readable */ .oras-mec-single .mec-single-event .mec-events-meta-group, .oras-mec-single .mec-single-event .mec-events-meta-group *, .oras-mec-single .mec-single-event .mec-event-meta, .oras-mec-single .mec-single-event .mec-event-meta *, .oras-mec-single .mec-single-event .mec-single-event-meta, .oras-mec-single .mec-single-event .mec-single-event-meta * { color: #f4f7ff !important; /* bright, legible */ } .oras-mec-single .mec-single-event .mec-events-meta-group i, .oras-mec-single .mec-single-event .mec-event-meta i { color: #72b6ff !important; /* icon accent */ opacity: 0.95; } /* links in the sidebar */ .oras-mec-single .mec-single-event .mec-events-meta-group a { color: #9fd0ff !important; } .oras-mec-single .mec-single-event .mec-events-meta-group a:hover { color: #ffffff !important; text-decoration: underline; } /* 2) Export block: glass + tidy buttons */ .oras-mec-single .mec-event-export-module.mec-frontbox { background: rgba(16,18,45,0.55) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0,0,0,.42); padding: 16px 18px !important; color: #fff; } .oras-mec-single .mec-event-export-module .mec-export-details ul { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; } .oras-mec-single .mec-event-export-module .mec-export-details li { list-style: none; } /* MEC’s default “events-button” */ .oras-mec-single .mec-event-export-module .mec-events-button { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 16px; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg,#0073e6,#005bb5) !important; color: #fff !important; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease; } .oras-mec-single .mec-event-export-module .mec-events-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.45); opacity: .95; } /* 3) Hourly Schedule: glass card + timeline styling */ .oras-mec-single .mec-event-schedule.mec-frontbox { background: rgba(16,18,45,0.55) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 16px !important; box-shadow: 0 12px 28px rgba(0,0,0,.45); padding: 18px 20px !important; color: #eaf0ff; } .oras-mec-single .mec-event-schedule .mec-schedule-head { color: #ffffff; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border: 0 !important; margin: 6px 0 14px; } /* “Day 1 / Day 2 …” separators */ .oras-mec-single .mec-event-schedule .mec-schedule-part { margin: 16px 0 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #fff; font-weight: 700; } /* entries */ .oras-mec-single .mec-event-schedule .mec-event-schedule-content dl { margin: 10px 0 16px; padding: 8px 12px 8px 16px; border-left: 3px solid rgba(78,170,255,.55); background: rgba(255,255,255,.03); border-radius: 10px; } .oras-mec-single .mec-event-schedule .mec-schedule-time { color: #9fd0ff; font-weight: 700; margin-bottom: 4px; } .oras-mec-single .mec-event-schedule .mec-schedule-title { color: #ffffff; font-weight: 700; margin-bottom: 2px; } .oras-mec-single .mec-event-schedule .mec-schedule-description { color: #d7def0; line-height: 1.55; } /* 4) Light-mode safety: switch glass to light without losing contrast */ body.light-mode .oras-mec-single .mec-event-export-module.mec-frontbox, body.light-mode .oras-mec-single .mec-event-schedule.mec-frontbox { background: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(0,0,0,.10) !important; color: #0b1020; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-part { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: #0b1020; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-time { color: #0d63c7; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-title { color: #0b1020; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-description { color: #1d2438; } /* ======================================================= ORAS ✦ MEC — Single Event: Booking / Social / Weather / QR ======================================================= */ /* ---------- GLASS CARD BASE (re-used by all right/inline boxes) ---------- */ .oras-mec-single .mec-frontbox, .oras-mec-single .mec-booking { background: rgba(16,18,45,0.55) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 16px !important; box-shadow: 0 12px 28px rgba(0,0,0,.45); color: #eef3ff; } /* Headings on these cards */ .oras-mec-single .mec-frontbox-title, .oras-mec-single .mec-booking h4 { margin: 0 0 12px; color: #fff !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } /* ---------- BOOKING: container & tickets list ---------- */ .oras-mec-single .mec-booking { padding: 18px 20px !important; } .oras-mec-single .mec-event-tickets-list { display: grid; gap: 12px; } /* Each ticket row (icon • name/price • qty) */ .oras-mec-single .mec-ticket-style-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px 12px; } /* Icons */ .oras-mec-single .mec-ticket-icon-wrapper { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; } .oras-mec-single .mec-ticket-icon-wrapper img { width: 22px; height: 22px; opacity: .95; } /* Name & (optional) price */ .oras-mec-single .mec-event-ticket-name { color:#fff; font-weight:700; } .oras-mec-single .mec-event-ticket-price { color:#9fd0ff; font-weight:700; } /* Qty input + plus/minus */ .oras-mec-single .mec-event-ticket-input-wrapper { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 6px; } /* round ghost buttons */ .oras-mec-single .mec-event-ticket-input-wrapper a.plus, .oras-mec-single .mec-event-ticket-input-wrapper a.minus { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: transform .15s ease, background .2s ease; } .oras-mec-single .mec-event-ticket-input-wrapper a.plus:hover, .oras-mec-single .mec-event-ticket-input-wrapper a.minus:hover { background: rgba(78,170,255,.22); transform: translateY(-1px); } .oras-mec-single .mec-event-ticket-input-wrapper a.minus.dis { opacity: .45; pointer-events: none; } .oras-mec-single .mec-event-ticket-input-wrapper img.mec-svg-icon { width: 14px; height: 14px; } /* Number input (kill native spinners; glassy pill) */ .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"] { width: 74px; height: 34px; background: rgba(255,255,255,.10); color:#fff; text-align:center; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-weight: 700; outline: none; } .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"]::-webkit-outer-spin-button, .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"] { -moz-appearance: textfield; } .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"]:focus { border-color:#4eaaff; box-shadow: 0 0 0 3px rgba(78,170,255,.28); } /* Availability + description */ .oras-mec-single .mec-event-ticket-available { color:#bcd2ff; font-size:.9rem; margin-top:6px; } .oras-mec-single .mec-event-ticket-description { color:#d7def0; margin:6px 2px 2px; } /* Booking alerts (sold out / ended) */ .oras-mec-single .mec-ticket-unavailable-spots.info-msg { background: rgba(34,34,34,.7); border-left: 4px solid #ff6b6b; color:#fff; padding:10px 12px; border-radius:10px; margin-top:8px; } /* Next button */ .oras-mec-single .mec-book-form-btn-wrap { margin-top: 14px; } .oras-mec-single .mec-book-form-next-button { display: inline-flex; align-items:center; gap:8px; height: 46px; padding: 0 18px; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg,#0073e6,#005bb5) !important; color:#fff !important; font-weight:800; letter-spacing:.03em; box-shadow: 0 8px 20px rgba(0,0,0,.42); transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease; } .oras-mec-single .mec-book-form-next-button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.5); } /* ---------- SOCIAL SHARE ---------- */ .oras-mec-single .mec-event-social.mec-frontbox { padding: 16px 18px !important; } .oras-mec-single .mec-event-social .mec-links-details ul { display:flex; gap:10px; flex-wrap:wrap; margin:0; padding:0; } .oras-mec-single .mec-event-social .mec-event-social-icon { list-style:none; } .oras-mec-single .mec-event-social .mec-event-social-icon a { width:44px; height:44px; display:grid; place-items:center; border-radius:999px; color:#fff !important; box-shadow: 0 8px 18px rgba(0,0,0,.38); transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; } /* brand tints */ .oras-mec-single .mec-event-social a.facebook { background: linear-gradient(135deg,#1b6fff,#1877f2); } .oras-mec-single .mec-event-social a.email { background: linear-gradient(135deg,#0bbbe9,#0073e6); } .oras-mec-single .mec-event-social .mec-event-social-icon a:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,.48); } /* ---------- WEATHER ---------- */ .oras-mec-single .mec-weather-details.mec-frontbox { padding: 16px 18px !important; } .oras-mec-single .mec-weather-box { display:flex; flex-direction:column; gap:12px; } .oras-mec-single .mec-weather-head { display:grid; grid-template-columns: 64px 1fr auto; gap:12px; align-items:center; } .oras-mec-single .mec-weather-icon-box { width:64px; height:64px; display:grid; place-items:center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius:12px; } .oras-mec-single .mec-weather-summary-report { color:#fff; font-weight:700; } .oras-mec-single .mec-weather-summary-temp { color:#ffffff; font-size:1.4rem; font-weight:800; } .oras-mec-single .mec-weather-summary-temp var { opacity:.8; font-size:1rem; } /* Metric/Imperial toggle */ .oras-mec-single .degrees-mode { display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 12px; border-radius:999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color:#dfe9ff; cursor:pointer; user-select:none; } /* extras row */ .oras-mec-single .mec-weather-extras { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; color:#d7def0; } .oras-mec-single .mec-weather-extras span { color:#9fd0ff; font-weight:700; } /* ---------- QR CODE ---------- */ .oras-mec-single .mec-qrcode-details.mec-frontbox { display:grid; place-items:center; padding: 16px !important; } .oras-mec-single .mec-qrcode-details img { border-radius:12px; background: rgba(255,255,255,.9); box-shadow: 0 10px 22px rgba(0,0,0,.35); padding: 8px; } /* ---------- LIGHT MODE SAFETY (keeps contrast when toggled) ---------- */ body.light-mode .oras-mec-single .mec-frontbox, body.light-mode .oras-mec-single .mec-booking { background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(0,0,0,.10) !important; color: #0b1020; } body.light-mode .oras-mec-single .mec-ticket-style-row { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.08); } body.light-mode .oras-mec-single .mec-event-ticket-name { color:#0b1020; } body.light-mode .oras-mec-single .mec-event-ticket-price { color:#0d63c7; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper { background: rgba(0,0,0,.055); border-color: rgba(0,0,0,.10); } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"] { background: rgba(0,0,0,.04); color:#0b1020; border-color: rgba(0,0,0,.16); } body.light-mode .oras-mec-single .mec-ticket-unavailable-spots.info-msg { background: rgba(0,0,0,.06); color:#0b1020; } body.light-mode .oras-mec-single .mec-weather-summary-report, body.light-mode .oras-mec-single .mec-weather-summary-temp { color:#0b1020; } body.light-mode .oras-mec-single .degrees-mode { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.10); color:#0b1020; } /* ======================================================= LIGHT MODE — Emergency Contrast Patch (append at end) Keeps your dark look intact; only fixes washed-out light mode ======================================================= */ /* 0) Global: cancel any dimming filters/opacities MEC or theme adds */ body.light-mode .oras-mec-single .mec-frontbox, body.light-mode .oras-mec-single .mec-frontbox *, body.light-mode .oras-mec-single .mec-booking, body.light-mode .oras-mec-single .mec-booking *, body.light-mode .oras-mec-single .mec-event-schedule, body.light-mode .oras-mec-single .mec-event-schedule *, body.light-mode .oras-mec-single .mec-event-export-module, body.light-mode .oras-mec-single .mec-event-export-module *, body.light-mode .oras-mec-single .mec-event-social, body.light-mode .oras-mec-single .mec-event-social *, body.light-mode .oras-mec-single .mec-weather-details, body.light-mode .oras-mec-single .mec-weather-details * { opacity: 1 !important; filter: none !important; } /* 1) Right sidebar (date / time / location / categories) — readable text */ body.light-mode .single-mec-events .mec-single-event .mec-single-event-side, body.light-mode .single-mec-events .mec-single-event .mec-single-event-side *{ color:#0a1022 !important; } body.light-mode .single-mec-events .mec-single-event .mec-single-event-side i{ color:#0d63c7 !important; opacity:1 !important; } /* 2) All copy inside the single event (headings, body text, lists, etc.) */ body.light-mode .oras-mec-single .mec-single-event :where(h1,h2,h3,h4,h5,h6,p,dt,dd,li,span,em,strong,a){ color:#0b1020 !important; } body.light-mode .oras-mec-single .mec-single-event a{ color:#0d63c7 !important; } body.light-mode .oras-mec-single .mec-single-event a:hover{ color:#094b97 !important; text-decoration: underline; } /* 3) Cards (Export / Schedule / Social / Weather / Booking) surfaces */ body.light-mode .oras-mec-single .mec-frontbox, body.light-mode .oras-mec-single .mec-booking{ background: rgba(255,255,255,.9) !important; border: 1px solid rgba(0,0,0,.12) !important; color:#0b1020 !important; } /* 4) Schedule specifics */ body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-head{ color:#0a1022 !important; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-part{ background: rgba(0,0,0,.035) !important; border-color: rgba(0,0,0,.08) !important; color:#0a1022 !important; } body.light-mode .oras-mec-single .mec-event-schedule .mec-event-schedule-content dl{ background: rgba(0,0,0,.02) !important; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-time{ color:#0d63c7 !important; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-title{ color:#0a1022 !important; } body.light-mode .oras-mec-single .mec-event-schedule .mec-schedule-description{ color:#1d2438 !important; } /* 5) Export buttons + social chips */ body.light-mode .oras-mec-single .mec-event-export-module .mec-events-button, body.light-mode .oras-mec-single .mec-event-social .mec-event-social-icon a{ color:#fff !important; background: linear-gradient(135deg,#0073e6,#005bb5) !important; border:0 !important; } /* 6) Booking rows: ensure fully opaque & readable controls */ body.light-mode .oras-mec-single .mec-ticket-style-row{ background: rgba(255,255,255,.95) !important; border-color: rgba(0,0,0,.12) !important; color:#0a1022 !important; } body.light-mode .oras-mec-single .mec-event-ticket-name{ color:#0a1022 !important; } body.light-mode .oras-mec-single .mec-event-ticket-price{ color:#0d63c7 !important; } body.light-mode .oras-mec-single .mec-event-ticket-available{ color:#274168 !important; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper{ background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.10) !important; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper a.plus, body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper a.minus{ background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.12) !important; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper input[type="number"]{ background: rgba(0,0,0,.04) !important; color:#0a1022 !important; border-color: rgba(0,0,0,.16) !important; } /* 7) Weather */ body.light-mode .oras-mec-single .mec-weather-summary-report, body.light-mode .oras-mec-single .mec-weather-summary-temp, body.light-mode .oras-mec-single .mec-weather-extras{ color:#0a1022 !important; } body.light-mode .oras-mec-single .degrees-mode{ background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.10) !important; color:#0a1022 !important; } /* 8) Safety: kill any MEC “fade/dim” utility classes in light mode */ body.light-mode [class*="mec-opacity"], body.light-mode .mec-util-muted, body.light-mode .mec-color-muted{ opacity:1 !important; color:#0a1022 !important; } /* ============================================ ORAS ✦ MEC — Ticket input hot-fix - kills MEC’s oval overlay - hides UA spinners - forces readable numbers (dark & light) ============================================ */ /* Nuke the wrapper's extra background/skin so nothing sits on top */ .oras-mec-single .mec-event-ticket-input-wrapper{ position: relative !important; background: transparent !important; border: 0 !important; padding: 0 !important; gap: 8px !important; align-items: center !important; isolation: isolate; /* prevent pseudo overlays from stacking above */ } .oras-mec-single .mec-event-ticket-input-wrapper::before, .oras-mec-single .mec-event-ticket-input-wrapper::after{ content: none !important; } /* Make the number field itself the only “box” you see */ .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num{ position: relative !important; z-index: 1 !important; width: 72px !important; height: 36px !important; line-height: 36px !important; text-align: center !important; font-weight: 800 !important; letter-spacing: .02em !important; border-radius: 10px !important; outline: none !important; box-shadow: none !important; /* Dark theme */ background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #e7eeff !important; /* Kill browser spinners completely */ -webkit-appearance: none !important; -moz-appearance: textfield !important; appearance: textfield !important; } .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num::-webkit-outer-spin-button, .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0 !important; opacity: 0 !important; } /* Light theme variant — readable text, no gray oval */ body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num{ background: #ffffff !important; border-color: rgba(0,0,0,.14) !important; color: #0a1022 !important; } /* Keep our +/- buttons, but ensure they don’t look stacked with the input */ .oras-mec-single .mec-event-ticket-input-wrapper a.plus, .oras-mec-single .mec-event-ticket-input-wrapper a.minus{ display: inline-grid !important; place-items: center !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; transition: transform .15s ease, background .2s ease !important; } .oras-mec-single .mec-event-ticket-input-wrapper a.plus:hover, .oras-mec-single .mec-event-ticket-input-wrapper a.minus:hover{ transform: translateY(-1px); background: rgba(78,170,255,.22) !important; } .oras-mec-single .mec-event-ticket-input-wrapper a.minus.dis{ opacity:.45; pointer-events:none; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper a.plus, body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper a.minus{ background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.12) !important; } /* Just in case MEC ships other “count skins”, neutralize them */ .oras-mec-single .mec-event-ticket-input-wrapper .mec-input-style, .oras-mec-single .mec-event-ticket-input-wrapper .mec-count-input, .oras-mec-single .mec-event-ticket-input-wrapper .input-number-group{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================ ORAS ✦ MEC — Ticket steppers: layout & clicks ============================================ */ /* 1) Use a simple horizontal layout (minus • number • plus) */ .oras-mec-single .mec-event-ticket-input-wrapper{ display: inline-flex !important; align-items: center !important; gap: 8px !important; /* a compact pill around the control */ background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 999px !important; padding: 4px 6px !important; position: relative !important; overflow: visible !important; isolation: isolate !important; /* prevents weird overlays capturing clicks */ } /* Kill any MEC skin overlays that create that big oval */ .oras-mec-single .mec-event-ticket-input-wrapper::before, .oras-mec-single .mec-event-ticket-input-wrapper::after{ content: none !important; } /* 2) Force children to be normal flow (no absolute stacking) */ .oras-mec-single .mec-event-ticket-input-wrapper > *{ position: static !important; z-index: 1 !important; pointer-events: auto !important; } /* Order: minus (left) • input (middle) • plus (right) */ .oras-mec-single .mec-event-ticket-input-wrapper a.minus{ order: 0 !important; } .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num{ order: 1 !important; } .oras-mec-single .mec-event-ticket-input-wrapper a.plus{ order: 2 !important; } /* 3) Style the number field and nuke native spinners */ .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num{ width: 72px !important; height: 34px !important; line-height: 34px !important; text-align: center !important; font-weight: 800 !important; letter-spacing: .02em !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.16) !important; background: rgba(255,255,255,.10) !important; color: #e7eeff !important; -webkit-appearance: none !important; -moz-appearance: textfield !important; appearance: textfield !important; box-shadow: none !important; outline: none !important; } .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num::-webkit-outer-spin-button, .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0 !important; opacity: 0 !important; } /* 4) Clickable +/- buttons (no overlap) */ .oras-mec-single .mec-event-ticket-input-wrapper a.plus, .oras-mec-single .mec-event-ticket-input-wrapper a.minus{ display: inline-grid !important; place-items: center !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; transition: transform .15s ease, background .2s ease !important; } .oras-mec-single .mec-event-ticket-input-wrapper a.plus:hover, .oras-mec-single .mec-event-ticket-input-wrapper a.minus:hover{ transform: translateY(-1px); background: rgba(78,170,255,.22) !important; } .oras-mec-single .mec-event-ticket-input-wrapper a.minus.dis{ opacity: .45; pointer-events: none; } /* Button icons */ .oras-mec-single .mec-event-ticket-input-wrapper img.mec-svg-icon{ width: 14px; height: 14px; filter: brightness(1.15) saturate(1.1); } /* 5) Light mode variants (no gray oval, readable text) */ body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper{ background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.12) !important; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper .mec-book-ticket-limit.in-num{ background: #fff !important; border-color: rgba(0,0,0,.14) !important; color: #0a1022 !important; } body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper a.plus, body.light-mode .oras-mec-single .mec-event-ticket-input-wrapper a.minus{ background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.12) !important; } /* ========================= ORAS Full Calendar Responsive Fix ========================= */ /* Ensure the calendar wraps properly on mobile */ .mec-calendar { width: 100% !important; overflow-x: hidden !important; box-sizing: border-box; } /* Remove extra container width or fixed min-width applied by MEC */ .mec-wrap, .mec-calendar-month, .mec-calendar-month-container { max-width: 100% !important; width: 100% !important; overflow: hidden !important; } /* Prevent horizontal scroll */ body, html { overflow-x: hidden !important; } /* Make the calendar cells and table responsive */ .mec-calendar table, .mec-calendar table tr, .mec-calendar table td { width: 100% !important; table-layout: fixed !important; box-sizing: border-box; } /* Make event blocks inside the calendar wrap text and scale */ .mec-calendar .mec-event { white-space: normal !important; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; line-height: 1.3; word-break: break-word; } /* Adjust font size for mobile devices */ @media (max-width: 768px) { .mec-calendar .mec-event { font-size: 0.8rem; padding: 4px 6px; } .mec-calendar .mec-calendar-month { padding: 0 5px; } .mec-calendar .mec-calendar-header h2, .mec-calendar .mec-calendar-header h3 { font-size: 1rem; } } /* Glass effect calendar background */ .mec-calendar { background: rgba(25,25,25,0.25); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 22px rgba(0,0,0,0.35); } /* Style the day cells */ .mec-calendar .mec-calendar-day { background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.05); transition: background 0.2s ease, transform 0.2s ease; } .mec-calendar .mec-calendar-day:hover { background: rgba(79,163,255,0.25); transform: scale(1.03); } /* Event color overrides */ .mec-calendar .mec-event { background: rgba(79,163,255,0.8) !important; border-radius: 6px; color: #fff !important; font-weight: 600; } /* Dark Mode Adjustments */ body.dark-mode .mec-calendar, [data-theme="dark"] .mec-calendar { background: rgba(20,20,20,0.45); border: 1px solid rgba(255,255,255,0.12); }