/* ---- /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); } .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; /* Subtle "paper" texture on the front face (over the artwork). */ --front-texture: url("/img/card_front_texture.png"); --front-texture-opacity: 0.22; --front-texture-blend: soft-light; /* Default behavior: treat the texture like a photo (single, full bleed). */ --front-texture-position: center; --front-texture-size: cover; --front-texture-repeat: no-repeat; /* Card flip (used by sticker inspect pages). */ --flip: 0deg; } .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__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; --translate-z: calc(var(--card-scale) * 150px + 0.01px); /* add 150px to the z-axis to ensure the card is always in front of the others */ -webkit-transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale)); transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale)); } .card__rotator { -webkit-transform: rotateY(calc(var(--rotate-x) + var(--flip))) rotateX(var(--rotate-y)); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateY(calc(var(--rotate-x) + var(--flip))) rotateX(var(--rotate-y)); /* performance */ pointer-events: auto; /* Allow vertical scrolling gestures on touch devices when the card isn't active. */ touch-action: pan-y; /* 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; overflow: hidden; } /* Most card face images should keep their intrinsic proportions. */ .card__rotator img:not(.card__back) { height: auto; } /* The card back image is a "background" plate; ensure it always fills the card. */ .card__back { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .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) translateZ(1px); transform: rotateY(180deg) translateZ(1px); backface-visibility: visible; } .card__front, .card__front * { backface-visibility: hidden; } .card__front { position: relative; opacity: 1; transition: opacity 0.33s ease-out; -webkit-transform: translate3d(0px, 0px, 0.01px); transform: translate3d(0px, 0px, 0.01px); } /* iOS Safari rendering quirk: When a rounded element lives inside a 3D transformed parent, WebKit can occasionally render a tiny "square notch" in one corner (often top-left). Forcing the face onto a masked compositing layer fixes the artifact without changing layout or visuals elsewhere. */ @supports (-webkit-touch-callout: none) { .card__front, .card__back, .card__shine, .card__glare { -webkit-mask-image: -webkit-radial-gradient(white, black); } } .card__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--front-texture); background-position: var(--front-texture-position); background-size: var(--front-texture-size); background-repeat: var(--front-texture-repeat); opacity: var(--front-texture-opacity); mix-blend-mode: var(--front-texture-blend); backface-visibility: hidden; } /* Keep the texture above the artwork but below shine/glare layers. */ .card__front > img.card__face { z-index: 0; } /* Avoid showing the backface during initial page load/hard refresh. */ .loading .card__front { opacity: 1; } .loading .card__back { -webkit-transform: rotateY(180deg) translateZ(1px); transform: rotateY(180deg) translateZ(1px); opacity: 0; } /** Shine & Glare Effects **/ .card__shine { display: grid; transform: translateZ(1px); overflow: hidden; z-index: 3; background: transparent; background-size: cover; background-position: center; filter: brightness(.85) contrast(2.75) saturate(.65); mix-blend-mode: color-dodge; opacity: var(--card-opacity); } .card__shine:before, .card__shine: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 { z-index: 4; /* 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; } /** 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; } .card[data-rarity="holofoil"] .card__glare:after, .card[data-rarity="galaxy"] .card__glare:after, .card[data-rarity$="reverse holo"] .card__glare:after { clip-path: var(--clip); } .card[data-rarity="holofoil"][data-subtypes^="stage"] .card__glare:after, .card[data-rarity="galaxy"][data-subtypes^="stage"] .card__glare:after, .card[data-rarity$="reverse holo"][data-subtypes^="stage"] .card__glare:after { clip-path: var(--clip-stage); } .card[data-rarity="holofoil"][data-supertype="trainer"] .card__glare:after, .card[data-rarity="galaxy"][data-supertype="trainer"] .card__glare:after, .card[data-rarity$="reverse holo"][data-supertype="trainer"] .card__glare:after { clip-path: var(--clip-trainer); } /* ---- /css/cards.css ---- */ .card { --grain: url("/img/grain.webp"); --glitter: url("/img/glitter.png"); --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%); } .card__shine, .card__glare { will-change: transform, opacity, background-image, background-size, background-position, background-blend-mode, filter; } /* ---- /css/cards/basic.css ---- */ /* BASIC CARDS */ /* GLARE LAYERS */ /* ---- /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); } /* ---- /css/cards/regular-holo.css ---- */ /* REGULAR HOLO */ .card[data-rarity="holofoil"][data-subtypes^="stage"] .card__shine, .card[data-rarity="holofoil"][data-subtypes^="stage"] .card__glare:after { clip-path: var(--clip-stage); } .card[data-rarity="holofoil"][data-subtypes^="supporter"] .card__shine, .card[data-rarity="holofoil"][data-subtypes^="supporter"] .card__glare:after, .card[data-rarity="holofoil"][data-subtypes^="item"] .card__shine, .card[data-rarity="holofoil"][data-subtypes^="item"] .card__glare:after { clip-path: var(--clip-trainer); } /* SHINE LAYERS */ .card[data-rarity="holofoil"] .card__shine { --scanlines-space: 1px; --scanlines-light: #666; --scanlines-dark: black; --bars: 3%; --bar-color: hsla(0, 0%, 70%, 1); --bar-bg: hsla(0, 0%, 0%, 1); clip-path: var(--clip); background-image: repeating-linear-gradient( 110deg, var(--violet), var(--blue), var(--green), var(--yellow), var(--red), var(--violet), var(--blue), var(--green), var(--yellow), var(--red), var(--violet), var(--blue), var(--green), var(--yellow), var(--red) ), repeating-linear-gradient( 90deg, var(--scanlines-dark) calc(var(--scanlines-space) * 0), var(--scanlines-dark) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 4) ); background-position: calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%), center center; background-size: 400% 400%, cover; background-blend-mode: overlay; filter: brightness(1.1) contrast(1.1) saturate(1.2); mix-blend-mode: color-dodge; } .card[data-rarity="holofoil"] .card__shine:before { content: ""; background-image: repeating-linear-gradient( 90deg, var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*14) ), repeating-linear-gradient( 90deg, var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*10) ); background-position: calc((((50% - var(--background-x)) * 1.65) + 50% ) + (var(--background-y) * 0.5)) var(--background-x), calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75) ) var(--background-y); background-size: 200% 200%, 200% 200%; background-blend-mode: screen; filter: brightness( 1.15 ) contrast( 1.1 ); mix-blend-mode: hard-light; } .card[data-rarity="holofoil"] .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%, 0%) 90% ); background-position: center center; background-size: cover; mix-blend-mode: luminosity; filter: brightness(0.6) contrast(4); } @media screen and (max-width: 900px) { .card[data-rarity="holofoil"] .card__shine { --scanlines-space: .5px; } } /* GLARE LAYERS */ .card[data-rarity="holofoil"] .card__glare { opacity: calc( var(--card-opacity) * .8 ); filter: brightness(0.8) contrast(1.5); mix-blend-mode: overlay; } .card[data-rarity="holofoil"] .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(0, 0%, 0%, 0.36) 110% ); mix-blend-mode: overlay; filter: brightness(.6) contrast(3); } /* NO MASK */ /* ---- /css/cards/cosmos-holo.css ---- */ /* COSMOS HOLO */ .card[data-rarity="galaxy"][data-subtypes^="stage"] .card__shine, .card[data-rarity="galaxy"][data-subtypes^="stage"] .card__glare:after { clip-path: var(--clip-stage); } .card[data-rarity="galaxy"][data-subtypes^="supporter"] .card__shine, .card[data-rarity="galaxy"][data-subtypes^="supporter"] .card__glare:after { clip-path: var(--clip-trainer); } /* SHINE LAYERS */ .card[data-rarity="galaxy"] .card__shine { --space: 4%; clip-path: var(--clip); background-image: url("/img/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="galaxy"] .card__shine:before { content: ""; z-index: 2; background-image: url("/img/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="galaxy"] .card__shine:after { content: ""; z-index: 3; background-image: url("/img/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="galaxy"] .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="galaxy"] .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 ); } /* ---- /css/cards/amazing-rare.css ---- */ /* AMAZING RARE */ /* SHINE LAYERS */ .card[data-rarity="rare"] .card__shine { background-image: var(--glitter), var(--glitter), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(150, 20%, 10%, 1) 10%, hsla(177, 22%, 80%, 0.1) 50%, hsla(0, 0%, 95%, .98) 90% ); background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover; background-position: 40% 45%, 55% 55%, center center; background-blend-mode: soft-light, color-burn; filter: brightness(1) contrast(1) saturate(.9); } .card[data-rarity="rare"] .card__shine:before { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: var(--foil), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(50, 20%, 90%, 0.95) 10%, rgba(181, 139, 164, 0.5) 50%, hsl(0, 0%, 0%) 60% ); background-size: cover, cover; background-position: center center, center center; background-blend-mode: color-burn; mix-blend-mode: lighten; filter: brightness(1) contrast(1) saturate(1); opacity: 0.5; } .card[data-rarity="rare"] .card__shine:after { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: repeating-linear-gradient( calc( var(--angle) ), 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) ); background-size: 400% 800%; background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 ); filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1); mix-blend-mode: saturation; } /* GLARE LAYERS */ .card.masked[data-rarity="rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(50, 20%, 90%, 0.45) 0%, hsla(150, 20%, 30%, 0.45) 45%, hsla(0, 0%, 0%, .9) 120% ); filter: brightness(.9) contrast(2); } .card.masked[data-rarity="rare"] .card__glare:after { content: ""; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(50, 20%, 90%, 0.75) 0%, hsla(150, 20%, 30%, 0.65) 45%, hsla(0, 0%, 0%, 1) 90% ); filter: brightness(1) contrast(1.5); mix-blend-mode: overlay; opacity: 1; } /* NO MASK */ .card:not(.masked)[data-rarity="rare"] .card__shine { clip-path: var(--clip); } .card:not(.masked)[data-rarity="rare"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 10%, hsla(0, 0%, 100%, 0.85) 20%, hsla(0, 0%, 0%, 0.35) 90% ); mix-blend-mode: multiply; } /* ---- /css/cards/radiant-holo.css ---- */ /* RADIANT HOLO */ .card[data-rarity="radiant"] .card__shine { clip-path: var(--clip-borders); } .card[data-rarity="radiant"] .card__shine:after { clip-path: var(--clip); } /* SHINE LAYERS */ .card[data-rarity="radiant"] .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"] .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"] .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"] .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"] .card__shine, .card:not(.masked)[data-rarity="radiant"] .card__shine:after { --mask: none; --foil: url("/img/trainerbg.png"); --imgsize: 25% auto; } .card:not(.masked)[data-rarity="radiant"] .card__shine:after { background-blend-mode: difference; } /* ---- /css/cards/v-regular.css ---- */ /* V REGULAR */ /* SHINE LAYERS */ .card[data-rarity="steel"]:not(.masked) .card__shine, .card[data-subtypes="v-union"]:not(.masked) .card__shine { filter: brightness(.7) contrast(2) saturate(.5); } .card[data-rarity="steel"] .card__shine, .card[data-rarity="steel"] .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="steel"] .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="steel"] .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); } /* ---- /css/cards/v-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, .card[data-rarity="steel"][data-trainer-gallery="true"] .card__shine, .card[data-rarity="steel"][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="ultra-rare"] .card__shine:after, .card[data-subtypes*="supporter"][data-rarity="ultra-rare"] .card__shine:after, .card[data-trainer-gallery="true"][data-rarity="steel"] .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="ultra-rare"] .card__shine:before, .card[data-subtypes*="supporter"][data-rarity="ultra-rare"] .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="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%) 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="ultra-rare"] .card__shine, .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra-rare"] .card__shine:after, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="steel"] .card__shine, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="steel"] .card__shine:after { --mask: none; --foil: url("/img/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, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="steel"] .card__shine:before { content: none; display: none; } .card:not(.masked)[data-supertype="pokémon"][data-rarity="ultra-rare"] .card__shine:after, .card:not(.masked)[data-trainer-gallery="true"][data-rarity="steel"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4); } /* ---- /css/cards/v-max.css ---- */ /* V MAX */ .card:not(.masked)[data-rarity="holofoil-alt-1"][data-supertype="pokémon"] .card__shine, .card:not(.masked)[data-rarity="holofoil-alt-1"][data-supertype="pokémon"] .card__shine:after { --mask: none; --foil: url("/img/vmaxbg.jpg"); --imgsize: 60% 30%; } /* SHINE LAYERS */ .card[data-rarity="holofoil-alt-1"] .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="holofoil-alt-1"] .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="holofoil-alt-1"] .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="holofoil-alt-1"] .card__shine { filter: brightness(calc((var(--pointer-from-center) * .4) + .4)) contrast(2) saturate(1); } /* ---- /css/cards/v-star.css ---- */ /* V STAR */ .card.masked[data-rarity="holofoil-alt-2"] .card__shine, .card.masked[data-rarity="holofoil-alt-2"] .card__shine::before, .card.masked[data-rarity="holofoil-alt-2"] .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="holofoil-alt-2"] .card__shine, .card[data-rarity="holofoil-alt-2"] .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="holofoil-alt-2"] .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="holofoil-alt-2"] .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="holofoil-alt-2"] .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="holofoil-alt-2"] .card__shine, .card:not(.masked)[data-rarity="holofoil-alt-2"] .card__shine:after { --mask: none; --foil: url("/img/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="holofoil-alt-2"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5); } .card:not(.masked)[data-rarity="holofoil-alt-2"] .card__glare { filter: brightness(.55) contrast(2); } /* ---- /css/cards/trainer-full-art.css ---- */ /* ULTRA RARE (FULL ART TRAINER) some styles inherited from v-full-art.css */ /* SHINE LAYERS */ .card[data-subtypes*="supporter"][data-rarity="ultra-rare"] .card__shine { filter: brightness(calc((var(--pointer-from-center)*0.05) + .8)) contrast(1.75) saturate(1.2); } .card[data-subtypes*="supporter"][data-rarity="ultra-rare"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center)*.4) + .85)) contrast(2) saturate(.5); } .card[data-subtypes*="supporter"][data-rarity="ultra-rare"] .card__shine:before { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsla(0, 0%, 0%, 0) 80% ); mix-blend-mode: screen; opacity: 0.5; } /* GLARE LAYERS */ .card[data-rarity="ultra-rare"][data-subtypes*="supporter"] .card__glare { opacity: calc( var(--card-opacity) * .75 ); mix-blend-mode: multiply; filter: brightness(1.5) contrast(1.4) saturate(1); background-size: 170% 170%; } /* NO MASK */ .card:not(.masked)[data-subtypes*="supporter"][data-rarity="ultra-rare"] .card__shine, .card:not(.masked)[data-subtypes*="supporter"][data-rarity="ultra-rare"] .card__shine:after { --mask: none; --foil: url("/img/trainerbg.png"); --imgsize: 20%; background-blend-mode: color-burn, hue, hard-light; filter: brightness(calc((var(--pointer-from-center)*0.05) + .6)) contrast(1.5) saturate(1.2); } /* ---- /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("/img/illusion-mask.png"); --imgsize: 33%; } /* ---- /css/cards/rainbow-alt.css ---- */ /* RAINBOW (ALTERNATE ART) HOLO */ /* SHINE LAYERS */ .card[data-rarity="rare-rainbow-alt-1"] .card__shine, .card[data-rarity="holofoil-alt-1"][data-trainer-gallery="true"] .card__shine { --imgsize: cover; --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: repeating-linear-gradient( var(--angle), hsla(283, 49%, 60%, 0.75) calc(var(--space)*1), hsla(2, 70%, 58%, 0.75) calc(var(--space)*2), hsla(53, 67%, 53%, 0.75) calc(var(--space)*3), hsla(93, 56%, 52%, 0.75) calc(var(--space)*4), hsla(176, 38%, 50%, 0.75) calc(var(--space)*5), hsla(228, 100%, 77%, 0.75) calc(var(--space)*6), hsla(283, 49%, 61%, 0.75) calc(var(--space)*7) ), 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-size: 200% 400%, var(--glittersize) var(--glittersize), 400% 400%; background-position: 0% calc(var(--background-y) * 1), center center, calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 ); background-blend-mode: luminosity, overlay; filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.3)) contrast(3) saturate(1.8); } .card[data-rarity="rare-rainbow-alt-1"] .card__shine:after, .card[data-rarity="holofoil-alt-1"][data-trainer-gallery="true"] .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: overlay; background-size: var(--glittersize) var(--glittersize), 400% 400%; background-position: center center, calc( var(--background-x) * -1.5) calc( var(--background-y) * -1.5 ); filter: brightness(calc((var(--pointer-from-center)*0.5) + 0.6)) contrast(3) saturate(1); mix-blend-mode: color-dodge; opacity: calc(1.2 + (var(--pointer-from-center)/2) * -1); } .card[data-rarity="rare-rainbow-alt-1"] .card__shine:before, .card[data-rarity="holofoil-alt-1"][data-trainer-gallery="true"] .card__shine:before { content: ""; background-image: var(--foil); background-size: var(--imgsize); background-position: center center; filter: brightness(1.5) contrast(1.5); opacity: calc((var(--pointer-from-center) + 0.6 ) * 0.4 ); background-blend-mode: difference; mix-blend-mode: color-dodge; } /* GLARE LAYERS */ .card[data-rarity="rare-rainbow-alt-1"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(50, 20%, 90%, 0.75) 0%, hsla(150, 20%, 30%, 0.65) 45%, hsla(0, 0%, 0%, 1) 100% ); filter: brightness(.9) contrast(2); opacity: calc( var(--card-opacity) * 0.75 ); } /* NO MASK */ .card:not(.masked)[data-rarity="rare-rainbow-alt-1"] .card__shine, .card:not(.masked)[data-rarity="holofoil-alt-1"][data-trainer-gallery="true"] .card__shine { --mask: none; --foil: none; --imgsize: 25% auto; } /* ---- /css/cards/secret-rare.css ---- */ /* SECRET RARE (GOLD) */ /* SHINE LAYERS */ .card[data-rarity="ancient"] .card__shine, .card[data-set="swshp"][data-number="swsh145"] .card__shine { --shift: 1px; --imgsize: cover; background-image: var(--glitter), var(--glitter), conic-gradient( var(--sunpillar-clr-4), var(--sunpillar-clr-5), var(--sunpillar-clr-6), var(--sunpillar-clr-1), var(--sunpillar-clr-4) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(150, 00%, 0%, .98) 10%, hsla(0, 0%, 95%, .15) 90% ); background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover; background-position: 45% 45%, 55% 55%, center center, center center; background-blend-mode: soft-light, hard-light, overlay; mix-blend-mode: color-dodge; filter: brightness(calc( 0.4 + (var(--pointer-from-center) * 0.2) )) contrast(1) saturate(2.7); } .card[data-rarity="ancient"] .card__shine:before, .card[data-set="swshp"][data-number="swsh145"] .card__shine:before { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: var(--foil), linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(10, 20%, 90%, 0.95) 10%, hsl(0, 0%, 0%) 70% ); background-size: var(--imgsize), cover, cover; background-position: center center, center center, center center; background-blend-mode: hard-light, multiply; mix-blend-mode: lighten; filter: brightness(1.25) contrast(1.25) saturate(0.35); opacity: .8; } .card[data-rarity="ancient"] .card__shine:after, .card[data-set="swshp"][data-number="swsh145"] .card__shine:after { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: var(--glitter); background-size: var(--glittersize) var(--glittersize); background-position: calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) + var(--shift)); filter: brightness(calc((var(--pointer-from-center)*0.6) + 0.6)) contrast(1.5); mix-blend-mode: overlay; } /* GLARE LAYERS */ .card[data-rarity="ancient"] .card__glare, .card[data-set="swshp"][data-number="swsh145"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(45, 8%, 80%, 0.3) 0%, hsl(22, 15%, 12%) 180% ); filter: brightness(1.3) contrast(1.5); mix-blend-mode: hard-light; } /* NO MASK */ .card:not(.masked)[data-rarity="ancient"] .card__shine, .card:not(.masked)[data-set="swshp"][data-number="swsh145"] .card__shine { --foil: url("/img/geometric.png"); --imgsize: 33%; filter: brightness( calc( ( var( --pointer-from-center ) * 0.3 ) + 0.2 ) ) contrast(2) saturate(0.75); } /* ---- /css/cards/trainer-gallery-holo.css ---- */ /* TRAINER GALLERY HOLO */ /* SHINE LAYERS */ .card[data-rarity="holographic"] .card__shine, .card[data-rarity="holofoil"][data-trainer-gallery="true"] .card__shine, .card[data-set="swshp"][data-number="swsh020"] .card__shine { --space: 5%; --angle: -22deg; --imgsize: 300% 400%; clip-path: var(--clip-borders); background-image: repeating-linear-gradient( var(--angle), hsla(283, 49%, 60%, 0.75) calc(var(--space)*1), hsla(2, 74%, 59%, 0.75) calc(var(--space)*2), hsla(53, 67%, 53%, 0.75) calc(var(--space)*3), hsla(93, 56%, 52%, 0.75) calc(var(--space)*4), hsla(176, 38%, 50%, 0.75) calc(var(--space)*5), hsla(228, 100%, 77%, 0.75) calc(var(--space)*6), hsla(283, 49%, 61%, 0.75) calc(var(--space)*7) ); background-blend-mode: color-dodge; background-size: var(--imgsize); background-position: 0% calc(var(--background-y) * 1), var(--background-x) var(--background-y); filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.5)) contrast(2.3) saturate(1); } .card[data-rarity="holographic"] .card__shine:after, .card[data-rarity="holofoil"][data-trainer-gallery="true"] .card__shine:after, .card[data-set="swshp"][data-number="swsh020"] .card__shine:after { content: ""; 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%, 100%) 5%, hsla(300, 100%, 11%, 0.6) 40%, hsl(0, 0%, 22%) 120% ); background-position: center center; background-size: 400% 500%; filter: brightness(calc((var(--pointer-from-center)*0.2) + 0.4)) contrast(.85) saturate(1.1); mix-blend-mode: hard-light; } .card[data-rarity="holographic"] .card__shine:before, .card[data-rarity="holofoil"][data-trainer-gallery="true"] .card__shine:before, .card[data-set="swshp"][data-number="swsh020"] .card__shine:before { content: none; display: none; } /* GLARE LAYERS */ .card[data-rarity="holographic"] .card__glare, .card[data-rarity="holofoil"][data-trainer-gallery="true"] .card__glare, .card[data-set="swshp"][data-number="swsh020"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 10%, hsla(0, 0%, 100%, 0.6) 35%, hsla(180, 11%, 35%, 1) 60% ); mix-blend-mode: soft-light; } .card[data-rarity="holographic"] .card__glare:before, .card[data-rarity="holofoil"][data-trainer-gallery="true"] .card__glare:before, .card[data-rarity="holographic"] .card__glare:after, .card[data-rarity="holofoil"][data-trainer-gallery="true"] .card__glare:after { content: none; display: none; } /* ---- /css/cards/trainer-gallery-v-regular.css ---- */ /* TRAINER GALLERY (V) some styles inherited from v-full-art.css */ /* SHINE LAYERS */ /* GLARE LAYERS */ .card[data-rarity="steel"][data-trainer-gallery="true"] .card__glare { opacity: calc(var(--card-opacity)*.4); } /* ---- /css/cards/trainer-gallery-v-max.css ---- */ /* TRAINER GALLERY (V MAX) some styles inherited from rainbow-alt.css */ /* SHINE LAYERS */ /* GLARE LAYERS */ .card[data-rarity="holofoil-alt-1"][data-trainer-gallery="true"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(50, 30%, 90%) 0%, hsl(162, 5%, 40%), hsl(0, 0%, 0%) 120% ); filter: brightness(1) contrast(1); opacity: calc( var(--card-opacity) * var(--pointer-from-center) * 0.85 ); } /* ---- /css/cards/trainer-gallery-secret-rare.css ---- */ /* TRAINER GALLERY SECRET RARE (GOLD & BLACK) */ .card:not(.masked)[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine { --foil: url("/img/geometric.png"); --imgsize: 33%; filter: brightness( calc( ( var( --pointer-from-center ) * 0.3 ) + 0.2 ) ) contrast(2) saturate(0.75); } .card:not(.masked)[data-rarity="ancient"][data-trainer-gallery="true"] .card__glare { filter: brightness(.5) contrast(1); } /* SHINE LAYERS */ .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine, .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine::before, .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine::after { -webkit-mask-image: none !important; mask-image: none !important; } .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine { background-image: var(--glitter), var(--glitter), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(152.7, 21.6%, 10%) 10%, hsla(177, 22%, 80%, 0.1) 50%, hsla(0, 0%, 95%, .98) 90% ), linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) ); background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover; background-position: 40% 45%, 55% 55%, center center, center center; background-blend-mode: soft-light, darken, color; filter: brightness(1) contrast(1) saturate(1); mix-blend-mode: color-dodge; } .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine::before { content: ""; background-image: var(--foil), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(50, 20%, 90%, 0.95) 10%, hsla(324, 22%, 63%, 0.5) 50%, hsl(0, 0%, 0%) 90% ); background-size: var(--imgsize), cover; background-position: center center, center center; background-blend-mode: color-burn; mix-blend-mode: exclusion; filter: brightness(1) contrast(1) saturate(1); opacity: 1; } .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__shine::after { content: ""; background-image: var(--glitter), conic-gradient( var(--sunpillar-clr-4), var(--sunpillar-clr-5), var(--sunpillar-clr-6), var(--sunpillar-clr-1), var(--sunpillar-clr-2), var(--sunpillar-clr-3), var(--sunpillar-clr-4) ); background-size: var(--glittersize) var(--glittersize), cover; background-blend-mode: luminosity; filter: brightness(calc((var(--pointer-from-center)*0.5) + 0.6)) contrast(2) saturate(3); mix-blend-mode: soft-light; } /* GLARE LAYERS */ .card[data-rarity="ancient"][data-trainer-gallery="true"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(40, 100%, 95%, 0.2) 10%, hsla(40, 20%, 5%, 1) 180% ); filter: brightness(1) contrast(1); mix-blend-mode: hard-light; } /* ---- /css/cards/shiny-rare.css ---- */ /* SHINY RARE (HOLO) */ /* SHINE LAYERS */ .card[data-rarity="shiny"] .card__shine { clip-path: var(--clip); } .card[data-rarity="shiny"][data-subtypes^="stage"] .card__shine { clip-path: var(--clip-stage); } .card[data-rarity="shiny"] .card__shine, .card[data-rarity="shiny"] .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-rarity="shiny"] .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-rarity="shiny"] .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-rarity="shiny"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 100%) 0%, hsl(320, 5%, 15%) 150% ); background-size: cover; background-position: center center; mix-blend-mode: multiply; filter: brightness(1.2) contrast(1) saturate(.7); opacity: calc( var(--card-opacity) * var(--pointer-from-center) ); } /* NO MASK */ .card:not(.masked).card[data-rarity="shiny"] .card__shine, .card:not(.masked).card[data-rarity="shiny"] .card__shine:after { --mask: none; --foil: url("/img/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).card[data-rarity*="rare shiny"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center)*.4) + .5)) contrast(1.4) saturate(1.2); mix-blend-mode: difference; } /* ---- /css/cards/shiny-v.css ---- */ /* SHINY V (ULTRA RARE) */ /* SHINE LAYERS */ .card[data-rarity="shiny-v"] .card__shine, .card[data-rarity="shiny-v"] .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-rarity="shiny-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-rarity="shiny-v"] .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-rarity="shiny-v"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0, 0%, 90%) 5%, hsl(200, 5%, 45%) 80%, hsl(320, 40%, 10%) 150% ); background-size: 120% 140%; background-position: center center; mix-blend-mode: darken; filter: brightness(.88) contrast(2.25) saturate(.7); opacity: calc( var(--card-opacity) * var(--pointer-from-center) * 0.75 ); } /* NO MASK */ .card:not(.masked)[data-rarity="shiny-v"] .card__shine, .card:not(.masked)[data-rarity="shiny-v"] .card__shine:after { --mask: none; --foil: url("/img/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-rarity="shiny-v"] .card__shine:before { content: none; display: none; } .card:not(.masked)[data-rarity="shiny-v"] .card__shine:after { filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4); } /* ---- /css/cards/shiny-vmax.css ---- */ /* SHINY RARE (VMAX) */ /* SHINE LAYERS */ .card[data-rarity="shiny-vmax"] .card__shine { --imgsize: cover; --angle: -30deg; --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: var(--glitter), var(--glitter), linear-gradient( var(--angle), 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) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(248, 5%, 10%, 1) 10%, hsla(206, 5%, 80%, 0.1) 50%, hsla(0, 0%, 95%, .98) 90% ); background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), 400% 400%, cover; background-position: 40% 45%, 55% 55%, calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 ), center center; background-blend-mode: soft-light, overlay, color-burn; filter: brightness(1) contrast(1) saturate(.85); } .card[data-rarity="shiny-vmax"] .card__shine:before { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: var(--foil), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(248, 5%, 91%, 0.95) 10%, hsla(206, 5%, 68%, 0.5) 50%, hsl(0, 0%, 0%) 120% ); background-size: var(--imgsize), cover; background-position: center center, center center; background-blend-mode: color-burn; mix-blend-mode: lighten; filter: brightness(1) contrast(1) saturate(.4); opacity: 0.35; } .card[data-rarity="shiny-vmax"] .card__shine:after { content: ""; -webkit-mask-image: none !important; mask-image: none !important; background-image: repeating-linear-gradient( calc( var(--angle) ), 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) ); background-size: 400% 800%; background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 ); filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1); mix-blend-mode: hue; } /* GLARE LAYERS */ .card[data-rarity="shiny-vmax"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(248, 5%, 90%, 0.45) 0%, hsla(206, 5%, 30%, 0.45) 45%, hsla(0, 0%, 0%, .33) 120% ); filter: brightness(1) contrast(1.25); } .card[data-rarity="shiny-vmax"] .card__glare:after { content: ""; -webkit-mask-image: var(--mask); mask-image: var(--mask); -webkit-mask-size: cover; mask-size: cover; background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(248, 5%, 90%, 0.75) 0%, hsla(206, 5%, 30%, 0.65) 45%, hsla(0, 0%, 0%, .75) 100% ); filter: brightness(1) contrast(1.25); mix-blend-mode: overlay; opacity: 1; } /* ---- /css/cards/spiral-holographic.css ---- */ /* SPIRAL HOLOGRAPHIC (hybrid) Goal: - Use the swirly/spiral texture plate from `holofoil-alt-1` (VMAX) - Use the holographic "Trainer Gallery" color treatment from `holographic` */ .card[data-rarity="spiral-holographic"] .card__shine { /* Swirl plate from the VMAX effect */ --foil: url("/img/vmaxbg.jpg"); --foil-size: 60% 30%; /* Color treatment borrowed from trainer-gallery-holo */ --space: 5%; --angle: -22deg; --imgsize: 300% 400%; clip-path: var(--clip-borders); background-image: var(--foil), repeating-linear-gradient( var(--angle), hsla(283, 49%, 60%, 0.75) calc(var(--space) * 1), hsla(2, 74%, 59%, 0.75) calc(var(--space) * 2), hsla(53, 67%, 53%, 0.75) calc(var(--space) * 3), hsla(93, 56%, 52%, 0.75) calc(var(--space) * 4), hsla(176, 38%, 50%, 0.75) calc(var(--space) * 5), hsla(228, 100%, 77%, 0.75) calc(var(--space) * 6), hsla(283, 49%, 61%, 0.75) calc(var(--space) * 7) ); /* Blend spiral texture into the holographic gradient. soft-light keeps the spiral readable without overpowering the hue shift. */ background-blend-mode: soft-light, color-dodge; background-size: var(--foil-size), var(--imgsize); background-position: center, 0% calc(var(--background-y) * 1); filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.5)) contrast(2.3) saturate(1); } .card[data-rarity="spiral-holographic"] .card__shine:after { content: ""; /* Same "depth" pass as holographic, but on top of the spiral plate. */ 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%, 100%) 5%, hsla(300, 100%, 11%, 0.6) 40%, hsl(0, 0%, 22%) 120% ); background-position: center center; background-size: 400% 500%; filter: brightness(calc((var(--pointer-from-center) * 0.2) + 0.4)) contrast(0.85) saturate(1.1); mix-blend-mode: hard-light; } .card[data-rarity="spiral-holographic"] .card__shine:before { content: none; display: none; } .card[data-rarity="spiral-holographic"] .card__glare { /* Glare tuned to match the holographic look. */ background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 10%, hsla(0, 0%, 100%, 0.6) 35%, hsla(180, 11%, 35%, 1) 60% ); mix-blend-mode: soft-light; } .card[data-rarity="spiral-holographic"] .card__glare:before, .card[data-rarity="spiral-holographic"] .card__glare:after { content: none; display: none; } /* ---- /css/cards/swsh-pikachu.css ---- */ /* RAINBOW (SECRET) HOLO */ /* SHINE LAYERS */ .card[data-rarity="ancient"][data-set="swsh12pt5"][data-number="160"] .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) )), calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) + var(--shift)), calc( 25% + (var(--pointer-x) / 2 ) ) calc( 25% + (var(--pointer-y) / 2 ) ); filter: brightness(calc((var(--pointer-from-center)*0.5) + .75)) contrast(2) saturate(1); } .card[data-rarity="ancient"][data-set="swsh12pt5"][data-number="160"] .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: calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) - var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) - var(--shift)), var(--pointer-x) var(--pointer-y); filter: brightness(calc((var(--pointer-from-center)*0.35) + 0.35)) contrast(2) saturate(1); mix-blend-mode: exclusion; } .card[data-rarity="ancient"][data-set="swsh12pt5"][data-number="160"] .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 ); mix-blend-mode: multiply; } /* GLARE LAYERS */ .card[data-rarity="ancient"][data-set="swsh12pt5"][data-number="160"] .card__glare { background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0,0%,80%), hsla(0, 0%, 74.9%, 0.25) 30%, hsl(0, 0%, 21.6%) 130% ); filter: brightness(.9) contrast(2); opacity: calc( var(--pointer-from-center) * .9 ); mix-blend-mode: hard-light; } /* NO MASK */ .card:not(.masked)[data-rarity="ancient"][data-set="swsh12pt5"][data-number="160"] .card__shine { --foil: url("/img/illusion-mask.png"); --imgsize: 33%; } /* ---- /css/cards/stickers.css ---- */ /* Sticker cards Layout: - art window near the top (sticker image lives here) - holo/glare effects are usually constrained to the art window, but `trainer gallery rare holo` should cover the entire card - metadata renders in the bottom section */ .card[data-set="stickers"] { /* Keep a consistent "safety margin" so elements don't hug the edges. */ --sticker-safe: 5%; /* Sticker cards have large light areas; make the paper texture clearly visible. Use multiply so the darker speckles show up on near-white backgrounds. */ --front-texture-opacity: 0.38; --front-texture-blend: multiply; /* We do NOT want a texture overlay on top of the card face for stickers. */ --front-texture-opacity: 0; /* Sticker card face: - the face is an explicit background image (defaulting to the repo texture) - sizing is controlled here (no "overlay" layer above the UI) */ --card-front-img: url("/img/card_front_texture.png"); --card-front-position: center; --card-front-size: 100% 100%; --card-front-repeat: no-repeat; /* Sticker typography defaults (home page / normal cards). The inspect page overrides these via CSS variables so it can be larger without making all cards chunky. */ font-size: 16px; --sticker-title-size: 1.2em; --sticker-date-size: 0.82em; --sticker-desc-size: 0.90em; --sticker-prints-size: 0.80em; --sticker-card-number-size: 0.90em; --sticker-meta-weight: 500; /* Art window geometry (percentages of the full card). */ --sticker-header-top: var(--sticker-safe); --sticker-header-height: 6%; /* Bigger art window: the sticker should dominate the card. */ --sticker-art-gap: 1.5%; --sticker-art-top: calc(var(--sticker-header-top) + var(--sticker-header-height) + var(--sticker-art-gap)); --sticker-art-left: var(--sticker-safe); --sticker-art-right: var(--sticker-safe); /* Balance: larger sticker image, but still enough room for the info panel + footer. */ --sticker-art-bottom: 26%; --sticker-art-radius: 2.75%; --sticker-footer-height: 5%; --sticker-footer-gap: 1%; --sticker-meta-gap: 2%; /* For sticker cards, effects should cover the entire art window element. */ --clip: inset(0 0 0 0 round var(--sticker-art-radius)); --clip-invert: var(--clip); --clip-stage: var(--clip); --clip-stage-invert: var(--clip); --clip-trainer: var(--clip); } /* Responsive typography (mobile): The card itself can (and should) scale to fit the viewport, but the *text* must stay readable. These overrides intentionally make type feel slightly "zoomed" on small screens to preserve hierarchy + legibility. */ @media (max-width: 520px) { .card[data-set="stickers"] { /* Bump base type to compensate for smaller card rendering on phones. */ font-size: clamp(20px, 5.2vw, 22px); /* Preserve hierarchy: title > description > metadata. */ --sticker-title-size: 1.34em; --sticker-date-size: 0.92em; --sticker-desc-size: 1.06em; --sticker-prints-size: 0.96em; --sticker-card-number-size: 1.06em; --sticker-meta-weight: 600; /* Rebalance layout so bigger type doesn't feel cramped. */ --sticker-art-bottom: 30%; --sticker-footer-height: 6%; --sticker-meta-gap: 2.5%; } .card[data-set="stickers"][data-front-shape="square"] { --sticker-art-bottom: 28%; } .card[data-set="stickers"] .sticker__meta { gap: 8px; } } /* Extra-small phones (roughly iPhone SE / 280-390px wide): The card shrinks with the viewport, but we intentionally bump sticker type for readability. On very small widths the description can wrap and the bottom meta region runs out of space, which then gets clipped by the card face's overflow/border radius. */ @media (max-width: 420px) { .card[data-set="stickers"] { /* Give the meta area a little more room without dramatically shrinking the art window. */ --sticker-safe: 4.5%; --sticker-art-bottom: 32%; --sticker-meta-gap: 2.25%; --sticker-footer-gap: 0.8%; } .card[data-set="stickers"][data-front-shape="square"] { --sticker-art-bottom: 30%; --sticker-meta-gap: 2%; } .card[data-set="stickers"] .sticker__meta { gap: 6px; } } @media (max-width: 340px) { /* On ultra-narrow screens, prevent the description from wrapping into clipped lines. */ .card[data-set="stickers"] .sticker__desc { display: block; -webkit-line-clamp: initial; -webkit-box-orient: initial; white-space: nowrap; text-overflow: ellipsis; } } /* Mid-size devices (small tablets / narrow desktop): avoid "shrunk" typography. */ @media (min-width: 521px) and (max-width: 900px) { .card[data-set="stickers"] { font-size: clamp(18px, 2.4vw, 20px); --sticker-title-size: 1.26em; --sticker-date-size: 0.88em; --sticker-desc-size: 0.98em; --sticker-prints-size: 0.90em; --sticker-card-number-size: 0.98em; --sticker-meta-weight: 550; --sticker-art-bottom: 28%; --sticker-footer-height: 5.5%; } .card[data-set="stickers"][data-front-shape="square"] { --sticker-art-bottom: 26%; } } .card[data-set="stickers"][data-sticker-foil="full"] { /* Full-card foils: Many effect styles clip using the `--clip*` variables. For sticker cards the defaults are art-window-sized, so we override them to the full card border radius. */ --clip: inset(0 0 0 0 round var(--card-radius)); --clip-invert: var(--clip); --clip-stage: var(--clip); --clip-stage-invert: var(--clip); --clip-trainer: var(--clip); --clip-borders: var(--clip); } .card[data-set="stickers"][data-sticker-foil="full"] .card__shine { /* Ensure the foil layers sit above sticker UI/text (the "whole card surface" look). */ z-index: 30; } .card[data-set="stickers"][data-sticker-foil="full"] .card__glare { z-index: 31; } .card[data-set="stickers"][data-front-shape="square"] { /* Reduce letterboxing for square sticker art (tighten the inner frame). */ --sticker-art-bottom: 23%; --sticker-meta-gap: 1.75%; } .card[data-set="stickers"] .card__front { position: relative; overflow: hidden; /* A "trading card" face behind the sticker. */ background-image: var(--card-front-img); background-position: var(--card-front-position); background-size: var(--card-front-size); background-repeat: var(--card-front-repeat); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.4); } /* Mystery placeholder: the image is the entire card face. */ .card[data-set="stickers"][data-variant="mystery"] .card__front { background: transparent; } .card[data-set="stickers"][data-variant="mystery"] .card__front::before { /* Disable the paper texture overlay so the mystery art is clean. */ opacity: 0; } .card[data-set="stickers"][data-variant="mystery"] img.mystery__face { height: 100%; object-fit: cover; object-position: center; } /* "Mystery" placeholder card state */ .card[data-set="stickers"][data-hidden="true"] .card__front { filter: saturate(0.6) brightness(0.72) contrast(1.05); } .card[data-set="stickers"][data-hidden="true"] .card__front::after { content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%), radial-gradient(circle at 80% 85%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%), rgba(0, 0, 0, 0.25); mix-blend-mode: multiply; } .card[data-set="stickers"][data-hidden="true"] .sticker__title, .card[data-set="stickers"][data-hidden="true"] .sticker__desc, .card[data-set="stickers"][data-hidden="true"] .sticker__date, .card[data-set="stickers"][data-hidden="true"] .sticker__prints, .card[data-set="stickers"][data-hidden="true"] .sticker__rarity { opacity: 0.6; } /* The base styles apply very broad rules to *all* descendants of the rotator; for sticker layout we "reset" only our sticker subtrees. */ .card[data-set="stickers"] .sticker__bg, .card[data-set="stickers"] .sticker__header, .card[data-set="stickers"] .sticker__header *, .card[data-set="stickers"] .sticker__art, .card[data-set="stickers"] .sticker__art-bg, .card[data-set="stickers"] .sticker__art-inner, .card[data-set="stickers"] .sticker__frame, .card[data-set="stickers"] .sticker__meta, .card[data-set="stickers"] .sticker__meta *, .card[data-set="stickers"] .sticker__footer, .card[data-set="stickers"] .sticker__footer * { aspect-ratio: auto; grid-area: auto; border-radius: 0; overflow: visible; } .card[data-set="stickers"] .sticker__bg, .card[data-set="stickers"] .sticker__header, .card[data-set="stickers"] .sticker__art, .card[data-set="stickers"] .sticker__art-bg, .card[data-set="stickers"] .sticker__art-inner, .card[data-set="stickers"] .sticker__frame, .card[data-set="stickers"] .sticker__meta, .card[data-set="stickers"] .sticker__footer { width: auto; height: auto; } .card[data-set="stickers"] .sticker__header { position: absolute; left: var(--sticker-safe); right: var(--sticker-safe); top: var(--sticker-header-top); height: var(--sticker-header-height); z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 0.25rem; color: rgba(5, 10, 12, 0.9); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } .card[data-set="stickers"] .sticker__title { font-family: var(--font-sans); font-weight: 700; font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-heading); letter-spacing: 0.02em; font-size: var(--sticker-title-size); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card[data-set="stickers"] .sticker__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%), radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 60%); } .card[data-set="stickers"] .sticker__art { position: absolute; inset: var(--sticker-art-top) var(--sticker-art-right) var(--sticker-art-bottom) var(--sticker-art-left); z-index: 2; border-radius: var(--sticker-art-radius); overflow: hidden; /* Make the art window feel "pressed" into the card surface. */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.20), inset 0 2px 0 rgba(255, 255, 255, 0.60), inset 0 -16px 28px rgba(0, 0, 0, 0.26), inset 0 14px 22px rgba(255, 255, 255, 0.16); } .card[data-set="stickers"] .sticker__art-bg { position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, 0.96); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 10px 26px rgba(0, 0, 0, 0.20); } .card[data-set="stickers"] .sticker__art-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* A subtle bevel gradient to sell the "stamped" depth. */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.0) 30%, rgba(0, 0, 0, 0.34) 100% ); mix-blend-mode: multiply; opacity: 0.40; } .card[data-set="stickers"] .sticker__art-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--front-texture); background-position: var(--front-texture-position); background-size: var(--front-texture-size); background-repeat: var(--front-texture-repeat); opacity: 0.24; mix-blend-mode: var(--front-texture-blend); } .card[data-set="stickers"] .sticker__art-inner { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; isolation: isolate; /* Apply the "pressed in" shadow on the wrapper so we don't need `overflow: visible` on . */ filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18)); } .card[data-set="stickers"] .sticker__art-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Inner shadow across the sticker image itself to match the card edge treatment. */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.12), inset 0 18px 26px rgba(255, 255, 255, 0.12), inset 0 -22px 36px rgba(0, 0, 0, 0.30); z-index: 2; } .card[data-set="stickers"] .sticker__face { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center center; z-index: 1; } .card[data-set="stickers"] .sticker__frame { position: absolute; inset: 0; z-index: 6; border-radius: var(--sticker-art-radius); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12); pointer-events: none; } /* FULL CARD FOIL (Trainer Gallery Rare Holo) */ .card[data-set="stickers"][data-sticker-foil="full"] .card__front > .card__shine, .card[data-set="stickers"][data-sticker-foil="full"] .card__front > .card__glare { position: absolute; inset: 0; } .card[data-set="stickers"][data-sticker-foil="full"] .card__front > .card__shine { z-index: 7; } .card[data-set="stickers"][data-sticker-foil="full"] .card__front > .card__glare { z-index: 8; } /* Ensure the effect layers fill the art window and stay on top of the sticker image. */ .card[data-set="stickers"] .sticker__art > .card__shine, .card[data-set="stickers"] .sticker__art > .card__glare { position: absolute; inset: 0; } .card[data-set="stickers"] .sticker__art > .card__shine { z-index: 4; } .card[data-set="stickers"] .sticker__art > .card__glare { z-index: 5; } /* Bottom metadata area */ .card[data-set="stickers"] .sticker__meta { position: absolute; left: var(--sticker-safe); right: var(--sticker-safe); top: calc(100% - var(--sticker-art-bottom) + var(--sticker-meta-gap)); bottom: calc(var(--sticker-safe) + var(--sticker-footer-height) + var(--sticker-footer-gap)); z-index: 10; display: flex; flex-direction: column; gap: 6px; padding: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; font-family: var(--font-sans); font-weight: var(--sticker-meta-weight); font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-body); color: rgba(5, 10, 12, 0.88); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } .card[data-set="stickers"][data-sticker-foil="full"] .sticker__meta { /* Keep readable on top of full-card foil without adding a box. */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 12px rgba(0, 0, 0, 0.10); } .card[data-set="stickers"] .sticker__date, .card[data-set="stickers"] .sticker__desc, .card[data-set="stickers"] .sticker__prints, .card[data-set="stickers"] .sticker__card-number { display: block; } .card[data-set="stickers"] .sticker__date { font-family: var(--font-sans); font-weight: var(--sticker-meta-weight); font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-body); font-size: var(--sticker-date-size); line-height: 1.15; letter-spacing: 0.04em; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Prevent descenders from getting clipped by subpixel rounding at small sizes. */ padding-bottom: 0.08em; align-self: center; } .card[data-set="stickers"] .sticker__desc { font-family: var(--font-sans); font-weight: var(--sticker-meta-weight); font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-body); font-size: var(--sticker-desc-size); line-height: 1.22; opacity: 0.92; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* Same deal: small extra padding avoids clipped glyph descenders on narrow screens. */ padding-bottom: 0.10em; } .card[data-set="stickers"] .sticker__footer { position: absolute; left: var(--sticker-safe); right: var(--sticker-safe); bottom: var(--sticker-safe); height: var(--sticker-footer-height); z-index: 12; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-family: var(--font-sans); font-weight: var(--sticker-meta-weight); font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-body); color: rgba(5, 10, 12, 0.85); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } .card[data-set="stickers"] .sticker__prints { font-family: var(--font-sans); font-weight: var(--sticker-meta-weight); font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-body); font-size: var(--sticker-prints-size); opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card[data-set="stickers"] .sticker__card-number { font-family: var(--font-sans); font-weight: 700; font-stretch: 100%; font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-mid); font-size: var(--sticker-card-number-size); letter-spacing: 0.04em; opacity: 0.9; white-space: nowrap; }