/** * Copyright © MageEnv. All rights reserved. * * MageEnv Dynamic Cart Progress - Hyva storefront reward experience. * "The Offer" (Phase 9B). * * Loaded as an external, CSP-safe stylesheet (style-src 'self') via default.xml. * Visually and structurally identical to the Luma component; only the delivery * mechanism differs. Theme-neutral and component-scoped: every token is --dcp-* * and set only on the component root. The accent adopts the theme's * --color-primary custom property when present and falls back to the current * text colour; the offer's display face is --dcp-display, a universally * available system serif by default. State never rides on colour alone. Motion * is opt-in via prefers-reduced-motion. No number is computed here or in the JS. */ /* Loaded in , so it covers the component before Alpine hydrates - including a Luma store where both packages are installed and the Hyva block must stay hidden. */ [x-cloak] { display: none !important; } /* :where() keeps this rule at specificity 0. On a Luma store BOTH this stylesheet and the base module's compiled _module.less load, and the base module's .mageenv-dcp-cart tokens (a real @link__color accent, a serif --dcp-display) must win over this companion sheet's fallbacks. On a genuine Hyva store _module.less is absent and this rule applies. */ :where(.mageenv-dcp-cart, .mageenv-dcp-minicart) { --dcp-accent: currentColor; --dcp-accent: var(--color-primary, currentColor); --dcp-display: ui-serif, Georgia, "Times New Roman", Times, serif; --dcp-hairline: rgba(127, 127, 127, 0.26); --dcp-hairline: color-mix(in srgb, currentColor 13%, transparent); --dcp-veil: rgba(127, 127, 127, 0.08); --dcp-veil: color-mix(in srgb, currentColor 4%, transparent); --dcp-radius: 4px; --dcp-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Secured milestones read as "done" in a restrained success green; set this to var(--dcp-accent) for a single-colour bar. */ --dcp-secured: #1f7a52; box-sizing: border-box; color: inherit; font: inherit; } .mageenv-dcp-cart *, .mageenv-dcp-minicart * { box-sizing: border-box; } .mageenv-dcp-cart__sr, .mageenv-dcp-minicart__sr { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .mageenv-dcp-cart__mark svg path { fill: none; stroke: var(--dcp-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; } /* Cart page + Mini cart + Motion - MIRRORED from the compiled Luma _module.less (styles-m.css) by scratchpad/mirror-deploy.sh. Do not hand-edit below this line: on a Luma store this sheet and _module.less both load with equal specificity, so they must stay identical (see m31). The companion-only header above (x-cloak, the :where() token rule, __sr, __mk svg) is kept. */ .mageenv-dcp-cart { border-top: 1px solid var(--dcp-hairline); margin: 0 0 2.25rem; padding: 2rem 0 .5rem; width: 100%; } .mageenv-dcp-cart__grid { align-items: start; display: grid; gap: 4rem; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } .mageenv-dcp-cart__kicker { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; margin: 0; opacity: .55; text-transform: uppercase; font-size: 1rem; margin-bottom: 1.4rem; } .mageenv-dcp-cart__offer { display: block; font-family: var(--dcp-display); font-size: clamp(2.9rem, 1.9rem + 3vw, 4.1rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; margin: 0; overflow-wrap: anywhere; text-wrap: balance; } .mageenv-dcp-cart__gap { color: var(--dcp-accent); font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 1rem 0 0; } .mageenv-dcp-cart__then { font-size: 1.3rem; margin: 1.2rem 0 0; opacity: .6; } .mageenv-dcp-cart__measure { height: 5rem; margin: 2.8rem 0 0; max-width: 80rem; position: relative; width: 100%; } .mageenv-dcp-cart__field { height: 2.6rem; left: 1.1rem; position: absolute; right: 1.1rem; top: 0; } .mageenv-dcp-cart__rule { background: rgba(60,60,60,0.08); background: color-mix(in srgb, currentColor 8%, transparent); border-radius: 100px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); height: 1.6rem; left: 0; position: absolute; right: 0; top: calc(50% - .8rem); } .mageenv-dcp-cart__fill { background: var(--dcp-accent); border-radius: 100px 4px 4px 100px; box-shadow: inset 0 .15rem 0 rgba(255,255,255,0.22),inset 0 -0.55rem .6rem rgba(0,0,0,0.06); height: 1.6rem; left: 0; position: absolute; right: calc(100% - var(--dcp-pos, 0) * 1%); top: calc(50% - .8rem); } .mageenv-dcp-cart__tick { background: Canvas; border-radius: 100px; height: 2.4rem; left: calc(var(--dcp-pos, 0) * 1%); position: absolute; top: calc(50% - 1.2rem); transform: translateX(-50%); width: 3px; } .mageenv-dcp-cart__tick--secured { background: var(--dcp-secured); height: 1.7rem; top: calc(50% - .85rem); width: 4px; } .mageenv-dcp-cart__tick--next { background: Canvas; border-radius: 50%; box-shadow: 0 0 0 4px Canvas,inset 0 0 0 3.25px var(--dcp-accent),0 0 0 10px color-mix(in srgb, var(--dcp-accent) 18%, transparent); height: 1.7rem; top: calc(50% - .85rem); width: 1.7rem; } .mageenv-dcp-cart__tick--next:after { background: var(--dcp-accent); border-radius: 50%; content: ""; height: .55rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: .55rem; } .mageenv-dcp-cart__tick--last { background: Canvas; border-radius: 50%; box-shadow: 0 0 0 4px Canvas,inset 0 0 0 3.5px color-mix(in srgb, currentColor 36%, transparent); height: 2rem; top: calc(50% - 1rem); width: 2rem; } .mageenv-dcp-cart__tick--next.mageenv-dcp-cart__tick--last { box-shadow: 0 0 0 4px Canvas,inset 0 0 0 3.25px var(--dcp-accent),0 0 0 10px color-mix(in srgb, var(--dcp-accent) 18%, transparent); height: 2rem; top: calc(50% - 1rem); width: 2rem; } .mageenv-dcp-cart__you { border-bottom: .6rem solid color-mix(in srgb, currentColor 62%, transparent); border-left: .55rem solid transparent; border-right: .55rem solid transparent; height: 0; left: calc(var(--dcp-pos, 0) * 1%); position: absolute; top: calc(50% + .95rem); transform: translateX(-50%); width: 0; } .mageenv-dcp-cart__scale { font-variant-numeric: tabular-nums; left: 1.1rem; position: absolute; right: 1.1rem; top: 3.5rem; } .mageenv-dcp-cart__scale-you { color: var(--dcp-accent); font-size: 1.2rem; font-weight: 700; left: calc(var(--dcp-pos, 0) * 1%); position: absolute; transform: translateX(-50%); white-space: nowrap; } .mageenv-dcp-cart__scale-goal { font-size: 1.1rem; opacity: .5; position: absolute; right: 0; white-space: nowrap; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__rule { background: rgba(60,60,60,0.09); background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 100px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); height: .5rem; top: calc(50% - .25rem); } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__rule:before { background: rgba(60,60,60,0.22); background: color-mix(in srgb, currentColor 22%, transparent); border-radius: 100px; content: ""; height: 1rem; left: 0; position: absolute; top: calc(50% - .5rem); width: 2px; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__rule:after { background: repeating-linear-gradient(90deg, var(--dcp-accent) 0 2px, transparent 2px 6px); content: ""; height: 2px; left: calc(var(--dcp-pos, 0) * 1%); opacity: .6; position: absolute; right: calc(100% - var(--dcp-next, 100) * 1%); top: calc(50% - 1px); } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__fill { background: var(--dcp-accent); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); height: .5rem; top: calc(50% - .25rem); } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__tick { background: color-mix(in srgb, currentColor 28%, transparent); border-radius: 100px; height: 1rem; top: calc(50% - .5rem); width: 2px; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__tick--secured { background: var(--dcp-secured); height: 1.25rem; top: calc(50% - .625rem); } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__tick--next { background: var(--dcp-accent); border-radius: 100px; box-shadow: none; height: 1.3rem; top: calc(50% - 1.3rem); width: 3px; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__tick--next:before { background: var(--dcp-accent); border-radius: 100px; content: ""; height: 3px; left: 50%; top: 0; transform: translateX(-50%); width: 1.1rem; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__tick--next:after { content: none; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__tick--last { background: Canvas; border-radius: 50%; box-shadow: 0 0 0 3px Canvas,inset 0 0 0 3px color-mix(in srgb, currentColor 36%, transparent); height: 1.3rem; top: calc(50% - .65rem); width: 1.3rem; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__you { background: none; border: 0; height: auto; left: calc(var(--dcp-pos, 0) * 1%); top: calc(50% - 1.75rem); transform: translateX(-50%); width: auto; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__you:before { background: var(--dcp-accent); box-shadow: 0 0 0 2.5px Canvas,0 1px 3px rgba(0,0,0,0.22); content: ""; display: block; height: .62rem; margin: 0 auto; transform: rotate(45deg); width: .62rem; } .mageenv-dcp-cart__measure--linear .mageenv-dcp-cart__you:after { background: var(--dcp-accent); border-radius: 100px; content: ""; height: 1.5rem; left: 50%; position: absolute; top: .4rem; transform: translateX(-50%); width: 2px; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__rule { background: rgba(60,60,60,0.1); background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 100px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); height: .55rem; top: calc(50% - .275rem); } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__fill { background: var(--dcp-accent); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); height: .55rem; top: calc(50% - .275rem); } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__you { display: none; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__tick { background: Canvas; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.12),0 0 0 3px Canvas,inset 0 0 0 2.5px color-mix(in srgb, currentColor 26%, transparent); height: 1.15rem; top: calc(50% - .575rem); width: 1.15rem; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__tick--secured { background: var(--dcp-secured); box-shadow: 0 1px 2px rgba(0,0,0,0.15),0 0 0 3px Canvas; height: 1.15rem; top: calc(50% - .575rem); width: 1.15rem; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__tick--next { background: Canvas; box-shadow: 0 1px 3px rgba(0,0,0,0.16),0 0 0 4px Canvas,inset 0 0 0 3.5px var(--dcp-accent),0 0 0 9px color-mix(in srgb, var(--dcp-accent) 14%, transparent); height: 1.7rem; top: calc(50% - .85rem); width: 1.7rem; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__tick--next:after { height: .55rem; width: .55rem; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__tick--last { background: Canvas; box-shadow: 0 1px 2px rgba(0,0,0,0.12),0 0 0 3px Canvas,inset 0 0 0 2.5px color-mix(in srgb, currentColor 34%, transparent); height: 1.5rem; top: calc(50% - .75rem); width: 1.5rem; } .mageenv-dcp-cart__measure--step .mageenv-dcp-cart__tick--next.mageenv-dcp-cart__tick--last { box-shadow: 0 1px 3px rgba(0,0,0,0.16),0 0 0 4px Canvas,inset 0 0 0 3.5px var(--dcp-accent),0 0 0 9px color-mix(in srgb, var(--dcp-accent) 14%, transparent); height: 1.7rem; top: calc(50% - .85rem); width: 1.7rem; } .mageenv-dcp-cart__measure--fill .mageenv-dcp-cart__rule { background: rgba(60,60,60,0.11); background: color-mix(in srgb, currentColor 11%, transparent); border-radius: 100px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.07000000000000001),inset 0 -1px 0 rgba(255,255,255,0.45); height: 1.8rem; top: calc(50% - .9rem); } .mageenv-dcp-cart__measure--fill .mageenv-dcp-cart__fill { background: var(--dcp-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--dcp-accent) 86%, #fff) 0%, var(--dcp-accent) 48%, color-mix(in srgb, var(--dcp-accent) 90%, #000) 100%); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -2px 4px rgba(0,0,0,0.08); height: 1.8rem; right: calc(100% - var(--dcp-seg, 0) * 1%); top: calc(50% - .9rem); } .mageenv-dcp-cart__measure--fill .mageenv-dcp-cart__fill:after { background: Canvas; border-radius: 100px; box-shadow: 0 1px 3px rgba(0,0,0,0.28),0 0 0 1px rgba(60,60,60,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.28),0 0 0 1px color-mix(in srgb, currentColor 8%, transparent); content: ""; height: 2.3rem; position: absolute; right: -0.45rem; top: calc(50% - 1.15rem); width: .9rem; } .mageenv-dcp-cart__measure--fill .mageenv-dcp-cart__fill:before { background: var(--dcp-accent); border-radius: 100px; content: ""; height: 1.1rem; position: absolute; right: -1px; top: calc(50% - .55rem); width: 2px; z-index: 1; } .mageenv-dcp-cart__measure--fill .mageenv-dcp-cart__tick,.mageenv-dcp-cart__measure--fill .mageenv-dcp-cart__you { display: none; } .mageenv-dcp-cart__ladder { display: grid; gap: .2rem; list-style: none; margin: 0; max-height: 30rem; overflow: hidden auto; overscroll-behavior: contain; padding: .5rem .5rem; position: relative; scrollbar-gutter: stable; scrollbar-width: thin; } .mageenv-dcp-cart__spine { background: var(--dcp-hairline); border-radius: 2px; height: calc(100% - 5.5rem); left: 2.1rem; margin-left: -1.25px; position: absolute; top: 2.5rem; width: 2.5px; } .mageenv-dcp-cart__spine:after { background: var(--dcp-secured); border-radius: 2px; bottom: 0; content: ""; height: calc(var(--dcp-pos, 0) * 1%); left: 0; max-height: 100%; position: absolute; width: 2.5px; } .mageenv-dcp-cart__rung { align-items: start; border-radius: var(--dcp-radius); display: grid; gap: 1.1rem; grid-template-columns: 1.8rem minmax(0, 1fr); padding: .8rem .7rem; position: relative; z-index: 1; } .mageenv-dcp-cart__rung--next { background: color-mix(in srgb, var(--dcp-accent) 8%, transparent); } .mageenv-dcp-cart__rung-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; overflow-wrap: anywhere; } .mageenv-dcp-cart__mk { align-items: center; align-self: start; border-radius: 50%; display: inline-flex; flex: none; height: 1.7rem; justify-content: center; justify-self: center; margin-top: .2rem; position: relative; width: 1.7rem; z-index: 2; } .mageenv-dcp-cart__mk svg { height: 1.15rem; width: 1.15rem; } .mageenv-dcp-cart__mk svg path { fill: none; stroke: var(--dcp-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; } .mageenv-dcp-cart__mk--future { background: Canvas; box-shadow: 0 0 0 4px Canvas,inset 0 0 0 3px color-mix(in srgb, currentColor 26%, transparent); } .mageenv-dcp-cart__mk--next { background: Canvas; box-shadow: 0 0 0 4px Canvas,inset 0 0 0 3.5px var(--dcp-accent),0 0 0 6px color-mix(in srgb, var(--dcp-accent) 14%, transparent); } .mageenv-dcp-cart__mk--next:after { background: var(--dcp-accent); border-radius: 50%; content: ""; height: .6rem; width: .6rem; } .mageenv-dcp-cart__mk--secured { background: var(--dcp-secured); box-shadow: 0 0 0 4px Canvas; } .mageenv-dcp-cart__mk--secured svg path { stroke: Canvas; stroke-width: 3.25; } .mageenv-dcp-cart__rw { font-family: var(--dcp-display); font-size: 1.65rem; font-weight: 500; line-height: 1.2; } .mageenv-dcp-cart__rung--next .mageenv-dcp-cart__rw { font-size: 1.85rem; font-weight: 600; } .mageenv-dcp-cart__rung--secured .mageenv-dcp-cart__rw { opacity: .82; } .mageenv-dcp-cart__rung--more .mageenv-dcp-cart__rw { font-family: inherit; font-size: 1.3rem; font-weight: 600; letter-spacing: .01em; opacity: .55; } .mageenv-dcp-cart__meta { font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.3; opacity: .5; } .mageenv-dcp-cart__meta--secured { color: var(--dcp-secured); opacity: 1; } .mageenv-dcp-cart__meta--next { opacity: .72; } .mageenv-dcp-cart__meta--away { color: var(--dcp-accent); font-size: 1.3rem; font-weight: 700; margin-top: .15rem; opacity: 1; } .mageenv-dcp-cart.is-complete { border-top-color: transparent; padding: 0; } .mageenv-dcp-cart__complete { margin: 0; } .mageenv-dcp-cart__complete .mageenv-dcp-cart__kicker { color: var(--dcp-secured); margin-bottom: 1.4rem; opacity: .75; } .mageenv-dcp-cart__complete-line { align-items: center; color: var(--dcp-secured); display: flex; font-family: var(--dcp-display); font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.9rem); font-weight: 500; gap: 1.5rem; letter-spacing: -0.015em; line-height: 1.18; margin: 0 0 1.9rem; } .mageenv-dcp-cart__seal { background: var(--dcp-secured); border-radius: 50%; box-shadow: 0 0 0 3px Canvas,0 0 0 4.5px color-mix(in srgb, var(--dcp-secured) 30%, transparent),0 0 0 13px color-mix(in srgb, var(--dcp-secured) 8%, transparent); flex: none; height: 2.7rem; position: relative; width: 2.7rem; } .mageenv-dcp-cart__seal:after { border-bottom: 3px solid Canvas; border-right: 3px solid Canvas; content: ""; height: 1.05rem; left: 50%; position: absolute; top: 46%; transform: translate(-50%, -50%) rotate(45deg); width: .6rem; } .mageenv-dcp-cart__ladder--done { border-top: 1px solid var(--dcp-hairline); gap: 0; max-height: none; max-width: 40rem; overflow: visible; padding-top: .5rem; } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__rung { align-items: center; gap: 1rem; grid-template-columns: 1.5rem minmax(0, 1fr); padding: .95rem .2rem; } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__rung:not(:first-child) { border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__rung-text { align-items: baseline; flex-direction: row; gap: 1rem; justify-content: space-between; } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__rw { font-size: 1.5rem; opacity: 1; } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__meta { color: var(--dcp-secured); flex: none; font-size: 1.1rem; opacity: .82; } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__mk--secured { box-shadow: 0 0 0 2.5px Canvas; height: 1.4rem; width: 1.4rem; } .mageenv-dcp-minicart { margin: .5rem 0 1rem; width: 100%; } .mageenv-dcp-minicart__card { background: rgba(0,107,180,0.05); background: color-mix(in srgb, var(--dcp-accent) 6%, transparent); border: 1px solid rgba(0,107,180,0.22); border: 1px solid color-mix(in srgb, var(--dcp-accent) 22%, transparent); border-radius: .75rem; padding: 1.05rem 1.15rem 1.1rem; } .mageenv-dcp-minicart__head { align-items: baseline; display: flex; gap: .5rem; justify-content: space-between; } .mageenv-dcp-minicart__kicker { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; margin: 0; opacity: .55; text-transform: uppercase; font-size: 1rem; letter-spacing: .14em; opacity: .5; } .mageenv-dcp-minicart__secured { color: var(--dcp-secured); font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .mageenv-dcp-minicart__secured:before { content: "\2713\00a0"; } .mageenv-dcp-minicart__offer { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; font-family: var(--dcp-display); font-size: 2.7rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: .5rem 0 0; overflow: hidden; overflow-wrap: anywhere; } .mageenv-dcp-minicart__gap { font-size: 1.45rem; margin: .55rem 0 0; } .mageenv-dcp-minicart__gap-n { color: var(--dcp-accent); font-variant-numeric: tabular-nums; font-weight: 700; } .mageenv-dcp-minicart__then { font-size: 1.15rem; margin: .9rem 0 0; opacity: .5; } .mageenv-dcp-minicart__measure { height: 3.4rem; margin: .85rem 0 0; position: relative; } .mageenv-dcp-minicart__field { bottom: 0; display: block; left: .6rem; position: absolute; right: .6rem; top: 0; } .mageenv-dcp-minicart__rule,.mageenv-dcp-minicart__fill,.mageenv-dcp-minicart__tick { position: absolute; } .mageenv-dcp-minicart__span,.mageenv-dcp-minicart__you { display: none; } .mageenv-dcp-minicart__ms { appearance: none; -webkit-appearance: none; background: transparent; border: 0; bottom: 0; cursor: pointer; display: block; left: calc(var(--dcp-pos, 0) * 1%); margin: 0; padding: 0; position: absolute; top: 0; touch-action: manipulation; transform: translateX(-50%); width: 1.7rem; z-index: 2; } .mageenv-dcp-minicart__ms:focus-visible { border-radius: 3px; outline: 2px solid var(--dcp-accent); outline-offset: 1px; } .mageenv-dcp-minicart__measure--dense .mageenv-dcp-minicart__ms { width: 1rem; } .mageenv-dcp-minicart__tick { left: 50%; transform: translateX(-50%); } .mageenv-dcp-minicart__fill { left: 0; right: calc(100% - var(--dcp-pos, 0) * 1%); } .mageenv-dcp-minicart__rule { background: rgba(60,60,60,0.09); background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 100px; height: 1rem; left: 0; right: 0; top: calc(50% - .5rem); } .mageenv-dcp-minicart__fill { background: var(--dcp-accent); border-radius: 100px 3px 3px 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -0.4rem .5rem rgba(0,0,0,0.06); height: 1rem; top: calc(50% - .5rem); } .mageenv-dcp-minicart__tick { background: Canvas; border-radius: 100px; height: 1.55rem; top: calc(50% - .775rem); transform: translateX(-50%); width: 2.5px; } .mageenv-dcp-minicart__tick--next { background: Canvas; border-radius: 50%; box-shadow: 0 0 0 2.5px Canvas,inset 0 0 0 2px var(--dcp-accent),0 0 0 6px color-mix(in srgb, var(--dcp-accent) 18%, transparent); height: .95rem; top: calc(50% - .475rem); width: .95rem; } .mageenv-dcp-minicart__tick--next:after { background: var(--dcp-accent); border-radius: 50%; content: ""; height: .34rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: .34rem; } .mageenv-dcp-minicart__tick--last { background: Canvas; border-radius: 50%; box-shadow: 0 0 0 2.5px Canvas,inset 0 0 0 2.5px color-mix(in srgb, currentColor 38%, transparent); height: 1.15rem; top: calc(50% - .575rem); width: 1.15rem; } .mageenv-dcp-minicart__tick--next.mageenv-dcp-minicart__tick--last { background: Canvas; box-shadow: 0 0 0 3px Canvas,inset 0 0 0 2px var(--dcp-accent),0 0 0 6px color-mix(in srgb, var(--dcp-accent) 18%, transparent); height: 1.15rem; top: calc(50% - .575rem); width: 1.15rem; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__rule { background: rgba(60,60,60,0.1); background: color-mix(in srgb, currentColor 11%, transparent); border-radius: 100px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); height: .4rem; top: calc(50% - .2rem); } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__rule:before,.mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__rule:after { background: rgba(60,60,60,0.22); background: color-mix(in srgb, currentColor 22%, transparent); border-radius: 100px; content: ""; height: .85rem; position: absolute; top: calc(50% - .425rem); width: 2px; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__rule:before { left: 0; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__rule:after { right: 0; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__fill { background: var(--dcp-accent); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); display: block; height: .4rem; top: calc(50% - .2rem); } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__tick { background: rgba(60,60,60,0.32); background: color-mix(in srgb, currentColor 32%, transparent); border: 0; border-radius: 100px; box-shadow: none; height: .85rem; opacity: 1; top: calc(50% - .425rem); width: 2px; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__tick--secured { background: var(--dcp-secured); height: 1rem; opacity: 1; top: calc(50% - .5rem); } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__tick--next { background: var(--dcp-accent); border-radius: 100px; height: 1.1rem; opacity: 1; top: calc(50% - 1.1rem); width: 2.5px; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__tick--next:before { background: var(--dcp-accent); border-radius: 100px; content: ""; height: 2.5px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: .9rem; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__tick--next:after { content: none; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__tick--last { border-radius: 100px; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__you { display: block; left: calc(var(--dcp-pos, 0) * 1%); position: absolute; top: calc(50% - 1.4rem); transform: translateX(-50%); } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__you:before { background: var(--dcp-accent); box-shadow: 0 0 0 2px Canvas,0 1px 3px rgba(0,0,0,0.22); content: ""; display: block; height: .52rem; margin: 0 auto; transform: rotate(45deg); width: .52rem; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__you:after { background: var(--dcp-accent); border-radius: 100px; content: ""; height: 1.2rem; left: 50%; position: absolute; top: .35rem; transform: translateX(-50%); width: 2px; } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__span { display: block; left: calc(var(--dcp-pos, 0) * 1%); position: absolute; right: calc(100% - var(--dcp-next, 100) * 1%); top: calc(50% - .1rem); } .mageenv-dcp-minicart__measure--linear .mageenv-dcp-minicart__span:before { background: repeating-linear-gradient(90deg, var(--dcp-accent) 0 2px, transparent 2px 5px); content: ""; height: 2px; left: 0; opacity: .55; position: absolute; right: 0; top: 0; } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__rule { background: rgba(60,60,60,0.1); background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 100px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); height: .45rem; top: calc(50% - .225rem); } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__fill { background: var(--dcp-accent); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); height: .45rem; top: calc(50% - .225rem); } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__tick { background: Canvas; border: 0; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.12),0 0 0 2.5px Canvas,inset 0 0 0 2px color-mix(in srgb, currentColor 26%, transparent); height: .9rem; top: calc(50% - .45rem); width: .9rem; } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__tick--secured { background: var(--dcp-secured); box-shadow: 0 1px 2px rgba(0,0,0,0.15),0 0 0 2.5px Canvas; } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__tick--next { background: Canvas; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.16),0 0 0 3px Canvas,inset 0 0 0 2.75px var(--dcp-accent),0 0 0 7px color-mix(in srgb, var(--dcp-accent) 14%, transparent); height: 1.45rem; top: calc(50% - .725rem); width: 1.45rem; } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__tick--next:after { background: var(--dcp-accent); border-radius: 50%; content: ""; height: .46rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: .46rem; } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__tick--last { background: Canvas; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.12),0 0 0 2.5px Canvas,inset 0 0 0 2.25px color-mix(in srgb, currentColor 34%, transparent); height: 1.15rem; top: calc(50% - .575rem); width: 1.15rem; } .mageenv-dcp-minicart__measure--step .mageenv-dcp-minicart__tick--next.mageenv-dcp-minicart__tick--last { box-shadow: 0 1px 3px rgba(0,0,0,0.16),0 0 0 3px Canvas,inset 0 0 0 2.75px var(--dcp-accent),0 0 0 7px color-mix(in srgb, var(--dcp-accent) 14%, transparent); height: 1.45rem; top: calc(50% - .725rem); width: 1.45rem; } .mageenv-dcp-minicart__measure--fill .mageenv-dcp-minicart__rule { background: rgba(60,60,60,0.11); background: color-mix(in srgb, currentColor 11%, transparent); border-radius: 100px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.07000000000000001),inset 0 -1px 0 rgba(255,255,255,0.45); height: 1.35rem; top: calc(50% - .675rem); } .mageenv-dcp-minicart__measure--fill .mageenv-dcp-minicart__fill { background: var(--dcp-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--dcp-accent) 86%, #fff) 0%, var(--dcp-accent) 48%, color-mix(in srgb, var(--dcp-accent) 90%, #000) 100%); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -2px 4px rgba(0,0,0,0.08); height: 1.35rem; right: calc(100% - var(--dcp-seg, 0) * 1%); top: calc(50% - .675rem); } .mageenv-dcp-minicart__measure--fill .mageenv-dcp-minicart__fill:after { background: Canvas; border-radius: 100px; box-shadow: 0 1px 3px rgba(0,0,0,0.28),0 0 0 1px rgba(60,60,60,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.28),0 0 0 1px color-mix(in srgb, currentColor 8%, transparent); content: ""; height: 1.75rem; position: absolute; right: -0.35rem; top: calc(50% - .875rem); width: .7rem; } .mageenv-dcp-minicart__measure--fill .mageenv-dcp-minicart__fill:before { background: var(--dcp-accent); border-radius: 100px; content: ""; height: .85rem; position: absolute; right: -1px; top: calc(50% - .425rem); width: 2px; z-index: 1; } .mageenv-dcp-minicart__measure--fill .mageenv-dcp-minicart__tick { display: none; } .mageenv-dcp-minicart__done { display: none; } .mageenv-dcp-minicart__ms--secured .mageenv-dcp-minicart__done { background: var(--dcp-secured); border-radius: 50%; box-shadow: 0 0 0 2.5px Canvas; display: block; height: 1.5rem; left: 50%; position: absolute; top: calc(50% - .75rem); transform: translateX(-50%); width: 1.5rem; z-index: 3; } .mageenv-dcp-minicart__ms--secured .mageenv-dcp-minicart__done:after { border-radius: 0 0 1px; border-right: 2.5px solid Canvas; border-bottom: 2.5px solid Canvas; content: ""; height: .58rem; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%) rotate(45deg); width: .34rem; } .mageenv-dcp-minicart__ms--secured .mageenv-dcp-minicart__tick { display: none; } .mageenv-dcp-minicart__measure--segmented .mageenv-dcp-minicart__ms--secured .mageenv-dcp-minicart__tick { display: block; } .mageenv-dcp-minicart__measure--fill .mageenv-dcp-minicart__done,.mageenv-dcp-minicart__measure--dense .mageenv-dcp-minicart__done { display: none; } .mageenv-dcp-minicart__measure--dense .mageenv-dcp-minicart__ms--secured .mageenv-dcp-minicart__tick { display: block; } .mageenv-dcp-minicart__tip { background: Canvas; border: 1px solid rgba(60,60,60,0.22); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: .4rem; bottom: calc(50% + .55rem); color: CanvasText; display: block; left: 50%; line-height: 1.3; opacity: 0; padding: .4rem .55rem; pointer-events: none; position: absolute; transform: translateX(-50%); transition: opacity .12s var(--dcp-ease); visibility: hidden; white-space: nowrap; z-index: 6; } .mageenv-dcp-minicart__ms:hover .mageenv-dcp-minicart__tip,.mageenv-dcp-minicart__ms:focus .mageenv-dcp-minicart__tip,.mageenv-dcp-minicart__ms:focus-visible .mageenv-dcp-minicart__tip { opacity: 1; visibility: visible; } .mageenv-dcp-minicart__tip:after { background: Canvas; border-bottom: 1px solid rgba(60,60,60,0.22); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-right: 1px solid rgba(60,60,60,0.22); border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent); bottom: -0.28rem; content: ""; height: .5rem; left: 50%; position: absolute; transform: translateX(-50%) rotate(45deg); width: .5rem; } .mageenv-dcp-minicart__ms--first .mageenv-dcp-minicart__tip { left: -0.6rem; transform: none; } .mageenv-dcp-minicart__ms--first .mageenv-dcp-minicart__tip:after { left: 1.2rem; } .mageenv-dcp-minicart__ms--last .mageenv-dcp-minicart__tip { left: auto; right: -0.6rem; transform: none; } .mageenv-dcp-minicart__ms--last .mageenv-dcp-minicart__tip:after { left: auto; right: 1.2rem; } .mageenv-dcp-minicart__tip-reward { display: block; font-family: var(--dcp-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .mageenv-dcp-minicart__tip-reach { font-size: .92rem; opacity: .6; } .mageenv-dcp-minicart__tip-status { color: var(--dcp-accent); font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: .3rem; } .mageenv-dcp-minicart__tip-status--secured { color: var(--dcp-secured); } .mageenv-dcp-minicart__tip-status--secured:before { content: "\2713\00a0"; } .mageenv-dcp-minicart__card--done { background: rgba(31,122,82,0.05); background: color-mix(in srgb, var(--dcp-secured) 6%, transparent); } .mageenv-dcp-minicart__complete-line { align-items: center; color: var(--dcp-secured); display: flex; font-family: var(--dcp-display); font-size: 1.7rem; font-weight: 600; gap: .8rem; letter-spacing: -0.01em; line-height: 1.15; margin: .5rem 0 0; overflow-wrap: anywhere; } .mageenv-dcp-minicart__seal { background: var(--dcp-secured); border-radius: 50%; box-shadow: 0 0 0 2px Canvas,0 0 0 3px color-mix(in srgb, var(--dcp-secured) 30%, transparent),0 0 0 8px color-mix(in srgb, var(--dcp-secured) 9%, transparent); flex: none; height: 1.7rem; position: relative; width: 1.7rem; } .mageenv-dcp-minicart__seal:after { border-radius: 0 0 1px; border-right: 2.5px solid Canvas; border-bottom: 2.5px solid Canvas; content: ""; height: .7rem; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%) rotate(45deg); width: .4rem; } .mageenv-dcp-minicart__won { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; } .mageenv-dcp-minicart__won span { background: rgba(31,122,82,0.1); background: color-mix(in srgb, var(--dcp-secured) 11%, transparent); border-radius: 100px; color: var(--dcp-secured); font-size: .95rem; font-weight: 600; letter-spacing: .01em; padding: .28rem .7rem .28rem .55rem; } .mageenv-dcp-minicart__won span:before { content: "\2713"; font-weight: 700; margin-right: .32rem; opacity: .75; } .mageenv-dcp-minicart__won .mageenv-dcp-minicart__won-more { background: none; color: inherit; font-weight: 600; opacity: .5; padding: .28rem .2rem; } .mageenv-dcp-minicart__won .mageenv-dcp-minicart__won-more:before { content: none; } @media (max-width: 48em) { .mageenv-dcp-cart__grid { gap: 2.8rem; grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .mageenv-dcp-cart.is-complete .mageenv-dcp-cart__complete,.mageenv-dcp-minicart.is-complete .mageenv-dcp-minicart__card--done { animation: mageenv-dcp-arrive .4s var(--dcp-ease) both; } .mageenv-dcp-cart__ladder--done .mageenv-dcp-cart__rung { animation: mageenv-dcp-arrive .32s var(--dcp-ease) both; } .mageenv-dcp-cart__you,.mageenv-dcp-cart__tick,.mageenv-dcp-cart__tick--next,.mageenv-dcp-cart__fill,.mageenv-dcp-cart__spine:after,.mageenv-dcp-minicart__you,.mageenv-dcp-minicart__tick,.mageenv-dcp-minicart__tick--next,.mageenv-dcp-minicart__span,.mageenv-dcp-minicart__fill { transition: left .45s var(--dcp-ease),right .45s var(--dcp-ease),height .45s var(--dcp-ease); } } @media (prefers-reduced-motion: reduce) { .mageenv-dcp-cart__rung,.mageenv-dcp-cart__complete,.mageenv-dcp-minicart__card--done,.mageenv-dcp-cart__you,.mageenv-dcp-cart__tick,.mageenv-dcp-cart__fill,.mageenv-dcp-cart__spine:after,.mageenv-dcp-minicart__you,.mageenv-dcp-minicart__tick,.mageenv-dcp-minicart__span,.mageenv-dcp-minicart__tip,.mageenv-dcp-minicart__fill { animation: none; transition: none; } } @keyframes mageenv-dcp-arrive {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}