diff --git a/styles.css b/styles.css index 2eaff3f..9dad1db 100644 --- a/styles.css +++ b/styles.css @@ -890,19 +890,64 @@ button { .contact-flyover__panel { top: auto; - right: 1rem; - bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); - left: 1rem; - width: calc(100vw - 2rem); - max-width: calc(100vw - 2rem); - max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom, 0px)); - padding: 1.5rem; + right: 1.25rem; + bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); + left: 1.25rem; + width: calc(100vw - 2.5rem); + max-width: calc(100vw - 2.5rem); + max-height: calc(100dvh - 6rem - env(safe-area-inset-bottom, 0px)); + padding: 1.2rem; + border-top-left-radius: 2rem; + border-top-right-radius: 2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + .contact-flyover__close { + top: 0.8rem; + right: 0.8rem; + width: 2rem; + height: 2rem; + font-size: 1.5rem; + } + + .contact-flyover__eyebrow { + margin-bottom: 0.25rem; + font-size: 0.8rem; + letter-spacing: 0.07em; + } + + .contact-flyover h2 { + font-size: clamp(1.75rem, 9vw, 2.5rem); + line-height: 0.94; + max-width: 7ch; + } + + .contact-flyover__intro { + margin: 0; + font-size: 0.95rem; + line-height: 1.25; + max-width: 15ch; + } + + .contact-flyover__list { + gap: 0.8rem; + margin-top: 1rem; + } + .contact-item { grid-template-columns: 1fr; + gap: 0.45rem; + padding: 0.9rem; + } + + .contact-item__label { + font-size: 0.8rem; + } + + .contact-item__value { + font-size: 0.9rem; + line-height: 1.08; } .copy-button { @@ -911,5 +956,9 @@ button { justify-content: center; justify-self: stretch; width: 100%; + min-width: 0; + min-height: 3rem; + padding: 0.8rem 1rem; + font-size: 0.95rem; } }