*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Icones (sprite SVG, sem emoji) ---- Classe compartilhada por TODAS as paginas da plataforma (dashboard, login, cadastro, index, vitrine) - cada pagina que usa icones tem seu proprio sprite (mesmo padrao ja usado em landing.html), mas todas reaproveitam esta MESMA classe .icon pro tamanho/cor ficarem consistentes em qualquer lugar. Uso: - tamanho segue o font-size do container. */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Scrollbar personalizada (roxo oficial fixo da plataforma + leve neon) - usa um hex fixo (nao a variavel --accent-solid) de proposito: essa variavel e sobrescrita pela cor ESCOLHIDA por cada vendedor dentro da vitrine (Branding.applyTo em vitrine.html) - o scroll deve continuar sempre roxo oficial em qualquer pagina, nunca herdar a personalizacao. */ * { scrollbar-width: thin; scrollbar-color: #a78bfa rgba(255,255,255,0.06); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } *::-webkit-scrollbar-thumb { background: #a78bfa; border-radius: 8px; box-shadow: 0 0 6px 1px rgba(167,139,250,0.6); } *::-webkit-scrollbar-thumb:hover { background: #c4b5fd; box-shadow: 0 0 10px 3px rgba(167,139,250,0.8); } :root { /* Valores padrao (usados no dashboard, cadastro, login e landing page). Na vitrine, vitrine.html sobrescreve estes mesmos nomes de variavel com os valores de personalizacao do vendedor - ver assets/branding.js. Identidade oficial da plataforma (nao personalizavel): fundo azul escuro trocado por um quase-preto (leve tom azulado ainda visivel nas bordas/superficies, mas o fundo em si e quase neutro). */ --bg: #030509; --surface: #0a0f16; --border: #1a2536; --accent: #a78bfa; --accent2: #c4b5fd; --accent-solid: #a78bfa; --accent2-solid: #c4b5fd; --accent-image: linear-gradient(#a78bfa, #a78bfa); --accent-rgb: 167,139,250; --accent2-rgb: 196,181,253; --brand-name-color: #a78bfa; --font-family: 'Segoe UI', system-ui, sans-serif; --text: #f1f5f9; --muted: #94a3b8; --muted-rgb: 148,163,184; --card-radius: 16px; --danger: #ef4444; --success: #22c55e; } /* Tema claro da INTERFACE FIXA da plataforma (dashboard/login/cadastro/ landing) - alternado pelo botao sol/lua, ver assets/theme.js. Nao tem nada a ver com a personalizacao da vitrine de cada vendedor (essa usa Branding.applyTo, que sobrescreve essas mesmas variaveis so dentro de vitrine.html com as cores escolhidas pelo vendedor). Cor de destaque (--accent/--accent2) continua igual nos dois temas - so fundo/superficie/ texto mudam. */ :root[data-theme="light"] { --bg: #f6f7fb; --surface: #ffffff; --border: #e3e6ee; --text: #1a2333; --muted: #64748b; --muted-rgb: 100,116,139; } body { /* background-attachment:fixed faz o degrade (quando --bg e gradiente, ver Branding.applyTo/toCss) se dimensionar pela JANELA/VIEWPORT, nao pela altura real da pagina inteira - sem isso, um degrade "de fundo" cobrindo o body inteiro (que pode ter milhares de pixels com muitos prompts na grade) so mostra a cor final dele la no rodape, exigindo rolar MUITO pra ver - com attachment:fixed, o degrade completo (inicio ao fim) sempre aparece dentro de UMA tela, nao importa quantos cards tem abaixo. Corrige tanto o mockup do dashboard (que nao pode rolar) quanto a experiencia de um lead de verdade navegando a vitrine. */ background: var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-family); min-height: 100vh; } a { color: inherit; } /* HEADER */ header { position: sticky; top: 0; z-index: 100; background: rgba(6,13,26,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 14px 24px; } .header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; } .logo img { height: 32px; width: auto; } .logo-name { font-size: 1.1rem; font-weight: 700; background: var(--brand-name-color); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .header-spacer { flex: 1; } /* Botao sol/lua - alterna o tema claro/escuro da interface FIXA da plataforma (assets/theme.js). Em paginas sem header (login/cadastro) ganha .floating pra ficar fixo no canto. */ .theme-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.15s, transform 0.15s; } .theme-toggle-btn:hover { border-color: var(--accent); transform: scale(1.06); } .theme-toggle-btn.floating { position: fixed; top: 16px; right: 16px; z-index: 50; } /* Hamburguer - agora visivel em QUALQUER largura (2026-07-29, antes so aparecia no mobile): no mobile abre/fecha a gaveta (.dash-sidebar.open), no desktop alterna o encolhimento do menu (.dash-sidebar.collapsed) - mesmo botao, comportamento decidido em JS conforme a largura da tela. Botao de fechar a gaveta (.dash-mobile-drawer-close) continua so mobile, ver media queries. */ .hamburger-btn { display: flex; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; } .dash-mobile-drawer-close { display: none; align-self: flex-end; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.2rem; cursor: pointer; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0; } .dash-sidebar-backdrop { display: none; } .header-nav { display: flex; gap: 10px; align-items: center; } .count-badge { font-size: 0.8rem; color: var(--muted); white-space: nowrap; } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.18s; } .btn:hover { border-color: var(--accent); } .btn-primary { background: linear-gradient(135deg, var(--accent-solid), var(--accent2-solid)); border-color: transparent; color: #030509; } .btn-primary:hover { filter: brightness(1.08); } .btn-outline { background: transparent; } .btn-danger { background: transparent; border-color: rgba(239,68,68,0.4); color: #fca5a5; } .btn-danger:hover { border-color: var(--danger); background: rgba(239,68,68,0.08); } .btn-sm { padding: 6px 12px; font-size: 0.8rem; } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: default; } .btn.copied { background: rgba(34,197,94,0.7); color: #fff; border-color: transparent; } /* AUTH PAGES (cadastro / login) */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 32px; } .auth-card .logo { justify-content: center; margin-bottom: 24px; } .auth-title { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 6px; } .auth-subtitle { font-size: 0.85rem; color: var(--muted); text-align: center; margin-bottom: 24px; } .auth-footer { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--muted); } .auth-footer a { color: var(--accent2); font-weight: 600; text-decoration: none; } .auth-footer a:hover { text-decoration: underline; } /* FORMS */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .form-input, .form-textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 11px 14px; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; } .form-input:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); } .form-textarea { resize: vertical; min-height: 90px; } .form-hint { font-size: 0.75rem; color: var(--muted); margin-top: 5px; } .form-hint.ok { color: #86efac; } .form-hint.bad { color: #fca5a5; } .form-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; margin-bottom: 16px; display: none; } .form-error.show { display: block; } .form-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; margin-bottom: 16px; display: none; } .form-success.show { display: block; } .input-prefix-group { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); } .input-prefix-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); } .input-prefix { padding: 11px 10px 11px 14px; font-size: 0.85rem; color: var(--muted); white-space: nowrap; display: flex; align-items: center; } .input-prefix-group .form-input { border: none; box-shadow: none !important; padding-left: 0; } /* DASHBOARD LAYOUT */ .dash-body { display: flex; min-height: calc(100vh - 62px); } .dash-sidebar { width: 220px; flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--border); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease; } /* Menu do DESKTOP tambem pode ser ocultado agora (pedido do usuario, 2026-07-29 - antes so o mobile tinha essa opcao) - reaproveita o mesmo .hamburger-btn do header (agora visivel em qualquer largura, nao so mobile - ver JS) pra alternar essa classe. Encolhe com transicao suave (width/padding animados, ver regra base acima) em vez de so sumir - .dash-sidebar-group filho vira nowrap+opacity:0 junto pra o texto dos botoes nao quebrar linha feio enquanto a largura encolhe. So se aplica ACIMA do breakpoint mobile (861px+) - no mobile o menu usa o mecanismo de gaveta (.open) que já é dele mesmo, nao mistura com isso. */ @media (min-width: 861px) { .dash-sidebar.collapsed { width: 0; padding-left: 0; padding-right: 0; border-right-color: transparent; opacity: 0; pointer-events: none; } } /* Os botoes de navegacao ficam agrupados (.dash-sidebar-group) pra poder trocar qual grupo aparece no mobile (menu principal x menu de Personalizar) - o grupo precisa continuar sendo flex-column, senao os botoes dentro dele voltam a empilhar errado (fluxo inline padrao). */ .dash-sidebar-group { display: flex; flex-direction: column; gap: 4px; flex: 1; } .dash-tab-btn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: none; background: transparent; color: var(--muted); font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: left; transition: all 0.15s; } .dash-tab-btn:hover { background: var(--surface); color: var(--text); } .dash-tab-btn.active { background: var(--surface); color: var(--accent2); border: 1px solid var(--border); } .dash-main { flex: 1; padding: 28px 32px; max-width: 1100px; transition: max-width 0.25s ease; } /* Com o menu encolhido (.dash-sidebar.collapsed, ver acima), o conteudo principal deixa de ficar travado em 1100px - senao esconder o menu nao dava espaco NENHUM de verdade pro campo de personalizacao, so movia o menu, que era exatamente a reclamacao do usuario (2026-07-29). Classe ".wide" e adicionada/removida no MESMO clique que alterna ".collapsed" (ver JS). */ .dash-main.wide { max-width: none; } .dash-panel { display: none; } .dash-panel.active { display: block; } .dash-panel-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; } .dash-panel-subtitle { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; margin-bottom: 28px; } .dash-card-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; } .stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .stat-box { flex: 1; min-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; } .stat-box-value { font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-solid), var(--accent2-solid)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .stat-box-label { font-size: 0.78rem; color: var(--muted); margin-top: 4px; } /* Mini dashboard de vendas (Visao geral) - so um preview "coming soon": os numeros ficam desfocados/apagados por baixo de um aviso, pra dar uma ideia visual do que vem por ai sem prometer dados reais ainda. */ .sales-dashboard-preview { position: relative; } .sales-dashboard-preview .stats-row { margin-bottom: 0; } .sales-stat-placeholder { filter: blur(2px); opacity: 0.45; pointer-events: none; user-select: none; } .sales-dashboard-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; background: rgba(var(--muted-rgb, 148,163,184), 0.06); border-radius: 12px; } .sales-dashboard-overlay p { font-size: 0.85rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .vitrine-link-box { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; flex-wrap: wrap; } .vitrine-link-box code { flex: 1; min-width: 200px; font-size: 0.82rem; color: var(--accent2); word-break: break-all; } /* SEARCH SECTION */ .search-section { padding: 14px 24px 0; } .search-section-inner { max-width: 860px; margin: 0 auto; } .search-wrap { position: relative; width: 100%; } .search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; width: 14px; height: 14px; } .search-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 9px 14px 9px 36px; font-size: 0.85rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .search-input:hover { border-color: var(--accent-solid); } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); } .search-input::placeholder { color: var(--muted); } /* TAGS FILTER */ .tags-bar { /* sem background proprio - deixa o fundo da pagina (que pode ser um degrade) aparecer continuo por tras, sem "costura" visual */ border-bottom: 1px solid var(--border); padding: 10px 0 10px 24px; display: flex; gap: 8px; align-items: center; overflow-x: scroll; scrollbar-width: none; cursor: grab; user-select: none; -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to right, black 0%, black calc(100% - 80px), transparent 100%); } .tags-bar::-webkit-scrollbar { display: none; } .tags-bar.dragging { cursor: grabbing; } .tag-btn { white-space: nowrap; flex-shrink: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.18s; letter-spacing: 0.02em; } /* border-color nao aceita gradiente (so cor solida) - por isso o hover usava so uma cor fixa do degrade em vez do degrade completo. Mesma tecnica de 2 camadas de background do .card:hover (ver acima): fundo real no padding-box, --accent-image (sempre um linear-gradient() valido) no border-box - respeita o border-radius:999px (pill), diferente de border-image. */ .tag-btn:hover { border-color: transparent; color: var(--text); box-shadow: 0 0 10px 1px rgba(var(--accent-rgb),0.4); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--accent-image) border-box; } .tag-btn.active { background: var(--accent); border-color: transparent; color: #fff; } /* MAIN / GRID */ main { max-width: 1400px; margin: 0 auto; padding: 24px; } .grid { display: flex; gap: 14px; align-items: flex-start; transition: opacity 0.18s ease; } .grid.fading { opacity: 0; } .grid-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } /* CARD Borda em degrade que RESPEITA border-radius: border-image nao funciona com cantos arredondados (ignora border-radius), entao usamos duas camadas de background (padding-box = preenchimento do card, border-box = "borda") em vez de border-color/border-image. --accent-image e sempre um linear-gradient() valido (mesmo em modo solido, com a cor repetida). */ .card { position: relative; border-radius: var(--card-radius); overflow: hidden; cursor: pointer; margin-bottom: 14px; border: 1px solid transparent; /* Cinza neutro fixo e semitransparente (nao muda com o fundo escolhido pelo vendedor, e fica sutil em vez de "aceso") - fica visivel tanto em fundo claro quanto escuro, diferente de var(--border) que e um azul bem escuro (sumia em fundos claros). So a borda ESTATICA e transparente - no hover continua solida/opaca (--accent-image, sem alpha). */ background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(rgba(var(--muted-rgb),0.35), rgba(var(--muted-rgb),0.35)) border-box; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } /* .card.force-hover: usado enquanto o modal desse card esta aberto (ver openModal() em vitrine.html) - mantem o visual de hover "ligado" mesmo sem o mouse realmente em cima, pra ele aparecer destacado/brilhando atraves do vidro embacado do modal por cima. */ .card:hover, .card.force-hover { transform: translateY(-3px); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--accent-image) border-box; box-shadow: 0 12px 40px rgba(var(--accent-rgb),0.35); } .card img { width: 100%; display: block; object-fit: cover; } /* ID badge - fundo (pill) fica separado do texto porque o texto usa a tecnica de degrade via background-clip:text, que precisa do "background" so pra ele (nao pode dividir com o fundo escuro do pill). */ /* Badge do ID sempre visivel (padrao da plataforma, 2026-07-29 - antes so aparecia no hover/clique) - mesmo padrao que .prompt-card-id (dashboard, aba Prompts) ja usava. Passou a ser "sempre visivel" pra funcionar nos mockups da landing tambem, onde o visitante raramente passa o mouse de verdade em cima de um card. */ .card-id { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); border-radius: 6px; padding: 3px 8px; } .id-badge-text { font-size: 0.62rem; font-family: monospace; font-weight: 700; letter-spacing: 0.03em; background: var(--accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Copy ID button (desktop hover) */ .card-copy { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); border: none; border-radius: 6px; padding: 5px 8px; font-size: 0.68rem; color: #e2e8f0; cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.15s; display: flex; align-items: center; gap: 4px; } .card:hover .card-copy, .card.force-hover .card-copy { opacity: 1; } .card-copy:hover { background: rgba(var(--accent-rgb),0.8); } .card-copy.copied { background: rgba(34,197,94,0.7); color: #fff; } /* Icone de lupa no hover do card - indica "clique pra ver maior" */ .card-zoom-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.75); width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 2; } .card:hover .card-zoom-icon, .card.force-hover .card-zoom-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Mobile fixed buttons */ .card-mobile-btns { display: none; } .card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); opacity: 0; transition: opacity 0.25s; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; gap: 6px; } .card:hover .card-overlay, .card.force-hover .card-overlay { opacity: 1; } .card-title { font-size: 0.82rem; font-weight: 600; color: #fff; line-height: 1.3; } .card-tags { display: flex; flex-wrap: wrap; gap: 4px; } .card-tag { font-size: 0.65rem; background: var(--accent-image); border-radius: 4px; padding: 2px 6px; color: #fff; } /* EMPTY / LOADING */ .state-msg { text-align: center; color: var(--muted); padding: 60px 24px; font-size: 0.95rem; } .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 60px auto 0; } @keyframes spin { to { transform: rotate(360deg); } } /* LOAD MORE */ .load-more-wrap { text-align: center; padding: 32px 0; } #load-more { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 10px 32px; font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; } #load-more:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.1); } #load-more:disabled { opacity: 0.4; cursor: default; } /* MODAL - o blur (vidro) fica SO no .modal em si (backdrop-filter dele mesmo, mais abaixo) - o backdrop ao redor so escurece um pouco, sem embacar nada. Se os dois tivessem blur, a pagina inteira ficaria borrada e o efeito de "vidro" do modal (que deveria contrastar com o resto nitido) se perdia. */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.open { display: flex; } .modal { /* Efeito vidro PADRAO (nao muda com o tema escolhido pelo vendedor - de proposito NAO usa var(--surface)/accent aqui) + blur forte por tras, pra qualquer coisa atras do modal (cards, o proprio card aberto com o hover "ligado" - ver openModal() em vitrine.html) aparecer embacada atraves dele, como um vidro fosco de verdade. */ background: rgba(255,255,255,0.08); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; max-width: 560px; width: 100%; padding: 28px; position: relative; max-height: 90vh; overflow-y: auto; } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; } .modal h2 { font-size: 1.05rem; margin-bottom: 6px; } /* Limite de altura pra fotos retrato/verticais nao dominarem o modal inteiro - sem isso, o botao "Copiar ID" podia ficar fora da vista, exigindo rolar o modal pra baixo so pra encontrar o botao. */ .modal img { display: block; width: 100%; max-height: 45vh; object-fit: contain; border-radius: 12px; margin-bottom: 14px; background: rgba(0,0,0,0.25); } .modal-meta { font-size: 0.82rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; } .modal-meta strong { color: var(--text); } .modal-id { background: rgba(var(--accent-rgb),0.1); border-radius: 6px; padding: 4px 10px; display: inline-block; margin-bottom: 14px; } .modal-id .id-badge-text { font-size: 0.8rem; } .modal-copy-id { margin-top: 16px; width: 100%; padding: 10px; background: var(--accent); border: none; border-radius: 10px; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; /* Neon sutil pra "refletir" no vidro embacado do modal atras do botao. */ box-shadow: 0 0 18px 2px rgba(var(--accent-rgb),0.5); } /* Hover puxa a MESMA cor de destaque escolhida pelo vendedor (nao um amarelo fixo) e so escurece um pouco, pra simular o efeito de pressionar/hover sem sair da identidade visual daquela vitrine. */ .modal-copy-id:hover { background: color-mix(in srgb, var(--accent-solid) 75%, black); box-shadow: 0 0 24px 4px rgba(var(--accent-rgb),0.7); } .modal-copy-id.copied { background: #16a34a; box-shadow: 0 0 18px 2px rgba(34,197,94,0.5); } /* HERO SECTION (vitrine) - so o carrossel de destaques hoje */ .hero { max-width: 860px; margin: 40px auto 0; padding: 0 24px; text-align: center; } /* MOBILE */ @media (max-width: 768px) { .hero { padding: 0 14px; margin-top: 20px; } .destaques { margin-top: 0; } .destaques-title { margin-bottom: 8px !important; font-size: 0.82rem !important; } .grid { gap: 8px; } .grid-col { gap: 8px; } header { padding: 10px 14px; } main { padding: 14px; } .search-section { padding: 14px 14px 0; } .tags-bar { padding: 8px 0 8px 14px; } /* Esconde os elementos de hover no mobile */ .card-copy { display: none; } .card-overlay { display: none; } .card-zoom-icon { display: none; } /* Mostra botoes fixos na base do card */ .card-mobile-btns { display: flex; position: absolute; left: 0; right: 0; bottom: 0; gap: 3px; padding: 4px; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); border-top: 1px solid rgba(255,255,255,0.1); /* Arredondamento proprio (nao confiar so no overflow:hidden do .card pai) - backdrop-filter as vezes "vaza" do cantos se o elemento nao tiver seu proprio border-radius, mesmo dentro de um ancestral com overflow:hidden. */ border-radius: 0 0 var(--card-radius) var(--card-radius); overflow: hidden; } .card-mobile-btn { flex: 1; border: none; border-radius: 6px; padding: 4px 2px; font-size: 0.54rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 2px; transition: background 0.15s, color 0.15s; white-space: nowrap; overflow: hidden; min-width: 0; } .card-mobile-btn svg { flex-shrink: 0; width: 8px; height: 8px; } .card-mobile-btn.ver { background: var(--accent); color: #fff; } .card-mobile-btn.ver:active { background: #a07018; } .card-mobile-btn.copiar { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .card-mobile-btn.copiar:active { background: var(--border); } .card-mobile-btn.copiar.copied { background: rgba(34,197,94,0.2); border-color: #22c55e; color: #86efac; } .dash-body { flex-direction: column; } .dash-main { padding: 20px 16px; } /* ---- Menu do dashboard vira "gaveta" em tela cheia no mobile, aberta pelo hamburguer no header. Sem isso, a lista horizontal de abas + todo o conteudo de Personalizar (marca+banner+cores+fonte+mockup) empilhados ficavam impossiveis de navegar numa tela pequena. ---- */ .hamburger-btn { display: flex; } .dash-sidebar { position: fixed; inset: 0; z-index: 300; width: 100%; max-width: 320px; height: 100%; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.2s ease; } .dash-sidebar.open { transform: translateX(0); } .dash-mobile-drawer-close { display: flex; } .dash-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,0.55); } .dash-sidebar-backdrop.open { display: block; } .sidebar-profile { display: flex; } .sidebar-spacer { display: none; } .dash-sidebar-group .dash-tab-btn { text-align: left; } .sidebar-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 10px 4px 2px; } } /* PROMPT CARDS (dashboard - aba Prompts) */ .prompt-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .prompt-card { position: relative; border-radius: var(--card-radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .prompt-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 40px rgba(var(--accent-rgb),0.25); } .prompt-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .prompt-card-id { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); border-radius: 6px; padding: 2px 7px; font-size: 0.6rem; font-family: monospace; color: #fcd34d; } .prompt-card-body { padding: 10px 12px 12px; } .prompt-card-title { font-size: 0.8rem; font-weight: 600; line-height: 1.3; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prompt-card-actions-row { display: flex; gap: 6px; } .prompt-card-view { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .prompt-card-view:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.1); } .prompt-card-action { flex-shrink: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .prompt-card-action:hover { border-color: var(--accent); color: var(--text); } .prompt-card-action.danger:hover { border-color: var(--danger); color: var(--danger); } .prompt-card-action.icon-only { display: flex; align-items: center; justify-content: center; padding: 7px; } .prompt-card-action.icon-only:hover { border-color: var(--danger); color: var(--danger); } .prompt-card-own-tag { position: absolute; top: 8px; right: 8px; background: rgba(var(--accent-rgb),0.85); color: #fff; border-radius: 6px; padding: 2px 7px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; } /* Chips de categoria (aba Prompts do dashboard) */ .chip-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .chip-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s, color 0.15s; } .chip-btn:hover { border-color: var(--accent); color: var(--text); } .chip-btn.active { background: var(--accent); border-color: transparent; color: #fff; } .chip-btn.chip-hidden { border-color: rgba(239,68,68,0.4); color: #f87171; } .chip-btn.chip-hidden.active { background: var(--danger); color: #fff; } /* Perfil no topo do menu lateral */ .sidebar-profile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 8px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .sidebar-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; flex-shrink: 0; } .sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; } .sidebar-person-name { font-size: 0.86rem; font-weight: 700; color: var(--text); line-height: 1.3; } .sidebar-brand-name { font-size: 0.72rem; color: var(--muted); margin-top: 2px; } .sidebar-spacer { flex: 1; min-height: 8px; } /* Modal do prompt (reaproveita .modal / .modal-backdrop) */ .prompt-modal-thumb { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; } .prompt-modal-text { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 0.85rem; line-height: 1.6; color: #cbd5e1; white-space: pre-wrap; max-height: 220px; overflow-y: auto; margin-bottom: 14px; } .prompt-modal-text.empty { color: var(--muted); font-style: italic; } /* EMPTY STATE (vitrine nao encontrada, sem modelos, etc.) */ .empty-state { max-width: 480px; margin: 80px auto; text-align: center; padding: 0 24px; } .empty-state h2 { font-size: 1.2rem; margin-bottom: 10px; } .empty-state p { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; } /* PERSONALIZAR (dashboard) */ .customize-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; transition: grid-template-columns 0.15s; } @media (max-width: 1000px) { .customize-layout { grid-template-columns: 1fr; } } /* Na sub-aba "Templates prontos" o mockup ao vivo "sobe"/some - os mini-previews de cada estilo ja mostram o suficiente, e a coluna toda fica livre pra lista de templates respirar. */ .customize-layout.templates-mode { grid-template-columns: 1fr; } .customize-layout.templates-mode #mockup-column { display: none; } /* A coluna de campos podia crescer sem limite (muitos cards de personalizacao empilhados) e "alongar" a pagina inteira - o mockup, que nao era sticky, sumia de vista assim que o usuario descia a pagina pra mexer em algo mais abaixo. Fix: em telas onde as 2 colunas ainda convivem lado a lado ou empilhadas na MESMA pagina (nao a gaveta mobile, que move os campos pra outro lugar - ver syncCustomizeFieldsLocation em dashboard.html), a coluna de campos vira sua PROPRIA area de scroll com altura limitada a tela, e o mockup fica sticky (sempre visivel) e tambem limitado/scrollavel, em vez dos dois crescerem junto com a pagina toda. */ @media (min-width: 769px) { #customize-fields-column { max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 8px; } } /* IMPORTANTE: #mockup-column NUNCA deve ter altura forcada (nem height:100vh nem flex:1 esticando) - a barra lateral (.dash-sidebar) fica no MESMO flex row de .dash-body e se estica (align-items:stretch) pra bater com o item mais alto do lado - forcar 100vh aqui ja fez o menu inteiro esticar e empurrar "Minha conta" pra fora da tela (bug ja corrigido uma vez, nao repetir). A largura/altura fixas do .device-viewport (abaixo) e que resolvem "mockup sem scroll" - o mockup-column em si so fica sticky, do tamanho natural do seu conteudo. */ #mockup-column { position: sticky; top: 88px; align-self: start; } /* Barra de salvar fixa (sticky) - fica sempre alcancavel mesmo com a lista de templates longa, e acende quando ha alteracao nao salva (manual ou por template). */ .save-bar { position: sticky; bottom: 16px; margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 5; } .save-bar-status { flex: 1; font-size: 0.78rem; color: var(--muted); } .save-bar.dirty { border-color: var(--accent-solid); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.35); } .save-bar.dirty .save-bar-status { color: var(--text); font-weight: 600; } .save-bar #branding-saved-msg.show { margin: 0; } .color-field { margin-bottom: 28px; } .color-field:last-child { margin-bottom: 0; } .color-field-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* Barra de previa - mostra a cor/degrade resultante da escolha atual, do lado dos circulos de cor (nao do texto do rotulo). position+z-index garante que ela fique visualmente NA FRENTE dos circulos de cor (alguns navegadores desenham o com uma caixa um pouco maior que os 28x28 definidos, o que podia cobrir a barra sem isso). */ .color-preview-bar { display: inline-block; width: 56px; height: 10px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; position: relative; z-index: 2; } .color-type-toggle { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .color-type-btn { height: 30px; padding: 0 12px; border-radius: 6px; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; background: transparent; color: var(--muted); font-size: 0.74rem; font-weight: 600; transition: background 0.15s, box-shadow 0.15s, color 0.15s; } .color-type-btn.active { background: var(--surface); box-shadow: 0 0 0 1px var(--accent-solid); color: var(--text); } .color-inputs { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; row-gap: 12px; } .color-inputs .color-arrow { color: var(--muted); font-size: 0.95rem; background: none; border: none; padding: 2px; cursor: pointer; border-radius: 6px; line-height: 1; transition: color 0.15s, background 0.15s; } .color-inputs .color-arrow:hover { color: var(--text); background: var(--surface); } /* Seletor de cor circular (em vez do quadrado padrao do input nativo) */ .color-swatch { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; overflow: hidden; -webkit-appearance: none; appearance: none; flex-shrink: 0; position: relative; z-index: 1; } .color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; overflow: hidden; } .color-swatch::-webkit-color-swatch { border: none; border-radius: 50%; } .color-swatch::-moz-color-swatch { border: none; border-radius: 50%; } /* Botoes "copiar cor"/"colar cor" - presentes em TODO campo de cor (marca, fundo/primaria da vitrine, e cada cor de cada banner) - deixam facil criar um degrade uma vez e reaproveitar em varios campos sem acertar from/to manualmente de novo em cada um. */ /* Botoes de copiar/colar cor viraram icone-so (antes eram texto "copiar cor"/"colar cor", 2026-07-29) - legenda embaixo deles foi removida em seguida (usuario achou os icones ja autoexplicativos). */ .color-cp-buttons { display: flex; gap: 6px; flex-shrink: 0; } .color-cp-btn { width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, box-shadow 0.15s; } .color-cp-btn:hover { box-shadow: 0 0 0 1px var(--accent-solid); } /* Sub-abas dentro de "Personalizar" (Templates prontos / Personalizado) */ .subtab-nav { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 18px; } .subtab-btn { height: 34px; padding: 0 16px; border-radius: 7px; border: none; cursor: pointer; background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 600; transition: background 0.15s, color 0.15s; } .subtab-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); } .customize-subpanel { display: none; } .customize-subpanel.active { display: block; } /* Templates prontos: 1 card pequeno por ESTILO, lado a lado numa grade, cada um com um mini-preview compacto (usa as variaveis derivadas de superficie/borda, igual a vitrine de verdade) e uma fileira de circulos embaixo pra trocar a variante de cor daquele mesmo estilo sem sair do card. */ #template-style-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .template-style-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .template-style-card.active { border-color: var(--accent-solid); box-shadow: 0 0 0 1px var(--accent-solid); } .template-style-header { margin-bottom: 12px; } .template-style-name { font-size: 0.86rem; font-weight: 700; color: var(--text); } .template-style-desc { font-size: 0.7rem; color: var(--muted); margin-top: 4px; line-height: 1.4; } .mini-preview { border-radius: 12px; padding: 13px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .mini-preview:hover { transform: scale(1.02); box-shadow: 0 8px 18px rgba(0,0,0,0.32); } .mini-preview-header { display: flex; align-items: center; gap: 8px; } .mini-preview-logo-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } .mini-preview-brand { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-preview-search { display: block; height: 14px; border-radius: 7px; } .mini-preview-tags { display: flex; gap: 5px; } .mini-preview-tag { height: 9px; width: 22px; border-radius: 999px; } .mini-preview-tag.active { width: 26px; } .mini-preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .mini-preview-card { aspect-ratio: 3/4; border-radius: 8px; position: relative; overflow: hidden; } .mini-preview-card-tag { position: absolute; top: 5px; left: 5px; width: 13px; height: 5px; border-radius: 3px; } .mini-preview-id { position: absolute; left: 5px; bottom: 5px; background: rgba(0,0,0,0.55); border-radius: 4px; padding: 2px 5px; } .mini-preview-id-text { font-size: 7px; font-weight: 700; font-family: monospace; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .template-variant-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .template-variant-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.15s, border-color 0.15s; } .template-variant-circle:hover { transform: scale(1.15); } .template-variant-circle.active { border-color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent-solid); } /* Toast de aviso ao aplicar um template (some sozinho depois de alguns segundos). */ .toast { position: fixed; left: 50%; top: 78px; transform: translateX(-50%) translateY(-16px); background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 12px 20px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; box-shadow: 0 12px 32px rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 110; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .logo-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; } .logo-preview { width: 56px; height: 56px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .logo-preview img { width: 100%; height: 100%; object-fit: contain; } /* Grade de 2 colunas IGUAIS (nao flex - flex com gap:20px ficava largo demais pra caber lado a lado na coluna de campos, de ~380px, e sempre quebrava/empilhava). Cada item compacto e vertical (miniatura em cima, botoes embaixo) pra caber confortavel nessa largura. */ .banner-photo-upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; } .banner-photo-upload-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; } .banner-photo-upload-item .logo-preview { width: 64px; height: 64px; } .banner-photo-upload-item .btn { width: 100%; } /* Categorias em destaque (aba Personalizado) - selecionadas em grade de 2 colunas com scroll interno (nao alonga o card inteiro), disponiveis como chips clicaveis embaixo pra adicionar. */ .featured-cat-list { margin-top: 12px; } .featured-cat-grid-scroll { max-height: 320px; overflow-y: auto; padding-right: 6px; margin-right: -6px; } .featured-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 480px) { .featured-cat-grid { grid-template-columns: 1fr; } } .featured-cat-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 10px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .featured-cat-remove-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,0.35); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .featured-cat-remove-x:hover { background: var(--danger); } .featured-cat-reorder { display: flex; gap: 4px; } .featured-cat-move-btn { width: 20px; height: 16px; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.6rem; line-height: 1; padding: 0; } .featured-cat-move-btn:hover:not(:disabled) { color: var(--text); } .featured-cat-move-btn:disabled { opacity: 0.25; cursor: default; } .featured-cat-cover { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; } .featured-cat-name { font-size: 0.82rem; font-weight: 600; text-transform: capitalize; } .featured-cat-divider { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 2px 8px; } /* Mockup ao vivo - previa real da vitrine dentro de um iframe, encaixado numa moldura de celular ou de navegador desktop. O iframe roda a mesma vitrine.html de verdade (?preview=1), entao hover/clique/popup funcionam de verdade, nao e uma reproducao estatica. */ .mockup-toggle { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 20px; } .mockup-toggle-btn { padding: 8px 16px; border-radius: 7px; border: none; background: transparent; color: var(--muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .mockup-toggle-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--accent); } .device-frame-wrap { display: flex; justify-content: center; } /* Mockup usa configuracao FIXA (sem calculo dinamico de escala em JS - 3 tentativas de medir/calcular isso via JS quebraram o mockup de formas diferentes em rodadas anteriores). O html/body de dentro do iframe tem overflow:hidden fixo (ver "isPreview" em vitrine.html) - o mockup literalmente NUNCA pode rolar. Aumentar a altura nativa aqui NAO e mais a estrategia pro degrade de fundo (isso so mostrava mais linhas da grade de cards, nunca alcancava o rodape de verdade - a pagina real pode ter milhares de pixels de altura com muitos prompts) - o fix real do degrade e `body{background-attachment:fixed}` em regra propria mais acima no arquivo (o degrade passa a se dimensionar pela TELA, nao pela pagina inteira). Os tamanhos aqui ficam so no fixo/moderado de sempre. */ .device-frame { background: #0d1118; box-shadow: 0 25px 60px rgba(0,0,0,0.55); transition: width 0.2s, border-radius 0.2s; } /* Celular */ .device-frame.mobile { width: 340px; padding: 16px 10px; border-radius: 42px; border: 1px solid #232b38; } .device-frame.mobile .device-viewport { width: 320px; height: 660px; border-radius: 26px; overflow: hidden; background: #030509; margin: 0 auto; } .device-frame.mobile .device-scale-wrap { width: 320px; height: 660px; } .device-frame.mobile iframe { width: 320px; height: 660px; border: none; display: block; } /* Desktop - iframe renderizado no tamanho real de um desktop (pra ativar o layout desktop de verdade) e depois encolhido visualmente com scale. IMPORTANTE: o scale fica no WRAPPER (.device-scale-wrap), nao no proprio