diff --git a/public/style.css b/public/style.css index 635c77c..020ff3e 100644 --- a/public/style.css +++ b/public/style.css @@ -787,15 +787,15 @@ hr { border: none; border-top: var(--border); margin: 0; } .card-coord-tag { position: absolute; - bottom: 6px; left: 8px; + bottom: 8px; left: 10px; font-family: var(--font-mono); - font-size: 0.45rem; - color: rgba(232,168,0,0.6); + font-size: 0.58rem; + color: rgba(232,168,0,0.9); letter-spacing: 0.05em; z-index: 5; pointer-events: none; - background: rgba(0,0,0,0.35); - padding: 1px 5px; + background: #111; + padding: 2px 7px; } /* Construction line under collection header */ @@ -861,6 +861,126 @@ hr { border: none; border-top: var(--border); margin: 0; } 100% { height: 10px; } } +/* ---- CONTACT MODAL ---- */ +.contact-modal { + position: fixed; + inset: 0; + z-index: 1001; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} +.contact-modal.is-open { + opacity: 1; + pointer-events: auto; +} +.contact-modal-backdrop { + position: absolute; + inset: 0; + background: rgba(0,0,0,0.6); +} +.contact-modal-content { + position: relative; + background: var(--clr-bg); + border: 2px solid var(--clr-black); + width: 90%; + max-width: 480px; + max-height: 90vh; + overflow-y: auto; + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.2rem; + pointer-events: auto; +} +.contact-modal-header { + display: flex; + justify-content: space-between; + align-items: center; +} +.contact-modal-close { + background: none; + border: 1px solid var(--clr-black); + font-family: var(--font-mono); + font-size: 0.85rem; + width: 32px; height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: none; + pointer-events: auto; + transition: background 0.15s, color 0.15s; +} +.contact-modal-close:hover { + background: var(--clr-black); + color: var(--clr-white); +} +.contact-modal-title { + font-size: clamp(1.6rem, 3vw, 2.2rem); + font-weight: 700; + line-height: 1; + letter-spacing: -0.01em; +} +.contact-form { + display: flex; + flex-direction: column; + gap: 0; +} +.contact-field { + display: flex; + flex-direction: column; + gap: 0.3rem; + padding: 0.8rem 0; + border-bottom: 1px solid rgba(0,0,0,0.12); +} +.contact-field label { + font-size: 0.68rem; + font-weight: 700; + color: #555; + letter-spacing: 0.05em; +} +.contact-field input, +.contact-field textarea { + border: none; + background: transparent; + font-family: var(--font-mono); + font-size: 0.82rem; + outline: none; + cursor: none; + padding: 0; + color: var(--clr-black); + pointer-events: auto; + resize: vertical; +} +.contact-field input::placeholder, +.contact-field textarea::placeholder { color: #aaa; } +.contact-submit { + margin-top: 1rem; + background: var(--clr-black); + color: #e8a800; + border: none; + font-family: var(--font-mono); + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.04em; + padding: 1.1rem 1.5rem; + cursor: none; + text-align: center; + transition: background 0.15s, color 0.15s; + pointer-events: auto; +} +.contact-submit:hover { + background: #e8a800; + color: var(--clr-black); +} +.contact-note { + margin-top: 0.6rem; + text-align: center; +} + /* ---- RESPONSIVE ---- */ @media (max-width: 900px) { .hero, .newsletter { grid-template-columns: 1fr; } diff --git a/src/pages/collection/[slug].astro b/src/pages/collection/[slug].astro index e5ede3d..e704858 100644 --- a/src/pages/collection/[slug].astro +++ b/src/pages/collection/[slug].astro @@ -166,7 +166,7 @@ const schemaBreadcrumb = { REBOURS @@ -255,12 +255,47 @@ const schemaBreadcrumb = { + + +
diff --git a/src/pages/index.astro b/src/pages/index.astro index 36f8f7b..20c4a9b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -130,7 +130,7 @@ const schemaOrg = { REBOURS @@ -222,12 +222,47 @@ const schemaOrg = { + + +
diff --git a/src/scripts/main.js b/src/scripts/main.js index e6598a7..d62aa00 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -660,4 +660,66 @@ document.addEventListener('DOMContentLoaded', () => { } } + // ========================================================== + // 7. CONTACT MODAL + // ========================================================== + + const contactModal = document.getElementById('contact-modal'); + const contactForm = document.getElementById('contact-form'); + + function openContactModal() { + if (!contactModal) return; + contactModal.classList.add('is-open'); + contactModal.setAttribute('aria-hidden', 'false'); + document.body.style.overflow = 'hidden'; + attachCursorHover(contactModal.querySelectorAll('button, input, textarea')); + } + + function closeContactModal() { + if (!contactModal) return; + contactModal.classList.remove('is-open'); + contactModal.setAttribute('aria-hidden', 'true'); + if (!panel.classList.contains('is-open')) { + document.body.style.overflow = ''; + } + } + + // Trigger links + document.querySelectorAll('.contact-trigger').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + openContactModal(); + }); + }); + + // Close button + const contactCloseBtn = contactModal?.querySelector('.contact-modal-close'); + if (contactCloseBtn) contactCloseBtn.addEventListener('click', closeContactModal); + + // Backdrop click + const contactBackdrop = contactModal?.querySelector('.contact-modal-backdrop'); + if (contactBackdrop) contactBackdrop.addEventListener('click', closeContactModal); + + // Escape key + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && contactModal?.classList.contains('is-open')) { + closeContactModal(); + } + }); + + // Form → mailto + if (contactForm) { + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + const name = document.getElementById('contact-name').value.trim(); + const email = document.getElementById('contact-email').value.trim(); + const subject = document.getElementById('contact-subject').value.trim() || 'Contact depuis rebours.studio'; + const message = document.getElementById('contact-message').value.trim(); + + const body = `${message}\n\n— ${name}\n${email}`; + const mailto = `mailto:contact@rebours.fr?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; + window.location.href = mailto; + }); + } + });