| @@ -10,8 +10,9 @@ | ||
| 10 | 10 | } |
| 11 | 11 | |
| 12 | 12 | .bkbg-sbc-wrap { |
| 13 | 13 | max-width: 500px; |
| 14 | + width: 100%; | |
| 14 | 15 | margin: 0 auto; |
| 15 | 16 | background: #fff; |
| 16 | 17 | border-radius: 16px; |
| 17 | 18 | padding: 36px 32px; |
| @@ -40,9 +41,8 @@ | ||
| 40 | 41 | font-style: var(--bksbc-st-font-style); |
| 41 | 42 | text-decoration: var(--bksbc-st-text-decoration); |
| 42 | 43 | text-transform: var(--bksbc-st-text-transform); |
| 43 | 44 | margin: 0; |
| 44 | - opacity: .7; | |
| 45 | 45 | line-height: var(--bksbc-st-line-height-d); |
| 46 | 46 | letter-spacing: var(--bksbc-st-letter-spacing-d); |
| 47 | 47 | word-spacing: var(--bksbc-st-word-spacing-d); |
| 48 | 48 | } |
| @@ -141,8 +141,9 @@ | ||
| 141 | 141 | color: rgba(255,255,255,.8); |
| 142 | 142 | margin-bottom: 6px; |
| 143 | 143 | } |
| 144 | 144 | .bkbg-sbc-result-amount { |
| 145 | + overflow-wrap: anywhere; | |
| 145 | 146 | font-family: var(--bksbc-rs-font-family, inherit); |
| 146 | 147 | font-size: var(--bksbc-rs-font-size-d, 56px); |
| 147 | 148 | font-weight: var(--bksbc-rs-font-weight, 800); |
| 148 | 149 | font-style: var(--bksbc-rs-font-style); |
| @@ -164,8 +165,10 @@ | ||
| 164 | 165 | } |
| 165 | 166 | .bkbg-sbc-breakdown-row { |
| 166 | 167 | display: flex; |
| 167 | 168 | justify-content: space-between; |
| 169 | + gap: 12px; | |
| 170 | + overflow-wrap: anywhere; | |
| 168 | 171 | padding: 5px 0; |
| 169 | 172 | font-size: 14px; |
| 170 | 173 | border-bottom: 1px solid #ede9fe; |
| 171 | 174 | } |
| @@ -204,8 +207,9 @@ | ||
| 204 | 207 | word-spacing: var(--bksbc-rs-word-spacing-t, var(--bksbc-rs-word-spacing-d)); |
| 205 | 208 | } |
| 206 | 209 | } |
| 207 | 210 | @media (max-width: 767px) { |
| 211 | + .bkbg-sbc-wrap { padding: 24px 20px; } | |
| 208 | 212 | .bkbg-sbc-title { |
| 209 | 213 | font-size: var(--bksbc-tt-font-size-m, var(--bksbc-tt-font-size-t, var(--bksbc-tt-font-size-d, 28px))); |
| 210 | 214 | line-height: var(--bksbc-tt-line-height-m, var(--bksbc-tt-line-height-t, var(--bksbc-tt-line-height-d, 1.2))); |
| 211 | 215 | letter-spacing: var(--bksbc-tt-letter-spacing-m, var(--bksbc-tt-letter-spacing-t, var(--bksbc-tt-letter-spacing-d))); |
| @@ -222,5 +226,17 @@ | ||
| 222 | 226 | line-height: var(--bksbc-rs-line-height-m, var(--bksbc-rs-line-height-t, var(--bksbc-rs-line-height-d, 1))); |
| 223 | 227 | letter-spacing: var(--bksbc-rs-letter-spacing-m, var(--bksbc-rs-letter-spacing-t, var(--bksbc-rs-letter-spacing-d, -1px))); |
| 224 | 228 | word-spacing: var(--bksbc-rs-word-spacing-m, var(--bksbc-rs-word-spacing-t, var(--bksbc-rs-word-spacing-d))); |
| 225 | 229 | } |
| 230 | +} | |
| 231 | + | |
| 232 | +.bkbg-sbc-app input:focus-visible, | |
| 233 | +.bkbg-sbc-app button:focus-visible { | |
| 234 | + outline: 2px solid currentColor; | |
| 235 | + outline-offset: 3px; | |
| 236 | +} | |
| 237 | + | |
| 238 | +@media (prefers-reduced-motion: reduce) { | |
| 239 | + .bkbg-sbc-breakdown { animation: none; } | |
| 240 | + .bkbg-sbc-app input, | |
| 241 | + .bkbg-sbc-app button { transition: none; } | |
| 226 | 242 | } |
