splatoon-ui 0.1.0

package/dist/server.css

@@ -0,0 +1,1091 @@
+/* src/components/ui/card-slot.module.css */
+.cardSlot {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+
+/* src/components/ui/torn-card.module.css */
+.tape {
+  display: block;
+  transform: rotate(var(--tape-rotate, 0deg));
+}
+.alertContent {
+  padding: calc(var(--base-space, 8px) * 4);
+}
+@container (min-width: 400px) {
+  .alertContent {
+    padding: calc(var(--base-space, 8px) * 6) calc(var(--base-space, 8px) * 4);
+  }
+}
+.imgDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .imgMobile {
+    display: none;
+  }
+  .imgDesktop {
+    display: block;
+  }
+}
+
+/* src/components/ui/black-tape-container.module.css */
+.blackTapeContainer {
+  --tape-offset: 16px;
+  --tape-safe-bleed: min(var(--tape-offset), max(0px, calc((100cqw - 100%) / 2)));
+  --tape-width: 30px;
+  margin-left: calc(var(--tape-safe-bleed) * -1);
+  margin-right: calc(var(--tape-safe-bleed) * -1);
+  overflow-x: clip;
+  padding: 0 var(--tape-offset);
+  position: relative;
+}
+.blackTapeContainer::before,
+.blackTapeContainer::after {
+  background-repeat: repeat-y;
+  content: "";
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: var(--tape-width);
+  z-index: 1;
+}
+.blackTapeContainer::before {
+  background-image: url(/_images/svg/left-black-tape-container.svg);
+  background-position: calc(100% - 1px) top;
+  left: 0;
+}
+.blackTapeContainer::after {
+  background-image: url(/_images/svg/right-black-tape-container.svg);
+  background-position: 1px top;
+  right: 0;
+}
+.blackTapeContainerInner {
+  background: var(--color-black-alt, #0e0e0e);
+  padding: 1.5em;
+}
+.tapeYellow .blackTapeContainerInner {
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.tapeYellow::before {
+  background-image: url(/_images/svg/left-yellow-tape-container.svg);
+}
+.tapeYellow::after {
+  background-image: url(/_images/svg/right-yellow-tape-container.svg);
+}
+.noVerticalPadding .blackTapeContainerInner {
+  padding: 0 1.5em;
+}
+@media screen and (min-width: 640px) {
+  .blackTapeContainer {
+    --tape-offset: 38px;
+    --tape-width: 40px;
+  }
+  .blackTapeContainerInner {
+    padding: 2em;
+  }
+  .noVerticalPadding .blackTapeContainerInner {
+    padding: 0 2em;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .blackTapeContainer {
+    --tape-offset: 58px;
+    --tape-width: 60px;
+  }
+}
+
+/* src/components/ui/button-arrow.module.css */
+.buttonArrow {
+  color: var(--color);
+  display: inline-block;
+  font-family: var(--font-alt);
+  font-size: 1.5rem;
+  line-height: 1;
+  text-decoration: none;
+}
+.buttonArrow:hover .iconWrap {
+  transform: translateX(10px);
+}
+.iconWrap {
+  display: inline-flex;
+  margin-left: 0.5rem;
+}
+.iconWrap svg {
+  height: 16px;
+  transform: translateX(5px);
+  transition: transform 0.2s;
+  width: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .buttonArrow {
+    font-size: 1.625rem;
+  }
+}
+
+/* src/components/ui/button-drip.module.css */
+.button {
+  --bg-color: var(--color-primary);
+  --text-color: var(--color-primary-alt);
+  --hover-bg-color: var(--color-accent);
+  --hover-text-color: var(--color-accent-alt);
+  --speed: calc(var(--duration-factor) * 1.8s);
+  --drip-speed-factor: 1;
+  --drip-in-start: polygon(0 100%, 0 100%, 100% 100%, 100% 100%);
+  --drip-in-end: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  --drip-out-start: polygon(0 0, 0 0, 100% 0, 100% 0);
+  --drip-out-end: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: var(--font-alt);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: border calc(var(--duration-factor) * 0.2s) calc(var(--duration-factor) * 0.25s);
+  width: 100%;
+}
+.button > *:not(.icon) {
+  width: 100%;
+}
+.icon {
+  height: 26px;
+  margin-right: var(--base-space, 8px);
+  padding-top: var(--base-space, 8px);
+  width: 20px;
+}
+.content,
+.hoverContent {
+  align-items: center;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  font-size: 1.5rem;
+  height: 100%;
+  justify-content: center;
+  padding: calc(var(--base-space, 8px) * 1.5) calc(var(--base-space, 8px) * 5.5) calc(var(--base-space, 8px) * 2.5) calc(var(--base-space, 8px) * 5.5);
+  transition: background-color calc(var(--duration-factor) * 0.2s) ease;
+  width: 100%;
+}
+.content span,
+.hoverContent span {
+  position: relative;
+  white-space: nowrap;
+  z-index: 1;
+}
+.content .icon,
+.hoverContent .icon {
+  fill: var(--text-color);
+}
+.hoverContent {
+  animation: calc(var(--speed) * var(--drip-speed-factor)) button-drip_drip-leave 0.2s ease forwards;
+  animation-fill-mode: forwards;
+  background-color: var(--hover-bg-color);
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 2px var(--hover-bg-color);
+  color: var(--hover-text-color);
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: box-shadow 0.2s;
+  transition-delay: 0.6s;
+  width: 100%;
+  z-index: 2;
+}
+@media (hover: hover) {
+  .button:hover .hoverContent {
+    animation: calc(var(--speed) * var(--drip-speed-factor)) button-drip_drip-enter 0.2s ease forwards;
+    box-shadow: inset 0 0 0 2px var(--hover-text-color);
+    opacity: 1;
+  }
+}
+.accentColors {
+  --bg-color: var(--color-accent);
+  --text-color: var(--color-accent-alt);
+  --hover-bg-color: var(--color-primary);
+  --hover-text-color: var(--color-primary-alt);
+}
+@-webkit-keyframes button-drip_drip-enter {
+  0% {
+    -webkit-clip-path: var(--drip-in-start);
+    clip-path: var(--drip-in-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-in-end);
+    clip-path: var(--drip-in-end);
+  }
+}
+@keyframes button-drip_drip-enter {
+  0% {
+    -webkit-clip-path: var(--drip-in-start);
+    clip-path: var(--drip-in-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-in-end);
+    clip-path: var(--drip-in-end);
+  }
+}
+@-webkit-keyframes button-drip_drip-leave {
+  0% {
+    -webkit-clip-path: var(--drip-out-start);
+    clip-path: var(--drip-out-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-out-end);
+    clip-path: var(--drip-out-end);
+  }
+}
+@keyframes button-drip_drip-leave {
+  0% {
+    -webkit-clip-path: var(--drip-out-start);
+    clip-path: var(--drip-out-start);
+  }
+  to {
+    -webkit-clip-path: var(--drip-out-end);
+    clip-path: var(--drip-out-end);
+  }
+}
+
+/* src/components/ui/event-callout.module.css */
+.callout {
+  background: var(--color-black, #0d0d0d);
+  border: 3px solid var(--color-black, #0d0d0d);
+  border-radius: 8px;
+  color: var(--color-white, #fff);
+  overflow: hidden;
+  position: relative;
+}
+.background {
+  block-size: 100%;
+  filter: saturate(1.18) contrast(1.05);
+  inline-size: 100%;
+  inset: 0;
+  object-fit: cover;
+  opacity: 0.32;
+  position: absolute;
+  transform: scale(1.08) rotate(-1deg);
+}
+.content {
+  display: grid;
+  gap: clamp(18px, 4vw, 30px);
+  grid-template-columns: minmax(0, 1fr);
+  padding: clamp(18px, 4vw, 30px);
+  position: relative;
+  z-index: 1;
+}
+.mediaFrame {
+  aspect-ratio: 382 / 215;
+  background: var(--color-white, #fff);
+  border: 4px solid var(--color-white, #fff);
+  box-shadow: 8px 10px 0 rgb(0 0 0 / 0.35);
+  position: relative;
+  transform: rotate(-1.5deg);
+}
+.media {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+.iconBadge {
+  align-items: center;
+  background: var(--color-yellow, #eaff3d);
+  border: 3px solid var(--color-black, #0d0d0d);
+  border-radius: 999px;
+  box-shadow: 4px 5px 0 rgb(0 0 0 / 0.35);
+  display: flex;
+  inline-size: clamp(46px, 12vw, 64px);
+  justify-content: center;
+  padding: 7px;
+  position: absolute;
+  right: -14px;
+  top: -18px;
+  transform: rotate(8deg);
+}
+.iconBadge img {
+  block-size: auto;
+  display: block;
+  inline-size: 100%;
+}
+.body {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-inline-size: 0;
+}
+.eyebrow {
+  color: var(--color-yellow, #eaff3d);
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.18em;
+  line-height: 1;
+  margin: 0;
+  text-transform: uppercase;
+}
+.title {
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(1.875rem, 7vw, 3.25rem);
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 0.9;
+  margin: 0;
+  text-transform: uppercase;
+}
+.description {
+  color: rgb(255 255 255 / 0.82);
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.45;
+  margin: 0;
+  max-inline-size: 34rem;
+}
+.action {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-block-start: 8px;
+}
+@media (min-width: 760px) {
+  .content {
+    align-items: center;
+    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1fr);
+  }
+  .mediaFrame {
+    transform: rotate(-2deg);
+  }
+}
+
+/* src/components/ui/heading-tape.module.css */
+.headingTapeSection {
+  container-type: inline-size;
+  display: flex;
+  justify-content: center;
+  margin-bottom: calc(var(--base-space, 8px) * var(--margin-offset, 2));
+  min-inline-size: 0;
+  position: relative;
+  width: 100%;
+}
+.overlapTop {
+  margin-top: -30px;
+}
+.headingTapeContainer {
+  position: relative;
+  transform: rotate(-3deg);
+  width: fit-content;
+}
+.headingTapeDecorations {
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+.headingTapeDecoration {
+  display: block;
+  inline-size: var(--heading-tape-decoration-inline-size, 100%);
+  max-inline-size: var(--heading-tape-decoration-max-inline-size, 100%);
+  position: absolute;
+}
+.decorationTopLeft {
+  left: var(--heading-tape-decoration-inline-offset, -19px);
+  top: var(--heading-tape-decoration-block-offset, -15px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationTopRight {
+  right: var(--heading-tape-decoration-inline-offset, -17px);
+  top: var(--heading-tape-decoration-block-offset, -15px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationBottomLeft {
+  bottom: var(--heading-tape-decoration-block-offset, -17px);
+  left: var(--heading-tape-decoration-inline-offset, -19px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.decorationBottomRight {
+  bottom: var(--heading-tape-decoration-block-offset, -17px);
+  right: var(--heading-tape-decoration-inline-offset, -17px);
+  transform: rotate(var(--heading-tape-decoration-rotate, 0deg));
+}
+.headingTapeDecorationImage {
+  block-size: auto;
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+.headingTapeDecorationImageDesktop {
+  display: none;
+}
+.headingTapeText {
+  background: var(--color-white, #ffffff);
+  border-radius: 10px;
+  color: var(--color-black, #0d0d0d);
+  display: inline-block;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1;
+  max-inline-size: 100%;
+  overflow-wrap: break-word;
+  padding: calc(var(--base-space, 8px) * 2) 40px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 1;
+}
+.compact .headingTapeText {
+  border-radius: 8px;
+  font-size: 1.375rem;
+  padding: calc(var(--base-space, 8px) * 1.25) 24px;
+}
+@container (min-width: 640px) {
+  .headingTapeDecorationImageMobile {
+    display: none;
+  }
+  .headingTapeDecorationImageDesktop {
+    display: block;
+  }
+}
+@container (min-width: 640px) {
+  .headingTapeText {
+    padding: calc(var(--base-space, 8px) * 2) 60px;
+  }
+  .compact .headingTapeText {
+    font-size: 2rem;
+    padding: calc(var(--base-space, 8px) * 1.5) 36px;
+  }
+}
+@container (min-width: 1024px) {
+  .headingTapeText {
+    font-size: 3.125rem;
+  }
+  .compact .headingTapeText {
+    font-size: 2.5rem;
+  }
+}
+
+/* src/components/ui/photo-frame.module.css */
+.photoFrame {
+  --border-offset-x: 3px;
+  --border-offset-y: 4px;
+  --tape-rotation: 6deg;
+  --margin-offset: 6;
+  --photo-aspect-ratio: auto;
+  aspect-ratio: var(--photo-aspect-ratio);
+  container-type: inline-size;
+  display: inline-block;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  line-height: 0;
+  margin-top: calc(var(--base-space, 8px) * var(--margin-offset));
+  padding: calc(var(--border-offset-y) * 2) calc(var(--border-offset-x) * 2);
+  position: relative;
+  transform: rotate(var(--end-rotate, 0deg));
+}
+.photoFrame::before {
+  background-image: url(/_images/svg/styled-photo-background.svg);
+  background-position: 50% center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  content: "";
+  height: calc(100% + var(--border-offset-y) * 2);
+  left: calc(var(--border-offset-x) * -1);
+  position: absolute;
+  top: calc(var(--border-offset-y) * -1);
+  width: calc(100% + var(--border-offset-x) * 2);
+  pointer-events: none;
+}
+.fillWidth {
+  --photo-aspect-ratio: 16 / 9;
+  display: block;
+  width: 100%;
+}
+.nested {
+  max-width: 350px;
+}
+.nested.photoFrame {
+  --border-offset-x: 2px;
+  --border-offset-y: 3px;
+  --margin-offset: 4;
+}
+.thinBorder.photoFrame,
+.photoFrame.thinBorder {
+  --border-offset-x: 2px;
+  --border-offset-y: 3px;
+}
+.mediumBorder.photoFrame,
+.photoFrame.mediumBorder {
+  --border-offset-x: 2px;
+  --border-offset-y: 4px;
+}
+.photo {
+  mask-image: url(/_images/svg/styled-photo-background.svg);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  object-fit: contain;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.noContainer {
+  container-type: unset;
+}
+.tape {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+}
+.tapeMobile {
+  display: block;
+}
+.tapeDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .tapeMobile {
+    display: none;
+  }
+  .tapeDesktop {
+    display: block;
+  }
+}
+.tapeCenter {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeLeft {
+  top: 0;
+  left: var(--slot-offset, 15%);
+  transform: translateY(-50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeRight {
+  top: 0;
+  right: var(--slot-offset, 15%);
+  transform: translateY(-50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomCenter {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomLeft {
+  bottom: 0;
+  left: var(--slot-offset, 15%);
+  transform: translateY(50%) rotate(var(--tape-rotate, 6deg));
+}
+.tapeBottomRight {
+  bottom: 0;
+  right: var(--slot-offset, 15%);
+  transform: translateY(50%) rotate(var(--tape-rotate, 6deg));
+}
+.decoration {
+  pointer-events: none;
+  position: absolute;
+  z-index: 20;
+}
+.decorationMobile {
+  display: block;
+}
+.decorationDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .decorationMobile {
+    display: none;
+  }
+  .decorationDesktop {
+    display: block;
+  }
+}
+.decorationBottomLeft {
+  --slot-offset: 15%;
+  bottom: 0;
+  left: var(--slot-offset);
+  transform: translateY(50%);
+}
+.decorationTopRight {
+  --slot-offset: 15%;
+  top: 0;
+  right: var(--slot-offset);
+  transform: translateY(-50%);
+}
+.decorationBottomRight {
+  --slot-offset: 15%;
+  bottom: 0;
+  right: var(--slot-offset);
+  transform: translateY(50%);
+}
+.decorationCenter {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@media screen and (min-width: 640px) {
+  .decorationBottomLeft,
+  .decorationBottomRight {
+    --slot-offset: 15%;
+  }
+  .decorationTopRight {
+    --slot-offset: 15%;
+  }
+}
+@media screen and (min-width: 640px) {
+  .photoFrame {
+    --border-offset-x: 4px;
+    --border-offset-y: 3px;
+  }
+}
+
+/* src/components/ui/section-background.module.css */
+.sectionBackground {
+  background-position: top;
+  min-height: 100px;
+}
+.patternBaseBgPattern {
+  background-image: url(/_images/backgrounds/base-bg-pattern.jpg);
+  background-image: image-set(url(/_images/backgrounds/base-bg-pattern.jpg) 1x, url(/_images/backgrounds/base-bg-pattern-2x.jpg) 2x);
+}
+.patternCamoBlack {
+  background-image: url(/_images/backgrounds/camo-black.png);
+  background-image: image-set(url(/_images/backgrounds/camo-black.png) 1x, url(/_images/backgrounds/camo-black-2x.png) 2x);
+}
+.patternCamoGreen {
+  background-image: url(/_images/backgrounds/camo-green.png);
+  background-image: image-set(url(/_images/backgrounds/camo-green.png) 1x, url(/_images/backgrounds/camo-green-2x.png) 2x);
+}
+.patternCamoPurple {
+  background-image: url(/_images/backgrounds/camo-purple.png);
+  background-image: image-set(url(/_images/backgrounds/camo-purple.png) 1x, url(/_images/backgrounds/camo-purple-2x.png) 2x);
+}
+.patternCamoPurpleRevised {
+  background-image: url(/_images/backgrounds/camo-purple-revised.png);
+  background-image: image-set(url(/_images/backgrounds/camo-purple-revised.png) 1x, url(/_images/backgrounds/camo-purple-revised-2x.png) 2x);
+}
+.patternCamoOrange {
+  background-image: url(/_images/backgrounds/camo-orange.png);
+  background-image: image-set(url(/_images/backgrounds/camo-orange.png) 1x, url(/_images/backgrounds/camo-orange-2x.png) 2x);
+}
+.patternCamoRed {
+  background-image: url(/_images/backgrounds/camo-red.png);
+  background-image: image-set(url(/_images/backgrounds/camo-red.png) 1x, url(/_images/backgrounds/camo-red-2x.png) 2x);
+}
+.patternCamoWhite {
+  background-image: url(/_images/backgrounds/camo-white.png);
+  background-image: image-set(url(/_images/backgrounds/camo-white.png) 1x, url(/_images/backgrounds/camo-white-2x.png) 2x);
+}
+.patternCamoWhiteOutline {
+  background-image: url(/_images/backgrounds/camo-white-outline.png);
+  background-image: image-set(url(/_images/backgrounds/camo-white-outline.png) 1x, url(/_images/backgrounds/camo-white-outline-2x.png) 2x);
+}
+.patternHardwareBackground {
+  background-image: url(/_images/backgrounds/hardware-background.png);
+  background-image: image-set(url(/_images/backgrounds/hardware-background.png) 1x, url(/_images/backgrounds/hardware-background-2x.png) 2x);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+@media screen and (min-width: 640px) {
+  .patternHardwareBackground {
+    background-image: url(/_images/backgrounds/hardware-background-medium-up.png);
+    background-image: image-set(url(/_images/backgrounds/hardware-background-medium-up.png) 1x, url(/_images/backgrounds/hardware-background-medium-up-2x.png) 2x);
+  }
+}
+.patternOctoBlack {
+  background-image: url(/_images/backgrounds/octo-black.png);
+  background-image: image-set(url(/_images/backgrounds/octo-black.png) 1x, url(/_images/backgrounds/octo-black-2x.png) 2x);
+}
+.patternOctoRed {
+  background-image: url(/_images/backgrounds/octo-red.png);
+  background-image: image-set(url(/_images/backgrounds/octo-red.png) 1x, url(/_images/backgrounds/octo-red-2x.png) 2x);
+}
+.patternOctoarrowGreen {
+  background-image: url(/_images/backgrounds/octoarrow-green.png);
+  background-image: image-set(url(/_images/backgrounds/octoarrow-green.png) 1x, url(/_images/backgrounds/octoarrow-green-2x.png) 2x);
+}
+.patternOctoarrowOrange {
+  background-image: url(/_images/backgrounds/octoarrow-orange.png);
+  background-image: image-set(url(/_images/backgrounds/octoarrow-orange.png) 1x, url(/_images/backgrounds/octoarrow-orange-2x.png) 2x);
+}
+.patternSquidBlack {
+  background-image: url(/_images/backgrounds/squid-black.png);
+  background-image: image-set(url(/_images/backgrounds/squid-black.png) 1x, url(/_images/backgrounds/squid-black-2x.png) 2x);
+}
+.patternCirclesGreen {
+  background-image: url(/_images/backgrounds/circles-green.png);
+  background-image: image-set(url(/_images/backgrounds/circles-green.png) 1x, url(/_images/backgrounds/circles-green-2x.png) 2x);
+}
+.patternChipWhite {
+  background-image: url(/_images/backgrounds/chip-white.png);
+  background-image: image-set(url(/_images/backgrounds/chip-white.png) 1x, url(/_images/backgrounds/chip-white-2x.png) 2x);
+}
+.patternMonstersBlack {
+  background-image: url(/_images/backgrounds/monsters-black.png);
+  background-image: image-set(url(/_images/backgrounds/monsters-black.png) 1x, url(/_images/backgrounds/monsters-black-2x.png) 2x);
+  background-size: 50%;
+}
+.patternGraffiti {
+  background-image: url(/_images/backgrounds/graffiti.jpg);
+  background-image: image-set(url(/_images/backgrounds/graffiti.jpg) 1x, url(/_images/backgrounds/graffiti-2x.jpg) 2x);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media screen and (min-width: 640px) {
+  .patternGraffiti {
+    background-image: url(/_images/backgrounds/graffiti-medium-up.jpg);
+    background-image: image-set(url(/_images/backgrounds/graffiti-medium-up.jpg) 1x, url(/_images/backgrounds/graffiti-medium-up-2x.jpg) 2x);
+  }
+}
+.patternTapesBlack {
+  background-image: url(/_images/backgrounds/tapes-black.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-black.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-black.jpg) 1x, url(/_images/backgrounds/tapes-black-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-black-2x.jpg) 2x);
+}
+.patternTapesGreen {
+  background-image: url(/_images/backgrounds/tapes-green.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-green.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-green.jpg) 1x, url(/_images/backgrounds/tapes-green-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-green-2x.jpg) 2x);
+}
+.patternTapesPattern {
+  background-image: url(/_images/backgrounds/tapes-pattern.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-pattern.jpg) 1x, url(/_images/backgrounds/tapes-pattern-2x.jpg) 2x);
+}
+.patternTapesPurple {
+  background-image: url(/_images/backgrounds/tapes-purple.jpg);
+  background-image: image-set(url(/_images/backgrounds/tapes-purple.webp) type("image/webp") 1x, url(/_images/backgrounds/tapes-purple.jpg) 1x, url(/_images/backgrounds/tapes-purple-2x.webp) type("image/webp") 2x, url(/_images/backgrounds/tapes-purple-2x.jpg) 2x);
+}
+
+/* src/components/ui/staple-card.module.css */
+.stapleCard {
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
+  height: 100%;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  transition: transform calc(var(--duration-factor) * 0.3s) var(--ease-in-out);
+}
+.card.hoverTilt:hover {
+  transform: rotate(2deg);
+}
+.cardLayout {
+  background-color: var(--color-white, #fff);
+  color: var(--color-black, #0d0d0d);
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  padding: calc(var(--base-space, 8px) * 0) calc(var(--base-space, 8px) * 4) calc(var(--base-space, 8px) * 3) calc(var(--base-space, 8px) * 4);
+  position: relative;
+}
+.image {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  transform: rotate(-1deg);
+  width: 100%;
+}
+.image img {
+  object-fit: contain;
+}
+.stapleLeft {
+  bottom: 0;
+  left: 20px;
+  position: absolute;
+  width: 20%;
+}
+.stapleRight {
+  bottom: 0;
+  position: absolute;
+  right: 20px;
+  width: 10%;
+}
+.tape {
+  display: block;
+}
+.tapeImage {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+.imgDesktop {
+  display: none;
+}
+@container (min-width: 400px) {
+  .imgMobile {
+    display: none;
+  }
+  .imgDesktop {
+    display: block;
+  }
+}
+.cardBottom {
+  margin-top: -2px;
+  width: 100%;
+}
+.cardTop {
+  margin-bottom: -2px;
+  width: 100%;
+}
+.info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-start;
+  padding: calc(var(--base-space, 8px) * 2) 0;
+}
+.surfaceDark .cardLayout {
+  background-color: var(--color-black-alt, #0e0e0e);
+  color: var(--color-white, #fff);
+}
+.title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 2;
+}
+.subtitle {
+  margin-top: calc(var(--base-space, 8px) * 1);
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+
+/* src/components/ui/tape-divider.module.css */
+.tapeDivider {
+  position: relative;
+  width: 100%;
+  z-index: 2;
+  pointer-events: none;
+  line-height: 0;
+}
+.tapePrimary {
+  background-image: url(/_images/tape-assets/tape-2.png);
+  background-image: image-set(url(/_images/tape-assets/tape-2.png) 1x, url(/_images/tape-assets/tape-2-2x.png) 2x);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 36px;
+  width: 100%;
+}
+.tapeSecondary {
+  background-image: url(/_images/tape-assets/tape-3.png);
+  background-image: image-set(url(/_images/tape-assets/tape-3.png) 1x, url(/_images/tape-assets/tape-3-2x.png) 2x);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  height: 38px;
+  width: 100%;
+}
+.primaryOnly .tapePrimary {
+  height: 36px;
+}
+.double .tapePrimary {
+  position: relative;
+  z-index: 1;
+}
+.double .tapeSecondary {
+  margin-top: -18px;
+  position: relative;
+  z-index: 0;
+}
+.rotateLeft {
+  transform: rotate(-2deg);
+}
+.rotateRight {
+  transform: rotate(2deg);
+}
+.rotateStrong {
+  transform: rotate(-4deg);
+}
+.overlap {
+  margin-top: -36px;
+  padding-top: 36px;
+}
+@media screen and (min-width: 640px) {
+  .tapePrimary {
+    height: 48px;
+  }
+  .tapeSecondary {
+    height: 50px;
+  }
+  .double .tapeSecondary {
+    margin-top: -24px;
+  }
+  .overlap {
+    margin-top: -48px;
+    padding-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .tapePrimary {
+    height: 60px;
+  }
+  .tapeSecondary {
+    height: 62px;
+  }
+  .double .tapeSecondary {
+    margin-top: -30px;
+  }
+  .overlap {
+    margin-top: -60px;
+    padding-top: 60px;
+  }
+}
+
+/* src/components/ui/tape-title.module.css */
+.container {
+  --tape-title-left-bleed: 61px;
+  --tape-title-right-bleed: 59px;
+  --tape-color: var(--color-true-black, #000);
+  background: var(--color-black, #0d0d0d);
+  color: var(--color-white, #fff);
+  display: inline-block;
+  margin-inline: var(--tape-title-left-bleed) var(--tape-title-right-bleed);
+  position: relative;
+  transform: rotate(-4deg);
+  z-index: 2;
+}
+.container::before {
+  background-color: var(--tape-color);
+  mask-image: url(/_images/svg/left-tape.svg);
+  mask-position: 100% center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  content: " ";
+  height: 100%;
+  left: -61px;
+  position: absolute;
+  width: 62px;
+}
+.container::after {
+  background-color: var(--tape-color);
+  mask-image: url(/_images/svg/right-tape.svg);
+  mask-position: 0 center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  content: " ";
+  height: 100%;
+  position: absolute;
+  right: -58px;
+  top: 0;
+  width: 59px;
+}
+.red {
+  --tape-color: var(--color-red, #ff505e);
+  background: var(--color-red, #ff505e);
+  color: var(--color-black, #0d0d0d);
+}
+.yellow {
+  --tape-color: var(--color-yellow, #eaff3d);
+  background: var(--color-yellow, #eaff3d);
+  color: var(--color-black, #0d0d0d);
+}
+.title {
+  font-family: var(--font-alt);
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 8px 16px 16px;
+  text-transform: none;
+  white-space: nowrap;
+}
+@media screen and (min-width: 1024px) {
+  .title {
+    font-size: 2.3125rem;
+    padding: 16px 40px 24px;
+  }
+}
+
+/* src/components/ui/wave-button.module.css */
+.morph {
+  animation: morph calc(var(--duration-factor, 1) * 3s) linear infinite;
+  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+  transform: translateZ(0);
+}
+@keyframes morph {
+  0%, 100% {
+    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
+  }
+  34% {
+    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+  }
+  67% {
+    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
+  }
+}
+.iconWrap {
+  background-color: var(--color-yellow, #eaff3d);
+  display: grid;
+  flex-shrink: 0;
+  height: 48px;
+  place-content: center;
+  width: 48px;
+}
+.icon {
+  --line-w: 19px;
+  --line-h: 4px;
+  --line-y: calc(var(--line-h) * -1.5);
+  background-color: var(--color-blue, #603bff);
+  display: block;
+  height: var(--line-h);
+  position: relative;
+  width: var(--line-w);
+  transition: background-color 0.1s linear;
+}
+.icon::before,
+.icon::after {
+  --line-rotation: 0deg;
+  background-color: var(--color-blue, #603bff);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translateY(var(--line-y)) rotate(var(--line-rotation));
+  transition: transform 0.25s cubic-bezier(0.21, 0.12, 0.35, 1.43), background-color 0.1s linear;
+  width: 100%;
+}
+.icon::after {
+  --line-y: calc(var(--line-h) * 1.5);
+}
+.pressed .icon {
+  background-color: transparent;
+}
+.pressed .icon::before {
+  --line-y: 0px;
+  --line-rotation: 45deg;
+}
+.pressed .icon::after {
+  --line-y: 0px;
+  --line-rotation: -45deg;
+}
+.yellow {
+  background-color: var(--color-yellow, #eaff3d);
+}
+.white {
+  background-color: var(--color-white);
+}
+.ghost {
+  background-color: transparent;
+}
+.md {
+  height: 48px;
+  width: 48px;
+}
+.lg {
+  height: 64px;
+  width: 64px;
+}
+/*# sourceMappingURL=server.css.map */