/* --- assets/css/cards/cards.css --- */ :root, .card { --grain: url(../images/foils/grain.webp); --glitter: url(../images/foils/glitter.png); --noise: url(../images/foils/151/noise-base.webp); --noise-over: url(../images/foils/151/noise-top.webp); --iri1: url(../images/foils/151/iri-1.webp); --iri2: url(../images/foils/151/iri-2.webp); --iri3: url(../images/foils/151/iri-3.webp); --iri4: url(../images/foils/151/iri-4.webp); --iri5: url(../images/foils/151/iri-5.webp); --iri6: url(../images/foils/151/iri-6.webp); --iri7: url(../images/foils/151/iri-7.webp); --iri8: url(../images/foils/151/iri-8.webp); --iri9: url(../images/foils/151/iri-9.webp); --birthday: url(../images/foils/151/birthday-holo.webp); --birthday-dank: url(../images/foils/151/birthday-holo-dank.webp); --birthday-dank2: url(../images/foils/151/birthday-holo-dank-2.webp); --masterball: url(../images/foils/151/masterball-outer.webp); --masterball-inner: url(../images/foils/151/masterball-inner.webp); --pokeball: url(../images/foils/151/pokeball-outer.webp); --pokeball-inner: url(../images/foils/151/pokeball-inner.webp); --cosmos-bottom: url(../images/foils/cosmos-bottom.png); --cosmos-middle: url(../images/foils/cosmos-middle-trans.png); --cosmos-top: url(../images/foils/cosmos-top-trans.png); --rainbow-tex: url(../images/foils/rainbow.jpg); --galaxy-tex: url(../images/foils/galaxy.jpg); --wave-tex: url(../images/foils/wave.png); --seedx: 0.285; --seedy: 0.618; --cosmosbg: 209px 791px; --birthdaybg: 142px 309px; --rotate-delta: 0deg; --glittersize: 25%; --space: 5%; --angle: 133deg; --imgsize: cover; --red: #f80e35; --yellow: #eedf10; --green: #21e985; --blue: #0dbde9; --violet: #c929f1; --clip: inset(9.85% 8% 52.85% 8%); --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%); --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%); --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%); --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%); --clip-borders: inset(2.8% 4% round 2.55% / 1.5%); --clip-borders-invert: polygon(94.8% 2.8%, 95.7% 3.2%, 96.2% 3.8%, 96.2% 96%, 95.9% 96.8%, 94.8% 97.3%, 5% 97.3%, 4.2% 96.9%, 3.8% 96.2%, 3.8% 6.1%, 15% 6.1%, 16% 5%, 17.9% 4%, 19% 2.8%); --clip-ex-borders: polygon(0% 0%, 0% 100%, 4% 100%, 4% 18%, 1% 16%, 1% 13%, 3% 10%, 4% 9%, 4% 6%, 9% 6%, 16% 6%, 16% 5%, 18% 4%, 19% 3%, 95% 3%, 97% 4%, 96% 90%, 97% 92%, 97% 94%, 96% 95%, 96% 97%, 95% 97%, 4% 97%, 4% 100%, 100% 100%, 100% 0%); } .card__shine, .card__glare { will-change: transform, opacity, background-image, background-size, background-position, background-blend-mode, filter; } .card.offscreen { opacity: 0; transform: translate3d(0, 0, 0); visibility: hidden; } /* --- assets/css/cards/base.css --- */ /* BASE STYLES / VARIABLES */ /* SHINE LAYERS */ :root { --card-aspect: 0.718; --card-radius: 4.55% / 3.5%; --card-edge: hsl(47, 100%, 78%); --card-back: hsl(205, 100%, 25%); --card-glow: hsl(175, 100%, 90%); --sunpillar-1: hsl(2, 100%, 73%); --sunpillar-2: hsl(53, 100%, 69%); --sunpillar-3: hsl(93, 100%, 69%); --sunpillar-4: hsl(176, 100%, 76%); --sunpillar-5: hsl(228, 100%, 74%); --sunpillar-6: hsl(283, 100%, 73%); --sunpillar-clr-1: var(--sunpillar-1); --sunpillar-clr-2: var(--sunpillar-2); --sunpillar-clr-3: var(--sunpillar-3); --sunpillar-clr-4: var(--sunpillar-4); --sunpillar-clr-5: var(--sunpillar-5); --sunpillar-clr-6: var(--sunpillar-6); --sunpillar: var(--sunpillar-1) 25%, var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6) 75%; --holo: var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1); } .card { /* place the card on a new transform layer and make sure it has hardward acceleration... we gun'need that! */ -webkit-transform: translate3d(0px, 0px, 0.01px); transform: translate3d(0px, 0px, 0.01px); pointer-events: none; /* make sure the card is above others if it's scaled up */ z-index: calc(var(--card-scale) * 2); /* every little helps! */ will-change: transform, visibility, z-index; /* this prevents major problems in firefox, but also causes a bit of clipping as the card animates to/from active state. worth it. */ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .card, .card * { /* outline is a little trick to anti-alias */ outline: 1px solid transparent; } .card:not( .interactive ) .card__translater, .card:not( .interactive ) .card__rotator, .card:not( .interactive ) .card__shine, .card:not( .interactive ) .card__glitter, .card:not( .interactive ) .card__glare { /* if this card is not in a framework, we can add simply hover effects when it's not "interactive" */ transition: all 0.3s ease; } .card:not( .interactive ):hover { --pointer-x: 25% !important; --pointer-y: 10% !important; --card-scale: 1.1 !important; --card-opacity: 1 !important; --translate-x: 0px !important; --translate-y: -10px !important; --rotate-x: 7deg !important; --rotate-y: -19deg !important; --background-x: 44% !important; --background-y: 36% !important; --pointer-from-center: .9 !important; --pointer-from-top: .11 !important; --pointer-from-left: .25 !important; } .card.water { --card-glow: hsl(192, 97%, 60%); } .card.fire { --card-glow: hsl(9, 81%, 59%); } .card.grass { --card-glow: hsl(96, 81%, 65%); } .card.lightning { --card-glow: hsl(54, 87%, 63%); } .card.psychic { --card-glow: hsl(281, 62%, 58%); } .card.fighting { --card-glow: rgb(145, 90, 39); } .card.darkness { --card-glow: hsl(189, 77%, 27%); } .card.metal { --card-glow: hsl(184, 20%, 70%); } .card.dragon { --card-glow: hsl(51, 60%, 35%); } .card.fairy { --card-glow: hsl(323, 100%, 89%); } .card, .card__rotator { aspect-ratio: var(--card-aspect); border-radius: var(--card-radius); } .card.interacting { z-index: calc(var(--card-scale) * 120); } .card.active .card__translater, .card.active .card__rotator { /* prevent pinch/double-tap zooms on card */ touch-action: none; } .card__translater, .card__rotator { display: grid; perspective: 600px; will-change: transform, box-shadow; transform-origin: center; -webkit-transform-origin: center; transform-style: preserve-3d; } .card__translater { width: auto; position: relative; -webkit-transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale)); transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale)); } .card__rotator { -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y)); -webkit-transform-style: preserve-3d; transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y)); /* performance */ pointer-events: auto; /* overflow: hidden; <-- this improves perf on mobile, but breaks backface visibility. */ /* isolation: isolate; <-- this improves perf, but breaks backface visibility on Chrome. */ } button.card__rotator { /* because the card is a button, there's some default browser styles which need to be subdued */ border: none; background: transparent; padding: 0; -webkit-appearance: none; appearance: none; } .card__rotator, .card.active .card__rotator:focus { transition: box-shadow 0.4s ease, opacity .33s ease-out; box-shadow: 0 0 3px -1px transparent, 0 0 2px 1px transparent, 0 0 5px 0px transparent, 0px 10px 20px -5px black, 0 2px 15px -5px black, 0 0 20px 0px transparent; } .card.active .card__rotator, .card__rotator:focus { box-shadow: 0 0 3px -1px white, 0 0 3px 1px var(--card-edge), 0 0 12px 2px var(--card-glow), 0px 10px 20px -5px black, 0 0 40px -30px var(--card-glow), 0 0 50px -20px var(--card-glow) } .card__rotator * { width: 100%; display: grid; grid-area: 1/1; aspect-ratio: var(--card-aspect); border-radius: var(--card-radius); image-rendering: optimizeQuality; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: none; } .card__rotator img { height: auto; } .card__rotator img:not(.card__back) { -webkit-transform: translate3d(0px, 0px, 0.01px); transform: translate3d(0px, 0px, 0.01px); } .card__back { background-color: var(--card-back); -webkit-transform: rotateY(180deg) translate3d(0px, 0px, 0.01px); transform: rotateY(180deg) translate3d(0px, 0px, 0.01px); -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-out; } .card__front, .card__front * { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .card__front { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out; -webkit-transform: translate3d(0px, 0px, 0.01px); transform: translate3d(0px, 0px, 0.01px); } .card.is-flipped .card__rotator { transform: rotateY(calc(180deg - var(--rotate-x, 0deg))) rotateX(var(--rotate-y, 0deg)) !important; -webkit-transform: rotateY(calc(180deg - var(--rotate-x, 0deg))) rotateX(var(--rotate-y, 0deg)) !important; } .card.is-flipped .card__front { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .card.is-flipped .card__back { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform: rotateY(180deg) translate3d(0px, 0px, 0.01px) !important; -webkit-transform: rotateY(180deg) translate3d(0px, 0px, 0.01px) !important; } .card:not(.is-flipped) .card__back { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .card:not(.is-flipped) .card__front { opacity: 1 !important; visibility: visible !important; } .loading .card__front { opacity: 0; } .loading .card__back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } /** Shine & Glare Effects **/ .card__shine, .card__glitter { display: grid; transform: translateZ(1px); overflow: hidden; z-index: 3; background: transparent; background-size: cover; background-position: center; border-radius: var(--card-radius); filter: brightness(.45) contrast(1.5) saturate(1.2); mix-blend-mode: color-dodge; opacity: var(--card-opacity); } .card__glitter { display: none; z-index: 2; } .card__shine:before, .card__shine:after, .card__glitter:before, .card__glitter:after { --sunpillar-clr-1: var(--sunpillar-5); --sunpillar-clr-2: var(--sunpillar-6); --sunpillar-clr-3: var(--sunpillar-1); --sunpillar-clr-4: var(--sunpillar-2); --sunpillar-clr-5: var(--sunpillar-3); --sunpillar-clr-6: var(--sunpillar-4); grid-area: 1/1; transform: translateZ(1px); border-radius: var(--card-radius); } .card__shine:after { --sunpillar-clr-1: var( --sunpillar-6 ); --sunpillar-clr-2: var( --sunpillar-1 ); --sunpillar-clr-3: var( --sunpillar-2 ); --sunpillar-clr-4: var( --sunpillar-3 ); --sunpillar-clr-5: var( --sunpillar-4 ); --sunpillar-clr-6: var( --sunpillar-5 ); transform: translateZ(1.2px); } .card__glare, .card__glare2 { /* make sure the glare doesn't clip */ transform: translateZ(1.41px); overflow: hidden; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.65) 20%, hsla(0, 0%, 0%, 0.5) 90% ); opacity: var(--card-opacity); mix-blend-mode: overlay; } .card__glare2 { display: none; } /** Masking Effects **/ .card.masked .card__shine, .card.masked .card__shine:before, .card.masked .card__shine:after { /** masking image for cards which are masked **/ -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-mode: luminance; mask-mode: luminance; } .card[data-rarity="rare holo"]:not(.masked) .card__glare:after, .card[data-rarity="rare holo cosmos"]:not(.masked) .card__glare:after, .card[data-rarity$="reverse holo"]:not(.masked) .card__glare:after, .card[data-rarity$="pokeball holo"]:not(.masked) .card__glare:after { clip-path: var(--clip); } .card[data-rarity="rare holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after, .card[data-rarity="rare holo cosmos"][data-subtypes^="stage"]:not(.masked) .card__glare:after, .card[data-rarity$="reverse holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after, .card[data-rarity$="pokeball holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after { clip-path: var(--clip-stage); } .card[data-rarity="rare holo"][data-supertype="trainer"]:not(.masked) .card__glare:after, .card[data-rarity="rare holo cosmos"][data-supertype="trainer"]:not(.masked) .card__glare:after, .card[data-rarity$="reverse holo"][data-supertype="trainer"]:not(.masked) .card__glare:after, .card[data-rarity$="pokeball holo"][data-supertype="trainer"]:not(.masked) .card__glare:after { clip-path: var(--clip-trainer); } /* --- assets/css/cards/basic.css --- */ /* BASIC CARDS */ /* GLARE LAYERS */ /* --- assets/css/cards/regular-holo.css --- */ /* REGULAR HOLO */ /* SHINE LAYERS */ .card[data-rarity="rare holo"] .card__shine { --bars: 5%; --bar-color: hsla(0, 0%, 70%, 1); --bar-bg: hsla(0, 0%, 0%, 1); --bar-rotate: var(--rotate-x); background-image: repeating-linear-gradient( 10deg, var( --holo ), var( --holo ), var( --holo ), var( --holo ), var( --holo ), var( --holo ), var( --holo ) ); background-position: calc(((50% - var(--background-x))) + 50%) calc(((50% - var(--background-y))) + 50%); background-size: 400% 400%; background-blend-mode: overlay; filter: brightness(1.25) contrast(3) saturate(.75); mix-blend-mode: overlay; } .card[data-rarity="rare holo"] .card__shine:before { content: ""; background-image: repeating-linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), var(--bar-bg) calc(var(--bars)*2.5), var(--bar-color) calc(var(--bars)*3.25), hsla(0, 0%, 75%, .5) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*3.75), var(--bar-bg) calc(var(--bars)*4.5), var(--bar-bg) calc(var(--bars)*8) ), repeating-linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), var(--bar-bg) calc(var(--bars)*2.5), var(--bar-color) calc(var(--bars)*3.25), hsla(0, 0%, 75%, .5) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*3.75), var(--bar-bg) calc(var(--bars)*4.5), var(--bar-bg) calc(var(--bars)*8) ); background-position: 50% calc( ( var(--background-y) * 1.2 ) ), 50% calc( ( var(--background-y) * -1.2 ) ); background-size: 200% 200%, 200% 200%; background-blend-mode: screen; filter: brightness( 1 ) contrast( 2 ) saturate(.75); mix-blend-mode: multiply; } .card[data-rarity="rare holo"] .card__shine:after { content: ""; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 90%, 0.8) 0%, hsla(0, 0%, 78%, 0.1) 25%, hsl(0, 0%, 35%) 90% ); background-position: center center; background-size: cover; mix-blend-mode: luminosity; filter: brightness(1) contrast(3); } @media screen and (max-width: 900px) { .card[data-rarity="rare holo"] .card__shine { --scanlines-space: .5px; } } /* GLARE LAYERS */ .card[data-rarity="rare holo"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.65) 20%, hsla(0, 0%, 0%, .5) 120% ); opacity: calc( var(--card-opacity) * .8 ); mix-blend-mode: overlay; filter: none; } .card[data-rarity="rare holo"] .card__glare:after { content: ""; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(180, 100%, 95%) 5%, hsla(0, 0%, 39%, 0.25) 55%, hsla(205.6, 50%, 90%, 0.5) 110% ); mix-blend-mode: overlay; filter: brightness(.6) contrast(3); } /* NO MASK */ .card[data-rarity="rare holo"]:not(.masked) .card__shine { clip-path: var(--clip); } .card[data-rarity="rare holo"][data-subtypes^="stage"]:not(.masked) .card__shine, .card[data-rarity="rare holo"][data-subtypes^="stage"]:not(.masked) .card__glare:after { clip-path: var(--clip-stage); } .card[data-rarity="rare holo"][data-subtypes^="supporter"]:not(.masked) .card__shine, .card[data-rarity="rare holo"][data-subtypes^="supporter"]:not(.masked) .card__glare:after, .card[data-rarity="rare holo"][data-subtypes^="item"]:not(.masked) .card__shine, .card[data-rarity="rare holo"][data-subtypes^="item"]:not(.masked) .card__glare:after { clip-path: var(--clip-trainer); } /* --- assets/css/cards/reverse-holo.css --- */ /* REVERSE HOLO */ /* SHINE LAYERS */ .card { --foil-brightness: 0.55; } .card[data-rarity$="reverse holo"] .card__shine { background-image: radial-gradient( circle at var(--pointer-x) var(--pointer-y), #fff 5%, #000 50%, #fff 80% ), linear-gradient( -45deg, #000 15%, #fff, #000 85% ), var(--foil); background-blend-mode: soft-light, difference; background-size: 120% 120%, 200% 200%, cover; background-position: center center, calc( (100% * var(--pointer-from-left))) calc( (100% * var(--pointer-from-top))) , center center; filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1); mix-blend-mode: color-dodge; opacity: calc( (1.5 * var(--card-opacity)) - var(--pointer-from-center)); } .card.lightning { --foil-brightness: 0.7; } .card.darkness { --foil-brightness: 0.8; } .card.metal { --foil-brightness: 0.6; } /* GLARE LAYERS */ .card[data-rarity$="reverse holo"] .card__glare { opacity: var(--card-opacity); background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.5) 20%, hsla(0, 0%, 0%, 0.75) 90% ); filter: brightness(.7) contrast(1.5); } .card[data-rarity$="reverse holo"] .card__glare:after { content: ""; opacity: var(--card-opacity); background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 10%, hsla(0, 0%, 100%, 0.5) 20%, hsla(0, 0%, 0%, 0.5) 120% ); filter: brightness(1) contrast(1.5); } /* NO MASK */ .card:not(.masked)[data-rarity$="reverse holo"] .card__shine { --foil: none; clip-path: var(--clip-invert); } .card:not(.masked)[data-rarity$="reverse holo"][data-subtypes^="stage"] .card__glare:after { clip-path: var(--clip-stage-invert); } .card:not(.masked)[data-rarity$="reverse holo"][data-supertype="trainer"] .card__glare:after { clip-path: var(--clip-trainer-invert); } /* --- assets/css/cards/cosmos-holo.css --- */ /* COSMOS HOLO */ .card[data-rarity="rare holo cosmos"][data-subtypes^="stage"] .card__shine, .card[data-rarity="rare holo cosmos"][data-subtypes^="stage"] .card__glare:after { clip-path: var(--clip-stage); } .card[data-rarity="rare holo cosmos"][data-subtypes^="supporter"] .card__shine, .card[data-rarity="rare holo cosmos"][data-subtypes^="supporter"] .card__glare:after { clip-path: var(--clip-trainer); } /* SHINE LAYERS */ .card[data-rarity="rare holo cosmos"] .card__shine { --space: 4%; clip-path: var(--clip); background-image: url("../images/foils/cosmos-bottom.png"), repeating-linear-gradient( 82deg, hsl(53, 65%, 60%) calc(var(--space)*1), hsl(93, 56%, 50%) calc(var(--space)*2), hsl(176, 54%, 49%) calc(var(--space)*3), hsl(228, 59%, 55%) calc(var(--space)*4), hsl(283, 60%, 55%) calc(var(--space)*5), hsl(326, 59%, 51%) calc(var(--space)*6), hsl(326, 59%, 51%) calc(var(--space)*7), hsl(283, 60%, 55%) calc(var(--space)*8), hsl(228, 59%, 55%) calc(var(--space)*9), hsl(176, 54%, 49%) calc(var(--space)*10), hsl(93, 56%, 50%) calc(var(--space)*11), hsl(53, 65%, 60%) calc(var(--space)*12) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(180, 100%, 89%, 0.5) 5%, hsla(180, 14%, 57%, 0.3) 40%, hsl(0, 0%, 0%) 130% ); background-blend-mode: color-burn, multiply; background-position: var(--cosmosbg, center center), calc( 10% + ( var(--pointer-from-left) * 80% ) ) calc( 10% + ( var(--pointer-from-top) * 80% ) ), center center; background-size: cover, 400% 900%, cover; filter: brightness(1) contrast(1) saturate(.8); mix-blend-mode: color-dodge; } .card[data-rarity="rare holo cosmos"] .card__shine:before { content: ""; z-index: 2; background-image: url("../images/foils/cosmos-middle-trans.png"), repeating-linear-gradient( 82deg, hsl(53, 65%, 60%) calc(var(--space)*1), hsl(93, 56%, 50%) calc(var(--space)*2), hsl(176, 54%, 49%) calc(var(--space)*3), hsl(228, 59%, 55%) calc(var(--space)*4), hsl(283, 60%, 55%) calc(var(--space)*5), hsl(326, 59%, 51%) calc(var(--space)*6), hsl(326, 59%, 51%) calc(var(--space)*7), hsl(283, 60%, 55%) calc(var(--space)*8), hsl(228, 59%, 55%) calc(var(--space)*9), hsl(176, 54%, 49%) calc(var(--space)*10), hsl(93, 56%, 50%) calc(var(--space)*11), hsl(53, 65%, 60%) calc(var(--space)*12) ); background-blend-mode: lighten, multiply; background-position: var(--cosmosbg, center center), calc( 15% + ( var(--pointer-from-left) * 70% ) ) calc( 15% + ( var(--pointer-from-top) * 70% ) ), center center; background-size: cover, 400% 900%, cover; filter: brightness(1.25) contrast(1.75) saturate(.8); mix-blend-mode: overlay; } .card[data-rarity="rare holo cosmos"] .card__shine:after { content: ""; z-index: 3; background-image: url("../images/foils/cosmos-top-trans.png"), repeating-linear-gradient( 82deg, hsl(53, 65%, 60%) calc(var(--space)*1), hsl(93, 56%, 50%) calc(var(--space)*2), hsl(176, 54%, 49%) calc(var(--space)*3), hsl(228, 59%, 55%) calc(var(--space)*4), hsl(283, 60%, 55%) calc(var(--space)*5), hsl(326, 59%, 51%) calc(var(--space)*6), hsl(326, 59%, 51%) calc(var(--space)*7), hsl(283, 60%, 55%) calc(var(--space)*8), hsl(228, 59%, 55%) calc(var(--space)*9), hsl(176, 54%, 49%) calc(var(--space)*10), hsl(93, 56%, 50%) calc(var(--space)*11), hsl(53, 65%, 60%) calc(var(--space)*12) ); background-blend-mode: multiply, multiply; background-position: var(--cosmosbg, center center), calc( 20% + ( var(--pointer-from-left) * 60% ) ) calc( 20% + ( var(--pointer-from-top) * 60% ) ), center center; background-size: cover, 400% 900%, cover; filter: brightness(1.25) contrast(1.75) saturate(.8); mix-blend-mode: multiply; } /* GLARE LAYERS */ .card[data-rarity="rare holo cosmos"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(204, 100%, 95%, 0.8) 5%, hsla(250, 15%, 20%, 1) 150% ); filter: brightness(.75) contrast(2) saturate(2); mix-blend-mode: overlay; opacity: calc( var(--card-opacity) * ( 0.25 + var(--pointer-from-center) ) ); } .card[data-rarity="rare holo cosmos"] .card__glare:after { content: ""; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(280, 100%, 96%) 5%, hsl(0, 0%, 10%) 60% ); filter: brightness(.75) contrast(2.5) saturate(2); mix-blend-mode: soft-light; opacity: calc( 1 - var(--pointer-from-top) * .75 ); } /* --- assets/css/cards/poke-ball-holo.css --- */ /* POKEBALL HOLO */ /* SHINE LAYERS */ .card[data-rarity$="pokeball holo"], .card[data-rarity$="masterball holo"] { --pokeball: url(../images/foils/151/pokeball-outer.webp); --pokeball-inner: url(../images/foils/151/pokeball-inner.webp); --masterball: url(../images/foils/151/masterball-outer.webp); --masterball-inner: url(../images/foils/151/masterball-inner.webp); --viewport-edge-clip: polygon(4% 3%, 96% 3%, 96% 97%, 4% 97%, 4% 10%, 7% 10%, 7% 48%, 92% 48%, 92% 10%, 4% 10%); --viewport-clip: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%, 7% 10%, 7% 48%, 92% 48%, 92% 10%, 0 10%); --inner-brightness: 0.7; --outer-brightness: 0.55; --shine: .8; --glare: .8; --glare-contrast: 1; } .card[data-rarity$="pokeball holo"] .card__shine, .card[data-rarity$="masterball holo"] .card__shine { background: linear-gradient(45deg, hsla(0, 0%, calc( var(--shine) * 50% )) 15%, hsla(0, 0%, calc( var(--shine) * 25% )) 45%, hsla(0, 0%, calc( var(--shine) * 25% )) 55%, hsla(0, 0%, calc( var(--shine) * 50% )) 85%); background-position: var(--pointer-x) var(--pointer-y); background-size: 200%; mask: none; mix-blend-mode: color-dodge; filter: brightness(.75) contrast(1) saturate(1); } .card[data-rarity$="pokeball holo"] .card__shine:after, .card[data-rarity$="masterball holo"] .card__shine:after { content: ""; --mask: var(--pokeball); clip-path: var(--clip-borders-invert); background-image: linear-gradient( 45deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4) ); background-size: 200% 200%; background-position: var(--pointer-x) var(--pointer-y); filter: brightness(var(--outer-brightness)) contrast(1.8) saturate(calc( var(--pointer-from-center) * 1.1 )); mix-blend-mode: plus-lighter; opacity: var(--card-opacity); } .card[data-rarity$="pokeball holo"] .card__shine:before, .card[data-rarity$="masterball holo"] .card__shine:before { content: ""; --mask: var(--pokeball-inner); clip-path: var(--clip-borders-invert); background-image: linear-gradient( 225deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6), var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3), var(--sunpillar-4) ), var(--noise), var(--iri1); background-size: 170% 170%, 300px 300px, 300px 300px; background-position: var(--pointer-y) var(--pointer-x), calc(var(--seedx) * 500px) calc(var(--seedy) * 500px), calc(var(--seedx) * 500px) calc(var(--seedy) * 500px); background-blend-mode: darken, color-burn; filter: brightness(.75) contrast(2) saturate(calc( var(--pointer-from-center) )); mix-blend-mode: lighten; opacity: calc( var(--card-opacity) + ( var(--pointer-from-center)) - 0.75 ); } .card[data-rarity$="masterball holo"] .card__shine:after { --mask: var(--masterball); } .card[data-rarity$="masterball holo"] .card__shine:before { --mask: var(--masterball-inner); } .card[data-rarity$="pokeball holo"] .card__shine:after, .card[data-rarity$="masterball holo"] .card__shine:after, .card[data-rarity$="pokeball holo"] .card__shine:before, .card[data-rarity$="masterball holo"] .card__shine:before { -webkit-mask-image: var(--mask), radial-gradient( farthest-corner at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 20%, transparent 80% ); mask-image: var(--mask), radial-gradient( farthest-corner at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 20%, transparent 80% ); -webkit-mask-size: 40% auto, cover; mask-size: 40% auto, cover; -webkit-mask-position: calc(var(--seedx) * 500px) calc(var(--seedy) * 500px), center center; mask-position: calc(var(--seedx) * 500px) calc(var(--seedy) * 500px), center center; -webkit-mask-mode: alpha; mask-mode: alpha; -webkit-mask-composite: source-out; mask-composite: subtract; } .card[data-rarity$="pokeball holo"] .card__shine:before, .card[data-rarity$="masterball holo"] .card__shine:before { -webkit-mask-image: var(--mask); mask-image: var(--mask); } .card.darkness[data-rarity$="ball holo"] { --inner-brightness: 1; --outer-brightness: .6; --shine: 1.33; --glare: 1.2; } .card.colorless[data-rarity$="ball holo"], .card.metal[data-rarity$="ball holo"] { --inner-brightness: .5; --outer-brightness: .45; } .card.fire[data-rarity$="ball holo"] { --inner-brightness: .65; --outer-brightness: .5; --shine: 1; --glare: 1; --glare-contrast: 1.5; } .card.grass[data-rarity$="ball holo"] { --inner-brightness: .5; } .card.psychic[data-rarity$="ball holo"] { --inner-brightness: .6; --outer-brightness: .5; --shine: .7; --glare: 1; } .card.dragon[data-rarity$="ball holo"] { --inner-brightness: .5; --outer-brightness: .45; --shine: 1.1; --glare: 1; --glare-contrast: 1.5; } /* GLARE LAYERS */ .card[data-rarity$="pokeball holo"] .card__glare, .card[data-rarity$="masterball holo"] .card__glare { opacity: calc( var(--card-opacity) * var(--glare) ); clip-path: var(--viewport-edge-clip); background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(346, 25%, 80%) 10%, hsla(207, 30%, 40%, 1) 90% ); mix-blend-mode: overlay; filter: brightness(calc(.75 * var(--shine))) contrast(var(--glare-contrast)); z-index: 5; } .card[data-rarity$="pokeball holo"] .card__glare2, .card[data-rarity$="masterball holo"] .card__glare2 { mix-blend-mode: multiply; display: block; } /* NO MASK */ .card:not(.masked)[data-rarity$="pokeball holo"] .card__shine, .card:not(.masked)[data-rarity$="masterball holo"] .card__shine { --foil: none; clip-path: var(--clip-invert); } .card:not(.masked)[data-rarity$="pokeball holo"][data-subtypes^="stage"] .card__glare:after, .card:not(.masked)[data-rarity$="masterball holo"][data-subtypes^="stage"] .card__glare:after { clip-path: var(--clip-stage-invert); } .card:not(.masked)[data-rarity$="pokeball holo"][data-supertype="trainer"] .card__glare:after, .card:not(.masked)[data-rarity$="masterball holo"][data-supertype="trainer"] .card__glare:after { clip-path: var(--clip-trainer-invert); } /* --- assets/css/cards/radiant-holo.css --- */ /* RADIANT HOLO */ .card[data-rarity="radiant rare"] .card__shine { clip-path: var(--clip-borders); } .card[data-rarity="radiant rare"] .card__shine:after { clip-path: var(--clip); } /* SHINE LAYERS */ .card[data-rarity="radiant rare"] .card__shine { --barwidth: 1.2%; --space: 200px; --hue: 50; --imgsize: cover; background-image: radial-gradient( farthest-corner ellipse at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ), hsl(0, 0%, 95%) 20%, var(--card-glow) 130% ), repeating-linear-gradient( 45deg, hsl(0,0%,10%) 0% , hsl(0,0%,10%) 1% , hsl(0,0%,10%) var(--barwidth), hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 2 ), hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 3 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) , hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) , hsl(0,0%,50%) calc( var(--barwidth) * 5 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) , hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 7 ) , hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 8 ) , hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) , hsl(0,0%,10%) calc( var(--barwidth) * 9 ) , hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) , hsl(0,0%,0%) calc( var(--barwidth) * 10 ) ), repeating-linear-gradient( -45deg, hsl(0,0%,10%) 0% , hsl(0,0%,10%) 1% , hsl(0,0%,10%) var(--barwidth), hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 2 ), hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 3 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) , hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) , hsl(0,0%,50%) calc( var(--barwidth) * 5 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) , hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 7 ) , hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 8 ) , hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) , hsl(0,0%,10%) calc( var(--barwidth) * 9 ) , hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) , hsl(0,0%,0%) calc( var(--barwidth) * 10 ) ); background-size: cover, 210% 210%, 210% 210%; background-position: center, calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% ), calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% ); background-blend-mode: exclusion, darken, color-dodge; filter: brightness(.5) contrast(2) saturate(1.75); mix-blend-mode: color-dodge; } .card[data-rarity="radiant rare"] .card__shine:after { content: ""; background-image: var(--foil), repeating-linear-gradient( 55deg, hsl(3, 95%, 85%) calc(var(--space)*1), hsl(207, 100%, 84%) calc(var(--space)*2), hsl(29, 100%, 85%) calc(var(--space)*3), hsl(160, 100%, 86%) calc(var(--space)*4), hsl(309, 94%, 87%) calc(var(--space)*5), hsl(188, 95%, 85%) calc(var(--space)*6), hsl(3, 95%, 85%) calc(var(--space)*7) ); background-size: var(--imgsize), 400% 100%; background-position: center, calc( ((var(--background-x) - 50%) * -2.5) + 50% ) calc( ((var(--background-y) - 50%) * -2.5) + 50% ); filter: brightness(.6) contrast(3) saturate(2); mix-blend-mode: color-dodge; background-blend-mode: hard-light; } .card[data-rarity="radiant rare"] .card__shine:before { content: ""; z-index: 2; grid-area: 1/1; background-image: var(--glitter), radial-gradient( farthest-corner ellipse at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ), hsla(0, 0%, 58%, 0.8) 10%, hsla(0, 0%, 20%, 0.9) 20%, hsla(0, 0%, 20%, 0.5) 50% ); background-position: center; background-size: 15% 15%, 350% 350%; background-blend-mode: color-dodge; mix-blend-mode: overlay; filter: brightness(.66) contrast(2) saturate(.5); } /* GLARE LAYERS */ .card[data-rarity="radiant rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.33) 0%, hsl(0, 0%, 25%) 110% ); filter: brightness(1) contrast(1.5); mix-blend-mode: hard-light; } /* NO MASK */ .card:not(.masked)[data-rarity="radiant rare"] .card__shine, .card:not(.masked)[data-rarity="radiant rare"] .card__shine:after { --mask: none; --foil: url("../images/foils/trainerbg.png"); --imgsize: 25% auto; } .card:not(.masked)[data-rarity="radiant rare"] .card__shine:after { background-blend-mode: difference; } /* --- assets/css/cards/rainbow-holo.css --- */ /* RAINBOW (SECRET) HOLO */ /* SHINE LAYERS */ .card[data-rarity="rare rainbow"] .card__shine { --r-clr-1: hsl(0, 57%, 37%); --r-clr-2: hsl(40, 53%, 39%); --r-clr-3: hsl(90, 60%, 35%); --r-clr-4: hsl(180, 60%, 35%); --r-clr-5: hsl(180, 60%, 35%); --r-clr-6: hsl(210, 57%, 39%); --r-clr-7: hsl(280, 55%, 31%); background-image: linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)), var(--glitter), linear-gradient( -30deg, var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1) ); background-blend-mode: luminosity, soft-light; background-size: 200% 200%, var(--glittersize) var(--glittersize), 400% 400%; background-position: calc( 25% + (50% * var(--pointer-from-left) )) calc( 25% + (50% * var(--pointer-from-top) )), center center, calc( 25% + (var(--pointer-x) / 2 ) ) calc( 25% + (var(--pointer-y) / 2 ) ); filter: brightness(calc((var(--pointer-from-center)*0.25) + 0.6)) contrast(2.2) saturate(0.75); } .card[data-rarity="rare rainbow"] .card__shine:after { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: var(--glitter), linear-gradient( -60deg, var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1) ); background-blend-mode: soft-light; background-size: var(--glittersize) var(--glittersize), 400% 400%; background-position: center center, var(--pointer-x) var(--pointer-y); filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.55)) contrast(2) saturate(1); mix-blend-mode: color-dodge; } .card[data-rarity="rare rainbow"] .card__shine:before { content: ""; background-image: var(--foil); background-size: var(--imgsize); background-position: center center; filter: brightness(2.5) contrast(1); opacity: calc((var(--pointer-from-center) + 0.4 ) * 0.6 ); background-blend-mode: difference; mix-blend-mode: darken; } /* GLARE LAYERS */ .card[data-rarity="rare rainbow"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0,0%,80%), hsla(187, 10%, 85%, 0.25) 30%, hsl(197, 6%, 25%) 120% ); filter: brightness(.9) contrast(1.75); opacity: calc( var(--pointer-from-center) * 0.9 ); mix-blend-mode: hard-light; } /* NO MASK */ .card:not(.masked)[data-rarity="rare rainbow"] .card__shine { --foil: url("../images/foils/illusion-mask.png"); --imgsize: 33%; } /* --- assets/css/cards/v-regular.css --- */ /* V REGULAR */ /* SHINE LAYERS */ .card[data-rarity="rare holo v"]:not(.masked) .card__shine, .card[data-subtypes="v-union"]:not(.masked) .card__shine { filter: brightness(.7) contrast(2) saturate(.5); } .card[data-rarity="rare holo v"] .card__shine, .card[data-rarity="rare holo v"] .card__shine:after, .card[data-subtypes="v-union"] .card__shine, .card[data-subtypes="v-union"] .card__shine:after { --space: 5%; --angle: 133deg; --imgsize: 500px; background-image: var(--grain), repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120% ); background-blend-mode: screen, hue, hard-light; background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%; background-position: center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y); filter: brightness(.8) contrast(2.95) saturate(.65); } .card[data-rarity="rare holo v"] .card__shine:after, .card[data-subtypes="v-union"] .card__shine:after { content: ""; background-position: center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y); background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%; filter: brightness(1) contrast(2.5) saturate(1.75); mix-blend-mode: soft-light; } /* GLARE LAYERS */ .card[data-rarity="rare holo v"] .card__glare, .card[data-subtypes="v-union"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsla(210, 3%, 54%, 0.33) 45%, hsla(0, 0%, 20%, 0.9) 130% ); opacity: calc(var(--card-opacity)*.5); mix-blend-mode: hard-light; filter: brightness(.9) contrast(1.75); } /* --- assets/css/cards/v-full-art.css --- */ /* V FULL ART (ULTRA RARE) */ /* SHINE LAYERS */ .card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine, .card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine:after, .card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine, .card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after, .card[data-rarity="rare holo v"][data-trainer-gallery="true"] .card__shine, .card[data-rarity="rare holo v"][data-trainer-gallery="true"] .card__shine:after { --space: 5%; --angle: 133deg; --imgsize: cover; background-image: var(--foil), repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120% ); background-position: center center, 0% var(--background-y), calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), var(--background-x) var(--background-y); background-blend-mode: soft-light, hue, hard-light; background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%; filter: brightness(calc((var(--pointer-from-center)*0.4) + .4)) contrast(1.4) saturate(2.25); } .card[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:after, .card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:after, .card[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:after { content: ""; background-position: center center, 0% var(--background-y), calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y); background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%; filter: brightness(calc((var(--pointer-from-center)*.4) + .8)) contrast(1.5) saturate(1.25); mix-blend-mode: exclusion; } .card[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:before, .card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:before { content: ""; -webkit-mask-image: none; mask-image: none; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsla(0, 0%, 0%, 0) 40% ); background-position: center; background-size: cover; mix-blend-mode: overlay; opacity: 0.75; z-index: 1; } /* GLARE LAYERS */ .card[data-supertype="pokémon"][data-rarity="rare ultra"] .card__glare, .card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 75%) 5%, hsl(200, 5%, 35%) 60%, hsl(320, 40%, 10%) 150% ); background-size: 120% 150%; background-position: center center; mix-blend-mode: hard-light; filter: brightness(1) contrast(1.2) saturate(1); opacity: calc(var(--card-opacity) * .75 ); } /* NO MASK */ .card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine, .card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:after, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:after { --mask: none; --foil: url("../images/foils/illusion.png"); --imgsize: 33%; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: var(--imgsize); mask-size: var(--imgsize); background-blend-mode: exclusion, hue, hard-light; filter: brightness(calc((var(--pointer-from-center)*.3) + .35)) contrast(2) saturate(1.5); } .card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:before, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:before { content: none; display: none; } .card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:after, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4); } /* --- assets/css/cards/v-max.css --- */ /* V MAX */ .card:not(.masked)[data-rarity="rare holo vmax"] .card__shine, .card:not(.masked)[data-rarity="rare holo vmax"] .card__shine:after, .card:not(.masked)[data-rarity*="vmax"] .card__shine, .card:not(.masked)[data-rarity*="vmax"] .card__shine:after, .card:not(.masked)[data-subtypes*="vmax"] .card__shine, .card:not(.masked)[data-subtypes*="vmax"] .card__shine:after { --mask: none; --foil: url("../images/foils/vmaxbg.jpg"); --imgsize: 60% 30%; } /* SHINE LAYERS */ .card[data-rarity="rare holo vmax"] .card__shine, .card[data-rarity*="vmax"] .card__shine, .card[data-subtypes*="vmax"] .card__shine { --space: 6%; --angle: 133deg; --imgsize: cover; background-image: var(--foil), repeating-linear-gradient( -33deg, hsl(2, 70%, 47%) calc(var(--space)*1), hsl(228, 60%, 64%) calc(var(--space)*2), hsl(176, 55%, 39%) calc(var(--space)*3), hsl(123, 68%, 35%) calc(var(--space)*4), hsl(283, 75%, 57%) calc(var(--space)*5), hsl(2, 70%, 47%) calc(var(--space)*6) ), repeating-linear-gradient( var(--angle), hsla(227, 53%, 12%, 0.5) 0%, hsl(180, 10%, 50%) 2.5%, hsl(83, 50%, 35%) 5%, hsl(180, 10%, 50%) 7.5%, hsla(227, 53%, 12%, 0.5) 10% , hsla(227, 53%, 12%, 0.5) 15% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(189, 76%, 77%, 0.6) 0%, hsla(147, 59%, 77%, 0.6) 25%, hsla(271, 55%, 69%, 0.6) 50%, hsla(355, 56%, 72%, 0.6) 75% ); background-blend-mode: difference, luminosity, soft-light; background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%; background-position: center, var(--background-x) var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y); filter: brightness(calc((var(--pointer-from-center) * .4) + .4)) contrast(2) saturate(1); } .card[data-rarity="rare holo vmax"] .card__shine:after, .card[data-rarity*="vmax"] .card__shine:after, .card[data-subtypes*="vmax"] .card__shine:after { content: ""; background-image: repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ); background-blend-mode: hue, hard-light; background-size: 200% 700%, 300% 100%, 200% 100%; background-position: 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y); mix-blend-mode: lighten; opacity: calc( (0.3 * var(--card-opacity)) + var(--card-opacity) * var(--pointer-from-center) * 0.5 ); filter: saturate(1.5); } /* GLARE LAYERS */ .card[data-rarity="rare holo vmax"] .card__glare, .card[data-rarity*="vmax"] .card__glare, .card[data-subtypes*="vmax"] .card__glare { mix-blend-mode: hard-light; filter: brightness(1) contrast(1); background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.75) 0%, hsl(0, 0%, 0%) 120% ); opacity: calc( (0.2 * var(--card-opacity)) + var(--card-opacity) * var(--pointer-from-center) * 0.8 ); } /* NO MASK */ .card:not(.masked)[data-rarity="rare holo vmax"] .card__shine, .card:not(.masked)[data-rarity*="vmax"] .card__shine, .card:not(.masked)[data-subtypes*="vmax"] .card__shine { filter: brightness(calc((var(--pointer-from-center) * .4) + .4)) contrast(2) saturate(1); } /* --- assets/css/cards/v-star.css --- */ /* V STAR */ .card.masked[data-rarity="rare holo vstar"] .card__shine, .card.masked[data-rarity="rare holo vstar"] .card__shine::before, .card.masked[data-rarity="rare holo vstar"] .card__shine::after { -webkit-mask-image: var(--mask), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .5) 120% ); mask-image: var(--mask), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .5) 120% ); } /* SHINE LAYERS */ .card[data-rarity="rare holo vstar"] .card__shine, .card[data-rarity="rare holo vstar"] .card__shine:after { --space: 5%; --angle: 133deg; --imgsize: cover; background-image: var(--foil), repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120% ); background-blend-mode: soft-light, hue, hard-light; background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%; background-position: center center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y); filter: brightness(calc((var(--pointer-from-center) * .75) + .25)) contrast(2) saturate(1.25); } .card[data-rarity="rare holo vstar"] .card__shine:after { content: ""; background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%; background-position: center center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y); filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5); mix-blend-mode: exclusion; } .card[data-rarity="rare holo vstar"] .card__shine::before { content: ""; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(190, 7%, 80%, 0.75) 0%, hsla(260, 7%, 50%, 0.25) 45%, hsl(310, 7%, 50%) 120% ); mix-blend-mode: hard-light; z-index: 2; opacity: 0.8; } /* GLARE LAYERS */ .card[data-rarity="rare holo vstar"] .card__glare { filter: brightness(.7) contrast(2); background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(195, 90%, 90%) 5%, hsl(300, 3%, 60%) 60%, hsl(350, 0%, 15%) 150% ); mix-blend-mode: hard-light; opacity: calc(var(--card-opacity)*(var(--pointer-from-center)*.75)); } /* NO MASK */ .card:not(.masked)[data-rarity="rare holo vstar"] .card__shine, .card:not(.masked)[data-rarity="rare holo vstar"] .card__shine:after { --mask: none; --foil: url("../images/foils/ancient.png"); --imgsize: 18% 15%; background-blend-mode: exclusion, hue, hard-light; filter: brightness(calc((var(--pointer-from-center) * .25) + .35)) contrast(1.8) saturate(1.75); } .card:not(.masked)[data-rarity="rare holo vstar"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5); } .card:not(.masked)[data-rarity="rare holo vstar"] .card__glare { filter: brightness(.55) contrast(2); } /* --- assets/css/cards/ex-regular.css --- */ /* EX REGULAR */ /* SHINE LAYERS */ .card[data-rarity="double rare"] .card__glitter { display: block; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(295, 100%, 10%) 20%, hsla(183, 84%, 85%, 0.15) 100% ), linear-gradient( var(--angle), var(--sunpillar) ), var(--birthday-dank), var(--birthday-dank2); -webkit-mask-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), transparent 30%, black 100% ), var(--mask); mask-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), transparent 30%, black 100% ), var(--mask); -webkit-mask-mode: alpha, luminance; mask-mode: alpha, luminance; -webkit-mask-composite: destination-in; mask-composite: intersect; -webkit-mask-size: cover; mask-size: cover; background-size: cover, 500% 500%, 140% 140%, 120% 120%; background-position: center center, var(--pointer-x) var(--pointer-y), center center, center center; background-blend-mode: darken, hue, lighten; mix-blend-mode: hard-light; filter: brightness(2) contrast(.5) saturate(.75); } .card[data-rarity="double rare"] .card__shine { -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center center; mask-position: center center; } /* .card[data-rarity="double rare"]:not(.masked) .card__shine { filter: brightness(.7) contrast(2) saturate(.5); } */ .card[data-rarity="double rare"] .card__shine:before, .card[data-rarity="double rare"] .card__shine:after { content: ""; --space: 5%; --angle: 133deg; --imgsize: 200px; background-image: var(--grain), repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e1221 0%, hsl(180, 10%, 60%) 2.8%, hsl(180, 20.9%, 82.2%) 3.5%, hsl(180, 10%, 60%) 4.2%, #0e1221 7% , #0e1221 12% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120% ); background-blend-mode: screen, hue, hard-light; background-size: var(--imgsize) var(--imgsize), 200% 700%, 300% 100%, 200% 100%; background-position: center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y); filter: brightness(1) contrast(1.5) saturate(2); mix-blend-mode: lighten; } .card[data-rarity="double rare"] .card__shine:after { content: ""; background-position: center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y); background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%; filter: brightness(1.2) contrast(1) saturate(2); mix-blend-mode: difference; } /* GLARE LAYERS */ .card[data-rarity="double rare"] .card__glare, .card[data-rarity="double rare"] .card__glare2 { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 40%) 0%, hsla(210, 3%, 54%, .5) 63%, hsla(0, 0%, 30%, 1) 150% ); filter: brightness(1.5) contrast(2); mix-blend-mode: color-burn; opacity: calc( var(--card-opacity) * ( var(--pointer-from-center) + 0.2 ) ); z-index: 4; } .card[data-rarity="double rare"] .card__glare2 { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 90%) 10%, hsla(0, 0%, 20%, 0) 60% ); filter: brightness(1) contrast(1.4); mix-blend-mode: lighten; opacity: calc( var(--card-opacity) * ( var(--pointer-from-center) ) * .66 ); } /* --- assets/css/cards/ex-full-art.css --- */ /* V FULL ART (ULTRA RARE) */ /* SHINE LAYERS */ .card[data-rarity="ultra rare"][data-supertype="pokémon"] .card__shine, .card[data-rarity="ultra rare"][data-supertype="pokémon"] .card__shine:after, .card[data-rarity="ultra rare"][data-subtypes*="supporter"] .card__shine, .card[data-rarity="ultra rare"][data-subtypes*="supporter"] .card__shine:after { --space: 5%; --angle: 128.5deg; --imgsize: cover; background-image: var(--mask), var(--foil), repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 14% , #0e152e 16% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120% ); background-position: center center, center center, 0% var(--background-y), calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), var(--background-x) var(--background-y); background-blend-mode: soft-light, soft-light, hue, hard-light; background-size: var(--imgsize), var(--imgsize), 200% 700%, 300% 100%, 200% 100%; filter: brightness(calc((var(--pointer-from-center)*0.4) + .5)) contrast(2.5) saturate(.66); } .card[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:after, .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__shine:after { content: ""; background-position: center center, center center, 0% var(--background-y), calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y); background-size: var(--imgsize), var(--imgsize), 200% 400%, 195% 100%, 200% 100%; filter: brightness(calc((var(--pointer-from-center)*.4) + .5)) contrast(1.66) saturate(1); mix-blend-mode: exclusion; } .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__shine:before { display: none; } /* GLARE LAYERS */ .card[data-supertype="pokémon"][data-rarity="ultra rare"] .card__glare, .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 75%) 5%, hsl(200, 5%, 35%) 70%, hsl(320, 40%, 10%) 150% ); background-size: 120% 150%; background-position: center center; mix-blend-mode: hard-light; filter: brightness(.8) contrast(1) saturate(1); opacity: var(--card-opacity); } .card[data-subtypes*="supporter"][data-rarity="ultra rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 55%) 5%, hsl(200, 5%, 40%) 40%, hsl(200, 10%, 15%) 110% ); background-size: cover; filter: brightness(1.25) contrast(1.4) saturate(1); } /* NO MASK */ .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine, .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:after { --mask: none; --foil: url("../images/foils/illusion.png"); --imgsize: 33%; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: var(--imgsize); mask-size: var(--imgsize); background-blend-mode: exclusion, hue, hard-light; filter: brightness(calc((var(--pointer-from-center)*.3) + .35)) contrast(2) saturate(1.5); } .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:before { content: none; display: none; } .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra rare"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4); } /* --- assets/css/cards/illustration-rare.css --- */ /* V REGULAR */ /* SHINE LAYERS */ .card[data-rarity="illustration rare"]:not(.masked) .card__shine { filter: brightness(.7) contrast(2) saturate(.5); } .card[data-rarity="illustration rare"] .card__shine, .card[data-rarity="illustration rare"] .card__shine:after { --space: 5%; --angle: 133deg; --imgsize: 500px; clip-path: var(--clip); background-image: var(--grain), repeating-linear-gradient( 0deg, var(--sunpillar-clr-1) calc(var(--space)*1), var(--sunpillar-clr-2) calc(var(--space)*2), var(--sunpillar-clr-3) calc(var(--space)*3), var(--sunpillar-clr-4) calc(var(--space)*4), var(--sunpillar-clr-5) calc(var(--space)*5), var(--sunpillar-clr-6) calc(var(--space)*6), var(--sunpillar-clr-1) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120% ); background-blend-mode: screen, hue, hard-light; background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%; background-position: center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y); filter: brightness(.8) contrast(2.95) saturate(.65); } .card[data-rarity="illustration rare"] .card__shine:after { content: ""; background-position: center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y); background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%; filter: brightness(1) contrast(2.5) saturate(1.75); mix-blend-mode: soft-light; } .card[data-rarity="illustration rare"] { --grain: url(../images/foils/grain.webp); --foil: var(--wave-tex); --mask: var(--clip-borders); --clip: polygon(94.8% 2.8%, 95.7% 3.2%, 96.2% 3.8%, 96.2% 96%, 95.9% 96.8%, 94.8% 97.3%, 5% 97.3%, 4.2% 96.9%, 3.8% 96.2%, 3.8% 6.1%, 15% 6.1%, 16% 5%, 17.9% 4%, 19% 2.8%); } /* .card[data-rarity="illustration rare"][data-subtypes="stage"] { --clip: polygon(94.8% 2.8%, 95.7% 3.2%, 96.2% 3.8%, 96.2% 96%, 95.9% 96.8%, 94.8% 97.3%, 5% 97.3%, 4.2% 96.9%, 3.8% 96.2%, 3.8% 6.1%, 15% 6.1%, 16% 5%, 17.9% 4%, 19% 2.8%); } */ /* GLARE LAYERS */ .card[data-rarity="illustration rare"] .card__glare { clip-path: var(--clip); background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsl(0, 0%, 0%) 100% ); opacity: var(--card-opacity); mix-blend-mode: overlay; filter: brightness(.9) contrast(1.2); } .card[data-rarity="illustration rare"] .card__glare2 { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 5%, hsl(0, 0%, 0%) 120% ); opacity: calc( var(--card-opacity) * var(--pointer-from-center) ); mix-blend-mode: screen; filter: brightness(.475) contrast(2); } /* --- assets/css/cards/ex-special-illustration-rare.css --- */ /* EX REGULAR */ /* SHINE LAYERS */ .card[data-rarity="special illustration rare"] { --shift: calc( 3px * var(--card-scale, 1) ); --glitter-size: 150px 150px; --foil: var(--wave-tex); --mask: var(--clip-borders); } .card[data-rarity="special illustration rare"] .card__shine { filter: brightness(.6) contrast(1.5) saturate(1); } .card[data-rarity="special illustration rare"] .card__shine:after { content: ""; background-image: linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), black 24%, #797979 30%, black 36% ), linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), black 24%, #797979 30%, black 36% ); background-position: 50% calc( ( var(--background-y) * 1.7 ) ), 50% calc( ( var(--background-y) * -1.3 ) ); background-size: 300% 300%; background-blend-mode: exclusion; filter: brightness(1) contrast(.75) saturate(1); mix-blend-mode: hard-light; z-index: 3; } .card[data-rarity="special illustration rare"] .card__shine:before { content: ""; background-image: repeating-linear-gradient( 15deg, var( --holo ), var( --holo ), var( --holo ) ); background-position: center center; background-size: 240% 240%; filter: brightness(1) contrast(.75) saturate(1); mix-blend-mode: overlay; z-index: 2; } .card[data-rarity="special illustration rare"] .card__glitter { display: grid; background-image: var(--iri9); background-size: var(--glitter-size); background-position: center center; background-repeat: repeat; filter: brightness(1) contrast(2) saturate(1.2); mix-blend-mode: plus-lighter; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-mode: luminance; mask-mode: luminance; opacity: calc( var(--card-opacity) * ( .2 + var(--pointer-from-center) * .5 ) ); } .card[data-rarity="special illustration rare"] .card__glitter:before, .card[data-rarity="special illustration rare"] .card__glitter:after { content: ""; background-image: var(--iri8); background-size: var(--glitter-size); background-position: calc( 50% + (var( --pointer-from-left ) * var(--shift)) ) calc( 50% + (var( --pointer-from-top ) * var(--shift)) ); background-repeat: repeat; filter: brightness(2) contrast(1.2) saturate(2); mix-blend-mode: overlay; z-index: 2; opacity: var(--pointer-from-top); -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-mode: luminance; mask-mode: luminance; } .card[data-rarity="special illustration rare"] .card__glitter:after { background-image: var(--iri7); background-position: calc( 50% + (var( --pointer-from-left ) * var(--shift) * -1) ) calc( 50% + (var( --pointer-from-top ) * var(--shift) * -1) ); z-index: 3; opacity: calc( var(--pointer-from-top) * -1 + 1 ); } /* GLARE LAYERS */ .card[data-rarity="special illustration rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 80%) 10%, hsl(0, 0%, 50%) 70% ); mix-blend-mode: multiply; filter: contrast(1.5); } .card[data-rarity="special illustration rare"] .card__glare2 { display: block; background: white; mask: var(--foil); -webkit-mask-mode: luminance; mask-mode: luminance; mask-size: cover; mix-blend-mode: overlay; filter: contrast(.8); } /* --- assets/css/cards/hyper-rare.css --- */ /* EX REGULAR */ /* SHINE LAYERS */ .card[data-rarity="hyper rare"] { --shift: calc( 3px * var(--card-scale, 1) ); --glitter-size: 150px 150px; --foil: var(--wave-tex); --mask: var(--clip-borders); } .card[data-rarity="hyper rare"] .card__shine { filter: brightness(.6) contrast(1.5) saturate(1); } .card[data-rarity="hyper rare"] .card__shine:after { content: ""; background-image: linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * -0.25), black 24%, #797979 30%, black 36% ), linear-gradient( calc((var(--rotate-x) - var(--rotate-delta)) * 0.25), black 24%, #797979 30%, black 36% ); background-position: 50% calc( ( var(--background-y) * 1.7 ) ), 50% calc( ( var(--background-y) * -1.3 ) ); background-size: 300% 300%; background-blend-mode: exclusion; filter: brightness(1) contrast(.75) saturate(1); mix-blend-mode: hard-light; z-index: 3; } .card[data-rarity="hyper rare"] .card__shine:before { content: ""; background-image: repeating-linear-gradient( 15deg, var( --holo ), var( --holo ), var( --holo ) ); background-position: center center; background-size: 240% 240%; filter: brightness(1) contrast(.75) saturate(1); mix-blend-mode: overlay; z-index: 2; } .card[data-rarity="hyper rare"] .card__glitter { display: grid; background-image: var(--iri9); background-size: var(--glitter-size); background-position: center center; background-repeat: repeat; filter: brightness(1) contrast(2) saturate(1.2); mix-blend-mode: plus-lighter; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-mode: luminance; mask-mode: luminance; opacity: calc( var(--card-opacity) * ( .2 + var(--pointer-from-center) * .3 ) ); } .card[data-rarity="hyper rare"] .card__glitter:before, .card[data-rarity="hyper rare"] .card__glitter:after { content: ""; background-image: var(--iri8); background-size: var(--glitter-size); background-position: calc( 50% + (var( --pointer-from-left ) * var(--shift)) ) calc( 50% + (var( --pointer-from-top ) * var(--shift)) ); background-repeat: repeat; filter: brightness(2) contrast(1.2) saturate(2); mix-blend-mode: overlay; z-index: 2; opacity: var(--pointer-from-top); -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-mode: luminance; mask-mode: luminance; } .card[data-rarity="hyper rare"] .card__glitter:after { background-image: var(--iri7); background-position: calc( 50% + (var( --pointer-from-left ) * var(--shift) * -1) ) calc( 50% + (var( --pointer-from-top ) * var(--shift) * -1) ); z-index: 3; opacity: calc( var(--pointer-from-top) * -1 + 1 ); } /* GLARE LAYERS */ .card[data-rarity="hyper rare"] .card__glare, .card[data-rarity="gold"] .card__glare, .card[data-rarity="hyper-rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 80%) 10%, hsl(0, 0%, 50%) 70% ); mix-blend-mode: multiply; filter: contrast(1.5); } .card[data-rarity="hyper rare"] .card__glare2, .card[data-rarity="gold"] .card__glare2, .card[data-rarity="hyper-rare"] .card__glare2 { display: block; background: white; -webkit-mask-image: var(--foil); mask-image: var(--foil); -webkit-mask-mode: luminance; mask-mode: luminance; -webkit-mask-size: cover; mask-size: cover; mix-blend-mode: overlay; filter: contrast(.8); }