/* =========================================================================== MITSUBISHI ELECTRIC CUP - Custom CSS (light default | dark via [data-theme]) Grounded in the live RSVPtestCopy DOM. Three-diamond motif + red #E60012. Pairs with the Custom JS block (theme toggle + robotic-arm hero canvas). =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- PALETTE ---------- */ :root{ --me-accent:#E60012; --me-accent-deep:#B3000E; --me-bg:#F4F5F7; --me-bg-2:#FFFFFF; --me-surface:#FFFFFF; --me-surface-2:#EEF0F3; --me-border:rgba(20,22,34,.10); --me-border-2:rgba(20,22,34,.18); --me-text:#3A3D4A; --me-head:#101218; --me-muted:#5A5D6B; --me-dim:#7A7D8C; --me-canvas-grid:rgba(20,22,34,.06); --me-arm:#2A2D38; --me-arm-joint:#101218; --me-node:#5A5D6B; --me-navbg:rgba(244,245,247,.90); --me-hero-from:#FFFFFF; --me-hero-to:#E9EBEF; --me-font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --me-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; } html[data-theme="dark"]{ --me-bg:#0A0A0F; --me-bg-2:#101016; --me-surface:#101016; --me-surface-2:#15151c; --me-border:rgba(255,255,255,.08); --me-border-2:rgba(255,255,255,.16); --me-text:#E6E6EC; --me-head:#FFFFFF; --me-muted:#A6A6B2; --me-dim:#8A8A96; --me-canvas-grid:rgba(255,255,255,.06); --me-arm:#C8CBD6; --me-arm-joint:#FFFFFF; --me-node:#9aa0b0; --me-navbg:rgba(10,10,15,.85); --me-hero-from:#16161f; --me-hero-to:#0A0A0F; } /* ---------- BASE ---------- */ body{ background:var(--me-bg)!important; color:var(--me-text)!important; font-family:var(--me-font)!important; -webkit-font-smoothing:antialiased; transition:background-color .45s ease,color .45s ease; } h1,h2,h3,h4,h5,.section-head,.section-title,.section-sub-title{ font-family:var(--me-font)!important; letter-spacing:-.018em; } p,span,li,label,div,a{ font-family:var(--me-font); } .bs-section .markdown-contain, .bs-section .markdown-contain *{ color:var(--me-text)!important; font-family:var(--me-font)!important; } ::selection{ background:var(--me-accent); color:#fff; } /* ---------- NAV / HEADER ---------- */ header.bs-main-menu{ background:var(--me-navbg)!important; backdrop-filter:blur(12px); border-bottom:1px solid var(--me-border); transition:background-color .45s; } header.bs-main-menu .bs-nav-wrapper a.item{ color:var(--me-text)!important; font-family:var(--me-mono)!important; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; transition:color .2s; } header.bs-main-menu .bs-nav-wrapper a.item:hover, header.bs-main-menu .bs-nav-wrapper a.nav-active{ color:var(--me-accent)!important; } /* remove the blue active pill; keep red text + red underline */ header.bs-main-menu .bs-nav-wrapper a.nav-active{ background:transparent!important; } header.bs-main-menu .bs-nav-wrapper a .active-bdr{ background:var(--me-accent)!important; } /* ---------- SECTION SURFACES ---------- */ section.bs-section{ background:var(--me-bg)!important; position:relative; } section.bs-section > .background-layer{ background-color:transparent!important; } /* depth: alternating bands sit on the raised surface colour */ section.bs-section.alternative-background{ background:var(--me-surface)!important; border-top:1px solid var(--me-border); border-bottom:1px solid var(--me-border); } /* ---------- HERO + INNER BANNERS ---------- */ section.main-banner, section.inner-banner{ position:relative; overflow:hidden; } /* kill the zephyr theme images (home: pastel; inner pages: zephyr-inner-banner) */ section.main-banner > .background-layer, section.inner-banner > .background-layer{ position:absolute!important; inset:0; background-image:none!important; background:linear-gradient(120deg,var(--me-hero-from),var(--me-hero-to))!important; overflow:hidden; } /* faint CNC work-grid on inner-page banners (home uses the canvas grid) */ section.inner-banner > .background-layer::after{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg,var(--me-canvas-grid) 0 1px,transparent 1px 46px), repeating-linear-gradient(90deg,var(--me-canvas-grid) 0 1px,transparent 1px 46px); pointer-events:none; } canvas#mecup-arm{ position:absolute; inset:0; width:100%!important; height:100%!important; z-index:0; pointer-events:none; } section.main-banner > .foreground-layer, section.inner-banner > .foreground-layer{ position:relative; z-index:2; /* text above canvas/grid */ } section.main-banner .section-head, section.inner-banner .section-head{ color:var(--me-head)!important; font-weight:800!important; } /* banner body + date/time/VENUE text (location was black -> invisible in dark) */ section.main-banner .banner-content, section.main-banner .items, section.main-banner .foreground-layer :is(p,span,div), section.main-banner .bs-dtl, section.main-banner .bs-dtl *, section.inner-banner .bs-dtl, section.inner-banner .bs-dtl *{ color:var(--me-muted)!important; } /* ---------- HEADINGS + three-diamond mark ---------- */ .bs-section .section-title{ color:var(--me-head)!important; } .bs-section .section-sub-title{ color:var(--me-muted)!important; font-family:var(--me-mono)!important; letter-spacing:.04em; } .bs-section .section-title::before{ content:""; display:inline-block; width:.6em; height:.6em; margin-right:.5em; vertical-align:-.04em; background:var(--me-accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,6 66,32 50,50 34,32'/%3E%3Cpolygon points='50,6 66,32 50,50 34,32' transform='rotate(120 50 50)'/%3E%3Cpolygon points='50,6 66,32 50,50 34,32' transform='rotate(240 50 50)'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,6 66,32 50,50 34,32'/%3E%3Cpolygon points='50,6 66,32 50,50 34,32' transform='rotate(120 50 50)'/%3E%3Cpolygon points='50,6 66,32 50,50 34,32' transform='rotate(240 50 50)'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- BUTTONS / CTAs (zephyr blue -> signature red) ---------- */ /* solid fill: any primary button that is NOT the text-only 'link' variant */ .bs-button.primary:not(.link){ background:var(--me-accent)!important; border-color:var(--me-accent)!important; color:#fff!important; box-shadow:0 10px 30px rgba(230,0,18,.28); } .bs-button.primary:not(.link):hover{ background:var(--me-accent-deep)!important; box-shadow:0 16px 42px rgba(230,0,18,.45); } /* text-only 'link' primary buttons: transparent with red label */ .bs-button.primary.link, .bs-button.link.primary{ background:transparent!important; color:var(--me-accent)!important; } .bs-button.disable-css{ filter:grayscale(.2) opacity(.8); } /* magnetic-hover transition target (JS nudges transform) */ .bs-button{ transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .3s,color .2s,border-color .25s; will-change:transform; } /* ---------- CAROUSEL DOTS ---------- */ .owl-dots .owl-dot span{ background:var(--me-border-2)!important; transition:background .2s,transform .2s; } .owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span{ background:var(--me-accent)!important; transform:scale(1.25); } /* ---------- FORM FIELDS (Get in touch) ---------- */ .bs-section .bs-input, .bs-section .iti__tel-input, .bs-section textarea.bs-input{ background:var(--me-bg-2)!important; color:var(--me-text)!important; border:1px solid var(--me-border)!important; border-radius:8px!important; font-family:var(--me-font)!important; } .bs-section .bs-input:focus, .bs-section .iti__tel-input:focus{ outline:none!important; border-color:var(--me-accent)!important; box-shadow:0 0 0 3px rgba(230,0,18,.14)!important; } .bs-section ::placeholder{ color:var(--me-dim)!important; } /* ---------- FOOTER ---------- */ section.community-section-footer{ background:var(--me-surface)!important; border-top:1px solid var(--me-border); } section.community-section-footer .bs-footer, section.community-section-footer .bs-footer *{ color:var(--me-dim)!important; } section.community-section-footer a:hover{ color:var(--me-accent)!important; } /* ---------- INJECTED THEME TOGGLE ---------- */ #mecup-toggle{ display:inline-flex; align-items:center; align-self:center; /* vertical-center inside the flex nav */ flex:0 0 auto; gap:8px; cursor:pointer; margin-left:16px; background:var(--me-surface-2); border:1px solid var(--me-border); color:var(--me-text); font-family:var(--me-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 13px; border-radius:999px; line-height:1; white-space:nowrap; transition:border-color .2s,color .2s; } #mecup-toggle:hover{ border-color:var(--me-accent); color:var(--me-accent); } #mecup-toggle svg{ width:12px; height:12px; color:var(--me-accent); } /* fallback only if the nav isn't found; docked toggle drops this class */ #mecup-toggle.mecup-float{ position:fixed; top:13px; right:16px; z-index:99999; margin-left:0; backdrop-filter:blur(10px); } /* ---------- IMMERSIVE: LED TICKER (digital display strip) ---------- */ #mecup-ticker{ position:relative; overflow:hidden; background:#08080d; border-top:1px solid var(--me-accent); border-bottom:1px solid var(--me-accent); box-shadow:inset 0 0 40px rgba(230,0,18,.12); padding:13px 0; /* subtle LED scanline texture */ background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px); } #mecup-ticker .tk-track{ display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:mecup-marquee 38s linear infinite; } #mecup-ticker:hover .tk-track{ animation-play-state:paused; } /* hover to read */ #mecup-ticker .tk-item{ display:inline-flex; align-items:center; gap:10px; padding:0 26px; font-family:var(--me-mono); font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:#E9EBEF; } #mecup-ticker .tk-item .tk-num{ color:var(--me-accent); font-weight:600; text-shadow:0 0 12px rgba(230,0,18,.6); } #mecup-ticker .tk-diamond{ width:10px;height:10px;flex:0 0 auto;color:var(--me-accent);opacity:.85; } #mecup-ticker .tk-diamond svg{width:100%;height:100%;fill:currentColor;display:block;} @keyframes mecup-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---------- IMMERSIVE: WORD-BY-WORD HOVER (body/description text only) ---------- */ .mecup-word{ display:inline-block; position:relative; transform-origin:center; transition:transform .3s ease; } .mecup-word::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--me-accent); transform:scaleX(0); transform-origin:center; transition:transform .3s ease; } .mecup-word:hover{ transform:scale(1.08); } .mecup-word:hover::after{ transform:scaleX(1); } /* ---------- HERO COUNTDOWN (injected into .banner-content) ---------- */ #mecup-cd{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0 6px; } #mecup-cd .me-box{ min-width:62px; text-align:center; background:var(--me-surface); border:1px solid var(--me-border); border-radius:10px; padding:10px 12px; } #mecup-cd .me-num{ font-family:var(--me-mono); font-size:26px; font-weight:700; color:var(--me-head); line-height:1; } #mecup-cd .me-box:last-child .me-num{ color:var(--me-accent); } #mecup-cd .me-u{ font-family:var(--me-mono); font-size:10px; letter-spacing:.12em; color:var(--me-dim); margin-top:6px; text-transform:uppercase; } /* ---------- IMMERSIVE: SCROLL PROGRESS BAR ---------- */ #mecup-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:100000; background:linear-gradient(90deg,var(--me-accent),var(--me-accent-deep)); box-shadow:0 0 10px rgba(230,0,18,.55); pointer-events:none; transition:width .08s linear; } /* ---------- IMMERSIVE: REVEAL ON SCROLL ---------- */ /* Only hides content once JS adds .mecup-anim to , so a JS failure leaves everything visible. A JS safety-timer also force-reveals after 4s. */ html.mecup-anim .mecup-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; } html.mecup-anim .mecup-reveal.in{ opacity:1; transform:none; } /* ---------- IMMERSIVE: CUSTOM CNC CURSOR ---------- */ /* applied only when JS adds .mecup-cursor (fine pointer, motion allowed) */ html.mecup-cursor, html.mecup-cursor *{ cursor:none!important; } html.mecup-cursor input, html.mecup-cursor textarea, html.mecup-cursor select, html.mecup-cursor [contenteditable="true"]{ cursor:text!important; } #mecup-cursor-dot, #mecup-cursor-ring{ position:fixed; top:0; left:0; z-index:100002; pointer-events:none; opacity:0; transition:opacity .25s ease; } html.mecup-cursor #mecup-cursor-dot, html.mecup-cursor #mecup-cursor-ring{ opacity:1; } #mecup-cursor-dot{ width:7px; height:7px; background:var(--me-accent); border-radius:1px; /* small diamond (rotated in JS) */ } #mecup-cursor-ring{ width:34px; height:34px; border:1.5px solid var(--me-accent); border-radius:50%; background:transparent; transition:width .22s ease,height .22s ease,background .22s ease,border-color .22s ease,opacity .25s ease; } html.mecup-cursor.mecup-cursor-hover #mecup-cursor-ring{ width:56px; height:56px; background:rgba(230,0,18,.10); border-color:var(--me-accent-deep); } html.mecup-cursor.mecup-cursor-hover #mecup-cursor-dot{ opacity:0; } html.mecup-cursor.mecup-cursor-down #mecup-cursor-ring{ width:26px; height:26px; } /* ---------- IMMERSIVE: HERO PARALLAX CLUSTER (right side) ---------- */ #mecup-parallax{ position:absolute; inset:0; z-index:1; /* above the arm canvas (0), below hero text (2) */ pointer-events:none; overflow:hidden; } #mecup-parallax .pf{ position:absolute; will-change:transform; color:var(--me-accent); } #mecup-parallax .pf svg{ width:100%; height:100%; display:block; fill:currentColor; } #mecup-parallax .ring{ border:1.5px dashed var(--me-border-2); border-radius:50%; } #mecup-parallax .hud{ font-family:var(--me-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--me-dim); border:1px solid var(--me-border); background:var(--me-surface); border-radius:8px; padding:8px 12px; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.10); } #mecup-parallax .hud b{ color:var(--me-accent); font-weight:600; } @keyframes mecup-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } } @keyframes mecup-spin{ to{ rotate:360deg; } } @media (max-width:920px){ #mecup-parallax{ display:none; } } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } html.mecup-anim .mecup-reveal{ opacity:1!important; transform:none!important; } html.mecup-cursor, html.mecup-cursor *{ cursor:auto!important; } #mecup-cursor-dot, #mecup-cursor-ring{ display:none!important; } #mecup-parallax .pf{ animation:none!important; } #mecup-ticker .tk-track{ animation:none!important; } .mecup-word:hover{ transform:none!important; } } /* =========================================================================== MECUP v6 ADD-ON CSS — APPEND THIS TO THE END of your existing Custom CSS. (Do NOT delete what's already there — just paste this block after it.) Themes the speakers / sessions / agenda / sponsor boxes + the form, plus the Get-in-touch conveyor belt and the interactive footer field. =========================================================================== */ /* ---------- EVENT-THEMED BOXES (speakers · sponsors · featured sessions) ---------- */ .community-section-speakers .li-item, .community-section-sponsors .li-item, .community-section-featuredSessions .bs-frame, .bs-frame.featured-session{ background:var(--me-surface-2)!important; border:1px solid var(--me-border)!important; border-radius:14px!important; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; } .community-section-speakers .li-item:hover, .community-section-sponsors .li-item:hover, .community-section-featuredSessions .bs-frame:hover, .bs-frame.featured-session:hover{ transform:translateY(-6px); border-color:var(--me-accent)!important; box-shadow:0 18px 40px rgba(230,0,18,.16); } .community-section-speakers .li-title, .community-section-sponsors .li-title{ color:var(--me-head)!important; font-weight:700!important; } .community-section-speakers .list-sub-title, .community-section-speakers .li-subtitle, .community-section-sponsors .list-sub-title{ color:var(--me-muted)!important; } .community-section-speakers .bs-image.profile-img{ border:2px solid var(--me-border-2)!important; transition:border-color .3s ease; } .community-section-speakers .li-item:hover .bs-image.profile-img{ border-color:var(--me-accent)!important; } /* ---------- AGENDA PAGE (day tabs + timeline session cards) ---------- */ .community-section-agendaLayout .bs-tab-menu .nav-item{ font-family:var(--me-mono)!important; letter-spacing:.04em; color:var(--me-muted)!important; transition:color .2s ease,border-color .2s ease; } .community-section-agendaLayout .bs-tab-menu .nav-item:hover, .community-section-agendaLayout .bs-tab-menu .nav-item.active{ color:var(--me-accent)!important; border-color:var(--me-accent)!important; } .community-section-agendaLayout .timeline-content, .community-section-agendaLayout .track-group-1{ background:var(--me-surface-2)!important; border:1px solid var(--me-border)!important; border-radius:14px!important; transition:transform .25s ease,border-color .25s ease,box-shadow .3s ease; } .community-section-agendaLayout .timeline-content:hover{ transform:translateX(5px); border-color:var(--me-accent)!important; box-shadow:0 12px 30px rgba(230,0,18,.14); } .community-section-agendaLayout .session-name{ color:var(--me-head)!important; } .community-section-agendaLayout .session-dtl, .community-section-agendaLayout .time-duration, .community-section-agendaLayout .time-zone{ color:var(--me-muted)!important; } .community-section-agendaLayout .track-circular-icon, .community-section-agendaLayout .session-type .theme-icon{ background:var(--me-accent)!important; color:#fff!important; } /* ---------- GET-IN-TOUCH FORM CARD ---------- */ .community-section-getInTouch{ position:relative; overflow:hidden; } .community-section-getInTouch .foreground-layer{ position:relative; z-index:1; } .community-section-getInTouch .bs-frame{ background:var(--me-surface-2)!important; border:1px solid var(--me-border)!important; border-radius:18px!important; position:relative; z-index:1; box-shadow:0 24px 60px rgba(0,0,0,.16); } .community-section-getInTouch .form-head .head{ color:var(--me-head)!important; } .community-section-getInTouch .form-head .sub-head{ color:var(--me-muted)!important; } .community-section-getInTouch .form-field label{ color:var(--me-dim)!important; font-family:var(--me-mono)!important; letter-spacing:.04em; } /* ---------- CONVEYOR BELT (behind the form — runs on hover) ---------- */ #mecup-conveyor{ position:absolute; left:0; right:0; bottom:0; height:120px; z-index:0; pointer-events:none; opacity:.6; } #mecup-conveyor .belt{ position:absolute; left:-10%; right:-10%; bottom:34px; height:24px; background: repeating-linear-gradient(90deg,var(--me-border-2) 0 2px,transparent 2px 22px), linear-gradient(var(--me-surface-2),var(--me-surface)); background-size:22px 100%,100% 100%; border-top:2px solid var(--me-border-2); border-bottom:2px solid var(--me-border-2); animation:mecup-belt 2.4s linear infinite; animation-play-state:paused; } @keyframes mecup-belt{ to{ background-position:-22px 0,0 0; } } #mecup-conveyor .roller{ position:absolute; bottom:28px; width:34px; height:34px; border-radius:50%; border:3px solid var(--me-border-2); background:var(--me-surface); } #mecup-conveyor .roller::before{ content:""; position:absolute; inset:6px; border-radius:50%; border-top:3px solid var(--me-accent); animation:mecup-spin 1.2s linear infinite; animation-play-state:paused; } #mecup-conveyor .part{ position:absolute; bottom:40px; width:18px; height:18px; color:var(--me-accent); animation:mecup-ride 6s linear infinite; animation-play-state:paused; } #mecup-conveyor .part svg{ width:100%; height:100%; fill:currentColor; } @keyframes mecup-ride{ from{ left:-6%; } to{ left:106%; } } /* hover the section -> the whole belt comes alive */ .community-section-getInTouch:hover #mecup-conveyor .belt, .community-section-getInTouch:hover #mecup-conveyor .roller::before, .community-section-getInTouch:hover #mecup-conveyor .part{ animation-play-state:running; } /* ---------- INTERACTIVE FOOTER FIELD (canvas behind footer text) ---------- */ .community-section-footer{ position:relative; overflow:hidden; } #mecup-footer-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; } .community-section-footer .foreground-layer{ position:relative; z-index:2; } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ #mecup-conveyor .belt, #mecup-conveyor .roller::before, #mecup-conveyor .part{ animation:none!important; } } /* =========================================================================== MECUP v7 DARK-FIX CSS — APPEND THIS TO THE VERY END of your Custom CSS. (Keep everything that's already there; paste this block after it.) Fixes dark-on-dark text site-wide + themes the white agenda/speakers areas. =========================================================================== */ /* Define Backstage's own text-colour variables so ALL native text follows the theme. Backstage colours headings/body via these vars with #000 / #7f7f7f fallbacks; defining them here recolours every page at once (both themes, since --me-* already flip with the theme). */ :root{ --text-color:var(--me-text); --secondary-text-color:var(--me-muted); --title-text-color:var(--me-head); --heading-color:var(--me-head); --section-text-color:var(--me-text); --section-title-text-color:var(--me-head); --section-secondary-text-color:var(--me-muted); --alternate-section-text-color:var(--me-text); --alternate-section-title-text-color:var(--me-head); --alternate-section-secondary-text-color:var(--me-muted); --banner-text-color:var(--me-head); --banner-secondary-text-color:var(--me-muted); --inner-banner-text-color:var(--me-head); --inner-banner-secondary-text-color:var(--me-muted); --number-counter-color:var(--me-head); --light-border-color:var(--me-border); } /* page / banner hero titles (plain h1·h2, hard-coded black in the template) */ .main-banner .foreground-layer h1,.main-banner .foreground-layer h2, .inner-banner .foreground-layer h1,.inner-banner .foreground-layer h2, .main-banner .section-head,.inner-banner .section-head{ color:var(--me-head)!important; } /* AGENDA page — white day/time bars + white session rows -> dark surfaces */ .day-switcher-menu, .day-switcher-menu .time-zone, .day-switcher-menu>.bs-segment, .bs-agenda-tab, .bs-sessions, .session-container, .bs-timeline, .bs-timeline .timeline-item, .timeline-content-group, .track-group-1, .timeline-content, .timeline-sticky, .bs-segment.empty{ background-color:var(--me-surface)!important; border-color:var(--me-border)!important; } .bs-timeline .timeline-item, .bs-timeline .timeline-content{ border-color:var(--me-border)!important; } /* SPEAKERS page — white speaker cards -> themed surfaces */ .bs-speakerList-wgt .li-item, .grb-list .li-item, .community-page-speakers .li-item{ background:var(--me-surface-2)!important; border:1px solid var(--me-border)!important; border-radius:14px!important; } .bs-speakerList-wgt .li-title, .grb-list .li-title{ color:var(--me-head)!important; } /* HOME featured-session card text (was dark on the dark card) */ .community-section-featuredSessions .session-name, .featured-session .session-name{ color:var(--me-head)!important; } .community-section-featuredSessions .session-dtl, .community-section-featuredSessions .time-duration, .featured-session .session-dtl{ color:var(--me-muted)!important; } /* layering: particle field behind the Get-in-touch content, conveyor above it */ .community-section-getInTouch #mecup-footer-canvas{ z-index:0; } #mecup-conveyor{ z-index:1; } /* (TICKETS cards stay red-header / white-body by design — their widget pins its own text colour, so they remain readable and are intentionally left as-is.) */ /* =========================================================================== HERO FIX — APPEND THIS TO THE END of your Custom CSS. Hides the stray "event card" panel that the logo/media added to the banner's right slot (its unconstrained SVG icons ballooned the hero to ~2847px and broke the robotic-arm canvas). Restores the previous hero structure. =========================================================================== */ .main-banner .banner-right-panel, .main-banner .ic-event-card, .inner-banner .banner-right-panel, .inner-banner .ic-event-card{ display:none !important; } /* safety: never let the banner media's icons grow unbounded again */ .main-banner .ic-detail-icon, .main-banner .ic-detail-icon svg{ max-width:22px !important; max-height:22px !important; }