@layer bricks {.brxe-code{width:100%}}.pce { --pch-ink: #111; --pch-blue: #2764f0; --pch-red: #e8352e; --pch-yellow: #ffde3b; --pch-sand: #f4f1ea; color: var(--pch-ink); padding-inline: clamp(1.6rem, 1rem + 3vw, 8rem); } .pce .pce-wrap { max-width: 128rem; margin-inline: auto; } .pce .pch-display { font-family: "Titan One", sans-serif; font-weight: 400; text-transform: uppercase !important; line-height: .95; letter-spacing: 0; margin: 0; color: var(--pch-ink); } .pce .pch-label { font: 400 1.5rem/1 "Titan One", sans-serif; text-transform: uppercase; margin: 0; } .pch-u { position: relative; display: inline-block; } .pch-u::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -.22em; height: .26em; background: url("https://dev.playcase.gg/wp-content/uploads/playcase-arcade-underline.svg?v=2") center / 100% 100% no-repeat; } .pch .pch-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 1.6em; border: 0; background: transparent; color: #fff; font: 700 1.7rem/1 var(--text-font-family, Inter), sans-serif; text-decoration: none; text-transform: none; } .pch .pch-btn-red { --btn-bg: var(--pch-red); } .pch .pch-btn-red:hover { --btn-bg: var(--pch-ink); } .pch .pch-btn:not(.has-shape)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); border-radius: 12px; } .pce-link { font: 600 1.7rem/1.2 var(--text-font-family, Inter), sans-serif; color: var(--pch-ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; } .pce-link:hover { color: var(--pch-red); } .pce-icon { display: block; width: 100%; aspect-ratio: 1; border-radius: 24%; object-fit: cover; } .pce-icon--ph { display: grid; place-items: center; color: #fff; font: 400 3.2rem/1 "Titan One", sans-serif; } .pch.pce { background: transparent !important; } .pce .pce-wrap { width: 100%; align-items: stretch; } .pce .pce-wrap > * { width: 100%; } .pce-other .pch-display { text-align: center; } .pce .pce-hero__name { font: 400 1.6rem/1 "Titan One", sans-serif; text-transform: uppercase; letter-spacing: .08em; text-align: center; margin: 0 0 clamp(2.4rem, 1.6rem + 2vw, 4.8rem); color: var(--pch-ink); }.pce-hero { padding-block: clamp(4rem, 2rem + 4vw, 8rem) clamp(3.2rem, 2rem + 2vw, 5.6rem); overflow-x: clip; } .pce-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.4rem, 1rem + 4vw, 6.4rem); align-items: center; } .pce-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; } .pce-hero__title { font-size: clamp(4.4rem, 1.6rem + 4.6vw, 8.4rem) !important; transform: rotate(-3deg); transform-origin: left bottom; } .pce-hero__lede { font-size: clamp(1.8rem, 1.5rem + .5vw, 2.2rem); line-height: 1.55; max-width: 26em; margin: 0; } .pce-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; } .pce-stage { position: relative; aspect-ratio: 1.15; } .pce-stage::before { content: ""; position: absolute; inset: 4% 0 2%; background: var(--pch-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .pce-stage__dot { position: absolute; right: -1%; top: 6%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: var(--pch-yellow); } .pce-tiles { position: absolute; inset: 12% 8% 10%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6% 10%; } .pce-tile { display: flex; flex-direction: column; align-items: center; gap: 1rem; transform: rotate(var(--t)); } .pce-tile .pce-icon { width: min(100%, 16rem); border: 6px solid #fff; box-shadow: 0 10px 0 rgba(0, 0, 0, .18); background: #fff; } .pce-tile span:last-child { font: 400 1.9rem/1 "Titan One", sans-serif; color: #fff; } .pce-tile:nth-child(1) { --t: -6deg; } .pce-tile:nth-child(2) { --t: 4deg; } .pce-tile:nth-child(3) { --t: 5deg; } .pce-tile:nth-child(4) { --t: -4deg; }.pce-guide { padding-block: clamp(2.4rem, 1.6rem + 2vw, 4.8rem); scroll-margin-top: 10rem; } .pce-guide__panel { position: relative; isolation: isolate; padding: clamp(4rem, 3rem + 2vw, 7.2rem) clamp(2rem, 1rem + 3vw, 6.4rem); } .pce-guide__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pch-sand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .pce-guide__head { text-align: center; display: grid; gap: 1.2rem; margin-bottom: clamp(2.4rem, 1.6rem + 2vw, 4.8rem); } .pce-guide__head .pch-display { font-size: clamp(3.2rem, 2rem + 2.6vw, 5.6rem); } .pce-guide__head p { font-size: 1.8rem; margin: 0; } .pce-picker { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 2vw, 4rem); align-items: stretch; } .pce-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; padding: 2.4rem; background: var(--pch-blue); border-radius: 28px; } .pce .pce-tab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.6rem 1.2rem; border-radius: 20px; color: #fff; font: 400 1.7rem/1 "Titan One", sans-serif; text-align: center; transition: background-color .2s ease; } .pce .pce-tab .pce-icon { width: 8.8rem; border: 4px solid #fff; background: #fff; } .pce .pce-tab:hover { background: rgba(255, 255, 255, .14); } .pce .pce-tab[aria-selected="true"] { background: #fff; color: var(--pch-ink); } .pce .pce-tab:focus-visible { outline: 3px solid var(--pch-yellow); outline-offset: 2px; } .pce-feature { display: none; flex-direction: column; justify-content: center; gap: 1.8rem; padding: clamp(2.4rem, 1.6rem + 2vw, 4rem); background: #fff; border-radius: 28px; box-shadow: 0 0 0 2px var(--pch-ink); } .pce-feature.is-active { display: flex; } .pce-feature__top { display: flex; align-items: center; gap: 2rem; } .pce-feature__top .pce-icon { width: 9.6rem; flex: none; } .pce-feature h3 { font: 400 clamp(2.8rem, 2rem + 1.4vw, 4rem)/1 "Titan One", sans-serif; text-transform: uppercase; margin: 0; } .pce-feature p { margin: 0; font-size: 1.7rem; } .pce-chips { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; margin: 0; padding: 0; } .pce-chips li { padding: .7rem 1.4rem; border-radius: 999px; background: var(--pch-sand); font: 700 1.5rem/1 var(--text-font-family, Inter), sans-serif; } .pce-table { width: 100%; margin-top: clamp(3.2rem, 2rem + 2vw, 5.6rem); border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 2px var(--pch-ink); font-size: 1.6rem; } .pce-table th, .pce-table td { padding: 1.4rem 1.6rem; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, .1); } .pce-table thead th { font: 400 1.6rem/1 "Titan One", sans-serif; background: var(--pch-ink); color: #fff; } .pce-table tbody th { text-align: left; font-weight: 700; } .pce-table tbody tr:last-child > * { border-bottom: 0; } .pce-yes { color: var(--pch-red); font-weight: 800; font-size: 2rem; line-height: 1; } .pce-no { color: rgba(0, 0, 0, .25); } .pce-table caption { caption-side: bottom; padding-top: 1.2rem; font-size: 1.4rem; color: rgba(0, 0, 0, .6); }.pce-other { padding-block: clamp(2.4rem, 1.6rem + 2vw, 4.8rem) 0; text-align: center; } .pce-other h2 { font-size: clamp(2.6rem, 1.8rem + 1.6vw, 4rem); } .pce-other p { font-size: 1.8rem; max-width: 34em; margin: 1.6rem auto 2.4rem; } .pce-other .pce-hero__ctas { justify-content: center; } .pce-roms { padding-block: clamp(3.2rem, 2rem + 2vw, 5.6rem); } .pce-roms__row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 2rem; padding: 2.8rem clamp(2.4rem, 1rem + 3vw, 5.6rem); font-size: 1.4rem; line-height: 1.5; color: rgba(0, 0, 0, .75); } .pce-roms__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pch-sand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .pce-roms__row svg { flex: none; width: 3.2rem; height: 3.2rem; }.pce-stage { aspect-ratio: 1.05 !important; } .pce-stage::before { inset: 4% 2% 2% 4% !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 900' preserveAspectRatio='none'%3E%3Cpath d='M210 70C330 10 520 30 650 60C780 90 900 40 960 150C1010 245 960 350 975 470C990 600 1000 720 900 800C800 880 660 840 520 860C380 880 220 900 120 820C30 750 60 640 40 520C20 400 -10 290 50 190C95 115 140 105 210 70Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 900' preserveAspectRatio='none'%3E%3Cpath d='M210 70C330 10 520 30 650 60C780 90 900 40 960 150C1010 245 960 350 975 470C990 600 1000 720 900 800C800 880 660 840 520 860C380 880 220 900 120 820C30 750 60 640 40 520C20 400 -10 290 50 190C95 115 140 105 210 70Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; } .pce-tiles { inset: 0 !important; display: block !important; } .pce-tile { position: absolute; width: 27%; gap: .6rem; } .pce-tile .pce-icon { width: 100% !important; border-width: 8px !important; box-shadow: 0 14px 0 rgba(0,0,0,.18) !important; } .pce-tile span:last-child { font-size: clamp(1.8rem, 1.2rem + .8vw, 2.6rem) !important; text-shadow: 0 2px 0 rgba(0,0,0,.15); } .pce-tile:nth-child(1) { left: 0; top: 12%; --t: -8deg; } .pce-tile:nth-child(2) { left: 40%; top: -2%; width: 31%; --t: 4deg; } .pce-tile:nth-child(3) { left: 16%; bottom: 8%; width: 25%; --t: 6deg; } .pce-tile:nth-child(4) { right: -2%; top: 38%; width: 28%; --t: -5deg; } .pce-tile:nth-child(5) { display: none; }.pce .pce-tiles { position: absolute !important; inset: 10% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26%; place-items: center; animation: pce-wheel 90s linear infinite; } .pce .pce-tile { position: static !important; width: 100% !important; animation: pce-wheel 90s linear infinite reverse; } .pce .pce-tile .pce-icon { width: 100% !important; box-shadow: 0 6px 22px rgba(0, 0, 0, .28), 0 1px 4px rgba(0, 0, 0, .12) !important; }@keyframes pce-wheel { to { transform: rotate(360deg); } }@media (prefers-reduced-motion: reduce) { .pce .pce-tiles, .pce .pce-tile { animation: none; } }@media (max-width: 991px) {.pce-hero__grid, .pce-picker { grid-template-columns: minmax(0, 1fr); }.pce-stage { max-width: 52rem; width: 100%; margin-inline: auto; }.pce-table { font-size: 1.4rem; }.pce-table th, .pce-table td { padding: 1rem .6rem; }}@media (max-width: 560px) { .pce-tabs { gap: 1rem; padding: 1.6rem; } .pce .pce-tab .pce-icon { width: 7rem; } }