body { box-sizing: border-box; margin: 0; padding: 0; background-image: url("https://www.heartbeatinternational.org/images/HeartbeatServices/AnnualConference/2026/2026_Conference_Page_BG.png"); background-size: 100% 100%; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; z-index: -1; min-height: 100%; width: 100%; } .background { background-image: url("https://www.heartbeatinternational.org/images/HeartbeatServices/AnnualConference/2026/2026_Conference_Page_BG.png"); background-size: 100% 100%; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; z-index: -1; } * { box-sizing: border-box; } .container { width: 100%; max-width: 2000px; margin: 0 auto; padding: 20px; min-height: 100%; } .toggle-wrapper { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); margin-bottom: 24px; } .toggle-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .toggle-btn { flex: 1; min-width: 140px; padding: 14px 24px; border: 2px solid #e0e0e0; background: white; color: #555; font-size: 16px; font-weight: 300; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-align: center; } .toggle-btn:hover { border-color: #1e4067; transform: translateY(-2px); } .toggle-btn.active { background: linear-gradient(to bottom, #8d1b5f, #1e4067); color: white; border-color: #1e4067; } .embed-container { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); min-height: 800px; max-width: 100%; } .embed-wrapper { display: none; width: 100%; height: 100%; min-height: 800px; } .embed-wrapper.active { display: block; } .embed-wrapper iframe { width: 100%; min-height: 800px; border: none; border-radius: 8px; } @media (max-width: 768px) { .container { padding: 12px; } .toggle-wrapper { padding: 16px; } .toggle-buttons { gap: 8px; } .toggle-btn { min-width: 120px; padding: 12px 16px; font-size: 14px; } .embed-container { padding: 12px; min-height: 500px; } .embed-wrapper { min-height: 500px; } .embed-wrapper iframe { min-height: 500px; } } @media (max-width: 480px) { .toggle-btn { flex: 1 1 100%; min-width: 100%; } } @view-transition { navigation: auto; } In-Person Agenda Virtual Agenda
