diff --git a/src/app/pages/create-page/create-page.scss b/src/app/pages/create-page/create-page.scss index 28efa9c..4f8a7ac 100644 --- a/src/app/pages/create-page/create-page.scss +++ b/src/app/pages/create-page/create-page.scss @@ -6,10 +6,10 @@ .back { position: absolute; - top: 18px; - left: 18px; - width: 38px; - height: 38px; + top: 14px; + left: 14px; + width: 44px; + height: 44px; border-radius: 50%; display: inline-flex; align-items: center; @@ -44,6 +44,10 @@ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; + + @media (max-width: 360px) { + gap: 6px; + } } .method { @@ -57,6 +61,13 @@ background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; + -webkit-appearance: none; + font-family: inherit; + + @media (max-width: 360px) { + height: 52px; + padding: 6px; + } &__logo { max-width: 100%; @@ -102,16 +113,17 @@ align-items: center; gap: 6px; padding: 0 14px; - height: 38px; + height: 44px; border-radius: 999px; border: 2px solid #e2e8f0; background: #f8fafc; color: #475569; font-family: inherit; - font-size: 13px; + font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; + -webkit-appearance: none; &__flag { font-size: 16px; line-height: 1; } &__sign { diff --git a/src/app/pages/fastcheck-page/fastcheck-page.scss b/src/app/pages/fastcheck-page/fastcheck-page.scss index 17294fb..5b5717b 100644 --- a/src/app/pages/fastcheck-page/fastcheck-page.scss +++ b/src/app/pages/fastcheck-page/fastcheck-page.scss @@ -14,6 +14,7 @@ justify-content: center; padding: 0 16px; height: 48px; + min-width: 64px; border-radius: 12px; font-size: 14px; font-weight: 700; @@ -23,6 +24,7 @@ font-family: inherit; white-space: nowrap; transition: opacity .15s, transform .1s, background .15s; + -webkit-appearance: none; &--ghost { background: #f1f5f9; @@ -69,6 +71,8 @@ justify-content: center; padding: 16px; animation: fade-in .15s ease-out; + overflow-y: auto; + -webkit-overflow-scrolling: touch; @media (max-width: 480px) { align-items: flex-end; @@ -85,29 +89,32 @@ text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.25); animation: pop-in .2s ease-out; + margin: auto; @media (max-width: 480px) { max-width: 100%; border-radius: 24px 24px 0 0; - padding: 24px 20px 32px; + padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); + margin: auto 0 0; } } &__close { position: absolute; - top: 10px; - right: 12px; - width: 36px; - height: 36px; + top: 8px; + right: 8px; + width: 44px; + height: 44px; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; - font-size: 22px; + font-size: 24px; line-height: 1; cursor: pointer; font-family: inherit; transition: background .15s; + -webkit-appearance: none; &:hover { background: #e2e8f0; } } @@ -155,10 +162,11 @@ padding: 12px; width: 264px; height: 264px; + max-width: 100%; margin: 0 auto; - @media (max-width: 360px) { - width: 100%; + @media (max-width: 380px) { + width: min(264px, 70vw); height: auto; aspect-ratio: 1; } @@ -179,18 +187,21 @@ .tg-link { display: inline-flex; align-items: center; + justify-content: center; gap: 8px; margin-top: 16px; - padding: 12px 20px; + padding: 14px 22px; + min-height: 48px; border-radius: 12px; background: #229ED9; color: #fff; - font-size: 14px; + font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity .15s; &:hover { opacity: .9; } + &:active { transform: scale(.97); } } @keyframes fade-in { diff --git a/src/index.html b/src/index.html index ec6b43a..bb037d9 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ Оплата через СБП - + diff --git a/src/shared.scss b/src/shared.scss index 65285f2..c3adbed 100644 --- a/src/shared.scss +++ b/src/shared.scss @@ -7,10 +7,12 @@ align-items: center; justify-content: center; padding: 16px; + padding-top: max(16px, env(safe-area-inset-top)); + padding-bottom: max(16px, env(safe-area-inset-bottom)); background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #0ea5e9 100%); @media (max-width: 480px) { - align-items: flex-end; + align-items: stretch; padding: 0; } } @@ -24,15 +26,22 @@ overflow: hidden; @media (max-width: 480px) { - border-radius: 24px 24px 0 0; + border-radius: 0; max-width: 100%; - box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15); + box-shadow: none; + min-height: 100dvh; + display: flex; + flex-direction: column; } &__header { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); padding: 28px 24px 24px; text-align: center; + + @media (max-width: 480px) { + padding-top: calc(28px + env(safe-area-inset-top)); + } } &__title { @@ -54,6 +63,11 @@ @media (max-width: 480px) { padding: 22px 18px 16px; + flex: 1; + } + + @media (max-width: 360px) { + padding: 18px 14px 12px; } } @@ -63,7 +77,7 @@ justify-content: center; @media (max-width: 480px) { - padding: 0 18px 28px; + padding: 0 18px calc(22px + env(safe-area-inset-bottom)); } } } @@ -153,6 +167,7 @@ justify-content: center; gap: 10px; padding: 16px 24px; + min-height: 52px; background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); color: #fff; border: none; @@ -164,6 +179,7 @@ transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38); font-family: inherit; + -webkit-appearance: none; &:hover { opacity: 0.92; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45); } &:active { transform: scale(0.98); opacity: 0.88; } diff --git a/src/styles.scss b/src/styles.scss index 577dd03..7c8f115 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -2,15 +2,36 @@ box-sizing: border-box; margin: 0; padding: 0; + -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } +html { + // Prevent iOS rubber-band overscroll showing white background + background: #1e40af; + // Prevent iOS auto-zoom on form fields with small text + -webkit-text-size-adjust: 100%; +} + body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #1e40af; + // Avoid iOS overscroll bounce leaking other pages on PWA + overscroll-behavior-y: none; +} + +// Disable long-press image saving / callout on payment-method logos +img { + -webkit-touch-callout: none; + user-select: none; +} + +// Inputs: ensure ≥16px font-size to prevent iOS Safari from auto-zooming on focus +input, textarea, select, button { + font-size: 16px; }