.mage-ways-to-earn-block {
background-color: #ffffff !important;
}
.mage-ways-to-earn__container {
max-width: 1280px;
margin: 0 auto;
}
.mage-ways-to-earn__header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mage-ways-to-earn__title {
font-family: var(--font-alternate);
font-weight: var(--font-weight-light);
font-size: 22px;
line-height: 1;
letter-spacing: -0.02em;
}
.mage-ways-to-earn__subtitle {
color: #ffffff !important;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 18px;
}
.mage-ways-to-earn__grid {
gap: 20px;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
.mage-ways-to-earn__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
.mage-ways-to-earn__card {
background-color: #f9f9f9 !important;
border: none !important;
border-radius: 0 !important;
padding: 32px 24px 52px;
min-height: min-content;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
position: relative;
transition: background-color 0.25s ease;
}
.mage-ways-to-earn__card:hover {
background-color: #f2f2f2 !important;
}
.mage-ways-to-earn__card--static:hover {
background-color: #f9f9f9 !important;
}
.mage-ways-to-earn__card-icon {
margin-bottom: 20px;
}
.mage-ways-to-earn__icon,
.mage-ways-to-earn__icon-img {
width: 44px;
height: 44px;
}
.mage-ways-to-earn__card-title {
font-family: var(--font-primary);
font-size: 24px !important;
font-style: italic;
font-weight: 400 !important;
letter-spacing: 0.01em;
text-transform: none;
margin-bottom: 10px;
}
.mage-ways-to-earn__card-points,
.mage-ways-to-earn__card-description {
font-family: var(--font-alternate);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mage-ways-to-earn__card-bonus {
opacity: 0.45;
}
.mage-ways-to-earn__card-icon,
.mage-ways-to-earn__card-title,
.mage-ways-to-earn__card-points,
.mage-ways-to-earn__card-description,
.mage-ways-to-earn__card-bonus {
color: #ffffff !important;
transition: opacity 0.3s ease;
}
.mage-ways-to-earn__card-arrow {
display: none;
}
.mage-ways-to-earn__card-badge-text {
background-color: rgba(21, 21, 21, 0.06) !important;
color: rgba(21, 21, 21, 0.6) !important;
border-radius: 0 !important;
font-family: var(--font-alternate);
font-size: var(--font-size-10);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 10px;
display: inline-block;
}
.mage-ways-to-earn__card--redeemed {
background-color: #f9f9f9 !important;
opacity: 1 !important;
}
/* Completed cards keep the same white copy as before, including the
reward value (it sits on a dark photo; a dimmed dark grey vanished) */
.mage-ways-to-earn__card--redeemed .mage-ways-to-earn__card-icon,
.mage-ways-to-earn__card--redeemed .mage-ways-to-earn__card-title,
.mage-ways-to-earn__card--redeemed .mage-ways-to-earn__card-description,
.mage-ways-to-earn__card--redeemed .mage-ways-to-earn__card-points {
color: #ffffff !important;
opacity: 1 !important;
}
.mage-ways-to-earn__card--redeemed .mage-ways-to-earn__card-badge-text {
background-color: #151515 !important;
color: #f9f9f9 !important;
}
.mage-ways-to-earn__card-overlay {
background-color: #1ca659 !important;
}
.mage-ways-to-earn__card-overlay-text {
color: #ffffff !important;
font-weight: 400;
letter-spacing: 0.02em;
}
.mage-ways-to-earn__card-overlay-btn {
background-color: #ffffff !important;
color: #151515 !important;
border-radius: 2px !important;
font-family: var(--font-alternate);
font-size: var(--font-size-12);
font-weight: 500 !important;
letter-spacing: 0.14em;
text-transform: uppercase !important;
line-height: 1.5;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.mage-ways-to-earn__card-overlay-btn:hover {
background-color: #151515 !important;
color: #ffffff !important;
}
.mage-ways-to-earn__card:has(.mage-ways-to-earn__card-overlay):hover .mage-ways-to-earn__card-icon,
.mage-ways-to-earn__card:has(.mage-ways-to-earn__card-overlay):hover .mage-ways-to-earn__card-title,
.mage-ways-to-earn__card:has(.mage-ways-to-earn__card-overlay):hover
.mage-ways-to-earn__card-points,
.mage-ways-to-earn__card:has(.mage-ways-to-earn__card-overlay):hover
.mage-ways-to-earn__card-description,
.mage-ways-to-earn__card:has(.mage-ways-to-earn__card-overlay):hover
.mage-ways-to-earn__card-bonus {
opacity: 0 !important;
}
.mage-ways-to-earn__card--skeleton .mage-ways-to-earn__card-icon,
.mage-ways-to-earn__card--skeleton .mage-ways-to-earn__card-title,
.mage-ways-to-earn__card--skeleton .mage-ways-to-earn__card-points {
background-color: rgba(21, 21, 21, 0.08) !important;
}
/* ── Earning rule dialogs ─────────────────────────────────────────────
Same treatment as the flexible redemption / rewards dialogs. Portaled to
, so scoped to the dialog shell via :has() on the earn dialog's own
classes (never the bare .mage-block-dialog__content: that leaks into every
Mage dialog on the page). Colours are inline from the block's theme
settings, hence !important on colour/background/border only. The login
dialog is styled in the global (gift reminders) sheet, not here.
No Liquid tags in this file. */
.mage-block-dialog__content:has(
.mage-block-dialog-earn__summary,
.mage-block-dialog-earn__result,
.mage-block-dialog-earn__confirmation,
.mage-block-dialog-earn__success
) {
--tgt-black: var(--color-black, #000);
--tgt-white: var(--color-white, #fff);
--tgt-surface: #f7f7f7;
--tgt-border: var(--color-border-light, #e5e5e5);
--tgt-muted: rgba(0, 0, 0, 0.55);
--tgt-sans: var(--font-alternate, inherit);
--tgt-serif: var(--font-heading, Georgia, serif);
--tgt-radius: 0.25rem;
border-radius: var(--tgt-radius);
background-color: var(--tgt-white) !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}
.mage-block-dialog__content:has(
.mage-block-dialog-earn__summary,
.mage-block-dialog-earn__result,
.mage-block-dialog-earn__confirmation,
.mage-block-dialog-earn__success
)
.mage-block-dialog__header {
padding: 1.75rem 1.75rem 0;
}
.mage-block-dialog__content:has(
.mage-block-dialog-earn__summary,
.mage-block-dialog-earn__result,
.mage-block-dialog-earn__confirmation,
.mage-block-dialog-earn__success
)
.mage-block-dialog__body {
padding: 1.5rem 1.75rem 1.75rem;
}
/* Title: the theme's .text-heading-serif-product (PDP title) */
.mage-block-dialog__content:has(
.mage-block-dialog-earn__summary,
.mage-block-dialog-earn__result,
.mage-block-dialog-earn__confirmation,
.mage-block-dialog-earn__success
)
.mage-block-dialog__title {
font-family: var(--tgt-serif);
font-size: 1.375rem;
font-weight: var(--font-weight-light, 300) !important;
line-height: 1;
letter-spacing: -0.02em;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content:has(
.mage-block-dialog-earn__summary,
.mage-block-dialog-earn__result,
.mage-block-dialog-earn__confirmation,
.mage-block-dialog-earn__success
)
.mage-block-dialog__close-btn {
border-radius: 0;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content:has(
.mage-block-dialog-earn__summary,
.mage-block-dialog-earn__result,
.mage-block-dialog-earn__confirmation,
.mage-block-dialog-earn__success
)
.mage-block-dialog__close-btn:hover {
background: none !important;
opacity: 0.6;
}
/* Summary card: icon tile + "+£1.00" (price style) over the category eyebrow */
.mage-block-dialog__content .mage-block-dialog-earn__summary {
margin-bottom: 1.5rem;
gap: 1.25rem;
padding: 1.25rem;
border-radius: var(--tgt-radius);
background-color: var(--tgt-surface) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__summary-icon {
border-radius: var(--tgt-radius);
background-color: var(--tgt-white) !important;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__summary-points {
font-family: var(--tgt-sans);
font-size: 1rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.02em;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__summary-category,
.mage-block-dialog__content .mage-block-dialog-earn__summary-subtitle {
margin-top: 0.25rem;
font-family: var(--tgt-sans);
font-size: 0.6875rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tgt-black) !important;
}
/* Instruction copy: the theme's italic serif note style */
.mage-block-dialog__content .mage-block-dialog-earn__description,
.mage-block-dialog__content .mage-block-dialog-earn__success-text,
.mage-block-dialog__content .mage-block-dialog-earn__result-text,
.mage-block-dialog__content .mage-block-dialog-earn-birthday__description,
.mage-block-dialog__content .mage-block-dialog-earn-receipt__dropzone-hint,
.mage-block-dialog__content .mage-block-dialog-earn-photo__dropzone-hint {
font-family: var(--tgt-serif);
font-size: 1.0625rem;
font-style: italic;
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--tgt-muted) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__description {
margin-bottom: 1.75rem;
}
.mage-block-dialog__content .mage-block-dialog-earn__status {
margin-bottom: 1.5rem;
border-radius: var(--tgt-radius);
background-color: var(--tgt-surface) !important;
font-family: var(--tgt-sans);
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var(--tgt-black) !important;
}
/* Buttons: the theme pill, content-width and centred (never full width).
Primary = black, secondary = white */
.mage-block-dialog__content .mage-block-dialog-earn__button,
.mage-block-dialog__content .mage-block-dialog-earn__result-button {
display: flex;
width: fit-content;
margin-inline: auto;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2rem;
padding: 0.75rem 1.5rem;
border: 1px solid var(--tgt-black) !important;
border-radius: var(--tgt-radius) !important;
background-color: var(--tgt-black) !important;
color: var(--tgt-white) !important;
font-family: var(--tgt-sans);
font-size: var(--font-size-10, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase !important;
white-space: nowrap;
opacity: 1;
transition: all 0.2s ease-in-out;
}
.mage-block-dialog__content .mage-block-dialog-earn__button:hover:not(:disabled),
.mage-block-dialog__content .mage-block-dialog-earn__result-button:hover:not(:disabled) {
background-color: var(--tgt-white) !important;
color: var(--tgt-black) !important;
opacity: 1 !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__button--secondary,
.mage-block-dialog__content .mage-block-dialog-earn__result-button--outline {
margin-top: 0.75rem;
background-color: var(--tgt-white) !important;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__button--secondary:hover:not(:disabled),
.mage-block-dialog__content .mage-block-dialog-earn__result-button--outline:hover:not(:disabled) {
background-color: var(--tgt-black) !important;
color: var(--tgt-white) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__button:disabled {
opacity: 0.4;
}
/* Success: the earned amount as the italic serif hero, note beneath */
.mage-block-dialog__content .mage-block-dialog-earn__success-points {
margin-bottom: 0.75rem;
font-family: var(--tgt-serif);
font-size: 2.75rem;
font-style: italic;
font-weight: var(--font-weight-light, 300);
line-height: 1;
letter-spacing: -0.02em;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__success-text {
margin-bottom: 1.75rem;
}
/* Result card (already claimed / not eligible / error) */
.mage-block-dialog__content .mage-block-dialog-earn__result {
border-radius: var(--tgt-radius);
background-color: var(--tgt-surface) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__result-icon {
border-radius: var(--tgt-radius);
background-color: var(--tgt-white) !important;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__result-title {
font-family: var(--tgt-serif);
font-size: 1.375rem;
font-weight: var(--font-weight-light, 300);
line-height: 1;
letter-spacing: -0.02em;
color: var(--tgt-black) !important;
}
/* Confirmation strip (e.g. "We'll check your follow") */
.mage-block-dialog__content .mage-block-dialog-earn__confirmation {
border-radius: var(--tgt-radius);
background-color: var(--tgt-surface) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__confirmation-icon {
background-color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__confirmation-check {
color: var(--tgt-white) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__confirmation-title {
font-family: var(--tgt-sans);
font-size: 0.8125rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.02em;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn__confirmation-subtitle {
display: block;
margin-top: 0.375rem;
font-family: var(--tgt-sans);
font-size: 0.6875rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tgt-muted) !important;
}
/* Dismiss as a secondary text action (REMOVE / ADD GIFT MESSAGE) */
.mage-block-dialog__content .mage-block-dialog-earn__confirmation-dismiss {
height: auto;
margin-top: 1.25rem;
font-family: var(--tgt-sans);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 4px;
color: var(--tgt-black) !important;
opacity: 1;
}
.mage-block-dialog__content .mage-block-dialog-earn__confirmation-dismiss:hover {
opacity: 0.6;
}
/* Birthday form */
.mage-block-dialog__content .mage-block-dialog-earn-birthday__label {
margin-bottom: 0.5rem;
font-family: var(--tgt-sans);
font-size: 0.6875rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn-birthday__input {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: var(--tgt-radius) !important;
background-color: var(--tgt-white) !important;
padding: 0.8rem 1rem;
font-size: 0.9375rem;
color: var(--tgt-black) !important;
transition: border-color 0.2s ease-in-out;
}
.mage-block-dialog__content .mage-block-dialog-earn-birthday__input:focus {
border-color: var(--tgt-black) !important;
outline: none;
box-shadow: none;
}
.mage-block-dialog__content .mage-block-dialog-earn-birthday__error {
font-family: var(--tgt-sans);
font-size: 0.6875rem;
letter-spacing: 0.02em;
}
/* Receipt / photo upload dropzones */
.mage-block-dialog__content .mage-block-dialog-earn-receipt__dropzone,
.mage-block-dialog__content .mage-block-dialog-earn-photo__dropzone {
border: 1px dashed rgba(0, 0, 0, 0.3) !important;
border-radius: var(--tgt-radius) !important;
background-color: var(--tgt-white) !important;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn-receipt__dropzone:hover,
.mage-block-dialog__content .mage-block-dialog-earn-photo__dropzone:hover {
border-color: var(--tgt-black) !important;
background-color: var(--tgt-surface) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn-receipt__dropzone-icon,
.mage-block-dialog__content .mage-block-dialog-earn-photo__dropzone-icon {
border-radius: var(--tgt-radius);
background-color: var(--tgt-surface) !important;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn-receipt__dropzone-title,
.mage-block-dialog__content .mage-block-dialog-earn-photo__dropzone-title {
font-family: var(--tgt-sans);
font-size: 0.8125rem;
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.02em;
color: var(--tgt-black) !important;
}
.mage-block-dialog__content .mage-block-dialog-earn-receipt__preview-card,
.mage-block-dialog__content .mage-block-dialog-earn-photo__preview-card {
border-radius: var(--tgt-radius);
background-color: var(--tgt-surface) !important;
}
@media (min-width: 901px) and (max-width: 1150px) {
.mage-ways-to-earn__card {
padding: 24px 16px 40px;
}
.mage-ways-to-earn__card-icon {
margin-bottom: 14px;
}
.mage-ways-to-earn__icon,
.mage-ways-to-earn__icon-img {
width: 36px;
height: 36px;
}
#mage-ways-to-earn .mage-ways-to-earn__card-title {
font-size: 19px !important;
line-height: 1.2;
margin-bottom: 8px;
}
.mage-ways-to-earn__card-points,
.mage-ways-to-earn__card-description {
font-size: 11px;
letter-spacing: 0.12em;
}
}
@media (max-width: 767px) {
.mage-ways-to-earn__header {
margin-bottom: 48px;
}
.mage-ways-to-earn__title {
font-size: 28px;
}
#mage-ways-to-earn .mage-ways-to-earn__card-title {
font-size: 19px !important;
}
.mage-ways-to-earn__card {
padding: 28px 22px 48px;
}
}
@media (max-width: 600px) {
.mage-ways-to-earn__title {
font-size: 22px;
}
.mage-ways-to-earn__header {
margin-bottom: 36px;
}
.mage-ways-to-earn__grid {
gap: 8px;
}
.mage-ways-to-earn__card {
padding: 16px 10px 24px;
}
.mage-ways-to-earn__card-icon {
margin-bottom: 12px;
}
.mage-ways-to-earn__icon,
.mage-ways-to-earn__icon-img {
width: 32px;
height: 32px;
}
#mage-ways-to-earn .mage-ways-to-earn__card-title {
font-size: 17px !important;
line-height: 1.2;
margin-bottom: 6px;
}
.mage-ways-to-earn__card-points,
.mage-ways-to-earn__card-description {
font-size: 12px;
letter-spacing: 0.06em;
line-height: 1.35;
}
.mage-ways-to-earn__card-bonus {
font-size: 12px;
letter-spacing: 0.04em;
}
.mage-ways-to-earn__card-badge-text {
font-size: 11px;
letter-spacing: 0.08em;
padding: 3px 7px;
}
.mage-ways-to-earn__card-overlay {
gap: 8px;
}
.mage-ways-to-earn__card-overlay-text {
font-size: 14px;
line-height: 1.3;
padding: 0 8px;
}
.mage-ways-to-earn__card-overlay-btn {
font-size: 12px;
padding: 7px 14px;
}
}
@media (max-width: 380px) {
.mage-ways-to-earn__grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.mage-ways-to-earn__card {
padding: 28px 22px 48px;
}
.mage-ways-to-earn__card-icon {
margin-bottom: 20px;
}
.mage-ways-to-earn__icon,
.mage-ways-to-earn__icon-img {
width: 44px;
height: 44px;
}
#mage-ways-to-earn .mage-ways-to-earn__card-title {
font-size: 19px !important;
line-height: 1.25;
margin-bottom: 10px;
}
.mage-ways-to-earn__card-points,
.mage-ways-to-earn__card-description {
font-size: 12px;
letter-spacing: 0.16em;
line-height: 1.4;
}
.mage-ways-to-earn__card-bonus {
font-size: 12px;
letter-spacing: 0.16em;
}
.mage-ways-to-earn__card-badge-text {
font-size: var(--font-size-10);
letter-spacing: 0.16em;
padding: 4px 10px;
}
.mage-ways-to-earn__card-overlay {
gap: 12px;
}
.mage-ways-to-earn__card-overlay-text {
font-size: 16px;
line-height: 1.4;
padding: 0;
}
.mage-ways-to-earn__card-overlay-btn {
font-size: var(--font-size-12);
padding: 8px 24px;
}
}