Spaces:
Running
Running
| :root { | |
| --card-width: 25rem; | |
| --theme-primary: hsl(158 100% 33%); | |
| --theme-secondary: hsl(165 67% 48%); | |
| --theme-ternary: hsl(112 46% 75%); | |
| --theme-highlight: hsl(111 95% 92%); | |
| --theme-subtext: hsl(0 0% 30%); | |
| --theme-error-bg: hsl(6 93% 71%); | |
| --theme-error-border: hsl(355 85% 55%); | |
| } | |
| * { | |
| transition: outline-offset 0.25s ease-out; | |
| outline-style: none; | |
| outline-width: 0.15rem; | |
| outline-color: var(--theme-primary); | |
| } | |
| *:focus-visible:not(input) { | |
| outline-style: dashed; | |
| outline-offset: 0.25em; | |
| } | |
| .info h1::selection { | |
| text-fill-color: white; | |
| -webkit-text-fill-color: white; | |
| -moz-text-fill-color: white; | |
| } | |
| *::selection { | |
| background-color: gold; | |
| } | |
| html { | |
| display: flex; | |
| display: grid; | |
| align-items: center; | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background-color: whitesmoke; | |
| background-image: linear-gradient(300deg, var(--theme-highlight), white); | |
| font-family: 'Gill Sans', 'Gill Sans Mt', 'Lato', 'sans-serif'; | |
| overflow-x: hidden; | |
| } | |
| main { | |
| display: grid; | |
| place-items: center; | |
| grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); | |
| gap: 1.5rem 0; | |
| max-width: 80rem; | |
| height: 100%; | |
| padding: 0 3rem; | |
| margin: 0 auto; | |
| } | |
| @media (max-width: 500px) { | |
| main { | |
| padding: 3rem 0; | |
| } | |
| main > section { | |
| width: 95%; | |
| } | |
| main > section.info h1 { | |
| font-size: 2.5rem; | |
| } | |
| .scene .booster { | |
| --booster-scale: 0.5; | |
| } | |
| .scene .card-slot { | |
| margin-top: 1rem; | |
| } | |
| } | |
| @media (max-width: 895px) { | |
| html { | |
| height: auto; | |
| } | |
| .output .scene { | |
| margin-top: -4rem; | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| .output .booster { | |
| --booster-scale: 0.6; | |
| } | |
| } | |
| @media (max-width: 1280px) { | |
| section.info h1 { | |
| font-size: 3rem; | |
| } | |
| .output .pokecard { | |
| --card-scale: 0.8; | |
| } | |
| } | |
| section { | |
| display: grid; | |
| place-items: center; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| /* Info (left) section */ | |
| .info { | |
| max-width: 35rem; | |
| height: min-content; | |
| } | |
| .poke-trio { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| position: relative; | |
| height: 5rem; | |
| } | |
| .poke-trio > img { | |
| position: relative; | |
| user-select: none; | |
| } | |
| .poke-trio > img::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3rem; | |
| height: 3rem; | |
| border: 2px solid red; | |
| background-color: blue; | |
| } | |
| .info h1 { | |
| margin: 0.5rem auto 3rem; | |
| background-image: linear-gradient(0deg, var(--theme-primary), var(--theme-secondary)); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -moz-background-clip: text; | |
| text-align: center; | |
| font-size: 4.5rem; | |
| font-weight: bold; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| -moz-text-fill-color: transparent; | |
| transition: font-size 0.5s ease; | |
| } | |
| @media (prefers-reduced-motion) { | |
| .info h1 { | |
| transition: none; | |
| } | |
| } | |
| .info label { | |
| width: 100%; | |
| text-align: center; | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .info form { | |
| display: flex; | |
| flex-direction: row; | |
| width: 80%; | |
| margin: 0.5rem auto; | |
| } | |
| .info .name-interactive { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .info input { | |
| display: block; | |
| width: 100%; | |
| height: 45px; | |
| box-sizing: border-box; | |
| padding: 0.5rem 1rem 0.5rem 5rem; | |
| margin: 0; | |
| border: 3px solid hsl(0 0% 70%); | |
| border-right: none; | |
| border-radius: 1rem 0 0 1rem; | |
| text-align: center; | |
| font-size: 1.25rem; | |
| transition: box-shadow 0.5s ease-out; | |
| box-shadow: none; | |
| } | |
| .info input::placeholder { | |
| text-align: center; | |
| } | |
| input:focus { | |
| border-color: var(--theme-secondary); | |
| box-shadow: 0 0 0.5rem hsl(165 67% 48% / 60%); | |
| } | |
| form button { | |
| height: 2.8125rem; | |
| margin: 0; | |
| font-size: 0.85rem; | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| } | |
| .info-text { | |
| margin-top: 2.5rem; | |
| } | |
| .info-text p { | |
| width: 80%; | |
| margin: 1rem auto; | |
| text-align: justify; | |
| color: var(--theme-subtext); | |
| line-height: 1.5rem; | |
| } | |
| .info-text a, | |
| info a:is(:hover, :focus, :active, :visited) { | |
| color: var(--theme-subtext); | |
| cursor: pointer; | |
| } | |
| /* Output (right) section */ | |
| .output { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-around; | |
| height: min-content; | |
| } | |
| .output .actions { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 1rem; | |
| width: 100%; | |
| margin: 1rem auto 1.5rem; | |
| transition: transform 0.5s ease; | |
| z-index: 5; | |
| } | |
| [data-mode='booster'][data-state='completed'] .actions { | |
| transform: translateY(-25%); | |
| } | |
| button { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 1rem; | |
| background-image: linear-gradient(-90deg, var(--theme-ternary), var(--theme-secondary)); | |
| font-weight: bold; | |
| color: white; | |
| transform-origin: bottom; | |
| transition: box-shadow 0.1s, outline-offset 0.25s ease-out, filter 0.25s ease-out, opacity 0.25s; | |
| whitespace: nowrap; | |
| filter: saturate(1); | |
| cursor: pointer; | |
| } | |
| .actions button { | |
| box-shadow: 0 0.2rem 0.375rem hsl(158 100% 33% / 60%); | |
| user-select: none; | |
| pointer-events: none; | |
| opacity: 0; | |
| } | |
| [data-mode='card'][data-state='completed'] button { | |
| pointer-events: auto; | |
| opacity: 1; | |
| } | |
| button:active { | |
| box-shadow: none; | |
| } | |
| button.toggle-name.off { | |
| filter: saturate(0.15); | |
| } | |
| .scene { | |
| --scale: 0.9; | |
| height: min-content; | |
| box-sizing: border-box; | |
| perspective: 100rem; | |
| transform-origin: center; | |
| transform: scale(var(--scale)); | |
| transition: transform 0.5s ease-out; | |
| } | |
| /* Booster Pack */ | |
| .booster { | |
| --booster-rx: 0deg; | |
| --booster-ry: 0deg; | |
| --booster-rz: -5deg; | |
| --booster-scale: 0.7; | |
| --width: var(--card-width); | |
| --height: calc(var(--card-width) / 66 * 88); | |
| --depth: 0.5rem; | |
| --bg: hsl(227, 54%, 21%); | |
| display: none; | |
| position: relative; | |
| width: var(--width); | |
| height: var(--height); | |
| transform-style: preserve-3d; | |
| transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz)) | |
| scale(var(--booster-scale)); | |
| transition: transform 0.5s ease-in-out; | |
| cursor: pointer; | |
| } | |
| .booster > div { | |
| display: grid; | |
| place-items: center; | |
| position: absolute; | |
| font-size: 5rem; | |
| transform-origin: center; | |
| user-select: none; | |
| } | |
| .face:is(.front, .back, .left, .right) { | |
| height: var(--height); | |
| background-color: var(--bg); | |
| } | |
| .face:is(.front, .back, .top, .bottom) { | |
| width: var(--width); | |
| } | |
| .left, | |
| .right { | |
| width: var(--depth); | |
| } | |
| .face:is(.top, .bottom) { | |
| height: var(--depth); | |
| } | |
| .foil { | |
| width: var(--width); | |
| background-image: linear-gradient( | |
| 90deg, | |
| hsl(0 0% 80%) 0%, | |
| hsl(0 0% 84%) 10%, | |
| hsl(0 0% 88%) 20%, | |
| hsl(0 0% 92%) 30%, | |
| hsl(0 0% 96%) 40%, | |
| hsl(0 0% 100%) 50%, | |
| hsl(0 0% 96%) 60%, | |
| hsl(0 0% 92%) 70%, | |
| hsl(0 0% 88%) 80%, | |
| hsl(0 0% 84%) 90%, | |
| hsl(0 0% 80%) 100% | |
| ); | |
| } | |
| .foil.top.flat { | |
| height: 20px; | |
| transform-origin: bottom; | |
| transform: translate3d(0, -30px, 0px) rotateX(0deg); | |
| } | |
| .foil.top.flat::after, | |
| .foil.bottom.flat::after { | |
| content: ''; | |
| position: absolute; | |
| width: var(--width); | |
| height: 20px; | |
| background: radial-gradient(#ffffff 0%, transparent 50%); | |
| background-size: 1% 100%; | |
| } | |
| .foil.top.front { | |
| height: 11px; | |
| transform-origin: bottom; | |
| transform: translate3d(0, -11.4px, 3.8px) rotateX(20.5deg); | |
| } | |
| .foil.top.back { | |
| height: 11px; | |
| transform-origin: bottom; | |
| transform: translate3d(0, -11.4px, -4px) rotateX(339deg); | |
| } | |
| .face.front { | |
| transform: rotateY(0deg) translate3d(0, 0, calc(var(--depth) / 2)); | |
| } | |
| .face.left { | |
| transform: rotateY(90deg) translate3d(0, 0, calc(var(--width) - calc(var(--depth) / 2))); | |
| } | |
| .face.back { | |
| transform: rotateY(180deg) translate3d(0, 0, calc(var(--depth) / 2)) rotateZ(180deg); | |
| } | |
| .face.right { | |
| transform: rotateY(-90deg) translate3d(0, 0, calc(var(--depth) / 2)); | |
| } | |
| .face.top { | |
| transform: rotateX(90deg) translate3d(0, 0, calc(var(--depth) / 2)); | |
| } | |
| .face.bottom { | |
| transform: rotateX(-90deg) translate3d(0, 0, calc(var(--height) - calc(var(--depth) / 2))); | |
| } | |
| .foil.bottom.flat { | |
| height: 20px; | |
| transform-origin: top; | |
| transform: translate3d(0, calc(var(--height) + 10px), 0px) rotateX(0deg); | |
| } | |
| .foil.bottom.front { | |
| height: 11px; | |
| transform-origin: top; | |
| transform: translate3d(0, var(--height), 3.8px) rotateX(-19.5deg); | |
| } | |
| .foil.bottom.back { | |
| height: 11px; | |
| transform-origin: top; | |
| transform: translate3d(0, var(--height), -3.8px) rotateX(19.5deg); | |
| } | |
| .foil.back.flat { | |
| width: 30px; | |
| height: var(--height); | |
| background-image: linear-gradient( | |
| 90deg, | |
| hsl(0 0% 0%) 0%, | |
| hsl(0 0% 10%) 20%, | |
| hsl(0 0% 40%) 30%, | |
| hsl(0 0% 60%) 40%, | |
| hsl(0 0% 86%) 50%, | |
| hsl(0 0% 90%) 60%, | |
| hsl(0 0% 85%) 80%, | |
| hsl(0 0% 90%) 90%, | |
| hsl(0 0% 70%) 100% | |
| ); | |
| transform-origin: bottom; | |
| transform: translate3d(calc(var(--width) / 2 - 25px), 0px, calc(var(--depth) * -0.50001)) rotateX(0deg); | |
| } | |
| .foil.back.flap { | |
| width: 30px; | |
| height: var(--height); | |
| background-image: linear-gradient( | |
| 90deg, | |
| hsl(0 0% 70%) 0%, | |
| hsl(0 0% 74%) 10%, | |
| hsl(0 0% 78%) 20%, | |
| hsl(0 0% 82%) 30%, | |
| hsl(0 0% 86%) 40%, | |
| hsl(0 0% 90%) 50%, | |
| hsl(0 0% 86%) 60%, | |
| hsl(0 0% 82%) 70%, | |
| hsl(0 0% 78%) 80%, | |
| hsl(0 0% 74%) 90%, | |
| hsl(0 0% 70%) 100% | |
| ); | |
| transform-origin: center; | |
| transform: translate3d(calc(var(--width) / 2 - 25.5px), 0, -8px) rotateY(15deg); | |
| } | |
| .foil.back.flap::after { | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: var(--height); | |
| background: radial-gradient(#ffffff 0%, transparent 50%); | |
| background-size: 100% 0.75%; | |
| } | |
| .gradient-bg { | |
| background-image: linear-gradient( | |
| 225deg, | |
| hsl(270deg 100% 7%) 0%, | |
| hsl(246deg 77% 15%) 14%, | |
| hsl(223deg 59% 24%) 29%, | |
| hsl(199deg 44% 35%) 43%, | |
| hsl(175deg 32% 48%) 57%, | |
| hsl(151deg 36% 62%) 71%, | |
| hsl(128deg 45% 78%) 86%, | |
| hsl(104deg 100% 95%) 100% | |
| ); | |
| } | |
| .face.front { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-evenly; | |
| gap: 0.5rem; | |
| box-sizing: border-box; | |
| padding: 1rem; | |
| } | |
| .face.front, | |
| .face.back { | |
| background-size: var(--width); | |
| background-image: url('booster-background.svg'); | |
| background-position: center; | |
| } | |
| .face.right, | |
| .face.left { | |
| background-image: linear-gradient( | |
| 0deg, | |
| hsl(151deg 36% 62%) 0%, | |
| hsl(175deg 32% 48%) 14%, | |
| hsl(199deg 44% 35%) 29%, | |
| hsl(223deg 59% 24%) 57%, | |
| hsl(246deg 77% 15%) 86%, | |
| hsl(270deg 100% 7%) 100% | |
| ); | |
| } | |
| img.title { | |
| width: 100%; | |
| filter: drop-shadow(0 0.25rem 0.1rem hsl(220 100% 10% / 0.75)); | |
| } | |
| img.hf-logo { | |
| width: 90%; | |
| } | |
| .triangle { | |
| width: calc(var(--depth) * 10); | |
| aspect-ratio: 1 / 1.35; | |
| } | |
| .triangle.top { | |
| clip-path: polygon(0% 100%, 50% 0%, 100% 100%); | |
| } | |
| .triangle.bottom { | |
| clip-path: polygon(0% 0%, 50% 100%, 100% 0%); | |
| } | |
| .triangle.top.right { | |
| transform: rotateY(90deg) translate3d(0.1px, -59.1px, -39.5px) scale(0.1); | |
| } | |
| .triangle.top.left { | |
| transform: rotateY(90deg) translate3d(0.1px, -59.1px, calc(var(--width) - 41.5px)) scale(0.1); | |
| } | |
| .triangle.bottom.left { | |
| transform: rotateY(90deg) translate3d(0.1px, calc(var(--height) - 49px), calc(var(--width) - 41.5px)) scale(0.1); | |
| } | |
| .triangle.bottom.right { | |
| transform: rotateY(90deg) translate3d(0px, calc(var(--height) - 49px), -39.5px) scale(0.1); | |
| } | |
| /* Animation */ | |
| @keyframes spin-x { | |
| from { | |
| transform: scale(var(--scale)) rotate(0turn); | |
| } | |
| to { | |
| transform: scale(var(--scale)) rotate(1turn); | |
| } | |
| } | |
| @keyframes spin-y { | |
| 0% { | |
| transform: rotateX(var(--booster-rx)) rotateY(0deg) rotateZ(0deg) scale(var(--booster-scale)); | |
| } | |
| 100% { | |
| transform: rotateX(var(--booster-rx)) rotateY(360deg) rotateZ(0deg) scale(var(--booster-scale)); | |
| } | |
| } | |
| @keyframes bounce { | |
| 0% { | |
| transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz)) | |
| scale(var(--booster-scale)) translateY(0%); | |
| } | |
| 30% { | |
| transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz)) | |
| scale(var(--booster-scale)) translateY(-2%); | |
| } | |
| 50% { | |
| transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz)) | |
| scale(var(--booster-scale)) translateY(1%); | |
| } | |
| 70% { | |
| transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz)) | |
| scale(var(--booster-scale)) translateY(-1%); | |
| } | |
| 100% { | |
| transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz)) | |
| scale(var(--booster-scale)) translateY(0%); | |
| } | |
| } | |
| @keyframes shrink { | |
| from { | |
| transform: rotateZ(45deg) scale(var(--booster-scale)); | |
| opacity: 1; | |
| } | |
| to { | |
| transform: rotateZ(270deg) scale(0); | |
| opacity: 0; | |
| } | |
| } | |
| [data-mode='booster'] .booster { | |
| display: block; | |
| } | |
| :is([data-state='ready'], [data-state='failed']) .booster { | |
| animation: 5s bounce infinite ease-out; | |
| } | |
| [data-state='generating'] .scene { | |
| animation: 15s spin-x infinite linear; | |
| } | |
| [data-state='generating'] .booster { | |
| transform-origin: center; | |
| animation: 3s spin-y infinite linear; | |
| cursor: default; | |
| } | |
| [data-mode='booster'][data-state='completed'] .booster { | |
| animation: 0.5s shrink ease-out forwards; | |
| } | |
| [data-mode='booster'][data-state='completed'] .card-slot { | |
| transform: scale(0); | |
| opacity: 0; | |
| } | |
| [data-mode='booster'][data-state='completed'] .back { | |
| display: none; | |
| } | |
| [data-mode='card'][data-state='completed'] .booster { | |
| --booster-scale: 0; | |
| } | |
| [data-mode='card'][data-state='completed'] .card-slot { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| @media (prefers-reduced-motion) { | |
| @keyframes pulse { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0.6; | |
| } | |
| } | |
| @keyframes fade { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| .card-slot .pokecard { | |
| transition: none; | |
| } | |
| [data-mode='booster']:is([data-state='generating'], [data-state='completed']) .scene { | |
| animation: 1.5s pulse alternate ease-in-out infinite forwards; | |
| } | |
| [data-state='generating'] .booster { | |
| animation: 10s bounce infinite ease-out; | |
| } | |
| [data-mode='booster'][data-state='completed'] .booster { | |
| animation: 1s fade ease-in forwards; | |
| } | |
| [data-state='completed'] .card-slot { | |
| transition: opacity 1s ease-in; | |
| } | |
| [data-mode='booster'][data-state='completed'] .card-slot { | |
| transform: scale(1); | |
| opacity: 0; | |
| } | |
| [data-mode='card'][data-state='completed'] .card-slot { | |
| opacity: 1; | |
| } | |
| } | |
| /* Pokémon Card */ | |
| .card-slot { | |
| height: 100%; | |
| perspective: 100rem; | |
| transition: transform 0.5s ease-out, opacity 0.5s ease-in; | |
| } | |
| .grass { | |
| --h: 90; | |
| --s: 60%; | |
| --l: 40%; | |
| } | |
| .grass.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(55deg) drop-shadow(0 0 0.1rem green); | |
| } | |
| .fire { | |
| --h: 0; | |
| --s: 75%; | |
| --l: 45%; | |
| } | |
| .fire.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(335deg) drop-shadow(0 0 0.1rem red); | |
| } | |
| .water { | |
| --h: 210; | |
| --s: 100%; | |
| --l: 58%; | |
| } | |
| .water.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(180deg) drop-shadow(0 0 0.1rem cyan); | |
| } | |
| .lightning { | |
| --h: 50; | |
| --s: 100%; | |
| --l: 58%; | |
| } | |
| .lightning.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(5deg) drop-shadow(0 0 0.1rem gold); | |
| } | |
| .fighting { | |
| --h: 25; | |
| --s: 72%; | |
| --l: 36%; | |
| } | |
| .fighting.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(320deg) drop-shadow(0 0 0.1rem brown); | |
| } | |
| .psychic { | |
| --h: 299; | |
| --s: 43%; | |
| --l: 44%; | |
| } | |
| .psychic.energy { | |
| filter: grayscale(1) sepia(1) saturate(10) hue-rotate(240deg) drop-shadow(0 0 0.1rem purple); | |
| } | |
| .colorless { | |
| --h: 21; | |
| --s: 27%; | |
| --l: 85%; | |
| } | |
| .colorless.energy { | |
| border-radius: 50%; | |
| filter: contrast(100) grayscale(1); | |
| text-shadow: 0 0 0.5rem black; | |
| } | |
| .darkness { | |
| --h: 100; | |
| --s: 3%; | |
| --l: 17%; | |
| } | |
| .darkness.energy { | |
| filter: drop-shadow(0 0 0.1rem black); | |
| } | |
| .darkness :not(.species) { | |
| color: whitesmoke; | |
| } | |
| .metal { | |
| --h: 240; | |
| --s: 20%; | |
| --l: 77%; | |
| } | |
| .metal.energy { | |
| filter: drop-shadow(0 0 0.1rem silver); | |
| } | |
| .dragon { | |
| --h: 30; | |
| --s: 6%; | |
| --l: 44%; | |
| } | |
| .dragon.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(15deg) drop-shadow(0 0 0.1rem gold); | |
| } | |
| .fairy { | |
| --h: 334; | |
| --s: 74%; | |
| --l: 55%; | |
| } | |
| .fairy.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(300deg) drop-shadow(0 0 0.1rem pink); | |
| } | |
| .pokecard, | |
| .pokecard * { | |
| box-sizing: border-box; | |
| } | |
| .pokecard { | |
| --frame-h: 47; | |
| --frame-s: 95%; | |
| --frame-l: 58%; | |
| --frame-color: hsl(47 95% 58%); | |
| --color: hsl(var(--h) var(--s) var(--l)); | |
| --lighter: hsl(var(--h) var(--s) calc(var(--l) + 10%)); | |
| --lightest: hsl(var(--h) var(--s) calc(var(--l) + 30%)); | |
| --card-rx: 0deg; | |
| --card-ry: 0deg; | |
| --card-rz: 0deg; | |
| --card-scale: 1; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| width: 25rem; | |
| height: 35rem; | |
| padding: 0.5rem 1rem 0.1rem; | |
| border: 1rem solid; | |
| border-radius: 0.75rem; | |
| border-color: var(--frame-color); | |
| background-image: linear-gradient( | |
| 45deg, | |
| var(--lighter) 0%, | |
| var(--lightest) 15%, | |
| var(--lightest) 30%, | |
| var(--color) 50%, | |
| var(--lightest) 90%, | |
| var(--lighter) 100% | |
| ); | |
| transform-style: preserve-3d; | |
| transform-origin: center; | |
| transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(var(--card-scale)); | |
| transition: transform 0.5s ease-out; | |
| box-shadow: 0 0.75rem 1.25rem 0 hsl(0 0% 50% / 40%); | |
| } | |
| .pokecard .lower-half { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .evolves { | |
| margin: 0 1px -5px; | |
| font-size: 0.6rem; | |
| font-weight: bold; | |
| } | |
| header { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| min-height: 1.4rem; | |
| } | |
| header > * { | |
| display: inline-block; | |
| } | |
| .name { | |
| display: inline-block; | |
| justify-self: left; | |
| position: absolute; | |
| left: 1rem; | |
| margin: 0; | |
| font-size: 1.25rem; | |
| transform-origin: left; | |
| white-space: nowrap; | |
| } | |
| header > div { | |
| position: absolute; | |
| right: 1rem; | |
| width: max-content; | |
| white-space: nowrap; | |
| } | |
| .hp { | |
| font-size: 1.25rem; | |
| color: hsl(0 100% 50%); | |
| } | |
| header .energy { | |
| display: inline-block; | |
| transform: translateY(-0.15rem); | |
| } | |
| .frame:is(.picture, .species, .description) { | |
| --lighter: hsl(var(--frame-h) var(--frame-s) calc(var(--frame-l) + 15%)); | |
| --lightest: hsl(var(--frame-h) var(--frame-s) calc(var(--frame-l) + 30%)); | |
| --darker: hsl(var(--frame-h) var(--frame-s) calc(var(--frame-l) - 15%)); | |
| border-color: var(--darker) var(--frame-color) var(--lighter); | |
| } | |
| .picture, | |
| .inline-block { | |
| display: inline-block; | |
| } | |
| .picture { | |
| width: 100%; | |
| height: 240px; | |
| border: 0.375rem solid; | |
| background-color: white; | |
| object-fit: contain; | |
| box-shadow: 0.25rem 0.25rem 0.5rem black; | |
| user-select: none; | |
| } | |
| .species { | |
| width: 90%; | |
| padding: 0.1rem; | |
| margin: 0.25rem auto; | |
| border-style: solid; | |
| border-width: 0 0.2rem; | |
| border-image: linear-gradient(var(--lightest), var(--darker)) 1 100%; | |
| background-image: linear-gradient(90deg, var(--frame-color), var(--lightest) 45% 55%, var(--frame-color)); | |
| text-align: center; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| .species::selection { | |
| background-color: white; | |
| } | |
| .attacks-row, | |
| .footer { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| width: 100%; | |
| } | |
| .footer > span:first-child { | |
| text-align: left; | |
| } | |
| .footer > span:last-child { | |
| text-align: right; | |
| } | |
| .attacks { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-evenly; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| list-style-type: none; | |
| } | |
| .attacks-row { | |
| grid-template-columns: 3rem 1fr 3rem; | |
| align-items: center; | |
| width: 105%; | |
| height: 100%; | |
| max-height: 5rem; | |
| padding: 0.25rem 0; | |
| margin-left: -2.5%; | |
| border-bottom: 0.5px solid hsl(0, 0%, 10%); | |
| font-size: 0.95em; | |
| } | |
| .attacks-row.no-cost { | |
| grid-template-columns: 1fr 3rem; | |
| } | |
| .attacks-row.no-damage { | |
| grid-template-columns: 3rem 1fr; | |
| text-align: left; | |
| } | |
| .attacks-row.no-cost.no-damage { | |
| grid-template-columns: 1fr; | |
| } | |
| .attack-text { | |
| margin-left: 0.25rem; | |
| margin-right: 0.1rem; | |
| } | |
| .attack-text > span:only-child { | |
| display: block; | |
| margin-left: -1rem; | |
| text-align: center; | |
| } | |
| .no-cost .attack-text > span:only-child, | |
| .no-cost.no-damage .attack-text > span:only-child { | |
| width: var(--card-width); | |
| margin-left: -2.5rem; | |
| } | |
| .no-damage .attack-text > span:only-child { | |
| width: var(--card-width); | |
| margin-left: -5.5rem; | |
| } | |
| .attack-cost { | |
| display: flex; | |
| flex-flow: row wrap; | |
| justify-content: space-evenly; | |
| text-align: justify; | |
| } | |
| .energy { | |
| width: 1.2rem; | |
| height: 1.2rem; | |
| text-align: center; | |
| cursor: default; | |
| user-select: none; | |
| } | |
| .energy:only-child { | |
| justify-self: flex-start; | |
| margin: auto; | |
| } | |
| .attack-name { | |
| font-weight: bold; | |
| } | |
| .attack-damage { | |
| min-width: 2.25rem; | |
| text-align: center; | |
| font-size: 1.375rem; | |
| } | |
| hr { | |
| border: 0.5px solid black; | |
| background-color: black; | |
| } | |
| .multipliers { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| height: 2rem; | |
| margin-top: 0; | |
| text-align: center; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| } | |
| .multipliers > div { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: max-content; | |
| margin: 0; | |
| white-space: nowrap; | |
| } | |
| .resistance { | |
| position: relative; | |
| } | |
| .resistance-total { | |
| position: absolute; | |
| top: 1rem; | |
| left: 2.5rem; | |
| } | |
| .description { | |
| padding: 0.1rem 0.5rem; | |
| margin: 0.25rem 0 0; | |
| border: 0.1rem solid; | |
| font-size: 0.65rem; | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| .footer { | |
| align-self: end; | |
| position: relative; | |
| margin: 0.15rem 0; | |
| text-align: center; | |
| font-size: 0.6rem; | |
| font-weight: bold; | |
| } | |
| .pokecard a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |