:root { --primary: #101010; --secondary: #883FF9; --text: #AAAAAA; --accent: #EC167F; --white: #FFFFFF; } /* Remove any default margins/padding that might cause white space */ html, body { margin: 0; padding: 0; background: var(--primary); } body.events-template, .tribe-events, .site, .site-content { background: var(--primary) !important; color: var(--text); font-family: 'Poppins', sans-serif; margin: 0; padding: 0; } .site-content { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Fix heading going behind navbar */ .custom-events-header { text-align: center; padding: 7rem 1rem 2rem; background: var(--primary); } .custom-events-header h1 { color: var(--white); font-size: 2.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.8rem; position: relative; display: inline-block; } .custom-events-header h1::after { content: ''; position: absolute; left: 50%; bottom: -0.6rem; transform: translateX(-50%); width: 60px; height: 3px; background: var(--accent); border-radius: 5px; } /* Events List */ .tribe-events-calendar-list { display: flex; flex-direction: column; gap: 2.5rem; margin: 2rem auto 0; padding: 0 1rem 3rem; max-width: 1000px; list-style: none; } .tribe-events-calendar-list li { background: #161616; border-radius: 1rem; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.4); transition: all 0.3s ease; display: flex; align-items: stretch; flex-wrap: wrap; } .tribe-events-calendar-list li:hover { transform: translateY(-5px); box-shadow: 0 0 25px rgba(236,22,127,0.3); } .event-thumb { flex: 1 1 40%; min-width: 300px; height: auto; overflow: hidden; } .event-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .tribe-events-calendar-list li:hover .event-thumb img { transform: scale(1.08); } .event-body { flex: 1 1 60%; padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .tribe-event-title { color: var(--white); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.6rem; } .tribe-event-title a { color: var(--white); text-decoration: none; transition: color 0.3s ease; } .tribe-event-title a:hover { color: var(--accent); } .tribe-event-date { color: var(--secondary); font-size: 0.95rem; font-weight: 500; margin-bottom: 0.9rem; } .tribe-event-description { color: var(--text); font-size: 0.95rem; line-height: 1.6; flex-grow: 1; } .view-more { display: inline-block; margin-top: 1.2rem; color: var(--accent); font-weight: 600; text-decoration: none; border: 1px solid var(--accent); padding: 0.6rem 1.3rem; border-radius: 30px; transition: all 0.3s ease; align-self: flex-start; } .view-more:hover { background: var(--accent); color: var(--white); } /* ✅ Mobile Fix */ @media (max-width: 992px) { .custom-events-header { padding-top: 6rem; } .tribe-events-calendar-list li { flex-direction: column; text-align: center; } .event-thumb { width: 100%; height: 220px; } .event-body { padding: 1.25rem; text-align: center; align-items: center; } .tribe-event-title { font-size: 1.1rem; } .view-more { margin-top: 1rem; align-self: center; } } @media (max-width: 480px) { .custom-events-header h1 { font-size: 1.8rem; } .custom-events-header { padding-top: 5.5rem; } .event-thumb { height: 180px; } .tribe-event-title { font-size: 1rem; } .tribe-event-description { font-size: 0.9rem; } }