/* ========================================================================= css for CUBES 2026 / Indico legacy conference header - 2026.01.18. [W.S.Cho (IBS CTPU-PTC)] - Center title - Fluid header width (remove 950px constraint) - Background image + overlay - Readability safe set (color + text-shadow + search box visibility) - Timetable strong anti-truncation patch (2026.04) ========================================================================= */ /* ----------------------------- (A) Header background image ----------------------------- */ /* Put the image on the whole header container (override inline bg) */ /* https://indico.ibs.re.kr/event/1189/attachments/5552/8462/jirisan_flower_0.jpg */ /* https://yosanyosoo.com/xe/files/attach/images/115/270/055/d9604aac6ef97ed5f3e57acb3da1254d.jpg */ .confheader { background: #0e304c url("https://yosanyosoo.com/xe/files/attach/images/115/270/055/d9604aac6ef97ed5f3e57acb3da1254d.jpg") center/cover no-repeat !important; border-color: transparent !important; position: relative; } /* Make inner header boxes transparent so the image shows through */ .confheader .confTitleBox, .confheader .confSubTitleBox { background: transparent !important; border-color: transparent !important; } /* Dark overlay to guarantee contrast on bright images (tune alpha) */ .confheader::before { content: ""; position: absolute; inset: 0; /* Option 1: flat overlay */ /* background: rgba(14, 48, 76, 0.55); */ /* Option 2: subtle gradient overlay */ background: linear-gradient( rgba(14, 48, 76, 0.70), rgba(14, 48, 76, 0.55) ); pointer-events: none; } /* Ensure header content sits above overlay */ .confheader > * { position: relative; z-index: 1; } /* ----------------------------- (B) Make header content fluid (default is width:950px in legacy theme) ----------------------------- */ .confheader .confTitleBox .confTitle { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 1.25rem; box-sizing: border-box; } .confheader .confSubTitleBox .confSubTitleContent { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 1.25rem; box-sizing: border-box; } /* ----------------------------- (C) Center the main title (legacy default has text-align:left on confTitleBox) ----------------------------- */ .confheader .confTitleBox, .confheader .confTitleBox .confTitle, .confheader .confTitleBox .confTitle h1 { text-align: center !important; line-height: 8; margin: 0; } .confheader .confTitleBox .confTitle h1 > a { display: block !important; /* full-width clickable line */ } /* Force title wrapper + text centered (override inline color if needed) */ .confheader .conference-title-link { display: block; width: 100%; text-align: center !important; color: #FFFFFF !important; font-size: 45px !important; padding: 0px 0 0px 0 !important; margin: 0 !important; } /* Title readability: shadow (do not rely on shadow alone; overlay does the heavy lifting) */ .confheader .conference-title-link, .confheader .conference-title-link span[itemprop="title"] { text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.85); } /* ----------------------------- (D) Subtitle row: center date/place, keep search box right (our DOM: .confSubTitleContent.flexrow with #event-search-box sibling) ----------------------------- */ .confheader .confSubTitleBox .confSubTitleContent.flexrow { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem; } /* date/place centered */ .confheader .confSubTitleBox .confSubTitleContent.flexrow .confSubTitle { grid-column: 2; justify-self: center; text-align: center !important; color: #FFFFFF !important; text-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.75); } /* timezone a bit dimmer */ .confheader .confSubTitleBox .confSubTitleContent .datePlace .timezone { color: rgba(244,241,227,0.75) !important; } /* search box right */ .confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box { grid-column: 3; justify-self: end; } /* Make search box readable on image background */ .confheader #event-search-box .ui.input { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.20); } .confheader #event-search-box input { color: rgba(255,255,255,0.92) !important; } .confheader #event-search-box input::placeholder { color: rgba(255,255,255,0.70); } /* search icon color */ .confheader #event-search-box i.search.icon { color: rgba(255,255,255,0.80) !important; } /* Mobile: stack subtitle/search */ @media (max-width: 768px) { .confheader .confSubTitleBox .confSubTitleContent.flexrow { grid-template-columns: 1fr !important; row-gap: 0.6rem; } .confheader .confSubTitleBox .confSubTitleContent.flexrow .confSubTitle { grid-column: 1; } .confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box { grid-column: 1; justify-self: center; width: min(520px, 100%); } } /* ----------------------------- (E) Body paragraph justify ----------------------------- */ .confBodyBox p { text-align: justify; text-align-last: left; hyphens: auto; overflow-wrap: break-word; } /* ----------------------------- (F) Timetable strong anti-truncation patch - Keep overall body width unchanged - Force title row to wrap in detailed timetable - Target the actual title/header/link nodes more aggressively ----------------------------- */ /* Let timetable entries breathe a bit */ .timetable .top-level-entry, .timetable .tt-entry, .timetable .entry, .timetable .contribution, .timetable-layout .top-level-entry, .timetable-layout .tt-entry, .timetable-layout .entry, .timetable-layout .contribution, .js-timetable .top-level-entry, .js-timetable .tt-entry, .js-timetable .entry, .js-timetable .contribution { overflow: visible !important; } /* The actual title row/container often causes the clipping */ .timetable .top-level-entry .header, .timetable .top-level-entry .title, .timetable .top-level-entry .tt-entry-title, .timetable .top-level-entry .entry-title, .timetable .top-level-entry .contribution-title, .timetable-layout .top-level-entry .header, .timetable-layout .top-level-entry .title, .timetable-layout .top-level-entry .tt-entry-title, .timetable-layout .top-level-entry .entry-title, .timetable-layout .top-level-entry .contribution-title, .js-timetable .top-level-entry .header, .js-timetable .top-level-entry .title, .js-timetable .top-level-entry .tt-entry-title, .js-timetable .top-level-entry .entry-title, .js-timetable .top-level-entry .contribution-title { display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.12 !important; font-size: 0.90em !important; margin: 0 !important; padding: 0 !important; } /* Force the actual contribution link/title text to wrap */ .timetable .top-level-entry a[href*="/contribution/"], .timetable-layout .top-level-entry a[href*="/contribution/"], .js-timetable .top-level-entry a[href*="/contribution/"] { display: block !important; width: auto !important; max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.12 !important; font-size: 0.90em !important; margin: 0 !important; padding: 0 !important; } /* Make metadata slightly smaller so the title gets room */ .timetable .top-level-entry .speaker, .timetable .top-level-entry .speakers, .timetable .top-level-entry .person-list, .timetable .top-level-entry .location, .timetable .top-level-entry .room, .timetable-layout .top-level-entry .speaker, .timetable-layout .top-level-entry .speakers, .timetable-layout .top-level-entry .person-list, .timetable-layout .top-level-entry .location, .timetable-layout .top-level-entry .room, .js-timetable .top-level-entry .speaker, .js-timetable .top-level-entry .speakers, .js-timetable .top-level-entry .person-list, .js-timetable .top-level-entry .location, .js-timetable .top-level-entry .room { font-size: 0.86em !important; line-height: 1.08 !important; }