:root { --apricot: #F07C52; --periwinkle: #8197E6; --cloud: #F1E9E2; --chartreuse: #C8C96B; --plum: #583747; --plum-70: rgba(88, 55, 71, 0.7); --font-heading: "Baloo 2", "Helvetica Neue", Arial, sans-serif; --font-sub: "Fredoka", "Helvetica Neue", Arial, sans-serif; --font-body: "Fredoka", "Helvetica Neue", Arial, sans-serif; --gap: 20px; } /* Site variations. Switch with data-theme on : "apricot" (main) apricot bg blob, apricot logo, periwinkle frames "periwinkle" periwinkle bg blob, periwinkle logo, apricot frames */ :root, html[data-theme="apricot"] { --theme-bg: url("public/brand/bg-apricot.svg"); --theme-frame: var(--periwinkle); } html[data-theme="periwinkle"] { --theme-bg: url("public/brand/bg-periwinkle.svg"); --theme-frame: var(--apricot); } html[data-theme="periwinkle"] .wordmark img { content: url("public/brand/logo-periwinkle.png"); } /* Reset */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, p, ul, figure, figcaption { margin: 0; padding: 0; } img, video, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } /* Page */ html { background: var(--cloud); overflow-x: hidden; overflow-x: clip; } /* Fixed backdrop layer. A pseudo-element is used instead of background-attachment: fixed because iOS Safari ignores the latter. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--cloud) var(--theme-bg) top left / 100% auto no-repeat; pointer-events: none; } body { min-height: 100vh; background: transparent; color: var(--plum); font-family: var(--font-body); font-weight: 400; line-height: 1.4; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; } .page { max-width: 1080px; margin: 0 auto; padding: clamp(48px, 12vh, 140px) 24px 48px; text-align: center; } /* Wordmark and tagline */ h1, .wordmark { font-family: var(--font-heading); font-weight: 800; line-height: 1; color: var(--plum); } /* logo-*.png is a 1024x1024 canvas; the letterforms sit in the middle 25%. The negative margins trim the transparent padding above and below. */ .wordmark { --logo-w: min(540px, 88vw); overflow: hidden; } .wordmark img { width: var(--logo-w); height: auto; margin: calc(var(--logo-w) * -0.355) auto; } .tagline { margin-top: 8px; font-family: var(--font-sub); font-weight: 700; font-size: 1.125rem; color: var(--plum); } /* Crew */ .crew-wrap { position: relative; margin-top: clamp(40px, 6vh, 64px); } .crew { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); list-style: none; } .crew-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; background: var(--cloud); border: 3px solid var(--plum); box-shadow: 12px 12px 0 0 var(--theme-frame); overflow: hidden; } .crew-tile[role="button"] { cursor: pointer; } /* The renders sit on square canvases with generous margins (the PNG more than the mp4). Oversizing each layer lets the tile's overflow crop that margin so the characters fill the frame, and the two scales are chosen so the still and the video land on the same pixels. Remove once the assets are exported trimmed to the artwork. */ .crew-still, .crew-360 { position: absolute; max-width: none; object-fit: contain; } .crew-still { top: -13%; left: -10%; width: 120%; height: 120%; } /* Each mp4 frames its character differently, so every tile carries its own video scale and offset (measured against the still). Re-measure whenever a clip is re-exported. */ .crew-360 { top: var(--v-top); left: var(--v-left); width: var(--v-size); height: var(--v-size); opacity: 0; pointer-events: none; } .crew-tile[data-name="Lil Mouse"] { --v-size: 108.3%; --v-top: -4.6%; --v-left: -3.1%; } .crew-tile[data-name="Lil Duck"] { --v-size: 104.1%; --v-top: 1.8%; --v-left: -1.9%; } .crew-tile[data-name="Lil Orca"] { --v-size: 101.9%; --v-top: 3.4%; --v-left: -3.6%; } .crew-tile[data-name="Lil Heart"] { --v-size: 95%; --v-top: 7.8%; --v-left: 3.8%; } .crew-tile[data-name="Lil Car"] { --v-size: 92.9%; --v-top: 10.8%; --v-left: 3.3%; } .crew-tile.is-playing .crew-360 { opacity: 1; } .crew-tile.is-playing .crew-still { visibility: hidden; } /* The clips carry a baked #efe6df background; match it while playing so the video edge does not show as a seam inside the Warm Cloud tile. */ .crew-tile.is-playing { background: #efe6df; } .crew-name { margin-top: 24px; font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--plum); } /* Stickers control (hidden until it has a destination) */ .stickers { display: inline-flex; align-items: center; gap: 14px; height: 56px; margin-top: 40px; padding: 0 10px 0 28px; border: 3px solid var(--plum); border-radius: 999px; background: var(--cloud); color: var(--plum); font-family: var(--font-sub); font-weight: 700; font-size: 1.125rem; text-decoration: none; } .stickers-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--plum); } .stickers:hover { border-color: var(--apricot); color: var(--apricot); } .stickers:hover .stickers-arrow { background: var(--apricot); } /* Footer */ .footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 24px; margin-top: clamp(56px, 8vh, 96px); font-size: 0.875rem; } .footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--plum); text-decoration: none; } .footer a:hover { color: var(--apricot); } .footer-icon { width: 44px; justify-content: center; } .footer-icon svg, .footer-icon img { width: 24px; height: 24px; } .footer-copy { flex-basis: 100%; font-size: 0.75rem; color: var(--plum-70); } /* Focus */ a:focus-visible, .crew-tile:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px; } /* Breakpoints */ @media (max-width: 720px) { .page { padding-left: 20px; padding-right: 20px; } .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crew > li:last-child { grid-column: 1 / -1; width: calc(50% - var(--gap) / 2); justify-self: center; } .footer { flex-direction: column; gap: 0; } }