/* ============================================================ Veyron Studio — unified design system (single generation). Replaces the six stacked redesigns that previously lived here. Contract (do not rename — consumed by templates/JS/admin.css): tokens : --bg --bg-2 --bg-3 --card --card-2 --card-strong --glass --glass-2 --text --text-2 --text-3 --border --border-2 --primary --primary-2 --primary-soft --accent --accent-2 --success --warning --danger --radius --radius-sm --radius-xs --radius-lg --shadow --shadow-soft --sidebar --input-bg theme : , localStorage "veyron-theme" breakpoints (the only four): 560 / 768 / 1024 / 1280 1024 is the sidebar⇄drawer switch and MUST match main.js matchMedia("(max-width: 1024px)"). One stylesheet serves RTL (Arabic, default) and LTR via + CSS logical properties; [dir="rtl"] overrides only where a logical property cannot express the rule. ============================================================ */ /* ============================================================ §1 DESIGN TOKENS ============================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* surfaces — neutral enough for the brand orange to stay crisp */ --bg: #100f0e; --bg-2: #171513; --bg-3: #211e1b; --card: #181614; --card-2: #201d1a; --card-strong: #24201d; --input-bg: #1b1816; --sidebar: rgba(16, 15, 14, 0.84); --glass: rgba(255, 255, 255, 0.055); --glass-2: rgba(255, 255, 255, 0.09); /* text — three levels, all ≥ 4.5:1 on every surface above */ --text: #f7f4ef; --text-2: #c2bbb0; --text-3: #948d82; /* borders — never used as text colors */ --border: rgba(255, 255, 255, 0.13); --border-2: rgba(255, 255, 255, 0.075); --border-strong: rgba(255, 255, 255, 0.24); /* Veyron orange — sampled from the supplied reference image */ --brand: #fd6a01; --brand-hover: #e85b00; --orange-200: #ffd4b8; --orange-300: #ffb27a; --orange-400: #ff8633; --orange-500: #fd6a01; --orange-600: #c24b00; --orange-700: #a63e00; --primary: var(--orange-500); --primary-2: var(--orange-300); --primary-soft: rgba(253, 106, 1, 0.14); --link: var(--orange-300); --on-primary: #2b1203; /* text that sits on top of imagery — theme-independent */ --on-media: #ffffff; --on-media-dim: rgba(255, 255, 255, 0.75); --accent-on-media: #ffc6a0; --fav: #ff7ba9; /* points/cost stay in the same single orange identity family */ --accent: #ff9a55; --accent-text: #ffb98c; --accent-soft: rgba(253, 106, 1, 0.12); --accent-2: #ff8633; /* semantic */ --success: #3ddc97; --success-tint: rgba(61, 220, 151, 0.12); --warning: #f7b955; --warning-tint: rgba(247, 185, 85, 0.12); --danger: #ff7676; --danger-tint: rgba(255, 118, 118, 0.12); --on-status: #1a1400; /* deterministic solid brand layers — no luminous gradients */ --grad: var(--brand); --grad-soft: var(--primary-soft); --grad-text: var(--primary-2); /* depth */ --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.32); --shadow: 0 20px 60px rgba(0, 0, 0, 0.42); --shadow-pop: 0 28px 90px rgba(0, 0, 0, 0.56); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); /* compatibility aliases consumed by the studio-specific components */ --surface: var(--card); --surface-1: var(--card); --surface-2: var(--card-2); --text-1: var(--text); /* geometry */ --radius-lg: 22px; --radius: 16px; --radius-sm: 10px; --radius-xs: 7px; --radius-pill: 999px; /* spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px; /* z-index scale */ --z-topbar: 40; --z-rail: 70; --z-backdrop: 80; --z-drawer: 85; --z-sheet: 90; --z-modal: 100; --z-flash: 110; /* type scale */ --fs-xs: 12.5px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 25px; --fs-3xl: 32px; --fs-display: clamp(34px, 5vw, 46px); /* layout + motion */ --sidebar-w: 264px; --rail-w: 94px; --topbar-h: 64px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t: 0.18s var(--ease); } :root[data-theme="light"] { color-scheme: light; --bg: #f7f5f2; --bg-2: #fcfbf9; --bg-3: #ece8e3; --card: #ffffff; --card-2: #faf8f5; --card-strong: #ffffff; --input-bg: #ffffff; --sidebar: rgba(255, 255, 255, 0.88); --glass: rgba(30, 25, 21, 0.045); --glass-2: rgba(30, 25, 21, 0.075); --text: #201a12; --text-2: #5b5346; --text-3: #837a6b; --border: rgba(32, 26, 18, 0.14); --border-2: rgba(32, 26, 18, 0.075); --border-strong: rgba(32, 26, 18, 0.25); --primary: var(--orange-600); --primary-2: var(--orange-700); --primary-soft: rgba(253, 106, 1, 0.1); --link: var(--orange-700); --on-primary: #2b1203; --accent: #c24b00; --accent-text: #a63e00; --accent-soft: rgba(253, 106, 1, 0.09); --success: #0e7a52; --success-tint: rgba(14, 122, 82, 0.1); --warning: #8a5a00; --warning-tint: rgba(138, 90, 0, 0.1); --danger: #c22f2f; --danger-tint: rgba(194, 47, 47, 0.09); --on-status: #ffffff; --grad: var(--brand); --grad-soft: var(--primary-soft); --grad-text: var(--primary); --shadow-soft: 0 8px 24px rgba(28, 23, 19, 0.09); --shadow: 0 16px 48px rgba(28, 23, 19, 0.13); --shadow-pop: 0 24px 70px rgba(28, 23, 19, 0.18); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); } /* ============================================================ §2 BASE / RESET / A11Y ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--text); font-family: "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: var(--fs-md); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* No ambient glow: the brand is carried by deliberate controls and borders. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: none; } :root[data-theme="light"] body::before { background: none; } img, video, canvas { max-width: 100%; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--primary-2); } :root[data-theme="light"] a:hover { color: var(--orange-700); } ::selection { background: rgba(253, 106, 1, 0.34); color: var(--on-media); } :root[data-theme="light"] ::selection { background: rgba(253, 106, 1, 0.2); color: var(--text); } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } /* focus */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; border-radius: var(--radius-xs); } /* screen-reader helpers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--s3); z-index: calc(var(--z-flash) + 1); padding: 10px 18px; background: var(--brand); color: var(--on-primary); border-radius: var(--radius-sm); font-weight: 700; transform: translateY(-200%); } .skip-link:focus-visible { transform: none; color: var(--on-primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- Image Studio */ .image-studio-page { display: grid; gap: var(--s4); } .image-studio-head { align-items: center; } .image-studio-workspace { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: var(--s4); align-items: start; } .image-single-workspace { width: 100%; } .image-compose-panel { padding: var(--s4); position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: auto; } .image-model-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--s3); } .image-model-choice { min-width: 0; min-height: 64px; padding: 8px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; text-align: start; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); cursor: pointer; } .image-model-choice img, .image-model-choice > span { width: 40px; height: 44px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--primary-soft); } .image-model-choice b { font-size: 12px; line-height: 1.35; } .image-model-choice.active { border-color: var(--brand); color: var(--text-1); box-shadow: none; } .image-input-block { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 12px; margin: var(--s3) 0; } .input-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .image-drop-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); cursor: pointer; font-weight: 700; } .image-reference-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .image-ref-card { width: 74px; position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); } .image-ref-card.active-base { border-color: var(--primary); } .image-ref-card img { display: block; width: 100%; height: 70px; object-fit: cover; } .image-ref-card span { display: block; padding: 3px 5px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; } .image-ref-card button { position: absolute; inset-inline-end: 3px; top: 3px; border: 0; border-radius: 50%; width: 20px; height: 20px; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; } .image-options { border-top: 1px solid var(--border); margin-top: var(--s3); padding-top: var(--s3); } .image-options summary { cursor: pointer; font-weight: 800; margin-bottom: var(--s3); } .image-options-grid .form-group { margin-bottom: 10px; } .image-mask-editor { margin: var(--s3) 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .mask-stage { position: relative; max-height: 430px; overflow: auto; border-radius: 10px; background: #0a0a0f; } .mask-stage canvas { display: block; width: 100%; height: auto; touch-action: none; } .mask-stage #mask-paint { position: absolute; inset: 0; } .mask-tools { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 9px; } .mask-tools .active { border-color: var(--primary); background: var(--primary-soft); } .image-result-canvas { min-height: 650px; padding: var(--s4); } .image-result-canvas-head { display: flex; align-items: start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); } .image-result-canvas-head h2 { margin: 3px 0 0; } .image-current-result { display: grid; gap: var(--s3); } .image-empty-state { min-height: 480px; display: grid; place-content: center; place-items: center; text-align: center; color: var(--text-3); } .image-empty-state > svg { width: 52px; height: 52px; color: var(--primary); } .image-step-busy { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-3); } .image-output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .image-output-card { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-1); } .image-output-card img { width: 100%; max-height: 520px; object-fit: contain; display: block; background: #09090d; } .image-output-card figcaption { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; } .image-partials { display: flex; gap: 8px; overflow: auto; } .image-partial { max-height: 360px; max-width: 100%; border-radius: 10px; opacity: .74; filter: saturate(.8); } .image-result-metadata { margin-top: var(--s3); padding: 10px; border-radius: 10px; background: var(--surface-1); font-size: 13px; } .image-studio-empty { min-height: 460px; } @media (max-width: 820px) { .image-studio-workspace { grid-template-columns: 1fr; } .image-compose-panel { position: static; max-height: none; } .image-result-canvas { min-height: 420px; } } @media (max-width: 520px) { .image-model-picker, .image-options-grid { grid-template-columns: 1fr; } .image-output-grid { grid-template-columns: 1fr; } .image-compose-panel, .image-result-canvas { padding: var(--s3); } } /* ----------------------------------------------------------- TTS Studio */ .tts-page { display: grid; gap: var(--s4); } .tts-shell { display: grid; grid-template-columns: minmax(340px, 620px) minmax(300px, 1fr); gap: var(--s4); align-items: start; } .tts-compose, .tts-result-panel { padding: var(--s4); } .tts-compose { display: grid; gap: var(--s3); } .tts-model-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .tts-model-choice { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; text-align: start; } .tts-model-choice span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); } .tts-model-choice.active { color: var(--text-1); border-color: var(--brand); box-shadow: none; } .tts-experience-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .tts-experience-switch button { display: grid; gap: 3px; min-height: 58px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); cursor: pointer; text-align: start; } .tts-experience-switch button small { color: var(--text-3); } .tts-experience-switch button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--text-1); } .tts-mode-panel { display: grid; gap: var(--s3); } .tts-mode-panel[hidden] { display: none !important; } .tts-transcript { min-height: 260px; resize: vertical; line-height: 1.8; } .tts-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tts-tags .chip { direction: inherit; font-size: 11px; min-height: 28px; padding: 4px 9px; } .tts-speaker-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .tts-speaker-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .tts-speaker-card[hidden] { display: none !important; } .tts-persona-grid .form-group { margin-bottom: 4px; } .tts-base-voice { border-top: 1px solid var(--border); padding-top: 9px; } .tts-base-voice summary { cursor: pointer; color: var(--text-2); font-weight: 700; } .tts-base-voice .input { margin-top: 9px; } .tts-context .form-group { margin-top: var(--s3); } .tts-voice-library { display: grid; gap: 6px; max-height: 390px; margin-top: 9px; padding: 4px; overflow: auto; } .tts-voice-card { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 7px; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); } .tts-voice-card.active { border-color: var(--brand); box-shadow: none; } .tts-voice-select { min-width: 0; padding: 9px 11px; display: grid; gap: 2px; border: 0; background: transparent; color: var(--text-1); text-align: start; cursor: pointer; } .tts-voice-select small { color: var(--text-3); } .tts-voice-play { margin: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--primary-soft); color: var(--primary); cursor: pointer; } .tts-voice-play.playing { background: var(--brand); color: var(--on-primary); } .tts-voice-play:disabled { opacity: .35; cursor: not-allowed; } .tts-directions { margin-top: var(--s3); } .form-span-2 { grid-column: 1 / -1; } .tts-result-panel { min-height: 560px; position: sticky; top: 84px; display: grid; align-content: start; gap: var(--s4); overflow: hidden; } .tts-result-empty { min-height: 270px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--text-3); } .tts-result-empty svg { width: 52px; height: 52px; color: var(--primary); } .tts-result { display: grid; gap: var(--s3); justify-items: start; } .tts-result audio { width: 100%; } /* Song studio ------------------------------------------------------------- */ .song-page { display: grid; gap: var(--s4); } .song-shell { display: grid; grid-template-columns: minmax(360px, 640px) minmax(300px, 1fr); gap: var(--s4); align-items: start; } .song-compose, .song-result-panel { padding: var(--s4); } .song-compose { display: grid; gap: var(--s3); } .song-range { width: 100%; accent-color: var(--brand); } .song-route { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--text-3); } .song-gender, .song-lyrics-mode { border: 0; padding: 0; margin: 0; min-width: 0; } .song-gender legend, .song-lyrics-mode legend { font-weight: 700; margin-bottom: 10px; } .song-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .song-choice { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; background: var(--surface-2); } .song-choice input { position: absolute; opacity: 0; pointer-events: none; } .song-choice.active { border-color: var(--brand); box-shadow: none; color: var(--primary); background: var(--primary-soft); } .song-choice span { font-size: 1.35rem; } .song-lyrics-input { font-family: inherit; line-height: 1.75; } .song-llm-state { margin-top: 8px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .86rem; } .song-llm-state.available { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); } .song-llm-state.unavailable { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .song-safety-note { display: flex; gap: 10px; align-items: flex-start; } .song-safety-note svg { width: 21px; color: var(--primary); flex: 0 0 auto; } .song-safety-note p, .song-provider-notes p { margin: 4px 0 0; color: var(--text-3); } .song-result-panel { min-height: 600px; position: sticky; top: 84px; display: grid; align-content: start; gap: var(--s3); overflow: hidden; } .song-disc { position: relative; width: min(260px, 72%); aspect-ratio: 1; border-radius: 50%; margin: 10px auto; display: grid; place-items: center; background: radial-gradient(circle, var(--surface) 0 8%, #111 9% 17%, transparent 18%), repeating-radial-gradient(circle, #191827 0 5px, #2a2542 6px 9px); box-shadow: 0 18px 45px rgba(0,0,0,.28); } .song-disc::before { content: ""; position: absolute; width: 28%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); } .song-disc span { z-index: 1; color: #fff; display: grid; } .song-disc svg { width: 30px; height: 30px; } .song-disc.spinning { animation: song-spin 2.4s linear infinite; } @keyframes song-spin { to { transform: rotate(360deg); } } .song-result { display: grid; gap: var(--s3); justify-items: start; } .song-result audio { width: 100%; } .song-final-lyrics { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; } .song-final-lyrics summary { font-weight: 700; cursor: pointer; } .song-final-lyrics pre { white-space: pre-wrap; font: inherit; line-height: 1.75; max-height: 330px; overflow: auto; color: var(--text-2); } .text-warning { color: var(--warning, #b7791f); } .card-subtle { padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--card-2) 82%, transparent); backdrop-filter: blur(12px); } .tts-wave { height: 88px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); } .tts-wave i { display: block; width: 7px; height: 18px; border-radius: 99px; background: var(--brand); opacity: .35; } .tts-wave.playing i { animation: tts-pulse .9s ease-in-out infinite alternate; opacity: .9; } .tts-wave.playing i:nth-child(2n) { animation-delay: -.25s; } .tts-wave.playing i:nth-child(3n) { animation-delay: -.5s; } @keyframes tts-pulse { from { height: 16px; } to { height: 62px; } } @media (max-width: 980px) { .tts-shell { grid-template-columns: 1fr; } .tts-result-panel { position: static; min-height: 390px; } .song-shell { grid-template-columns: 1fr; } .song-result-panel { position: static; min-height: 430px; } } @media (max-width: 560px) { .tts-speaker-grid, .tts-directions, .tts-experience-switch { grid-template-columns: 1fr; } .form-span-2 { grid-column: auto; } .tts-compose, .tts-result-panel { padding: var(--s3); } .song-compose, .song-result-panel { padding: var(--s3); } } /* ============================================================ §3 TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { margin: 0 0 0.45em; line-height: 1.25; font-weight: 800; color: var(--text); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin: 0 0 1em; } .page-title { font-size: var(--fs-3xl); margin-block-end: var(--s1); } .page-sub { color: var(--text-2); margin-block-end: var(--s6); } .muted { color: var(--text-2); } .sub { color: var(--text-2); } .text-danger { color: var(--danger); } .gradient-text, .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-kicker { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--primary-2); background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px; margin-block-end: var(--s3); } /* ============================================================ §4 PRIMITIVES ============================================================ */ /* ---------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; transition: border-color var(--t), background var(--t), color var(--t), transform var(--t), box-shadow var(--t); } .btn:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); } .btn:active { transform: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } .btn svg { width: 17px; height: 17px; flex: none; } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-primary); box-shadow: none; } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-primary); box-shadow: none; } :root[data-theme="light"] .btn-primary { box-shadow: none; } .btn-danger { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); } .btn-danger:hover { border-color: var(--danger); color: var(--danger); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { color: var(--text); background: var(--glass); } .btn-sm { min-height: 36px; padding: 6px 14px; font-size: var(--fs-xs); } .btn-lg { min-height: 52px; padding: 14px 28px; font-size: var(--fs-md); } .btn-block { width: 100%; } /* in-flight state used by [data-once] forms */ .btn.busy { position: relative; color: transparent !important; pointer-events: none; } .btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--on-primary); animation: spin 0.8s linear infinite; } .btn.busy:not(.btn-primary)::after { border-color: color-mix(in srgb, var(--text) 30%, transparent); border-top-color: var(--text); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); cursor: pointer; transition: color var(--t), background var(--t), border-color var(--t); } .icon-btn:hover { color: var(--text); background: var(--glass); } .icon-btn svg { width: 20px; height: 20px; } .pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 15px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; transition: color var(--t), border-color var(--t), background var(--t); } .pill:hover { color: var(--text); border-color: var(--border-strong); } .pill svg { width: 16px; height: 16px; } .pill.credits { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); } .pill.upgrade { color: var(--primary-2); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-soft); } /* ------------------------------------------------------ forms */ .form-group { margin-block-end: var(--s5); } .form-group > label { display: block; margin-block-end: 7px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); } .input, select.input, textarea.input { display: block; width: 100%; min-height: 44px; padding: 10px 14px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: var(--fs-md); transition: border-color var(--t), box-shadow var(--t); } textarea.input { min-height: 96px; resize: vertical; } .input::placeholder { color: var(--text-3); opacity: 1; } .input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--primary); box-shadow: none; } .input:disabled { opacity: 0.55; cursor: not-allowed; } .input.is-invalid { border-color: var(--danger); } .input.is-invalid:focus-visible { outline-color: var(--danger); box-shadow: none; } .input.is-valid { border-color: color-mix(in srgb, var(--success) 55%, transparent); } .hint { margin-block-start: 6px; font-size: var(--fs-xs); color: var(--text-3); } .field-error { margin-block-start: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--danger); } .checkbox-row, .check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); font-weight: 400; } .checkbox-row input[type="checkbox"], .check-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--brand); cursor: pointer; } .checkbox-row input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; } /* password field with visibility toggle */ .password-wrap { position: relative; } .password-wrap .input { padding-inline-end: 52px; } .password-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 5px; transform: translateY(-50%); width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-3); cursor: pointer; } .password-toggle:hover { color: var(--text); background: var(--glass); } .password-toggle svg { width: 18px; height: 18px; } input[type="range"] { accent-color: var(--brand); width: 100%; } .range-row { display: flex; align-items: center; gap: var(--s3); } .range-val { min-width: 64px; text-align: center; font-weight: 800; color: var(--primary-2); background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-variant-numeric: tabular-nums; } .req-dot { color: var(--danger); font-weight: 800; } /* segmented radio group (aspect ratio / resolution pickers) */ .segmented-control { display: flex; flex-wrap: wrap; gap: var(--s2); } .segmented-control label { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; min-width: 72px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t); } .segmented-control label:hover { border-color: var(--border-strong); color: var(--text); } .segmented-control input { position: absolute; opacity: 0; pointer-events: none; } .segmented-control label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--text); } .segmented-control label:has(input:focus-visible) { box-shadow: var(--ring); } .segmented-control small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); } /* aspect-ratio picker — rich, self-explanatory cards (see aspect_option macro) */ .aspect-picks { display: flex; flex-wrap: wrap; gap: var(--s2); } .aspect-pick { position: relative; flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); } .aspect-pick:hover { border-color: var(--border-strong); } .aspect-pick input { position: absolute; opacity: 0; pointer-events: none; } .aspect-pick:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .aspect-pick:has(input:focus-visible) { box-shadow: var(--ring); } .ap-figure { display: grid; place-items: center; width: 36px; height: 32px; margin-bottom: 3px; } .ap-shape { border: 1.5px solid var(--text-3); border-radius: 3px; background: color-mix(in srgb, var(--text-3) 16%, transparent); transition: border-color var(--t), background var(--t); } .aspect-pick:hover .ap-shape { border-color: var(--text-2); } .aspect-pick:has(input:checked) .ap-shape { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 30%, transparent); } .ap-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); } .ap-ratio { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); letter-spacing: .02em; } .aspect-pick:has(input:checked) .ap-ratio { color: var(--primary-2); } .ap-hint { font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); line-height: 1.35; } /* dropzone (generate / studio / admin uploads) */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 110px; padding: var(--s5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-2); color: var(--text-2); font-size: var(--fs-sm); text-align: center; cursor: pointer; transition: border-color var(--t), background var(--t); } .dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); } .dropzone:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; } .dropzone svg { width: 26px; height: 26px; color: var(--text-3); } .dropzone.is-invalid { border-color: var(--danger); background: var(--danger-tint); } /* the real input covers the zone: clickable + keyboard-focusable, visually silent */ .dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .previews { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s2); } .previews .pv { position: relative; width: 74px; height: 74px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--bg-3); } .previews .pv img { width: 100%; height: 100%; object-fit: cover; display: block; } .previews .name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-2); font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------ cards */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow-soft); } .card-title { font-size: var(--fs-lg); font-weight: 800; margin-block-end: var(--s4); } .section-block { margin-block-end: var(--s8); } /* ---------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-2); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); white-space: nowrap; } .badge.completed { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-tint); } .badge.failed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-tint); } .badge.processing, .badge.pending { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-tint); } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--border-2); font-size: var(--fs-xs); color: var(--text-2); } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; text-decoration: none; transition: color var(--t), border-color var(--t), background var(--t); } .chip:hover { color: var(--text); border-color: var(--border-strong); } .chip.active { background: var(--brand); border-color: transparent; color: var(--on-primary); } /* ---------------------------------------------------- avatar */ .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--bg-3); border: 1px solid var(--border); display: block; } .avatar-lg { width: 84px; height: 84px; } .avatar-toggle { display: inline-flex; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; } .avatar-toggle:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; } /* ----------------------------------------------------- flash */ .flash-wrap { position: fixed; inset-block-end: var(--s5); inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--z-flash); display: flex; flex-direction: column; gap: var(--s2); width: min(440px, calc(100vw - 32px)); pointer-events: none; } [dir="rtl"] .flash-wrap { transform: translateX(50%); } .flash { pointer-events: auto; padding: 13px 18px; border-radius: var(--radius-sm); background: var(--card-strong); border: 1px solid var(--border); border-inline-start: 3px solid var(--primary); box-shadow: var(--shadow); color: var(--text); font-size: var(--fs-sm); font-weight: 700; animation: flash-in 0.28s var(--ease); } .flash-success { border-inline-start-color: var(--success); } .flash-error { border-inline-start-color: var(--danger); } .flash-info { border-inline-start-color: var(--primary); } @keyframes flash-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------- dropdowns */ .menu-wrap { position: relative; } .menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; min-width: 200px; padding: var(--s2); background: color-mix(in srgb, var(--card-strong) 90%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); display: none; z-index: var(--z-modal); } .menu.open { display: block; animation: menu-pop 0.16s var(--ease); } @keyframes menu-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-align: start; cursor: pointer; } .menu a:hover, .menu button:hover { background: var(--glass); color: var(--text); } .menu svg { width: 17px; height: 17px; } .menu form { margin: 0; } /* ---------------------------------------------------- modal */ .backdrop { position: fixed; inset: 0; background: rgba(5, 4, 12, 0.55); backdrop-filter: blur(2px); z-index: var(--z-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--t); } .backdrop.show { opacity: 1; pointer-events: auto; } .modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--s4); background: rgba(5, 4, 12, 0.6); } .modal-overlay.open { display: flex; } .modal { width: min(420px, 100%); background: color-mix(in srgb, var(--card-strong) 92%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--s6); animation: menu-pop 0.18s var(--ease); } .modal h2 { font-size: var(--fs-xl); margin-block-end: var(--s2); } .modal p { color: var(--text-2); font-size: var(--fs-sm); margin-block-end: var(--s5); } .modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); } /* ---------------------------------------------------- tables */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; background: linear-gradient(to right, var(--card) 30%, transparent), linear-gradient(to left, var(--card) 30%, transparent), radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.28), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.28), transparent); background-position: 0 0, 100% 0, 0 0, 100% 0; background-repeat: no-repeat; background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .tbl th { padding: 11px 14px; text-align: start; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl td { padding: 13px 14px; vertical-align: middle; border-bottom: 1px solid var(--border-2); color: var(--text-2); } .tbl td b, .tbl td strong { color: var(--text); } .tbl tbody tr:hover td { background: var(--glass); } .tbl .amount-pos { color: var(--success); font-weight: 800; font-variant-numeric: tabular-nums; } .tbl .amount-neg { color: var(--danger); font-weight: 800; font-variant-numeric: tabular-nums; } /* ------------------------------------------------ pagination */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-block-start: var(--s7); } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; } .pagination a:hover { border-color: var(--primary); color: var(--text); } .pagination .current { background: var(--brand); border-color: transparent; color: var(--on-primary); } /* ---------------------------------------------- empty states */ .empty { text-align: center; padding: var(--s9) var(--s5); color: var(--text-2); } .empty svg { width: 30px; height: 30px; } .empty .e-icon, .empty > svg:first-child { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--border); color: var(--primary-2); margin-block-end: var(--s4); } .empty .e-icon svg { width: 30px; height: 30px; } .empty h3 { font-size: var(--fs-xl); } .empty p { color: var(--text-3); max-width: 46ch; margin-inline: auto; } .empty-action { margin-block-start: var(--s5); } /* ------------------------------------------ spinner/progress */ .spinner { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin 0.9s linear infinite; } .spinner.sm { width: 20px; height: 20px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .progress-track { width: min(360px, 100%); height: 6px; border-radius: var(--radius-pill); background: var(--bg-3); overflow: hidden; } .progress-track .bar { width: 38%; height: 100%; border-radius: var(--radius-pill); background: var(--grad); animation: slide 1.5s ease-in-out infinite; } @keyframes slide { 0% { transform: translateX(-160%); } 100% { transform: translateX(380%); } } [dir="rtl"] .progress-track .bar { animation-name: slide-rtl; } @keyframes slide-rtl { 0% { transform: translateX(160%); } 100% { transform: translateX(-380%); } } /* ------------------------------------------------- misc bits */ .grow { flex: 1; } .spacer { flex: 1; } .code-block, .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); direction: ltr; text-align: left; } .code-block { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s4); overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-2); } .danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-tint); border-radius: var(--radius); padding: var(--s5); } .danger-zone h3, .danger-zone .danger-icon { color: var(--danger); } /* points warning (insufficient balance) */ .points-warning { display: flex; } .points-warning[hidden] { display: none; } .points-warning:not([hidden]) { flex-wrap: wrap; align-items: center; gap: var(--s2); margin-block-start: var(--s3); padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-tint); color: var(--text); font-size: var(--fs-sm); font-weight: 700; } .points-warning a { color: var(--primary-2); text-decoration: underline; } /* ============================================================ §5 AUTH PAGES ============================================================ */ .auth-wrap { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: var(--s5); } .auth-card { width: min(460px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(24px, 5vw, 44px); text-align: center; } .auth-card .logo { display: inline-flex; margin-block-end: var(--s4); } .auth-card h1 { font-size: var(--fs-2xl); margin-block-end: var(--s1); } .auth-card .sub { margin-block-end: var(--s6); } .auth-card form { text-align: start; } .auth-card .alt { margin-block-start: var(--s5); margin-block-end: 0; font-size: var(--fs-sm); color: var(--text-2); } .auth-card .alt a { font-weight: 800; } /* ============================================================ §6 ERROR PAGES ============================================================ */ .error-page { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s5); } .error-page .code { font-size: clamp(72px, 16vw, 128px); font-weight: 800; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: inherit; } .error-page h2 { font-size: var(--fs-2xl); margin-block-start: var(--s3); } .error-page p { color: var(--text-2); margin-block-end: var(--s6); } /* ============================================================ §7 BRAND LOCKUP ============================================================ */ .brand-lockup { display: inline-flex; align-items: center; gap: 10px; } .brand-logo-img { height: 40px; width: auto; display: block; } .brand-lockup-compact .brand-logo-img { height: 30px; } /* theme-dependent logo swap: templates render both, CSS shows one */ .brand-logo-lightmode { display: none; } :root[data-theme="light"] .brand-logo-darkmode { display: none; } :root[data-theme="light"] .brand-logo-lightmode { display: block; } .brand-admin-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; color: var(--primary-2); background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 9px; } /* ============================================================ §8 APP SHELL — rail (desktop) + drawer sidebar (≤1024) + topbar ============================================================ */ .layout { min-height: 100vh; min-height: 100svh; /* the off-canvas drawer must never widen the page */ overflow-x: clip; } .main { --main-pad: clamp(16px, 4vw, 40px); min-height: 100vh; min-height: 100svh; padding: 0 var(--main-pad) var(--s8); } .main:focus { outline: none; } /* escape .main's gutters for full-bleed sections */ .full-bleed { margin-inline: calc(var(--main-pad) * -1); } .container { max-width: 1280px; margin-inline: auto; } /* ------------------------------------------------- icon rail */ .app-rail { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--rail-w); z-index: var(--z-rail); display: flex; flex-direction: column; align-items: center; gap: 2px; padding-block: var(--s4); padding-inline: var(--s2); background: var(--sidebar); backdrop-filter: blur(14px); border-inline-end: 1px solid var(--border-2); overflow-y: auto; overflow-x: hidden; } .rail-brand { display: inline-flex; margin-block-end: var(--s3); flex: none; } .rail-brand .brand-logo-img { height: 34px; } .app-rail > a, .app-rail > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 52px; padding: 6px 2px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font-size: 10px; font-weight: 700; text-align: center; cursor: pointer; transition: color var(--t), background var(--t); } .app-rail > a span, .app-rail > button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .app-rail svg { width: 21px; height: 21px; flex: none; } .app-rail > a:hover, .app-rail > button:hover { color: var(--text); background: var(--glass); } .app-rail > a.active { color: var(--primary-2); background: var(--primary-soft); } .app-rail > a.active::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: -8px; transform: translateY(-50%); width: 3px; height: 22px; border-radius: var(--radius-pill); background: var(--brand); } .rail-avatar-link .avatar { width: 34px; height: 34px; } .rail-spacer { flex: 1; } .rail-count { font-size: 10.5px; font-weight: 800; color: var(--accent-text); } .rail-points svg { color: var(--accent-text); } /* theme toggle icon swap (rail + strip + topbar share it) */ .theme-toggle .theme-icon-moon, .theme-toggle .theme-icon-sun { display: inline-flex; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; } /* --------------------------------------------- drawer sidebar */ .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(var(--sidebar-w), 86vw); z-index: var(--z-drawer); display: flex; flex-direction: column; gap: 2px; padding: var(--s5) var(--s4); background: var(--card-strong); border-inline-end: 1px solid var(--border); overflow-y: auto; transform: translateX(-106%); visibility: hidden; transition: transform 0.24s var(--ease), visibility 0.24s; } [dir="rtl"] .sidebar { transform: translateX(106%); } .sidebar.open { transform: none; visibility: visible; box-shadow: var(--shadow-pop); } .sidebar .logo { display: inline-flex; margin-block-end: var(--s4); } .sidebar .logo .brand-logo-img { height: 36px; } .sidebar-user-strip { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); margin-block-end: var(--s3); border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-2); } .sidebar-user-strip a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); min-height: 40px; padding-inline: 4px; } .sidebar-user-strip a:first-child { padding-inline: 0; } .sidebar-user-strip b { color: var(--accent-text); } .sidebar-user-strip svg { width: 18px; height: 18px; } .sidebar-user-strip .icon-btn { width: 40px; height: 40px; } .sidebar-user-strip > a:nth-child(2) { flex: 1; } .nav-link { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; position: relative; transition: color var(--t), background var(--t); } .nav-link svg { width: 20px; height: 20px; flex: none; } .nav-link:hover { color: var(--text); background: var(--glass); } .nav-link.active { color: var(--text); background: var(--primary-soft); } .nav-link.active::before { content: ""; position: absolute; inset-inline-start: -16px; inset-block-start: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: var(--radius-pill); background: var(--brand); } .nav-sep { height: 1px; background: var(--border-2); margin-block: var(--s3); } .upgrade-card { margin-block-start: var(--s3); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grad-soft); text-align: center; } .upgrade-card .crown { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-2); margin-block-end: var(--s2); } .upgrade-card .crown svg { width: 20px; height: 20px; } .upgrade-card h4 { margin-block-end: 4px; } .upgrade-card p { font-size: var(--fs-xs); color: var(--text-2); margin-block-end: var(--s3); } /* ----------------------------------------------------- topbar */ .topbar { position: sticky; inset-block-start: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: var(--s2); min-height: var(--topbar-h); margin-inline: calc(var(--main-pad) * -1); margin-block-end: var(--s5); padding: 8px var(--main-pad); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-block-end: 1px solid var(--border-2); } .top-brand { display: inline-flex; flex: none; } .top-brand .brand-logo-img { height: 28px; } .topnav-scroll { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .topnav-scroll::-webkit-scrollbar { display: none; } .topnav-scroll a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; transition: color var(--t), background var(--t); } .topnav-scroll a:hover { color: var(--text); background: var(--glass); } .topnav-scroll a.active { color: var(--text); background: var(--primary-soft); } .hamburger { flex: none; } /* -------------------------------------- shell responsiveness */ @media (min-width: 1025px) { .main { margin-inline-start: var(--rail-w); } .hamburger, .top-brand { display: none; } } @media (max-width: 1024px) { .app-rail { display: none; } .topnav-scroll { display: none; } } @media (max-width: 560px) { .pill.upgrade { display: none; } .topbar .pill.credits { padding-inline: 11px; } } /* ============================================================ §9 TEMPLATE CARDS (shared: home / templates / favorites) ============================================================ */ .t-grid, .kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); } .t-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--card-2); border: 1px solid var(--border-2); transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .t-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-soft); } .t-card:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; } .t-card > a { position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .t-card .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .t-card:hover .thumb { transform: scale(1.05); } .t-card .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 4, 14, 0.88) 0%, rgba(5, 4, 14, 0.12) 46%, rgba(5, 4, 14, 0.05) 100%); pointer-events: none; } .t-card .badge-type { position: absolute; z-index: 3; inset-block-start: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(8, 7, 18, 0.62); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--on-media); font-size: var(--fs-xs); font-weight: 700; pointer-events: none; } .t-card .badge-type svg { width: 14px; height: 14px; } .t-card .fav-btn { position: absolute; z-index: 3; inset-block-start: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(8, 7, 18, 0.55); backdrop-filter: blur(8px); color: var(--on-media); cursor: pointer; transition: transform var(--t), color var(--t), background var(--t), opacity var(--t); } .t-card .fav-btn:hover { transform: scale(1.08); } .t-card .fav-btn svg { width: 19px; height: 19px; } .t-card .fav-btn.faved { color: var(--fav); background: color-mix(in srgb, var(--fav) 24%, transparent); border-color: color-mix(in srgb, var(--fav) 50%, transparent); } .t-card .fav-btn.faved svg { fill: currentColor; fill-opacity: 1; } .t-card .fav-btn.busy { opacity: 0.55; pointer-events: none; } .t-card .meta { position: absolute; z-index: 2; inset-inline: 12px; inset-block-end: 10px; pointer-events: none; } .t-card .meta h3 { margin: 0 0 2px; font-size: var(--fs-md); color: var(--on-media); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .t-card .uses { display: inline-flex; align-items: center; gap: 5px; color: var(--on-media-dim); font-size: var(--fs-xs); font-weight: 700; } .t-card .uses svg { width: 13px; height: 13px; } .t-card .cost-tag { position: absolute; z-index: 3; inset-block-end: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(8, 7, 18, 0.62); backdrop-filter: blur(8px); border: 1px solid rgba(255, 196, 107, 0.35); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 800; pointer-events: none; } .t-card .cost-tag { color: var(--accent-on-media); } .t-card .cost-tag svg { width: 13px; height: 13px; } .thumb-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--grad-soft); color: var(--primary-2); } .thumb-placeholder svg { width: 34px; height: 34px; } /* horizontal scroll strip of square cards */ .trend-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 24vw, 260px); gap: var(--s4); overflow-x: auto; padding-block-end: var(--s2); scroll-snap-type: x proximity; } .trend-row .t-card { aspect-ratio: 1 / 1; scroll-snap-align: start; } /* ============================================================ §10 HOME (production console) ============================================================ */ .creator-console { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s6); align-items: stretch; padding: clamp(20px, 3.4vw, 44px); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(18px); margin-block-end: var(--s7); } .console-bg-video, .chroma-video-canvas.console-bg-video { display: none; } .creator-console .chroma-video-canvas, .creator-console video.console-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.5; display: block; } .creator-console video.console-bg-video.chroma-source-video { display: none; } .console-bg-fallback { position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--bg-2) 90%, transparent); } .workspace-panel { position: relative; z-index: 1; display: flex; flex-direction: column; } .workspace-panel-head h1 { font-size: var(--fs-display); line-height: 1.2; margin-block-end: var(--s2); } .workspace-panel-head p { color: var(--text-2); max-width: 52ch; } .prompt-console { margin-block-start: auto; display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(16px); } .prompt-console-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .prompt-console-tabs::-webkit-scrollbar { display: none; } .prompt-console-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; transition: color var(--t), background var(--t), border-color var(--t); } .prompt-console-tabs a:hover { color: var(--text); background: var(--glass); } .prompt-console-tabs a.active { color: var(--on-primary); background: var(--brand); } .prompt-input-wrap { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); align-items: start; padding: var(--s3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); cursor: text; } .prompt-input-wrap:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; } .prompt-input-wrap svg { width: 20px; height: 20px; color: var(--primary-2); margin-block-start: 4px; } .prompt-input-wrap textarea { border: 0; background: none; resize: none; color: var(--text); font: inherit; min-height: 84px; padding: 0; } .prompt-input-wrap textarea:focus { outline: none; } .prompt-input-wrap textarea::placeholder { color: var(--text-3); } .prompt-console-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .prompt-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-xs); color: var(--text-2); } .prompt-chips b { color: var(--accent-text); } .prompt-chips a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; } .prompt-chips a:hover { color: var(--text); } .workspace-stage { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(16px); } .stage-nav { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); } .stage-nav span { color: var(--text-2); } .stage-nav a { color: var(--text-3); } .stage-nav a:hover { color: var(--text); } .stage-copy span { display: inline-block; font-size: var(--fs-xs); font-weight: 800; color: var(--primary-2); margin-block-end: 4px; } .stage-copy h2 { font-size: var(--fs-xl); margin-block-end: 4px; } .stage-copy p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; } .stage-media-strip { margin-block-start: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } .stage-media-card { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--card-2); } .stage-media-card img, .stage-media-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .stage-media-card strong { position: absolute; inset-inline: 8px; inset-block-end: 8px; z-index: 1; color: var(--on-media); font-size: var(--fs-xs); text-shadow: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .stage-media-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 4, 14, 0.7), transparent 55%); } .stage-media-card:hover { border-color: var(--border-strong); } /* tool dock */ .tool-dock { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin-block-end: var(--s7); } .quick-tools-section .tool-dock { margin-block-end: 0; } .tool-dock-item { display: flex; flex-direction: column; gap: 6px; padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--text); transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .tool-dock-item:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-soft); color: var(--text); } .tool-dock-item > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-2); margin-block-end: 4px; } .tool-dock-item > span svg { width: 20px; height: 20px; } .tool-dock-item b { font-size: var(--fs-md); } .tool-dock-item small { color: var(--text-3); font-size: var(--fs-xs); } /* feed sections */ .studio-feed { margin-block-end: var(--s8); } .feed-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); margin-block-end: var(--s4); } .feed-heading h2 { margin: 0; font-size: var(--fs-2xl); } .view-all { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--primary-2); } .studio-chips { margin-block-end: var(--s4); } /* home responsiveness */ @media (max-width: 1024px) { .creator-console { grid-template-columns: 1fr; } .workspace-stage { display: none; } } @media (max-width: 560px) { .t-grid, .kit-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); } .trend-row { grid-auto-columns: 74vw; } .creator-console { padding: var(--s4); } } /* ============================================================ §11 PAGE HEADS + CATALOG + CREATIONS + PRICING + PROFILE + TX ============================================================ */ /* shared page header (creations/favorites/profile/tx/pricing/studio) */ .studio-page-head, .catalog-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-block-end: var(--s6); } .studio-page-head .page-sub, .catalog-head .page-sub { margin-block-end: 0; } .compact-head { margin-block-end: var(--s6); } .accent-text { color: var(--accent-text); } /* search command bar (templates catalog + studio) */ .studio-command { display: flex; align-items: center; gap: var(--s2); width: min(560px, 100%); padding: 6px; padding-inline-start: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--input-bg); } .studio-command:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; } .studio-command svg { width: 19px; height: 19px; flex: none; color: var(--text-3); } .studio-command input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; min-height: 40px; } .studio-command input:focus { outline: none; } .studio-command input::placeholder { color: var(--text-3); } .studio-command .btn { border-radius: var(--radius-pill); min-height: 40px; } .filter-stack { display: flex; flex-direction: column; gap: var(--s2); margin-block-end: var(--s5); } /* creations job cards */ .job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); } .job-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .job-card .media { aspect-ratio: 4 / 3; background: var(--bg-2); display: flex; align-items: center; justify-content: center; border-block-end: 1px solid var(--border-2); position: relative; } .job-card .media img, .job-card .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .job-card .media a { position: absolute; inset: 0; } .job-card .media audio { width: min(88%, 320px); } .job-card .media .danger-icon { color: var(--text-3); } .job-card .media [data-poll-job] { display: flex; flex-direction: column; align-items: center; gap: var(--s3); color: var(--text-2); font-size: var(--fs-sm); } .job-card .body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); } .job-card .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; } .job-card .job-meta { color: var(--text-3); font-size: var(--fs-xs); } .inline-coin { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 700; } .inline-coin svg { width: 14px; height: 14px; } .creation-del { margin-block-start: auto; } .creation-del .btn { width: 100%; } /* pricing */ .pricing-hero .pricing-note { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-sm); font-weight: 700; } .pricing-hero .pricing-note svg { width: 16px; height: 16px; } .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); align-items: stretch; } .price-card { position: relative; display: flex; flex-direction: column; gap: var(--s2); text-align: center; padding-block-start: var(--s7); } .price-card .tag { position: absolute; inset-block-start: -12px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--grad); border: 0; color: var(--on-primary); font-weight: 800; padding: 5px 14px; } [dir="rtl"] .price-card .tag { transform: translateX(50%); } .price-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-soft); } .price-card h3 { margin: 0; font-size: var(--fs-lg); } .points-big { font-size: var(--fs-2xl); font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .points-big small { font-size: var(--fs-sm); font-weight: 700; } .price-card .bonus { min-height: 22px; color: var(--success); font-size: var(--fs-sm); font-weight: 700; } .price-card .price { font-size: var(--fs-xl); font-weight: 800; color: var(--text); margin-block-end: var(--s2); } .price-card form { margin-block-start: auto; } .pricing-demo-note { text-align: center; margin-block-start: var(--s5); } .full-width { width: 100%; } /* profile */ .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .avatar-field { display: flex; align-items: center; gap: var(--s4); } .avatar-field .input { flex: 1; } /* transactions */ .muted-cell { color: var(--text-3); } .card.table-wrap { padding: var(--s2) var(--s4); } /* responsive */ @media (max-width: 768px) { .form-grid-2 { grid-template-columns: 1fr; } .job-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } } /* ============================================================ §12 GENERATE PAGE ============================================================ */ .gen-head { align-items: center; } .gen-head > div:last-child { min-width: 0; } .gen-head h1 { font-size: var(--fs-2xl); margin-block-end: 4px; } .gen-head .sub { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-sm); } .gen-cover { flex: none; width: 96px; height: 96px; border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid var(--border); background: var(--card-2); } .gen-cover img, .gen-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gen-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s5); align-items: start; } .cost-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 12px 16px; margin-block-end: var(--s5); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft); font-weight: 700; font-size: var(--fs-sm); } .cost-line .val { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; } .cost-line .val svg { width: 17px; height: 17px; } .field-note { color: var(--text-3); font-weight: 400; } .resolution-picks { display: flex; flex-wrap: wrap; gap: var(--s2); } .resolution-pick { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; min-width: 96px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); cursor: pointer; transition: border-color var(--t), background var(--t); } .resolution-pick:hover { border-color: var(--border-strong); } .resolution-pick input { position: absolute; opacity: 0; pointer-events: none; } .resolution-pick .resolution-name { font-weight: 800; font-size: var(--fs-sm); color: var(--text-2); } .resolution-pick small { font-size: var(--fs-xs); color: var(--text-3); } .resolution-pick:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .resolution-pick:has(input:checked) .resolution-name { color: var(--text); } .resolution-pick:has(input:focus-visible) { box-shadow: var(--ring); } .gen-balance { text-align: center; margin-block-start: var(--s3); } .gen-balance a { text-decoration: underline; text-underline-offset: 3px; } /* result panel */ .result-panel { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--s4)); display: flex; flex-direction: column; justify-content: center; min-height: 380px; text-align: center; } .result-panel > div { display: flex; flex-direction: column; align-items: center; gap: var(--s3); } .result-idle-icon { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--border); color: var(--primary-2); } .result-idle-icon svg { width: 30px; height: 30px; } .result-spinner { margin-block-end: var(--s2); } .busy-elapsed { font-variant-numeric: tabular-nums; margin: 0; } .result-media { width: 100%; } .result-media img, .result-media video { width: 100%; max-height: 58vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-2); } .result-media audio { width: 100%; } .result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); } .result-title { display: inline-flex; align-items: center; gap: 8px; } .result-title svg { width: 20px; height: 20px; color: var(--accent-text); } .error-box { width: 100%; padding: var(--s4); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-tint); color: var(--danger); font-size: var(--fs-sm); font-weight: 700; word-break: break-word; } @media (max-width: 1024px) { .gen-layout { grid-template-columns: 1fr; } .result-panel { position: static; min-height: 300px; } } /* ============================================================ §13 LANDING (cinema shell) ============================================================ */ .cinema-shell { min-height: 100vh; min-height: 100svh; } .cinema-main { padding-inline: clamp(16px, 5vw, 56px); padding-block-end: var(--s8); max-width: 1360px; margin-inline: auto; } .cinema-hero { position: relative; display: flex; flex-direction: column; overflow: hidden; border-block-end: 1px solid var(--border-2); margin-block-end: var(--s8); } .cinema-bg-video, .cinema-hero .chroma-video-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.45; } video.cinema-bg-video.chroma-source-video { display: none; } .cinema-bg-fallback { position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--bg-2) 90%, transparent); } .cinema-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s4); padding: 14px clamp(16px, 5vw, 56px); } .cinema-nav.scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); } .cinema-nav .top-brand { display: inline-flex; } .cinema-nav-links { display: flex; gap: 2px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; } .cinema-nav-links::-webkit-scrollbar { display: none; } .cinema-nav-links a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; } .cinema-nav-links a:hover { color: var(--text); background: var(--glass); } .cinema-nav-actions { display: flex; align-items: center; gap: var(--s2); } .cinema-command { position: relative; z-index: 1; display: grid; gap: var(--s6); width: min(860px, 100%); margin-inline: auto; padding: clamp(40px, 8vh, 96px) clamp(16px, 5vw, 56px) clamp(40px, 9vh, 110px); text-align: center; } .cinema-copy h1 { font-size: clamp(36px, 6.4vw, 64px); line-height: 1.16; margin-block-end: var(--s3); } .cinema-copy p { color: var(--text-2); font-size: var(--fs-lg); max-width: 58ch; margin-inline: auto; } .lp-kicker { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; color: var(--primary-2); background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; margin-block-end: var(--s3); } .cinema-command .prompt-console { text-align: start; box-shadow: var(--shadow); } /* launch tiles */ .launch-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); margin-block-end: var(--s8); } .launch-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--text); transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .launch-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-soft); color: var(--text); } .launch-tile > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-2); margin-block-end: 4px; } .launch-tile > span svg { width: 20px; height: 20px; } .launch-tile b { font-size: var(--fs-md); } .launch-tile small { color: var(--text-3); font-size: var(--fs-xs); } /* kit rail: horizontal scroll of template cards */ .kit-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(190px, 22vw, 250px); gap: var(--s4); overflow-x: auto; padding-block-end: var(--s2); scroll-snap-type: x proximity; } .kit-rail .t-card { scroll-snap-align: start; } /* movie split section */ .cinematic-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; margin-block-end: var(--s8); padding: clamp(20px, 3.5vw, 44px); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--grad-soft); } .split-media { aspect-ratio: 16 / 10; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(135deg, var(--card-2), var(--bg-3)); background-size: cover; background-position: center; } .split-copy h2 { font-size: var(--fs-2xl); } .split-copy p { color: var(--text-2); margin-block-end: var(--s5); } .floating-pricing { margin-block-end: var(--s8); } /* landing footer */ .lp-footer { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding-block: var(--s7) var(--s5); border-block-start: 1px solid var(--border-2); text-align: center; } .lp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); } .lp-footer-links a { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; } .lp-footer-links a:hover { color: var(--text); } .lp-footer-copy { color: var(--text-3); font-size: var(--fs-xs); margin: 0; } /* App Store landing — the anonymous web experience */ .app-download-page { min-width: 320px; background: radial-gradient(circle at 12% 4%, var(--primary-soft), transparent 31rem), radial-gradient(circle at 92% 28%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 28rem), var(--bg); } .app-landing { min-height: 100vh; min-height: 100svh; overflow: hidden; color: var(--text); } .app-landing-header { position: relative; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 3vw, 48px); width: min(1280px, calc(100% - 40px)); min-height: 86px; margin-inline: auto; border-block-end: 1px solid var(--border-2); } .app-landing-brand { display: inline-flex; align-items: center; } .app-landing-brand .brand-logo-img { height: 38px; max-width: 118px; } .app-landing-nav { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 28px); } .app-landing-nav a, .app-admin-link, .app-language-link { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; } .app-landing-nav a:hover, .app-admin-link:hover, .app-language-link:hover { color: var(--text); } .app-landing-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .app-language-link { display: inline-flex; align-items: center; gap: 7px; } .app-language-link svg { width: 17px; height: 17px; } .app-store-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; padding: 9px 22px; border: 1px solid color-mix(in srgb, var(--on-media) 18%, transparent); border-radius: 17px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-soft); direction: ltr; text-align: left; transition: transform var(--t), box-shadow var(--t), background var(--t); } .app-store-button:hover { color: var(--bg); transform: translateY(-2px); box-shadow: var(--shadow); } .app-store-button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .app-store-button-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .app-store-button-icon svg { width: 29px; height: 29px; } .app-store-button span:last-child { display: grid; gap: 1px; } .app-store-button small { color: color-mix(in srgb, var(--bg) 72%, transparent); font-size: 10px; line-height: 1; letter-spacing: 0.04em; } .app-store-button strong { color: var(--bg); font-size: 20px; line-height: 1.1; white-space: nowrap; } .app-store-button-compact { min-height: 48px; padding: 7px 15px; border-radius: 13px; box-shadow: none; } .app-store-button-compact .app-store-button-icon { width: 25px; height: 25px; } .app-store-button-compact .app-store-button-icon svg { width: 22px; height: 22px; } .app-store-button-compact strong { font-size: 15px; } .app-store-button-compact small { font-size: 8px; } .app-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr); align-items: center; gap: clamp(48px, 7vw, 110px); width: min(1200px, calc(100% - 40px)); min-height: calc(100svh - 86px); margin-inline: auto; padding-block: clamp(64px, 9vw, 118px); } .app-hero::before { content: ""; position: absolute; inset-inline-start: -22vw; inset-block-start: 18%; width: 45vw; height: 45vw; border: 1px solid var(--border-2); border-radius: 50%; pointer-events: none; } .app-hero-copy { position: relative; z-index: 3; } .app-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-block-end: 18px; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.025em; } .app-eyebrow svg { width: 15px; height: 15px; } .app-hero h1 { max-width: 720px; margin: 0; font-size: clamp(44px, 6.8vw, 86px); line-height: 0.98; letter-spacing: -0.04em; } [dir="rtl"] .app-hero h1 { letter-spacing: -0.025em; } .app-hero h1 span { display: block; margin-block-start: 9px; color: var(--primary-2); } .app-hero-lead { max-width: 650px; margin: 28px 0 0; color: var(--text-2); font-size: clamp(17px, 2vw, 21px); line-height: 1.8; } .app-hero-actions { display: flex; align-items: center; gap: 22px; margin-block-start: 34px; } .app-platform-note { display: grid; gap: 3px; max-width: 220px; } .app-platform-note b { font-size: var(--fs-sm); } .app-platform-note small { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; } .app-proof-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; } .app-proof-list li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--glass); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; } .app-proof-list svg { width: 14px; height: 14px; color: var(--primary-2); } .app-hero-visual { position: relative; display: grid; place-items: center; min-height: 690px; isolation: isolate; } .app-hero-visual::before { content: ""; position: absolute; width: min(88%, 530px); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); filter: blur(32px); z-index: -2; } .app-orbit { position: absolute; border: 1px solid var(--border); border-radius: 50%; z-index: -1; } .app-orbit-one { width: 540px; height: 540px; } .app-orbit-two { width: 650px; height: 650px; border-color: var(--border-2); } .app-device { position: relative; width: min(330px, 75vw); padding: 9px; border: 1px solid var(--border-strong); border-radius: 50px; background: var(--card-strong); box-shadow: var(--shadow-pop); transform: rotate(2.2deg); } [dir="rtl"] .app-device { transform: rotate(-2.2deg); } .app-device::after { content: ""; position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--on-media) 12%, transparent); border-radius: 41px; pointer-events: none; } .app-device img { display: block; width: 100%; border-radius: 41px; background: var(--bg); } .app-device-speaker { position: absolute; z-index: 2; inset-block-start: 20px; inset-inline-start: 50%; width: 88px; height: 24px; border-radius: var(--radius-pill); background: var(--bg); transform: translateX(-50%); } [dir="rtl"] .app-device-speaker { transform: translateX(50%); } .app-floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; min-width: 195px; padding: 13px 15px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--card-strong) 90%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); } .app-floating-card > span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 39px; height: 39px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-2); } .app-floating-card svg { width: 19px; height: 19px; } .app-floating-card div { display: grid; gap: 2px; } .app-floating-card b { font-size: var(--fs-sm); } .app-floating-card small { color: var(--text-3); font-size: 11px; } .app-floating-card-image { inset-inline-start: -4%; inset-block-start: 24%; } .app-floating-card-video { inset-inline-end: -5%; inset-block-end: 24%; } .app-capabilities, .app-experience, .app-download-panel, .app-landing-footer { width: min(1200px, calc(100% - 40px)); margin-inline: auto; } .app-capabilities { padding-block: clamp(84px, 10vw, 140px); } .app-section-heading { display: grid; justify-items: center; max-width: 760px; margin-inline: auto; margin-block-end: 48px; text-align: center; } .app-section-heading h2, .app-experience h2, .app-download-panel h2 { margin: 0; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.15; letter-spacing: -0.025em; } .app-section-heading p, .app-experience-copy > p, .app-download-panel p { margin: 18px 0 0; color: var(--text-2); font-size: var(--fs-lg); line-height: 1.75; } .app-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .app-capability { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 18px; min-height: 260px; padding: clamp(24px, 4vw, 36px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-soft); isolation: isolate; } .app-capability::before, .app-capability::after { content: ""; position: absolute; inset: 0; z-index: -2; } .app-capability::before { background-position: center; background-size: cover; opacity: 0.5; transition: transform 0.6s var(--ease), opacity 0.4s var(--ease); } .app-capability::after { z-index: -1; background: linear-gradient(to top, var(--bg), color-mix(in srgb, var(--bg) 38%, transparent)); } .app-capability:nth-child(1)::before { background-image: url("../img/cinematic/studio-image-background.png"); } .app-capability:nth-child(2)::before { background-image: url("../img/cinematic/studio-video-background.png"); } .app-capability:nth-child(3)::before { background-image: url("../img/cinematic/studio-voice-background.png"); } .app-capability:nth-child(4)::before { background-image: url("../img/cinematic/veyron-card-background.png"); } .app-capability:hover::before { opacity: 0.66; transform: scale(1.035); } .app-capability-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid color-mix(in srgb, var(--on-media) 16%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--bg) 66%, transparent); color: var(--accent-on-media); backdrop-filter: blur(12px); } .app-capability-icon svg { width: 25px; height: 25px; } .app-capability h3 { margin: 0 0 8px; color: var(--on-media); font-size: var(--fs-xl); } .app-capability p { max-width: 45ch; margin: 0; color: var(--on-media-dim); font-size: var(--fs-sm); line-height: 1.7; } .app-experience { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(48px, 8vw, 110px); align-items: start; padding-block: clamp(84px, 10vw, 140px); border-block: 1px solid var(--border-2); } .app-experience-copy { position: sticky; inset-block-start: 120px; } .app-step-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .app-step-list li { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding-block: 30px; border-block-end: 1px solid var(--border); } .app-step-list li:first-child { padding-block-start: 0; } .app-step-list li > span { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 18px; background: var(--primary-soft); color: var(--primary-2); font-size: var(--fs-sm); font-weight: 800; } .app-step-list h3 { margin: 2px 0 8px; font-size: var(--fs-xl); } .app-step-list p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.75; } .app-download-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(22px, 4vw, 42px); margin-block: clamp(82px, 10vw, 140px); padding: clamp(26px, 5vw, 52px); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: clamp(24px, 4vw, 38px); background: radial-gradient(circle at 85% 10%, var(--primary-soft), transparent 22rem), var(--card); box-shadow: var(--shadow); } .app-download-icon { width: clamp(82px, 10vw, 118px); aspect-ratio: 1; border-radius: 25%; box-shadow: var(--shadow-soft); } .app-download-panel .app-eyebrow { margin-block-end: 12px; } .app-download-panel h2 { font-size: clamp(28px, 3.8vw, 46px); } .app-landing-footer { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 30px; padding-block: 34px 44px; border-block-start: 1px solid var(--border-2); } .app-footer-brand { display: grid; gap: 12px; } .app-footer-brand .brand-logo-img { height: 34px; max-width: 105px; } .app-footer-brand p, .app-footer-copy { margin: 0; color: var(--text-3); font-size: var(--fs-xs); } .app-landing-footer nav { display: flex; flex-wrap: wrap; gap: 20px; } .app-landing-footer nav a { color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; } .app-landing-footer nav a:hover { color: var(--text); } .app-footer-copy { text-align: end; } @media (max-width: 1024px) { .app-landing-header { grid-template-columns: auto 1fr; } .app-landing-nav { display: none; } .app-landing-actions { justify-self: end; } .app-admin-link { display: none; } .app-hero { grid-template-columns: 1fr; min-height: auto; text-align: center; } .app-hero::before { display: none; } .app-hero-copy { display: grid; justify-items: center; } .app-hero-lead { margin-inline: auto; } .app-proof-list, .app-hero-actions { justify-content: center; } .app-hero-visual { min-height: 680px; } .app-floating-card-image { inset-inline-start: 8%; } .app-floating-card-video { inset-inline-end: 8%; } .app-experience { grid-template-columns: 1fr; } .app-experience-copy { position: static; max-width: 680px; } } @media (max-width: 768px) { .app-landing-header { width: min(100% - 28px, 1200px); min-height: 72px; } .app-landing-brand .brand-logo-img { height: 31px; max-width: 96px; } .app-language-link span { display: none; } .app-store-button-compact { display: none; } .app-hero, .app-capabilities, .app-experience, .app-download-panel, .app-landing-footer { width: min(100% - 28px, 1200px); } .app-hero { padding-block-start: 56px; } .app-hero h1 { font-size: clamp(41px, 13vw, 62px); } .app-hero-actions { flex-direction: column; gap: 14px; } .app-platform-note { max-width: 290px; } .app-proof-list { gap: 7px; } .app-proof-list li { font-size: 11px; } .app-hero-visual { min-height: 600px; } .app-orbit-one { width: 440px; height: 440px; } .app-orbit-two { width: 540px; height: 540px; } .app-floating-card { min-width: auto; padding: 10px 12px; } .app-floating-card div small { display: none; } .app-floating-card-image { inset-inline-start: 0; } .app-floating-card-video { inset-inline-end: 0; } .app-capability-grid { grid-template-columns: 1fr; } .app-capability { min-height: 225px; } .app-download-panel { grid-template-columns: auto 1fr; } .app-download-panel > .app-store-button { grid-column: 1 / -1; justify-self: stretch; } .app-landing-footer { grid-template-columns: 1fr; align-items: start; } .app-footer-copy { text-align: start; } } @media (max-width: 560px) { .app-store-button { width: 100%; max-width: 290px; } .app-hero { padding-block-end: 48px; } .app-hero-lead { font-size: 16px; } .app-hero-visual { min-height: 520px; } .app-device { width: min(276px, 78vw); border-radius: 43px; } .app-device img, .app-device::after { border-radius: 35px; } .app-device-speaker { inset-block-start: 17px; width: 76px; height: 21px; } .app-floating-card { display: none; } .app-orbit-one { width: 350px; height: 350px; } .app-orbit-two { width: 430px; height: 430px; } .app-capabilities { padding-block: 76px; } .app-capability { grid-template-columns: 1fr; align-content: end; } .app-experience { padding-block: 76px; } .app-step-list li { grid-template-columns: 50px 1fr; gap: 15px; } .app-step-list li > span { width: 48px; height: 48px; border-radius: 15px; } .app-download-panel { grid-template-columns: 1fr; text-align: center; } .app-download-icon { margin-inline: auto; } .app-download-panel .app-eyebrow { margin-inline: auto; } .app-landing-footer { padding-block-end: 32px; } } @media (prefers-reduced-motion: reduce) { .app-store-button, .app-capability::before { transition: none; } .app-store-button:hover, .app-capability:hover::before { transform: none; } } /* public privacy, terms, and support pages */ .public-info-shell { min-height: 100vh; background: var(--bg); color: var(--text); } .public-info-nav { position: sticky; inset-block-start: 0; z-index: var(--z-topbar); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) max(var(--s5), calc((100vw - 980px) / 2)); border-block-end: 1px solid var(--border-2); background: var(--sidebar); backdrop-filter: blur(18px); } .public-info-nav nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); } .public-info-nav nav a { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; } .public-info-nav nav a:hover { color: var(--text); } .public-info-language { display: inline-flex; align-items: center; gap: var(--s2); } .public-info-main { width: min(920px, calc(100% - 36px)); margin-inline: auto; padding-block: var(--s9); } .public-info-hero { max-width: 760px; margin-block-end: var(--s8); } .public-info-hero h1 { font-size: var(--fs-display); margin-block: var(--s2) var(--s4); } .public-info-hero p { color: var(--text-2); font-size: var(--fs-lg); line-height: 1.8; } .public-info-hero small { display: block; color: var(--text-3); margin-block-start: var(--s4); } .public-info-sections { display: grid; gap: var(--s4); } .public-info-card { padding: clamp(20px, 4vw, 34px); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .public-info-card h2 { margin-block: 0 var(--s3); font-size: var(--fs-xl); } .public-info-card p { margin: 0; color: var(--text-2); line-height: 1.9; white-space: pre-line; } .public-info-contact { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s4); margin-block-start: var(--s7); padding: clamp(20px, 4vw, 32px); background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); } .public-info-contact h2 { margin: 0 0 var(--s2); } .public-info-contact p { margin: 0; color: var(--text-2); } .public-info-contact > span { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-sm); } .public-info-footer { width: min(920px, calc(100% - 36px)); margin-inline: auto; } @media (max-width: 768px) { .public-info-nav { align-items: flex-start; } .public-info-nav nav > a:not(.public-info-language) { display: none; } .public-info-main { padding-block: var(--s8); } .public-info-contact { grid-template-columns: 1fr; } .public-info-contact > span { grid-column: auto; } } /* scroll reveal (visible without JS; html.js enables the offset) */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } html.js .reveal.in { opacity: 1; transform: none; } @media (max-width: 768px) { .cinema-nav-links { display: none; } .cinematic-split { grid-template-columns: 1fr; } .kit-rail { grid-auto-columns: 66vw; } } /* ============================================================ §14 STUDIO (free video) ============================================================ */ .studio-banner { position: relative; min-height: 190px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); margin-block-end: var(--s5); } .studio-banner video, .studio-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .studio-banner .banner-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--grad-soft); color: var(--primary-2); } .studio-banner .banner-placeholder svg { width: 34px; height: 34px; } .studio-banner .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 4, 14, 0.85), rgba(5, 4, 14, 0.06) 60%); pointer-events: none; } .studio-banner .meta { position: absolute; inset-inline: var(--s4); inset-block-end: var(--s3); } .studio-banner .meta h2 { color: var(--on-media); font-size: var(--fs-xl); margin-block-end: 2px; } .studio-banner .meta p { color: var(--on-media-dim); font-size: var(--fs-xs); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .studio-banner .banner-change { position: absolute; z-index: 2; inset-block-start: var(--s3); inset-inline-end: var(--s3); background: rgba(8, 7, 18, 0.6); border-color: rgba(255, 255, 255, 0.2); color: var(--on-media); backdrop-filter: blur(8px); } .studio-page .gen-layout { grid-template-columns: minmax(520px, 0.78fr) minmax(0, 1.22fr); } .studio-page .studio-card { width: min(100%, 760px); justify-self: end; } .studio-page .result-panel { min-height: clamp(460px, 58vh, 760px); } .studio-page .result-media video, .studio-page .result-media img { max-height: 70vh; } @media (min-width: 1440px) { .studio-page .gen-layout { grid-template-columns: minmax(560px, 0.72fr) minmax(0, 1.28fr); } .studio-page .studio-card { max-width: 720px; } } @media (max-width: 1180px) { .studio-page .gen-layout { grid-template-columns: 1fr; } .studio-page .studio-card { width: 100%; justify-self: stretch; } } .studio-uploads { margin-block-end: var(--s4); } .studio-upload-btns { display: flex; gap: var(--s3); margin-block-end: var(--s2); } .media-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px dashed var(--border-strong); background: var(--bg-2); color: var(--text-2); cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t); } .media-circle:hover { border-color: var(--primary); color: var(--text); background: var(--primary-soft); } .media-circle.selected { border-style: solid; border-color: var(--primary); color: var(--primary-2); background: var(--primary-soft); } .media-circle.disabled, .media-circle:disabled { opacity: 0.45; cursor: not-allowed; border-style: solid; background: var(--bg-3); } .media-circle svg { width: 22px; height: 22px; } .media-circle .req-dot { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid var(--card); } .studio-upload-label { font-size: var(--fs-sm); } .studio-page [hidden] { display: none !important; } .seedance-prompt-shell { position: relative; } .seedance-prompt-editor { min-height: 112px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; line-height: 1.7; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; } .seedance-prompt-editor:focus { border-color: var(--primary); outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; } .seedance-prompt-editor:empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; } .seedance-mention-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-inline: 2px; padding: 3px 8px 3px 4px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); background: var(--primary-soft); color: var(--primary-2); vertical-align: baseline; font-weight: 900; white-space: nowrap; } .seedance-mention-chip img, .seedance-mention-option img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--bg-3); border: 1px solid var(--border); } .seedance-mention-chip b { font-size: var(--fs-xs); } .seedance-mention-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); } .seedance-mention-icon svg { width: 14px; height: 14px; } .seedance-mention-menu { position: absolute; z-index: 20; inset-inline-start: 0; inset-block-start: calc(100% + 6px); width: min(360px, 100%); max-height: 240px; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); } .seedance-mention-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 7px 9px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .seedance-mention-option:hover { background: var(--primary-soft); } .seedance-mention-option span { display: grid; gap: 2px; min-width: 0; } .seedance-mention-option b { color: var(--primary-2); font-size: var(--fs-sm); } .seedance-mention-option small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-role-panel { display: grid; gap: var(--s2); margin-block-start: var(--s3); padding: 0; border: 0; background: transparent; } .seedance-media-actions { display: grid; grid-template-columns: repeat(5, minmax(88px, 1fr)); gap: var(--s2); } .seedance-action-card { display: grid; place-items: center; gap: 8px; min-height: 112px; padding: 12px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--t), background var(--t), transform var(--t); } .seedance-action-card:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); } .seedance-action-card:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .seedance-action-card b { font-size: var(--fs-sm); line-height: 1.2; text-align: center; } .seedance-action-card small { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 900; } .seedance-action-icon svg, .seedance-file-icon svg { width: 26px; height: 26px; color: var(--text-3); } .media-role-modes { display: flex; flex-wrap: wrap; gap: var(--s2); } .media-role-chip { min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text-2); font: inherit; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; } .media-role-chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-2); } .media-role-note { margin: 0; } .kling-shot-panel { display: grid; gap: var(--s2); margin-block-start: var(--s2); } .kling-shot-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: var(--s2); padding-inline-end: 34px; } .kling-shot-row textarea { resize: vertical; } .kling-shot-row .media-remove-btn { inset-block-start: 6px; inset-inline-end: 0; } .media-plan-card { position: relative; width: 120px; min-height: 178px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); overflow: hidden; } .media-plan-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-3); } .media-role-select { width: calc(100% - 12px); margin: 6px; min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-xs); } .media-file-pill { position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 72px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-2); color: var(--text-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seedance-plan-card, .seedance-file-pill { padding-block-end: 8px; } .seedance-media-meta { display: grid; gap: 4px; padding: 8px; min-width: 0; } .seedance-media-meta b { font-size: var(--fs-xs); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seedance-media-meta small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-token-btn { width: max-content; max-width: 100%; min-height: 26px; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); background: var(--primary-soft); color: var(--primary-2); font: inherit; font-size: var(--fs-xs); font-weight: 900; cursor: pointer; } .media-remove-btn { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--text); font: inherit; line-height: 1; cursor: pointer; } @media (max-width: 720px) { .seedance-media-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .studio-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s4); } .studio-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: start; transition: border-color var(--t), background var(--t); } .studio-pill:hover { border-color: var(--border-strong); } .studio-pill svg { width: 17px; height: 17px; color: var(--text-3); } .studio-pill b { font-weight: 800; } .studio-pill .lbl { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; } .studio-pill small { color: var(--text-3); } .studio-pill.toggle.active { border-color: var(--primary); background: var(--primary-soft); } .prompt-enhance-pill.active svg { color: var(--primary-2); } .model-pill { flex: 1; min-width: 200px; justify-content: space-between; } .model-pill .chev svg { width: 14px; height: 14px; } [dir="rtl"] .model-pill .chev { transform: scaleX(-1); } .studio-generate { position: relative; } .studio-generate .gen-cost { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.16); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } /* sheets: bottom sheet on mobile, centered dialog on desktop */ .studio-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(5, 4, 12, 0.6); opacity: 0; pointer-events: none; transition: opacity var(--t); } .studio-sheet-backdrop.open { opacity: 1; pointer-events: auto; } .studio-sheet { position: fixed; z-index: var(--z-sheet); inset-inline: 0; inset-block-end: 0; max-height: calc(100vh - 56px); max-height: calc(100svh - 56px); overflow-y: auto; padding: var(--s5); background: var(--card-strong); border: 1px solid var(--border); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); transform: translateY(104%); visibility: hidden; transition: transform 0.26s var(--ease), visibility 0.26s; } .studio-sheet.open { transform: none; visibility: visible; box-shadow: var(--shadow-pop); } @media (min-width: 769px) { .studio-sheet { inset: 50% auto auto 50%; inset-inline-start: 50%; inset-inline-end: auto; inset-block-start: 50%; inset-block-end: auto; width: min(560px, calc(100vw - 48px)); max-height: min(76vh, 640px); border-radius: var(--radius-lg); transform: translate(-50%, -50%) scale(0.96); opacity: 0; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), visibility 0.2s; } [dir="rtl"] .studio-sheet { transform: translate(50%, -50%) scale(0.96); } .studio-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; } [dir="rtl"] .studio-sheet.open { transform: translate(50%, -50%) scale(1); } } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-end: var(--s4); } .sheet-head h3 { margin: 0; font-size: var(--fs-lg); } .studio-model-list { display: grid; gap: var(--s2); } .studio-model-card { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-2); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--t), background var(--t); } .studio-model-card:hover { border-color: var(--border-strong); } .studio-model-card.selected { border-color: var(--primary); background: var(--primary-soft); } .smc-media { position: relative; width: 92px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); } .smc-media img, .smc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .smc-media .smc-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--grad-soft); } .smc-media .smc-ph svg { width: 22px; height: 22px; } .smc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .smc-body b { font-size: var(--fs-md); } .smc-body small { color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .smc-badge { align-self: start; } .smc-cost { flex: none; color: var(--accent-text); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; } @media (max-width: 560px) { .studio-model-card { grid-template-columns: 78px 1fr; } .smc-media { width: 78px; } .smc-cost { grid-column: 2; justify-self: start; } } /* ============================================================ §15 MOVIE (list + wizard) ============================================================ */ .movie-list { display: grid; gap: var(--s3); } .movie-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4); } .movie-row-main { display: flex; align-items: center; gap: var(--s4); min-width: 0; flex: 1; color: var(--text); } .movie-row-main h3 { margin: 0 0 2px; font-size: var(--fs-lg); } .movie-row-main .muted { font-size: var(--fs-xs); } .movie-row-thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--grad-soft); border: 1px solid var(--border); color: var(--primary-2); } .movie-row-thumb svg { width: 24px; height: 24px; } .movie-row-actions { display: flex; align-items: center; gap: var(--s2); flex: none; } .movie-empty { text-align: center; padding: var(--s9) var(--s5); display: flex; flex-direction: column; align-items: center; gap: var(--s3); } .movie-empty .idle-icon, .idle-icon { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--border); color: var(--primary-2); } .idle-icon svg { width: 30px; height: 30px; } /* wizard shell */ .movie-root { min-height: 60vh; } .movie-loading { display: flex; align-items: center; justify-content: center; min-height: 50vh; } .movie-steps { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--s2)); z-index: 20; display: flex; gap: var(--s1); padding: var(--s2); margin-block-end: var(--s5); border-radius: var(--radius-pill); border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; } .movie-steps::-webkit-scrollbar { display: none; } .movie-step { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; } .movie-step .movie-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border); font-size: 11px; } .movie-step.active { color: var(--text); background: var(--primary-soft); } .movie-step.active .movie-step-n { background: var(--brand); border-color: transparent; color: var(--on-primary); } .movie-step.passed { color: var(--text-2); } .movie-step.passed .movie-step-n { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); } .movie-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-block-end: var(--s4); } .movie-header-copy h2 { margin: 0 0 4px; } .movie-header-copy p { color: var(--text-2); margin: 0; font-size: var(--fs-sm); } .movie-header-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .movie-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; margin-block-end: var(--s3); } .movie-back:hover { color: var(--text); } .movie-studio-shell { display: grid; gap: var(--s4); } .movie-story-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s5); align-items: start; } .movie-story-preview { position: sticky; inset-block-start: calc(var(--topbar-h) + 70px); } .movie-preview-frame { border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-2); padding: var(--s4); } .movie-preview-screen { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); border: 1px solid var(--border); background: linear-gradient(135deg, var(--card-2), var(--bg-3)); display: flex; align-items: center; justify-content: center; color: var(--text-2); font-weight: 700; text-align: center; padding: var(--s4); margin-block-end: var(--s3); } .movie-preview-specs { display: flex; flex-wrap: wrap; gap: var(--s2); } .movie-preview-specs > div { flex: 1 1 120px; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); } .movie-preview-specs span { color: var(--text-3); font-size: var(--fs-xs); } .movie-preview-specs b { color: var(--text); font-size: var(--fs-sm); } .movie-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s4); } .movie-busy { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; padding: var(--s8) var(--s5); } .movie-inline-busy { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); font-size: var(--fs-sm); } .movie-err { color: var(--danger); font-size: var(--fs-sm); font-weight: 700; } .movie-logline { background: var(--grad-soft); } .movie-logline p { margin: 0; font-size: var(--fs-lg); font-weight: 700; } .movie-scene { margin-block-end: var(--s4); } .movie-scene.locked { opacity: 0.55; pointer-events: none; } .movie-scene > h2 { font-size: var(--fs-xl); } .movie-shots { display: grid; gap: var(--s3); margin-block-start: var(--s4); } .movie-shot { padding: var(--s4); } .movie-shot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-block-end: var(--s2); } .movie-shot-body { display: grid; gap: var(--s3); } .movie-shot-visual { font-size: var(--fs-sm); } .movie-shot-dlg { padding: var(--s3); border-inline-start: 3px solid var(--primary); background: var(--primary-soft); border-radius: var(--radius-xs); font-size: var(--fs-sm); } .movie-shot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s3); } .movie-shot video { width: 100%; border-radius: var(--radius-sm); background: var(--bg-2); } .movie-keyframes { display: flex; flex-wrap: wrap; gap: var(--s3); } .movie-keyframes img { width: min(200px, 46%); border-radius: var(--radius-sm); border: 1px solid var(--border); } .movie-ph { display: flex; align-items: center; justify-content: center; min-height: 120px; border-radius: var(--radius-sm); border: 1.5px dashed var(--border-strong); color: var(--text-3); font-size: var(--fs-sm); } .movie-char { text-align: center; } .movie-char-media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); margin-block-end: var(--s3); display: flex; align-items: center; justify-content: center; } .movie-char-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .movie-char-actions { display: flex; flex-direction: column; gap: var(--s2); } .movie-char h3 { font-size: var(--fs-md); } .movie-action-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .movie-actions { display: flex; flex-direction: column; gap: var(--s3); } .movie-edit-block { display: grid; gap: var(--s2); } .movie-final { text-align: center; } .movie-final-media { margin-block: var(--s4); } .movie-final-media video { width: 100%; max-height: 62vh; border-radius: var(--radius); background: var(--bg-2); } .movie-ff-note { font-size: var(--fs-xs); } .movie-transition-preview { color: var(--text-3); font-size: var(--fs-xs); text-align: center; } @media (max-width: 1024px) { .movie-story-layout { grid-template-columns: 1fr; } .movie-story-preview { position: static; } } @media (max-width: 560px) { .movie-row { flex-direction: column; align-items: stretch; } .movie-row-actions { justify-content: space-between; } .movie-row-2 { grid-template-columns: 1fr; } } /* ============================================================ §16 PERFORMANCE GUARDS ============================================================ */ @media (max-width: 768px) { .t-card .badge-type, .t-card .fav-btn, .t-card .cost-tag, .studio-banner .banner-change { backdrop-filter: none; background: rgba(12, 9, 4, 0.82); } } /* ============================================================ §17 INTERACTION POLISH Appended last so these win the cascade over the base component states above. Tokens / color-mix only — no raw hex, so the "no hex outside §1" grep-guard stays green. ============================================================ */ /* Hover on genuinely-clickable cards warms the border toward the brand color; the base lift + transition are inherited. */ .t-card:hover, .tool-dock-item:hover, .stage-media-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-soft); } /* The tool-dock icon tile "activates" to solid brand on hover, echoing the primary button's dark-on-orange treatment. */ .tool-dock-item:hover > span { background: var(--brand); color: var(--on-primary); } /* Tactile press feedback — the control settles when pressed. */ .btn:active, .chip:active, .t-card:active, .tool-dock-item:active, .stage-media-card:active { transform: translateY(1px) scale(0.995); } /* Crisp keyboard focus outlines: visible, but never treated as a glow. */ .t-card:has(> a:focus-visible), .tool-dock-item:focus-visible, .stage-media-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--primary); box-shadow: var(--shadow-soft); } .fav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; } /* Honor reduced-motion: drop the transform-based press feedback. */ @media (prefers-reduced-motion: reduce) { .btn:active, .chip:active, .t-card:active, .tool-dock-item:active, .stage-media-card:active { transform: none; } }