/* OECE2026 - Indico custom CSS Final version: - responsive banner - aspect ratio 2:1 - Beihang startrail background - larger title, max 72px - fixes Indico's actual title selector (.conference-title-link) */ :root { --conf-theme-header-bg: #1a64a0; --conf-theme-header-border-bottom: transparent; --conf-theme-header-text: white; --conf-theme-subtitle-bg: #f5faff; --conf-theme-subtitle-border: #d5e4f1; --conf-theme-subtitle-text: #24425a; --conf-theme-menu-bg: #f6f6f6; --conf-theme-menu-border: #ccc; --conf-theme-menu-link: #275c86; --conf-theme-menu-selected: #bd891a; --conf-theme-menu-selected-bg: #dadada; --conf-theme-menu-selected-border: #d0d0d0; --conf-theme-hover-bg: #e0e0e0; --conf-theme-hover-color: var(--conf-theme-menu-link); --conf-theme-support-bg: #f6f6f6; --conf-theme-support-border: #ccc; --conf-theme-support-header-bg: #1a64a0; --conf-theme-support-header-text: #f3f3f3; --conf-theme-support-text: #aaa; --conf-theme-announcement-bg: #f5faff; --conf-theme-announcement-border: #c2d6e7; --conf-theme-announcement-text: #0f283d; } /* ========================================================= Responsive conference banner ========================================================= */ .conf .confheader .confTitleBox { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 2 / 1 !important; min-height: 420px !important; max-height: 900px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-image: linear-gradient( rgba(5, 22, 40, 0.16), rgba(5, 22, 40, 0.16) ), url("https://indico.impcas.ac.cn/event/211/images/107-%E5%8C%97%E8%88%AA%E6%98%9F%E8%BD%A8.jfif") !important; background-size: cover !important; background-position: center 60% !important; background-repeat: no-repeat !important; border: none !important; } /* Fill the entire banner with the title layer */ .conf .confheader .confTitleBox .confTitle { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 36px 64px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; } /* Reset h1 so Indico's inner span controls the real font size */ .conf .confheader .confTitleBox .confTitle h1 { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; line-height: 1.1 !important; color: #fff !important; } /* ========================================================= IMPORTANT: Indico's actual visible conference title is controlled by .conference-title-link, not just the parent h1. ========================================================= */ .conf .confheader .confTitleBox .confTitle .conference-title-link { display: block !important; font-size: clamp(48px, 4vw, 72px) !important; line-height: 1.12 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; background: transparent !important; text-decoration: none !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.90), 0 0 18px rgba(0, 0, 0, 0.55) !important; } /* Force the nested title span to inherit the corrected size */ .conf .confheader .confTitleBox .confTitle .conference-title-link > span, .conf .confheader .confTitleBox .confTitle span[itemprop="title"] { font-size: inherit !important; line-height: inherit !important; color: inherit !important; } /* Link layer */ .conf .confheader .confTitleBox .confTitle h1 a { color: #fff !important; background: transparent !important; text-decoration: none !important; } .conf .confheader .confTitleBox .confTitle h1 a:hover, .conf .confheader .confTitleBox .confTitle h1 a:focus { color: #fff !important; text-decoration: none !important; } /* ========================================================= Subtitle/date/location area ========================================================= */ .conf .confheader .confSubTitleBox { position: relative !important; z-index: 2 !important; background: var(--conf-theme-subtitle-bg) !important; color: var(--conf-theme-subtitle-text) !important; border-color: var(--conf-theme-subtitle-border) !important; } .conf .confheader .confSubTitleBox .date, .conf .confheader .confSubTitleBox .place, .conf .confheader .confSubTitleBox .timezone { color: var(--conf-theme-subtitle-text) !important; } /* ========================================================= Page-specific title behavior - Overview: large startrail banner - Other pages: keep the title, but without the image ========================================================= */ /* ---------- Default for all event pages: compact plain title ---------- */ .conf .confheader .confTitleBox { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; background: #1a64a0 !important; border-bottom: 1px solid var(--conf-theme-header-border-bottom, #0f4c80) !important; overflow: visible !important; } .conf .confheader .confTitleBox .confTitle { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 20px 32px !important; display: block !important; background: transparent !important; box-sizing: border-box !important; } .conf .confheader .confTitleBox .confTitle h1 { margin: 0 !important; padding: 0 !important; text-align: left !important; line-height: 1.15 !important; } .conf .confheader .confTitleBox .confTitle .conference-title-link { display: block !important; font-size: clamp(28px, 2.2vw, 40px) !important; line-height: 1.15 !important; margin: 0 !important; padding: 0 !important; color: var(--conf-theme-header-text, #fff) !important; text-shadow: none !important; } .conf .confheader .confTitleBox .confTitle .conference-title-link > span, .conf .confheader .confTitleBox .confTitle span[itemprop="title"] { font-size: inherit !important; line-height: inherit !important; color: inherit !important; } /* ---------- Overview only: restore the large image banner ---------- */ .conf:has(.menuConfTitle.selected a[href$="/overview"]) .confheader .confTitleBox { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 2 / 1 !important; min-height: 420px !important; max-height: 900px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-image: linear-gradient( rgba(5, 22, 40, 0.16), rgba(5, 22, 40, 0.16) ), url("https://indico.impcas.ac.cn/event/211/images/107-%E5%8C%97%E8%88%AA%E6%98%9F%E8%BD%A8.jfif") !important; background-size: cover !important; background-position: center 60% !important; background-repeat: no-repeat !important; border: none !important; } .conf:has(.menuConfTitle.selected a[href$="/overview"]) .confheader .confTitleBox .confTitle { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 36px 64px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; box-sizing: border-box !important; } .conf:has(.menuConfTitle.selected a[href$="/overview"]) .confheader .confTitleBox .confTitle h1 { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; line-height: 1.12 !important; } .conf:has(.menuConfTitle.selected a[href$="/overview"]) .confheader .confTitleBox .confTitle .conference-title-link { display: block !important; font-size: clamp(48px, 4vw, 72px) !important; line-height: 1.12 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.90), 0 0 18px rgba(0, 0, 0, 0.55) !important; }