Karma
Tag
Revolution
£7.00
find your shade Select your skintone below fair tones light to medium tones medium medium to dark tones dark tones deep dark tones C0 Pure white. For lightening other shades select C0.1 For fairest skin tones with a pink undertone select C0.2 For fairest skin tones with a light yellow undertone select C0.3 For fairest skin tones with a yellow undertone select C0.5 For fair skin tones with a pink undertone select C0.7 For fair skin tones with a light neutral undertone select C1 For fair skin tones with a neutral undertone select C2 For fair skin tones with a pink undertone select C2.5 For fair skin tones with a yellow undertone select C3 For fair skin tones with a cool undertone select C3.5 For fair to light skin tones with a neutral undertone select C4 For light skin tones with a pink undertone select C4.5 For light skin tones with a neutral undertone select C5 For light skin tones with a golden undertone select C5.5 For light/medium skin tones with a yellow undertone select C5.7 For light/medium skin tones with a olive undertone select C6 For light/medium skin tones with a neutral undertone select C6.5 For light/medium skin tones with a yellow undertone select C7 For medium skin tones with a neutral undertone select C7.5 For medium skin tones with a light yellow undertone select C8 For light/medium skin tones with a warm undertone select C8.2 For medium skin tones with a yellow undertone select C8.5 For medium skin tones with a yellow undertone select C9 For medium skin tones with a peach undertone select C9.2 For medium skin tones with an orange undertone select C9.5 For medium skin tones with an olive undertone select C10 For medium skin tones with a golden undertone select C10.2 For deeper medium skin tones with a neutral undertone select C10.5 For medium skin tones with a warm golden undertone select C11 For medium/dark skin tones with a peach undertone select C11.2 For deeper medium skin tones with an olive undertone select C11.5 For deep medium skin tones with an olive undertone select C12 For medium/dark skin tones with a neutral undertone select C12.2 For medium/dark skin tones with an olive undertone select C12.5 For medium/dark skin tones with a golden undertone select C12.7 For medium/dark skin tones with an orange undertone select C13 For medium/dark skin tones with a golden undertone select C13.2 For dark skin tones with a orange undertone select C13.5 For medium/dark skin tones with a neutral undertone select C13.7 For dark skin tones with a yellow undertone select C14 For dark skin tones with a cool undertone select C14.5 For dark skin tones with an olive undertone select C14.7 For dark skin tones with an orange undertone select C15 For dark skin tones with a red undertone select C16 For dark skin tones with a warm undertone select C16.5 For dark skin tones with an olive undertone select C17 For dark skin tones with a neutral undertone select C17.5 For dark skin tones with an olive undertone select C17.7 For dark skin tones with an orange undertone select C18 For dark skin tones with a warm undertone select *:focus { outline: none; } .is-open ~ p > button.fys-btn { display: none; } .desc-title { font-size: 17px; font-family: "Sweet Sans Medium","Arial",sans-serif; } .b-pdp_tabs-accordion_container.m-accordion-expanded { z-index: 9; } .menuheader { height: calc(39vh - 40px); width: 100%; } .modal__content { color: rgba(0, 0, 0, 0.8); text-align: left; position: relative; width: 100%; } .modal__menu { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: space-between; } .modal__btn__menu { border: 1px solid #cdcdcd; color: #000; background-color: #fff; width: 32.7%; margin-bottom: 5px; text-align: center; padding: 10px; display: flex; justify-content: center; align-items: center; font-variant: small-caps; cursor: pointer; font-size: 14px; } .modal__btn__menu:hover { border: none; color: #fff; background-color: grey; } .modal__btn__menu { height: 6.2vh; margin-bottom: 0.5vh; line-height: 1.2; } .menu1:hover, .menu1.active { background-color: #F1DACF; color: #fff; border-color: #F1DACF; } .menu2:hover, .menu2.active { background-color: #e4c4a7; color: #fff; border-color: #e4c4a7; } .menu3:hover, .menu3.active { background-color: #d4a074; color: #fff; border-color: #d4a074; } .menu4:hover, .menu4.active { background-color: #be8052; color: #fff; border-color: #be8052; } .menu5:hover, .menu5.active { background-color: #54381e; color: #fff; border-color: #54381e; } .menu6:hover, .menu6.active { background-color: #32190c; color: #fff; border-color: #32190c; } .modal__body { width: 100%; padding: 20px 20px 20px 0; border: 1px solid #cdcdcd; } .modal__body { padding: 14px 0; height: calc(-260px + 84vh); overflow: auto; position: relative; top: calc(134px + -24vh); } .modal__row { display: flex; flex-direction: row; padding-bottom: 5px; min-height: 52px; } .modal__row__shade { font-family: "Sweet Sans Bold", "Arial", sans-serif; width: 150px; display: flex; justify-content: center; align-items: center; text-transform: uppercase; letter-spacing: 1px; color: #fff; } .modal__row__shade.white { border: 1px solid #cdcdcd; color: rgba(0, 0, 0, 0.8); border-left: none; width: 149px; } .modal__row__desc { width: 100%; display: flex; align-items: center; justify-content: left; text-align: left; padding: 5px 10px; } .modal__row__btn { background-color: saddlebrown; border: none; display: flex; align-items: center; justify-content: center; text-align: center; } .modal__row__btn.white { border: 1px solid #cdcdcd; color: rgba(0, 0, 0, 0.8); } .modal__p1 { font-family: "Sweet Sans Bold", "Arial", sans-serif; font-size: 32px; padding-bottom: 10px; text-align: left; text-transform: uppercase; margin-bottom: 5px !important; letter-spacing: 1px; margin-top: 10px; } .modal__p2 { font-family: "Sweet Sans Bold", "Arial", sans-serif; font-size: 15px; padding-bottom: 15px; text-align: left; line-height: 1.15; margin-bottom: 5px !important; } .fys-btn { border: 1px solid #000; color: #fff; background-color: #000; margin: 0 !important; } .fys-btn:hover { border: 1px solid #000; color: #000; background-color: #fff; } .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: flex-start; } .modal__container { background-color: #fff; max-width: 920px; border-radius: 4px; overflow-y: hidden; box-sizing: border-box; position: relative; padding: 20px 30px; z-index: 9; margin: 60px 20px; height: calc(100vh - 120px); } .modal__header { position: absolute; top: 3px; right: 2%; transform: scale(2); z-index: 5; } .modal__title { margin-top: 0; margin-bottom: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #00449e; box-sizing: border-box; } .modal__close { background: transparent; border: 0; } .modal__close:focus { outline: none; } .modal__header .modal__close:before { content: "\2715"; position: absolute; top: 10px; right: 10px; } .modal__btn { font-size: .875rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; background-color: #e6e6e6; color: rgba(0, 0, 0, .8); border-radius: .25rem; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; line-height: 1.15; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } .micromodal-slide { display: none; } .micromodal-slide.is-open { display: block; } .micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); } .micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1); } .micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); } .micromodal-slide[aria-hidden="true"] .modal__container { animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1); } @media screen and (max-width: 767px) { .menuheader { height: calc(39vh - 40px); width: 100%; } .modal__overlay{ align-items: start!important; } .modal__menu { width: 100%; } .modal__row__shade { font-size: 12px; } .modal__row__desc { font-size: 11px; justify-content: left; text-align: left; } .modal__body { padding: 14px 0; height: calc(-130px + 76vh); overflow: auto; position: relative; top: calc(103px + -16vh); } .modal__row__btn { padding-left: 18px !important; padding-right: 18px !important; font-size: 12px; } .modal__btn__menu { font-size: 11px; width: 48%; height: 6.2vh; margin-bottom: 1.5vh; line-height: 1.2; } .modal__row { min-height: 50px; padding-bottom: 8px; } .modal__btn1 { padding: 6px 10px !important; } .modal__p1 { font-family: "Sweet Sans Bold", "Arial", sans-serif; font-size: 22px; padding-bottom: 0; } .modal__p2 { font-family: "Sweet Sans Bold", "Arial", sans-serif; font-size: 16px; padding-bottom: 8px; line-height: 1.15; } .modal__container { height: calc(100vh - 40px); overflow: hidden; padding: 10px; border: 1px solid black; top: 0; margin: 20px; } .modal__row__btn.white { border: 1px solid #cdcdcd; color: rgba(0, 0, 0, 0.8); border-right: none; padding-left: 17px !important; } @media not all and (min-resolution:.001dpcm) { @media { .modal__overlay{ position: relative!important; background: #fff; } .modal__container { margin: 0; } } } } @media screen and (max-width: 360px) { .modal__p1 { font-size: 19px; } } /*#__MICRO MODAL-CODE__*/ function _instanceof(e, o) { return null != o && "undefined" != typeof Symbol && o[Symbol.hasInstance] ? !!o[Symbol.hasInstance](e) : e instanceof o } function _toConsumableArray(e) { return _arrayWithoutHoles(e) || _iterableToArray(e) || _nonIterableSpread() } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance") } function _iterableToArray(e) { if (Symbol.iterator in Object(e) || "[object Arguments]" === Object.prototype.toString.call(e)) return Array.from(e) } function _arrayWithoutHoles(e) { if (Array.isArray(e)) { for (var o = 0, t = new Array(e.length); o < e.length; o++)t[o] = e[o]; return t } } function _classCallCheck(e, o) { if (!_instanceof(e, o)) throw new TypeError("Cannot call a class as a function") } function _defineProperties(e, o) { for (var t = 0; t < o.length; t++) { var n = o[t]; n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, n.key, n) } } function _createClass(e, o, t) { return o && _defineProperties(e.prototype, o), t && _defineProperties(e, t), e } function _typeof(e) { return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { return typeof e } : function (e) { return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e })(e) } !function (e, o) { "object" == ("undefined" == typeof exports ? "undefined" : _typeof(exports)) && "undefined" != typeof module ? module.exports = o() : "function" == typeof define && define.amd ? define(o) : (e = e || self).MicroModal = o() }(this, function () { "use strict"; return e = ["a[href]", "area[href]", 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', "select:not([disabled]):not([aria-hidden])", "textarea:not([disabled]):not([aria-hidden])", "button:not([disabled]):not([aria-hidden])", "iframe", "object", "embed", "[contenteditable]", '[tabindex]:not([tabindex^="-"])'], o = function () { function o(e) { var t = e.targetModal, n = e.triggers, i = void 0 === n ? [] : n, a = e.onShow, r = void 0 === a ? function () { } : a, s = e.onClose, l = void 0 === s ? function () { } : s, c = e.openTrigger, d = void 0 === c ? "data-micromodal-trigger" : c, u = e.closeTrigger, f = void 0 === u ? "data-micromodal-close" : u, h = e.disableScroll, m = void 0 !== h && h, v = e.disableFocus, y = void 0 !== v && v, g = e.awaitCloseAnimation, b = void 0 !== g && g, p = e.awaitOpenAnimation, w = void 0 !== p && p, k = e.debugMode, E = void 0 !== k && k; _classCallCheck(this, o), this.modal = document.getElementById(t), this.config = { debugMode: E, disableScroll: m, openTrigger: d, closeTrigger: f, onShow: r, onClose: l, awaitCloseAnimation: b, awaitOpenAnimation: w, disableFocus: y }, i.length > 0 && this.registerTriggers.apply(this, _toConsumableArray(i)), this.onClick = this.onClick.bind(this), this.onKeydown = this.onKeydown.bind(this) } return _createClass(o, [{ key: "registerTriggers", value: function () { for (var e = this, o = arguments.length, t = new Array(o), n = 0; n < o; n++)t[n] = arguments[n]; t.filter(Boolean).forEach(function (o) { o.addEventListener("click", function (o) { return e.showModal(o) }) }) } }, { key: "showModal", value: function () { var e = this; if (this.activeElement = document.activeElement, this.modal.setAttribute("aria-hidden", "false"), this.modal.classList.add("is-open"), this.scrollBehaviour("disable"), this.addEventListeners(), this.config.awaitOpenAnimation) { this.modal.addEventListener("animationend", function o() { e.modal.removeEventListener("animationend", o, !1), e.setFocusToFirstNode() }, !1) } else this.setFocusToFirstNode(); this.config.onShow(this.modal, this.activeElement) } }, { key: "closeModal", value: function () { var e = this.modal; this.modal.setAttribute("aria-hidden", "true"), this.removeEventListeners(), this.scrollBehaviour("enable"), this.activeElement && this.activeElement.focus(), this.config.onClose(this.modal), this.config.awaitCloseAnimation ? this.modal.addEventListener("animationend", function o() { e.classList.remove("is-open"), e.removeEventListener("animationend", o, !1) }, !1) : e.classList.remove("is-open") } }, { key: "closeModalById", value: function (e) { this.modal = document.getElementById(e), this.modal && this.closeModal() } }, { key: "scrollBehaviour", value: function (e) { if (this.config.disableScroll) { var o = document.querySelector("body"); switch (e) { case "enable": Object.assign(o.style, { overflow: "", height: "" }); break; case "disable": Object.assign(o.style, { overflow: "hidden", height: "100vh" }) } } } }, { key: "addEventListeners", value: function () { this.modal.addEventListener("touchstart", this.onClick), this.modal.addEventListener("click", this.onClick), document.addEventListener("keydown", this.onKeydown) } }, { key: "removeEventListeners", value: function () { this.modal.removeEventListener("touchstart", this.onClick), this.modal.removeEventListener("click", this.onClick), document.removeEventListener("keydown", this.onKeydown) } }, { key: "onClick", value: function (e) { e.target.hasAttribute(this.config.closeTrigger) && (this.closeModal(), e.preventDefault()) } }, { key: "onKeydown", value: function (e) { 27 === e.keyCode && this.closeModal(e), 9 === e.keyCode && this.maintainFocus(e) } }, { key: "getFocusableNodes", value: function () { var o = this.modal.querySelectorAll(e); return Array.apply(void 0, _toConsumableArray(o)) } }, { key: "setFocusToFirstNode", value: function () { if (!this.config.disableFocus) { var e = this.getFocusableNodes(); e.length && e[0].focus() } } }, { key: "maintainFocus", value: function (e) { var o = this.getFocusableNodes(); if (this.modal.contains(document.activeElement)) { var t = o.indexOf(document.activeElement); e.shiftKey && 0 === t && (o[o.length - 1].focus(), e.preventDefault()), e.shiftKey || t !== o.length - 1 || (o[0].focus(), e.preventDefault()) } else o[0].focus() } }]), o }(), t = null, n = function (e) { if (!document.getElementById(e)) return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(e, "'"), "background-color: #f8f9fa;color: #50596c;font-weight: bold;", "ID somewhere in your code. Refer example below to resolve it."), console.warn("%cExample:", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", '<div class="modal" id="'.concat(e, '"></div>')), !1 }, i = function (e, o) { if (function (e) { e.length <= 0 && (console.warn("MicroModal: ❗Please specify at least one %c'micromodal-trigger'", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", "data attribute."), console.warn("%cExample:", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", '<a href="#" data-micromodal-trigger="my-modal"></a>')) }(e), !o) return !0; for (var t in o) n(t); return !0 }, { init: function (e) { var n = Object.assign({}, { openTrigger: "data-micromodal-trigger" }, e), a = _toConsumableArray(document.querySelectorAll("[".concat(n.openTrigger, "]"))), r = function (e, o) { var t = []; return e.forEach(function (e) { var n = e.attributes[o].value; void 0 === t[n] && (t[n] = []), t[n].push(e) }), t }(a, n.openTrigger); if (!0 !== n.debugMode || !1 !== i(a, r)) for (var s in r) { var l = r[s]; n.targetModal = s, n.triggers = _toConsumableArray(l), t = new o(n) } }, show: function (e, i) { var a = i || {}; a.targetModal = e, !0 === a.debugMode && !1 === n(e) || (t = new o(a)).showModal() }, close: function (e) { e ? t.closeModalById(e) : t.closeModal() } }; var e, o, t, n, i }); /*#__MODAL-CODE__*/ //init document.addEventListener("DOMContentLoaded", runOnLoad) //init function runOnLoad() { var allShadeBtnsAstound = document.querySelectorAll('[data-js-display-value]') var allShadeBtnsModal = document.querySelectorAll('[data-shade-id]') var allShadeHeaderMenuBtns = document.querySelectorAll('[data-shade-menubtn-id]') var openModalBtn = document.querySelector('.fys-btn') startCheckingForShadeMutations(); openModalBtn.addEventListener('click', () => { MicroModal.show('modal-1'); }) allShadeBtnsModal.forEach(modalBtn => { var theShadeModal = modalBtn.getAttribute("data-shade-id") modalBtn.addEventListener("click", () => { //console.log(modalBtn) changeShade(theShadeModal) }) }) allShadeHeaderMenuBtns.forEach(shadeHeaderMenuBtn => { shadeHeaderMenuBtn.addEventListener("click", () => { allShadeHeaderMenuBtns.forEach(shadeHeaderMenuBtn => { shadeHeaderMenuBtn.classList.remove('active') }) shadeHeaderMenuBtn.classList.add('active') allShadeSections = document.querySelectorAll('[data-shade-menubody-id]') allShadeSections.forEach(shadeSection => { if (!shadeSection.classList.contains('h-hidden')) { shadeSection.classList.add('h-hidden') } }) var shadeMenuId = shadeHeaderMenuBtn.getAttribute("data-shade-menubtn-id") document.querySelector(`[data-shade-menubody-id="${shadeMenuId}"]`).classList.remove('h-hidden') }) }) } //mutation observer function startCheckingForShadeMutations() { var targetNodeXX = document.querySelectorAll('.b-product_name')[0] const config = { attributes: false, childList: true, subtree: true }; const callbackX = function () { runOnLoad() }; const observerX = new MutationObserver(callbackX); observerX.observe(targetNodeXX, config); } //click on astound menu function changeShade(theShadeModal) { document.querySelector('.modal__close').click() var theShadeBtnAstound = document.querySelector(`[data-js-display-value*="${theShadeModal}"]`) //console.log(theShadeBtnAstound) theShadeBtnAstound.click(); } Find Your Shade This concealer is suitable for everyone looking for a lightweight finish with a boost of moisture. Offering all-day hydration thanks to an infusion of hyaluronic acid, it covers blemishes, evens skin tone and counteracts dark circles, while drenching skin with moisture. Designed for drier skin, the sheer, satin finish won’t settle into fine lines, and the doe foot applicator allows for a smooth, delicate application. How to use Apply a few dots under your eyes and blend out using a synthetic brush or damp blending sponge to achieve a natural-looking finish. Apply one dot to blemishes or dark spots and blend with finger, brush or sponge, building up if necessary. For added staying power, finish with a setting powder and fixing spray to lock your satin finish in place all day. Available in 50 shades: C0 – Pure white. For lightening other shades C0.1 – For fairest skin tones with a pink undertone C0.2 – For fairest skin tones with a light yellow undertone C0.3 – For fairest skin tones with a yellow undertone C0.5 – For fair skin tones with a pink undertone C0.7 – For fair skin tones with a light neutral undertone C1 – For fair skin tones with a neutral undertone C2 – For fair skin tones with a pink undertone C2.5 – For fair skin tones with a yellow undertone C3 – For fair skin tones with a cool undertone C3.5 – For fair to light skin tones with a neutral undertone C4 – For light skin tones with a pink undertone C4.5 – For light skin tones with a neutral undertone C5 – For light skin tones with a golden undertone C5.5 – For light/medium skin tones with a yellow undertone C5.7 – For light/medium skin tones with a olive undertone C6 – For light/medium skin tones with a neutral undertone C6.5 – For light/medium skin tones with a yellow undertone C7 – For medium skin tones with a neutral undertone C7.5 – For medium skin tones with a light yellow undertone C8 – For light/medium skin tones with a warm undertone C8.2 – For medium skin tones with a yellow undertone C8.5 – For medium skin tones with a yellow undertone C9 – For medium skin tones with a peach undertone C9.2 – For medium skin tones with an orange undertone C9.5 – For medium skin tones with an olive undertone C10 – For medium skin tones with a golden undertone C10.2 – For deeper medium skin tones with a neutral undertone C10.5 – For medium skin tones with a warm golden undertone C11 – For medium/dark skin tones with a peach undertone C11.2 – For deeper medium skin tones with an olive undertone C11.5 – For deep medium skin tones with an olive undertone C12 – For medium/dark skin tones with a neutral undertone C12.2 – For medium/dark skin tones with an olive undertone C12.5 – For medium/dark skin tones with a golden undertone C12.7 – For medium/dark skin tones with an orange undertone C13 – For medium/dark skin tones with a golden undertone C13.2 – For dark skin tones with a orange undertone C13.5 – For medium/dark skin tones with a neutral undertone C13.7 – For dark skin tones with a yellow undertone C14 – For dark skin tones with a cool undertone C14.5 – For dark skin tones with an olive undertone C14.7 – For dark skin tones with an orange undertone C15 – For dark skin tones with a red undertone C16 – For dark skin tones with a warm undertone C16.5 – For dark skin tones with an olive undertone C17 – For dark skin tones with a neutral undertone C17.5 – For dark skin tones with an olive undertone C17.7 – For dark skin tones with an orange undertone C18 – For dark skin tones with a warm undertone
Buy Product
Karma helps you save more!
Karma is an all-in-one shopping assistant that empowers you to make the right choices at the right time when you shop online.
15k+ reviews
  • chrome
  • safari
  • firefox
  • amazon
  • apple
  • android
Congratulations! This product was saved to your items list. You will be notified when the price drops.

Price Evolution

No sufficient data

No sufficient data available

Automated Coupon Scanner

Karma will automatically apply the best coupons to your purchase!

Not found image
Loading...

Recommended by:

  • Inc
  • Marie claire
  • Huffpost
  • Forbes