| @@ -259,9 +259,10 @@ | ||
| 259 | 259 | } |
| 260 | 260 | |
| 261 | 261 | .subscrpt-feedback-modal__footer { |
| 262 | 262 | display: flex; |
| 263 | - justify-content: flex-end; | |
| 263 | + align-items: center; | |
| 264 | + justify-content: space-between; | |
| 264 | 265 | gap: 10px; |
| 265 | 266 | padding: 16px 24px 20px; |
| 266 | 267 | } |
| 267 | 268 | |
| @@ -289,29 +290,43 @@ | ||
| 289 | 290 | color 0.12s, |
| 290 | 291 | box-shadow 0.12s; |
| 291 | 292 | } |
| 292 | 293 | |
| 293 | -.subscrpt-feedback-modal__keep { | |
| 294 | - background: var(--subscrpt-cfm-surface); | |
| 295 | - border-color: var(--subscrpt-cfm-border-strong); | |
| 296 | - color: var(--subscrpt-cfm-text); | |
| 294 | +/* Staying is the button, leaving is a link. The offer step means the opposite | |
| 295 | + thing by "keep" and "confirm" - declining an offer is the leaving action | |
| 296 | + there - so it carries its own pair rather than reusing these. */ | |
| 297 | +.subscrpt-feedback-modal__keep, | |
| 298 | +.subscrpt-feedback-modal__offer-claim { | |
| 299 | + background: var(--subscrpt-brand); | |
| 300 | + color: var(--subscrpt-cfm-on-brand); | |
| 297 | 301 | } |
| 298 | 302 | |
| 299 | -.subscrpt-feedback-modal__keep:hover { | |
| 300 | - background: var(--subscrpt-cfm-hover-bg-strong); | |
| 301 | - border-color: var(--subscrpt-cfm-subtle); | |
| 303 | +.subscrpt-feedback-modal__keep:hover, | |
| 304 | +.subscrpt-feedback-modal__offer-claim:hover { | |
| 305 | + background: var(--subscrpt-brand-dark); | |
| 306 | + color: var(--subscrpt-cfm-on-brand); | |
| 302 | 307 | } |
| 303 | 308 | |
| 304 | -.subscrpt-feedback-modal__confirm { | |
| 305 | - background: var(--subscrpt-brand); | |
| 306 | - color: var(--subscrpt-cfm-on-brand); | |
| 309 | +.subscrpt-feedback-modal__confirm, | |
| 310 | +.subscrpt-feedback-modal__offer-decline { | |
| 311 | + height: auto; | |
| 312 | + padding: 0; | |
| 313 | + border: 0; | |
| 314 | + background: none; | |
| 315 | + color: var(--subscrpt-cfm-subtle); | |
| 316 | + font-weight: 500; | |
| 317 | + text-decoration: underline; | |
| 318 | + text-underline-offset: 3px; | |
| 307 | 319 | } |
| 308 | 320 | |
| 309 | -.subscrpt-feedback-modal__confirm:hover { | |
| 310 | - background: var(--subscrpt-brand-dark); | |
| 321 | +.subscrpt-feedback-modal__confirm:hover, | |
| 322 | +.subscrpt-feedback-modal__offer-decline:hover { | |
| 323 | + background: none; | |
| 324 | + color: var(--subscrpt-cfm-text); | |
| 311 | 325 | } |
| 312 | 326 | |
| 313 | -.subscrpt-feedback-modal__confirm[disabled] { | |
| 327 | +.subscrpt-feedback-modal__confirm[disabled], | |
| 328 | +.subscrpt-feedback-modal__offer-claim[disabled] { | |
| 314 | 329 | opacity: 0.65; |
| 315 | 330 | cursor: not-allowed; |
| 316 | 331 | } |
| 317 | 332 | |
| @@ -349,5 +364,37 @@ | ||
| 349 | 364 | |
| 350 | 365 | .subscrpt-feedback-modal__btn { |
| 351 | 366 | width: 100%; |
| 352 | 367 | } |
| 368 | + | |
| 369 | + /* The link keeps its size when the row stacks - a full-width underline reads | |
| 370 | + as a second button, which is what this change exists to avoid. */ | |
| 371 | + .subscrpt-feedback-modal__confirm, | |
| 372 | + .subscrpt-feedback-modal__offer-decline { | |
| 373 | + width: auto; | |
| 374 | + align-self: center; | |
| 375 | + } | |
| 376 | +} | |
| 377 | + | |
| 378 | +/* The issued discount code, shown in place of the offer copy once claimed. */ | |
| 379 | +.subscrpt-feedback-modal__offer-note { | |
| 380 | + margin: 14px 0 0; | |
| 381 | + padding: 12px 14px; | |
| 382 | + border: 1px dashed #d0d3d7; | |
| 383 | + border-radius: 6px; | |
| 384 | + background: #f6f7f7; | |
| 385 | + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| 386 | + font-size: 16px; | |
| 387 | + font-weight: 700; | |
| 388 | + letter-spacing: 0.08em; | |
| 389 | + text-align: center; | |
| 390 | + color: #1d2327; | |
| 391 | +} | |
| 392 | + | |
| 393 | +/* The `hidden` attribute is only a user-agent `display: none`, so any class | |
| 394 | + that sets `display` beats it - and both of these do. Say it again with the | |
| 395 | + weight the attribute cannot bring on its own, or the step being swapped out | |
| 396 | + stays on screen underneath the one being swapped in. */ | |
| 397 | +.subscrpt-feedback-modal__body[hidden], | |
| 398 | +.subscrpt-feedback-modal__footer[hidden] { | |
| 399 | + display: none !important; | |
| 353 | 400 | } |
