@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}:where(.brxe-accordion){list-style-type:none;margin:0;padding:0;width:100%}:where(.brxe-accordion) .brx-open .accordion-content-wrapper{display:block}:where(.brxe-accordion) .brx-open .icon.expanded{display:block!important}:where(.brxe-accordion) .brx-open .icon.expanded+.icon{display:none}:where(.brxe-accordion) .accordion-title-wrapper{cursor:pointer;margin-bottom:-1px;padding:15px 0;transition:var(--bricks-transition)}:where(.brxe-accordion) .accordion-title{align-items:center;display:flex}:where(.brxe-accordion) .accordion-title:empty{display:none!important}:where(.brxe-accordion) .accordion-title.icon-left{flex-direction:row-reverse}:where(.brxe-accordion) .accordion-title.icon-left .icon{margin-left:0;margin-right:10px}:where(.brxe-accordion) .accordion-title.icon-right .icon{margin-left:10px;margin-right:0}:where(.brxe-accordion) .accordion-title .title{flex:1;line-height:30px;margin:0}:where(.brxe-accordion) .accordion-title .icon{font-size:.8em;line-height:1;position:relative;top:1px;transform-origin:center}:where(.brxe-accordion) .accordion-title .icon.expanded{display:none}:where(.brxe-accordion) .accordion-subtitle{opacity:.8}:where(.brxe-accordion) .accordion-content-wrapper{animation:height .5s ease;display:none;overflow:hidden;padding:0 0 15px}:where(.brxe-accordion) .accordion-content-wrapper:empty{display:none!important}}@layer bricks {.brxe-code{width:100%}}@layer bricks {.brxe-icon{font-size:60px}svg.brxe-icon{font-size:inherit}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{position:relative}:where(.brxe-image).caption:has(figcaption.bricks-image-caption){overflow:hidden}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute;text-align:center;width:100%;z-index:1}}.pca { --pca-ink: #111; --pca-blue: #2764f0; --pca-yellow: #ffde3b; --pca-red: #e8352e; color: var(--pca-ink); } .pca-display { text-transform: none; text-align: left; font-family: "Titan One", sans-serif; font-weight: 400; letter-spacing: 0; line-height: .92; color: var(--pca-ink); margin: 0; } .pca-hero { padding-block: clamp(3.2rem, 1.6rem + 3vw, 6.4rem) clamp(4.8rem, 3.2rem + 3vw, 8rem); overflow-x: clip; } .pca-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(3.2rem, 1.6rem + 3vw, 6.4rem); align-items: center; } .pca-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2rem, 1.6rem + 1vw, 3.2rem); } .pca-titlewrap { width: fit-content; position: relative; padding: 2rem 0 2.24rem 1.92rem; } .pca-title { font-size: clamp(5.76rem, 1.92rem + 6.8vw, 13.6rem); text-transform: uppercase !important; transform: rotate(-3deg); transform-origin: left bottom; } .pca-underline { position: absolute; left: 2.24rem; bottom: 0.16rem; width: 58%; transform: rotate(-3deg); } .pca-burst { position: absolute; width: clamp(3.52rem, 2.56rem + 1.6vw, 5.44rem); height: auto; } .pca-burst--tl { top: -0.96rem; left: -0.96rem; } .pca-burst--r { right: -2.4rem; bottom: 1.28rem; transform: rotate(180deg); } .pca-lede { font-size: clamp(2.08rem, 1.6rem + 1vw, 2.96rem); line-height: 1.3; max-width: 20em; } .pca-btns { flex-direction: row; width: auto; display: flex; flex-wrap: wrap; gap: 1.44rem; } .pca-btn { flex-direction: row; width: auto; text-transform: none; font-family: var(--text-font-family, Inter, sans-serif); display: inline-flex; align-items: center; gap: .7em; padding: .95em 1.45em; border: 2px solid var(--pca-ink); border-radius: 12px; font-weight: 700; font-size: 1.728rem; line-height: 1; text-decoration: none; } .pca-btn-solid { background: var(--pca-ink); color: #fff; } .pca-btn-ghost { background: transparent; color: var(--pca-ink); } .pca-btn__icon { font-size: .95em; } .pca-btn:focus-visible, .pca-chip:focus-visible, .pca-card:focus-visible, .pca-link:focus-visible { outline: 3px solid var(--pca-blue); outline-offset: 3px; } .pca-note { font-size: 1.6rem; opacity: .8; } .pca-stage { position: relative; aspect-ratio: 1.08; width: 100%; max-width: 76.8rem; margin-inline: auto; } .pca-panel { position: absolute; inset: 8% 0 3% 11%; background: var(--pca-blue); border-radius: 28px; } .pca-phone { position: absolute; left: 25%; top: -4%; width: 44%; height: auto; z-index: 4; transform: rotate(7deg); filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .35)); } .pca-postcard { position: absolute; background: #fff; padding: 6px; border-radius: 4px; box-shadow: 0 14px 28px rgba(0, 0, 0, .28); z-index: 2; } .pca-postcard img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; } .pca-postcard--a { left: 0; top: 30%; width: 29%; transform: rotate(-8deg); } .pca-postcard--b { right: 3%; top: 21%; width: 32%; transform: rotate(8deg); } .pca-postcard--c { right: -1%; top: 55%; width: 34%; transform: rotate(-5deg); z-index: 3; } .pca-flag { position: absolute; right: -2%; top: -3%; width: 19%; height: auto; z-index: 5; } .pca-star { position: absolute; left: 72%; top: 10%; width: 10%; height: auto; z-index: 1; } .pca-games { padding-block: clamp(4rem, 3.2rem + 2vw, 6.4rem); scroll-margin-top: 8rem; } .pca-games__head { align-items: flex-start; position: relative; display: flex; flex-direction: column; gap: 2rem; margin-bottom: 3.2rem; } .pca-h2 { font-size: clamp(3.68rem, 2.08rem + 3vw, 6.4rem); } .pca-titleline { flex-direction: row; width: auto; position: relative; display: inline-flex; align-items: center; gap: 1.44rem; } .pca-titleline .pca-burst { position: static; transform: rotate(180deg); } .pca-chips { display: flex; flex-wrap: wrap; gap: 0.96rem; } .pca-chip { text-transform: none; font: 600 1.68rem/1 var(--text-font-family, Inter, sans-serif); padding: .75em 1.35em; border: 0; border-radius: 999px; background: #e9e8e4; color: var(--pca-ink); cursor: pointer; } .pca-chip[aria-pressed="true"] { background: var(--pca-blue); color: #fff; } .pca-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.6rem 2.8rem; } .pca-card { display: flex; flex-direction: column; gap: 1.28rem; color: inherit; text-decoration: none; } .pca-card[hidden] { display: none; } .pca-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 38%; border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); } .pca-card__meta { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; } .pca-card__name { width: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.64rem; } .pca-card__title { font-size: clamp(2.16rem, 1.76rem + .6vw, 2.72rem); line-height: 1.05; } .pca-pill { text-transform: uppercase; font: 700 1.152rem/1 var(--text-font-family, Inter, sans-serif); letter-spacing: .07em; text-transform: uppercase; padding: .5em .85em; border-radius: 999px; } .pca-pill--racing { background: #dce7ff; color: #2253d1; } .pca-pill--arcade { background: #ffe0e4; color: #c92a44; } .pca-pill--adventure { background: #dcf2d6; color: #2b7a35; } .pca-pill--relaxed { background: #ece3ff; color: #6542bd; } .pca-play { width: auto; flex: none; width: 4.48rem; height: 4.48rem; border: 2px solid var(--pca-ink); border-radius: 50%; display: grid; place-items: center; font-size: 1.36rem; } .pca-play .brxe-icon { font-size: 1.36rem; width: 1.36rem; height: 1.36rem; line-height: 1; transform: translateX(1px); } .pca-btn .brxe-icon, .pca-link .brxe-icon { font-size: 1em; line-height: 1; } .pca .pca-more { margin: 4rem auto 0; display: flex; width: fit-content; cursor: pointer; text-transform: none; font-family: var(--text-font-family, Inter, sans-serif); } .pca .pca-more[hidden] { display: none; } .pca-faq .accordion-title { align-items: center; } .pca-band { background: var(--pca-yellow); overflow: hidden; } .pca-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.2rem; align-items: end; } .pca-band__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.76rem; padding-block: clamp(4rem, 3.2rem + 2vw, 7.2rem); align-self: center; } .pca-band__title { font-size: clamp(4.8rem, 2.56rem + 4.4vw, 9.6rem); } .pca-band__text { font-size: clamp(1.84rem, 1.6rem + .5vw, 2.32rem); line-height: 1.35; max-width: 24em; } .pca-band__text a { color: inherit; text-decoration: underline; text-underline-offset: .2em; } .pca-link { flex-direction: row; width: auto; display: inline-flex; align-items: center; gap: .5em; font-weight: 800; font-size: 2rem; color: var(--pca-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; } .pca-hands { display: block; width: 100%; max-width: 60.8rem; height: auto; margin: 1.6rem auto -7%; } .pca-faq { padding-block: clamp(4rem, 3.2rem + 2vw, 6.4rem); } .pca-faq .pca-h2 { font-size: clamp(2.88rem, 2.08rem + 1.4vw, 4.16rem); margin-bottom: 2rem; } .pca-faq .accordion-item { border: 1.5px solid var(--pca-ink); border-radius: 8px; background: #fff; margin-bottom: 0.96rem; overflow: hidden; } .pca-faq .accordion-title-wrapper { padding: 1.6rem 2rem; cursor: pointer; } .pca-faq .accordion-title .title { text-transform: none; letter-spacing: 0; font: 500 1.728rem/1.3 var(--text-font-family, Inter, sans-serif); margin: 0; } .pca-faq .accordion-content-wrapper { padding: 0 2rem 1.76rem; font-size: 1.632rem; line-height: 1.55; } .pca-faq .accordion-content-wrapper a { color: var(--pca-blue); }@media (prefers-reduced-motion: no-preference) {.pca-btn, .pca-card__img, .pca-play, .pca-postcard, .pca-phone { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease; }.pca-btn:hover { transform: translateY(-2px); }.pca-btn-solid:hover { background: var(--pca-blue); border-color: var(--pca-blue); }.pca-btn-ghost:hover { background: var(--pca-ink); color: #fff; }.pca-card:hover .pca-card__img { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 16px 28px rgba(0, 0, 0, .18); }.pca-card:hover .pca-play { background: var(--pca-ink); color: #fff; }.pca-stage:hover .pca-phone { transform: rotate(4deg) translateY(-2%); }.pca-stage:hover .pca-postcard--a { transform: rotate(-11deg) translateX(-3%); }.pca-stage:hover .pca-postcard--b { transform: rotate(11deg) translateY(-3%); }}@media (max-width: 991px) {.pca-hero__grid, .pca-band__grid { grid-template-columns: minmax(0, 1fr); }.pca-stage { max-width: 57.6rem; margin-top: 2.4rem; }.pca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.pca-hands { max-width: 44.8rem; }}@media (max-width: 560px) {.pca-grid { grid-template-columns: minmax(0, 1fr); }.pca-burst--r { right: -0.64rem; }.pca-btn { font-size: 1.6rem; }.pca-titleline .pca-burst { display: none; }.pca-chip { font-size: 1.4rem; padding: .7em 1.1em; }}