/* * studio.css — Mask Studio (/studio). Builds on style.css + lab.css (page * shell, hero, inputs); the studio's own layout lives here. * * Layout: mask strip → what to make → [sticky preview + Create | tabbed editor]. * On phones the preview and Create pin under the nav while the tabs scroll. */ /* Meme caption face used inside the canvas renders. OFL — see assets/fonts/anton-OFL.txt. */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .lab.studio { max-width: 1200px; padding-top: calc(64px + var(--s-12)); } .studio [hidden] { display: none !important; } /* ── Hero ─────────────────────────────────────────────────────────── */ .studio-hero { margin-bottom: var(--s-10); } .studio-hero .lab-sub { max-width: 60ch; } .studio-safety { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); color: var(--off-70); font-size: var(--fs-meta); line-height: 1.4; } .studio-safety li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg2); } .studio-safety strong { color: var(--teal); font-weight: 600; } .studio-app { display: grid; gap: var(--s-5); } /* Shared bits */ .studio-badge { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: var(--r-pill); background: var(--bg); color: var(--off-70); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; text-align: center; } .studio-badge:empty { display: none; } .studio-muted { margin: 0; color: var(--dim); font-size: var(--fs-body-sm); line-height: 1.5; } .studio-note { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--gold-faint); border: 1px solid var(--gold-dim); color: var(--off-70); font-size: var(--fs-body-sm); line-height: 1.5; } .studio-link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ── Masks ────────────────────────────────────────────────────────── */ .studio-masks { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); min-width: 0; } .studio-masks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); } .studio-connect { padding: var(--s-2) var(--s-5); } .studio-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-pill); } .studio-seg button { appearance: none; cursor: pointer; border: 0; border-radius: var(--r-pill); background: none; color: var(--off-70); font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: 600; padding: var(--s-2) var(--s-4); transition: background var(--t-fast), color var(--t-fast); } .studio-seg button:hover { color: var(--off); } .studio-seg button.is-active { background: var(--gold); color: var(--bg); } .studio-seg button.is-active .studio-badge { background: rgba(0,0,0,.18); color: var(--bg); } .studio-seg button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .studio-mask-strip { /* Scroll bar: the site-wide slim one from labels.css. */ display: flex; gap: var(--s-2); overflow-x: auto; padding: 4px 2px var(--s-3); scroll-snap-type: x proximity; overscroll-behavior-x: contain; } .studio-mask-strip:empty { display: none; } .studio-mask { flex: none; width: 76px; scroll-snap-align: start; cursor: pointer; display: grid; gap: 4px; padding: 0; background: none; border: 0; color: var(--dim); } .studio-mask img { width: 76px; height: 76px; object-fit: cover; object-position: 50% 30%; display: block; border-radius: var(--r-md); border: 2px solid transparent; background: var(--bg3); transition: border-color var(--t-fast), transform var(--t-fast); } .studio-mask:hover img { border-color: var(--gold-dim); } .studio-mask.is-selected img { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 16px -8px var(--gold); } .studio-mask.is-selected { color: var(--gold); } .studio-mask-name { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .studio-mask:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--r-md); } .studio-seasons { display: grid; gap: var(--s-2); } /* ── Holiday banner + seasonal chips ──────────────────────────────── */ .studio-season { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--gold-dim); background: linear-gradient(100deg, rgba(255,122,0,.16), rgba(168,85,247,.14)); color: var(--off-70); font-size: var(--fs-body-sm); line-height: 1.45; } .studio-season strong { color: var(--gold); margin-right: var(--s-2); } .studio-season .btn { padding: var(--s-2) var(--s-5); white-space: nowrap; } /* Lists with a seasonal row on top (built by fillGrouped in studio.js): a plain small heading over each row, nothing boxed. */ .studio-groups { display: grid; gap: var(--s-3); } .studio-season-group { display: grid; gap: var(--s-2); } .studio-season-label { font-size: var(--fs-meta); font-weight: 600; color: var(--off-70); } /* ── What to make ─────────────────────────────────────────────────── */ .studio-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } .studio-kind { appearance: none; cursor: pointer; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line); color: var(--off-70); transition: border-color var(--t-fast), background var(--t-fast); } .studio-kind-icon { grid-row: span 2; font-size: 28px; line-height: 1; } .studio-kind-label { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-body); color: var(--off); } .studio-kind-blurb { font-size: var(--fs-meta); color: var(--dim); line-height: 1.35; } .studio-kind:hover { border-color: var(--gold-dim); } .studio-kind.is-active { border-color: var(--gold); background: var(--gold-faint); } .studio-kind.is-active .studio-kind-label { color: var(--gold); } .studio-kind:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* ── Editor ───────────────────────────────────────────────────────── */ .studio-editor { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--s-6); align-items: start; } .studio-editor.is-locked { opacity: .45; } .studio-stage { position: sticky; top: calc(64px + var(--s-4)); display: grid; gap: var(--s-3); } /* Checkerboard shows transparency; data-bg mimics Discord's dark/light chat. */ .studio-preview, .studio-result-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background-color: #313338; background-image: conic-gradient(rgba(255,255,255,.04) 25%, transparent 0 50%, rgba(255,255,255,.04) 0 75%, transparent 0); background-size: 24px 24px; } .studio-preview[data-bg="light"], .studio-result-art[data-bg="light"] { background-color: #ffffff; background-image: conic-gradient(rgba(0,0,0,.05) 25%, transparent 0 50%, rgba(0,0,0,.05) 0 75%, transparent 0); } .studio-preview canvas { display: block; max-width: 88%; max-height: 88%; width: auto; height: auto; } /* Emoji are 128 px files: show them at their real size (blowing them up made them look far worse than they will in Discord), plus a chat-size mirror. */ .studio-preview canvas[data-kind="emoji"] { width: 128px; } .studio-preview canvas[data-kind="sticker"] { width: 88%; } .studio-preview canvas[data-kind="gif"] { height: 88%; } .studio-loading { position: absolute; inset: auto var(--s-3) var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: rgba(0,0,0,.7); color: var(--off); font-size: var(--fs-meta); text-align: center; } .studio-stage-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); } .studio-bg-toggle { display: flex; gap: var(--s-2); } .studio-kind-note { margin: 0; color: var(--dim); font-size: var(--fs-meta); font-family: var(--font-mono); } .studio-chat-size { display: flex; align-items: center; gap: var(--s-3); color: var(--dim); font-size: var(--fs-meta); } .studio-chat-size canvas { width: 48px; height: 48px; } .studio-chat-size canvas.studio-chat-inline { width: 22px; height: 22px; margin-left: var(--s-2); } .studio-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); } .studio-create { padding: var(--s-4) var(--s-6); font-size: var(--fs-body); } .studio-create:disabled { opacity: .5; cursor: progress; } .studio-surprise { padding: var(--s-4) var(--s-5); } .studio-status { margin: 0; min-height: 1.5em; color: var(--teal); font-size: var(--fs-body-sm); } /* Tabbed panel */ .studio-panel { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; } .studio-ptabs { position: sticky; top: 64px; z-index: 4; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: var(--s-2) var(--s-3) 0; background: var(--bg2); border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; } .studio-ptabs::-webkit-scrollbar { display: none; } .studio-ptabs button { appearance: none; cursor: pointer; flex: none; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--dim); font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: 600; padding: var(--s-3) var(--s-4); transition: color var(--t-fast), border-color var(--t-fast); } .studio-ptabs button:hover { color: var(--off); } .studio-ptabs button.is-active { color: var(--gold); border-bottom-color: var(--gold); } .studio-ptabs button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .studio-pane { display: grid; gap: var(--s-6); padding: var(--s-5); } .studio-field { display: grid; gap: var(--s-2); } .studio-field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); } .studio-head-actions { display: flex; gap: var(--s-2); } .studio-count { float: right; text-transform: none; letter-spacing: 0; } .studio-input { font-size: var(--fs-body); padding: var(--s-3) var(--s-4); } .studio-chip { appearance: none; cursor: pointer; background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--off-70); font-family: var(--font-ui); font-size: var(--fs-body-sm); padding: var(--s-2) var(--s-4); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .studio-chip:hover { border-color: var(--gold-dim); color: var(--off); } .studio-chip.is-active { border-color: var(--gold); background: var(--gold-faint); color: var(--gold); } .studio-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .studio-chip--small { font-size: var(--fs-meta); padding: var(--s-1) var(--s-3); } .studio-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; align-content: flex-start; } /* Style gallery: live thumbnails of every style with the chosen mask. */ .studio-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s-3); } .studio-style { appearance: none; cursor: pointer; padding: 6px; display: grid; gap: 6px; align-content: start; background: var(--bg3); border: 2px solid transparent; border-radius: var(--r-md); color: var(--off-70); transition: border-color var(--t-fast), transform var(--t-fast); } .studio-style canvas { display: block; width: 100%; height: auto; border-radius: 6px; background-color: #313338; background-image: conic-gradient(rgba(255,255,255,.04) 25%, transparent 0 50%, rgba(255,255,255,.04) 0 75%, transparent 0); background-size: 12px 12px; } .studio-style-label { font-size: var(--fs-meta); line-height: 1.3; text-align: center; } .studio-style:hover { border-color: var(--gold-dim); transform: translateY(-1px); } .studio-style.is-active { border-color: var(--gold); background: var(--gold-faint); color: var(--gold); } .studio-style:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Ideas */ .studio-ideas { padding: var(--s-4); border-radius: var(--r-md); background: var(--bg3); } .studio-ideas .studio-chip { background: var(--bg2); } .studio-ideas .studio-chip.is-active { background: var(--gold-faint); } .studio-idea-cats .studio-chip { font-size: var(--fs-meta); padding: var(--s-1) var(--s-3); } .studio-presets { padding-top: var(--s-3); border-top: 1px dashed var(--line); } .studio-presets .studio-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Colours */ .studio-swatch { display: inline-flex; align-items: center; gap: var(--s-2); padding-left: var(--s-2); } .studio-swatch-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); flex: none; background: conic-gradient(#ff4d6d, #ffb627, #16f08a, #4dabff, #c77dff, #ff4d6d); } .studio-custom-colour { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--off-70); font-size: var(--fs-body-sm); justify-self: start; } .studio-custom-colour input { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: none; cursor: pointer; } .studio-custom-colour.is-active span { color: var(--gold); } .studio-size-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); max-width: 460px; } .studio-size-row input[type="range"] { width: 100%; accent-color: var(--gold); } /* Add-ons */ .studio-prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); } .studio-prop { border-radius: var(--r-md); text-align: left; padding: var(--s-3); } /* Adjust one add-on */ .studio-adjust { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg3); } .studio-adjust .studio-chip { background: var(--bg2); } .studio-adjust .studio-chip.is-active { background: var(--gold-faint); } /* Placing add-ons happens on the preview itself (Add-ons tab). */ .studio-preview canvas[data-placing] { touch-action: none; } /* Emoji are tiny at true size; blow them up while placing add-ons on them. */ .studio-preview canvas[data-kind="emoji"][data-placing] { width: 88%; } .studio-preview canvas:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Build (start from scratch) */ .studio-preview canvas[data-build] { touch-action: none; } /* Dragging on these must not start a text selection across the page. */ .studio-preview, .studio-place, .studio-frame { user-select: none; -webkit-user-select: none; } .studio-preview canvas[data-kind="emoji"][data-build] { width: 88%; } .studio-layers { display: grid; gap: var(--s-1); } .studio-layer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg3); } .studio-layer.is-active { border-color: var(--gold); background: var(--gold-faint); } .studio-layer-name { appearance: none; flex: 1; min-width: 0; text-align: left; cursor: pointer; background: none; border: 0; color: var(--off); font-family: var(--font-ui); font-size: var(--fs-body-sm); padding: var(--s-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .studio-layer-tools { display: flex; gap: 4px; flex: none; } .studio-layer-tools .studio-chip { min-width: 30px; padding: 2px 8px; } .studio-layer-tools .studio-chip:disabled { opacity: .35; cursor: default; } .studio-layer-edit { display: grid; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg3); } .studio-layer-edit:empty { display: none; } .studio-layer-edit .studio-chip { background: var(--bg2); } .studio-layer-edit .studio-chip.is-active { background: var(--gold-faint); } .studio-layer-edit .studio-size-row { grid-template-columns: 4.5em minmax(0, 1fr); } .studio-layer-text { resize: vertical; min-height: 64px; font-family: var(--font-ui); } .studio-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; } .studio-emoji { padding: 4px; font-size: 22px; line-height: 1.2; border-radius: var(--r-md); } .studio-bg-colours { display: flex; flex-wrap: wrap; gap: var(--s-4); } /* Framing */ /* Controls sit to the right of the crop at every width; the crop shrinks first. */ .studio-frame { display: flex; gap: var(--s-4); align-items: flex-start; } .studio-frame canvas { flex: 0 1 240px; width: 240px; min-width: 140px; height: auto; aspect-ratio: 1; border-radius: var(--r-md); border: 1px solid var(--line); cursor: grab; touch-action: none; background: var(--bg3); } .studio-frame canvas:active { cursor: grabbing; } .studio-frame-side { display: grid; gap: var(--s-2); flex: 1; min-width: 0; max-width: 22rem; justify-items: start; } .studio-frame-side input[type="range"] { width: 100%; accent-color: var(--gold); } /* ── Result dialog ────────────────────────────────────────────────── */ .studio-result { margin: auto; inset: 0; /* the site reset zeroes dialog margins, which un-centres it */ width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg2); color: var(--off); } .studio-result[open] { display: grid; gap: var(--s-4); } .studio-result::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); } .studio-result-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); padding-right: var(--s-8); } .studio-result-close { position: absolute; top: var(--s-3); right: var(--s-3); width: 36px; height: 36px; cursor: pointer; background: var(--bg3); border: 1px solid var(--line); border-radius: 50%; color: var(--off); font-size: 20px; line-height: 1; } .studio-result-art { aspect-ratio: auto; min-height: 200px; padding: var(--s-4); } .studio-result-art img { display: block; max-width: 100%; max-height: 46dvh; } .studio-result-art img[data-kind="emoji"] { width: 128px; } .studio-result-meta { margin: 0; font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--off-70); word-break: break-all; } .studio-result-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* One full-width Download; line-height evens the and