/* THE MINA LABS STUDIO SIGNATURE, for the standalone studio pages. * * The owner, 20 Sep 2026: "it's must be Desgin and style as Mina labs style * signature .. every studio look almost the same .. text, colors, button .. * that what make it as brand .. the new motion studio have his own style, * edit it." * * He is describing something that already exists. public/studio-unify.css * defines it for the three big workbench studios (image, video, music), and * every number below is taken from that file rather than invented here: * * back button 40px tall, 1px rgba(255,255,255,.14), radius 10, * rgba(255,255,255,.03), #dbe3f3, 13px/700, * hover borders in the accent * generate 48px, radius 10, SOLID accent, #0b0f1c text, 15px/800, * no gradient, no shadow; disabled goes .06/.12/#8b93a8 * fields rgba(255,255,255,.03), 1px rgba(255,255,255,.12), * radius 10, #f4f7ff, 14px * choice rows 44px, radius 10, and the SELECTED one takes a green * frame (#22c55e, 4px on the left) — the one piece of this * system a regular visitor would recognise instantly * accent one per studio, and only one. Image #22d3ee, * video #8b5cf6, music #fbbf24 — so a fourth studio takes * a fourth accent rather than borrowing one. * * Applied by putting `studio-sig` on , which is why this is a sheet of * its own: the Ad Studio can join it with one class and one whenever * he wants, and nothing else on the site is touched either way. * * Loaded after the page's own stylesheet, so it wins where they disagree. */ body.studio-sig{ --su-accent:#38bdf8; --su-accent-soft:rgba(56,189,248,.13); } /* ── header, and the way back ───────────────────────────────────────── */ body.studio-sig .ad-top{ gap:12px } body.studio-sig .sig-back{ display:inline-flex;align-items:center;gap:8px; height:40px;padding:0 16px; border:1px solid rgba(255,255,255,.14);border-radius:10px; background:rgba(255,255,255,.03);color:#dbe3f3; font-size:13px;font-weight:700;text-decoration:none; transition:border-color .15s ease,color .15s ease; } body.studio-sig .sig-back:hover{border-color:var(--su-accent);color:#fff} body.studio-sig .sig-back svg{width:15px;height:15px;flex:none} body.studio-sig .ad-credits{ margin-left:auto; padding:0 12px;height:34px;display:inline-flex;align-items:center; border:1px solid rgba(255,255,255,.12);border-radius:10px; background:rgba(255,255,255,.03);color:#dbe3f3; font-size:12.5px;font-weight:700; } /* ── fields ─────────────────────────────────────────────────────────── */ body.studio-sig .ad-f input[type="text"], body.studio-sig .ad-f textarea{ width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#f4f7ff; font-family:inherit;font-size:14px;line-height:1.55; padding:12px 14px; transition:border-color .15s ease; } body.studio-sig .ad-f textarea{min-height:120px;max-height:240px;resize:vertical} body.studio-sig .ad-f input[type="text"]:focus, body.studio-sig .ad-f textarea:focus{outline:none;border-color:var(--su-accent)} body.studio-sig .ad-f label{ display:block;margin-bottom:7px; color:#8e9ab5;font-size:11px;font-weight:800;letter-spacing:.09em; text-transform:uppercase; } /* ── the upload, which is this studio's version of a field ──────────── */ body.studio-sig .ad-drop{ background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.18); border-radius:10px; color:#dbe3f3; transition:border-color .15s ease,background .15s ease; } body.studio-sig .ad-drop:hover, body.studio-sig .ad-drop:focus-visible{ border-color:var(--su-accent);background:var(--su-accent-soft);outline:none; } body.studio-sig .ad-drop strong{color:#f4f7ff;font-size:14px;font-weight:800} body.studio-sig .ad-drop p{color:#8e9ab5;font-size:12px} body.studio-sig .mt-addRef{ border:1px dashed rgba(255,255,255,.18);border-radius:10px; background:rgba(255,255,255,.03);color:#dbe3f3; font-size:13px;font-weight:700; } body.studio-sig .mt-addRef:hover:not(:disabled){ border-color:var(--su-accent);background:var(--su-accent-soft);color:#fff; } body.studio-sig .mt-ref{border-radius:10px;border:1px solid rgba(255,255,255,.10)} body.studio-sig .mt-clip video{border-radius:10px} /* ── choice rows: the green frame is the brand's own tell ───────────── */ body.studio-sig .mt-resOpt{ min-height:44px;padding:9px 14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius:10px; color:#dbe3f3; transition:border-color .15s ease,background .15s ease,color .15s ease; } body.studio-sig .mt-resOpt:hover{border-color:var(--su-accent);background:var(--su-accent-soft);color:#fff} body.studio-sig .mt-resOpt.is-on{ border:1.5px solid #22c55e;border-left:4px solid #22c55e; background:rgba(34,197,94,.10);color:#fff; } body.studio-sig .mt-resName{font-size:13.5px;font-weight:600;letter-spacing:.01em} body.studio-sig .mt-resNote{color:#8e9ab5;font-size:11px} body.studio-sig .mt-resCost{ font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8e9ab5; } body.studio-sig .mt-resOpt.is-on .mt-resCost{color:#9fe8b8} /* ── generate: the same button in every studio, in this studio's accent ─ */ body.studio-sig .ad-btn{ height:48px;min-height:48px;padding:0 22px; border:1px solid var(--su-accent);border-radius:10px; background:var(--su-accent);background-image:none; color:#0b0f1c; font-size:15px;font-weight:800; box-shadow:none;text-shadow:none; display:inline-flex;align-items:center;justify-content:center; transition:filter .15s ease; } body.studio-sig .ad-btn:hover:not(:disabled){filter:brightness(1.08)} body.studio-sig .ad-btn:disabled{ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#8b93a8; } body.studio-sig .ad-btn.ad-ghost{ background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14);color:#dbe3f3; } body.studio-sig .ad-btn.ad-ghost:hover{border-color:var(--su-accent);color:#fff} /* ── step headings ──────────────────────────────────────────────────── */ body.studio-sig .ad-step{ border:1px solid rgba(255,255,255,.09);border-radius:12px; background:rgba(255,255,255,.015); } body.studio-sig .ad-stepHead h2{font-size:14px;font-weight:800;color:#f4f7ff;letter-spacing:-.01em} body.studio-sig .ad-num{ width:22px;height:22px;border-radius:7px; background:var(--su-accent-soft);border:1px solid rgba(56,189,248,.35); color:var(--su-accent); font-size:11px;font-weight:800; display:inline-grid;place-items:center; } body.studio-sig .ad-hint{ color:#8e9ab5;font-family:inherit;font-size:10.5px;font-weight:800; letter-spacing:.09em;text-transform:uppercase; } body.studio-sig .ad-quote{color:#dbe3f3;font-family:inherit;font-size:13px;font-weight:700} body.studio-sig .ad-quote b{color:var(--su-accent)} body.studio-sig .ad-say{font-family:inherit;font-size:12px} body.studio-sig .ad-canvasNote{font-family:inherit;font-size:11.5px;color:#8e9ab5;text-align:left} @media (max-width:900px){ body.studio-sig .sig-back{height:36px;padding:0 12px;font-size:12px} body.studio-sig .sig-back span{display:none} /* arrow only on a phone */ body.studio-sig .sig-back svg{width:16px;height:16px} }