/* ======================================== CONTACT MODAL STYLES Component: contact-modal ======================================== This file contains styles for the contact modal overlay. All selectors are scoped to the modal's ID to prevent conflicts. INTEGRATION: - Link in of parent page - Uses global typography variables from index.html: --font-primary, --font-accent, --body-font-size, --header-font-size, etc. ======================================== */ /* ======================================== CONTACT MODAL STRUCTURE ======================================== */ /* The background overlay */ #contact-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); /* Blur background without breaking sticky positioning */ -webkit-backdrop-filter: blur(5px); /* Safari support */ opacity: 0; visibility: hidden; z-index: 100; transition: opacity 0.4s ease, visibility 0s 0.4s; } /* The slide-in modal panel */ #contact-modal { position: fixed; top: 0; right: 0; width: 40%; max-width: 600px; min-width: 400px; height: 100%; background: var(--color-bg, #FFFFFF); color: var(--color-text, #000); z-index: 101; padding: var(--spacing-double, 40px); box-sizing: border-box; overflow-y: auto; /* Start hidden and off-screen */ opacity: 0; visibility: hidden; transform: translateX(100%); transition: all 0.5s cubic-bezier(0.83, 0, 0.17, 1); } /* ======================================== MODAL OPEN STATE ======================================== */ /* Background elements blur when modal is open */ /* DISABLED: filter on main breaks position: sticky for all child elements (color tags + personal works horizontal scroll). Using backdrop-filter on overlay instead for same visual effect without positioning issues. */ /* body.modal-is-open #loader-screen, body.modal-is-open header, body.modal-is-open main { filter: blur(5px); transition: filter 0.4s ease; } */ /* Overlay visible state */ body.modal-is-open #contact-overlay { opacity: 1; visibility: visible; transition: opacity 0.4s ease; } /* Modal visible state */ body.modal-is-open #contact-modal { opacity: 1; visibility: visible; transform: translateX(0); } /* ======================================== MODAL HEADER ======================================== */ #contact-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } #contact-modal .contact-title { font-family: var(--font-primary); font-size: var(--header-font-size); font-weight: var(--header-font-weight); } #contact-close-btn { pointer-events: auto; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-primary); font-size: var(--header-font-size); font-weight: var(--header-font-weight); } #contact-close-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ======================================== MODAL INTRO & FORM ======================================== */ #contact-modal .modal-intro-text { font-family: var(--font-primary); font-size: var(--body-font-size); font-weight: var(--body-font-weight); line-height: var(--body-line-height); margin-bottom: 30px; } #contact-modal .form-group { margin-bottom: 20px; } #contact-modal .form-group label { display: block; margin-bottom: 15px; font-family: 'Cormorant Infant', serif; font-style: italic; font-size: 1.4rem; font-weight: 500; color: var(--color-text, #000); } #contact-modal .form-group input, #contact-modal .form-group select, #contact-modal .form-group textarea { width: 100%; padding: 15px 0; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: transparent; font-family: var(--font-primary, 'Hanken Grotesk', sans-serif); font-size: 1.1em; box-sizing: border-box; border-radius: 0; transition: border-color 0.3s ease; } #contact-modal .form-group input:focus, #contact-modal .form-group select:focus, #contact-modal .form-group textarea:focus { outline: none; border-bottom: 1px solid var(--color-text, #000); } #contact-modal .form-group textarea { resize: vertical; } #form-submit-btn { width: 100%; padding: 25px 20px; background: transparent; color: var(--color-text, #000); border: 2px solid var(--color-text, #000); font-family: 'Cormorant Infant', serif; font-size: 1.4rem; font-style: italic; font-weight: 400; cursor: pointer; text-align: left; margin-top: 20px; transition: all 0.3s ease; display: flex; align-items: flex-end; justify-content: flex-start; } #form-submit-btn:hover { background: var(--color-text, #000); color: var(--color-bg, #FFFFFF); } /* ======================================== UNDERLINE HOVER UTILITY (scoped) ======================================== */ #contact-modal .u-underline-hover { position: relative; cursor: pointer; display: inline-block; width: fit-content; } #contact-modal .u-underline-hover::after { content: ''; position: absolute; width: 0%; height: 1px; background-color: var(--color-text, #000); bottom: -5px; left: 0; transition: width 0.3s ease-out; } #contact-modal .u-underline-hover:hover::after, #contact-modal .u-underline-hover:focus-visible::after { width: 100%; } /* ======================================== RESPONSIVE LAYOUTS ======================================== */ @media (max-width: 1024px) { #contact-modal { width: 95%; max-width: none; min-width: unset; } }