/** * DevFix — Suite Imagens (standalone + iframe no app) * Layout centralizado, cartão único e CTAs proporcionais (referência: ferramentas profissionais). * Requer nas páginas desta suite. */ html.devtools-image-embed { background: transparent !important; } html.devtools-image-embed body { background: transparent !important; } /* Coluna central (standalone: theme-init não define; embed: reforço se necessário) */ html.devtools-image-suite .dt-page, html.devtools-image-suite .fl-page { max-width: 960px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } html.devtools-image-suite:not(.devtools-image-embed) .dt-page, html.devtools-image-suite:not(.devtools-image-embed) .fl-page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } html.devtools-image-suite .dt-page, html.devtools-image-suite .fl-page, html.devtools-image-suite main.squash-page { display: flex; flex-direction: column; gap: 1rem; } /* Hero: foco central, hierarquia clara */ html.devtools-image-suite .dt-hero, html.devtools-image-suite .fl-hero, html.devtools-image-suite .squash-hero { text-align: center; margin-inline: auto; max-width: 38rem; } html.devtools-image-suite .dt-hero h1, html.devtools-image-suite .fl-hero h1, html.devtools-image-suite .squash-hero h1 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; color: var(--text-primary); } html.devtools-image-suite .dt-hero p, html.devtools-image-suite .fl-hero p, html.devtools-image-suite .squash-hero p { margin: 0 auto; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); max-width: 32rem; } html.devtools-image-suite .fl-hero { margin-bottom: 0; } html.devtools-image-suite .fl-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; margin: 0 auto 10px; border-radius: 999px; border: 1px solid rgba(168, 216, 200, 0.28); background: rgba(168, 216, 200, 0.08); color: var(--accent); font-size: 0.62rem; letter-spacing: 0.1em; } html.devtools-image-suite .fl-hero p:last-child { font-size: 0.9rem; margin-top: 8px; } /* Bloco principal estilo “card premium” */ html.devtools-image-suite .imgconv-shell, html.devtools-image-suite .squash-shell { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg, 14px) !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14) !important; padding: 1.15rem 1.25rem 1.35rem !important; margin: 0 !important; } html.devtools-image-suite .dt-page > section.dt-card { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg, 14px) !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14) !important; padding: 1.15rem 1.25rem 1.35rem !important; margin: 0 0 1rem !important; } html.devtools-image-embed.devtools-image-suite .imgconv-shell, html.devtools-image-embed.devtools-image-suite .squash-shell, html.devtools-image-embed.devtools-image-suite .dt-page > section.dt-card { background: rgba(37, 37, 40, 0.72) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(12px); } html.devtools-image-suite .dt-fav-card { padding: 1.15rem 1.25rem 1.35rem !important; } /* Faixas de motores / capabilities mais discretas */ html.devtools-image-suite .imgconv-capabilities, html.devtools-image-suite .squash-engine-bar { margin: 0 auto; max-width: 100%; padding: 10px 14px; border-radius: var(--r-md, 10px); border: 1px solid var(--border); background: rgba(43, 43, 45, 0.4); } /* Dropzones: altura contida, sem “tapete” full-bleed */ html.devtools-image-suite .imgconv-dropzone { min-height: 128px; padding: 1rem 1rem; border-radius: var(--r-lg, 12px); border: 1px dashed rgba(168, 216, 200, 0.32); background: linear-gradient( 165deg, rgba(168, 216, 200, 0.05), rgba(43, 43, 45, 0.28) ); } html.devtools-image-suite .imgconv-dropzone__icon { width: 44px; height: 44px; margin-bottom: 8px; font-size: 1.2rem; } html.devtools-image-suite .imgconv-dropzone__title { font-size: 0.92rem; font-weight: 700; } html.devtools-image-suite .imgconv-dropzone__hint { font-size: 0.8rem; margin-top: 4px; } html.devtools-image-suite .imgconv-dropzone:hover, html.devtools-image-suite .imgconv-dropzone--active { border-color: rgba(168, 216, 200, 0.42); background: linear-gradient( 165deg, rgba(168, 216, 200, 0.09), rgba(43, 43, 45, 0.42) ); } html.devtools-image-suite .squash-dropzone { min-height: 128px; padding: 1rem; border-radius: var(--r-lg, 12px); border: 1px dashed rgba(168, 216, 200, 0.3); background: linear-gradient( 165deg, rgba(110, 168, 232, 0.06), rgba(43, 43, 45, 0.28) ); } html.devtools-image-suite .squash-dropzone__icon { width: 44px; height: 44px; margin-bottom: 8px; font-size: 1.2rem; } html.devtools-image-suite .squash-dropzone__title { font-size: 0.92rem; font-weight: 800; } html.devtools-image-suite .squash-dropzone__hint { font-size: 0.8rem; } /* FormatLab: upload dentro de um cartão implícito */ html.devtools-image-suite .fl-drop-panel { margin-top: 0; padding: 1.1rem 1.2rem; border-radius: var(--r-lg, 14px); border: 1px solid var(--border); background: var(--bg-surface); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12); } html.devtools-image-embed.devtools-image-suite .fl-drop-panel { background: rgba(37, 37, 40, 0.72); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } html.devtools-image-suite .fl-dropzone { min-height: 120px; padding: 1.1rem; border-radius: var(--r-md, 12px); border: 1px dashed rgba(168, 216, 200, 0.28); background: linear-gradient( 165deg, rgba(168, 216, 200, 0.06), rgba(43, 43, 45, 0.3) ); } html.devtools-image-suite .fl-dropzone span { font-size: 0.92rem; font-weight: 700; } html.devtools-image-suite .fl-dropzone small { font-size: 0.78rem; } html.devtools-image-suite .fl-drop-icon { width: 48px; height: 48px; } /* CTAs principais: largura “justa”, centrados */ html.devtools-image-suite .imgconv-convert-btn { width: auto !important; max-width: min(100%, 300px); min-height: 46px !important; justify-self: center; padding: 0 1.6rem !important; font-weight: 800 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important; } html.devtools-image-suite .squash-btn { width: auto !important; max-width: min(100%, 340px); min-height: 46px !important; justify-self: center; padding: 0 1.75rem !important; } html.devtools-image-suite .imgconv-format-btn { min-width: 4.5rem; padding: 9px 14px; font-size: 0.82rem; font-weight: 800; } /* Cards internos FormatLab */ html.devtools-image-suite .fl-card { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--r-md, 12px); background: rgba(37, 37, 40, 0.55); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); backdrop-filter: blur(10px); padding: 14px 16px; } html.devtools-image-suite .fl-workspace { margin-top: 12px; } html.devtools-image-suite .squash-mode-card { border-radius: var(--r-md, 10px); border: 1px solid var(--border); background: rgba(43, 43, 45, 0.45); } html.devtools-image-suite .squash-mode-card--active { border-color: rgba(168, 216, 200, 0.4); background: rgba(168, 216, 200, 0.09); } html.devtools-image-suite .squash-privacy-notice { border-radius: var(--r-md, 10px); border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.12); padding: 10px 12px; font-size: 0.84rem; } /* Botões primários tema DevFix */ html.devtools-image-suite .dt-btn--primary, html.devtools-image-suite .imgconv-convert-btn:not(:disabled), html.devtools-image-suite .squash-btn:not(:disabled) { background: var(--accent) !important; color: var(--text-on-accent) !important; border: 1px solid rgba(168, 216, 200, 0.35) !important; } html.devtools-image-suite .imgconv-convert-btn:disabled { opacity: 0.55; } /* Secções paleta / OG */ html.devtools-image-suite .dt-card .dt-row { margin-bottom: 0; } html.devtools-image-suite .dt-page > .dt-card > p, html.devtools-image-suite .dt-page > .dt-card > label { margin-top: 4px; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted) !important; } html.devtools-image-suite .dt-swatch-grid { gap: 8px; } html.devtools-image-suite .dt-fav-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } html.devtools-image-suite .dt-fav-file-wrap { position: relative; display: inline-flex; cursor: pointer; margin: 0; } html.devtools-image-suite .dt-fav-file-input { position: absolute; width: 0.01px; height: 0.01px; opacity: 0; overflow: hidden; z-index: -1; } html.devtools-image-suite .dt-fav-file-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: var(--r-md, 10px); font-weight: 700; font-size: 0.85rem; border: 1px dashed rgba(168, 216, 200, 0.35); background: rgba(168, 216, 200, 0.07); color: var(--text-primary); transition: background 0.2s ease, border-color 0.2s ease; } html.devtools-image-suite .dt-fav-file-wrap:hover .dt-fav-file-btn { border-color: rgba(168, 216, 200, 0.55); background: rgba(168, 216, 200, 0.12); } html.devtools-image-suite .dt-fav-file-wrap:focus-within .dt-fav-file-btn { outline: 2px solid var(--accent); outline-offset: 2px; } html.devtools-image-suite .dt-fav-msg { min-height: 1.25em; margin-bottom: 8px; } html.devtools-image-suite .dt-fav-grid { margin-bottom: 14px; } html.devtools-image-suite .dt-fav-section-label { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } html.devtools-image-suite .dt-fav-tags { min-height: 140px; width: 100%; display: block; border-radius: var(--r-md, 10px); border: 1px solid var(--border); background: var(--bg-code, rgba(20, 21, 23, 0.85)); color: var(--text-code, #e2e8f0); padding: 12px 14px; line-height: 1.45; box-sizing: border-box; font-size: 0.8rem; } html.devtools-image-suite .dt-fav-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } html.devtools-image-suite .dt-swatch { flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } html.devtools-image-suite .ogimg-creator { margin-top: 12px; border-radius: var(--r-lg, 14px); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(37, 37, 40, 0.45); overflow: hidden; } /* Detalhe imgconvert / resultados */ html.devtools-image-suite .imgconv-section, html.devtools-image-suite .imgconv-options, html.devtools-image-suite .imgconv-preview { border-radius: var(--r-md, 10px); } html.devtools-image-suite .imgconv-result-card, html.devtools-image-suite .imgconv-error-card { border-radius: var(--r-md, 12px); } html.devtools-image-suite .imgconv-head h2 { font-size: 1rem; } @media (max-width: 640px) { html.devtools-image-suite .imgconv-convert-btn, html.devtools-image-suite .squash-btn { width: 100% !important; max-width: none !important; } html.devtools-image-suite .dt-hero, html.devtools-image-suite .fl-hero, html.devtools-image-suite .squash-hero { text-align: left; max-width: none; } }