/* ========================================================================== CONTACT SECTION — Eoin O'Hara Coaching site -------------------------------------------------------------------------- This section is inserted by the small script at the end of index.html's rather than living in the HTML directly. Framer's own client-side script re-renders the main page content after it loads and strips out any element it doesn't recognise, so a section added straight to the HTML would just disappear a second after the page opens. Building it in JS lets it re-insert itself whenever that happens. The styling itself is ordinary CSS and lives here so it's easy to find and edit - only the insertion has to happen in JS. ========================================================================== */ .contact-section { background-color: rgb(0, 0, 0); padding: 80px 40px; width: 100%; box-sizing: border-box; } .contact-section__inner { max-width: 1200px; margin: 0 auto; } .contact-section__eyebrow { color: rgb(118, 118, 118); font-family: "Inter", "Inter Placeholder", sans-serif; font-size: 16px; font-weight: 400; margin: 0 0 8px; text-align: center; } .contact-section__title { color: rgb(255, 255, 255); font-family: "General Sans", "General Sans Placeholder", sans-serif; font-size: 40px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 48px; text-align: center; } .contact-section__grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-card { align-items: flex-start; background-color: rgb(33, 33, 33); border-radius: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; } .contact-card:hover { background-color: rgb(43, 43, 43); transform: translateY(-4px); } .contact-card__icon { align-items: center; background-color: rgb(255, 255, 255); border-radius: 999px; display: flex; flex-shrink: 0; height: 56px; justify-content: center; width: 56px; } .contact-card__icon svg { height: 24px; width: 24px; } .contact-card__title { color: rgb(255, 255, 255); font-family: "General Sans", "General Sans Placeholder", sans-serif; font-size: 20px; font-weight: 500; margin: 0; } .contact-card__meta { align-items: center; color: rgb(249, 101, 47); display: flex; font-family: "Inter", "Inter Placeholder", sans-serif; font-size: 15px; font-weight: 500; gap: 8px; margin-top: auto; } .contact-card__meta svg { height: 14px; width: 14px; } @media (max-width: 809.98px) { .contact-section { padding: 56px 16px; } .contact-section__title { font-size: 32px; } .contact-section__grid { grid-template-columns: 1fr; } } @media (min-width: 810px) and (max-width: 1199.98px) { .contact-section { padding: 64px 32px; } .contact-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }