/* ════════════════════════════════════════════════════ PHENIICS Fest 2026 — Cosmic Edition Drop into Indico › Administration › Layout › CSS ════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap'); /* ── HIDE DUPLICATE TITLE TEXT (BUT KEEP THE IMAGE VISIBLE) ─────── */ /* 1. Make any text inside the header invisible */ .confTitle h1, .conference-title-link { font-size: 0 !important; color: transparent !important; text-indent: -9999px !important; } /* 2. Hide the span directly if Indico wraps the text in one */ .conference-title-link span { display: none !important; } /* 3. Force the Indico banner image to display and apply your styling */ .confTitle img, .conference-title-link img, #confLogo { display: block !important; font-size: 1rem !important; /* Resets font size just in case */ text-indent: 0 !important; /* Your banner styling */ max-width: min(1100px, 92vw) !important; width: auto !important; height: auto !important; max-height: 420px !important; margin: 0 auto !important; object-fit: contain !important; border-radius: 18px !important; } /* ── PAGE BACKGROUND — Cosmic starry night ──────────── */ body, #mainContent, .clearfix, #pageContent { background: #0e1e3a !important; } /* Deep nebula atmosphere */ body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 55% at 20% 15%, rgba(60, 90, 180, 0.22) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 80% 80%, rgba(100, 50, 160, 0.16) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 55% 45%, rgba(20, 60, 130, 0.12) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Starfield */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 3% 5%, rgba(255,255,255,0.85) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 11% 14%, rgba(255,255,255,0.60) 0%, transparent 100%), radial-gradient(1px 1px at 19% 8%, rgba(200,225,255,0.70) 0%, transparent 100%), radial-gradient(2px 2px at 28% 22%, rgba(255,218, 90,0.75) 0%, transparent 100%), radial-gradient(1px 1px at 37% 3%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 46% 17%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(1px 1px at 54% 9%, rgba(200,220,255,0.60) 0%, transparent 100%), radial-gradient(1px 1px at 62% 26%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(2px 2px at 71% 6%, rgba(255,218, 90,0.65) 0%, transparent 100%), radial-gradient(1px 1px at 79% 19%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 87% 11%, rgba(200,225,255,0.70) 0%, transparent 100%), radial-gradient(1px 1px at 94% 4%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 6% 33%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 15% 41%, rgba(255,218, 90,0.50) 0%, transparent 100%), radial-gradient(1px 1px at 24% 38%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 33% 47%, rgba(200,220,255,0.55) 0%, transparent 100%), radial-gradient(2px 2px at 43% 54%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(1px 1px at 52% 43%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 61% 61%, rgba(255,218, 90,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 69% 49%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 78% 57%, rgba(200,225,255,0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 86% 44%, rgba(255,255,255,0.60) 0%, transparent 100%), radial-gradient(1px 1px at 95% 52%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 8% 68%, rgba(255,218, 90,0.45) 0%, transparent 100%), radial-gradient(2px 2px at 17% 76%, rgba(255,255,255,0.70) 0%, transparent 100%), radial-gradient(1px 1px at 26% 84%, rgba(200,220,255,0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 35% 71%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 44% 89%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 53% 78%, rgba(255,218, 90,0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 63% 93%, rgba(255,255,255,0.60) 0%, transparent 100%), radial-gradient(1px 1px at 72% 74%, rgba(200,225,255,0.45) 0%, transparent 100%), radial-gradient(2px 2px at 81% 86%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(1px 1px at 90% 79%, rgba(255,218, 90,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 97% 91%, rgba(255,255,255,0.40) 0%, transparent 100%); pointer-events: none; z-index: 0; } /* ── HEADER BAND ────────────────────────────────────── */ .confTitleBox { background: linear-gradient(150deg, #091428 0%, #0e1e3a 45%, #132448 100%) !important; border: none !important; padding: 44px 0 40px !important; position: relative; overflow: hidden; } /* Ambient glow behind banner */ .confTitleBox::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 90% at 50% 115%, rgba(180, 118, 18, 0.20) 0%, transparent 65%), radial-gradient(ellipse 35% 50% at 15% -5%, rgba( 80, 130, 255, 0.08) 0%, transparent 55%), radial-gradient(ellipse 30% 40% at 85% -5%, rgba(200, 160, 255, 0.05) 0%, transparent 55%); pointer-events: none; } /* ── BANNER IMAGE ───────────────────────────────────── */ .confLogoBannerBox { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; } .confLogoBannerBox img { display: block !important; max-width: min(1100px, 92vw) !important; width: auto !important; height: auto !important; max-height: 420px !important; margin: 0 auto !important; object-fit: contain !important; border-radius: 18px; } /* ── DATE / SEARCH BAR ──────────────────────────────── */ .confSubTitleBox { background: rgba(12, 24, 52, 0.88) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: none !important; border-top: 1px solid rgba(212, 175, 55, 0.10) !important; border-bottom: 1px solid rgba(212, 175, 55, 0.10) !important; box-shadow: none !important; } .confSubTitleBox, .confSubTitleBox * { font-family: 'DM Sans', sans-serif !important; color: rgba(175, 200, 240, 0.70) !important; font-size: 13px !important; letter-spacing: 0.04em; } /* ── MAIN LAYOUT ────────────────────────────────────── */ #confSectionsBox { width: min(1270px, 92vw) !important; display: flex !important; gap: 30px !important; align-items: flex-start !important; padding-top: 34px !important; position: relative; z-index: 1; } /* ── SIDE MENU — Glass card ─────────────────────────── */ .conf_leftMenu { float: none !important; width: 228px !important; flex: 0 0 228px !important; } #outer { border: 1px solid rgba(212, 175, 55, 0.14) !important; border-radius: 20px !important; overflow: hidden !important; background: rgba(12, 26, 58, 0.82) !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 52px rgba(0, 0, 0, 0.42) !important; animation: fadeUp 0.55s ease 0.12s both; } .menuConfTitle a, .menuConfMiddleCell a, .menuConfBottomCell a { padding: 11px 18px !important; font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; color: rgba(170, 195, 238, 0.72) !important; letter-spacing: 0.02em; border-left: 2px solid transparent !important; transition: background 0.2s, color 0.2s, border-color 0.2s; display: block; } .menuConfTitle a:hover, .menuConfMiddleCell a:hover { background: rgba(212, 175, 55, 0.09) !important; color: rgba(210, 168, 60, 0.90) !important; border-left-color: rgba(212, 175, 55, 0.38) !important; } .menuConfTitle.selected > a, .menuConfMiddleCell.selected > a { background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.04)) !important; color: #c9a030 !important; border-left: 2px solid #d4af37 !important; font-weight: 500 !important; } /* ── CONTENT CARD ───────────────────────────────────── */ .confBodyBox { margin-left: 0 !important; flex: 1 !important; background: rgba(12, 26, 58, 0.75) !important; border-radius: 22px !important; border: 1px solid rgba(212, 175, 55, 0.11) !important; padding: 46px 54px !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 64px rgba(0, 0, 0, 0.38) !important; position: relative; overflow: hidden; animation: fadeUp 0.55s ease both; } /* Radial gold glow, top-right */ .confBodyBox::before { content: ""; position: absolute; top: -100px; right: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 68%); pointer-events: none; } /* Bottom-left accent */ .confBodyBox::after { content: ""; position: absolute; bottom: -80px; left: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(80,130,255,0.05) 0%, transparent 68%); pointer-events: none; } /* ── TYPOGRAPHY ─────────────────────────────────────── */ .confBodyBox, .confBodyBox p, .confBodyBox li, .confBodyBox td, .confBodyBox span { font-family: 'DM Sans', sans-serif !important; font-size: 15.5px !important; line-height: 1.82 !important; color: rgba(185, 208, 248, 0.82) !important; } .confBodyBox h1, .confBodyBox h2, .confBodyBox h3, .confBodyBox h4 { font-family: 'Cormorant Garamond', serif !important; color: rgba(215, 192, 130, 0.90) !important; letter-spacing: 0.01em; line-height: 1.3; } .confBodyBox h2 { font-size: 30px !important; font-weight: 600 !important; margin-bottom: 0.4em; } .confBodyBox h3 { font-size: 23px !important; font-weight: 600 !important; } .confBodyBox strong { color: rgba(200, 175, 110, 0.90) !important; font-weight: 500 !important; } /* Animated gold rule beneath h2 */ .confBodyBox h2::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 12px; margin-bottom: 4px; background: linear-gradient(90deg, #92540a, #c49a28, #92540a); background-size: 200% 100%; animation: shimmer 4s linear infinite; border-radius: 999px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── LINKS ──────────────────────────────────────────── */ a, .confBodyBox a { color: #7ab8ea !important; text-decoration: none !important; transition: color 0.22s; } a:hover, .confBodyBox a:hover { color: #c49a28 !important; } /* ── ENTRANCE ANIMATION ─────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ── MULTIPLE CHOICE / CHECKBOX / RADIO OPTIONS ─────── */ /* The option labels were inheriting the faint body blue; bump them to a warmer, more opaque tone so they're easy to scan down a list. */ input[type="radio"] + label, input[type="checkbox"] + label, .regform-field input[type="radio"] + label, .regform-field input[type="checkbox"] + label, .i-form input[type="radio"] + label, .i-form input[type="checkbox"] + label, .regform-field .field label, .i-form .checkbox label, .i-form .radio label, .regform-field .option-text, .choice-text, .multi-choice-field label, .multi-choice-field .option { color: rgba(228, 208, 158, 0.94) !important; font-family: 'DM Sans', sans-serif !important; font-size: 14.5px !important; } /* Hover — nudge to a soft gold so it feels interactive */ input[type="radio"] + label:hover, input[type="checkbox"] + label:hover, .regform-field input[type="radio"] + label:hover, .regform-field input[type="checkbox"] + label:hover { color: rgba(210, 168, 60, 0.95) !important; cursor: pointer; } /* Checked state — make the selected option stand out slightly */ input[type="radio"]:checked + label, input[type="checkbox"]:checked + label, .regform-field input[type="radio"]:checked + label, .regform-field input[type="checkbox"]:checked + label { color: #c9a030 !important; font-weight: 500 !important; }