diff --git a/index.html b/index.html index c3fc55d..9aca661 100644 --- a/index.html +++ b/index.html @@ -214,6 +214,9 @@ @@ -293,6 +296,58 @@ + + diff --git a/script.js b/script.js index 3caf769..24b442f 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,9 @@ const flyover = document.querySelector("[data-contact-flyover]"); const flyoverPanel = document.querySelector(".contact-flyover__panel"); const openButtons = document.querySelectorAll("[data-open-contact]"); const closeButtons = document.querySelectorAll("[data-close-contact]"); +const privacyFlyover = document.querySelector("[data-privacy-flyover]"); +const openPrivacyButtons = document.querySelectorAll("[data-open-privacy]"); +const closePrivacyButtons = document.querySelectorAll("[data-close-privacy]"); const copyButtons = document.querySelectorAll("[data-copy-value]"); let lastTrigger = null; @@ -41,7 +44,23 @@ const openFlyover = (trigger) => { const closeFlyover = () => { if (!flyover) return; flyover.hidden = true; - document.body.classList.remove("is-scroll-locked"); + if (!privacyFlyover || privacyFlyover.hidden) { + document.body.classList.remove("is-scroll-locked"); + } +}; + +const openPrivacyFlyover = () => { + if (!privacyFlyover) return; + privacyFlyover.hidden = false; + document.body.classList.add("is-scroll-locked"); +}; + +const closePrivacyFlyover = () => { + if (!privacyFlyover) return; + privacyFlyover.hidden = true; + if (!flyover || flyover.hidden) { + document.body.classList.remove("is-scroll-locked"); + } }; openButtons.forEach((button) => { @@ -52,10 +71,22 @@ closeButtons.forEach((button) => { button.addEventListener("click", closeFlyover); }); +openPrivacyButtons.forEach((button) => { + button.addEventListener("click", openPrivacyFlyover); +}); + +closePrivacyButtons.forEach((button) => { + button.addEventListener("click", closePrivacyFlyover); +}); + document.addEventListener("keydown", (event) => { if (event.key === "Escape" && flyover && !flyover.hidden) { closeFlyover(); } + + if (event.key === "Escape" && privacyFlyover && !privacyFlyover.hidden) { + closePrivacyFlyover(); + } }); window.addEventListener("resize", () => { diff --git a/styles.css b/styles.css index 4c16ab8..d188443 100644 --- a/styles.css +++ b/styles.css @@ -543,6 +543,32 @@ button { text-transform: uppercase; } +.footer__privacy-button { + width: fit-content; + margin-top: 0.9rem; + padding: 0.45rem 0.85rem; + border: 1px solid rgba(47, 58, 24, 0.2); + border-radius: 999px; + background: transparent; + color: var(--text-dark); + font-size: 0.82rem; + font-weight: var(--font-weight-bold); + letter-spacing: 0.04em; + text-transform: uppercase; + cursor: pointer; + transition: + background 180ms ease, + border-color 180ms ease, + transform 180ms ease; +} + +.footer__privacy-button:hover, +.footer__privacy-button:focus-visible { + background: rgba(47, 58, 24, 0.08); + border-color: rgba(47, 58, 24, 0.34); + transform: translateY(-1px); +} + .footer__claim { display: flex; flex-direction: column; @@ -691,6 +717,90 @@ button { background: #ef49ae; } +.privacy-flyover { + position: fixed; + inset: 0; + z-index: 21; + overflow-y: auto; + overscroll-behavior: contain; +} + +.privacy-flyover__backdrop { + position: absolute; + inset: 0; + background: rgba(24, 27, 18, 0.44); + backdrop-filter: blur(3px); +} + +.privacy-flyover__panel { + position: relative; + width: min(680px, calc(100vw - 2rem)); + max-height: calc(100vh - 2rem); + margin: 2rem auto; + overflow-x: hidden; + overflow-y: auto; + padding: 2rem; + border-radius: var(--radius-panel); + background: var(--bg-light); + box-shadow: var(--shadow-panel); +} + +.privacy-flyover__close { + position: absolute; + top: 0.9rem; + right: 0.9rem; + width: 2.4rem; + height: 2.4rem; + border: 0; + border-radius: 999px; + background: rgba(47, 58, 24, 0.08); + color: var(--text-dark); + cursor: pointer; +} + +.privacy-flyover__eyebrow { + margin: 0 0 0.4rem; + font-size: 0.95rem; + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: 0.08em; + color: rgba(54, 65, 33, 0.72); +} + +.privacy-flyover h2 { + margin: 0; + padding-right: 2.75rem; + font-size: clamp(1.85rem, 3vw, 2.6rem); + line-height: 0.96; + font-weight: var(--font-weight-black); + text-transform: uppercase; +} + +.privacy-flyover__content { + display: grid; + gap: 1rem; + margin-top: 1.4rem; +} + +.privacy-flyover__content p, +.privacy-flyover__responsible p { + margin: 0; + font-size: 1rem; + line-height: 1.55; +} + +.privacy-flyover__responsible { + display: grid; + gap: 0.35rem; + padding: 1rem; + border-radius: var(--radius-small); + background: #edf1cc; +} + +.privacy-flyover__responsible a { + color: inherit; +} + [hidden] { display: none !important; } @@ -880,6 +990,11 @@ button { gap: 0.5rem; } + .footer__privacy-button { + margin-top: 0.35rem; + font-size: 0.78rem; + } + .footer__claim-meta { align-items: flex-start; margin-top: 1.15rem; @@ -963,4 +1078,43 @@ button { padding: 0.8rem 1rem; font-size: 0.95rem; } + + .privacy-flyover__panel { + width: calc(100vw - 2.5rem); + max-height: calc(100dvh - 2.5rem); + margin: 1.25rem auto; + padding: 1.2rem; + border-radius: 2rem; + } + + .privacy-flyover__close { + top: 0.8rem; + right: 0.8rem; + width: 2rem; + height: 2rem; + font-size: 1.5rem; + } + + .privacy-flyover__eyebrow { + margin-bottom: 0.25rem; + font-size: 0.8rem; + letter-spacing: 0.07em; + } + + .privacy-flyover h2 { + font-size: clamp(1.3rem, 6vw, 1.7rem); + line-height: 1.05; + text-transform: none; + } + + .privacy-flyover__content { + gap: 0.85rem; + margin-top: 1rem; + } + + .privacy-flyover__content p, + .privacy-flyover__responsible p { + font-size: 0.95rem; + line-height: 1.5; + } }