/* ========================================================== Aloha Flip — styles Theme colors live in THEMES in app.js. ========================================================== */ :root { color-scheme: dark; --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sign-font: "Oswald", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --accent: #ffb36b; /* Tile geometry — overwritten by app.js to fit the screen */ --cols: 16; --tw: 40px; /* tile width */ --th: 54px; /* tile height */ --gap: 4px; --pad: 14px; --seam: 1px; --tile-r: 4px; --sign-weight: 600; --glyph-scale: 0.68; --glyph-shift: 0em; --tile-shadow-a: 0.45; --pin-color: rgba(0, 0, 0, 0.75); --sheen-a: 0.08; --flap-a: 1; --shade-a: 0.16; --frame-color: #1c1c2a; } /* ---------- Themes ---------- Theme colors are defined in THEMES in app.js (shared with image export) and set on as these variables. Defaults below = Sunset. */ body { --tile-bg: #14213d; --tile-fg: #fdf0d5; --bg-base: #ff8a5b; --page-bg: linear-gradient(180deg, #ff7a6b 0%, #ff9e4a 34%, #d65a7e 66%, #5b2c83 100%); --frame: rgba(26, 12, 44, 0.34); } /* ---------- Page ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { font-family: var(--ui-font); color: #f4f1ea; background: var(--bg-base); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-base); } /* Three layers: base (theme / color / gradient / photo / moving), pattern, then shade (darken + vignette). */ .bd-base, .bd-pattern, .bd-shade { position: absolute; inset: 0; } .bd-base { background: var(--page-bg); background-size: var(--page-bg-size, cover); background-position: center; background-repeat: no-repeat; filter: blur(var(--bg-blur, 0px)); transform: scale(var(--bg-zoom, 1)); } .bd-base.moving { animation: bgpan 45s ease-in-out infinite alternate; } @keyframes bgpan { from { background-position: 0% 30%; } to { background-position: 100% 70%; } } .bd-pattern { background-image: var(--pattern, none); background-size: var(--pattern-size, 300px 300px); opacity: var(--pattern-a, 0.2); } .bd-pattern.moving { animation: patdrift 120s linear infinite; } @keyframes patdrift { to { background-position: var(--drift, 600px 300px); } } .bd-shade { background: linear-gradient(rgba(0, 0, 0, var(--bg-dim, 0)), rgba(0, 0, 0, var(--bg-dim, 0))), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%); } @media (prefers-reduced-motion: reduce) { .bd-base.moving, .bd-pattern.moving { animation: none; } } body.idle { cursor: none; } .stage { position: fixed; inset: 0; display: grid; place-items: center; } /* Side panel (wide or landscape screens): the sign slides over to stay visible. */ @media (min-width: 900px), (orientation: landscape) and (min-width: 600px) { body.panel-open .stage { right: min(380px, 100vw); } } /* ---------- The board ---------- */ .board { display: grid; grid-template-columns: repeat(var(--cols), var(--tw)); gap: var(--gap); padding: var(--pad); background: var(--frame); border-radius: calc(var(--pad) * 0.6); box-shadow: 0 2vmin 6vmin rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.25); user-select: none; -webkit-user-select: none; } .tile { position: relative; width: var(--tw); height: var(--th); perspective: calc(var(--th) * 5); border-radius: var(--tile-r); box-shadow: 0 calc(var(--th) * 0.04) calc(var(--th) * 0.07) rgba(0, 0, 0, var(--tile-shadow-a)); } /* Board housings (frame styles) — mirrored in post.js for exports */ .board[data-housing="solid"], .hswatch[data-housing="solid"] { background: var(--frame-color); } .board[data-housing="wood"], .hswatch[data-housing="wood"] { background: repeating-linear-gradient(180deg, rgba(40, 20, 5, 0.12) 0 1px, transparent 1px 5px, rgba(255, 220, 170, 0.06) 5px 6px, transparent 6px 11px), linear-gradient(180deg, #8a5530, #5e351a 50%, #74431f); } .board[data-housing="metal"], .hswatch[data-housing="metal"] { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 2px), linear-gradient(180deg, #dfe3e8, #9ea5ad 45%, #c6cbd1 55%, #8a9199); } .board[data-housing="brass"], .hswatch[data-housing="brass"] { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 2px), linear-gradient(180deg, #f5d98a, #b88a2c 45%, #e2ba5e 55%, #94691b); } .board[data-housing="none"] { background: none; box-shadow: none; } /* frosted glass for the default frame */ @supports (backdrop-filter: blur(1px)) { .board[data-housing="glass"] { backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15); } } /* Four layers per tile: static top/bottom halves, plus the two moving flaps */ .half, .flap { position: absolute; left: 0; width: 100%; height: calc(50% - var(--seam) / 2); overflow: hidden; color: var(--tile-fg); background-color: var(--tile-bg); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .top { top: 0; border-radius: var(--tile-r) var(--tile-r) min(2px, var(--tile-r)) min(2px, var(--tile-r)); background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--sheen-a)), rgba(255, 255, 255, 0) 70%); transform-origin: 50% 100%; } .bottom { bottom: 0; border-radius: min(2px, var(--tile-r)) min(2px, var(--tile-r)) var(--tile-r) var(--tile-r); background-image: linear-gradient(180deg, rgba(0, 0, 0, var(--shade-a)), rgba(0, 0, 0, 0) 45%); transform-origin: 50% 0; } .half { z-index: 0; } .flap.bottom { z-index: 2; } .flap.top { z-index: 3; } /* Each half shows one half of a full-height glyph */ .half span, .flap span { position: absolute; left: 0; width: 100%; height: var(--th); display: flex; align-items: center; justify-content: center; font-family: var(--sign-font); font-weight: var(--sign-weight); font-size: calc(var(--th) * var(--glyph-scale)); line-height: 1; white-space: pre; transform: translateY(var(--glyph-shift)); } .top span { top: 0; } .bottom span { bottom: 0; } /* Shadow that deepens as a flap falls */ .flap i { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .flap.top i { background: linear-gradient(180deg, rgba(0, 0, 0, calc(0.55 * var(--flap-a))), rgba(0, 0, 0, var(--flap-a))); } .flap.bottom i { background: linear-gradient(180deg, rgba(0, 0, 0, var(--flap-a)), rgba(0, 0, 0, calc(0.5 * var(--flap-a)))); } /* Thin split line + hinge pins */ .tile::after, .tile::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; } .tile::after { height: var(--seam); background: rgba(0, 0, 0, 0.6); } .tile::before { left: -1px; right: -1px; height: var(--pin-h, calc(var(--th) * 0.09)); background: linear-gradient(90deg, var(--pin-color) 0 5%, transparent 5% 95%, var(--pin-color) 95%); } /* ---------- Floating buttons ---------- */ .hud { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 20; transition: opacity 0.4s; } body.idle .hud { opacity: 0; pointer-events: none; } .icon-btn { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: #fff; cursor: pointer; transition: background 0.2s, transform 0.2s; } .icon-btn:hover { background: rgba(0, 0, 0, 0.5); } .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-btn.small { width: 34px; height: 34px; } #gearBtn[aria-expanded="true"] svg { transform: rotate(60deg); } #gearBtn svg { transition: transform 0.4s; } .fs-exit { display: none; } body.is-fs .fs-enter { display: none; } body.is-fs .fs-exit { display: inline; } /* ---------- Control panel ---------- */ .panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 30; overflow-y: auto; overscroll-behavior: contain; padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 18px; background: rgba(14, 16, 28, 0.94); border-left: 1px solid rgba(255, 255, 255, 0.08); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4); transform: translateX(105%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); font-size: 15px; } .panel.open { transform: none; } @supports (backdrop-filter: blur(1px)) { .panel { background: rgba(14, 16, 28, 0.82); backdrop-filter: blur(16px); } } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .panel h2 { margin: 0; font-size: 18px; letter-spacing: 0.02em; } .panel h3 { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } .section-title { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); } .tabs button { padding: 9px 0; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.75); font: 600 14px var(--ui-font); cursor: pointer; } .tabs button[aria-selected="true"] { background: var(--accent); color: #2a1606; } .pane { padding-top: 12px; } .hint { margin: 6px 0 10px; font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } .row { display: flex; gap: 10px; align-items: center; margin: 10px 0; } .row.wrap { flex-wrap: wrap; } .btn { padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; background: var(--accent); color: #2a1606; font: 600 14px var(--ui-font); cursor: pointer; } .btn:hover { filter: brightness(1.08); } .btn.ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; } .btn.small { padding: 6px 11px; font-size: 13px; } .field { display: block; margin: 12px 0; } .field > span { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.72); } .field output { color: #fff; font-variant-numeric: tabular-nums; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid2 .field { margin: 0; } select, input[type="number"], textarea, .edit-input { width: 100%; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 15px var(--ui-font); } textarea { resize: vertical; min-height: 64px; font: 600 18px var(--sign-font); letter-spacing: 0.04em; text-transform: uppercase; } input[type="range"] { width: 100%; accent-color: var(--accent); } input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; } .check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .inserts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .inserts button { min-width: 38px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 18px var(--sign-font); cursor: pointer; } .inserts button:hover { background: rgba(255, 255, 255, 0.16); } .counter { margin: 6px 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); } .counter .warn { display: block; margin-top: 4px; color: #ffcf6b; } .counter .warn:empty { display: none; } .notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 179, 107, 0.15); border: 1px solid rgba(255, 179, 107, 0.4); font-size: 13px; } /* Phrase lists */ .phrase-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .phrase-list li { display: flex; align-items: center; gap: 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; } .phrase-list li.current { border-color: var(--accent); background: rgba(255, 179, 107, 0.12); } .phrase-list .phrase { flex: 1; min-width: 0; padding: 8px 10px; border: 0; background: none; color: #fff; text-align: left; font: 600 15px var(--sign-font); letter-spacing: 0.04em; cursor: pointer; overflow-wrap: anywhere; } .phrase-list .phrase small { display: block; font: 12px var(--ui-font); letter-spacing: 0; color: rgba(255, 255, 255, 0.55); } .phrase-list .mini, .phrase-list .handle { flex: none; width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: rgba(255, 255, 255, 0.6); font-size: 15px; cursor: pointer; } .phrase-list .mini:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .phrase-list .handle { cursor: grab; touch-action: none; font-size: 18px; } .phrase-list li.dragging { opacity: 0.85; background: rgba(255, 255, 255, 0.14); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .phrase-list li.dragging .handle { cursor: grabbing; } .edit-input { flex: 1; margin: 3px 0; padding: 6px 9px; font: 600 15px var(--sign-font); text-transform: uppercase; } .colors { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 12px 0; } .swatch { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.7); cursor: pointer; } .swatch input { width: 46px; height: 34px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: none; cursor: pointer; } .keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .keys span { white-space: nowrap; } kbd { padding: 1px 5px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; font: 11px var(--ui-font); } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: rgba(10, 12, 20, 0.92); color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 0.25s, transform 0.25s; } .toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .toast button { border: 0; background: none; color: var(--accent); font: 700 14px var(--ui-font); cursor: pointer; } @media (prefers-reduced-motion: reduce) { .panel, .toast, .hud, #gearBtn svg { transition: none; } } /* ---------- Post studio (image / video export) ---------- */ .btn.wide { display: block; width: 100%; margin: 20px 0 4px; } body.studio-open { cursor: auto; } body.studio-open .hud { opacity: 0; pointer-events: none; } .studio { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: rgba(5, 6, 12, 0.72); } @supports (backdrop-filter: blur(1px)) { .studio { backdrop-filter: blur(8px); } } .studio-card { width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 18px; background: #12141f; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; font-size: 15px; } .studio-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .studio-head h2 { margin: 0; font-size: 18px; } .studio-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; overflow: hidden; } .studio-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 18px; background: #0b0c14; } .studio-preview canvas { display: block; max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* checkerboard shows through the transparent "Sign only" export */ background: repeating-conic-gradient(#2a2c36 0 25%, #1d1f28 0 50%) 0 0 / 20px 20px; } .studio-controls { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; border-left: 1px solid rgba(255, 255, 255, 0.08); } .studio-controls .field > span small { color: rgba(255, 255, 255, 0.45); font-size: 12px; } .studio input[type="text"], .studio input[type="date"], .studio select { width: 100%; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 15px var(--ui-font); } .studio-actions select { width: auto; } .grid3 { display: grid; grid-template-columns: 1fr 0.8fr 1.4fr; gap: 10px; } .grid3 .field { margin: 6px 0; } .checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; } .hint.center { text-align: center; margin: 0; } .hint.inline { margin: 0; } .inserts.small button { min-width: 32px; height: 30px; font-size: 15px; } .seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); } .seg button { flex: 1 1 auto; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.78); font: 600 13px var(--ui-font); cursor: pointer; white-space: nowrap; } .seg button[aria-checked="true"] { background: var(--accent); color: #2a1606; } .group { margin: 14px 0; padding: 4px 12px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); } .group summary { padding: 8px 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); cursor: pointer; } .file-btn { display: inline-block; margin: 10px 8px 0 0; } .studio-actions { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 10px 18px 16px; background: #12141f; border-top: 1px solid rgba(255, 255, 255, 0.08); } .studio-actions .row { margin: 6px 0; } .btn:disabled { opacity: 0.5; cursor: default; } @media (max-width: 820px) { .studio { padding: 0; } .studio-card { height: 100%; border-radius: 0; border: 0; } .studio-body { display: block; overflow-y: auto; } .studio-preview { padding: 12px; } .studio-preview canvas { max-height: 46vh; max-height: 46dvh; } .studio-controls { overflow: visible; border-left: 0; } } /* ---------- Look settings ---------- */ .panel .group summary { padding: 8px 0; } .row-colors { display: grid; gap: 6px; } .row-color { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.7); } .row-color span { width: 52px; } .row-color input[type="color"] { width: 40px; height: 28px; padding: 1px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; background: none; cursor: pointer; opacity: 0.45; } .row-color.set input[type="color"] { opacity: 1; } .row-color .mini, .my-themes .mini { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; } .row-color .mini:hover, .my-themes .mini:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .row-color:not(.set) .mini { visibility: hidden; } #themeName { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 14px var(--ui-font); } .my-themes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; } .my-themes li { display: flex; align-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.05); } .my-themes .apply { flex: 1; padding: 8px 10px; border: 0; background: none; color: #fff; text-align: left; font: 600 14px var(--ui-font); cursor: pointer; } .swatch.inline { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; } #postCanvas { touch-action: none; cursor: grab; } #postCanvas.dragging { cursor: grabbing; } .phrase-list .mini svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; vertical-align: middle; } /* ---------- Polish: visual pickers ---------- */ .chips { display: grid; gap: 8px; } .chips button { display: grid; justify-items: center; gap: 5px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.78); font: 500 12px var(--ui-font); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; } .chips button:hover { background: rgba(255, 255, 255, 0.09); } .chips button:active { transform: scale(0.97); } .chips button[aria-checked="true"] { border-color: var(--accent); background: rgba(255, 179, 107, 0.12); color: #fff; box-shadow: 0 0 0 1px var(--accent) inset; } .theme-chips { grid-template-columns: repeat(4, 1fr); } .tc-bg { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background-size: cover; } .tc-tile { display: grid; place-items: center; width: 38%; aspect-ratio: 0.74; border-radius: 3px; font: 600 15px var(--sign-font); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); background-image: linear-gradient(transparent 49%, rgba(0, 0, 0, 0.55) 49% 52%, transparent 52%) !important; } .tc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-chips { grid-template-columns: repeat(3, 1fr); } .fc-sample { font-size: 19px; letter-spacing: 0.04em; color: #fff; line-height: 1.2; } .fc-name { font-size: 11px; color: rgba(255, 255, 255, 0.6); } .housing-chips { grid-template-columns: repeat(3, 1fr); } .hswatch { width: 100%; height: 26px; border-radius: 6px; background: var(--frame); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .hswatch[data-housing="glass"] { background: linear-gradient(var(--frame), var(--frame)), var(--page-bg); background-size: cover; } .hswatch[data-housing="none"] { background: repeating-conic-gradient(#3a3d48 0 25%, #262831 0 50%) 0 0 / 10px 10px; } /* custom disclosure chevrons */ .group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; } .group > summary::-webkit-details-marker { display: none; } .group > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; opacity: 0.7; } .group[open] > summary::after { transform: rotate(-135deg); } /* studio details */ .save-all { gap: 8px; margin: -4px 0 10px; font-size: 13px; } .save-all select { width: auto; padding: 6px 8px; font-size: 13px; } #captionBtn { margin-top: 10px; } .studio-actions .row:first-child { margin-top: 0; } @media (max-width: 420px) { .font-chips { grid-template-columns: repeat(2, 1fr); } .theme-chips, .housing-chips { gap: 6px; } .chips button { padding: 5px; font-size: 11px; } } /* ---------- Editable phrase list + multi-sign output ---------- */ .pane-head { justify-content: space-between; align-items: flex-start; margin: 4px 0 8px; } .pane-head .hint { flex: 1; } .phrase-list:not(.editing) .edit-only { display: none; } .phrase-list.editing li { background: rgba(255, 255, 255, 0.07); } .preset-editor { margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.16); } .preset-editor input { width: 100%; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 9px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 14px var(--ui-font); } #newPreset { font: 600 15px var(--sign-font); text-transform: uppercase; } .edit-box { flex: 1; display: grid; gap: 4px; padding: 4px 0; } .edit-box .edit-input:first-child { text-transform: uppercase; } .edit-box .note { font: 13px var(--ui-font); text-transform: none; } .badge { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #2a1606; font-size: 11px; letter-spacing: 0; } .group summary .badge { margin-right: auto; } .q-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; max-height: 190px; overflow-y: auto; } .q-pick button { position: relative; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.82); font: 600 13px var(--sign-font); letter-spacing: 0.04em; cursor: pointer; } .q-pick button:hover { background: rgba(255, 255, 255, 0.1); } .q-pick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #2a1606; padding-left: 30px; } .q-pick button[aria-pressed="true"]::before { content: attr(data-n); position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; border-radius: 50%; background: #2a1606; color: var(--accent); font: 700 11px/19px var(--ui-font); text-align: center; } .q-pick .q-group { width: 100%; font: 600 11px var(--ui-font); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); margin-top: 4px; } .q-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin-bottom: 6px; } .q-order .num { flex: none; width: 22px; height: 22px; margin-left: 2px; border-radius: 50%; background: rgba(255, 179, 107, 0.2); color: var(--accent); font: 700 12px/22px var(--ui-font); text-align: center; } .q-order li.showing { border-color: var(--accent); } .made-by { margin: 18px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); } .made-by a { color: var(--accent); text-decoration: none; font-weight: 600; } .made-by a:hover { text-decoration: underline; } .flair-row { margin: 4px 0 8px; gap: 10px; } .seg.grow { flex: 1; } /* ========================================================== Customization UX (Looks, bottom sheet, quick editor…) ========================================================== */ /* Labeled HUD buttons */ .pill-btn { height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 11px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 21px; background: rgba(0, 0, 0, 0.34); color: #fff; font: 600 14px var(--ui-font); cursor: pointer; transition: background 0.2s; } .pill-btn:hover { background: rgba(0, 0, 0, 0.52); } .pill-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #postBtn { background: rgba(255, 140, 80, 0.35); border-color: rgba(255, 190, 140, 0.5); } #postBtn:hover { background: rgba(255, 140, 80, 0.55); } body.quick-open .hud { opacity: 0; pointer-events: none; } @media (max-width: 380px) { .pill-btn { padding: 0 11px 0 9px; font-size: 13px; } } /* Quick editor */ .quick { position: fixed; inset: 0; z-index: 45; display: grid; align-items: end; justify-items: center; padding: 16px; background: rgba(5, 6, 12, 0.45); } .quick-card { width: min(520px, 100%); margin-bottom: max(4px, env(safe-area-inset-bottom)); padding: 14px 18px 16px; border-radius: 18px; background: rgba(14, 16, 28, 0.96); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); color: #f4f1ea; font-size: 15px; } .quick-card .panel-head { margin-bottom: 8px; } .quick-card h2 { margin: 0; font-size: 17px; } .quick-card textarea { width: 100%; min-height: 70px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 600 22px var(--sign-font); letter-spacing: 0.04em; text-transform: uppercase; resize: none; } /* Panel sections */ .sec-title, .list-title { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } .list-title { margin: 14px 0 6px; font-size: 11px; } .your-sign { margin-bottom: 6px; } .panel .group { margin: 12px 0; } .panel-foot { margin-top: 16px; } #sizeSeg small { font-weight: 500; opacity: 0.7; margin-left: 3px; } .sheet-grip { display: none; } /* Look previews */ .look-chips { grid-template-columns: repeat(4, 1fr); } .lk-bg { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background-size: cover; } .lk-frame { display: flex; gap: 2px; padding: 3px; border-radius: 4px; background: var(--frame, rgba(0, 0, 0, 0.35)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); } .lk-frame[data-housing="solid"] { background: var(--frame-color); } .lk-frame[data-housing="wood"] { background: linear-gradient(180deg, #8a5530, #5e351a 50%, #74431f); } .lk-frame[data-housing="metal"] { background: linear-gradient(180deg, #dfe3e8, #9ea5ad 45%, #c6cbd1 55%, #8a9199); } .lk-frame[data-housing="brass"] { background: linear-gradient(180deg, #f5d98a, #b88a2c 45%, #e2ba5e 55%, #94691b); } .lk-frame[data-housing="none"] { background: none; box-shadow: none; } .lk-tile { display: grid; place-items: center; width: 13px; height: 18px; border-radius: 2px; font-size: 11px; line-height: 1; background-image: linear-gradient(transparent 48%, rgba(0, 0, 0, 0.45) 48% 53%, transparent 53%); } .lk-name { max-width: 100%; font-size: 11px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; } /* Chip rows that scroll sideways (studio) */ .chips.scroll { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; } .chips.scroll button { flex: 0 0 auto; width: 86px; } .font-chips.scroll button { width: 92px; } .font-chips.scroll { margin-top: 6px; } /* Phones (portrait): the panel is a bottom sheet so the sign stays visible above it. */ @media (max-width: 899px) and (orientation: portrait) { .panel { top: auto; left: 0; width: 100%; height: 56vh; height: 56dvh; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px 18px 0 0; transform: translateY(105%); padding-top: 6px; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45); } .panel.open { transform: none; } .sheet-grip { display: block; width: 42px; height: 5px; margin: 2px auto 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); } body.panel-open .stage { bottom: 56vh; bottom: 56dvh; } body.panel-open .hud { opacity: 0; pointer-events: none; } } /* Now line, play options, quick picks */ .now-line { margin: 2px 0 10px; padding: 8px 11px; border-radius: 10px; background: rgba(255, 179, 107, 0.1); border: 1px solid rgba(255, 179, 107, 0.25); font-size: 13px; color: #ffd9b8; } details.sub { margin: 8px 0 12px; padding: 0 10px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); } details.sub > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.78); cursor: pointer; } details.sub > summary::-webkit-details-marker { display: none; } details.sub > summary::after { content: '+'; font-size: 16px; opacity: 0.7; } details.sub[open] > summary::after { content: '−'; } .quick-picks-wrap { margin-top: 10px; } .quick-picks { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: thin; } .quick-picks button { flex: none; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 13px var(--sign-font); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .quick-picks button.mine { border-color: rgba(255, 179, 107, 0.55); } .quick-picks button:hover { background: rgba(255, 255, 255, 0.12); } /* Background section + crawl */ .bg-pane { margin: 10px 0 4px; } #bgTypeSeg button, #patternSeg button { flex: 1 1 auto; } .moving-chips { grid-template-columns: repeat(4, 1fr); } .tc-bg.mv { aspect-ratio: 4 / 3; } .crawl-box { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .crawl-box input[type="text"] { width: 100%; margin: 8px 0 4px; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #fff; font: 600 16px var(--sign-font); letter-spacing: 0.04em; text-transform: uppercase; } .crawl-opts { gap: 8px; } .quick-crawl { margin: 8px 0 0; font-size: 14px; } /* ---------- iPhone / touch polish ---------- */ button, .stage, .inserts button, .chips button, .seg button { touch-action: manipulation; } @media (pointer: coarse) { /* iOS Safari zooms the page when a field under 16px gets focus */ input[type="text"], input[type="number"], input[type="date"], select, textarea, .edit-input { font-size: 16px; } } /* Keep the quick editor and the phone sheet above the on-screen keyboard (--kb is set from visualViewport). */ .quick { padding-bottom: calc(16px + var(--kb, 0px)); transition: padding-bottom 0.15s; } @media (max-width: 899px) and (orientation: portrait) { .panel { bottom: var(--kb, 0px); max-height: calc(100dvh - var(--kb, 0px) - 40px); } } /* iOS Safari only sends taps ("click") to elements that look clickable. */ .stage { cursor: pointer; } body.idle .stage { cursor: none; } /* The quick-pick row scrolls sideways; don't let it stretch the card wider than the screen. */ .quick-card { min-width: 0; max-width: 100%; } .quick-picks-wrap, .quick-picks { min-width: 0; max-width: 100%; } /* The quick editor never grows taller than the space above the keyboard; it scrolls instead. */ .quick-card { max-height: calc(var(--vvh, 100dvh) - 24px); overflow-y: auto; overscroll-behavior: contain; } @media (pointer: coarse) { .desktop-only { display: none; } } /* Phones: pin the quick editor to the top of the screen, which the keyboard never covers (iOS doesn't reliably report the keyboard's height). */ @media (pointer: coarse) { .quick { align-items: start; padding: max(10px, env(safe-area-inset-top)) 10px 10px; } .quick-card { margin-bottom: 0; max-height: calc(var(--vvh, 100dvh) - max(20px, env(safe-area-inset-top)) - 10px); } } /* Safari's floating toolbar covers the bottom of the phone sheet: leave room to scroll past it. */ @media (pointer: coarse) and (max-width: 899px) and (orientation: portrait) { .panel { padding-bottom: calc(90px + env(safe-area-inset-bottom)); } }