.mobile-studio { display: none; } @media (max-width: 720px) { /* ── Hide the entire desktop shell (including home-cinematic moved to by JS) ── */ .shell-header, .workspace-grid, [data-workspace-home] { display: none !important; } /* ── Show the mobile studio ── */ .mobile-studio { display: flex; flex-direction: column; background: var(--bg, #0d1117); color: var(--ink, #edf1f7); } /* ════ Welcome splash screen ════ */ .mobile-welcome { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 48px 28px 56px; text-align: center; overflow: hidden; } .mob-bg-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 20%, rgba(242,139,60,.13) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(91,156,246,.09) 0%, transparent 50%); pointer-events: none; } .mobile-welcome > * { position: relative; z-index: 1; } .mobile-welcome-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .mobile-welcome-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; } .mobile-beta-pill { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(242,139,60,.14); color: #f28b3c; border: 1px solid rgba(242,139,60,.28); border-radius: 20px; padding: 4px 10px; } .mobile-welcome-headline { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 16px; color: var(--ink, #edf1f7); } .mobile-welcome-sub { font-size: .9rem; color: var(--muted, #98a2b3); line-height: 1.65; margin: 0 0 36px; max-width: 300px; } .mobile-welcome-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 280px; } .mobile-request-btn { padding: 15px 28px; background: #f28b3c; color: #fff; border: none; border-radius: 30px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 4px 22px rgba(242,139,60,.38); transition: background 140ms, transform 120ms, box-shadow 140ms; } .mobile-request-btn:active { transform: scale(.97); background: #d86f28; } .mobile-browse-btn { padding: 14px 28px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.15); border-radius: 30px; font-size: .88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 140ms, color 140ms, border-color 140ms; } .mobile-browse-btn:active { background: rgba(255,255,255,.12); color: #fff; } .mobile-welcome-hint { margin: 22px 0 0; font-size: .64rem; color: rgba(255,255,255,.25); } /* ════ Browse / gallery screen ════ */ .mobile-browse-label { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); padding: 28px 16px 4px; margin: 0; } .mobile-gallery { display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 16px); } .mobile-aifi-word { position: relative; display: inline-block; background: linear-gradient(135deg, #f28b3c 30%, #ffb870); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-top: .5em; } .mobile-aifi-word::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 1.4em; height: .52em; margin-bottom: -.38em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Ccircle cx='30' cy='39' r='5' fill='%2348c8e8'/%3E%3Cpath d='M16,28 Q30,15 44,28' stroke='%2348c8e8' fill='none' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M4,17 Q30,0 56,17' stroke='%2348c8e8' fill='none' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center bottom; opacity: .92; } .mobile-gallery-sub { font-size: .85rem; color: var(--muted, #98a2b3); margin: 0; line-height: 1.5; } /* 2-column card grid */ .mobile-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 12px; flex: 1; } .mobile-gallery-card { display: flex; flex-direction: column; background: var(--panel, #1a1d24); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; transition: border-color .18s, transform .14s; padding: 0; width: 100%; } .mobile-gallery-card:active { transform: scale(.97); } .mobile-gallery-card:hover { border-color: rgba(72,199,102,.35); } .mobile-gallery-card--soon { opacity: .45; cursor: default; pointer-events: none; } .mobile-gallery-thumb, .mobile-gallery-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: rgba(255,255,255,.04); } .mobile-gallery-placeholder { width: 100%; aspect-ratio: 4 / 3; background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; } .mobile-gallery-soon { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #98a2b3); border: 1px solid rgba(255,255,255,.12); padding: 3px 9px; border-radius: 999px; } .mobile-gallery-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; } .mobile-gallery-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .mobile-gallery-ai-tag { flex-shrink: 0; font-size: .56rem; font-weight: 900; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; background: linear-gradient(135deg, #f28b3c 0%, #ffb870 100%); color: #1a0e00; line-height: 1; } .mobile-gallery-name { font-size: .82rem; font-weight: 700; color: var(--ink, #edf1f7); line-height: 1.3; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-gallery-tagline { font-size: .72rem; color: var(--muted, #98a2b3); line-height: 1.4; display: block; } /* ── Before / After wipe animation ── */ .mobile-gallery-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(255,255,255,.04); } .mgm-before-wrap, .mgm-after-wrap { position: absolute; inset: 0; } .mgm-before, .mgm-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mgm-after-wrap { animation: mobBaReveal 6s ease-in-out infinite; } .mgm-wipe-line { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(0,0,0,.5), 0 0 14px rgba(255,255,255,.12); pointer-events: none; animation: mobBaLine 6s ease-in-out infinite; opacity: 0; } /* small BEFORE / AFTER corner labels */ .mgm-lbl { position: absolute; bottom: 8px; font-size: .56rem; font-weight: 800; letter-spacing: .1em; padding: 2px 7px; border-radius: 4px; line-height: 1.6; pointer-events: none; } .mgm-lbl-b { left: 8px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.75); opacity: 1; } .mgm-lbl-a { right: 8px; left: auto; background: rgba(242,139,60,.85); color: #fff; opacity: 1; } @keyframes mobBaReveal { /* Phase 1: hold before (after hidden) — 0-15% = 0.9s */ 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 15% { clip-path: inset(0 100% 0 0); opacity: 1; } /* Phase 2: wipe in — 15-33% = 1.1s */ 33% { clip-path: inset(0 0 0 0); opacity: 1; } /* Phase 3: hold after (extended) — 33-75% = 2.5s */ 75% { clip-path: inset(0 0 0 0); opacity: 1; } /* Phase 4: fade out — 75-88% = 0.8s */ 88% { clip-path: inset(0 0 0 0); opacity: 0; } /* Phase 5: reset while invisible */ 99% { clip-path: inset(0 100% 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } } @keyframes mobBaLine { 0%, 14.5% { left: 0%; opacity: 0; } 15% { left: 0%; opacity: 1; } 32.5% { left: calc(100% - 2px); opacity: 1; } 33%, 100% { left: calc(100% - 2px); opacity: 0; } } @keyframes mobLblB { 0%, 25% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes mobLblA { 0%, 32% { opacity: 0; } 42%, 68% { opacity: 1; } 80%, 100% { opacity: 0; } } /* Credits footer */ .mobile-gallery-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.06); text-align: center; } .mobile-credits-pill { font-size: .78rem; color: var(--muted, #98a2b3); display: inline-flex; align-items: center; gap: 6px; } .mobile-credits-dot { width: 6px; height: 6px; border-radius: 50%; background: #48c766; display: inline-block; flex-shrink: 0; } .mobile-credits-pill a { color: var(--accent, #f28b3c); text-decoration: none; } /* ════ Workflow screen ════ */ .mobile-workflow { display: flex; flex-direction: column; height: 100dvh; position: fixed; inset: 0; z-index: 300; background: var(--bg, #0d1117); } .mobile-workflow[hidden] { display: none !important; } .mobile-workflow-bar { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 48px; flex-shrink: 0; background: var(--panel, #1a1d24); border-bottom: 1px solid rgba(255,255,255,.08); z-index: 10; } .mobile-back-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--accent, #f28b3c); font-size: .88rem; font-weight: 700; cursor: pointer; padding: 6px 8px 6px 2px; flex-shrink: 0; } .mobile-back-btn svg { width: 16px; height: 16px; } .mobile-workflow-title { font-size: .82rem; font-weight: 600; color: var(--muted, #98a2b3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; } .mobile-workflow-frame { flex: 1; width: 100%; border: none; background: var(--bg, #0d1117); min-height: 0; } /* On mobile the desktop shell is hidden and .mobile-studio replaces it. Override the desktop viewport-pinning so the gallery grid can scroll. */ .page-shell.shell-mode { display: flex; flex-direction: column; height: auto !important; overflow: visible !important; overflow-x: hidden !important; } .mobile-gallery-try { display: none; } /* ── Coming Soon banner ── */ .mobile-coming-soon-banner { display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 14px 16px; background: rgba(242,139,60,0.08); border: 1px solid rgba(242,139,60,0.2); border-radius: 12px; font-size: .82rem; color: rgba(255,255,255,0.85); line-height: 1.45; } .mobile-coming-soon-icon { font-size: 1.4rem; flex-shrink: 0; } .mobile-coming-soon-banner strong { display: block; font-size: .85rem; color: #f28b3c; margin-bottom: 2px; } .mobile-coming-soon-hint { font-size: .75rem; color: rgba(255,255,255,0.5); } /* ── Beta CTA (mobile) ── */ .mobile-beta-cta { padding: 16px 12px 4px; text-align: center; } .mobile-beta-cta .beta-req-submit { width: 100%; font-size: 1rem; padding: 14px 24px; } /* ── Mobile footer links ── */ .mobile-foot-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; } .mobile-foot-links a { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 150ms; } .mobile-foot-links a:hover { color: var(--accent, #f28b3c); } .mobile-foot-copy { font-size: .7rem; color: rgba(255,255,255,0.25); margin: 0; text-align: center; } /* Make mobile cards non-interactive (showcase only) */ .mobile-gallery-card { cursor: default; pointer-events: none; } .mobile-gallery-card video { pointer-events: auto; } } /* ═══════════════════════════════════════════════════════════════════════════ Mobile workflow layout — stack all multi-column grids to 1 column Applies inside iframe workflow pages (same app.css served to iframes) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* ── Main 3-column workflow grid ─────────────────────────────────────── */ .demo-effect-grid { grid-template-columns: 1fr !important; overflow-x: hidden; } /* ── Magazine 2-column grid ──────────────────────────────────────────── */ .demo-effect-grid-magazine { grid-template-columns: 1fr !important; } /* ── Workflow screens: allow vertical scroll ─────────────────────────── */ .demo-effect-screen { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; } /* ── Panel padding/font tightening ───────────────────────────────────── */ .panel, .step-panel { padding: 14px 14px !important; } .panel h2, .step-panel-summary h2 { font-size: 1rem !important; } .recipe-panel-head h2, .step-panel-summary h2 { font-size: .96rem !important; } /* ── Choice card grids: max 2 cols instead of 3-4 ───────────────────── */ .demo-effect-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ── Result / recipe / review grids ─────────────────────────────────── */ .result-shell, .demo-recipe-grid, .demo-review-grid, .reveal-browser-grid, .prompt-editor-shell, .ui-grounding-canvas { grid-template-columns: 1fr !important; } /* ── Launchpad / workroom page grids ─────────────────────────────────── */ .ui-launchpad-grid, .ui-launchpad-band-inner, .ui-workroom-grid, .ui-grounding-shell, .ui-lab-hero, .ui-launchpad-hero { grid-template-columns: 1fr !important; padding: 16px !important; } /* ── Dropzone layout (desktop 2-col upload area) ─────────────────────── */ .dropzone-layout { grid-template-columns: 1fr !important; } /* ── Filmstrip in workflow pages ─────────────────────────────────────── */ .ui-template-filmstrip-row { grid-auto-columns: minmax(min(280px, 100%), 1fr) !important; } /* ── Image preview fits screen ───────────────────────────────────────── */ .demo-effect-screen .preview-image, .canvas-wrap img { max-height: 55vw !important; object-fit: contain; } /* ── Step panel summary row layout ──────────────────────────────────────*/ .step-panel-summary { gap: 8px !important; } /* ── Button rows: allow wrapping ─────────────────────────────────────── */ .button-row { flex-wrap: wrap !important; gap: 8px !important; } .button-row .secondary-btn, .button-row .primary-btn { font-size: .84rem !important; padding: 8px 14px !important; } /* ── Form inputs full width ──────────────────────────────────────────── */ .demo-effect-screen input[type="text"], .demo-effect-screen input[type="number"], .demo-effect-screen textarea, .demo-effect-screen select { width: 100% !important; box-sizing: border-box; } /* ── Eyebrow labels smaller ──────────────────────────────────────────── */ .eyebrow { font-size: .68rem !important; letter-spacing: .04em; } /* ── Width containment — prevent grid children from expanding past viewport ── */ .page-shell { max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } .demo-effect-shell { max-width: 100vw !important; overflow-x: hidden !important; } .demo-effect-screen { grid-template-columns: minmax(0, 1fr) !important; max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .demo-effect-topbar, .demo-effect-workspace, .workspace-shelf { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .workspace-shelf-body { min-width: 0 !important; max-width: 100% !important; } .workspace-shelf-panels { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } .workspace-shelf-scroll-shell { min-width: 0 !important; } .workspace-shelf-scroll { min-width: 0 !important; } .demo-effect-browser-head { min-width: 0 !important; max-width: 100% !important; } .wf-flow { min-width: 0 !important; } /* ── Workspace shelf — stack tabs above panels on mobile ─────────────── */ .workspace-shelf { max-width: 100% !important; overflow: hidden !important; } .workspace-shelf-body { grid-template-columns: 1fr !important; gap: 4px !important; height: auto !important; min-height: 0 !important; } .workspace-shelf-rail { display: flex !important; gap: 0 !important; } .workspace-shelf-tabs { display: flex !important; flex-direction: row !important; gap: 4px !important; } .workspace-shelf-tab { flex: 1; text-align: center; justify-content: center; padding: 6px 8px !important; font-size: .72rem !important; } .workspace-shelf-panels { height: auto !important; min-height: 0 !important; } .workspace-shelf-scroll-shell { height: auto !important; min-height: 60px !important; } .workspace-shelf-scroll { height: auto !important; min-height: 60px !important; } .workspace-shelf-card-row { grid-auto-columns: minmax(120px, 140px) !important; } .workspace-shelf-card { height: auto !important; min-height: 60px !important; } /* ── wf-flow — full-width, no centering overshoot ───────────────────── */ .wf-flow { max-width: 100% !important; padding: .75rem !important; box-sizing: border-box !important; } /* ── Options toolbar — wrap on small screens ─────────────────────────── */ .wf-options-toolbar { flex-direction: column !important; align-items: stretch !important; padding: .5rem .75rem !important; } .wf-toolbar-divider { display: none !important; } /* ── Generate bar — stack vertically ──────────────────────────────────── */ .wf-generate-bar { flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; padding: .75rem !important; } .wf-generate-btn { width: 100% !important; text-align: center; } .wf-seed-compact { justify-content: flex-start !important; } /* ── Gallery strip — smaller thumbnails ───────────────────────────────── */ .wf-gallery-strip { --gallery-thumb-size: 68px !important; } /* ── Browser title row — stack on mobile ──────────────────────────────── */ .demo-effect-browser-title { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } .demo-effect-browser-title h1 { font-size: 1rem !important; } /* ── Title row — single column ────────────────────────────────────────── */ .demo-effect-title-row, .demo-effect-title-row-compact { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Mobile image input — Camera + Library buttons ═══════════════════════════════════════════════════════════════════════════ */ /* Always hidden on desktop */ .mobile-upload-row { display: none; } .mobile-upload-status-line { display: none; } @media (max-width: 720px) { /* Hide the desktop drag/drop zone */ .desktop-dropzone { display: none !important; } /* Show the two-button mobile row */ .mobile-upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 4px; } .mobile-upload-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 12px; background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.18); border-radius: 14px; cursor: pointer; color: var(--fg, #e6edf3); text-align: center; transition: background .15s, border-color .15s; font-family: inherit; font-size: .88rem; line-height: 1.2; -webkit-tap-highlight-color: transparent; } .mobile-upload-btn:active, .mobile-upload-btn:focus-visible { background: rgba(242,139,60,.12); border-color: var(--accent, #f28b3c); outline: none; } .mobile-upload-btn svg { opacity: .85; } .mobile-upload-label { font-weight: 600; font-size: .92rem; } .mobile-upload-hint { font-size: .76rem; opacity: .6; } .mobile-upload-status-line { display: block; font-size: .8rem; color: var(--accent, #f28b3c); min-height: 1.2em; text-align: center; width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ Live Camera Modal ═══════════════════════════════════════════════════════════════════════════ */ .camera-modal { display: none; position: fixed; inset: 0; z-index: 9990; background: #000; flex-direction: column; } .camera-modal.is-open { display: flex; } .camera-modal-inner { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: 540px; margin: 0 auto; } /* Top bar: Cancel (left) + Flip (right) */ .camera-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; flex-shrink: 0; background: rgba(0,0,0,.6); } .camera-cancel-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #fff; font-size: .92rem; font-weight: 600; cursor: pointer; padding: 6px 4px; opacity: .9; font-family: inherit; } .camera-cancel-btn:active { opacity: .6; } .camera-flip-btn { background: rgba(255,255,255,.12); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background .15s; } .camera-flip-btn:active { background: rgba(255,255,255,.25); } /* Viewfinder */ .camera-viewfinder { flex: 1; position: relative; overflow: hidden; background: #111; display: flex; align-items: center; justify-content: center; } .camera-video, .camera-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; } .camera-canvas { display: none; } /* Bottom bar */ .camera-bottombar { flex-shrink: 0; background: rgba(0,0,0,.75); padding: 20px 24px 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .camera-shutter-wrap { display: flex; align-items: center; justify-content: center; } .camera-shutter-btn { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.9); cursor: pointer; box-shadow: 0 0 0 3px rgba(255,255,255,.25); transition: transform .1s, background .1s; -webkit-tap-highlight-color: transparent; } .camera-shutter-btn:active { transform: scale(.92); background: #e0e0e0; } .camera-confirm-row { display: flex; gap: 16px; width: 100%; justify-content: center; } .camera-retake-btn { flex: 1; max-width: 150px; padding: 13px 0; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: .96rem; font-weight: 600; cursor: pointer; font-family: inherit; } .camera-retake-btn:active { background: rgba(255,255,255,.1); } .camera-use-btn { flex: 1; max-width: 150px; padding: 13px 0; border-radius: 10px; border: none; background: var(--accent, #f28b3c); color: #fff; font-size: .96rem; font-weight: 700; cursor: pointer; font-family: inherit; } .camera-use-btn:active { filter: brightness(.88); } .camera-error-msg { color: #ff6b6b; font-size: .84rem; text-align: center; padding: 8px 16px; background: rgba(255,107,107,.08); border-radius: 8px; margin: 0 16px 8px; } /* ══════════════════════════════════════════════════════════════ DEMO 1 — mobile responsive overrides Stacks the two-column layout to single column on small screens. ══════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .d1-workspace { padding: .5rem .6rem; gap: .5rem; } .d1-top-area { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; } .d1-source-col, .d1-scenes-col { width: 100%; min-width: 0; min-height: 0; overflow: visible; } .d1-source-col { height: 220px; } .d1-scenes-col { height: auto; max-height: 260px; } .d1-scenes-grid { grid-template-columns: repeat(3, 1fr); } .d1-bottom-area { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ CAROUSEL CARDS — "Try it" discoverability badge ══════════════════════════════════════════════════════════════ */ /* ── Chain-mode banner ──────────────────────────────────────────── */ .shell-chain-banner { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: linear-gradient(90deg, rgba(242,139,60,0.18), rgba(242,139,60,0.08)); border-bottom: 1px solid rgba(242,139,60,0.35); font-size: 0.9rem; font-weight: 600; color: var(--accent, #f28b3c); z-index: 100; animation: chain-banner-pulse 2s ease-in-out infinite; } .shell-chain-banner[hidden] { display: none !important; } .shell-chain-banner-icon { font-size: 1.1rem; } .shell-chain-banner-text { flex: 1; } .shell-chain-banner-cancel { background: none; border: 1px solid rgba(242,139,60,0.4); border-radius: 999px; color: rgba(242,139,60,0.8); font-size: 0.75rem; padding: 3px 10px; cursor: pointer; } .shell-chain-banner-cancel:hover { background: rgba(242,139,60,0.12); color: var(--accent); } @keyframes chain-banner-pulse { 0%, 100% { background: linear-gradient(90deg, rgba(242,139,60,0.18), rgba(242,139,60,0.08)); } 50% { background: linear-gradient(90deg, rgba(242,139,60,0.28), rgba(242,139,60,0.14)); } } /* Carousel cards pulse in chain-pick mode */ .is-chain-pick .demo-card:not(.demo-card--coming-soon) .card-try-badge { background: var(--accent, #f28b3c); animation: cg-pulse 1.2s ease-in-out infinite; content: 'Pick me →'; } /* ── Chain CTA on result page ───────────────────────────────────── */ .dr-chain-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 4px; } .dr-chain-cta-btn { display: flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 1.05rem; font-weight: 700; background: linear-gradient(135deg, rgba(242,139,60,0.18), rgba(242,139,60,0.08)); border: 2px solid rgba(242,139,60,0.5); border-radius: 14px; color: var(--accent, #f28b3c); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.1s; width: 100%; justify-content: center; } .dr-chain-cta-btn:hover:not(:disabled) { background: rgba(242,139,60,0.22); border-color: var(--accent, #f28b3c); transform: translateY(-1px); } .dr-chain-cta-btn:disabled { opacity: 0.7; cursor: default; transform: none; } .dr-chain-cta-icon { font-size: 1.3rem; } .dr-chain-cta-hint { font-size: 0.85rem; font-weight: 600; color: var(--accent, #f28b3c); animation: cg-pulse 1.6s ease-in-out infinite; margin: 0; } .dr-chain-cta-hint[hidden] { display: none !important; } /* ── Private-beta welcome modal ────────────────────────────────── */ .beta-modal-backdrop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(7, 9, 14, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 16px; } .beta-modal-backdrop[hidden] { display: none !important; } .beta-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .beta-modal-card { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 20px; padding: 36px 36px 28px; display: flex; flex-direction: column; gap: 18px; transform: translateY(16px); transition: transform 0.3s ease; background: #12151c; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 32px 80px rgba(0,0,0,0.7); } .beta-modal-backdrop.is-open .beta-modal-card { transform: translateY(0); } .beta-modal-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .beta-modal-close:hover { background: rgba(255,255,255,0.14); color: #fff; } .beta-modal-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .beta-modal-logo-img { height: 48px; width: auto; } .beta-badge-pill { background: rgba(242,139,60,0.18); color: var(--accent, #f28b3c); border: 1px solid rgba(242,139,60,0.35); border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px; text-transform: uppercase; } .beta-modal-title { font-size: 1.6rem; font-weight: 800; margin: 0; line-height: 1.2; } .beta-modal-lede { margin: 0; font-size: 1rem; color: rgba(255,255,255,0.72); line-height: 1.55; } .beta-modal-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .beta-modal-video-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #0b0d11; max-height: 220px; display: flex; align-items: center; justify-content: center; } .beta-modal-video-wrap video { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; } .beta-modal-video-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.9); background: linear-gradient(transparent, rgba(0,0,0,0.65)); text-align: center; } .beta-modal-note { font-size: 0.82rem; margin: 0; line-height: 1.5; } .beta-modal-actions { display: flex; gap: 10px; } .beta-modal-login-btn { text-decoration: none; flex: 1; text-align: center; padding: 0.75rem 1.5rem; font-size: 1rem; } .beta-modal-request-btn { flex: 1; text-align: center; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 700; border-radius: 12px; border: 1px solid rgba(72,199,102,0.4); background: rgba(72,199,102,0.1); color: #48c766; cursor: pointer; transition: background 150ms, border-color 150ms; } .beta-modal-request-btn:hover { background: rgba(72,199,102,0.2); border-color: rgba(72,199,102,0.6); } @media (max-width: 720px) { .beta-modal-backdrop { padding: 10px; } .beta-modal-card { max-width: 100%; max-height: calc(100dvh - 20px); padding: 24px 18px 18px; gap: 12px; border-radius: 16px; } .beta-modal-logo-img { height: 36px; } .beta-modal-title { font-size: 1.2rem; } .beta-modal-lede { font-size: .85rem; } .beta-modal-lede br { display: none; } .beta-modal-videos { gap: 6px; } .beta-modal-video-wrap { max-height: 140px; border-radius: 8px; } .beta-modal-video-wrap video { max-height: 140px; } .beta-modal-video-label { font-size: .6rem; padding: 4px 6px; } .beta-modal-note { font-size: .75rem; } .beta-modal-login-btn { font-size: .88rem; padding: .6rem 1rem; } } @media (max-width: 400px) { .beta-modal-card { padding: 18px 14px 14px; gap: 10px; } .beta-modal-title { font-size: 1.05rem; } .beta-modal-videos { grid-template-columns: 1fr; gap: 8px; } .beta-modal-video-wrap { max-height: 120px; } .beta-modal-video-wrap video { max-height: 120px; } } .demo-card { position: relative; } .card-copy--titled { padding: 4px 8px 6px; } .card-copy--titled .card-try-badge { margin-left: auto; } /* Try badge — lives inside .card-footer in the new layout */ .card-try-badge { display: inline-flex; align-items: center; flex-shrink: 0; background: rgba(242, 139, 60, .88); color: #fff; font-size: .54rem; font-weight: 700; letter-spacing: .04em; padding: .14rem .42rem; border-radius: 2rem; pointer-events: none; white-space: nowrap; margin-top: 1px; } /* Video card hover hint — stays visible, does not hide on hover */ .card-video-hint { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; padding-bottom: 4px; color: rgba(255, 255, 255, .38); font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; opacity: 1; transition: opacity .2s; white-space: nowrap; } .demo-card:hover .card-video-hint, .demo-card.is-playing .card-video-hint { opacity: 1; } /* matte-card still contains its own layers — no absolute needed */ .matte-card .card-video-hint { z-index: unset; } /* Mobile gallery card — "Tap to try" inline tag */ .mobile-gallery-try { display: inline-block; margin-top: .2rem; font-size: .65rem; font-weight: 700; color: var(--accent, #f28b3c); letter-spacing: .04em; } /* ── Compound Workflow page ─────────────────────────────────────────────── */ .compound-wrap { max-width: 680px; margin: 0 auto; padding: 1.5rem 1rem 4rem; font-family: var(--font-main, sans-serif); } .compound-header { text-align: center; margin-bottom: 2rem; } .compound-logo-pill { display: inline-block; background: var(--accent, #f28b3c); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .25rem .9rem; border-radius: 2rem; margin-bottom: .75rem; } .compound-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.3; } .compound-subtitle { font-size: .85rem; margin: 0; } /* Step list */ .compound-steps { display: flex; flex-direction: column; gap: 1rem; } .compound-step { display: flex; gap: .9rem; background: var(--card-bg, #1a1a2e); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; padding: 1rem; transition: border-color .25s, opacity .25s; } .compound-step.is-done { border-color: rgba(80, 200, 120, .4); opacity: .85; } .compound-step.is-ready { border-color: var(--accent, #f28b3c); } .compound-step-collect { opacity: .45; pointer-events: none; } .compound-step-collect.is-ready, .compound-step-collect.is-done { opacity: 1; pointer-events: auto; } .compound-step-badge { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; } .compound-step.is-done .compound-step-badge { background: rgba(80, 200, 120, .3); color: #50c878; } .compound-step.is-ready .compound-step-badge { background: rgba(242, 139, 60, .2); color: var(--accent, #f28b3c); } .compound-step-body { flex: 1; min-width: 0; } .compound-step-title { font-size: .9rem; font-weight: 600; margin-bottom: .65rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .compound-step-frame-label { font-size: .75rem; font-weight: 400; opacity: .6; flex-shrink: 0; } .compound-step-media { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; } .compound-media-cell { display: flex; flex-direction: column; align-items: center; gap: .25rem; } .compound-media-label { font-size: .65rem; opacity: .55; text-transform: uppercase; letter-spacing: .05em; } .compound-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: .4rem; background: rgba(255,255,255,.06); display: block; } .compound-thumb-pending { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: .4; } .compound-thumb-expired { font-size: 1.4rem; opacity: .35; cursor: help; } .compound-arrow { font-size: 1.2rem; opacity: .45; padding: 0 .1rem; } .compound-render-all-btn { display: inline-flex; align-items: center; gap: .4rem; background: #1a1a1a; color: #f28b3c; border: 1.5px solid #f28b3c; border-radius: 999px; padding: .45rem 1.1rem; font-size: .82rem; font-weight: 700; cursor: pointer; margin-top: .5rem; transition: background .18s, color .18s; } .compound-render-all-btn:hover { background: #f28b3c; color: #fff; } .compound-render-all-btn:disabled { opacity: .5; cursor: default; } .compound-open-btn { display: inline-block; background: var(--accent, #f28b3c); color: #fff; text-decoration: none; font-size: .78rem; font-weight: 700; padding: .35rem .85rem; border-radius: .5rem; cursor: pointer; transition: opacity .2s; } .compound-open-btn:hover { opacity: .85; } .compound-open-btn.is-disabled { opacity: .35; pointer-events: none; cursor: default; } .compound-open-btn.is-in-progress { background: rgba(242, 139, 60, .2); color: var(--accent, #f28b3c); border: 1px solid var(--accent, #f28b3c); pointer-events: none; } .compound-step-hint { font-size: .75rem; margin-top: .35rem; margin-bottom: 0; } .compound-collect-btn { background: rgba(242, 139, 60, .15); color: var(--accent, #f28b3c); border: 1px solid var(--accent, #f28b3c); } .compound-step.is-ready .compound-collect-btn { background: var(--accent, #f28b3c); color: #fff; } .compound-done-label { font-size: .8rem; color: #50c878; font-weight: 600; } .compound-collect-hint { font-size: .75rem; margin-top: .35rem; margin-bottom: 0; } .compound-done-banner { text-align: center; margin-top: 2rem; padding: 1rem; background: rgba(80, 200, 120, .12); border: 1px solid rgba(80, 200, 120, .35); border-radius: .75rem; font-weight: 700; color: #50c878; font-size: 1rem; } /* Banner shown on result page when it was opened as part of a chain step */ .compound-report-banner { background: rgba(80, 200, 120, .15); border: 1px solid rgba(80, 200, 120, .4); border-radius: .5rem; padding: .55rem 1rem; font-size: .82rem; font-weight: 600; color: #50c878; margin-bottom: 1rem; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ CINEMATIC HOME SCREEN Fixed full-viewport overlay; gallery fades between renders in BG; home-content = left (text/CTA) + right (studio preview mock). ═══════════════════════════════════════════════════════════════════════════ */ .home-cinematic { position: fixed; inset: 0; z-index: 9000; /* above shell-header, nav, and every overlay */ display: flex; flex-direction: column; overflow: hidden; background: #09090b; } .home-cinematic[hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ LAUNCHER GRID — full-page workflow picker (first-time landing) ═══════════════════════════════════════════════════════════════════════════ */ .launcher-home { align-items: stretch; background: linear-gradient(180deg, #0c0b10 0%, #111118 100%); } .launcher-scroll { flex: 1; overflow-y: auto; padding: 48px 40px 32px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; } .launcher-header { text-align: center; margin-bottom: 28px; } .launcher-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 200, 255, 0.7); margin: 0 0 10px; } .launcher-headline { font-size: 2rem; font-weight: 800; color: #f5efe8; margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.15; } .launcher-sub { font-size: .95rem; color: rgba(255,255,255,.45); margin: 0 0 20px; } /* Stack story chips inside launcher header */ .launcher-stack-chips { display: flex; flex-direction: row; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; } .launcher-stack-chip { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; background: rgba(0, 200, 255, 0.1); border: 1px solid rgba(0, 200, 255, 0.35); border-radius: 10px; text-decoration: none; text-align: left; min-width: 190px; max-width: 250px; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .launcher-stack-chip:hover { background: rgba(0, 200, 255, 0.18); border-color: rgba(0, 200, 255, 0.6); transform: translateY(-2px); } .launcher-chip-title { font-size: 0.82rem; font-weight: 700; color: #ffffff; line-height: 1.2; } .launcher-chip-chain { font-size: 0.65rem; color: rgba(0, 200, 255, 0.8); line-height: 1.3; font-family: ui-monospace, monospace; } @media (max-width: 680px) { .launcher-stack-chips { flex-direction: column; align-items: center; } .launcher-stack-chip { min-width: 270px; max-width: 90%; } } .launcher-filters { display: flex; justify-content: center; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; } .launcher-filter-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: rgba(255,255,255,.5); font-size: .8rem; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .launcher-filter-btn:hover { color: #f5efe8; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); } .launcher-filter-btn.is-active { color: #f5efe8; background: var(--accent, #f28b3c); border-color: var(--accent, #f28b3c); } .launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; } .launcher-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); text-decoration: none; color: inherit; transition: border-color .2s, transform .15s, box-shadow .2s; cursor: pointer; } .launcher-card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } .launcher-card[hidden] { display: none !important; } .launcher-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,.3); } .launcher-card-media img, .launcher-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .launcher-card-media video { pointer-events: none; } .launcher-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: .85rem; color: rgba(255,255,255,.25); text-align: center; padding: 12px; } .launcher-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; } .launcher-card-title { font-size: .85rem; font-weight: 700; color: #f5efe8; margin: 0; line-height: 1.3; } .launcher-card-tagline { font-size: .72rem; color: rgba(255,255,255,.4); margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .launcher-card-badge { display: inline-block; align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); } .launcher-footer { text-align: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); } .launcher-skip-label { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255,255,255,.4); cursor: pointer; } .launcher-skip-label input[type="checkbox"] { accent-color: var(--accent, #f28b3c); width: 15px; height: 15px; } .launcher-footer-hint { font-size: .72rem; color: rgba(255,255,255,.25); margin-top: 8px; } .launcher-footer-hint strong { color: rgba(255,255,255,.45); } /* ── Launcher header actions (Jump to Studio / Always skip) ──────────── */ .launcher-actions { display: flex; gap: 12px; margin-top: 14px; align-items: center; justify-content: center; } .launcher-jump-btn { padding: 7px 20px; border-radius: 8px; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); cursor: pointer; transition: all .15s; } .launcher-jump-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); } .launcher-skip-forever-btn { padding: 7px 16px; border-radius: 8px; font-size: .76rem; font-weight: 500; background: none; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.35); cursor: pointer; transition: all .15s; } .launcher-skip-forever-btn:hover { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.15); } /* ══════════════════════════════════════════════════════════════════════════ STUDIO EMPTY STATE — Blender-style "pick a workflow" landing ══════════════════════════════════════════════════════════════════════════ */ .studio-empty { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 24px 16px; } .studio-empty[hidden] { display: none !important; } .studio-empty-inner { text-align: center; max-width: 680px; } .studio-empty-title { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 800; color: rgba(255,255,255,.8); margin: 0 0 6px; } .studio-empty-sub { font-size: .85rem; color: rgba(255,255,255,.35); margin: 0 0 28px; line-height: 1.5; } .studio-empty-sub strong { color: rgba(255,255,255,.5); } .studio-empty-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } @media (max-width: 540px) { .studio-empty-cards { grid-template-columns: 1fr; } } .studio-empty-card { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 24px 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color .2s; } .studio-empty-card:hover { border-color: rgba(255,255,255,.12); } .studio-empty-card--main { border-color: rgba(242,139,60,.15); background: rgba(242,139,60,.03); } .studio-empty-card--main:hover { border-color: rgba(242,139,60,.3); } .studio-empty-icon { color: rgba(255,255,255,.2); margin-bottom: 4px; } .studio-empty-card--main .studio-empty-icon { color: rgba(242,139,60,.35); } .studio-empty-card h3 { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.65); margin: 0; } .studio-empty-card p { font-size: .72rem; color: rgba(255,255,255,.3); margin: 0; line-height: 1.45; } .studio-empty-browse-btn { padding: 9px 24px; border-radius: 10px; font-size: .88rem; font-weight: 700; background: linear-gradient(135deg, rgba(242,139,60,.15), rgba(242,139,60,.08)); border: 1px solid rgba(242,139,60,.3); color: var(--accent, #f28b3c); cursor: pointer; transition: all .15s; } .studio-empty-browse-btn:hover { background: rgba(242,139,60,.2); border-color: var(--accent, #f28b3c); } /* Autoplay video on card hover */ .launcher-card:hover video { opacity: 1; } .launcher-card video { opacity: .85; transition: opacity .2s; } /* ── Gallery background ─────────────────────────────────────────────────── */ .home-gallery { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .home-gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; pointer-events: none; } .home-gallery-slide.is-active { opacity: 1; } .home-gallery-img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.48) saturate(1.15); } .home-gallery-vignette { position: absolute; inset: 0; background: /* radial centre darkener — kills the background in the content zone */ radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,0,0,.55) 0%, transparent 100%), /* directional vignette */ linear-gradient(115deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.58) 100%); pointer-events: none; } /* ── Content layout — single vertical column ────────────────────────────── */ /* ── Three-column home layout ────────────────────────────────────────────── */ .home-layout { position: relative; z-index: 1; flex: 1 1 auto; display: grid; grid-template-columns: 185px 1fr 195px; overflow: hidden; width: 100%; max-width: 1600px; /* prevent runaway column widths on QHD/4K monitors */ margin: 0 auto; /* keep it centred against the full-width cinematic bg */ } /* ── Center column ── */ .home-content { min-width: 0; display: flex; flex-direction: column; align-items: stretch; /* children fill full width */ justify-content: center; padding: 1.2rem .5rem 1rem; /* tight horizontal — preview fills column */ gap: .8rem; overflow-y: auto; box-sizing: border-box; } /* ── Left column — What's New / How it works ── */ .home-col-news { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem .9rem 1rem 1rem; overflow-y: auto; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,.08); min-height: 0; background: rgba(0,0,0,.22); backdrop-filter: blur(8px); } /* thin scrollbar for the sidebar */ .home-col-news::-webkit-scrollbar { width: 3px; } .home-col-news::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } .hn-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .hn-heading { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); } .hn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .hn-item { display: flex; align-items: flex-start; gap: .4rem; font-size: .72rem; line-height: 1.45; color: rgba(255,255,255,.55); } .hn-tag { flex-shrink: 0; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15em .4em; border-radius: 3px; margin-top: .1em; } .hn-new .hn-tag { background: rgba(61,255,143,.18); color: #3dff8f; } .hn-fix .hn-tag { background: rgba(96,165,250,.18); color: #60a5fa; } .hn-note .hn-tag { background: rgba(251,191,36,.15); color: #fbbf24; } .hn-divider { height: 1px; background: rgba(255,255,255,.07); margin: .3rem 0; } .hn-section-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); margin: 0; } .hn-steps { display: flex; flex-direction: column; gap: .75rem; } .hn-step { display: flex; align-items: flex-start; gap: .6rem; } .hn-step-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(61,255,143,.15); border: 1px solid rgba(61,255,143,.3); color: #3dff8f; font-size: .65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .hn-step-body { display: flex; flex-direction: column; gap: .15rem; } .hn-step-body strong { font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.8); } .hn-step-body span { font-size: .68rem; color: rgba(255,255,255,.4); line-height: 1.4; } /* ── Sample reel (right column) ─────────────────────────────────────────── */ .home-samples { width: 195px; position: relative; overflow: hidden; padding: 0 8px 0 4px; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.22); backdrop-filter: blur(8px); } .home-samples-strip { display: flex; flex-direction: column; gap: 10px; animation: home-samples-scroll 50s linear infinite; will-change: transform; } .home-samples-strip:hover { animation-play-state: paused; } @keyframes home-samples-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } /* Single-image mode — no scroll, fills the aside */ .home-samples-strip--single { animation: none; flex: 1; height: 100%; gap: 0; align-items: stretch; } .home-sample-card { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; flex-shrink: 0; background: rgba(0,0,0,.4); cursor: pointer; border: 1px solid rgba(255,255,255,.07); transition: border-color .2s ease, transform .2s ease; } .home-sample-card:hover { border-color: rgba(61,255,143,.4); transform: scale(1.03); } /* Hero card fills the full aside height */ .home-sample-card--hero { aspect-ratio: unset; flex: 1; height: 100%; border-radius: 12px; } .home-sample-card img, .home-sample-card video { width: 100%; height: 100%; object-fit: cover; display: block; } .home-sample-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 7px 7px; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.7); text-align: center; } /* Top/bottom fades */ .home-samples-fade { position: absolute; left: 0; right: 14px; height: 90px; z-index: 2; pointer-events: none; } .home-samples-fade--top { top: 0; background: linear-gradient(to bottom, #09090b 0%, transparent 100%); } .home-samples-fade--bot { bottom: 0; background: linear-gradient(to top, #09090b 0%, transparent 100%); } /* ── Top: brand + headline + bullets ────────────────────────────────────── */ .home-top { width: 100%; display: flex; flex-direction: column; gap: .45rem; text-align: center; align-items: center; } .home-top-bar { display: flex; align-items: center; gap: .55rem; justify-content: center; } .home-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: .1em; color: #fff; } .home-top-sep { color: rgba(255,255,255,.25); } .home-top-tagline { font-size: .75rem; color: rgba(255,255,255,.45); letter-spacing: .05em; text-transform: uppercase; }