/* WhatiMeme v0 — design tokens per docs/product-specification.md §10 */ :root { --bg: #faf9f7; --surface: #ffffff; --ink: #1c1b1a; --ink-soft: #57534e; --border: #e4e1dc; --accent: #6d28d9; --accent-ink: #ffffff; --amber: #b45309; /* Declared in DESIGN.md's frontmatter and previously defined nowhere — the document described a system half of which did not exist in code. Values are the literals already in use across the stylesheets. */ --accent-deep: #5b21b6; --accent-wash: #f3eefc; --border-hover: #d6d1ca; --danger: #b91c1c; --danger-edge: #fca5a5; --danger-wash: #fef2f2; --radius: 12px; --shadow: 0 1px 2px rgba(28, 27, 26, 0.06), 0 4px 12px rgba(28, 27, 26, 0.06); /* The UI voice. Archivo is a grotesque from the same family tree as the meme faces the editor already offers (Anton, Bebas Neue, Oswald), so the chrome and the artifact share a lineage — and it holds its shape at the small label sizes a dense editor lives on. The platform sans it replaced gave the product no voice of its own. */ --font-body: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Type scale. 11px was the most common size in the app (30 elements in the template editor, 304 in freestyle) and sat below the readable floor; the rest clustered between 11 and 17px with no clear steps. Twelve is the floor now, and the steps above body are wide enough to read as different. */ --t-micro: 12px; /* uppercase labels, meta, layer types */ --t-small: 13px; /* hints and secondary copy */ --t-input: 16px; /* text the user types — iOS force-zooms below this */ --t-body: 15px; /* default UI text */ --t-control: 14px; /* dense control text — the most-used size in the app */ --t-lead: 19px; /* section intros */ --t-title: 24px; /* panel and page titles */ --t-display: 34px; /* page headings */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* `hidden` here makes a scroll container, which silently breaks every `position: sticky` descendant — the site header was scrolling away, and .preview-pane's `top: 54px` was offsetting against a header that had left. `clip` contains the same overflow without creating that container. The older note preferred `hidden` because `clip` could lock the layout wider than the viewport on phones; that was the nav row before it became a proper horizontal scroller. Measured at 375px: sticky works and scrollWidth === innerWidth. `hidden` stays first as the fallback for engines without `clip`. */ overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; width: 100%; max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; font-size: 16px; overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; /* Stop flex/grid min-content (wide toolbars, nav) from growing the page */ min-width: 0; } /* Mobile label variants — hidden on desktop */ .nav-short, .btn-short { display: none; } .nav-full, .btn-full { display: inline; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 8px 16px; border-radius: 0 0 8px 0; z-index: 10; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- header / footer ---------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; gap: 12px; } .brand { font-weight: 800; font-size: var(--t-title); text-decoration: none; color: var(--ink); letter-spacing: -0.02em; flex: none; } .brand span { color: var(--accent); } /* Tab / pill nav — same look on Home and every other view */ .site-header .site-nav, .site-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; } .site-header .site-nav a, .site-header .site-nav a.nav-tab, .site-nav a, .site-nav a.nav-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-soft); font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; box-sizing: border-box; flex: 0 0 auto; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .site-header .site-nav a:hover, .site-header .site-nav a.nav-tab:hover, .site-nav a:hover, .site-nav a.nav-tab:hover { background: #f3eefc; border-color: #d8c9f5; color: var(--ink); } .site-header .site-nav a[aria-current="page"], .site-header .site-nav a.nav-tab[aria-current="page"], .site-nav a[aria-current="page"], .site-nav a.nav-tab[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .site-header .site-nav a:focus-visible, .site-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .site-footer { border-top: 1px solid var(--border); margin-top: 64px; padding: 24px; color: var(--ink-soft); font-size: 14px; text-align: center; } .site-footer p { max-width: 640px; margin: 0 auto; } .site-footer a { color: var(--ink); font-weight: 700; } .account-signed-in { display: flex; align-items: center; gap: 8px; min-width: 0; } .account-signed-in[hidden] { display: none; } .account-identity { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: var(--t-small); } .account-manage, .account-logout, .account-signin { min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 700 var(--t-small)/1.2 Archivo, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; } .account-manage:hover, .account-logout:hover, .account-signin:hover { border-color: var(--accent); background: var(--bg); } .account-signin-x { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #000; border-color: #000; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .account-signin-x[hidden] { display: none !important; } .account-signin-x:hover { color: #fff; background: #202020; border-color: #202020; } .account-signin-x:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .account-x-mark { font: 700 18px/1 system-ui, sans-serif; transform: translateY(-0.5px); } .account-credit { font-variant-numeric: tabular-nums; } /* ---------- layout ---------- */ main { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; box-sizing: border-box; min-width: 0; } .view { padding-top: 32px; max-width: 100%; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; } h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; overflow-wrap: break-word; word-break: normal; max-width: 100%; } h2 { font-size: 24px; margin: 40px 0 12px; letter-spacing: -0.01em; overflow-wrap: break-word; } h3 { font-size: var(--t-lead); margin: 0 0 6px; } .lede { color: var(--ink-soft); font-size: var(--t-lead); max-width: 640px; overflow-wrap: break-word; } .hero { padding: 40px 0 8px; max-width: 760px; min-width: 0; } .prose { max-width: 760px; } .prose li { margin-bottom: 6px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: #5b21b6; } .btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--border); } .btn-quiet:hover { background: var(--bg); border-color: #d6d1ca; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .concept-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; } .compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 16px 0; } .compare-card.strong { border-color: var(--accent); } .compare-tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 8px; } .compare-card.strong .compare-tag { color: var(--accent); } .compare-text { font-size: var(--t-lead); font-weight: 700; margin: 0 0 8px; } .compare-why { color: var(--ink-soft); font-size: 14px; margin: 0; } /* ---------- gallery ---------- */ .gallery { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .gallery-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .gallery-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } .gallery-card img { width: 100%; height: 200px; object-fit: contain; background: #f1efec; display: block; border-bottom: 1px solid var(--border); } .gallery-card .card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .gallery-card .tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--accent); background: #f3eefc; border-radius: 99px; padding: 3px 10px; } .gallery-card .name { font-weight: 800; font-size: var(--t-lead); line-height: 1.25; } .gallery-card .situation { color: var(--ink-soft); font-size: 14px; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gallery-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28, 27, 26, 0.08); } .gallery-card:focus-within { border-color: var(--accent); } /* ---------- Templates → generator shortcut ---------- */ .templates-generator-shortcut { margin: 0 0 18px; } .templates-generator-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; } .templates-generator-shortcut p { display: none; } .generator-view .lede { max-width: 42rem; } .generator-ai-offline { max-width: 42rem; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #f0d9a8; border-radius: 8px; background: #fffbeb; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.45; } .generator-view .meme-ai-tools { margin-top: 8px; } @media (max-width: 620px) { .templates-generator-btn { width: 100%; text-align: center; } } /* ---------- AI tools shelf (Situation → Meme + shared chrome) ---------- */ .meme-ai-tools { max-width: 860px; margin: 0 auto 28px; display: grid; gap: 12px; min-width: 0; } .ai-generation-progress { position: fixed; z-index: 80; top: 66px; left: 50%; width: min(620px, calc(100% - 28px)); transform: translateX(-50%); padding: 10px 12px 11px; border: 1px solid rgba(109, 40, 217, 0.28); border-radius: 12px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 10px 32px rgba(28, 27, 26, 0.16); backdrop-filter: blur(10px); } .ai-generation-progress[hidden] { display: none !important; } .ai-generation-progress-copy { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--ink); font-size: 13px; font-weight: 800; } .ai-generation-progress-mark { color: var(--accent); } .ai-generation-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e7e1f2; } .ai-generation-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #a855f7); transition: width 420ms ease; } @media (max-width: 760px) { .ai-generation-progress { top: 56px; width: calc(100% - 20px); } } /* A dialog's own copy of the bar (see lib/generation-progress.js): part of the dialog's flow rather than fixed to the viewport the dialog is covering. */ .ai-generation-progress.ai-generation-progress--inline { position: static; z-index: auto; top: auto; left: auto; width: auto; transform: none; margin: 10px 0 0; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .ai-generation-progress-track span { transition: none; } } .meme-ai-tools *, .meme-ai-tools *::before, .meme-ai-tools *::after { box-sizing: border-box; } .meme-create-panel, .meme-create-body, .meme-create-input, .meme-generation-mode, .meme-trending-head, .meme-trending-head .meme-create-copy { min-width: 0; } .meme-create-copy p, .meme-generation-mode p, .ai-data-note, .meme-recast-refnote { overflow-wrap: anywhere; } .meme-create-panel { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .meme-create-panel > .meme-create-copy, .meme-news-details > .meme-create-copy, .meme-trending-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .meme-create-copy h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; } .meme-create-copy p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; } .meme-create-body { padding: 16px 18px 18px; display: grid; gap: 14px; } .meme-create-input { display: grid; gap: 6px; } .meme-create-panel .meme-create-input > label, .meme-create-panel > label { display: block; margin: 0; font-size: 14px; font-weight: 800; } .meme-create-panel textarea { width: 100%; min-height: 82px; resize: vertical; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); background: var(--bg); font: inherit; } .meme-create-panel textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .meme-create-actions, .meme-proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; } .meme-generation-modes { align-items: stretch; gap: 10px; } .meme-generation-mode { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .meme-generation-mode .btn { width: 100%; min-height: 44px; } .meme-generation-mode p { margin: 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.45; flex: 1 1 auto; } /* Trust CTA uses .grok-action (black + Grok mark), matching Canvas Edit with Grok. */ .btn-trust.grok-action { width: 100%; min-height: 44px; border-radius: 8px; } .meme-generation-mode .btn-trust.grok-action { justify-content: center; } /* The two mode buttons are ordinary buttons, sized to their label. The phone-only ".meme-create-actions .btn { flex: 1 1 150px }" rule was meant for a row of buttons; inside these column cards it made each one 150px tall. */ .meme-generation-modes .meme-generation-mode .btn, .meme-generation-modes .meme-generation-mode .btn-trust.grok-action { flex: 0 0 auto; align-self: flex-start; width: auto; min-height: 38px; padding: 8px 16px; font-size: 14px; } @media (max-width: 760px) { /* Full width at the standard touch height on a phone. */ .meme-generation-modes .meme-generation-mode .btn, .meme-generation-modes .meme-generation-mode .btn-trust.grok-action { align-self: stretch; width: 100%; min-height: 44px; } } .btn-trending { color: var(--ink); border-color: var(--accent); background: var(--surface); box-shadow: none; } .btn-trending:hover, .btn-trending:focus-visible { color: var(--ink); border-color: var(--accent); background: var(--bg); } .meme-create-notes { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); } .ai-data-note { margin: 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.4; } .ai-account-note { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--accent-wash); color: var(--ink-soft); font-size: var(--t-small); line-height: 1.45; } .ai-account-note strong { color: var(--ink); } .meme-create-status { min-height: 0; margin: 0; color: var(--ink-soft); font-size: 14px; } .meme-create-status:not(:empty) { min-height: 1.3em; } .meme-create-restart:not(:has(button:not([hidden]))) { display: none; } .billing-recovery { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); } .billing-recovery h3 { margin: 0 0 4px; font-size: var(--t-lead); } .billing-recovery p { margin: 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.45; } .billing-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .billing-recovery .btn { min-height: 40px; } .meme-create-restart { margin: 0; } .pricing-view { max-width: 920px; margin: 0 auto; } .pricing-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; } .pricing-card, .pricing-costs { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .pricing-label { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .pricing-card h2 { margin: 0 0 8px; font-size: var(--t-display); } .pricing-card h2 span { color: var(--ink-soft); font-size: 15px; font-weight: 600; } .pricing-card p:not(.pricing-label) { min-height: 3em; color: var(--ink-soft); } .pricing-costs h2 { margin-top: 0; } .pricing-costs dl { margin: 0; } .pricing-costs dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--border); } .pricing-costs dt { font-weight: 600; } .pricing-costs dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .pricing-costs p { color: var(--ink-soft); font-size: var(--t-small); } .pricing-confirmation { margin: 16px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-wash); font-weight: 700; } .pricing-manage { margin-top: 16px; } .pricing-legal { margin-top: 24px; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; } /* ---------- legal and support ---------- */ .legal-view { max-width: 760px; margin: 0 auto; } .legal-view h1 { margin-bottom: 6px; } .legal-view h2 { margin: 32px 0 10px; font-size: 22px; } .legal-view p, .legal-view li { line-height: 1.65; } .legal-view ul { padding-left: 24px; } .legal-view li + li { margin-top: 8px; } .legal-view address { padding: 16px 18px; border-left: 4px solid var(--accent); background: var(--accent-wash); font-style: normal; line-height: 1.65; } .legal-updated { margin-top: 0; color: var(--ink-soft); font-size: var(--t-small); } .site-footer nav { margin-top: 8px; } /* ---------- admin dashboard ---------- */ .admin-view { max-width: 1000px; margin: 0 auto; } .admin-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .admin-heading-row h1 { margin-bottom: 8px; } .admin-heading-row .lede { margin: 0; } .admin-status { min-height: 1.5em; margin: 8px 0 12px; color: var(--ink-soft); font-size: var(--t-small); } .admin-status.is-error { color: var(--danger); } .admin-status.is-success { color: #166534; } .admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .admin-users { width: 100%; border-collapse: collapse; min-width: 680px; } .admin-users th, .admin-users td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } .admin-users th { color: var(--ink-soft); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; } .admin-users tbody tr:last-child td { border-bottom: 0; } .admin-user { display: flex; align-items: center; gap: 9px; min-width: 190px; } .admin-user img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; background: var(--bg); } .admin-user-name { display: grid; gap: 1px; } .admin-user-name strong { font-size: var(--t-control); } .admin-user-name span { color: var(--ink-soft); font-size: var(--t-small); } .admin-balance { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-gift { display: flex; align-items: center; justify-content: flex-end; gap: 7px; } .admin-gift input { width: 76px; min-height: 40px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font: inherit; } .admin-gift .btn { min-height: 40px; padding: 8px 12px; } .admin-empty { color: var(--ink-soft); text-align: center !important; padding: 26px !important; } /* Money panel — what the paid side cost, took in, and still owes. */ .admin-money { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 18px 20px 20px; margin-bottom: 18px; } .admin-money-head h2 { margin: 0 0 4px; font-size: var(--t-title); } .admin-money-note { margin: 0; color: var(--ink-soft); font-size: var(--t-small); max-width: 62ch; } .admin-meter { margin: 16px 0 0; } .admin-meter-track { height: 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; } .admin-meter-fill { /* Full width, scaled down from the left: animating `width` lays out the page on every frame, while a transform is composited. --fill is the 0-1 share app.js sets. */ height: 100%; width: 100%; transform: scaleX(var(--fill, 0)); transform-origin: left center; background: var(--accent); border-radius: 999px; transition: transform .3s ease; } /* Costs have overrun revenue. Amber is the overflow role: the bar has run past what its track can represent — a strain signal, not a failure. */ .admin-meter.is-over .admin-meter-fill { background: var(--amber); } .admin-meter-caption { margin: 8px 0 0; color: var(--ink-soft); font-size: var(--t-small); } .admin-meter.is-over .admin-meter-caption { color: var(--amber); } .admin-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; } .admin-figure { display: grid; gap: 2px; align-content: start; } .admin-figure dt { color: var(--ink-soft); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; } .admin-figure dd { margin: 0; font-size: var(--t-display); font-weight: 800; font-variant-numeric: tabular-nums; } .admin-figure-sub { margin: 0; color: var(--ink-soft); font-size: var(--t-small); } .admin-credits { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .admin-credits h3 { margin: 0 0 4px; font-size: var(--t-control); display: flex; align-items: baseline; gap: 8px; } .admin-credits-total { font-size: var(--t-lead); font-weight: 800; font-variant-numeric: tabular-nums; } .admin-credit-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; max-width: 420px; } .admin-credit-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .admin-credit-label { color: var(--ink-soft); font-size: var(--t-control); } .admin-credit-value { font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .pricing-products { grid-template-columns: 1fr; } .pricing-card p:not(.pricing-label) { min-height: 0; } .account-signed-in { gap: 5px; } .account-manage, .account-logout, .account-signin { padding-inline: 8px; } .admin-heading-row { align-items: start; flex-direction: column; } .admin-figures { grid-template-columns: 1fr; } .admin-figure dd { font-size: var(--t-title); } } .meme-template-choices { margin-top: 12px; } .meme-template-choices > p { margin: 0 0 8px; font-weight: 700; } .meme-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .meme-choice { min-width: 0; overflow: hidden; text-align: left; padding: 0 12px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; } .meme-choice:hover, .meme-choice:focus-visible { border-color: var(--accent); background: #f3eefc; } .meme-choice:disabled { cursor: default; opacity: 0.68; border-color: var(--border); background: var(--surface); } .meme-choice:disabled b { color: var(--ink-soft); } .meme-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .meme-choice strong, .meme-choice span, .meme-choice b { display: block; } .meme-choice .meme-choice-image { height: 150px; margin: 0 -12px 11px; overflow: hidden; border-bottom: 1px solid var(--border); background: #e7e5e4; } .meme-choice .meme-choice-image img { display: block; width: 100%; height: 100%; object-fit: contain; } .meme-choice .meme-choice-reason { margin: 5px 0 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.35; } .meme-choice b { color: var(--accent); font-size: 13px; } .meme-proposal { margin-top: 12px; padding: 12px; border-radius: 9px; background: #f6f3fb; } .meme-why { margin: 0; line-height: 1.45; } .meme-idea-edit { margin: 8px 0 0; color: var(--ink); line-height: 1.55; } .meme-recast-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 9px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: none; color: var(--ink); font: inherit; font-size: var(--t-control); font-weight: 800; cursor: pointer; } .meme-recast-action:hover, .meme-recast-action:focus-visible { border-color: #d6d1ca; background: var(--bg); color: var(--ink); } .meme-recast-action:disabled { border-color: var(--border); background: var(--bg); color: var(--ink-soft); box-shadow: none; cursor: wait; opacity: 0.6; } .meme-inline-quiet { padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .meme-inline-quiet:hover { color: var(--accent); } .meme-recast-action:focus-visible, .meme-inline-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .meme-recast-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .meme-recast-using { color: var(--ink-soft); } .meme-create-restart { margin-top: 8px; } .meme-recast-add { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px dashed var(--border-hover); border-radius: 8px; color: var(--ink); font-size: var(--t-control); font-weight: 700; cursor: pointer; } .meme-recast-add:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); } .meme-recast-add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .meme-recast-refnote { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.4; } .meme-recast-reflist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex-basis: 100%; padding: 0; list-style: none; } .meme-recast-reflist li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: var(--t-small); } .meme-recast-reflist img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; } .meme-recast-reflist span { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meme-recast-drop { min-height: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-soft); font-size: var(--t-small); font-weight: 700; cursor: pointer; } .meme-recast-drop:hover { color: var(--danger); background: var(--danger-wash); } .meme-caption-preview { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; } .meme-caption-preview li { display: grid; grid-template-columns: minmax(90px, 32%) 1fr; gap: 8px; font-size: 14px; } .meme-caption-preview strong { color: var(--accent); overflow-wrap: anywhere; } .meme-caption-preview span { overflow-wrap: anywhere; } /* Meme the News — compact header, results below */ .meme-trending-panel { margin: 0; } .meme-news-details { margin: 0; } .meme-news-details > summary.meme-news-summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 44px; padding: 12px 18px; cursor: pointer; background: var(--surface); border-bottom: 1px solid transparent; color: var(--ink); font: inherit; } .meme-news-details[open] > summary.meme-news-summary { border-bottom-color: var(--border); } .meme-news-details > summary.meme-news-summary::-webkit-details-marker { display: none; } .meme-news-details > summary.meme-news-summary::marker { content: ""; } .meme-news-details > summary.meme-news-summary::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-mask: var(--chevron) center / 16px 16px no-repeat; mask: var(--chevron) center / 16px 16px no-repeat; } .meme-news-details[open] > summary.meme-news-summary::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .meme-news-details > summary.meme-news-summary::before { transition: none; } } .meme-news-summary-main { font-weight: 800; font-size: 15px; line-height: 1.3; } .meme-news-summary-sub { flex: 1 1 220px; color: var(--ink-soft); font-size: var(--t-small); font-weight: 500; line-height: 1.4; } .meme-trending-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; } .meme-trending-head .meme-create-copy { flex: 1 1 260px; min-width: 0; } .meme-trending-cta { margin: 0; flex: 0 0 auto; align-self: center; } .meme-trending-cta .btn { min-width: 210px; min-height: 44px; } .meme-news-details > .meme-create-status, .meme-news-details > .billing-recovery, .meme-news-details > .meme-trending-story, .meme-news-details > .meme-trending-result-list { margin-left: 18px; margin-right: 18px; } .meme-news-details > .meme-create-status { margin-top: 12px; } .meme-news-details > .meme-trending-result-list { margin-bottom: 16px; } .meme-trending-card-topic { margin: 0 0 6px; color: var(--ink); line-height: 1.5; } .meme-trending-card-take { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--accent-wash); color: var(--ink); line-height: 1.5; } .meme-trending-results-head h3 { margin: 0; font-size: 18px; } .meme-trending-results-head p { min-height: 1.3em; margin: 4px 0 12px; color: var(--ink-soft); font-size: var(--t-small); } .meme-trending-story { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); } .meme-trending-story h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; } .meme-trending-story p { margin: 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.5; } .meme-trending-result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .meme-trending-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); } .meme-trending-card-head { padding: 11px 12px 8px; } .meme-trending-card-head h4 { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .meme-trending-card-index { display: block; margin-bottom: 3px; color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .meme-trending-preview { display: block; width: 100%; height: auto; aspect-ratio: 1.35; object-fit: contain; background: #e7e5e4; } .meme-trending-preview-placeholder { display: grid; min-height: 130px; place-items: center; padding: 16px; box-sizing: border-box; color: var(--ink-soft); font-size: var(--t-small); text-align: center; } .meme-trending-card-body { padding: 10px 12px 12px; } .meme-trending-card-body p { margin: 0 0 8px; line-height: 1.4; } .meme-trending-card-meta { color: var(--ink-soft); font-size: var(--t-small); } .meme-trending-card-meta strong { color: var(--ink); } .meme-trending-card .meme-caption-preview { margin-top: 8px; } .meme-trending-card .meme-caption-preview li { display: block; font-size: var(--t-small); } .meme-trending-card .meme-caption-preview strong { display: block; } .meme-trending-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .meme-trending-card-actions .btn { flex: 1 1 130px; } .meme-trending-card.is-loading .meme-trending-preview { min-height: 130px; } .meme-trending-card.is-error { border-color: #e6b8b8; } .meme-trending-card-error { color: var(--danger); font-size: var(--t-small); } .meme-trending-recast-note { color: var(--ink-soft); font-size: var(--t-small); } /* Narrow desktop / tablet: keep modes side-by-side when space allows */ @media (max-width: 760px) { .meme-ai-tools { margin-bottom: 22px; gap: 10px; } .meme-trending-head { align-items: stretch; } .meme-trending-cta { width: 100%; } .meme-trending-cta .btn { width: 100%; min-width: 0; } } /* Phones */ @media (max-width: 620px) { .meme-ai-tools { margin-bottom: 18px; gap: 10px; } .meme-create-panel > .meme-create-copy, .meme-news-details > .meme-create-copy, .meme-trending-head, .meme-create-body { padding: 14px; } .meme-news-details > summary.meme-news-summary { padding: 12px 14px; min-height: 44px; } .meme-create-copy h2 { font-size: 18px; } .meme-create-body { gap: 12px; } .meme-generation-modes { flex-direction: column; gap: 8px; } .meme-generation-mode { flex: 1 1 auto; width: 100%; padding: 12px; } .meme-choice-grid { grid-template-columns: 1fr; } .meme-create-actions .btn, .meme-proposal-actions .btn { flex: 1 1 150px; min-height: 44px; } .meme-caption-preview li { grid-template-columns: 1fr; gap: 1px; } .meme-recast-add { width: 100%; justify-content: center; min-height: 44px; } .meme-recast-refnote { flex: 1 1 100%; } .meme-trending-head { gap: 10px; } .meme-trending-cta { width: 100%; } .meme-trending-cta .btn { width: 100%; min-width: 0; } .meme-news-details > .meme-create-status, .meme-news-details > .billing-recovery, .meme-news-details > .meme-trending-story, .meme-news-details > .meme-trending-result-list { margin-left: 14px; margin-right: 14px; } .meme-news-details > .meme-trending-result-list { margin-bottom: 14px; } .meme-trending-result-list { grid-template-columns: 1fr; } } /* Comfortable desktop: news CTA sits with the title row */ @media (min-width: 761px) { .meme-trending-head { align-items: center; padding-right: 18px; } .meme-generation-modes { gap: 12px; } } /* ---------- editor ---------- */ .editor-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .editor-header h1 { margin: 0; font-size: 26px; } .editor { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .editor { grid-template-columns: 1fr; } } /* Template create: image, then captions, then guidance — one clear column */ .editor.editor-create { grid-template-columns: 1fr; max-width: 720px; gap: 20px; } /* Deliberately static, not a specificity accident. On desktop the create editor is two columns and .controls-pane scrolls internally (clientHeight 750 vs scrollHeight 930), so every caption is reachable with the page at scrollY 0 and the preview never leaves the viewport. Sticky is only needed at <=760px, where the layout is one column and the page itself scrolls — that rule lives in editor-workspace.css. Measured before changing this. */ .editor.editor-create .preview-pane { position: relative; } .editor.editor-create .create-captions { margin-top: 14px; } .editor.editor-create .row-controls { flex-wrap: wrap; } .editor.editor-create .row-controls .btn { flex: 1 1 auto; min-width: 120px; } .template-lesson-pane { display: grid; gap: 16px; } .template-canvas-callout { display: grid; gap: 12px; padding: 18px; border: 2px solid var(--accent); border-radius: 12px; background: var(--accent-wash); } .template-canvas-callout p { margin: 0; color: var(--ink-soft); line-height: 1.4; font-weight: 600; } .template-canvas-cta { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; font-weight: 800; box-shadow: 0 5px 16px rgba(109, 40, 217, 0.24); } .template-guidance { padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .template-guidance > :first-child { margin-top: 0; } .template-guidance > :last-child { margin-bottom: 0; } .template-editor-legacy[hidden] { display: none !important; } /* Sticky header sits over the workspace when we scroll a generated meme into view from Meme the News. */ #view-create, #view-freestyle { scroll-margin-top: 72px; } .preview-pane { position: sticky; top: 76px; } @media (max-width: 900px) { .preview-pane { position: static; } } #preview { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius); background: #f1efec; touch-action: none; cursor: default; } .meme-writing-overlay { position: absolute; inset: 40px 0 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.94); color: var(--ink); text-align: center; backdrop-filter: blur(3px); } .meme-writing-overlay[hidden] { display: none; } .meme-writing-overlay > span:last-child { color: var(--ink-soft); font-size: 13px; } .meme-writing-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: meme-writing-spin 0.8s linear infinite; } @keyframes meme-writing-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .meme-writing-spinner { animation-duration: 1.8s; } } .preview-hint { color: var(--ink-soft); font-size: 13px; margin: 8px 0 0; } .text-summary { color: var(--ink-soft); font-size: 13px; margin: 6px 0 0; } .guidance { margin-bottom: 16px; } .guidance, .responsible-check { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; } .guidance summary, .responsible-check summary { font-weight: 700; cursor: pointer; min-height: 32px; } .guidance .g-situation { font-weight: 600; } .guidance .g-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 12px 0 2px; } .guidance p { margin: 4px 0; font-size: 14px; color: var(--ink-soft); } .guidance .g-safety { color: var(--amber); font-weight: 600; } .field { margin-bottom: 14px; } .field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; } .field .hint { font-weight: 400; color: var(--ink-soft); } .field input { width: 100%; padding: 10px 12px; font-size: 16px; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); } .field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field .fit-warning { color: var(--amber); font-size: 13px; margin: 4px 0 0; } .zone-tools { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; } .zone-tools .tool-btn { min-width: 36px; min-height: 36px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: 14px; font-family: inherit; } .zone-tools .tool-btn:hover { border-color: var(--accent); } .zone-tools .tool-btn[aria-pressed="true"] { background: #f3eefc; border-color: var(--accent); color: var(--accent); font-weight: 800; } .zone-tools input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--accent); } .zone-tools .tools-label { font-size: 12px; color: var(--ink-soft); } /* Place = solid filled arrows; Nudge = outline / lighter chevrons */ .tool-btn.place-btn, .fs-toggle.place-btn { background: #1c1b1a; border-color: #1c1b1a; color: #fff; font-weight: 800; } .tool-btn.place-btn:hover, .fs-toggle.place-btn:hover { background: #3f3a36; border-color: #3f3a36; color: #fff; } .tool-btn.fine-btn, .fs-toggle.fine-btn { background: #fff; border: 1.5px dashed var(--accent); color: var(--accent); font-weight: 700; box-shadow: none; } .tool-btn.fine-btn:hover, .fs-toggle.fine-btn:hover { background: #f3eefc; border-style: solid; } /* Caption first; style & position stay one tap away */ .style-more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 4px; } .style-more > summary { list-style-position: outside; cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); } .style-more > summary:hover { color: var(--ink); } .style-more[open] > summary { color: var(--accent); } /* Per-zone style toolbar (font, B/I/U, colors) */ .style-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } .style-tools .style-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .style-tools .style-row.span-2 { grid-column: 1 / -1; } .style-tools .style-row label { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0; } .style-tools select { width: 100%; min-height: 40px; padding: 6px 10px; font-size: 14px; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; } .style-tools select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .style-format { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .style-format .tool-btn { min-width: 40px; min-height: 40px; font-weight: 700; } .style-format .tool-btn.italic-preview { font-style: italic; } .style-format .tool-btn.underline-preview { text-decoration: underline; } /* Two outline weights: thin vs thick — same glyph, different stroke preview */ .outline-pair { display: inline-flex; gap: 4px; align-items: center; margin-left: 2px; padding-left: 6px; border-left: 1px solid var(--line, #e4e1dc); } .tool-btn.outline-btn, .fs-toggle.outline-btn { font-weight: 900; font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; letter-spacing: 0.02em; color: var(--ink); background: var(--surface); } .tool-btn.outline-thin, .fs-toggle.outline-thin { color: var(--surface); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; } .tool-btn.outline-thick, .fs-toggle.outline-thick { color: var(--surface); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; } .tool-btn.outline-btn[aria-pressed="true"], .fs-toggle.outline-btn[aria-pressed="true"] { background: #f3eefc; border-color: var(--accent); -webkit-text-stroke-color: var(--accent); } .fs-btn-row .outline-pair, .fs-rail-toggles .outline-pair { border-left-color: rgba(28, 27, 26, 0.12); } .align-format .tool-btn { font-size: 16px; letter-spacing: -0.02em; } .color-pair { display: flex; align-items: center; gap: 8px; min-height: 40px; } .color-pair input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; } .color-pair input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; } .color-pair .swatch-none { font-size: 12px; color: var(--ink-soft); white-space: nowrap; } .bg-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; user-select: none; } .bg-toggle input { width: 16px; height: 16px; accent-color: var(--accent); } .row-controls { display: flex; gap: 12px; margin: 20px 0 12px; } .row-controls .btn-primary { flex: 1; } .responsible-check ul { margin: 8px 0 4px; padding-left: 20px; font-size: 14px; color: var(--ink-soft); } .export-fallback { color: var(--amber); font-weight: 600; } /* ---------- examples ---------- */ .examples-block { margin-top: 48px; } .examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .example-card { text-align: left; cursor: default; font-family: inherit; font-size: inherit; color: inherit; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .example-card .ex-preview { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; background: #f1efec; border-bottom: 1px solid var(--border); } .example-card .ex-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .example-card .ex-captions { font-weight: 700; margin: 0 0 8px; } .example-card .ex-captions span { display: block; } .example-card .ex-captions .z { color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .example-card .ex-why { color: var(--ink-soft); font-size: 14px; margin: 0; line-height: 1.4; } .example-card .ex-use { color: var(--accent); font-weight: 700; font-size: 13px; margin: 4px 0 0; } /* =================================================================== Gallery search & filters =================================================================== */ .gallery-controls { margin: 20px 0 4px; display: flex; flex-direction: column; gap: 12px; } .search-field input { width: 100%; max-width: 560px; padding: 11px 14px; font-size: 16px; font-family: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); } .search-field input:focus-visible { border-color: var(--accent); } .filter-row { display: flex; flex-direction: column; gap: 8px; } .chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .chip-label { flex: none; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); min-width: 5.6em; } .chip { min-height: 36px; padding: 6px 14px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); font-family: inherit; font-size: 14px; font-weight: 600; } .chip:hover { border-color: var(--accent); color: var(--ink); } .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .gallery-count { color: var(--ink-soft); font-size: 14px; margin: 0; } .gallery-loading { display: flex; align-items: center; gap: 9px; min-height: 42px; margin: 4px 0 14px; color: var(--ink-soft); font-size: 14px; } .gallery-loading[hidden] { display: none; } .loading-spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid #ddd8d1; border-top-color: var(--accent); border-radius: 50%; animation: gallery-spin 0.8s linear infinite; } @keyframes gallery-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } } .tag-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .tag.community { background: #ecfdf5; color: #047857; } .tag.popular { background: #eef2ff; color: #4338ca; } .tag.trending { background: #fff7ed; color: #c2410c; } .empty-state { border: 1px dashed var(--border); border-radius: var(--radius); padding: 32px 24px; text-align: center; color: var(--ink-soft); background: var(--surface); } .empty-state p { margin: 4px 0; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* =================================================================== Contribute flow =================================================================== */ .contribute-save-hint { margin: 8px 0 0; max-width: 720px; } .contribute-folder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; } .contribute-folder-row .hint { margin: 0; } .contribute-folder-row .ok { color: #047857; } .contribute-folder-row .warn { color: var(--amber); } .contribute-flow { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; max-width: 900px; } .step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); } .step-card h2 { margin: 0 0 6px; font-size: 20px; display: flex; align-items: center; gap: 10px; } .step-card h3 { margin: 20px 0 8px; font-size: 16px; } .step-card h4 { margin: 22px 0 6px; font-size: 15px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--accent); color: var(--accent-ink); font-size: 15px; } .step-hint { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; } .step-locked { opacity: 0.55; } .step-locked::after { content: "Upload an image first"; display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--amber); } .drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: var(--bg); } .drop-zone.dragging { border-color: var(--accent); background: #f6f2ff; } .drop-zone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .drop-zone input[type="file"]:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; } .drop-hint { color: var(--ink-soft); font-size: 14px; } .image-preview { margin-top: 14px; } .image-preview img { max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--border); display: block; } .field-error, .field-notice { font-size: 14px; font-weight: 600; margin: 10px 0 0; } .field-error { color: #b91c1c; } .field-notice { color: var(--amber); } .prompt-box, #grok-response { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; } #grok-response { background: var(--surface); } #grok-response:disabled { opacity: 0.6; } .instructions { margin: 0; padding-left: 22px; } .instructions li { margin-bottom: 6px; } .save-status { font-size: 14px; font-weight: 600; margin: 10px 0 0; color: var(--ink-soft); } .save-status.ok { color: #047857; } .save-status.error { color: #b91c1c; } .save-status a { color: var(--accent); } /* --- section report --- */ .section-grid { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; } .section-grid li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); } .section-grid .mark { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--ink-soft); } .section-grid li.found .mark { background: #047857; } .section-grid li.missing .mark { background: #b91c1c; } .section-grid li.missing { border-color: #fca5a5; } .section-grid li.absent { opacity: 0.65; } .parser-notes { margin: 0 0 8px; padding-left: 20px; color: var(--ink-soft); font-size: 13px; } /* --- validation --- */ .validation-panel { margin-bottom: 18px; } .v-ok { color: #047857; font-weight: 700; } .v-blocked { color: #b91c1c; font-weight: 700; } .v-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; } .v-list li { padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid; } .v-list li.v-error { background: #fef2f2; border-color: #dc2626; } .v-list li.v-warning { background: #fffbeb; border-color: #d97706; } .v-list strong { display: block; font-weight: 700; } .v-hint { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; } .v-warnings summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--amber); } .duplicate-panel { background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .duplicate-panel h3 { margin-top: 0; } .dupe-intro { font-size: 14px; margin: 0 0 8px; } .dupe-list { list-style: none; padding: 0; margin: 0; } .dupe-list > li { margin-bottom: 10px; font-size: 14px; } .dupe-list ul { margin: 4px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 13px; } .dupe-level { display: block; color: var(--amber); font-weight: 600; font-size: 13px; } /* --- editable fields --- */ .cfield { margin-bottom: 14px; } .cfield.compact { margin-bottom: 8px; } .cfield.cfield-span { flex: 1 1 100%; } .cfield-legend { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; } .structure-tag-picks { display: flex; flex-wrap: wrap; gap: 6px; } .check-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px 4px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; } .check-pill:has(input:checked) { border-color: var(--accent); background: #f3eefc; color: var(--ink); } .check-pill input { margin: 0; } .cfield label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; } .cfield .hint, .hint { font-weight: 400; color: var(--ink-soft); font-size: 13px; } .cfield input[type="text"], .cfield input[type="number"], .cfield select, .cfield textarea { width: 100%; padding: 9px 12px; font-size: 15px; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); } .cfield textarea { resize: vertical; line-height: 1.5; } .cfield-row { display: flex; gap: 12px; flex-wrap: wrap; } .cfield-row > .cfield { flex: 1; min-width: 140px; } .example-editors { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .example-editor { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg); } .ex-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .link-btn { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 8px; min-height: 32px; } .link-btn:hover { text-decoration: underline; } .unmatched { margin-top: 16px; } .unmatched summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-soft); } .unmatched-item { margin-top: 10px; } .unmatched-item pre { white-space: pre-wrap; background: var(--bg); padding: 10px; border-radius: 8px; font-size: 12px; border: 1px solid var(--border); max-height: 220px; overflow: auto; } /* --- coordinate editor --- */ .coord-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; } @media (max-width: 860px) { .coord-layout { grid-template-columns: 1fr; } } .coord-wrap { position: relative; width: 100%; user-select: none; touch-action: none; } .coord-wrap img { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: contain; } .coord-box { position: absolute; border: 2px dashed var(--accent); border-radius: 4px; background: rgba(109, 40, 217, 0.12); cursor: grab; display: flex; align-items: center; justify-content: center; overflow: hidden; } .coord-box.selected { border-style: solid; background: rgba(109, 40, 217, 0.22); box-shadow: 0 0 0 2px #fff; } .coord-box:focus-visible { outline: 3px solid #111; outline-offset: 2px; } .coord-label { position: absolute; top: -2px; left: -2px; background: var(--accent); color: #fff; font-size: var(--t-micro); font-weight: 800; padding: 2px 6px; border-radius: 4px 0 4px 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .coord-text { font-family: Impact, "Arial Black", sans-serif; color: #fff; font-size: 13px; text-transform: uppercase; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; padding: 12px 4px 2px; width: 100%; pointer-events: none; line-height: 1.1; overflow: hidden; word-break: break-word; } .coord-handle { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; background: #fff; border: 2px solid var(--accent); border-radius: 3px; cursor: nwse-resize; } .zone-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); } .zone-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; } .zone-tab { padding: 6px 12px; min-height: 34px; border-radius: 8px; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-soft); } .zone-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .coord-numbers { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; } .coord-numbers legend { font-size: 13px; font-weight: 700; padding: 0 4px; } .coord-numbers .cfield { flex: 1; min-width: 74px; margin-bottom: 0; } .checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 10px 0; min-height: 36px; } .zone-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; } /* Destructive, so it must be findable. It used to sit on the browser's default button face with a pale edge, which left the label floating; an explicit surface and a deeper red take it from 5.5:1 to about 8:1. */ .btn.danger { background: #fef4f2; color: #991b1b; border-color: #e0a3a3; } .btn.danger:hover:not(:disabled) { background: #991b1b; color: #fff5f2; border-color: #7f1d1d; } .btn.danger-fill { background: #b91c1c; color: #fff; border-color: #991b1b; } .btn.danger-fill:hover:not(:disabled) { background: #991b1b; border-color: #7f1d1d; } .btn.danger-fill:disabled { opacity: 0.45; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .contrib-preview { width: 100%; max-width: 520px; height: auto; display: block; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: #f1efec; } /* --- edit mode banner --- */ .edit-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 16px 0 0; padding: 14px 16px; background: #f3eefc; border: 1px solid #d8c9f5; border-radius: var(--radius); } .edit-banner[hidden] { display: none; } .edit-banner-title { margin: 0 0 4px; font-weight: 700; } .edit-banner-hint { margin: 0; font-size: 14px; color: var(--ink-soft); } .edit-banner .btn { flex: none; } .editor-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* --- contributed list --- */ .contributed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .contributed li { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .contributed li.is-editing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .contributed img { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; } .contributed > li > div:nth-child(2) { flex: 1; min-width: 0; } .contributed .meta { display: block; color: var(--ink-soft); font-size: 13px; } /* Why the importer flagged this template. Meta, not an error: soft ink and a hairline, per the palette — amber is reserved for fit/overflow. */ .contributed .review-reasons { display: block; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--ink-soft); font-size: 13px; line-height: 1.45; } .contributed .review-reasons span { display: block; } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .row-actions .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; } /* =================================================================== Mode choice on the home page =================================================================== */ .mode-choice { display: grid; /* min() keeps tracks from overflowing phones before the mobile media query */ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 28px 0 8px; } .mode-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--shadow); } .mode-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .mode-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28, 27, 26, 0.08); } @media (prefers-reduced-motion: reduce) { .mode-card:hover, .gallery-card:hover, .example-card:hover { transform: none; } } .mode-card strong { font-size: 19px; } .mode-tag { align-self: flex-start; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: #f3eefc; border-radius: 99px; padding: 3px 10px; } .mode-tag.alt { color: #047857; background: #ecfdf5; } .mode-desc { color: var(--ink-soft); font-size: 14px; } .mode-go { color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 4px; } /* =================================================================== Freestyle editor =================================================================== */ .fs-view { padding-top: 16px; } .fs-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .fs-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .fs-title h1 { font-size: 24px; margin: 0; } .fs-project-name { font-size: 15px; font-weight: 600; padding: 6px 10px; min-width: 200px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-family: inherit; } .fs-project-name:hover { border-color: var(--border); background: var(--surface); } .fs-status { font-size: 13px; color: var(--ink-soft); margin: 0; min-height: 18px; } .fs-status.error { color: #b91c1c; font-weight: 600; } .fs-toolbar { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; margin: 12px 0; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; position: sticky; top: 62px; z-index: 4; overflow: hidden; } .fs-toolbar-main { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; } .fs-tool-group { display: flex; gap: 6px; align-items: center; flex: none; white-space: nowrap; } .fs-tool-right { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 6px; background: var(--surface); } .fs-toolbar .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; } .fs-zoom-label { font-size: 13px; font-weight: 700; min-width: 52px; text-align: center; color: var(--ink-soft); } /* Zoom lives on the canvas as #fs-zoom-float; a toolbar copy would only crowd Export. */ .fs-toolbar .fs-tool-zoom { display: none; } /* Explicit tool modes — Select is always the way back to moving objects */ .fs-tool-modes { padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; } .fs-tool-btn.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 800; } .fs-tool-btn:disabled { opacity: 0.45; } .fs-mode-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); max-width: 220px; line-height: 1.3; } @media (max-width: 1100px) { .fs-mode-label { display: none; } } /* Crop / text actions live in the right sidebar — never over the canvas */ .fs-side-action-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #fcd34d; } .fs-side-action-bar[hidden] { display: none !important; } .fs-side-action-bar-muted { background: #f3eefc; border-color: #d8c9f5; } .fs-side-action-copy { display: flex; flex-direction: column; gap: 2px; } .fs-side-action-copy strong { font-size: 14px; } .fs-side-action-copy span { font-size: 12px; color: var(--ink-soft); line-height: 1.35; } .fs-side-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .fs-side-action-buttons .btn { flex: 1; min-height: 40px; } .fs-nudge-pad { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 140px; } .fs-nudge-pad > .btn { min-width: 44px; min-height: 36px; } .fs-nudge-mid { display: flex; gap: 4px; } .fs-view.repositioning-image #fs-canvas { cursor: grab; } .fs-view.repositioning-image #fs-canvas:active { cursor: grabbing; } .fs-view.tool-pan #fs-canvas { cursor: grab; } .fs-view.tool-pan #fs-canvas:active { cursor: grabbing; } .fs-view.cropping .fs-tool-modes { box-shadow: 0 0 0 2px #fbbf24; } .fs-crop-panel { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px; } .fs-crop-panel .fs-field-row { margin-top: 10px; } /* Text size slider (matches template editor affordance) */ .fs-size-slider-row label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 6px; } .fs-size-val { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .fs-size-slider { display: flex; align-items: center; gap: 10px; } .fs-size-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; } .fs-size-slider input[type="number"] { width: 72px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; } /* The left column carries the rail: a 72px spine plus a 280px panel. */ .fs-workspace { display: grid; grid-template-columns: 352px minmax(0, 1fr) 320px; gap: 14px; align-items: stretch; } @media (max-width: 1200px) { .fs-workspace { grid-template-columns: 304px minmax(0, 1fr) 280px; } } @media (max-width: 960px) { .fs-workspace { grid-template-columns: 1fr; } .fs-side { order: 2; } .fs-stage { order: 1; } } .fs-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .fs-drawer { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .fs-drawer > summary { font-weight: 700; font-size: 14px; cursor: pointer; min-height: 32px; display: flex; align-items: center; } .fs-hint { color: var(--ink-soft); font-size: 12px; margin: 4px 0; } .fs-empty { color: var(--ink-soft); font-size: 13px; margin: 8px 0; } .fs-stage { position: relative; min-height: 520px; height: 70vh; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #f4f2ef; } .fs-stage.drag-over { outline: 3px dashed var(--accent); outline-offset: -6px; } #fs-canvas { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; touch-action: none; } #fs-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .fs-view.cropping #fs-canvas { cursor: crosshair; } /* Desktop: side text rail is unused (properties panel already has the tools) */ .fs-text-style-rail { display: none; } .fs-text-style-rail[hidden] { display: none !important; } /* Create editor: rail only used on phones (see mobile block) */ .create-style-rail { display: none; } .create-style-rail[hidden] { display: none !important; } .preview-stage { display: block; max-width: 100%; } .preview-stage #preview { display: block; width: 100%; height: auto; } .fs-text-editor { position: absolute; z-index: 5; margin: 0; padding: 0; border: 2px solid var(--accent); background: rgba(255,255,255,0.9); color: #111; resize: none; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transform-origin: center; } /* --- layouts & library --- */ /* Starters gallery is the catalog; the leftover quick-layout list just duplicates it. */ #fs-layouts { display: none; } .fs-layouts { display: flex; flex-direction: column; gap: 6px; } .fs-layout { text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 2px; } .fs-layout:hover { border-color: var(--accent); } .fs-layout-name { font-weight: 700; font-size: 13px; } .fs-layout-desc { font-size: var(--t-micro); color: var(--ink-soft); } .fs-quick-starters { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .fs-quick-starter { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; text-align: left; } .fs-quick-starter:hover { border-color: var(--accent); } .fs-quick-starter:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .fs-quick-starter-name { font-size: 13px; font-weight: 700; } .fs-library-search { margin: 6px 0 8px; } .fs-library-search input { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 16px; background: var(--bg); color: var(--ink); } .fs-library-search input:focus-visible { outline: none; border-color: var(--accent); } .fs-library-count { margin: -4px 0 8px; font-size: var(--t-micro); font-weight: 700; color: var(--ink-soft); } .fs-library { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: min(40vh, 320px); overflow-y: auto; padding-right: 2px; } .fs-lib-item { display: flex; flex-direction: column; gap: 4px; padding: 6px; cursor: grab; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: var(--t-micro); } .fs-lib-item img { width: 100%; height: 56px; object-fit: contain; } .fs-lib-item:hover { border-color: var(--accent); } /* The left rail is ~160px wide: tighter side padding keeps New + Duplicate on one row, and wrapping (not overflow) handles anything narrower. */ .fs-project-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .fs-project-actions .btn { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; } #fs-save-state { margin: 0 0 8px; font-size: 12px; color: var(--ink-soft); } #fs-save-state[data-state="saved"] { color: #047857; } #fs-save-state[data-state="error"] { color: #b91c1c; } .editor-persist-hint { margin: -8px 0 14px; font-size: 13px; color: var(--ink-soft); } .fs-projects { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .fs-projects li { display: flex; align-items: center; gap: 4px; } .fs-projects li.current .fs-project-open { border-color: var(--accent); } .fs-project-open { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px; cursor: pointer; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-family: inherit; min-width: 0; } .fs-project-open img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; flex: none; } .fs-project-open strong { display: block; font-size: 13px; } .fs-project-open small { color: var(--ink-soft); font-size: var(--t-micro); } /* --- layers --- */ .fs-layers { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; } .fs-layer { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; background: var(--bg); } .fs-layer:hover { border-color: var(--border); } .fs-layer.selected { background: #f3eefc; border-color: var(--accent); } .fs-layer:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .fs-layer.hidden-layer { opacity: 0.55; } .fs-layer-thumb { width: 30px; height: 30px; flex: none; border-radius: 5px; overflow: hidden; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .fs-layer-thumb img { width: 100%; height: 100%; object-fit: cover; } .fs-thumb-text { font-family: Impact, sans-serif; font-size: 16px; } .fs-thumb-slot { color: var(--ink-soft); font-size: 14px; } .fs-thumb-shape { display: block; width: 18px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(28,27,26,0.18); } .fs-thumb-shape[data-shape="ellipse"] { border-radius: 999px; width: 16px; height: 16px; } .fs-thumb-shape[data-shape="line"] { height: 3px; width: 20px; border-radius: 99px; } .fs-thumb-shape[data-shape="speech"] { border-radius: 6px 6px 6px 2px; } .fs-thumb-shape[data-shape="thought"] { border-radius: 999px; } .fs-layer-body { flex: 1; min-width: 0; } .fs-layer-name { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-layer-type { font-size: var(--t-micro); color: var(--ink-soft); } .fs-layer-actions { display: flex; gap: 2px; } .fs-icon { min-width: 30px; min-height: 30px; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; line-height: 1; } .fs-icon:hover { border-color: var(--border); background: var(--surface); } .fs-icon.danger { color: #b91c1c; } .fs-layer-order { display: flex; gap: 4px; flex-wrap: wrap; } .fs-layer-order .btn { min-height: 34px; padding: 5px 10px; font-size: 13px; } /* --- inspector --- */ .fs-inspector { display: flex; flex-direction: column; gap: 10px; } .fs-selection-summary { font-weight: 700; font-size: 14px; margin: 0; } /* A
will not shrink below its content's intrinsic minimum, so a single wide row (the zoom slider, a button pair) pushed the whole group past the properties panel and everything inside it hung over the edge. min-width: 0 lets it obey the panel; the rows inside wrap instead. */ .fs-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0; min-width: 0; max-width: 100%; box-sizing: border-box; } .fs-group .fs-field-row, .fs-group .fs-size-slider { min-width: 0; max-width: 100%; } .fs-group input[type="range"] { min-width: 0; } .fs-watermark-group { border-color: #c4b5fd; background: #faf8ff; } .fs-watermark-group legend { color: #6d28d9; } .fs-watermark-group input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; } .fs-watermark-group input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--accent); touch-action: none; cursor: ew-resize; } .fs-watermark-group [data-watermark-opacity-value] { color: var(--accent); font-variant-numeric: tabular-nums; } .fs-rail-watermark-opacity { margin: 8px 0; padding: 8px; border: 1px solid #c4b5fd; border-radius: 8px; background: #faf8ff; } .fs-rail-watermark-opacity input[type="range"] { width: 100%; accent-color: var(--accent); touch-action: none; cursor: ew-resize; } .fs-rail-watermark-opacity [data-watermark-opacity-value] { color: var(--accent); font-variant-numeric: tabular-nums; } .fs-group legend { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); padding: 0 4px; } .fs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .fs-num { display: flex; flex-direction: column; gap: 2px; } .fs-num label { font-size: var(--t-micro); color: var(--ink-soft); font-weight: 600; } .fs-num input { width: 100%; padding: 6px 8px; font-size: 13px; font-family: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); } .fs-field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .fs-field-row > label:first-child { font-size: 12px; font-weight: 700; min-width: 74px; } .fs-field-row input[type="text"], .fs-field-row select, .fs-field-row textarea, .fs-field-row input[type="number"] { flex: 1; min-width: 90px; padding: 7px 9px; font-size: 13px; font-family: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); } .fs-field-row textarea { resize: vertical; } .fs-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; min-height: 32px; } .fs-color-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fs-color-pair input[type="color"] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .fs-btn-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; } .fs-toggle { min-width: 36px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; } .fs-toggle:hover { border-color: var(--accent); } .fs-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* --- shortcuts sheet --- */ .fs-shortcuts { position: fixed; inset: 0; background: rgba(20,18,16,0.45); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; } .fs-shortcuts-inner { background: var(--surface); border-radius: 14px; padding: 20px 24px; max-width: 760px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .fs-shortcuts-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .fs-shortcuts-head h2 { margin: 0; font-size: 20px; } .fs-shortcut-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .fs-shortcut-group h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } .fs-shortcut-group dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 13px; } .fs-shortcut-group dt { margin: 0; } .fs-shortcut-group dd { margin: 0; color: var(--ink-soft); } kbd { font-family: ui-monospace, Menlo, monospace; font-size: var(--t-micro); padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); white-space: nowrap; } /* --- export dialog --- */ .fs-dialog { border: none; border-radius: 14px; padding: 0; max-width: 460px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .fs-dialog::backdrop { background: rgba(20,18,16,0.45); } .fs-dialog form { padding: 22px 24px; } .fs-dialog h2 { margin: 0 0 12px; font-size: 20px; } .fs-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .fs-dialog-status { min-height: 1.3em; margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; } .fs-dialog-status.error { color: #b42318; } /* No side bleed: -4px margins made this placard 8px wider than the properties box it sits in, so its border and the Grok button hung over both edges. */ .fs-ai-image-action { align-items: flex-start; flex-direction: column; margin: 10px 0 12px; box-sizing: border-box; max-width: 100%; padding: 10px; border: 1px solid #c9c9cf; border-radius: 10px; background: linear-gradient(135deg, #fff 0%, #f6f6f8 100%); } .fs-ai-image-action .fs-hint { margin: 0; } .grok-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff !important; background: #050505 !important; border-color: #050505 !important; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,0.22); } .grok-action:hover:not(:disabled) { background: #242428 !important; border-color: #242428 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.3); transform: translateY(-1px); } .grok-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .grok-action:disabled { color: #fff !important; opacity: 0.46; box-shadow: none; } .grok-action .grok-logo { display: block; width: 21px; height: 21px; flex: none; object-fit: contain; filter: invert(1); border-radius: 2px; } .fs-ai-edit-float { position: absolute; right: 14px; bottom: 14px; z-index: 7; min-height: 46px; padding: 10px 15px; border: 1px solid #050505; border-radius: 999px; cursor: pointer; font: 800 14px/1.2 Archivo, sans-serif; } .fs-ai-edit-float[hidden] { display: none !important; } /* `hidden` must win over the layout display values above */ .fs-shortcuts[hidden], .fs-view[hidden], .view[hidden], .fs-modal[hidden] { display: none !important; } /* iOS: fixed-position children inside [hidden] views can still intercept taps. Kill pointer events on every hidden view tree, and park freestyle/create chrome when those modes are not active. */ .view[hidden], .view[hidden] * { pointer-events: none !important; } body:not(.mode-freestyle) #fs-mobilebar, body:not(.mode-freestyle) #fs-mobile-context, body:not(.mode-freestyle) #fs-shape-menu, body:not(.mode-freestyle) #fs-bg-dialog, body:not(.mode-freestyle) .fs-sheet-backdrop, body:not(.mode-freestyle) .fs-side-right { display: none !important; visibility: hidden !important; pointer-events: none !important; } body:not(.mode-create) #view-create .row-controls, body:not(.mode-create) #view-create .preview-pane { position: static !important; display: none !important; pointer-events: none !important; } /* =================================================================== Mobile / small screens — desktop rules above are unchanged at ≥761px =================================================================== */ @media (max-width: 760px) { /* --- global chrome --- */ html, body { overflow-x: hidden; overflow-x: clip; /* keeps sticky working — see the :root note */ width: 100%; max-width: 100%; } main { max-width: 100%; width: 100%; padding: 0 12px; min-width: 0; box-sizing: border-box; } .view { padding-top: 16px; padding-bottom: 28px; max-width: 100%; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; overflow-x: visible; } .site-header { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .brand { font-size: var(--t-lead); flex: 0 0 auto; white-space: nowrap; } .site-header .site-nav, .site-nav { flex: 1 1 auto; min-width: 0; max-width: 100%; gap: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; /* Keeps pills from looking like a jammed text string */ padding: 2px 0; } .site-nav::-webkit-scrollbar { display: none; } .site-header .site-nav a, .site-nav a { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-weight: 700; } .site-header .site-nav a[aria-current="page"], .site-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .nav-full { display: none !important; } .nav-short { display: inline !important; } .btn-full { display: none; } .btn-short { display: inline; } .fs-desktop-only { display: none !important; } .site-footer { margin-top: 28px; padding: 16px 12px; font-size: 13px; } h1 { font-size: clamp(22px, 6.2vw, 26px); overflow-wrap: break-word; word-break: normal; hyphens: manual; } h2 { font-size: 20px; margin: 28px 0 10px; overflow-wrap: break-word; } .lede, .prose p, .mode-desc, .situation, .hero p { font-size: 15px; overflow-wrap: break-word; word-wrap: break-word; max-width: 100%; } .hero { padding: 20px 0 4px; max-width: 100%; min-width: 0; } .mode-choice { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 20px 0; max-width: 100%; } .mode-card { padding: 16px; max-width: 100%; min-width: 0; box-sizing: border-box; } .mode-card .mode-desc { overflow-wrap: break-word; } .cta-row { gap: 8px; max-width: 100%; } .cta-row .btn { flex: 1 1 auto; min-width: min(100%, 140px); } .card, .step-card, .gallery-card, .compare-card { max-width: 100%; min-width: 0; box-sizing: border-box; } /* Never let auto-fit minmax() force a wider track than the phone */ .mode-choice, .concept-cards, .compare, .examples, .gallery { grid-template-columns: minmax(0, 1fr) !important; } /* 16px inputs avoid iOS focus-zoom */ input[type="text"], input[type="search"], input[type="number"], input[type="email"], select, textarea { font-size: 16px !important; } /* --- template gallery --- */ .gallery { grid-template-columns: 1fr; gap: 12px; margin: 16px 0; } .gallery-card { transform: none; } .gallery-card:hover { transform: none; } .gallery-card img { height: 168px; } .gallery-card .card-body { padding: 10px 12px 12px; } .gallery-card .situation { -webkit-line-clamp: 2; font-size: 13px; } .gallery-controls { margin: 12px 0 4px; } .search-field input { max-width: none; } .filter-row { gap: 8px; } .chip-group { flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-inline: -2px; } .chip-group::-webkit-scrollbar { display: none; } .chip-label { position: sticky; left: 0; background: var(--bg); padding-right: 4px; z-index: 1; } .chip { flex: none; } /* --- template create editor --- */ .editor-header { flex-direction: column; align-items: stretch; gap: 8px; } .editor-header h1 { font-size: 20px; } .editor-header-actions { display: flex; flex-wrap: nowrap; gap: 8px; } .editor-header-actions .btn { flex: 0 1 auto; min-width: 0; padding-inline: 12px; font-size: 14px; } /* Title and the way back share one row; the title takes the space. */ .editor-header { flex-direction: row; align-items: center; } .editor-header h1 { flex: 1 1 auto; min-width: 0; } .editor-header-actions { flex: 0 0 auto; } .editor { gap: 16px; } #preview { max-height: min(48vh, 360px); width: 100%; object-fit: contain; } .preview-hint, .text-summary { font-size: 12px; } .style-tools { grid-template-columns: 1fr; } .examples { grid-template-columns: 1fr; } .examples-block { margin-top: 28px; } .row-controls { flex-direction: column; gap: 8px; } .row-controls .btn { width: 100%; } /* --- contribute --- */ .contribute-flow { max-width: 100%; gap: 14px; } .step-card { padding: 14px; } .step-card h2 { font-size: 16px; line-height: 1.35; } .prompt-box, #grok-response, #grok-prompt-text { width: 100%; max-width: 100%; font-size: 16px; } .coord-layout { grid-template-columns: 1fr; gap: 10px; } .coord-wrap { max-height: min(50dvh, 360px); } .coord-wrap img { max-height: min(50dvh, 360px); object-fit: contain; } .image-preview img { max-width: 100%; height: auto; max-height: 40dvh; } .vs-row, .contributed li { flex-direction: column; align-items: stretch; } .contributed .row-actions { width: 100%; } .contributed .row-actions .btn { flex: 1; } .instructions { padding-left: 1.2em; font-size: 14px; } /* --- freestyle canvas --- */ .fs-view { padding-top: 8px; padding-bottom: 24px; } .fs-header { flex-direction: column; align-items: stretch; gap: 6px; } .fs-title { flex-direction: column; align-items: stretch; gap: 6px; } .fs-title h1 { font-size: 20px; } .fs-project-name { min-width: 0; width: 100%; border-color: var(--border); background: var(--surface); } .fs-status { font-size: 12px; min-height: 16px; } /* Phone chrome is the bottom bar + More sheet — not a second tool strip. */ .fs-view .fs-toolbar { display: none !important; } /* Single column, canvas first, then properties, then sources — no sticky dual-scroll */ .fs-workspace { display: flex; flex-direction: column; gap: 10px; } .fs-stage { order: 1; height: min(48svh, 420px); min-height: 260px; max-height: 48svh; width: 100%; border-radius: 10px; } .fs-side-right { order: 2; /* Not sticky on phones: it becomes the slide-up properties sheet below */ position: static; background: transparent; padding: 0; } .fs-side-left { order: 3; } .fs-side { gap: 8px; } .fs-drawer { padding: 8px 10px; } .fs-drawer > summary { min-height: 44px; font-size: 15px; } /* Only the open drawer content scrolls if tall — not a second full-page trap */ .fs-inspector { max-height: none; } .fs-layers { max-height: 200px; } .fs-icon { min-width: 40px; min-height: 40px; } .fs-toggle { min-width: 40px; min-height: 40px; } .fs-grid-2 { grid-template-columns: 1fr 1fr; } .fs-field-row { align-items: stretch; } .fs-field-row > label:first-child { min-width: 0; width: 100%; } .fs-side-action-bar { position: sticky; top: 108px; z-index: 3; } .fs-project-actions { display: flex; flex-wrap: wrap; gap: 6px; } .fs-project-actions .btn { flex: 1 1 auto; min-width: 40%; } .fs-layouts .fs-layout { width: 100%; } .fs-lib-item { min-height: 44px; } /* Starter modals: bottom sheet, single column, one scroll */ .fs-modal { padding: 0; align-items: flex-end; } .fs-modal-card, .fs-modal-wide { width: 100%; max-width: 100%; max-height: min(92dvh, 100%); border-radius: 16px 16px 0 0; padding: 14px 14px 20px; } .fs-modal-head h2 { font-size: 18px; } .fs-starter-split { grid-template-columns: 1fr; gap: 12px; } .fs-starter-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .fs-starter-detail { position: static; } .fs-starter-card { padding: 8px; } .fs-starter-name { font-size: 12px; } .fs-starter-desc { font-size: var(--t-micro); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fs-start-choice { min-height: 44px; } .fs-dialog { width: 100%; max-width: 100%; margin: 0; border-radius: 16px 16px 0 0; } .fs-dialog form { padding: 16px; } .fs-dialog-actions { flex-wrap: wrap; } .fs-dialog-actions .btn { flex: 1; } .fs-shortcuts { padding: 0; align-items: flex-end; } .fs-shortcuts-inner { max-height: 90dvh; border-radius: 16px 16px 0 0; width: 100%; max-width: 100%; } .fs-shortcut-body { grid-template-columns: 1fr; } /* concept / compare cards */ .concept-cards { grid-template-columns: 1fr; } .compare { grid-template-columns: 1fr; } } /* Very small phones */ @media (max-width: 380px) { .fs-starter-grid { grid-template-columns: 1fr; } .site-nav a { padding: 8px 8px; font-size: 12px; } } /* Safe area for notched phones */ @supports (padding: env(safe-area-inset-bottom)) { @media (max-width: 760px) { .site-header { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); } main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .fs-modal-card, .fs-dialog, .fs-shortcuts-inner { padding-bottom: max(20px, env(safe-area-inset-bottom)); } } } /* =================================================================== Canvas Starters =================================================================== */ .fs-full { width: 100%; justify-content: center; margin-bottom: 10px; } .fs-starter-education { background: #f3eefc; border: 1px solid #d8c9f5; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; } .fs-edu-for { margin: 0 0 6px; color: var(--ink-soft); } .fs-edu-for strong { color: var(--ink); font-weight: 700; } .fs-edu-body { margin: 0; color: var(--ink-soft); } #fs-starter-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: min(520px, 100%); } #fs-starter-suggestions[hidden] { display: none !important; } .fs-suggest-label { font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-right: 2px; } .fs-suggest { min-height: 36px; padding: 6px 10px; font-size: 13px; } /* Now a . The UA gives it border, padding, background, a centred margin and a width cap — all reset here so the full-bleed overlay reads exactly as it did before, with ::backdrop supplying the dim the element's own background used to paint. */ .fs-modal { position: fixed; inset: 0; z-index: 40; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; border: none; padding: 16px; background: transparent; color: inherit; align-items: center; justify-content: center; } .fs-modal[open] { display: flex; } .fs-modal:not([open]) { display: none; } .fs-modal::backdrop { background: rgba(20, 18, 16, 0.5); } .fs-modal-card { background: var(--surface); border-radius: 14px; width: min(560px, 100%); max-height: min(90vh, 900px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: 20px 22px; } .fs-modal-wide { width: min(1080px, 100%); } #fs-starter-gallery .fs-modal-wide { display: flex; flex-direction: column; } #fs-starter-gallery .fs-starter-split { flex: 1; min-height: 0; } .fs-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; } .fs-modal-head h2 { margin: 0; font-size: 22px; } .fs-start-choices { display: flex; flex-direction: column; gap: 10px; } .fs-start-choice { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; font-family: inherit; color: inherit; } .fs-start-choice:hover, .fs-start-choice:focus-visible { border-color: var(--accent); outline: none; } .fs-start-choice strong { font-size: 16px; } .fs-start-choice span { font-size: 14px; color: var(--ink-soft); } .fs-starter-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; } .fs-starter-filter-selects { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .fs-starter-filters input[type="search"], .fs-starter-filters select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg); } .fs-starter-filters input[type="search"] { flex: 1; min-width: 180px; } .fs-starter-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft); } .fs-starter-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr); gap: 16px; } .fs-starter-back { min-height: 40px; padding: 8px 10px; margin: 0 0 10px; } .fs-modal-head .fs-starter-back { margin: 0; flex-shrink: 0; } .fs-starter-detail .fs-starter-back { display: none; } .fs-starter-use-btn { width: 100%; min-height: 44px; } @media (max-width: 800px) { .fs-starter-split { grid-template-columns: 1fr; } #fs-starter-gallery.is-list .fs-modal-wide { height: min(92dvh, 100%); max-height: min(92dvh, 100%); overflow: hidden; padding-bottom: max(12px, env(safe-area-inset-bottom)); } #fs-starter-gallery.is-list .fs-modal-head { margin-bottom: 10px; flex: 0 0 auto; } #fs-starter-gallery.is-list .fs-starter-filters { flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-bottom: 10px; flex: 0 0 auto; } #fs-starter-gallery.is-list .fs-starter-filters input[type="search"] { flex: 1 1 8rem; min-width: 7rem; width: auto; } #fs-starter-gallery.is-list .fs-starter-filter-selects { display: flex; flex-wrap: nowrap; flex: 0 1 auto; align-items: stretch; gap: 6px; min-width: 0; max-width: none; } #fs-starter-gallery.is-list .fs-starter-filter-selects label { flex: 0 0 4.5rem; width: 4.5rem; min-width: 0; gap: 2px; justify-content: flex-end; } #fs-starter-gallery.is-list .fs-starter-filter-name { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: hidden; clip: auto; clip-path: none; white-space: nowrap; border: 0; font-size: var(--t-micro); font-weight: 800; line-height: 1.15; letter-spacing: 0.01em; color: var(--ink-soft); text-overflow: ellipsis; } #fs-starter-gallery.is-list .fs-starter-filters select { width: 100%; min-width: 0; max-width: none; min-height: 36px; padding: 6px 16px 6px 6px; font-size: 13px !important; line-height: 1.2; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--bg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 5px center; background-size: 10px 7px; text-overflow: ellipsis; } @media (max-width: 360px) { #fs-starter-gallery.is-list .fs-starter-filters input[type="search"] { min-width: 6.25rem; } #fs-starter-gallery.is-list .fs-starter-filter-selects { gap: 4px; } #fs-starter-gallery.is-list .fs-starter-filter-selects label { flex-basis: 3.7rem; width: 3.7rem; } #fs-starter-gallery.is-list .fs-starter-filter-name[data-short] { font-size: 0; line-height: 0; } #fs-starter-gallery.is-list .fs-starter-filter-name[data-short]::after { content: attr(data-short); font-size: var(--t-micro); font-weight: 800; line-height: 1.15; letter-spacing: 0.01em; color: var(--ink-soft); } } #fs-starter-gallery.is-list .fs-starter-detail { display: none; } #fs-starter-gallery.is-list .fs-starter-split { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #fs-starter-gallery.is-list .fs-starter-grid { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } #fs-starter-gallery.is-detail .fs-starter-filters { display: none; } #fs-starter-gallery.is-detail .fs-starter-grid { display: none; } #fs-starter-gallery.is-detail .fs-starter-detail { display: block; position: static; max-height: min(78dvh, calc(92dvh - 72px)); overflow-y: auto; border: none; padding: 0; background: transparent; } #fs-starter-gallery.is-detail .fs-modal-head { gap: 8px; } #fs-starter-gallery.is-detail #fs-gallery-title { font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .fs-starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px; } .fs-starter-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; font-family: inherit; color: inherit; } .fs-starter-card:hover, .fs-starter-card.selected { border-color: var(--accent); } .fs-starter-card.selected { box-shadow: 0 0 0 1px var(--accent); background: #faf8ff; } .fs-starter-thumb { width: 100%; aspect-ratio: 1.2; object-fit: cover; border-radius: 8px; background: #f1efec; } .fs-starter-meta { display: flex; flex-direction: column; gap: 4px; } .fs-starter-name { font-weight: 800; font-size: 14px; } .fs-starter-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.35; } .fs-starter-tags { display: flex; flex-wrap: wrap; gap: 4px; } .fs-starter-tags .tag { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #f3eefc; color: var(--accent); border-radius: 99px; padding: 2px 8px; } .fs-starter-use { font-size: 12px; font-weight: 600; color: #047857; } .fs-starter-detail { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--bg); position: sticky; top: 0; align-self: start; } .fs-starter-detail-thumb { width: 100%; max-height: 160px; object-fit: contain; background: #fff; border-radius: 8px; margin-bottom: 10px; } .fs-starter-detail h3 { margin: 0 0 6px; font-size: 18px; } .fs-starter-detail p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); } .fs-starter-detail .fs-edu { color: var(--ink); } .fs-starter-facts { margin: 10px 0 14px; padding-left: 18px; font-size: 13px; color: var(--ink-soft); } .fs-starter-facts strong { color: var(--ink); } .fs-wizard-body label { display: block; margin: 10px 0; font-weight: 600; } .fs-wizard-body input[type="text"], .fs-wizard-body input[type="number"], .fs-wizard-body input[type="file"] { display: block; width: 100%; margin-top: 4px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; } .fs-wizard-body input[type="color"] { width: 64px; height: 40px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); } @media (max-width: 760px) { .fs-modal { padding: 8px; align-items: flex-end; } .fs-modal-card { max-height: 92vh; border-radius: 14px 14px 0 0; } #fs-starter-gallery.fs-modal { padding: 0; } } /* =================================================================== Freestyle · on-canvas zoom cluster (all sizes) =================================================================== */ .fs-history-float { position: absolute; top: 10px; left: 10px; z-index: 8; pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255,255,255,0.94); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 2px 10px rgba(28,27,26,0.14); backdrop-filter: blur(6px); } .fs-history-float button { min-width: 34px; min-height: 34px; padding: 0 10px; border: none; background: transparent; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1; } .fs-history-float button:hover:not(:disabled) { background: var(--bg); } .fs-history-float button:disabled { opacity: 0.38; cursor: default; } .fs-history-float button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .fs-history-float .fs-clear-float-btn { color: #fff; background: #b91c1c; margin-left: 4px; } .fs-history-float .fs-clear-float-btn:hover:not(:disabled) { background: #991b1b; } .fs-zoom-float { position: absolute; top: 10px; right: 10px; z-index: 8; pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255,255,255,0.94); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 2px 10px rgba(28,27,26,0.14); backdrop-filter: blur(6px); } .fs-zoom-float button { min-width: 34px; min-height: 34px; padding: 0 9px; border: none; background: transparent; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1; } .fs-zoom-float button:hover { background: var(--bg); } .fs-zoom-float button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .fs-zoom-float .fs-zoom-fit { font-size: 13px; } .fs-zoom-float [data-mb-zoom-label] { min-width: 46px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* Keep the two floating tool groups on one row on narrow canvases without letting their labels and touch targets collide. */ .fs-stage { container-type: inline-size; } @container (max-width: 520px) { .fs-stage .fs-history-float, .fs-stage .fs-zoom-float { top: 8px; gap: 1px; padding: 2px; } .fs-stage .fs-history-float { left: 8px; } .fs-stage .fs-zoom-float { right: 8px; } .fs-stage .fs-history-float button, .fs-stage .fs-zoom-float button { min-width: 30px; min-height: 36px; padding-inline: 6px; font-size: 12px; } .fs-stage .fs-history-float .fs-clear-float-btn { margin-left: 2px; } .fs-stage .fs-zoom-float button { font-size: 14px; } .fs-stage .fs-zoom-float .fs-zoom-fit { font-size: 12px; } .fs-stage .fs-zoom-float [data-mb-zoom-label] { min-width: 34px; font-size: 11px; } .fs-stage .fs-history-float button, .fs-stage .fs-zoom-float button { padding-inline: 4px; } /* The word labels are what pushed each cluster past its icons. */ .fs-stage .fs-history-float .fs-float-label { display: none; } } /* =================================================================== Freestyle · mobile action bar The controls for whatever you are doing, pinned above the fold. =================================================================== */ .fs-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,0.97); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(28,27,26,0.12); backdrop-filter: blur(8px); } .fs-mobilebar[hidden] { display: none !important; } .fs-mb-title { flex: none; max-width: 30%; font-size: 12px; font-weight: 700; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-mb-actions { flex: 1; display: flex; gap: 6px; align-items: center; justify-content: space-between; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fs-mb-actions::-webkit-scrollbar { display: none; } .fs-mb-btn { flex: 0 1 auto; min-height: 46px; padding: 8px 12px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--ink); } .fs-mb-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .fs-mb-btn.danger { color: #b91c1c; border-color: #fca5a5; } /* Icon-only bar buttons — the reposition arrows and the eraser's plus/minus. A default button is inline-block with text padding, which sits a 20px glyph off its own centre; these square up and centre so a row of four arrows reads as one control. */ .fs-mb-btn.icon-only { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding-inline: 10px; } /* The four arrows are one cluster and Done is the way out of the mode, so it sits at the far end rather than trailing them like a fifth arrow. */ .fs-mobilebar[data-mode="reposition"] .fs-mb-btn[data-mb="reposition-done"] { margin-left: auto; } /* Export is the payoff: the reason the editor exists, and the last thing you do. It sat in the same grey as Shapes. This is the accent fill plus a real lifted shadow — offset and blurred, tinted from the accent — so it reads as raised rather than as a flat glow stuck behind a flat button. Only one button in the bar carries it at a time: while the canvas is empty the emphasis is on Image instead, because there is nothing to export yet. */ .fs-mb-btn.go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; box-shadow: 0 2px 6px rgba(109, 40, 217, 0.34), 0 6px 18px rgba(109, 40, 217, 0.26); } .fs-mb-btn.go .ms-icon { opacity: 0.95; } .fs-mb-btn.go:active { box-shadow: 0 1px 3px rgba(109, 40, 217, 0.34); } @media (prefers-reduced-motion: reduce) { .fs-mb-btn.go { transition: none; } } .fs-mb-btn:active { transform: scale(0.97); } .fs-mb-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .fs-shape-menu { position: fixed; z-index: 32; display: flex; flex-direction: column; gap: 4px; min-width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(28, 27, 26, 0.18); } .fs-shape-menu[hidden] { display: none !important; } .fs-shape-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .fs-shape-menu button:hover, .fs-shape-menu button:focus-visible { background: var(--bg); } .fs-mc-color { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; } .fs-mc-color input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } @media (max-width: 820px) { .fs-shape-menu { left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); top: auto; min-width: 0; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 16px 16px 0 0; padding: 10px; } .fs-shape-menu::-webkit-scrollbar { display: none; } .fs-shape-menu button { flex: none; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .fs-mb-btn:active { transform: none; } } @media (max-width: 760px) { .fs-mobilebar { display: flex; } /* Leave room so the bar never covers the canvas or panels */ .fs-view.has-mobilebar { padding-bottom: 84px; } /* Properties + layers become a slide-up sheet reached from "More" */ .fs-view .fs-side-right { position: fixed; left: 0; right: 0; bottom: 0; z-index: 29; max-height: 68vh; overflow-y: auto; margin: 0; padding: 12px 12px calc(80px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(28,27,26,0.22); transform: translateY(102%); transition: transform 180ms ease-out; visibility: hidden; } .fs-view .fs-side-right.is-open { transform: translateY(0); visibility: visible; } @media (prefers-reduced-motion: reduce) { .fs-view .fs-side-right { transition: none; } } .fs-view .fs-side-right::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: var(--border); } .fs-history-float { top: 8px; left: 8px; } .fs-history-float button { min-width: 40px; min-height: 40px; } .fs-zoom-float { top: 8px; right: 8px; } .fs-zoom-float button { min-width: 40px; min-height: 40px; } } /* =================================================================== Freestyle · phone layout refinements Actions live in the bottom bar and the sheet, so the top chrome can shrink back to what is genuinely needed while editing. =================================================================== */ @media (max-width: 760px) { /* The nav already says "Canvas"; the big title just costs canvas height. Hide it visually but keep it in the accessibility tree — display:none left the mobile canvas editor with no heading and no document outline at all. */ .fs-view .fs-header h1 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .fs-view .fs-header { flex-direction: row; gap: 8px; margin-bottom: 4px; align-items: center; } .fs-view .fs-title { flex: 1; min-width: 0; gap: 8px; } .fs-view .fs-project-name { width: 100%; min-width: 0; font-size: 15px; font-weight: 700; min-height: 36px; padding: 6px 10px; border-color: transparent; background: transparent; } .fs-view .fs-project-name:hover, .fs-view .fs-project-name:focus { border-color: var(--border); background: var(--surface); } .fs-view .fs-status { flex: none; max-width: 42%; text-align: right; } .fs-view .fs-status:not(.error):empty { display: none; } /* First-run chooser / bg-remove: just the sheet over the canvas. All of these overlays are native s — they use [open], not [hidden]. :not([hidden]) matched every closed dialog in the view and hid the bottom bar, zoom, undo, and text/image strips on every phone. */ .fs-view:has(.fs-modal[open]) .fs-header { display: none; } .fs-view:has(.fs-modal[open]) .fs-mobilebar, .fs-view:has(.fs-modal[open]) .fs-mobile-context, .fs-view:has(.fs-modal[open]) .fs-history-float, .fs-view:has(.fs-modal[open]) .fs-zoom-float { visibility: hidden; pointer-events: none; } .fs-view .fs-toolbar { display: none !important; } /* Sheet header — icon + caption grid so labels never collapse to a letter */ .fs-view .fs-sheet-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .fs-sheet-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fs-sheet-kicker { margin: 0; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .fs-sheet-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; } .fs-sheet-actions::-webkit-scrollbar { display: none; } .fs-sheet-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; min-width: 0; padding: 8px 4px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fs-sheet-tool-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; } .fs-sheet-tool-icon svg { display: block; } .fs-sheet-tool-label { font-size: var(--t-micro); font-weight: 700; line-height: 1.15; letter-spacing: 0; white-space: nowrap; } .fs-sheet-tool:active { transform: scale(0.97); } .fs-sheet-tool.danger { color: #b91c1c; border-color: #fca5a5; } .fs-view .fs-sheet-head .fs-mb-btn { min-height: 42px; padding: 6px 12px; font-size: 13px; flex: none; } .fs-view .fs-sheet-head .fs-sheet-tool.is-active, .fs-view .fs-sheet-head .fs-sheet-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Dim the canvas behind an open sheet so focus is obvious */ .fs-view.sheet-open .fs-stage::after { content: ""; position: absolute; inset: 0; background: rgba(20,18,16,0.28); pointer-events: none; border-radius: inherit; } } /* The sheet header is a phone affordance only */ .fs-sheet-head { display: none; } @media (max-width: 760px) { /* Toolbar is gone; the stage fills whatever the header + bottom bar leave. */ .fs-view .fs-stage { height: auto !important; min-height: 0 !important; max-height: none !important; } } @media (max-width: 760px) { /* Compact bar so four actions fit a 360px screen without scrolling */ .fs-mobilebar { gap: 6px; padding-left: 8px; padding-right: 8px; } .fs-mb-btn { font-size: 13px; padding: 8px 10px; } /* The title is useful while cropping; otherwise the buttons need the room */ .fs-mobilebar:not([data-mode="crop"]):not([data-mode="text"]) .fs-mb-title { display: none; } /* Project name should fill the row, not float in the middle */ .fs-view .fs-title { justify-content: flex-start; flex-wrap: nowrap; } .fs-view .fs-project-name { flex: 1; } } /* =================================================================== Touch-target floor on phones (WCAG 2.5.8 comfortably exceeded) =================================================================== */ @media (max-width: 760px) { .chip, .zone-tab, .fs-toggle, .fs-icon, .filter-row button, .fs-layer-order .btn, .row-actions .btn { min-height: 44px; } .chip { padding: 8px 16px; } /* Inspector fields are thumb-sized now that they live in the sheet */ .fs-num input, .fs-field-row input, .fs-field-row select, .fs-view .fs-project-name { min-height: 44px; } .fs-num input { padding: 8px 10px; } .fs-color-pair input[type="color"] { width: 52px; height: 44px; } /* Checkboxes get a bigger hit area without changing their look */ .fs-check { min-height: 44px; } .fs-check input[type="checkbox"] { width: 20px; height: 20px; } } /* =================================================================== Template creator on phones Downloading was ~2500px down the page, past every caption and style control. The primary action now stays on screen, and the preview stays visible so you can see what you are typing. =================================================================== */ /* The mobile create view — preview pane, pinned action bar, caption list — is owned entirely by editor-workspace.css. It used to be described here too, at a 760px breakpoint that the other file's 820px block silently overrode, so edits made here appeared to do nothing. What remains below is touch-target sizing, which is not create-view layout. */ @media (max-width: 760px) { .zone-tools .tool-btn, .style-format .tool-btn, .style-tools .tool-btn { min-width: 44px; min-height: 44px; } .style-tools input[type="color"], .color-pair input[type="color"] { width: 52px; height: 44px; } .zone-tools input[type="range"] { min-height: 44px; } } @media (max-width: 760px) { /* Comfortable checkbox hit areas inside their labels */ .bg-toggle input[type="checkbox"], .style-tools input[type="checkbox"], .responsible-check input[type="checkbox"] { width: 20px; height: 20px; } .bg-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; } } /* =================================================================== Header nav on phones With justify-content:flex-end an over-wide flex row overflows to the LEFT, sliding items under the brand where they cannot be reached or scrolled to. Start-aligned + tighter type keeps all four labels visible. =================================================================== */ /* Narrow phones: keep pill tabs; allow nav to scroll rather than crushing them */ @media (max-width: 430px) { .brand { font-size: 15px; letter-spacing: -0.02em; } .site-header { padding: 8px 8px; gap: 6px; } .site-header .site-nav, .site-nav { gap: 5px; } .site-header .site-nav a, .site-nav a { min-height: 34px; padding: 6px 10px; font-size: var(--t-micro); } } @media (max-width: 760px) { /* Disclosure triangles are tap targets too */ .guidance summary, .responsible-check summary, .unmatched summary, .v-warnings summary, .style-more > summary { min-height: 44px; display: flex; align-items: center; } } /* =================================================================== Phone text editing The canvas overlay inherits the zoom level, so at 25% zoom the field is ~10px tall — unreadable and impossible to place a caret in. On phones the field docks above the action bar at a comfortable size and the canvas updates live above it. =================================================================== */ /* The dock carries its own Done, so the action bar steps aside while it is open — one obvious way to finish, and ~60px more canvas. */ .fs-view.text-docked .fs-mobilebar { display: none !important; } /* Desktop: a panel resting inside the canvas, so the artwork stays in view. Phones override this to a viewport-fixed bar below. */ .fs-textdock { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 31; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(28, 27, 26, 0.2); } .fs-textdock[hidden] { display: none !important; } .fs-textdock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fs-textdock-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } .fs-textdock-field { display: flex; } .fs-text-editor.is-docked { position: static; width: 100%; min-height: 68px; /* 16px keeps iOS from zooming the page when the field takes focus */ font: 400 16px/1.4 var(--font-body); color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; resize: none; box-shadow: none; transform: none; text-transform: none; } .fs-text-editor.is-docked:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .fs-textdock[hidden] { display: none !important; } /* Phones: pin to the viewport so the on-screen keyboard cannot bury it */ @media (max-width: 760px) { .fs-textdock { position: fixed; left: 0; right: 0; bottom: 0; border: none; border-top: 1px solid var(--border); border-radius: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(28, 27, 26, 0.16); } } /* =================================================================== Mobile UX pass — single scroll path, no sideways overflow (loaded last so these rules win over earlier freestyle mobile rules) =================================================================== */ @media (max-width: 760px) { /* --- hard stop on horizontal page scroll (without mid-line text clipping) --- */ html, body { overflow-x: hidden; overflow-x: clip; /* keeps sticky working — see the :root note */ width: 100%; max-width: 100%; } main, .view, .fs-view, .fs-workspace, .fs-toolbar, .fs-side, .editor, .contribute-flow, .step-card, .gallery, .hero, .prose, .mode-choice, .mode-card { max-width: 100%; min-width: 0; } img, video, svg { max-width: 100%; height: auto; } /* Canvas keeps its own height; gallery/library set explicit image sizes */ .gallery-card img { height: 200px; width: 100%; max-width: 100%; object-fit: contain; display: block; } .fs-lib-item img { height: 56px; width: 100%; max-width: 100%; object-fit: contain; display: block; } .cfield-row > .cfield { min-width: 0; } .fs-project-name { min-width: 0 !important; } .fs-starter-filters input[type="search"] { min-width: 0; } /* --- freestyle becomes an app shell, not a long multi-panel page --- */ body.mode-freestyle .site-footer { display: none; } body.mode-freestyle main { padding-left: 8px; padding-right: 8px; padding-bottom: 0; max-width: 100%; width: 100%; } /* svh, not dvh. dvh tracks the viewport as browser chrome expands and retracts, and the stage inside this column is flex:1 — so the canvas is sized by it. In an in-app browser (X, Instagram) that chrome is in motion, and because this column's own height decides whether the page scrolls at all, dvh here feeds back into itself and oscillates: the canvas resizes every frame, which wipes it and re-centres the view under your finger. svh is the viewport with the chrome showing, so it holds still. */ .fs-view { display: flex; flex-direction: column; min-height: calc(100svh - 52px); padding-top: 4px; padding-bottom: 0; max-width: 100%; width: 100%; min-width: 0; overflow-x: hidden; } .fs-view.has-mobilebar { /* room for fixed bar (+ optional context strip) */ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .fs-view.has-mobilebar.has-mobile-context { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } .fs-view .fs-header { flex: none; margin-bottom: 4px; gap: 6px; } .fs-view .fs-status { max-width: 38%; font-size: var(--t-micro); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-view .fs-toolbar { display: none !important; } .fs-workspace { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; width: 100%; max-width: 100%; } /* Canvas claims the remaining viewport — no competing panels under it */ .fs-stage { order: 1; flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 10px; } /* Left rail is folded into the sheet via JS — never a second page section */ .fs-view .fs-side-left { display: none !important; } /* Desktop side action bars are redundant with the fixed mobile bar */ .fs-view .fs-side-action-bar { display: none !important; } /* Properties + layers (+ folded sources) = one slide-up sheet */ .fs-view .fs-side-right { position: fixed; left: 0; right: 0; bottom: 0; z-index: 29; order: unset; width: 100%; max-width: 100%; max-height: min(72dvh, 640px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 10px 12px calc(88px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(28, 27, 26, 0.22); transform: translateY(110%); transition: transform 180ms ease-out, visibility 180ms; visibility: hidden; pointer-events: none; } .fs-view .fs-side-right.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; } .fs-view .fs-side-right::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: var(--border); } .fs-sheet-backdrop { position: fixed; inset: 0; z-index: 28; border: 0; padding: 0; margin: 0; background: rgba(20, 18, 16, 0.35); cursor: pointer; } .fs-sheet-backdrop[hidden] { display: none !important; } .fs-mobile-sources { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .fs-mobile-sources .fs-drawer > summary { min-height: 44px; } /* Inspector fields must not force horizontal scroll */ .fs-field-row { flex-wrap: wrap; max-width: 100%; } .fs-field-row > label:first-child { min-width: 0; width: 100%; } .fs-field-row input[type="text"], .fs-field-row select, .fs-field-row textarea, .fs-field-row input[type="number"] { min-width: 0; width: 100%; flex: 1 1 100%; } .fs-grid-2 { grid-template-columns: 1fr 1fr; max-width: 100%; } .fs-nudge-pad { max-width: 100%; } .fs-layers { max-height: 180px; } } /* Fixed bottom chrome: action bar + optional image-tool context strip */ .fs-mobile-context { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: none; padding: 8px 10px; background: rgba(255, 251, 235, 0.98); border-top: 1px solid #fcd34d; box-shadow: 0 -4px 16px rgba(28, 27, 26, 0.1); backdrop-filter: blur(8px); max-width: 100%; width: 100%; box-sizing: border-box; overflow-x: hidden; } .fs-mobile-context[hidden] { display: none !important; } .fs-mobile-context[data-mode="image"], .fs-mobile-context[data-mode="shape"] { background: rgba(255, 255, 255, 0.97); border-top-color: var(--border); padding: 8px 0; } .fs-mc-tools { display: flex; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 10px; max-width: 100%; box-sizing: border-box; } .fs-mc-tools::-webkit-scrollbar { display: none; } .fs-mc-tools > * { flex: none; } .fs-mc-tools .fs-mb-btn, .fs-mc-tools .fs-mc-tool { flex: none; min-width: 44px; min-height: 44px; max-width: none; padding: 6px 10px; overflow: visible; } /* Stays reachable while the rest of the row scrolls under it. The sticky offset is measured from the row's own 10px padding edge, so it must be 0: any inset shifts the button off its slot and over the next control, because sticky never reserves the space it moves into. */ .fs-mc-tools .fs-grok-mobile-cta { position: sticky; left: 0; z-index: 2; min-width: max-content; border-radius: 999px; padding-inline: 13px; } .fs-mc-tools .fs-mc-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .fs-mc-tools .fs-mc-tool.is-active, .fs-mc-tools .fs-mc-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .fs-mc-tool-label { white-space: nowrap; font-weight: 700; } .fs-mc-sep { flex: none; width: 1px; align-self: stretch; min-height: 28px; margin: 4px 2px; background: var(--border); } .fs-mc-tools .fs-mc-label { margin: 0 2px 0 4px; } .fs-mc-tools .fs-mc-zoom-inline { flex: none; flex-wrap: nowrap; min-width: 240px; } .fs-mc-hint { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.35; } .fs-mc-hint strong { color: var(--ink); } .fs-mc-zoom { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; } .fs-mc-label { flex: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--amber); } .fs-mc-hard { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; } .fs-mc-hard input { width: 18px; height: 18px; accent-color: var(--accent); } .fs-mc-zoom input[type="range"] { flex: 1 1 auto; min-width: 0; height: 36px; accent-color: var(--accent); } .fs-mc-pct { flex: none; min-width: 40px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); text-align: right; } .fs-mc-icon { flex: none !important; min-width: 40px !important; padding-left: 8px !important; padding-right: 8px !important; } .fs-mc-zoom .fs-mb-btn { min-height: 40px; padding: 6px 10px; font-size: 13px; } @media (max-width: 760px) { .fs-ai-edit-float { display: none !important; } .fs-mobile-context:not([hidden]) { display: block; } .fs-mc-tools { display: flex; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 10px; max-width: 100%; box-sizing: border-box; } .fs-mc-tools::-webkit-scrollbar { display: none; } .fs-mc-tools > * { flex: none; } .fs-mc-tools .fs-mb-btn, .fs-mc-tools .fs-mc-tool { flex: none; min-width: 44px; min-height: 44px; max-width: none; padding: 6px 10px; overflow: visible; } .fs-mc-tools .fs-grok-mobile-cta { position: sticky; left: 0; z-index: 2; min-width: max-content; border-radius: 999px; padding-inline: 13px; } .fs-mc-tools .fs-mc-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .fs-mc-tools .fs-mc-tool.is-active, .fs-mc-tools .fs-mc-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .fs-mc-tool-label { white-space: nowrap; font-weight: 700; } .fs-mc-sep { flex: none; width: 1px; align-self: stretch; min-height: 28px; margin: 4px 2px; background: var(--border); } .fs-mc-tools .fs-mc-label { margin: 0 2px 0 4px; } .fs-mc-tools .fs-mc-zoom-inline { flex: none; flex-wrap: nowrap; min-width: 240px; } .fs-mc-tools .fs-mc-zoom-inline input[type="range"] { flex: 1 1 120px; min-width: 88px; order: 0; } /* Text tools dock to the bottom as a horizontally scrolling strip. */ .fs-text-style-rail.fs-text-popover:not([hidden]):not(.fs-watermark-popover) { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); top: auto; z-index: 31; display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 10px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(28, 27, 26, 0.1); backdrop-filter: blur(8px); } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover)::-webkit-scrollbar { display: none; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) > * { flex: none; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-select { width: auto; min-width: 150px; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-label { white-space: nowrap; margin: 0; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-color-row, .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-toggles, .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-head { display: flex; align-items: center; gap: 6px; } .fs-stage.has-text-popover ~ .fs-mobile-context, .fs-view:has(.fs-text-popover:not([hidden]):not(.fs-watermark-popover)) .fs-mobile-context { display: none !important; } .fs-rail-check { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; white-space: nowrap; font-size: var(--t-micro); font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .fs-rail-check input { width: 20px; height: 20px; accent-color: var(--accent); } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-move-block { flex-direction: row; align-items: center; gap: 6px; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-move-block .fs-btn-row { display: flex; gap: 4px; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-collapse, .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) input[type="color"], .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-toggle, .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-select { min-height: 44px; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) input[type="color"] { min-width: 44px; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-check { min-height: 44px; } .fs-text-style-rail.fs-text-popover:not(.fs-watermark-popover) .fs-rail-check input { width: 22px; height: 22px; } .fs-stage.has-text-popover { overflow: visible; } .fs-text-style-rail.fs-watermark-popover:not([hidden]) { z-index: 8; border: 1px solid #c4b5fd; border-radius: 12px; box-shadow: 0 8px 26px rgba(28, 27, 26, 0.22); } .fs-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .fs-rail-title { margin: 0; font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } .fs-rail-collapse { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink-soft); font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; } .fs-rail-collapse:hover { border-color: var(--accent); color: var(--accent); } .fs-rail-move-block { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .fs-text-style-rail-tab { display: none; position: absolute; top: 8px; right: 8px; z-index: 7; width: 28px; min-height: 72px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.96); color: var(--accent); font-size: 18px; font-weight: 800; cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(28, 27, 26, 0.12); } .fs-text-style-rail-tab:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; } .fs-tools-label { display: block; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 6px 0 4px; } .fs-text-move .fs-btn-row { margin-bottom: 2px; } .fs-rail-label { margin: 2px 0 0; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 4px; } .fs-rail-select { width: 100%; min-height: 36px; font-size: 12px; font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 4px 6px; } .fs-rail-toggles { display: flex; flex-wrap: wrap; gap: 4px; } .fs-rail-toggles .fs-toggle { min-width: 34px; min-height: 34px; padding: 0 6px; font-size: 13px; font-weight: 700; } .fs-rail-colors, .fs-rail-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .fs-rail-color-row { flex-wrap: nowrap; } .fs-rail-color-row .fs-rail-label { flex: 0 0 auto; min-width: 2.6em; margin: 0; } .fs-rail-color-row input[type="color"] { width: 36px; height: 32px; padding: 1px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); flex: 0 0 auto; } .fs-rail-color-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; } .fs-rail-colors input[type="color"] { width: 36px; height: 32px; padding: 1px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); } .fs-rail-colors input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } .fs-text-style-rail input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 28px; } .fs-rail-check { display: flex; align-items: center; gap: 6px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-soft); min-height: 28px; } .fs-rail-check input { width: 16px; height: 16px; accent-color: var(--accent); } .fs-mobilebar { display: flex; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); max-width: 100%; width: 100%; box-sizing: border-box; overflow-x: hidden; } .fs-mb-actions { flex: 1; min-width: 0; justify-content: stretch; gap: 6px; overflow-x: auto; } .fs-mb-btn { flex: 1 1 0; min-width: 0; max-width: 100%; padding: 8px 8px; font-size: 13px; /* Allow slightly tighter labels without forcing page scroll */ overflow: hidden; text-overflow: ellipsis; } .fs-mobilebar[data-mode="idle"] .fs-mb-btn { flex: 0 1 auto; min-width: 4.4em; } .fs-mobilebar[data-mode="crop"] .fs-mb-btn, .fs-mobilebar[data-mode="reposition"] .fs-mb-btn { flex: 0 1 auto; } .fs-mb-btn.icon-only { flex: 0 0 auto; padding-inline: 10px; } /* When text dock is open, lift it above the (hidden) mobile bar cleanly */ .fs-view.text-docked .fs-mobile-context { display: none !important; } .fs-view.text-docked { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; } /* Create / contribute: same no-sideways-scroll discipline */ body.mode-create main, body.mode-contribute main { max-width: 100%; width: 100%; /* `hidden` makes
a scroll container, so .preview-pane's sticky resolves against it and never engages — the live preview scrolled away while you typed, on the platform the product treats as first-class. Same fix as :root and the two blocks above. */ overflow-x: hidden; overflow-x: clip; } #view-create .editor, #view-create .style-tools, #view-create .zone-tools { max-width: 100%; min-width: 0; } .coord-layout, .coord-wrap, .image-preview { max-width: 100%; min-width: 0; overflow-x: hidden; } .coord-wrap img, .image-preview img { max-width: 100%; height: auto; } /* Site header: brand stays put; nav scrolls inside its own track */ .site-header { max-width: 100%; overflow-x: hidden; } .site-header .site-nav, .site-nav { justify-content: flex-start; min-width: 0; } } /* Tiny phones: squeeze action labels further */ @media (max-width: 360px) { .fs-mb-btn { font-size: 12px; padding: 8px 6px; } .fs-mc-label { display: none; } .fs-tool-btn { padding: 8px 8px; font-size: 12px; } } /* =================================================================== Background remover =================================================================== */ /* Self-contained panel chrome: this dialog does not rely on any shared modal-inner styling, so it looks right wherever it is mounted. */ .fs-bg-modal { align-items: center; justify-content: center; padding: 12px; } .fs-bg-modal[open] { display: flex; } .fs-bg-modal .fs-bg-inner { width: 100%; max-width: min(560px, calc(100vw - 24px)); max-height: min(88vh, 100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 24px 60px rgba(28, 27, 26, 0.35); } .fs-bg-modal .fs-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fs-bg-modal .fs-modal-head h2 { margin: 0; font-size: 19px; } .fs-bg-modal .fs-modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .fs-bg-modal .fs-modal-actions .btn { min-height: 44px; } .fs-bg-modal .fs-bg-canvas { width: 100%; max-width: 100%; } .fs-bg-verdict { font-size: 13px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-soft); } .fs-bg-verdict.ok { border-color: #047857; } .fs-bg-verdict.warn { border-color: var(--amber); color: var(--amber); font-weight: 600; } .fs-bg-stage { margin-bottom: 10px; } .fs-bg-canvas { display: block; width: 100%; height: auto; max-height: 44vh; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; cursor: crosshair; /* Checkerboard so transparency is unmistakable */ background-color: #fff; background-image: linear-gradient(45deg, #e7e3dd 25%, transparent 25%), linear-gradient(-45deg, #e7e3dd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e3dd 75%), linear-gradient(-45deg, transparent 75%, #e7e3dd 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; } .fs-bg-tip { margin: 6px 0 0; } .fs-bg-controls { display: flex; flex-direction: column; gap: 8px; } .fs-bg-controls input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; } .fs-bg-presets { display: flex; flex-wrap: wrap; gap: 6px; } .fs-bg-preset { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 999px; } .fs-bg-preset.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; } .fs-bg-stats { font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; min-height: 18px; } @media (max-width: 760px) { .fs-bg-canvas { max-height: 34vh; } .fs-bg-controls input[type="range"] { min-height: 44px; } } @media (max-width: 760px) { /* The dialog must never be wider than the phone it is on */ .fs-bg-modal .fs-bg-inner { max-width: 100%; width: 100%; } .fs-bg-canvas { width: 100%; max-width: 100%; height: auto; } } @media (max-width: 760px) { /* Full-width sheet on phones, with the actions always reachable */ .fs-bg-modal { padding: 0; align-items: flex-end; } .fs-bg-modal .fs-bg-inner { max-width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none; } .fs-bg-modal .fs-modal-actions .btn { flex: 1; min-width: 96px; } } /* Targeted-area chips in the background remover */ .fs-bg-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .fs-bg-pick { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 700; } .fs-bg-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(28,27,26,0.25); flex: none; } .fs-bg-pick-n { color: var(--ink-soft); } .fs-bg-pick button { border: none; background: transparent; cursor: pointer; font-size: 13px; color: var(--ink-soft); line-height: 1; padding: 4px; border-radius: 50%; } .fs-bg-pick button:hover { background: var(--bg); color: #b91c1c; } @media (max-width: 760px) { .fs-bg-pick { padding: 6px 8px; font-size: 13px; } .fs-bg-pick button { min-width: 32px; min-height: 32px; } } /* Eraser tool */ .fs-view.tool-eraser #fs-canvas { cursor: none; } .fs-eraser-indicator { position: absolute; z-index: 6; pointer-events: none; box-sizing: border-box; border: 2px solid rgba(220, 38, 38, 0.9); border-radius: 50%; background: rgba(239, 68, 68, 0.2); transform: translate(-50%, -50%); } .fs-eraser-indicator[hidden] { display: none; } .fs-eraser-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fs-eraser-opts[hidden] { display: none !important; } .fs-eraser-size-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .fs-eraser-opts input[type="range"] { width: 100px; min-width: 72px; accent-color: var(--accent); height: 28px; } .fs-eraser-hard { font-size: 12px; margin: 0; } @media (max-width: 760px) { .fs-eraser-opts { width: 100%; } .fs-eraser-opts input[type="range"] { flex: 1; width: auto; min-width: 80px; } } /* =================================================================== Icon system Every icon in the app is drawn on the same 24×24 grid at one stroke weight (lib/icons.js) and inherits `currentColor`, so a disabled or active button carries its icon with it. This block only handles size and optical alignment. =================================================================== */ .ms-i { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; } .ms-icon { display: block; width: 20px; height: 20px; } /* Label + icon: the gap belongs to the button, so an icon-only button (no text node) collapses to a true square without a phantom margin. */ .btn:has(.ms-i), .fs-mb-btn:has(.ms-i), .tool-btn:has(.ms-icon), .fs-sheet-tool:has(.ms-i) { gap: 7px; } /* Icon-only controls: square, centred, no text padding pulling them off-axis */ #fs-zoom-in, #fs-zoom-out, #fs-help { padding-inline: 10px; } .tool-btn .ms-icon { width: 18px; height: 18px; margin: 0 auto; } .zone-tools .tool-btn, .style-format .tool-btn { display: inline-flex; align-items: center; justify-content: center; } /* Fine nudge reads as a lighter action than Arrange; the chevrons are already the lighter shape, so the dashed border is doing the job twice. */ .tool-btn.fine-btn, .fs-toggle.fine-btn { border-style: solid; border-color: #d9d2ea; } .tool-btn.fine-btn .ms-icon, .fs-toggle.fine-btn .ms-icon { width: 16px; height: 16px; } /* =================================================================== Browser surfaces Selection, caret and scrollbars ship with defaults that belong to no design system. They are as visible as anything we drew. =================================================================== */ ::selection { background: rgba(109, 40, 217, 0.18); color: var(--ink); } input, textarea, [contenteditable] { caret-color: var(--accent); } /* Scoped to the app's own scroll areas — the page scrollbar stays native. */ .fs-side, .fs-library, .fs-layers, .fs-inspector, .fs-projects, .style-tools, .create-captions, .fs-shortcut-body { scrollbar-width: thin; scrollbar-color: #cfc7c0 transparent; } .fs-side::-webkit-scrollbar, .fs-library::-webkit-scrollbar, .fs-layers::-webkit-scrollbar, .fs-inspector::-webkit-scrollbar, .fs-projects::-webkit-scrollbar, .fs-shortcut-body::-webkit-scrollbar { width: 10px; height: 10px; } .fs-side::-webkit-scrollbar-thumb, .fs-library::-webkit-scrollbar-thumb, .fs-layers::-webkit-scrollbar-thumb, .fs-inspector::-webkit-scrollbar-thumb, .fs-projects::-webkit-scrollbar-thumb, .fs-shortcut-body::-webkit-scrollbar-thumb { background: #cfc7c0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .fs-side::-webkit-scrollbar-thumb:hover, .fs-library::-webkit-scrollbar-thumb:hover, .fs-layers::-webkit-scrollbar-thumb:hover, .fs-inspector::-webkit-scrollbar-thumb:hover, .fs-projects::-webkit-scrollbar-thumb:hover, .fs-shortcut-body::-webkit-scrollbar-thumb:hover { background: #b3aaa2; } .fs-side::-webkit-scrollbar-track, .fs-library::-webkit-scrollbar-track, .fs-layers::-webkit-scrollbar-track, .fs-inspector::-webkit-scrollbar-track, .fs-projects::-webkit-scrollbar-track, .fs-shortcut-body::-webkit-scrollbar-track { background: transparent; } /* Numbers that change in place must not reflow the control around them. */ .fs-zoom-label, .fs-size-val, .fs-coord-val, .char-count, .fs-inspector input[type="number"], .coord-box, #fs-canvas-w, #fs-canvas-h { font-variant-numeric: tabular-nums; } /* =================================================================== Freestyle · toolbar and canvas corrections =================================================================== */ /* ONE home per control, stated once, at every width. Two earlier rules each hid a "duplicate" while assuming the other location was the survivor, so Undo and Redo rendered in neither place on desktop. Restoring the toolbar copy was not the answer either: .fs-toolbar-main is a 1618px scroller in an 875px box, so buttons at its end are off-viewport. The on-canvas float cannot be clipped, so it owns history at every width. The toolbar's right group never scrolls, so it owns the document actions. */ .fs-toolbar .fs-tool-history { display: none; } /* Clear canvas lives in the non-scrolling toolbar group on desktop, so the float drops its copy there; below 821px the toolbar is gone and the float carries it. */ @media (min-width: 821px) { .fs-history-float .fs-clear-float-btn { display: none; } } /* Destructive, so it must be findable; not the task, so it must not lead. */ .fs-toolbar .btn.danger { border-color: #e7c3c3; } .fs-toolbar .btn.danger:hover:not(:disabled) { background: #fef2f2; border-color: #d99a9a; } .fs-history-float .fs-clear-float-btn { color: #fff; background: #b91c1c; margin-left: 2px; } .fs-history-float .fs-clear-float-btn:hover:not(:disabled) { background: #991b1b; } .fs-history-float .ms-icon { width: 17px; height: 17px; } /* The tool cluster reads as one control, so its members share a resting surface and only the active one is filled. */ .fs-tool-btn { background: transparent; border-color: transparent; } .fs-tool-btn:hover:not(:disabled):not(.is-active) { background: var(--surface); border-color: var(--border); } /* =================================================================== Template editor · hierarchy =================================================================== */ /* Back to the gallery is a way out, not the task on this screen. It was rendering as a full-width button directly under the title on phones — the second-loudest element on a page whose job is writing captions. */ .editor-back { font-weight: 600; color: var(--ink-soft); } .editor-back:hover { color: var(--ink); } .editor-back .ms-icon { width: 17px; height: 17px; } /* One label treatment inside one panel: Arrange / Nudge / Size were title case beside FONT / FORMAT / ALIGN in the same box. */ .zone-tools .tools-label { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } /* Arrange, Nudge and Size each stay whole: a four-arrow cluster that wraps after its third button reads as two unrelated controls. */ .zone-tools { gap: 10px 14px; align-items: center; } .tool-cluster { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } .tool-cluster .tools-label { margin-right: 2px; } .tool-cluster-size { flex: 1 1 160px; min-width: 140px; gap: 8px; } .tool-cluster-size input[type="range"] { flex: 1; min-width: 80px; } /* Style & position is a disclosure — give it the chevron every other disclosure in the app has, rather than the bare all-caps line. */ .style-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; } .style-more > summary::-webkit-details-marker { display: none; } .style-more > summary::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-mask: var(--chevron) center / 16px 16px no-repeat; mask: var(--chevron) center / 16px 16px no-repeat; } .style-more[open] > summary::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .style-more > summary::before { transition: none; } } :root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.8 6.4 14.4 12l-5.6 5.6'/%3E%3C/svg%3E"); } /* Tool clusters sit in a single scrolling row. Hairlines keep them legible as separate groups when they sit side by side. */ @media (min-width: 821px) { .fs-toolbar-main > .fs-tool-group + .fs-tool-group, .fs-toolbar-main > #fs-starter-suggestions + .fs-tool-group { padding-left: 10px; border-left: 1px solid var(--border); } .fs-toolbar-main > .fs-tool-modes + .fs-tool-group { border-left: none; padding-left: 0; } } /* The nav scrolls horizontally on phones, where the last tab was landing hard against the viewport edge mid-word — indistinguishable from a broken layout. A fade tells the eye there is more, and reserves the room for it. */ @media (max-width: 760px) { .site-header .site-nav, .site-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); padding-right: 22px; } /* Once the row fits, no fade: a permanent gradient on a complete list is a lie about there being more. */ .site-header .site-nav:not(:hover) { scroll-snap-type: x proximity; } .site-nav a.nav-tab { scroll-snap-align: end; } } /* On a phone the header has room for the template name or a button, not both. Change template is the way out, so it drops its button chrome and sits as a link beside the title rather than pushing the preview a row further down. */ @media (max-width: 760px) { .editor-header { flex-wrap: nowrap; gap: 10px; } .editor-header .editor-back { min-height: 36px; padding: 4px 6px; border-color: transparent; background: transparent; font-size: 13px; white-space: nowrap; } .editor-header .editor-back:hover { background: transparent; } .editor-header .editor-back .ms-icon { width: 15px; height: 15px; } } /* The length guide is three characters wide; letting it wrap to two lines beside a long zone name made a hint look like a second heading. (The field head replaced the old when captions became a script.) */ .field-head > .hint { flex: none; white-space: nowrap; } .field-head > .field-name { min-width: 0; } /* =================================================================== Create editor · recovery and feedback =================================================================== */ /* Reset offering its own undo. It stays a quiet control — the point is that the destructive act is recoverable, not that recovery shouts. */ #reset-btn.is-undo { border-color: var(--accent); color: var(--accent); font-weight: 800; } #reset-btn.is-undo:hover { background: #f3eefc; } /* Downloading used to end in silence. This is the last beat of the flow. */ .download-confirm { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #bfe3cf; background: #f2fbf6; border-radius: 8px; color: #145c38; font-size: 13px; font-weight: 600; } .download-confirm[hidden] { display: none; } /* =================================================================== Freestyle · on-canvas zoom cluster The markup for #fs-zoom-float was missing, so these rules were dead. Only the placement needed re-checking once it shipped. =================================================================== */ /* Same placement as mobile: history (undo / redo / trash) top-left, zoom + Fit top-right. */ /* =================================================================== Freestyle · inspector groups Selecting one object used to render every property at once — 50 controls in a 1447px column. Each section is now a disclosure, and only the one matching what you selected opens. =================================================================== */ .fs-group-d { border-top: 1px solid var(--border); } .fs-group-d:first-of-type { border-top: none; } .fs-group-d > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 2px; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } .fs-group-d > summary::-webkit-details-marker { display: none; } .fs-group-d > summary::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-mask: var(--chevron) center / 15px 15px no-repeat; mask: var(--chevron) center / 15px 15px no-repeat; } .fs-group-d[open] > summary { color: var(--ink); } .fs-group-d[open] > summary::before { transform: rotate(90deg); } .fs-group-d > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .fs-group-d > summary::before { transition: none; } } /* The group already carries the heading; the fieldset inside would draw a second one. Keep the semantics, drop the duplicate chrome. */ .fs-group-body .fs-group { border: none; margin: 0; padding: 0 0 8px; } .fs-group-body .fs-group > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Duplicate / Delete are object-level, not part of any property group. */ .fs-object-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } /* =================================================================== Mobile adaptation =================================================================== */ /* The image-zoom strip laid label + button + slider + button + % + Move on one row. At 375px the row ran past the container's overflow:hidden and clipped Move to 27px wide, showing "M." — below the 44px target this product commits to. Let the slider take its own line so every control keeps its size. */ .fs-mc-zoom { flex-wrap: wrap; row-gap: 4px; } .fs-mc-zoom input[type="range"] { flex: 1 1 140px; } .fs-mc-zoom .fs-mb-btn[data-mb="reposition"] { flex: none; min-width: 92px; min-height: 44px; } @media (max-width: 420px) { /* Slider on its own row; the buttons and readout share the row above. */ .fs-mc-zoom input[type="range"] { flex: 1 1 100%; order: 5; } .fs-mc-pct { order: 4; } /* Inside the scrolling image strip the zoom cluster stays one row. */ .fs-mc-tools .fs-mc-zoom-inline input[type="range"] { flex: 1 1 120px; order: 0; } .fs-mc-tools .fs-mc-zoom-inline .fs-mc-pct { order: 0; } } /* Touch targets. 44px is the product's own commitment in PRODUCT.md; these were the controls still under it. The back link stays visually light — the hit area grows, the ink does not. */ @media (max-width: 760px) { .editor-header .editor-back { min-height: 44px; padding: 4px 8px; } .style-tools select { min-height: 44px; } /* A 20px checkbox in a 44px label: the whole label is the target. */ .bg-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; } .bg-toggle input { width: 22px; height: 22px; } .fs-check { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; } } /* One control surface at a time. With a text box selected and the More sheet open, the phone was showing the sheet, the bottom bar, the 25-control text rail and the history float at once — leaving roughly a 470x250px sliver of canvas. The sheet is a deliberate, dismissible surface; while it is open it is the one in charge. */ @media (max-width: 820px) { .fs-view.sheet-open .fs-text-style-rail, .fs-view.sheet-open .fs-text-style-rail-tab, .fs-view.sheet-open .fs-history-float, .fs-view.sheet-open .fs-mobile-context { display: none !important; } } /* Export size sits with the caption controls, not in the action bar — it is a setting for the download, not a fourth competing action. */ .export-size { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; } .export-size label { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); flex: none; } .export-size select { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 10px; font-size: var(--t-small); font-family: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; } .export-size select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } @media (max-width: 760px) { .export-size select { min-height: 44px; } } /* Remaining touch targets under the 44px commitment on phones — including the zoom cluster this pass added, which inherited a 34px desktop size. */ @media (max-width: 760px) { .site-header .site-nav a.nav-tab, .site-nav a.nav-tab { min-height: 44px; } .fs-view .fs-project-name { min-height: 44px; } .fs-stage .fs-zoom-float button, .fs-stage .fs-history-float button { min-height: 44px; min-width: 44px; } .fs-stage .fs-zoom-float .fs-zoom-fit { min-width: 48px; } } /* One row on a phone canvas, earned three ways rather than by stacking: the word labels go (the icons carry the meaning, the aria-labels carry the name), the buttons close up inside each pill, and each target gives back a few pixels — 38x40 stays a comfortable thumb target because the pill groups them and nothing sits between two adjacent controls. */ @container (max-width: 430px) { .fs-stage .fs-history-float, .fs-stage .fs-zoom-float { gap: 0; padding: 2px; } .fs-stage .fs-history-float button, .fs-stage .fs-zoom-float button { min-width: 38px; min-height: 40px; padding-inline: 0; } .fs-stage .fs-history-float button .fs-float-label { display: none; } .fs-stage .fs-history-float .fs-clear-float-btn { margin-left: 0; } .fs-stage .fs-zoom-float [data-mb-zoom-label] { min-width: 30px; padding-inline: 2px; font-size: var(--t-micro); } .fs-stage .fs-zoom-float .fs-zoom-fit { min-width: 40px; font-size: 12px; } } /* Small phones: one more notch down, still one row. */ @container (max-width: 340px) { .fs-stage .fs-history-float button, .fs-stage .fs-zoom-float button { min-width: 34px; min-height: 38px; } .fs-stage .fs-zoom-float [data-mb-zoom-label] { min-width: 26px; } .fs-stage .fs-zoom-float .fs-zoom-fit { min-width: 36px; } } /* =================================================================== Pressed state — every toggle in the app, not just the reported one A control that carries aria-pressed must show it. `.zone-tools` had a rule; `.style-format` (Bold / Italic / Underline / Align) had none, so Bold-on and Bold-off computed byte-identical. Auditing the whole class turned up a second silent pair: Flip H / Flip V in the image inspector, which are `.btn.btn-quiet` and had no pressed rule either. =================================================================== */ .style-format .tool-btn[aria-pressed="true"], .btn[aria-pressed="true"] { background: #f3eefc; border-color: var(--accent); color: var(--accent); font-weight: 800; } /* The outline pair renders its own state above; keep this rule off it. */ .style-format .tool-btn.outline-btn[aria-pressed="true"] { color: inherit; } /* =================================================================== The hidden attribute must win `.btn { display: inline-flex }` is an author rule, so it beats the UA `[hidden] { display: none }` no matter the specificity — any .btn with `hidden` stayed on screen. That is why `← Layouts` rendered as a live dead control on the starter gallery, and why three per-component `[hidden]` patches exist further down this file. =================================================================== */ [hidden] { display: none !important; } /* Authentication adds a second cluster to the header. On phones, give the four route pills their own scrollable row instead of crushing them between the wordmark and account controls. This intentionally comes after the older one-row mobile rules above. */ @media (max-width: 760px) { .site-header { flex-wrap: wrap; } .site-header .site-nav, .site-nav { order: 3; flex: 1 0 100%; width: 100%; } .site-header .account-menu { margin-left: auto; } } /* A status line that carries the only recovery path stays until something replaces it, and reads as information rather than a passing confirmation. */ .fs-status.sticky { color: var(--ink); font-weight: 600; background: var(--accent-wash, #f3eefc); border: 1px solid #ddd0f7; border-radius: 8px; padding: 6px 10px; } /* The toolbar scrolls horizontally when it overflows, but advertised nothing: at 1440 it ran 1192px of content through a 997px box with no mask, no fade and no scrollbar, so Redo simply appeared to not exist. Same right-edge mask the nav row already uses. */ .fs-toolbar-main { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); padding-right: 18px; } /* X Post Reaction uses the news shelf and the shared editor/result flow. */ .x-reaction-card { margin: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); } .x-reaction-card form { display: grid; gap: 12px; margin-top: 16px; min-width: 0; } .x-reaction-card input[type="url"] { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); } .x-reaction-modes { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 0; } .x-reaction-modes legend { margin-bottom: 8px; } /* Two short choices, so they size to their own labels rather than stretching the width of the card. */ /* Two short choices, so the pill sizes to its own label rather than stretching the card. Height is set by the art plus 6px, which lands past the 44px touch floor the accessibility checklist asks for. */ .x-reaction-modes label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 18px 6px 6px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: var(--t-control); font-weight: 700; line-height: 1.3; transition: border-color 140ms ease, background 140ms ease; } /* Hover dresses the *unchosen* pill only. Without the :checked guard it outranks the selected rule — which sets the white text but not the background — so a pill selected under the cursor drew white text on the pale hover fill and read as empty until the pointer left. */ .x-reaction-modes label:hover:not(:has(:checked)):not(:has(:disabled)) { border-color: var(--border-hover); background: var(--bg); } .x-reaction-modes label:active:not(:has(:disabled)) { transform: scale(0.98); } .x-reaction-modes label input { position: absolute; opacity: 0; pointer-events: none; } /* Supplied 3D art, not a stroke glyph from site/lib/icons.js: it carries its own colour, so it reads on the plain pill and on the selected fill alike. Sized to the pill rather than to the 24px icon grid — the art is the label's face, and the padding closes around it. */ .x-reaction-modes .x-reaction-icon { display: block; width: 32px; height: 32px; flex: none; pointer-events: none; } .x-reaction-modes label:has(:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .x-reaction-modes label:has(:checked):hover { background: var(--accent-deep); border-color: var(--accent-deep); } .x-reaction-modes label:has(:disabled) { opacity: .45; cursor: not-allowed; } .x-reaction-modes label:focus-within { outline: 2px solid currentColor; outline-offset: 3px; } .btn.x-reaction-button { background: #000; color: #fff; border-color: #000; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn.x-reaction-button:hover:not(:disabled) { background: #252525; } .btn.x-reaction-button:disabled { background: #777; border-color: #777; opacity: .5; cursor: not-allowed; } @media (max-width: 600px) { .x-reaction-card { margin: 12px; padding: 14px; } }