/* Viral Studio inside the Creator modal (#viral-studio-section in #wizard-step-2). Shared pieces come from styles.css (field, swipe-amount-picker, ugc-toggle-row, tabs, button, hint, ugc-loading). This file only adds the 9:16 video card, Idea Swipe's discs and stamps (same values as #swipe-modal), and the review / list layouts. Sizes follow the modal: 13 / 14 / 15 / 18. */ /* While Viral Studio is the selected type, step 2 shows only its header and this section. */ #wizard-step-2.is-viral-studio > :not(.step-panel-header):not(#viral-studio-section) { display: none !important; } #viral-studio-section { --vs-accent: #7c3aed; --vs-ink: #15121f; --vs-ink-2: #5b5670; --vs-line: #e2e0ea; color: var(--brand-ink, #1a202c); } #viral-studio-section .field { margin-bottom: 18px; } #viral-studio-section .field > label { display: block; margin-bottom: 8px; } #viral-studio-section .hint { margin: 6px 0 0; } #viral-studio-section .vs-wrap { display: flex; flex-wrap: wrap; } #viral-studio-section .ugc-toggle-option { min-height: 36px; } #viral-studio-section .ugc-toggle-option.is-disabled { opacity: .5; cursor: not-allowed; } #viral-studio-section .vs-field-narrow .select { max-width: 280px; } #viral-studio-section .vs-knows { margin: 0 0 20px; } #viral-studio-section .vs-error-hint { color: var(--brand-danger, #ef4444); } #viral-studio-section a { color: var(--vs-accent); font-weight: 500; } #viral-studio-section .vs-link { padding: 0; border: 0; background: none; color: var(--vs-accent); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #viral-studio-section .vs-link:disabled { color: var(--brand-muted, #6b7280); text-decoration: none; cursor: default; } #viral-studio-section .vs-picker { max-width: 100%; overflow-x: auto; } #viral-studio-section .vs-picker .swipe-amount-option { padding: 8px 18px; white-space: nowrap; } #viral-studio-section .vs-loading { padding: 32px 0; justify-content: center; } /* Small network badges (same brand colours as the publish window) */ #viral-studio-section .vs-nets { display: inline-flex; gap: 4px; vertical-align: middle; } #viral-studio-section .vs-net { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; color: #fff; flex-shrink: 0; } #viral-studio-section .vs-net svg { width: 12px; height: 12px; } #viral-studio-section .vs-net.is-tiktok { background: #000; } #viral-studio-section .vs-net.is-instagram { background: #e1306c; } #viral-studio-section .vs-net.is-facebook { background: #1877f2; } #viral-studio-section .vs-net.is-off { background: #c8ccd6; } /* Tabs row */ #viral-studio-section .vs-tabs { margin: 0 0 20px; } #viral-studio-section .vs-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(124, 58, 237, .1); color: var(--vs-accent); font-size: 13px; font-variant-numeric: tabular-nums; } #viral-studio-section .tab-button.active { border-color: var(--vs-accent); color: var(--vs-accent); background: rgba(124, 58, 237, .06); } #viral-studio-section .vs-notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #fff7e8; border: 1px solid #f2deb0; color: var(--brand-ink, #1a202c); } #viral-studio-section .vs-after { margin: 0 0 16px; } #viral-studio-section div.vs-after .hint { margin: 0 0 8px; } /* Review: deck + details */ #viral-studio-section .vs-deck { display: flex; flex-direction: column; align-items: center; } #viral-studio-section .vs-stack { position: relative; width: 100%; aspect-ratio: 9 / 16; } #viral-studio-section .vs-stack-next { position: absolute; inset: 10px -8px -8px 10px; border-radius: 20px; background: #ece9f5; border: 1px solid var(--vs-line); } #viral-studio-section .vs-card { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: #111; box-shadow: 0 12px 28px rgba(15, 23, 42, .16); touch-action: pan-y; user-select: none; cursor: grab; transition: transform .28s cubic-bezier(.22, .8, .3, 1); } #viral-studio-section .vs-card.is-dragging { transition: none; cursor: grabbing; } #viral-studio-section .vs-card.is-leaving { transition: transform .3s cubic-bezier(.22, .8, .3, 1), opacity .3s ease; } #viral-studio-section .vs-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(124, 58, 237, calc(var(--swipe-yes, 0) * .24)), rgba(124, 58, 237, calc(var(--swipe-yes, 0) * .24))), linear-gradient(rgba(21, 18, 31, calc(var(--swipe-no, 0) * .32)), rgba(21, 18, 31, calc(var(--swipe-no, 0) * .32))); } #viral-studio-section .vs-card video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } #viral-studio-section .vs-sound { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .55); color: #fff; display: grid; place-items: center; cursor: pointer; } #viral-studio-section .vs-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #viral-studio-section .vs-stamp { position: absolute; top: 16px; z-index: 2; padding: 8px 16px; border-radius: 999px; font-size: 18px; font-weight: 700; line-height: 1; pointer-events: none; box-shadow: 0 8px 20px rgba(15, 23, 42, .22); } #viral-studio-section .vs-stamp--yes { left: 16px; background: var(--vs-accent); color: #fff; opacity: var(--swipe-yes, 0); transform: rotate(-10deg) scale(calc(.8 + var(--swipe-yes, 0) * .2)); } #viral-studio-section .vs-stamp--no { right: 16px; background: #fff; color: var(--vs-ink); opacity: var(--swipe-no, 0); transform: rotate(10deg) scale(calc(.8 + var(--swipe-no, 0) * .2)); } /* Idea Swipe discs: skip / edit / post (physical left to right in every language, like Idea Swipe) */ #viral-studio-section .vs-actions { display: flex; justify-content: center; align-items: flex-start; gap: 28px; direction: ltr; } #viral-studio-section .vs-btn { display: grid; grid-template-rows: 64px auto; justify-items: center; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; } #viral-studio-section .vs-btn:disabled { opacity: .45; cursor: not-allowed; } #viral-studio-section .vs-btn-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } #viral-studio-section .vs-btn--discard .vs-btn-disc { background: #fff; border: 1.5px solid var(--vs-line); color: var(--vs-ink); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); } #viral-studio-section .vs-btn--edit .vs-btn-disc { width: 46px; height: 46px; background: #fff; border: 1.5px solid var(--vs-line); color: var(--vs-ink-2); } #viral-studio-section .vs-btn--edit[aria-pressed="true"] .vs-btn-disc { border-color: var(--vs-accent); color: var(--vs-accent); } #viral-studio-section .vs-btn--save .vs-btn-disc { background: var(--vs-accent); color: #fff; box-shadow: 0 10px 24px rgba(124, 58, 237, .35); } #viral-studio-section .vs-btn:hover:not(:disabled) .vs-btn-disc { transform: translateY(-2px); } #viral-studio-section .vs-btn--save:hover:not(:disabled) .vs-btn-disc { background: #6d28d9; } #viral-studio-section .vs-btn:active:not(:disabled) .vs-btn-disc { transform: scale(.93); } #viral-studio-section .vs-btn:focus-visible { outline: none; } #viral-studio-section .vs-btn:focus-visible .vs-btn-disc { outline: 2px solid var(--vs-accent); outline-offset: 3px; } #viral-studio-section .vs-btn-label { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--vs-ink-2); } #viral-studio-section .vs-btn--save .vs-btn-label { color: #6d28d9; } #viral-studio-section .vs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } #viral-studio-section .vs-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: #f3f2f8; color: var(--vs-ink-2); font-size: 13px; font-weight: 500; } #viral-studio-section .vs-tag.is-take, #viral-studio-section .vs-tag.is-winner { background: #e8f6ed; color: #15803d; } #viral-studio-section .vs-tag.is-weak { background: #fdecec; color: #b91c1c; } #viral-studio-section .vs-hook { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--brand-ink, #1a202c); max-width: 46ch; } #viral-studio-section .vs-text { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; max-width: 62ch; } #viral-studio-section .vs-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 62ch; font-size: 15px; line-height: 1.55; } #viral-studio-section .vs-lines li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: baseline; } #viral-studio-section .vs-num { width: 22px; height: 22px; border-radius: 50%; background: #f3f2f8; color: var(--vs-ink-2); font-size: 13px; font-weight: 500; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; } #viral-studio-section .vs-queue { margin-top: 4px; } #viral-studio-section .vs-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; } #viral-studio-section .vs-edit .field input { width: 100%; box-sizing: border-box; } #viral-studio-section .vs-row .vs-link { font-size: 13px; } /* Being made: the real UGC format photos from the UGC picker, dimmed, with the modal's loading line */ #viral-studio-section .vs-making { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px; border: 1px solid var(--vs-line); border-radius: 18px; background: #fbfaff; } #viral-studio-section .vs-making-photos { display: flex; gap: 8px; } #viral-studio-section .vs-making-photo { width: 92px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #ece9f5; position: relative; } #viral-studio-section .vs-making-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); opacity: .9; } #viral-studio-section .vs-making-photo:nth-child(2) { transform: translateY(-8px); } #viral-studio-section .vs-section-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; } #viral-studio-section .vs-making .ugc-loading { display: flex; margin: 0 0 6px; } /* Scheduled and Results rows */ #viral-studio-section .vs-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } #viral-studio-section .vs-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--vs-line); } #viral-studio-section .vs-hook-row { grid-template-columns: 22px minmax(0, 1fr); } #viral-studio-section .vs-thumb { width: 48px; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; background: #ece9f5; display: block; } #viral-studio-section .vs-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } #viral-studio-section .vs-row-main { min-width: 0; } #viral-studio-section .vs-row-hook { margin: 0; font-size: 15px; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #viral-studio-section .vs-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 2px; } #viral-studio-section .vs-views { margin: 0; font-size: 18px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; } #viral-studio-section .vs-views .hint { display: block; margin: 0; font-size: 13px; font-weight: 400; } #viral-studio-section .vs-summary { margin: 0 0 14px; font-size: 15px; color: var(--brand-muted, #6b7280); } #viral-studio-section .vs-summary b { color: var(--brand-ink, #1a202c); font-size: 18px; font-variant-numeric: tabular-nums; } #viral-studio-section .vs-results { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; margin-bottom: 12px; } #viral-studio-section .vs-empty { padding: 28px 0; } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-card, #viral-studio-section .vs-card.is-leaving { transition-duration: .01s; } } /* Phones and small tablets only: one column. Desktop density above is unchanged. */ @media (max-width: 760px) { #viral-studio-section .vs-results { grid-template-columns: minmax(0, 1fr); } #viral-studio-section .vs-making { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } #viral-studio-section .vs-making .ugc-loading { justify-content: center; } #viral-studio-section .vs-row { grid-template-columns: 44px minmax(0, 1fr); } #viral-studio-section .vs-row > .button, #viral-studio-section .vs-row > .vs-views { grid-column: 2; justify-self: start; text-align: start; } } /* The shared dictation button sits on the right edge of the field; Arabic text starts there, so keep it clear. */ #viral-studio-section #vs-hook-input { padding-right: 48px; } /* Skipping asks why on the skipped video itself, before the next one shows. */ #viral-studio-section .vs-card.is-asking { transform: none; } #viral-studio-section .vs-card.is-asking video { filter: grayscale(.6) brightness(.8); } #viral-studio-section .vs-card.is-asking .vs-stamp--no { opacity: 1; } #viral-studio-section .vs-skip-ask .vs-section-title { margin: 0 0 12px; } #viral-studio-section .vs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } #viral-studio-section .vs-chip { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--vs-line); border-radius: 999px; background: #fff; color: var(--vs-ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } #viral-studio-section .vs-chip:hover { border-color: var(--vs-accent); color: #6d28d9; background: #faf7ff; } #viral-studio-section .vs-chip:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-make-more { margin-top: 12px; } #viral-studio-section .vs-make-more .hint { margin: 8px 0 0; } #viral-studio-section .vs-card.is-asking .vs-sound { display: none; } /* Review: the video is the page. One centred column: card, the buttons on its bottom edge, the swipe cue, one quiet line of facts, then the script and caption folded into "Video details". */ #viral-studio-section .vs-review { max-width: 560px; margin: 0 auto; } #viral-studio-section .vs-stage { display: flex; flex-direction: column; align-items: center; } /* Sized to the screen height so the card, its buttons and the cue fit without scrolling. */ #viral-studio-section .vs-deck { width: clamp(200px, calc((100svh - 500px) * 0.5625), 300px); } #viral-studio-section .vs-tabs { display: flex; justify-content: center; } /* The swipe cue under the card says it; the subtitle would repeat it. */ #wizard-step-2.is-viral-studio.vs-on-review #step2-subtitle { display: none; } #viral-studio-section .vs-stage > .vs-actions { position: relative; z-index: 4; margin-top: -32px; gap: 32px; } #viral-studio-section .vs-btn-label { text-align: center; } #viral-studio-section .vs-swipe-hint { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-swipe-hint svg { color: var(--vs-accent); flex-shrink: 0; } #viral-studio-section .vs-card.is-nudging { transition: transform .45s cubic-bezier(.22, .8, .3, 1); } #viral-studio-section .vs-review > .vs-after { margin: 0 auto 14px; text-align: center; } [dir="rtl"] #viral-studio-section .vs-review > .vs-skip-ask, #viral-studio-section .vs-review > .vs-edit { margin-top: 22px; } #viral-studio-section .vs-review > .vs-make-more { margin-top: 18px; text-align: center; } @media (max-width: 760px) { /* Card height follows the screen so the buttons, their labels and the cue stay above the modal footer. */ #viral-studio-section .vs-deck { width: min(100%, max(200px, calc((100svh - 500px) * 0.5625))); } #viral-studio-section .vs-stage > .vs-actions { gap: 24px; } } /* Demo bar (plans without Viral Studio) and the Solo note: one quiet strip above the screen. */ #viral-studio-section .vs-demo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #e4d9ff; border-radius: 16px; background: #f7f3ff; } #viral-studio-section .vs-demo-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-demo .hint { margin: 2px 0 0; max-width: 62ch; } #viral-studio-section .vs-demo .button { flex-shrink: 0; } #viral-studio-section .vs-solo { border-color: #f2deb0; background: #fff8ec; } #viral-studio-section .vs-demo-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } @media (max-width: 760px) { #viral-studio-section .vs-demo { flex-direction: column; align-items: stretch; } #viral-studio-section .vs-demo .button { align-self: flex-start; } } #viral-studio-section a.button, #viral-studio-section a.button:hover { color: #fff; text-decoration: none; } #viral-studio-section .vs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* With the demo bar or the Solo note on screen, the card gives up that height so its buttons stay in view. */ #viral-studio-section.vs-has-bar .vs-deck { width: clamp(190px, calc((100svh - 580px) * 0.5625), 300px); } @media (max-width: 760px) { #viral-studio-section.vs-has-bar .vs-deck { width: min(100%, max(190px, calc((100svh - 600px) * 0.5625))); } } #viral-studio-section .vs-demo > .vs-demo-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } #viral-studio-section .vs-demo > .vs-demo-text b { color: var(--vs-ink); font-weight: 700; } #viral-studio-section.vs-has-bar .vs-deck { width: clamp(180px, calc((100svh - 600px) * 0.5625), 300px); } @media (max-width: 760px) { #viral-studio-section .vs-demo:not(.vs-solo) { flex-direction: row; align-items: center; padding: 10px 12px; } #viral-studio-section .vs-demo:not(.vs-solo) .button { align-self: center; } #viral-studio-section.vs-has-bar .vs-deck { width: min(100%, max(150px, calc((100svh - 640px) * 0.5625))); } } #viral-studio-section .vs-demo-actions .vs-link { font-size: 13px; } /* Facts as visual pieces, not sentences: toast, plan chip, learned chips, insight, speech bubbles, post preview. */ #viral-studio-section .vs-toast { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto 14px; padding: 6px 8px 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--vs-line); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); font-size: 13px; font-weight: 500; color: var(--vs-ink); animation: vs-toast-in .25s cubic-bezier(.22, .8, .3, 1); } [dir="rtl"] #viral-studio-section .vs-toast { padding: 6px 12px 6px 8px; } #viral-studio-section .vs-toast > svg { flex-shrink: 0; } #viral-studio-section .vs-toast.is-ok > svg { color: #16a34a; } #viral-studio-section .vs-toast.is-error { border-color: #f5c2c2; background: #fff5f5; color: #9f1d1d; } #viral-studio-section .vs-toast.is-error > svg { color: #dc2626; } #viral-studio-section .vs-toast.is-learned > svg { color: var(--vs-accent); } #viral-studio-section .vs-toast-btn { margin-inline-start: 4px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #f3f0ff; color: #6d28d9; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } #viral-studio-section .vs-toast-btn:hover { background: #ebe4ff; } #viral-studio-section .vs-toast-btn:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } @keyframes vs-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } #viral-studio-section .vs-swipe-hint { margin: 12px 0 0; } #viral-studio-section .vs-plan { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; background: #f6f4fb; font-size: 13px; font-weight: 500; color: var(--vs-ink); } #viral-studio-section .vs-plan > svg { color: var(--vs-ink-2); flex-shrink: 0; } #viral-studio-section .vs-plan-best { display: inline-grid; color: var(--vs-accent); } #viral-studio-section .vs-learned { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 0; } #viral-studio-section .vs-learned-icon { display: inline-grid; color: var(--vs-accent); } #viral-studio-section .vs-chip-sm { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #f3f0ff; color: #5b21b6; font-size: 13px; font-weight: 500; } #viral-studio-section .vs-hashtag { color: #2563eb; } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-toast { animation: none; } } /* Live text while editing: the same fonts and measurements the video burn uses, drawn over the clean video. */ @font-face { font-family: 'VS TikTok Sans'; src: url('/assets/fonts/viral/TikTokSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'VS TikTok Sans'; src: url('/assets/fonts/viral/TikTokSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'VS Noto Arabic'; src: url('/assets/fonts/viral/NotoSansArabic-Bold.ttf') format('truetype'); font-weight: 400 900; font-display: swap; } @font-face { font-family: 'VS Barlow Condensed'; src: url('/assets/fonts/viral/BarlowCondensed-Medium.ttf') format('truetype'); font-weight: 400 900; font-display: swap; } @font-face { font-family: 'VS Noto Arabic Condensed'; src: url('/assets/fonts/viral/NotoSansArabic-CondensedSemiBold.ttf') format('truetype'); font-weight: 400 900; font-display: swap; } #viral-studio-section .vs-card { container-type: inline-size; } #viral-studio-section .vs-live { position: absolute; inset: 0; z-index: 1; pointer-events: none; --vis: .072; --top: 15%; --maxw: 88%; } #viral-studio-section .vs-live-text { position: absolute; top: var(--top); left: 50%; transform: translateX(-50%); width: max-content; max-width: var(--maxw); text-align: center; font-family: 'VS TikTok Sans', 'VS Noto Arabic', sans-serif; font-size: calc(var(--vis) * 100cqw); line-height: 1.25; color: #fff; overflow-wrap: anywhere; } #viral-studio-section .vs-live-ink { -webkit-box-decoration-break: clone; box-decoration-break: clone; } #viral-studio-section .vs-live--classic .vs-live-text { font-weight: 500; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); } #viral-studio-section .vs-live--outline { --top: 17%; --maxw: 74%; } #viral-studio-section .vs-live--outline .vs-live-text { font-weight: 600; text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 0 3px #000; } #viral-studio-section .vs-live--box { --top: 16%; --maxw: 90%; } #viral-studio-section .vs-live--box .vs-live-text { font-weight: 600; line-height: 1.55; } #viral-studio-section .vs-live--box .vs-live-ink { background: #fff; color: #111; padding: .12em .36em; border-radius: .3em; } #viral-studio-section .vs-live--yellow, #viral-studio-section .vs-live--purple { --top: 16%; --maxw: 82%; } #viral-studio-section .vs-live--yellow .vs-live-text, #viral-studio-section .vs-live--purple .vs-live-text { font-weight: 600; line-height: 1.9; } #viral-studio-section .vs-live--yellow .vs-live-ink { background: #ffe014; color: #161616; padding: .22em .55em; border-radius: .42em; } #viral-studio-section .vs-live--purple .vs-live-ink { background: rgba(255, 255, 255, .96); color: #a56edc; padding: .22em .55em; border-radius: .42em; } #viral-studio-section .vs-live--modern { --top: 18%; --maxw: 92%; } #viral-studio-section .vs-live--modern .vs-live-text { font-family: 'VS Barlow Condensed', 'VS Noto Arabic Condensed', sans-serif; line-height: 2.05; } #viral-studio-section .vs-live--modern .vs-live-ink { background: #000; color: #fff; padding: .1em .34em; border-radius: .14em; } #viral-studio-section .vs-live--bar { --top: 14%; --maxw: 100%; } #viral-studio-section .vs-live--bar .vs-live-text { left: 0; right: 0; width: auto; transform: none; padding: .45em .8em; background: rgba(0, 0, 0, .45); font-weight: 500; } #viral-studio-section .vs-live--classic.vs-live--s { --vis: 0.056; } #viral-studio-section .vs-live--classic.vs-live--m { --vis: 0.072; } #viral-studio-section .vs-live--classic.vs-live--l { --vis: 0.095; } #viral-studio-section .vs-live--outline.vs-live--s { --vis: 0.046; } #viral-studio-section .vs-live--outline.vs-live--m { --vis: 0.064; } #viral-studio-section .vs-live--outline.vs-live--l { --vis: 0.082; } #viral-studio-section .vs-live--box.vs-live--s { --vis: 0.06; } #viral-studio-section .vs-live--box.vs-live--m { --vis: 0.08; } #viral-studio-section .vs-live--box.vs-live--l { --vis: 0.095; } #viral-studio-section .vs-live--yellow.vs-live--s { --vis: 0.046; } #viral-studio-section .vs-live--yellow.vs-live--m { --vis: 0.058; } #viral-studio-section .vs-live--yellow.vs-live--l { --vis: 0.075; } #viral-studio-section .vs-live--purple.vs-live--s { --vis: 0.046; } #viral-studio-section .vs-live--purple.vs-live--m { --vis: 0.058; } #viral-studio-section .vs-live--purple.vs-live--l { --vis: 0.075; } #viral-studio-section .vs-live--modern.vs-live--s { --vis: 0.058; } #viral-studio-section .vs-live--modern.vs-live--m { --vis: 0.076; } #viral-studio-section .vs-live--modern.vs-live--l { --vis: 0.092; } #viral-studio-section .vs-live--bar.vs-live--s { --vis: 0.044; } #viral-studio-section .vs-live--bar.vs-live--m { --vis: 0.054; } #viral-studio-section .vs-live--bar.vs-live--l { --vis: 0.064; } #viral-studio-section .vs-redrawing { position: absolute; bottom: 12px; left: 50%; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(17, 17, 17, .72); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; } #viral-studio-section .vs-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: vs-spin .8s linear infinite; } @keyframes vs-spin { to { transform: rotate(360deg); } } /* Editing: the video stays in view. Desktop puts the controls beside it; phones pin a smaller video on top. */ #viral-studio-section .vs-review.is-editing .vs-actions, #viral-studio-section .vs-review.is-editing .vs-swipe-hint, #viral-studio-section .vs-review.is-editing .vs-plan { display: none; } #viral-studio-section .vs-review.is-editing { max-width: 880px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: start; } #viral-studio-section .vs-review.is-editing > .vs-toast { grid-column: 1 / -1; } #viral-studio-section .vs-review.is-editing > .vs-stage { position: sticky; top: 0; } #viral-studio-section .vs-review.is-editing > .vs-edit { margin-top: 0; } @media (max-width: 760px) { #viral-studio-section .vs-review.is-editing { display: block; } #viral-studio-section .vs-review.is-editing > .vs-stage { z-index: 6; padding: 8px 0 12px; background: var(--brand-surface, #fff); box-shadow: 0 10px 14px -12px rgba(15, 23, 42, .25); } #viral-studio-section .vs-review.is-editing .vs-deck { width: min(44vw, 170px); } #viral-studio-section .vs-review.is-editing > .vs-edit { margin-top: 16px; } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-spin { animation-duration: 2s; } } /* Edit: two clearly separate modes. Words on screen is free and live; a new script makes a new video. */ #viral-studio-section .vs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 20px; padding: 4px; border-radius: 14px; background: #f3f2f8; } #viral-studio-section .vs-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--vs-ink-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } #viral-studio-section .vs-seg-btn:hover { color: var(--vs-ink); } #viral-studio-section .vs-seg-btn.is-active { background: #fff; color: var(--vs-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); } #viral-studio-section .vs-seg-btn:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-seg-btn svg { flex-shrink: 0; } #viral-studio-section .vs-free { padding: 2px 8px; border-radius: 999px; background: #e8f6ed; color: #15803d; font-size: 13px; font-weight: 500; } #viral-studio-section .vs-cost { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid #e4d9ff; background: #f7f3ff; } #viral-studio-section .vs-cost-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--vs-accent); color: #fff; flex-shrink: 0; } #viral-studio-section .vs-cost-title { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-cost .hint { margin: 0; } #viral-studio-section .vs-lines-field { display: grid; gap: 12px; margin-bottom: 18px; } #viral-studio-section .vs-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; } #viral-studio-section .vs-line .vs-num { margin-top: 12px; } #viral-studio-section .vs-line .voice-input-wrap.is-area { margin-bottom: 0; } #viral-studio-section .vs-line .voice-input-wrap { width: 100%; } #viral-studio-section .vs-line textarea { display: block; width: 100%; box-sizing: border-box; min-height: 96px; padding: 12px 14px; border: 1px solid var(--brand-border, #e2e0ea); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; line-height: 1.55; letter-spacing: normal; color: var(--vs-ink); resize: vertical; } #viral-studio-section .vs-line textarea:focus { outline: none; border-color: var(--vs-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); } @media (max-width: 760px) { #viral-studio-section .vs-seg-btn { gap: 6px; padding: 0 8px; font-size: 13px; } } #viral-studio-section .vs-seg-btn > span { white-space: nowrap; } #viral-studio-section .vs-intro-title { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--vs-ink); text-wrap: balance; } /* Preferences: each choice is a tile with its value; one tap opens only that control. */ #viral-studio-section .vs-prefs { max-width: 640px; margin: 0 auto; } #viral-studio-section .vs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; } #viral-studio-section .vs-tile { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px; border: 1px solid var(--vs-line); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } #viral-studio-section .vs-tile:hover { border-color: #c4b5fd; } #viral-studio-section .vs-tile.is-open { border-color: var(--vs-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); } #viral-studio-section .vs-tile:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-tile-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #f3f0ff; color: var(--vs-accent); flex-shrink: 0; } #viral-studio-section .vs-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #viral-studio-section .vs-tile-label { font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-tile-value { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--vs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #viral-studio-section .vs-tile-panel { margin: 0 0 14px; padding: 14px; border: 1px solid var(--vs-line); border-radius: 14px; background: #fbfaff; } #viral-studio-section .vs-tile-panel .hint { margin-top: 8px; } #viral-studio-section .vs-select { max-width: 320px; } #viral-studio-section a.vs-products { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f6f4fb; color: var(--vs-ink); font-size: 15px; font-weight: 400; text-decoration: none; } #viral-studio-section a.vs-products b { font-weight: 500; } #viral-studio-section a.vs-products.is-empty { background: #fff8ec; } #viral-studio-section a.vs-products:hover { background: #efecf7; } @media (max-width: 760px) { #viral-studio-section .vs-step-icon { width: 40px; height: 40px; } #viral-studio-section .vs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Video details: one card, every row the same shape (icon tile, small label, text), full width. */ #viral-studio-section .vs-about { margin-top: 22px; border: 1px solid var(--vs-line); border-radius: 16px; background: #fff; } #viral-studio-section .vs-about-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--vs-line); font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-about-head .vs-tags { margin: 0; } #viral-studio-section .vs-about-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; } #viral-studio-section .vs-about-row + .vs-about-row { border-top: 1px solid var(--vs-line); } #viral-studio-section .vs-about-body { min-width: 0; flex: 1; } #viral-studio-section .vs-about-label { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--vs-ink-2); } #viral-studio-section .vs-about-body p:not(.vs-about-label) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--vs-ink); overflow-wrap: anywhere; } #viral-studio-section .vs-about-body p:not(.vs-about-label) + p { margin-top: 4px; } #viral-studio-section .vs-tile-icon svg { width: 18px; height: 18px; } /* How it runs: two radio rows, the dot shows the choice; the cost line answers it. */ #viral-studio-section .vs-step-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #f3f0ff; color: var(--vs-accent); } #viral-studio-section .vs-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; } #viral-studio-section .vs-mode { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--vs-line); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out; } #viral-studio-section .vs-mode:hover { border-color: #c4b5fd; } #viral-studio-section .vs-mode.is-on { border-color: var(--vs-accent); background: #f5f3ff; box-shadow: inset 0 0 0 1px var(--vs-accent); } #viral-studio-section .vs-mode:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-mode-dot { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid #b9b3c9; border-radius: 50%; background: #fff; transition: border-color .15s ease-out, box-shadow .15s ease-out; } #viral-studio-section .vs-mode.is-on .vs-mode-dot { border-color: var(--vs-accent); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--vs-accent); } #viral-studio-section .vs-mode-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #viral-studio-section .vs-mode-title { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--vs-ink); } #viral-studio-section .vs-mode-sub { font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } @media (max-width: 760px) { #viral-studio-section .vs-modes { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-mode, #viral-studio-section .vs-mode-dot { transition: none; } } /* How it works: six steps, each a small scene of what really happens. Scenes loop only while on screen. */ #viral-studio-section .vs-how { max-width: 640px; margin: 0 auto; } #viral-studio-section .vs-how-back { display: inline-flex; margin: 0 0 16px; font-size: 15px; } #viral-studio-section .vs-how .vs-intro-title { text-align: start; margin-bottom: 4px; } #viral-studio-section .vs-how-sub { margin: 0 0 22px; } #viral-studio-section .vs-how-steps { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; } #viral-studio-section .vs-how-step { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--vs-line); border-radius: 18px; background: #fff; opacity: 0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); } #viral-studio-section .vs-how-step.is-in { opacity: 1; transform: none; } #viral-studio-section .vs-how-num { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--vs-accent); } #viral-studio-section .vs-how-text h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-how-text p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--vs-ink-2); } #viral-studio-section .vs-how-facts { display: grid; gap: 12px; } #viral-studio-section .vs-how-fact { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #f6f4fb; } #viral-studio-section .vs-how-fact h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-how-fact p, #viral-studio-section .vs-how-fact li { margin: 0; font-size: 15px; line-height: 1.55; color: var(--vs-ink-2); } #viral-studio-section .vs-how-fact ul { margin: 0; padding-inline-start: 18px; } /* The scene stage */ #viral-studio-section .vs-sc { position: relative; width: 132px; height: 112px; border-radius: 14px; background: #f6f3ff; overflow: hidden; } #viral-studio-section .vs-sc * { animation-play-state: paused; } #viral-studio-section .vs-how-step.is-in .vs-sc * { animation-play-state: running; } /* 1. Brand pieces fly into the spark */ #viral-studio-section .vs-sc-logo { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vs-accent); color: #fff; font-size: 13px; font-weight: 700; animation: vs-to-core 3.2s cubic-bezier(.65, 0, .35, 1) infinite; } #viral-studio-section .vs-sc-chip { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; color: var(--vs-accent); box-shadow: 0 2px 6px rgba(124, 58, 237, .15); animation: vs-to-core 3.2s cubic-bezier(.65, 0, .35, 1) infinite; } #viral-studio-section .vs-sc-chip svg { width: 14px; height: 14px; } #viral-studio-section .vs-sc-chip.c1 { right: 12px; top: 12px; animation-delay: .25s; } #viral-studio-section .vs-sc-chip.c2 { left: 12px; bottom: 12px; animation-delay: .5s; } #viral-studio-section .vs-sc-chip.c3 { right: 12px; bottom: 12px; animation-delay: .75s; } #viral-studio-section .vs-sc-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; color: var(--vs-accent); box-shadow: 0 0 0 0 rgba(124, 58, 237, .35); animation: vs-pulse 3.2s ease-out infinite; } @keyframes vs-to-core { 0%, 15% { transform: none; opacity: 1; } 55% { transform: var(--to, translate(0, 0)) scale(.4); opacity: 0; } 56%, 70% { transform: none; opacity: 0; } 85%, 100% { opacity: 1; } } #viral-studio-section .vs-sc-logo { --to: translate(38px, 28px); } #viral-studio-section .vs-sc-chip.c1 { --to: translate(-38px, 28px); } #viral-studio-section .vs-sc-chip.c2 { --to: translate(38px, -28px); } #viral-studio-section .vs-sc-chip.c3 { --to: translate(-38px, -28px); } @keyframes vs-pulse { 0%, 45% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .35); transform: scale(1); } 60% { box-shadow: 0 0 0 14px rgba(124, 58, 237, 0); transform: scale(1.15); } 100% { transform: scale(1); } } /* 2. Idea cards shuffle; the top one gets its format, person and place filled in */ #viral-studio-section .vs-sc-idea { position: absolute; left: 22px; right: 22px; height: 44px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, .1); animation: vs-shuffle 3.6s cubic-bezier(.16, 1, .3, 1) infinite; } #viral-studio-section .vs-sc-idea.i0 { top: 34px; z-index: 3; } #viral-studio-section .vs-sc-idea.i1 { top: 24px; z-index: 2; transform: scale(.92); opacity: .8; animation-delay: -1.2s; } #viral-studio-section .vs-sc-idea.i2 { top: 14px; z-index: 1; transform: scale(.84); opacity: .6; animation-delay: -2.4s; } #viral-studio-section .vs-sc-idea .l { display: block; height: 6px; border-radius: 3px; background: #e9e3fb; margin-bottom: 5px; } #viral-studio-section .vs-sc-idea .w1 { width: 80%; } #viral-studio-section .vs-sc-idea .w2 { width: 55%; } #viral-studio-section .vs-sc-idea .dots { display: flex; gap: 4px; } #viral-studio-section .vs-sc-idea .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--vs-accent); opacity: .25; animation: vs-dot 3.6s ease infinite; } #viral-studio-section .vs-sc-idea .dots i:nth-child(2) { animation-delay: .3s; } #viral-studio-section .vs-sc-idea .dots i:nth-child(3) { animation-delay: .6s; } @keyframes vs-shuffle { 0%, 70% { translate: 0 0; } 80% { translate: 0 30px; opacity: 0; } 81% { translate: 0 -20px; opacity: 0; } 100% { translate: 0 0; } } @keyframes vs-dot { 0%, 20% { opacity: .25; } 35%, 70% { opacity: 1; } 100% { opacity: .25; } } /* 3. A phone fills up as the video is made, then the words appear */ #viral-studio-section .vs-sc-phone { position: absolute; left: 50%; top: 10px; width: 52px; height: 92px; margin-left: -26px; border-radius: 10px; background: #2b2540; overflow: hidden; } #viral-studio-section .vs-sc-phone .fill { position: absolute; inset: 0; background: linear-gradient(160deg, #b9a4f2, #7c3aed); transform-origin: bottom; animation: vs-fill 3.4s cubic-bezier(.65, 0, .35, 1) infinite; } #viral-studio-section .vs-sc-phone .txt { position: absolute; left: 8px; right: 8px; top: 16px; height: 8px; border-radius: 2px; background: #fff; opacity: 0; animation: vs-txt 3.4s ease infinite; } @keyframes vs-fill { 0% { transform: scaleY(0); } 60%, 90% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } @keyframes vs-txt { 0%, 62% { opacity: 0; transform: translateY(4px); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } } /* 4. A card swipes right (kept), comes back, swipes left (skipped) */ #viral-studio-section .vs-sc-card { position: absolute; left: 50%; top: 12px; width: 52px; height: 88px; margin-left: -26px; border-radius: 10px; background: linear-gradient(160deg, #cdbcf7, #9a7be8); box-shadow: 0 4px 12px rgba(15, 23, 42, .15); animation: vs-swipe 4s cubic-bezier(.65, 0, .35, 1) infinite; } #viral-studio-section .vs-sc-card .st { position: absolute; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; opacity: 0; } #viral-studio-section .vs-sc-card .st svg { width: 13px; height: 13px; } #viral-studio-section .vs-sc-card .st.yes { left: 6px; background: var(--vs-accent); color: #fff; animation: vs-yes 4s ease infinite; } #viral-studio-section .vs-sc-card .st.no { right: 6px; background: #fff; color: var(--vs-ink); animation: vs-no 4s ease infinite; } @keyframes vs-swipe { 0%, 10% { transform: none; } 30% { transform: translateX(44px) rotate(12deg); opacity: 0; } 31% { transform: none; opacity: 0; } 42%, 55% { transform: none; opacity: 1; } 75% { transform: translateX(-44px) rotate(-12deg); opacity: 0; } 76% { transform: none; opacity: 0; } 90%, 100% { transform: none; opacity: 1; } } @keyframes vs-yes { 0%, 12% { opacity: 0; } 22%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } } @keyframes vs-no { 0%, 57% { opacity: 0; } 67%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } } /* 5. Posts drop into the week at set times */ #viral-studio-section .vs-sc-week { position: absolute; left: 12px; right: 12px; top: 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } #viral-studio-section .vs-sc-week .d { height: 46px; border-radius: 6px; background: #fff; display: grid; place-items: end center; padding-bottom: 6px; } #viral-studio-section .vs-sc-week .d i { width: 8px; height: 8px; border-radius: 50%; background: var(--vs-accent); opacity: 0; animation: vs-drop 3.5s cubic-bezier(.16, 1, .3, 1) infinite; } #viral-studio-section .vs-sc-week .d1 i { animation-delay: .2s; } #viral-studio-section .vs-sc-week .d3 i { animation-delay: .5s; } #viral-studio-section .vs-sc-week .d5 i { animation-delay: .8s; } #viral-studio-section .vs-sc-week .d0 i, #viral-studio-section .vs-sc-week .d2 i, #viral-studio-section .vs-sc-week .d4 i, #viral-studio-section .vs-sc-week .d6 i { animation: none; } @keyframes vs-drop { 0% { opacity: 0; transform: translateY(-26px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } } #viral-studio-section .vs-sc-nets { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; } /* 6. Bars grow, the winner gets a star and splits into new versions */ #viral-studio-section .vs-sc-learn .bar { position: absolute; bottom: 18px; width: 18px; border-radius: 5px 5px 2px 2px; background: #d9cdfb; transform-origin: bottom; animation: vs-grow 4s cubic-bezier(.16, 1, .3, 1) infinite; } #viral-studio-section .vs-sc-learn .b1 { left: 24px; height: 30px; } #viral-studio-section .vs-sc-learn .b2 { left: 50px; height: 44px; animation-delay: .15s; } #viral-studio-section .vs-sc-learn .b3 { left: 76px; height: 72px; background: var(--vs-accent); animation-delay: .3s; } #viral-studio-section .vs-sc-learn .star { position: absolute; top: -20px; left: 50%; margin-left: -8px; color: #f5b301; opacity: 0; animation: vs-star 4s ease infinite; } #viral-studio-section .vs-sc-learn .star svg { width: 16px; height: 16px; } #viral-studio-section .vs-sc-learn .take { position: absolute; right: 10px; width: 14px; height: 22px; border-radius: 4px; background: var(--vs-accent); opacity: 0; animation: vs-take 4s cubic-bezier(.16, 1, .3, 1) infinite; } #viral-studio-section .vs-sc-learn .t1 { top: 14px; } #viral-studio-section .vs-sc-learn .t2 { top: 42px; animation-delay: .12s; } #viral-studio-section .vs-sc-learn .t3 { top: 70px; animation-delay: .24s; } @keyframes vs-grow { 0% { transform: scaleY(.1); } 35%, 100% { transform: scaleY(1); } } @keyframes vs-star { 0%, 40% { opacity: 0; transform: scale(.4); } 50%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } } @keyframes vs-take { 0%, 55% { opacity: 0; transform: translateX(-30px) scale(.6); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } } [dir="rtl"] #viral-studio-section .vs-sc { transform: scaleX(-1); } [dir="rtl"] #viral-studio-section .vs-sc-logo, [dir="rtl"] #viral-studio-section .vs-sc-nets { transform: scaleX(-1); } @media (max-width: 760px) { #viral-studio-section .vs-how-step { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; } #viral-studio-section .vs-sc { width: 96px; height: 96px; transform: none; } [dir="rtl"] #viral-studio-section .vs-sc { transform: scaleX(-1); } #viral-studio-section .vs-sc-week { left: 6px; right: 6px; gap: 2px; } #viral-studio-section .vs-sc-learn .b1 { left: 14px; } #viral-studio-section .vs-sc-learn .b2 { left: 36px; } #viral-studio-section .vs-sc-learn .b3 { left: 58px; height: 60px; } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-sc *, #viral-studio-section .vs-sc *::before { animation: none !important; } #viral-studio-section .vs-how-step { opacity: 1; transform: none; transition: none; } #viral-studio-section .vs-sc-phone .txt, #viral-studio-section .vs-sc-learn .star, #viral-studio-section .vs-sc-learn .take, #viral-studio-section .vs-sc-week .d i, #viral-studio-section .vs-sc-card .st.yes { opacity: 1; } } /* Ready to start: one card with what will happen and what it costs; the footer button says Start. */ #viral-studio-section .vs-confirm { max-width: 520px; margin: 0 auto; } #viral-studio-section .vs-confirm .vs-intro-title { margin-bottom: 16px; } #viral-studio-section .vs-confirm-soft { font-weight: 400; color: var(--vs-ink-2); } #viral-studio-section .vs-confirm-note { margin: 12px 0 0; text-align: center; } /* Details hierarchy: card title 18 bold, row title 15 bold dark, row text 15 regular grey (same as How it works). */ #viral-studio-section .vs-about-head { font-size: 18px; } #viral-studio-section .vs-about-label { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-about-body p:not(.vs-about-label) { color: var(--vs-ink-2); } /* Swipe coach, on the video itself until the first swipe: a hand slides right (Schedule) then left (Skip), in time with the card's own tilt. Physical left/right in every language, like the swipe. */ #viral-studio-section .vs-coach { position: absolute; inset: 0; z-index: 2; pointer-events: none; direction: ltr; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .45)); } #viral-studio-section .vs-coach-hand { position: absolute; left: 50%; bottom: 72px; margin-left: -17px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); animation: vs-coach-hand 3.6s cubic-bezier(.65, 0, .35, 1) infinite; } #viral-studio-section .vs-coach-label { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } #viral-studio-section .vs-coach-edge { position: absolute; top: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; transform: translateY(-50%); opacity: .9; } #viral-studio-section .vs-coach-edge svg { width: 14px; height: 14px; } #viral-studio-section .vs-coach-edge.is-no { left: 8px; background: #fff; color: var(--vs-ink); animation: vs-coach-no 3.6s ease infinite; } #viral-studio-section .vs-coach-edge.is-yes { right: 8px; background: var(--vs-accent); color: #fff; animation: vs-coach-yes 3.6s ease infinite; } @keyframes vs-coach-hand { 0%, 18% { transform: translateX(0) rotate(0); } 32%, 40% { transform: translateX(56px) rotate(10deg); } 50%, 58% { transform: translateX(-56px) rotate(-10deg); } 70%, 100% { transform: translateX(0) rotate(0); } } @keyframes vs-coach-yes { 0%, 20% { transform: translateY(-50%) scale(1); } 32%, 40% { transform: translateY(-50%) scale(1.15); } 50%, 100% { transform: translateY(-50%) scale(1); } } @keyframes vs-coach-no { 0%, 40% { transform: translateY(-50%) scale(1); } 50%, 58% { transform: translateY(-50%) scale(1.15); } 70%, 100% { transform: translateY(-50%) scale(1); } } #viral-studio-section .vs-card.is-dragging .vs-coach { opacity: 0; transition: opacity .15s ease; } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-coach-hand, #viral-studio-section .vs-coach-edge { animation: none; } } /* Your week is set: the payoff after the last swipe. */ #viral-studio-section .vs-planned { max-width: 640px; margin: 0 auto; } #viral-studio-section .vs-planned-head { text-align: center; margin: 0 0 18px; } #viral-studio-section .vs-planned-check { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0 0 10px; border-radius: 50%; background: var(--vs-accent); color: #fff; box-shadow: 0 10px 24px rgba(124, 58, 237, .35); animation: vs-pop .6s cubic-bezier(.16, 1, .3, 1) both; } #viral-studio-section .vs-planned-head .vs-intro-title { margin: 0 0 4px; font-size: 24px; } #viral-studio-section .vs-planned-head .hint { margin: 0; font-size: 15px; } @keyframes vs-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } #viral-studio-section .vs-next { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 18px; background: #15121f; color: #fff; margin: 0 0 14px; animation: vs-rise .6s .1s cubic-bezier(.16, 1, .3, 1) both; } #viral-studio-section .vs-next-thumb { width: 84px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #2b2540; flex-shrink: 0; } #viral-studio-section .vs-next-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } #viral-studio-section .vs-next-text { min-width: 0; } #viral-studio-section .vs-next-label { margin: 0; font-size: 13px; font-weight: 500; color: #c4b5fd; } #viral-studio-section .vs-next-count { margin: 2px 0 6px; font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } #viral-studio-section .vs-next-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font-size: 13px; color: #e9e3fb; } #viral-studio-section .vs-next-hook { margin: 0; font-size: 13px; color: #b9b3c9; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @keyframes vs-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } #viral-studio-section .vs-wk { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--vs-line); border-radius: 18px; background: #fff; overflow-x: auto; } #viral-studio-section .vs-wk-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 40px; padding: 6px 2px 8px; border-radius: 12px; } #viral-studio-section .vs-wk-day.has { background: #f6f3ff; } #viral-studio-section .vs-wk-name { font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-wk-date { font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-wk-post { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: vs-drop-in .55s calc(.35s + var(--k) * .12s) cubic-bezier(.16, 1, .3, 1) both; } #viral-studio-section .vs-wk-thumb { width: 36px; aspect-ratio: 9 / 16; border-radius: 7px; overflow: hidden; background: #e9e3fb; box-shadow: 0 3px 8px rgba(124, 58, 237, .25); } #viral-studio-section .vs-wk-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } #viral-studio-section .vs-wk-time { font-size: 13px; font-weight: 500; color: var(--vs-accent); white-space: nowrap; } @keyframes vs-drop-in { from { transform: translateY(-18px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } } #viral-studio-section .vs-wn { padding: 14px 16px; border-radius: 18px; background: #f6f4fb; margin: 0 0 8px; } #viral-studio-section .vs-wn h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-wn ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } #viral-studio-section .vs-wn li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; } #viral-studio-section .vs-wn-text { font-size: 15px; color: var(--vs-ink); } #viral-studio-section .vs-wn-when { font-size: 13px; font-weight: 500; color: var(--vs-accent); white-space: nowrap; } #viral-studio-section .vs-planned-actions { text-align: center; margin: 4px 0 0; } #viral-studio-section .vs-planned .vs-make-more { text-align: center; } @media (max-width: 760px) { #viral-studio-section .vs-wk { padding: 8px; gap: 4px; } #viral-studio-section .vs-wk-day { min-width: 38px; } #viral-studio-section .vs-wk-thumb { width: 30px; } #viral-studio-section .vs-wn li { grid-template-columns: 36px minmax(0, 1fr); } #viral-studio-section .vs-wn-when { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-planned-check, #viral-studio-section .vs-next, #viral-studio-section .vs-wk-post { animation: none; } } #viral-studio-section .vs-next-count { color: #fff; } /* Scheduled as a content calendar: day headers, vertical previews with their time and networks on them. */ #viral-studio-section .vs-sched-day { margin: 18px 0 0; } #viral-studio-section .vs-sched-date { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--vs-ink-2); } #viral-studio-section .vs-sched-dnum { font-size: 24px; font-weight: 700; color: var(--vs-ink); line-height: 1; } #viral-studio-section .vs-sched-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } #viral-studio-section .vs-sched-card { display: flex; flex-direction: column; gap: 8px; animation: vs-rise .5s calc(var(--k) * .06s) cubic-bezier(.16, 1, .3, 1) both; } #viral-studio-section .vs-sched-media { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #e9e3fb; box-shadow: 0 8px 20px rgba(15, 23, 42, .12); } #viral-studio-section .vs-sched-media video { width: 100%; height: 100%; object-fit: cover; display: block; } #viral-studio-section .vs-sched-when { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } #viral-studio-section .vs-sched-day-chip { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--vs-ink); font-size: 13px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); } #viral-studio-section .vs-sched-time { padding: 3px 9px; border-radius: 999px; background: rgba(17, 17, 17, .72); color: #fff; font-size: 13px; font-weight: 500; } #viral-studio-section .vs-sched-nets { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; justify-content: center; } #viral-studio-section .vs-sched-hook { margin: 0; font-size: 13px; line-height: 1.45; color: var(--vs-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #viral-studio-section .vs-sched-undo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 0 10px; border: 1px solid var(--vs-line); border-radius: 999px; background: #fff; color: var(--vs-ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } #viral-studio-section .vs-sched-undo:hover { border-color: #c4b5fd; color: #6d28d9; } #viral-studio-section .vs-sched-undo:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } @media (max-width: 760px) { #viral-studio-section .vs-sched-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-sched-card { animation: none; } } /* Day and time live at the bottom so they never cover the words burned at the top of the video. */ #viral-studio-section .vs-sched-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); pointer-events: none; } #viral-studio-section .vs-sched-when { top: auto; bottom: 36px; inset-inline-start: 10px; z-index: 1; flex-direction: row; align-items: center; gap: 6px; } #viral-studio-section .vs-sched-day-chip { padding: 0; background: none; box-shadow: none; color: #fff; font-size: 15px; font-weight: 700; } #viral-studio-section .vs-sched-time { padding: 0; background: none; color: #e9e3fb; font-size: 13px; font-weight: 500; } #viral-studio-section .vs-sched-nets { z-index: 1; bottom: 10px; justify-content: flex-start; inset-inline-start: 10px; left: auto; right: auto; } /* ── Independent design review fixes (one system) ─────────────────────────── */ /* 1. Upsell and demo bars: one quiet line, a link not a button; solid purple is only for Schedule and the footer primary. */ #viral-studio-section .vs-demo, #viral-studio-section .vs-solo { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; margin: 0 0 14px; border-radius: 12px; } #viral-studio-section .vs-demo > .vs-demo-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } #viral-studio-section .vs-demo .vs-link { font-size: 13px; white-space: nowrap; flex-shrink: 0; } #viral-studio-section .vs-link-quiet { color: var(--vs-ink-2); text-decoration: none; } #viral-studio-section .vs-solo { margin: 0 0 14px; } /* 2. Swipe coach: the hand and one label; the stamps only show while dragging; mute out of the stamp's way. */ #viral-studio-section .vs-card:not(.is-dragging):not(.is-nudging):not(.is-leaving):not(.is-asking) .vs-stamp { opacity: 0; } #viral-studio-section .vs-sound { top: 12px; bottom: auto; inset-inline-end: 12px; } #viral-studio-section .vs-card { cursor: pointer; } /* 4. Skip question: centred under the video, reasons are the main choice. */ #viral-studio-section .vs-skip-ask { max-width: 520px; margin-inline: auto; text-align: center; padding-bottom: 0; border-bottom: 0; } #viral-studio-section .vs-skip-ask .vs-chips { justify-content: center; } #viral-studio-section .vs-skip-more { display: flex; justify-content: center; gap: 20px; font-size: 15px; } /* 5. One choice control everywhere: 40px pills, 15/500, selected = purple tint. */ #viral-studio-section .ugc-toggle-option { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; } #viral-studio-section .ugc-toggle-option:has(input:checked) { border-color: var(--vs-accent); background: #f3f0ff; color: #5b21b6; } #viral-studio-section .vs-chip { min-height: 40px; } /* 6. Scheduled: the first video carries the countdown; no captions repeating the words on the videos. */ #viral-studio-section .vs-sched-card { position: relative; } #viral-studio-section .vs-sched-next { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--vs-accent); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 10px rgba(124, 58, 237, .35); } #viral-studio-section .vs-sched-card.is-next .vs-sched-media { box-shadow: 0 0 0 2px var(--vs-accent), 0 8px 20px rgba(124, 58, 237, .25); } #viral-studio-section .vs-sched-row { margin-top: 0; } /* 7. Next post card: the countdown is the heading; text block takes the width. */ #viral-studio-section .vs-next-text { flex: 1; } #viral-studio-section .vs-next-count { margin: 0 0 8px; } /* 8. Week strip never clips on phones. */ #viral-studio-section .vs-wk { overflow: hidden; } #viral-studio-section .vs-wk-day { min-width: 0; } /* 10. How it works: an editorial numbered list, not a stack of cards. */ #viral-studio-section .vs-how-step { grid-template-columns: 112px minmax(0, 1fr); border: 0; border-top: 1px solid var(--vs-line); border-radius: 0; padding: 18px 0; background: transparent; } #viral-studio-section .vs-how-steps { gap: 0; } #viral-studio-section .vs-how-text { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; } #viral-studio-section .vs-how-num { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: #f3f0ff; color: var(--vs-accent); font-size: 15px; font-weight: 700; } #viral-studio-section .vs-sc { width: 112px; height: 112px; } /* 11. Screen 2 of the first run: same width as Preferences. */ #viral-studio-section .vs-confirm { max-width: 640px; } /* 12. Preferences: tiles read as tappable; products row matches the tiles. */ #viral-studio-section .vs-tile .vs-chev { margin-inline-start: auto; color: var(--vs-ink-2); flex-shrink: 0; transition: transform .2s ease; } #viral-studio-section .vs-tile.is-open .vs-chev { transform: rotate(180deg); } #viral-studio-section .vs-tile-value { min-height: 22px; } #viral-studio-section a.vs-products { background: #fff; border: 1px solid var(--vs-line); min-height: 52px; } #viral-studio-section a.vs-products.is-empty { background: #fff; border-color: #f2deb0; } /* 13. Edit: no repeated label; smaller pinned video on small phones. */ #viral-studio-section .vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 480px) { #viral-studio-section .vs-review.is-editing .vs-deck { width: 120px; } } /* 14. Empty results: a real empty state. */ #viral-studio-section .vs-empty-card { max-width: 520px; margin: 8px auto 0; padding: 28px; border: 1px solid var(--vs-line); border-radius: 16px; text-align: center; } #viral-studio-section .vs-empty-card .vs-step-icon { margin: 0 auto 12px; } #viral-studio-section .vs-empty-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-empty-card p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } @media (max-width: 760px) { #viral-studio-section .vs-solo { flex-direction: column; align-items: flex-start; gap: 6px; } } /* Undo: a small disc like Edit, beside Skip; greyed until there is something to undo. */ #viral-studio-section .vs-btn--undo .vs-btn-disc { width: 46px; height: 46px; background: #fff; border: 1.5px solid var(--vs-line); color: var(--vs-ink-2); } #viral-studio-section .vs-btn--undo:disabled { opacity: .35; } #viral-studio-section .vs-stage > .vs-actions { gap: 20px; } @media (max-width: 760px) { #viral-studio-section .vs-stage > .vs-actions { gap: 14px; } } #viral-studio-section .vs-stuck-actions { margin-top: 14px; } #viral-studio-section .vs-empty-card.is-stuck .vs-step-icon { color: #dc2626; background: #fff1f1; } #viral-studio-section .vs-stuck-detail { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #f6f4fb; font-size: 13px; color: var(--vs-ink); word-break: break-word; } /* Scheduled: each video opens (plays with sound, says when and why then, words and caption can change). */ #viral-studio-section .vs-sched-media { width: 100%; padding: 0; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s; } #viral-studio-section .vs-sched-media:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 23, 42, .18); } #viral-studio-section .vs-sched-media:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 3px; } #viral-studio-section .vs-sched-play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(15, 12, 31, .55); color: #fff; backdrop-filter: blur(6px); pointer-events: none; transition: transform .2s cubic-bezier(.16, 1, .3, 1); } [dir="rtl"] #viral-studio-section .vs-sched-play { margin: -24px -24px 0 0; } #viral-studio-section .vs-sched-media:hover .vs-sched-play { transform: scale(1.08); } #viral-studio-section .vs-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 8px; padding: 0 14px; border: 1px solid var(--vs-line); border-radius: 999px; background: #fff; color: var(--vs-ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; } #viral-studio-section .vs-back:hover { border-color: var(--vs-accent); color: var(--vs-accent); } #viral-studio-section .vs-back:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-review--sched .vs-card { cursor: pointer; } #viral-studio-section .vs-sched-detail-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; } #viral-studio-section .vs-about-body p.vs-countdown { margin-top: 2px; font-size: 13px; color: var(--vs-ink-2); } /* Autopilot on the waiting screen: what it does, what it just scheduled, and the way back to Review. */ #viral-studio-section .vs-auto { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid var(--vs-line); border-radius: 16px; background: #fff; } #viral-studio-section .vs-auto-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--vs-ink); } #viral-studio-section .vs-auto-line > span:nth-child(2) { flex: 1 1 220px; } #viral-studio-section .vs-auto-line .vs-link { min-height: 44px; font-size: 15px; } #viral-studio-section .vs-auto-latest { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--vs-line); border-radius: 14px; background: #fbfaff; font: inherit; color: var(--vs-ink); text-align: start; cursor: pointer; transition: border-color .2s; } #viral-studio-section .vs-auto-latest:hover { border-color: var(--vs-accent); } #viral-studio-section .vs-auto-latest:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-auto-thumb { flex-shrink: 0; width: 40px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #e9e3fb; } #viral-studio-section .vs-auto-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } #viral-studio-section .vs-auto-text { display: grid; gap: 2px; flex: 1; min-width: 0; } #viral-studio-section .vs-auto-label { font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-auto-when { font-size: 15px; font-weight: 500; } #viral-studio-section .vs-auto-latest .vs-sched-nets { position: static; flex-shrink: 0; gap: 4px; } #viral-studio-section .vs-auto { margin: 0 0 14px; } /* Preferences stay one tap away beside the tabs. */ /* "Visit a link": the link field shows only while that choice is picked. */ #viral-studio-section .vs-cta-link { display: none; margin-top: 14px; } #viral-studio-section .vs-cta-panel:has(input[value="visit"]:checked) .vs-cta-link { display: block; } #viral-studio-section .vs-cta-link .input { text-align: left; } /* Dragging the words in edit. */ #viral-studio-section .vs-live-text.is-draggable { pointer-events: auto; cursor: grab; touch-action: none; outline: 1.5px dashed rgba(255, 255, 255, .85); outline-offset: 6px; border-radius: 6px; } #viral-studio-section .vs-live-text.is-dragging { cursor: grabbing; outline-color: #fff; } #viral-studio-section .vs-drag-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--vs-ink-2); } /* Autopilot's week: how many of the weekly pace are scheduled, ready and being made. */ #viral-studio-section .vs-week { display: grid; gap: 8px; } #viral-studio-section .vs-week-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 15px; color: var(--vs-ink); } #viral-studio-section .vs-week-head b { font-weight: 700; } #viral-studio-section .vs-week-head span { font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-week-bar { display: flex; gap: 4px; } #viral-studio-section .vs-week-bar i { flex: 1; height: 8px; border-radius: 999px; background: #ece9f5; } #viral-studio-section .vs-week-bar i.is-sched { background: var(--vs-accent); } #viral-studio-section .vs-week-bar i.is-ready { background: #a78bfa; } #viral-studio-section .vs-week-bar i.is-making { background: repeating-linear-gradient(-45deg, #c4b5fd 0 6px, #ddd6fe 6px 12px); background-size: 17px 17px; animation: vs-week-move 1.2s linear infinite; } @keyframes vs-week-move { to { background-position: 17px 0; } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-week-bar i.is-making { animation: none; } } #viral-studio-section .vs-week .hint { margin: 0; font-size: 13px; } #viral-studio-section .vs-week-next { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } #viral-studio-section .vs-week-next .vs-spin { flex-shrink: 0; border-color: #ddd6fe; border-top-color: var(--vs-accent); } #viral-studio-section .vs-week-next.is-cap { color: var(--vs-ink); } /* A refresh that redraws keeps still: no entrance motion the second time. */ #viral-studio-section.vs-quiet .vs-sched-card, #viral-studio-section.vs-quiet .vs-wk-post, #viral-studio-section.vs-quiet [style*="--k"] { animation: none !important; } #viral-studio-section .vs-planned-making { margin: 0 0 14px; justify-content: center; } /* Phones: one tile per row so each value reads in full (two columns cut "Half of the videos" to "Half of the v"). */ @media (max-width: 480px) { #viral-studio-section .vs-tiles { grid-template-columns: minmax(0, 1fr); } } #viral-studio-section .vs-posting-now { display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0; font-size: 13px; font-weight: 500; color: var(--vs-ink-2); } #viral-studio-section .vs-stage > .vs-posting-now { justify-content: center; width: 100%; } #viral-studio-section .vs-sched-undo.is-posting { cursor: default; border-style: dashed; } /* Every control uses the page font (buttons do not inherit it by default: the pickers showed the system face). */ #viral-studio-section button, #viral-studio-section input, #viral-studio-section select, #viral-studio-section textarea { font-family: inherit; } /* Scheduled: quick arrows and drag to trade posting times. */ #viral-studio-section .vs-sched-mediawrap { position: relative; } #viral-studio-section .vs-sched-nudge { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--vs-ink); box-shadow: 0 4px 12px rgba(15, 23, 42, .18); cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s cubic-bezier(.16, 1, .3, 1); } #viral-studio-section .vs-sched-nudge.is-prev { inset-inline-start: 6px; } #viral-studio-section .vs-sched-nudge.is-next { inset-inline-end: 6px; } #viral-studio-section .vs-sched-nudge.is-next .vs-nudge-ico { transform: scaleX(-1); } [dir="rtl"] #viral-studio-section .vs-sched-nudge .vs-nudge-ico { transform: scaleX(-1); } [dir="rtl"] #viral-studio-section .vs-sched-nudge.is-next .vs-nudge-ico { transform: none; } #viral-studio-section .vs-sched-card:hover .vs-sched-nudge:not(:disabled), #viral-studio-section .vs-sched-nudge:focus-visible { opacity: 1; } #viral-studio-section .vs-sched-nudge:hover { transform: scale(1.06); } #viral-studio-section .vs-sched-nudge:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-sched-nudge:disabled { display: none; } @media (hover: none) { #viral-studio-section .vs-sched-nudge:not(:disabled) { opacity: 1; } } #viral-studio-section .vs-sched-card[draggable="true"] { cursor: grab; } #viral-studio-section .vs-sched-card.is-dragging { opacity: .45; } #viral-studio-section .vs-sched-card.is-drop .vs-sched-media { box-shadow: 0 0 0 3px var(--vs-accent), 0 12px 26px rgba(124, 58, 237, .28); transform: scale(1.02); } #viral-studio-section .vs-drag-swap { display: none; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 13px; } @media (hover: hover) and (pointer: fine) { #viral-studio-section .vs-drag-swap { display: flex; } } /* "Your week is set": the week is the screen. Real videos stand in their days at their times; free days stay open. */ #viral-studio-section .vs-ws { display: grid; gap: 16px; } #viral-studio-section .vs-ws-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; } #viral-studio-section .vs-ws-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--vs-ink); } #viral-studio-section .vs-ws-sub { margin: 0; font-size: 15px; color: var(--vs-ink-2); } #viral-studio-section .vs-ws-next { margin: 0; padding: 6px 12px; border-radius: 999px; background: #f3f0ff; color: #6d28d9; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } #viral-studio-section .vs-batch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 16px; border: 1px solid #ddd6fe; border-radius: 16px; background: #faf8ff; } #viral-studio-section .vs-batch-ring { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #e9e3fb; border-top-color: var(--vs-accent); animation: vs-spin 1s linear infinite; } #viral-studio-section .vs-batch-text { display: grid; gap: 2px; min-width: 0; } #viral-studio-section .vs-batch-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--vs-ink); } #viral-studio-section .vs-batch-now { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); font-variant-numeric: tabular-nums; } #viral-studio-section .vs-batch-bar { grid-column: 1 / -1; } #viral-studio-section .vs-batch-note { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-batch-ring { animation-duration: 3s; } } #viral-studio-section .vs-ws-making .vs-spin { border-color: #ddd6fe; border-top-color: var(--vs-accent); } #viral-studio-section .vs-ws-making { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-ws .vs-auto { margin: 0; } #viral-studio-section .vs-ws-board { display: grid; grid-template-columns: repeat(var(--days), minmax(92px, 1fr)); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: #d8d2ee transparent; } #viral-studio-section .vs-ws-day { display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; min-width: 0; } #viral-studio-section .vs-ws-name { font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-ws-date { margin-top: -6px; font-size: 15px; font-weight: 700; color: var(--vs-ink); font-variant-numeric: tabular-nums; } #viral-studio-section .vs-ws-day.is-today .vs-ws-date { color: var(--vs-accent); } #viral-studio-section .vs-ws-post { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #e9e3fb; cursor: pointer; box-shadow: 0 6px 16px rgba(15, 23, 42, .12); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; } #viral-studio-section .vs-ws-post video { width: 100%; height: 100%; object-fit: cover; display: block; } #viral-studio-section .vs-ws-post::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); pointer-events: none; } #viral-studio-section .vs-ws-post:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, .2); } #viral-studio-section .vs-ws-post:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 3px; } #viral-studio-section .vs-ws-post.is-next { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vs-accent), 0 10px 24px rgba(124, 58, 237, .28); } #viral-studio-section .vs-ws-time { position: absolute; z-index: 1; inset-inline-start: 8px; bottom: 8px; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; } #viral-studio-section .vs-ws-nets { position: absolute; z-index: 1; inset-inline-end: 6px; top: 6px; display: flex; gap: 3px; } #viral-studio-section .vs-ws-free { display: block; width: 100%; aspect-ratio: 9 / 16; border: 1.5px dashed #ddd6fe; border-radius: 12px; } #viral-studio-section .vs-ws-after { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } #viral-studio-section .vs-ws-after svg { flex-shrink: 0; margin-top: 2px; color: var(--vs-accent); } #viral-studio-section .vs-ws .vs-make-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; text-align: start; } #viral-studio-section .vs-ws .vs-make-more .hint { margin: 0; font-size: 13px; } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-ws-post { transition: none; } } /* Seven days fit the modal on desktop; phones scroll the week sideways. Swap arrows are always visible (no hover on touch). */ @media (min-width: 761px) { #viral-studio-section .vs-ws-board { grid-template-columns: repeat(var(--days), minmax(76px, 1fr)); overflow-x: visible; } } #viral-studio-section .vs-sched-nudge:not(:disabled) { opacity: .94; } #viral-studio-section .vs-sched-nudge { width: 36px; height: 36px; margin-top: -18px; } #viral-studio-section .vs-sched-nudge { top: 66%; } /* The three views as one segmented control (clearly views, not tags), settings as a cog at the end of the row. */ #viral-studio-section .vs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; } #viral-studio-section .vs-segnav { display: inline-flex; gap: 2px; margin: 0; padding: 4px; border-radius: 12px; background: #f1eff7; } #viral-studio-section .vs-segnav .tab-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--vs-ink-2); font-size: 15px; font-weight: 500; line-height: 1; box-shadow: none; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; } #viral-studio-section .vs-segnav .tab-button:hover { color: var(--vs-ink); } #viral-studio-section .vs-segnav .tab-button.active { background: #fff; color: var(--vs-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 1px 1px rgba(15, 23, 42, .04); } #viral-studio-section .vs-segnav .tab-button:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 1px; } #viral-studio-section .vs-segnav .vs-count { min-width: 20px; height: 20px; font-size: 13px; font-weight: 500; } #viral-studio-section .vs-segnav .tab-button.active .vs-count { background: var(--vs-accent); color: #fff; } #viral-studio-section .vs-cog { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--vs-line); border-radius: 12px; background: #fff; color: var(--vs-ink-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .2s, color .2s; } #viral-studio-section .vs-cog:hover { border-color: var(--vs-accent); color: var(--vs-accent); } #viral-studio-section .vs-cog:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-cog svg { flex-shrink: 0; } @media (max-width: 560px) { #viral-studio-section .vs-bar { gap: 8px; } #viral-studio-section .vs-segnav { flex: 1; min-width: 0; } #viral-studio-section .vs-segnav .tab-button { flex: 1; padding: 0 8px; } #viral-studio-section .vs-cog { justify-content: center; width: 44px; padding: 0; } #viral-studio-section .vs-cog-label { display: none; } } /* ── Finish review fixes (2026-10-26) ─────────────────────────────────────────────────────────── */ /* View bar: phone-sized targets, readable inactive counts. */ @media (pointer: coarse) { #viral-studio-section .vs-segnav .tab-button { min-height: 44px; } } #viral-studio-section .vs-segnav .vs-count { color: #6d28d9; } #viral-studio-section .vs-segnav .tab-button.active .vs-count { color: #fff; } /* Words over video stay readable on light frames (4.5:1). */ #viral-studio-section .vs-ws-post::after, #viral-studio-section .vs-sched-media::after { height: 50%; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); } #viral-studio-section .vs-sched-time { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } #viral-studio-section .vs-ws-time { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } /* Week: the countdown is part of the sentence, free days are quiet tint (nothing to click), phones fit the week. */ #viral-studio-section .vs-ws-head { display: block; } #viral-studio-section .vs-ws-next { padding: 0; border-radius: 0; background: none; color: var(--vs-ink); font-size: 15px; font-weight: 700; white-space: normal; } #viral-studio-section .vs-ws-free { border: 0; background: #f6f4fb; } #viral-studio-section .vs-ws-board { display: flex; gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0; } #viral-studio-section .vs-ws-day { flex: 1 1 0; } @media (max-width: 560px) { #viral-studio-section .vs-ws-board { gap: 6px; } #viral-studio-section .vs-ws-day.is-empty { flex: 0 0 24px; align-items: center; } #viral-studio-section .vs-ws-day.is-empty .vs-ws-name, #viral-studio-section .vs-ws-day.is-empty .vs-ws-free { display: none; } #viral-studio-section .vs-ws-day.is-empty .vs-ws-date { margin-top: 26px; font-weight: 500; color: var(--vs-ink-2); } #viral-studio-section .vs-ws-day.is-empty.is-today .vs-ws-date { color: var(--vs-accent); font-weight: 700; } #viral-studio-section .vs-ws-time { inset-inline-start: 6px; bottom: 6px; } } /* Scheduled grid: the video carries only its play button; the earlier/later arrows sit in a row under it. */ #viral-studio-section .vs-sched-foot { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } #viral-studio-section .vs-sched-foot .vs-sched-nudge { position: static; width: 44px; height: 44px; margin: 0; border: 1px solid var(--vs-line); background: #fff; box-shadow: none; opacity: 1; } #viral-studio-section .vs-sched-foot .vs-sched-nudge:hover { border-color: var(--vs-accent); color: var(--vs-accent); transform: none; } #viral-studio-section .vs-sched-foot .vs-sched-nudge:disabled { display: grid; visibility: hidden; } #viral-studio-section .vs-sched-foot .vs-posting-now { margin: 0; } /* Video details: a plain meta line and label/value rows (no icon squares, no tag pills). */ #viral-studio-section .vs-meta-line { margin: 18px 0 0; font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-meta-line:empty { display: none; } #viral-studio-section .vs-meta-line + .vs-about { margin-top: 10px; } #viral-studio-section .vs-about-row { padding: 12px 16px; } /* Autopilot strip: one surface, the latest video as a plain row under a hairline. */ #viral-studio-section .vs-auto-latest { padding: 12px 0 0; border: 0; border-top: 1px solid var(--vs-line); border-radius: 0; background: none; } #viral-studio-section .vs-auto-latest:hover { border-color: var(--vs-line); } #viral-studio-section .vs-auto-latest:hover .vs-auto-when { color: var(--vs-accent); } /* Preferences: one settings list; each choice opens right under its own row. */ #viral-studio-section .vs-prefs .vs-tiles { display: block; gap: 0; border: 1px solid var(--vs-line); border-radius: 14px; background: #fff; overflow: hidden; } #viral-studio-section .vs-pref:empty { display: none; } #viral-studio-section .vs-pref + .vs-pref { border-top: 1px solid var(--vs-line); } #viral-studio-section .vs-prefs .vs-tile { width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; } #viral-studio-section .vs-prefs .vs-tile:hover { background: #fbfaff; } #viral-studio-section .vs-prefs .vs-tile:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: -2px; } #viral-studio-section .vs-prefs .vs-tile .vs-tile-icon { display: none; } #viral-studio-section .vs-prefs .vs-tile-text { display: flex; flex-direction: row; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } #viral-studio-section .vs-prefs .vs-tile-label { font-size: 15px; font-weight: 500; color: var(--vs-ink); white-space: nowrap; } #viral-studio-section .vs-prefs .vs-tile-value { font-size: 15px; font-weight: 400; color: var(--vs-ink-2); } #viral-studio-section .vs-prefs .vs-tile-panel { margin: 0; padding: 4px 16px 16px; border: 0; border-radius: 0; background: none; } #viral-studio-section .vs-prefs .vs-tile-panel .input, #viral-studio-section .vs-prefs .vs-tile-panel .select { width: 100%; box-sizing: border-box; min-height: 44px; } #viral-studio-section .vs-prefs .vs-products { margin-top: 14px; } #viral-studio-section .vs-sched-when { bottom: 38px; flex-direction: column; align-items: flex-start; gap: 2px; } /* Scheduled cards: nothing printed over the video (its own words live there); day and time under it, and one "Change day" button that lists the other days by name. */ #viral-studio-section .vs-sched-media::after { display: none; } #viral-studio-section .vs-sched-media .vs-sched-nets { top: 8px; bottom: auto; inset-inline-start: auto; inset-inline-end: 8px; left: auto; right: auto; justify-content: flex-end; } [dir="rtl"] #viral-studio-section .vs-sched-media .vs-sched-nets { inset-inline-end: 8px; } #viral-studio-section .vs-sched-whenline { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-sched-countdown { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: #6d28d9; font-variant-numeric: tabular-nums; } #viral-studio-section .vs-sched-card .vs-posting-now { margin: 8px 0 0; } #viral-studio-section .vs-move-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--vs-line); border-radius: 10px; background: #fff; color: var(--vs-ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .2s, color .2s; } @media (pointer: coarse) { #viral-studio-section .vs-move-btn { min-height: 44px; } } #viral-studio-section .vs-move-btn:hover, #viral-studio-section .vs-move-btn[aria-expanded="true"] { border-color: var(--vs-accent); color: var(--vs-accent); } #viral-studio-section .vs-move-btn:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-move-menu { margin-top: 6px; padding: 6px; border: 1px solid var(--vs-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .12); } #viral-studio-section .vs-move-hint { margin: 2px 6px 6px; font-size: 13px; line-height: 1.45; color: var(--vs-ink-2); } #viral-studio-section .vs-move-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--vs-ink); font-size: 15px; font-weight: 500; text-align: start; cursor: pointer; } #viral-studio-section .vs-move-opt:hover { background: #f6f4fb; color: #6d28d9; } #viral-studio-section .vs-move-opt:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: -2px; } #viral-studio-section .vs-move-opt svg { flex-shrink: 0; color: var(--vs-ink-2); } /* Style picker: "Make more videos" opens it in place. One row per style, a count per row, the total and the cost in a footer that stays in view. Sizes follow the modal: 13 / 15 / 18. */ /* While the picker is open its own footer is the only bar (the window's close button still exits). */ #create-panel:has(#wizard-step-2.is-viral-studio.active .vs-mix) #wizard-nav { display: none; } #viral-studio-section .vs-mix { container-type: inline-size; margin-top: 16px; border: 1px solid var(--vs-line); border-radius: 18px; background: #fff; text-align: start; box-shadow: 0 8px 24px rgba(21, 18, 31, .06); } #viral-studio-section .vs-mix-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 20px 20px 12px; } #viral-studio-section .vs-mix-head .vs-section-title { margin: 0; flex: 1 1 auto; } #viral-studio-section .vs-mix-head .hint { order: 3; flex-basis: 100%; margin: 0; font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-make-more .vs-mix-or { margin: 2px 0 0; font-size: 15px; } /* Make N videos: the count sits beside the button, the cost line follows the number. */ #viral-studio-section .vs-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; } #viral-studio-section .vs-ws .vs-more { display: block; } #viral-studio-section .vs-ws .vs-more-row { justify-content: flex-start; } #viral-studio-section .vs-more-qty { gap: 6px; } #viral-studio-section .vs-more-qty .vs-qty-btn { width: 44px; height: 44px; } #viral-studio-section .vs-more-n { width: 56px; height: 44px; box-sizing: border-box; padding: 0 4px; border: 1px solid var(--vs-line); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; font-weight: 700; color: var(--vs-ink); text-align: center; font-variant-numeric: tabular-nums; } #viral-studio-section .vs-more-n:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; border-color: var(--vs-accent); } #viral-studio-section .vs-more-go { min-height: 44px; } #viral-studio-section .vs-more .vs-more-cost { margin: 8px 0 0; font-size: 13px; } #viral-studio-section .vs-ws .vs-more .vs-mix-or { margin: 4px 0 0; } #viral-studio-section .vs-confirm .vs-mix { margin-top: 16px; } #viral-studio-section .vs-mix-or .vs-link { display: inline-flex; align-items: center; min-height: 44px; } #viral-studio-section .vs-ws .vs-make-more .vs-mix-or { margin: 0; } #viral-studio-section .vs-mix-list { list-style: none; margin: 0; padding: 4px 12px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; } @container (max-width: 640px) { #viral-studio-section .vs-mix-list { grid-template-columns: minmax(0, 1fr); } } #viral-studio-section .vs-mix-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 12px; border-radius: 12px; transition: background-color .15s ease-out, box-shadow .15s ease-out; } [dir="rtl"] #viral-studio-section .vs-mix-row { padding: 8px 12px 8px 8px; } #viral-studio-section .vs-mix-row.is-on { background: #f5f3ff; box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .35); } #viral-studio-section .vs-mix-text { flex: 1 1 auto; min-width: 0; } #viral-studio-section .vs-mix-name { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--vs-ink); } #viral-studio-section .vs-mix-about { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--vs-ink-2); } #viral-studio-section .vs-qty { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } #viral-studio-section .vs-qty-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--vs-line); border-radius: 50%; background: #fff; color: var(--vs-ink); cursor: pointer; transition: border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out; } #viral-studio-section .vs-qty-btn:hover:not(:disabled) { border-color: var(--vs-accent); color: var(--vs-accent); } #viral-studio-section .vs-qty-btn:active:not(:disabled) { background: #ede9fe; } #viral-studio-section .vs-qty-btn:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-qty-btn:disabled { opacity: .35; cursor: default; } #viral-studio-section .vs-qty-n { min-width: 28px; text-align: center; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--vs-ink-2); } #viral-studio-section .vs-mix-row.is-on .vs-qty-n { color: var(--vs-accent); font-weight: 700; } #viral-studio-section .vs-mix-foot { position: sticky; bottom: var(--vs-nav-h, 0px); z-index: 2; display: flex; align-items: center; gap: 12px 20px; padding: 14px 20px; border-top: 1px solid var(--vs-line); border-radius: 0 0 18px 18px; background: #fff; box-shadow: 0 -8px 16px -12px rgba(21, 18, 31, .18); } #viral-studio-section .vs-mix-sum { flex: 1 1 auto; margin: 0; font-size: 13px; line-height: 1.4; color: var(--vs-ink-2); font-variant-numeric: tabular-nums; } #viral-studio-section .vs-mix-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } #viral-studio-section .vs-mix-actions .button:disabled { opacity: .5; cursor: default; } #viral-studio-section .vs-mix-actions .vs-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; } #viral-studio-section .vs-mix-actions .vs-link-quiet:hover { color: var(--vs-ink); } #viral-studio-section .vs-ws .vs-mix, #viral-studio-section .vs-review > .vs-mix { margin-top: 18px; } /* A narrow panel (phone, or the side column beside the samples): the total on its own line above the buttons. */ @container (max-width: 560px) { #viral-studio-section .vs-mix-list { padding: 4px 8px 8px; } #viral-studio-section .vs-mix-head { padding: 16px 16px 8px; } #viral-studio-section .vs-mix-foot { flex-wrap: wrap; padding: 12px 16px; } #viral-studio-section .vs-mix-sum { flex-basis: 100%; } #viral-studio-section .vs-mix-actions { flex: 1 1 100%; justify-content: space-between; } #viral-studio-section .vs-mix-actions .button { flex: 1 1 auto; max-width: 260px; } } @media (max-width: 720px) { #viral-studio-section .vs-qty-btn { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { #viral-studio-section .vs-mix-row, #viral-studio-section .vs-qty-btn { transition: none; } } /* The window heading already names Trend Factory: the panel does not repeat it. */ #wizard-step-2.is-viral-studio #step2-title { display: none; } #wizard-step-2.is-viral-studio #step2-subtitle:empty { display: none; } /* Screen 2: how it runs as two radio rows, then the options it will use with Change. */ #viral-studio-section .vs-confirm .vs-run { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; } #viral-studio-section .vs-confirm legend.vs-run-q { padding: 0; } #viral-studio-section .vs-confirm .vs-run-q { margin: 0 0 12px; font-size: 18px; } #viral-studio-section .vs-confirm-head { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-confirm-tiles { margin: 0 0 12px; } #viral-studio-section .vs-confirm-cost { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } #viral-studio-section .vs-confirm-cost b { font-weight: 500; color: var(--vs-ink); } #viral-studio-section .vs-mode-tag { display: inline-flex; align-items: center; min-height: 22px; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; background: #ede9fe; color: #5b21b6; font-size: 13px; font-weight: 500; vertical-align: 1px; } #viral-studio-section .vs-mix-x { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--vs-ink-2); cursor: pointer; } [dir="rtl"] #viral-studio-section .vs-mix-x { margin: -10px 0 -10px -10px; } #viral-studio-section .vs-mix-x svg { width: 20px; height: 20px; } #viral-studio-section .vs-mix-x:hover { background: #f3f2f8; color: var(--vs-ink); } #viral-studio-section .vs-mix-x:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section .vs-confirm-warn { color: #92400e; font-weight: 500; } #viral-studio-section .vs-confirm .vs-solo { margin: 12px 0 0; } /* Phones: the window's X already closes it, so Trend Factory drops Cancel and its main button keeps one line. */ @media (max-width: 480px) { #create-panel:has(#wizard-step-2.is-viral-studio.active) #wizard-cancel { display: none; } } /* Product shown in: which products that means (from Brand Knowledge), as small photo chips. */ #viral-studio-section .vs-prods { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } #viral-studio-section .vs-prod { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; min-height: 40px; padding: 4px 12px 4px 4px; border: 1px solid var(--vs-line); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: var(--vs-ink); } [dir="rtl"] #viral-studio-section .vs-prod { padding: 4px 4px 4px 12px; } #viral-studio-section .vs-prod > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #viral-studio-section .vs-prod img, #viral-studio-section .vs-prod-ph { flex-shrink: 0; width: 32px; height: 32px; border-radius: 7px; object-fit: cover; background: #f3f0ff; } #viral-studio-section .vs-prod-ph { display: grid; place-items: center; color: var(--vs-accent); font-weight: 700; } #viral-studio-section .vs-prod.is-more { padding: 4px 12px; color: var(--vs-ink-2); } #viral-studio-section .vs-prod-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--vs-ink-2); } #viral-studio-section .vs-prod-note.is-empty { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fff8ec; color: #7a3e0b; } #viral-studio-section .vs-prod-img + .vs-prod-ph { display: none; } /* Products are switches: on = shown in videos, off = left out. */ #viral-studio-section .vs-prods > li { display: contents; } #viral-studio-section button.vs-prod { font: inherit; font-size: 13px; font-weight: 500; text-align: start; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, opacity .15s ease; } #viral-studio-section button.vs-prod[aria-pressed="true"] { border-color: #c4b5fd; background: #faf7ff; } #viral-studio-section button.vs-prod:hover:not(:disabled) { border-color: var(--vs-accent); } #viral-studio-section button.vs-prod:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; } #viral-studio-section button.vs-prod:disabled { cursor: default; } #viral-studio-section button.vs-prod.is-off { border-style: dashed; background: #fff; color: var(--vs-ink-2); } #viral-studio-section button.vs-prod.is-off img, #viral-studio-section button.vs-prod.is-off .vs-prod-ph { filter: grayscale(1); opacity: .55; } #viral-studio-section .vs-prod-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #viral-studio-section .vs-prod-off { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--vs-ink-2); } #viral-studio-section .vs-prod > span:last-child.vs-prod-off { overflow: visible; } /* What the videos talk about: one row per topic, removable, plus the owner's own. */ #viral-studio-section .vs-topics { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } #viral-studio-section .vs-topic { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-inline-start: 14px; border: 1px solid var(--vs-line); border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.4; color: var(--vs-ink); } #viral-studio-section .vs-topic > span { flex: 1; min-width: 0; padding: 10px 0; overflow-wrap: anywhere; } #viral-studio-section .vs-topic-x { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--vs-ink-2); cursor: pointer; transition: color .15s ease, background-color .15s ease; } #viral-studio-section .vs-topic-x svg { width: 18px; height: 18px; } #viral-studio-section .vs-topic-x:hover:not(:disabled) { color: #b42318; background: #fef3f2; } #viral-studio-section .vs-topic-x:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: -2px; } #viral-studio-section .vs-topic-x:disabled { opacity: .35; cursor: default; } #viral-studio-section .vs-topic-add { margin: 16px 0 0; } #viral-studio-section .vs-prefs .vs-tile-panel .vs-topic-add label, #viral-studio-section .vs-topic-add label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--vs-ink); } #viral-studio-section .vs-topic-row { display: flex; gap: 8px; } #viral-studio-section .vs-prefs .vs-tile-panel .vs-topic-row .input { flex: 1; min-width: 0; width: auto; } #viral-studio-section .vs-topic-row .button { flex-shrink: 0; min-height: 44px; } #viral-studio-section .vs-topic-reset { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 13px; } #viral-studio-section .vs-topics-hint { margin-top: 0; } @media (max-width: 480px) { #viral-studio-section .vs-picker .swipe-amount-option { padding: 8px 10px; } } /* Autopilot: videos waiting for a free day, shown under the week (no swipe cards). */ #viral-studio-section .vs-upnext { margin: 24px 0 0; } #viral-studio-section .vs-upnext h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--vs-ink); } #viral-studio-section .vs-upnext .hint { margin: 0 0 12px; font-size: 13px; color: var(--vs-ink-2); } #viral-studio-section .vs-upnext-list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; } #viral-studio-section .vs-upnext-item { flex: 0 0 72px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #1b1726; } #viral-studio-section .vs-upnext-item video { display: block; width: 100%; height: 100%; object-fit: cover; }