/* ============================================================ DivisorPDF — camada do app sobre o design system Stölben. Carrega DEPOIS de stolben-ui.css. Todos os valores derivam dos tokens --ds-* para manter a mesma identidade ("Infra Premium"). As classes/IDs funcionais consumidas pelo app.js são preservadas. ============================================================ */ :root { /* Aliases do app → tokens do design system */ --bg: var(--ds-bg); --surface: var(--ds-surface); --surface-alt: var(--ds-panel); --surface-hover: var(--ds-accent-50); --border: var(--ds-line); --border-strong: var(--ds-line-dash); --brand: var(--ds-accent); --brand-hover: var(--ds-accent-dark); --brand-active: var(--ds-accent-dark); --brand-soft: var(--ds-accent-50); --brand-soft-border: var(--ds-accent-100); --brand-text: var(--ds-accent-dark); /* Estados semânticos — derivados dos tokens do DS para adaptarem no escuro. */ --success: var(--ds-success); --success-hover: var(--ds-success); --success-soft: var(--ds-success-50); --success-border: var(--ds-success-100); --danger: var(--ds-danger); --danger-hover: var(--ds-danger); --danger-soft: var(--ds-danger-50); --danger-border: var(--ds-danger-100); --warn-text: var(--ds-warn); --warn-soft: var(--ds-warn-50); --warn-border: var(--ds-warn-100); /* Texto */ --text: var(--ds-t-900); --text-2: var(--ds-t-700); --text-3: var(--ds-t-500); /* Raios (alinhados ao DS) */ --r-lg: var(--ds-radius-lg); /* 1.5rem — cards */ --r-md: var(--ds-radius-md); /* 1rem — inputs/blocos internos */ --r-sm: 0.75rem; --r-xs: 0.5rem; /* Sombras */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: var(--ds-shadow-card); --shadow-md: var(--ds-shadow-card); --shadow-lg: var(--ds-shadow-block); /* Espaçamento (escala de 4px, igual ao DS) */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --transition-fast: 120ms ease; --transition-base: 200ms var(--ds-ease); --font-body: var(--ds-font-sans); --font-display: var(--ds-font-display); --ring: 0 0 0 3px var(--ds-accent-100); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } /* .ds-root (no ) já aplica fonte, cor e fundo do DS. */ /* ---------- Shell focado (app de coluna única) ---------- */ .ds-app { max-width: 56rem; /* mais estreito que o site, foco na ferramenta */ } .main-content { /* ds-stack já fornece padding + gap. O hero fica sob a nav fixa (área escura), então não há vão claro que prejudique a leitura. */ gap: var(--space-lg); } /* ---------- Nav (pílula) ---------- */ /* Layout e aparência vêm do componente do DS (.ds-nav/.ds-nav-pill = a mesma nav-pílula do site stolben.com). Aqui só o acento violet do logo "PDF". */ .ds-nav-brand .logo-accent { color: var(--ds-accent-light); } /* ---------- Hero (painel escuro do DS, com foto real) ---------- */ .header { display: flex; flex-direction: column; justify-content: center; /* variação: conteúdo centralizado (portfólio é bottom) */ min-height: 34rem; padding: 6rem var(--space-2xl) var(--space-2xl); } /* Foto de fundo escurecida (assinatura do tema) */ .header-media { position: absolute; inset: 0; z-index: 0; background: var(--ds-ink); } .header-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.66; } /* Variação vs portfólio: gradiente para a DIREITA (texto à esquerda), mais leve (hero um pouco mais claro), com leve escurecimento no topo p/ a nav. */ .header-grad { position: absolute; inset: 0; background: linear-gradient(to right, var(--ds-ink) 18%, rgba(15, 17, 21, 0.58) 54%, rgba(15, 17, 21, 0.25)), linear-gradient(to bottom, rgba(15, 17, 21, 0.5), transparent 24%); } .header .ds-glow { top: -8rem; left: -4rem; width: 32rem; height: 32rem; } .header .ds-noise { opacity: 0.06; } .header-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); max-width: 40rem; } .logo-text { font-size: clamp(2.2rem, 5.5vw, 3.6rem); color: var(--ds-on-dark); margin-top: var(--space-xs); } .logo-accent { color: var(--ds-accent-light); } .header-subtitle { max-width: 44ch; color: var(--ds-on-dark-dim); font-size: 1.05rem; line-height: 1.65; } /* Linha de meta-stats — elemento exclusivo deste hero (não existe no portfólio) */ .header-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xl); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--ds-line-dark); } .header-meta li { display: flex; flex-direction: column; gap: 0.1rem; } .header-meta strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ds-on-dark); letter-spacing: -0.02em; } .header-meta span { color: var(--ds-on-dark-dim); font-size: 0.8rem; } /* ---------- Faixa de pilares / diferenciais ---------- */ .feature-band { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-2xl) var(--space-xl); } .feature-band .ds-noise { opacity: 0.1; } .feature-band-head { position: relative; z-index: 2; margin-bottom: var(--space-xl); } .feature-band-head .ds-kicker { color: var(--brand); display: block; margin-bottom: var(--space-sm); } .feature-band-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); color: var(--text); } .feature-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .feature .ds-icon-box { margin-bottom: var(--space-md); } .feature:hover .ds-icon-box { transform: scale(1.08); } .feature h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: var(--space-xs); } .feature p { color: var(--text-3); font-size: 0.92rem; line-height: 1.6; } /* Stagger dentro da grade de pilares (revelado junto com a faixa) */ .feature-band.is-visible .reveal-child { animation: fade-in-up 620ms var(--ds-ease) both; } .feature-band.is-visible .reveal-child:nth-child(2) { animation-delay: 100ms; } .feature-band.is-visible .reveal-child:nth-child(3) { animation-delay: 200ms; } /* ---------- Cabeçalho de cartão (com kicker) ---------- */ .card-head-text { display: flex; flex-direction: column; gap: 0.1rem; } .card-head-text .ds-kicker { color: var(--brand); } /* ---------- Cartões ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); transition: box-shadow 400ms ease; } /* Fina barra de acento azul no topo do cartão principal */ .card-upload::before { content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 2px; border-radius: 0 0 var(--ds-radius-pill) var(--ds-radius-pill); background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: 0.7; } .card-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); } .card-icon { width: 3rem; height: 3rem; border-radius: var(--ds-radius-md); background: var(--ds-accent-50); border: 1px solid var(--ds-accent-100); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-icon-processing { background: var(--ds-accent-50); border-color: var(--ds-accent-100); color: var(--brand); } .card-icon-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); } .card-icon-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); } .card-header h2 { font-family: var(--font-display); font-size: var(--ds-fs-h3); font-weight: 600; color: var(--text); letter-spacing: -0.02em; } /* ---------- Drop zone ---------- */ .drop-zone { position: relative; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--space-2xl) var(--space-xl); background: radial-gradient(120% 90% at 50% -10%, var(--ds-accent-50), transparent 60%), var(--surface-alt); text-align: center; cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base); outline: none; } .drop-zone:hover, .drop-zone:focus-visible, .drop-zone.drag-over { border-color: var(--brand); background: var(--brand-soft); } .drop-zone.drag-over { box-shadow: var(--ring); } .drop-zone-icon { width: 4rem; height: 4rem; margin: 0 auto var(--space-md); border-radius: var(--ds-radius-pill); background: var(--ds-accent-50); border: 1px solid var(--ds-accent-100); color: var(--brand); display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base); } .drop-zone:hover .drop-zone-icon, .drop-zone.drag-over .drop-zone-icon { transform: scale(1.06); } .drop-zone-icon svg { width: 2rem; height: 2rem; } .drop-zone-text { color: var(--text); font-size: 1rem; margin-bottom: var(--space-sm); } .drop-zone-text strong { display: block; font-weight: 600; margin-bottom: var(--space-xs); } .drop-zone-text span, .drop-zone-hint { color: var(--text-3); font-size: 0.875rem; } .file-input-hidden { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } /* ---------- Lista de arquivos ---------- */ .file-list, .compress-control, .action-switch-control, .size-control { margin-top: var(--space-xl); } .file-list-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); } .file-list-header h3 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--text); } .btn-text { background: transparent; border: none; color: var(--danger); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: var(--space-xs) var(--space-sm); border-radius: var(--r-xs); font-family: var(--font-body); transition: background var(--transition-fast); } .btn-text:hover { background: var(--danger-soft); } .file-items { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); max-height: 240px; overflow-y: auto; padding-right: var(--space-xs); } .file-item { display: flex; align-items: center; gap: var(--space-md); padding: 0.7rem var(--space-md); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color var(--transition-fast); } .file-item:hover { border-color: var(--border-strong); } .file-item-icon { width: 36px; height: 36px; border-radius: var(--r-xs); background: var(--ds-accent-50); border: 1px solid var(--ds-accent-100); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; } .file-item-info { flex: 1; min-width: 0; } .file-item-name { color: var(--text); font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item-size { color: var(--text-3); font-size: 0.8rem; } .file-item-remove { border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: var(--space-xs); border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .file-item-remove:hover { background: var(--danger-soft); color: var(--danger); } .file-list-summary { display: flex; justify-content: space-between; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); color: var(--text-2); font-size: 0.875rem; font-weight: 600; } /* ---------- Rótulos ---------- */ .size-label { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); color: var(--text); font-size: 0.95rem; font-weight: 600; } .size-label svg { color: var(--brand); } /* ---------- Opções de compressão ---------- */ .compress-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; } .compress-opt-card { display: block; position: relative; cursor: pointer; padding: var(--space-md); padding-right: 2.25rem; min-height: 128px; background: var(--surface-alt); border: 1.5px solid var(--border); border-radius: var(--r-md); transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base); } .compress-opt-card:hover { border-color: var(--border-strong); background: var(--surface-hover); } .compress-opt-card.active { border-color: var(--brand); background: var(--brand-soft); box-shadow: var(--ring); } /* Indicador de seleção (círculo no canto) */ .compress-opt-card::after { content: ''; position: absolute; top: var(--space-md); right: var(--space-md); width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); transition: border-color var(--transition-fast), background var(--transition-fast); } .compress-opt-card.active::after { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat; } .compress-radio-hidden { position: absolute; opacity: 0; pointer-events: none; } .compress-opt-content { height: 100%; display: flex; flex-direction: column; gap: var(--space-xs); } .compress-opt-title { color: var(--text); font-size: 0.9rem; font-weight: 600; } .compress-opt-desc { color: var(--text-2); font-size: 0.78rem; line-height: 1.35; flex: 1; } .compress-opt-est { color: var(--brand-text); font-size: 0.78rem; font-weight: 600; } /* ---------- Switch ---------- */ .action-switch-control { padding: var(--space-md) var(--space-lg); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); } /* O toggle em si vem do DS (.ds-switch + .ds-switch-track). Aqui só fazemos o rótulo ocupar a linha inteira dentro do box. */ .action-switch-control .ds-switch { width: 100%; gap: var(--space-md); } .switch-label-text { color: var(--text); font-size: 0.9rem; font-weight: 500; } /* ---------- Controle de tamanho ---------- */ .size-input-group { display: flex; align-items: center; gap: var(--space-lg); } .size-slider { flex: 1; appearance: none; -webkit-appearance: none; height: 6px; border-radius: var(--ds-radius-pill); background: var(--border-strong); outline: none; cursor: pointer; } .size-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 3px solid #ffffff; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--transition-fast); } .size-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .size-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 3px solid #ffffff; box-shadow: var(--shadow-sm); cursor: pointer; } .size-number-group { display: flex; align-items: center; gap: var(--space-xs); min-width: 120px; padding: 0.4rem var(--space-sm); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .size-number-group:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .size-number-input { width: 70px; border: none; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 600; text-align: right; outline: none; } .size-unit { color: var(--text-3); font-size: 0.9rem; font-weight: 500; } .size-hint { margin-top: var(--space-sm); color: var(--text-3); font-size: 0.84rem; } .size-hint strong { color: var(--text); } /* ---------- Previsão de tempo ---------- */ .time-estimate { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); } .time-estimate-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .time-estimate-label { color: var(--text-3); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; } .time-estimate-total { font-family: var(--font-display); color: var(--text); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Botões ---------- */ /* Base/variações vêm do DS (.ds-btn, --solid/--ghost, --block). Aqui só: sombra mais limpa no botão principal, espaçamento e estado .loading. */ /* O glow padrão do DS (0 0 22px) ficava esfumaçado/"sujo" ao redor. Troca por uma sombra nítida e direcional, tintada no acento. */ .ds-btn--solid { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ds-accent) 60%, transparent); } .ds-btn--solid:hover { box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--ds-accent) 70%, transparent); } #submit-btn { margin-top: var(--space-lg); } #download-btn { margin-bottom: var(--space-md); color: #fff; } #new-split-btn, #retry-btn { margin-top: var(--space-sm); } /* Botão de ação principal precisa de posição relativa para o spinner. */ .ds-btn.loading { position: relative; pointer-events: none; opacity: 0.85; } .ds-btn.loading span { visibility: hidden; } .ds-btn.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #ffffff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* ---------- Progresso ---------- */ .progress-container { margin-top: var(--space-md); } .progress-label { display: block; margin-bottom: var(--space-sm); color: var(--text); font-size: 0.9rem; font-weight: 600; } /* A barra (.ds-progress) e o preenchimento animado (.ds-progress-fill, com shimmer próprio) vêm do DS. Damos altura um pouco maior e glow no acento. */ .ds-progress { height: 10px; } .ds-progress-fill { box-shadow: 0 0 14px var(--ds-accent-100); transition: width 0.4s ease; } /* Fase de envio: acento mais claro, para diferenciar do processamento (acento). */ .ds-progress-fill.upload-fill { background: var(--ds-accent-light); } .progress-info { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); color: var(--text-2); font-size: 0.85rem; } #progress-percent, #upload-progress-percent { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .workflow-eta { margin-top: var(--space-lg); padding: var(--space-md); color: var(--text-2); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 0.92rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; } /* ---------- Resultado ---------- */ .result-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: var(--space-xl); background: color-mix(in srgb, var(--ds-accent) 15%, #1e2230); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--ds-shadow-block); } .stat { padding: var(--space-xl) var(--space-lg); text-align: center; background: color-mix(in srgb, var(--ds-accent) 12%, #252a3a); } .stat-value { display: block; margin-bottom: var(--space-xs); font-family: var(--font-display); color: var(--ds-accent-light); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-label { color: var(--ds-on-dark-dim); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } /* Avisos e erro usam o componente .ds-alert do DS (cores/borda/ícone). Aqui só ajustamos a lista de avisos e a notinha de retenção (1h). */ #result-warnings { margin-bottom: var(--space-lg); } .result-warnings-list { margin: 0.2rem 0 0; padding-left: var(--space-lg); font-size: 0.9rem; line-height: 1.5; } .result-warnings-list li + li { margin-top: var(--space-xs); } .ds-alert--danger { margin-bottom: var(--space-xl); } /* Notinha de retenção: texto auxiliar do DS (.ds-help) com ícone alinhado. */ .result-note { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); } .result-note svg { flex-shrink: 0; } /* Toasts: providos pelo design system (window.dsToast + .ds-toast). */ /* ---------- Rodapé ---------- */ /* Rodapé claro e enxuto (mesmo padrão da página do portfólio) */ .footer { margin-top: var(--space-md); padding: var(--space-xl) var(--space-sm); border-top: 1px solid var(--border); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); } /* Seletor de tema (claro/auto/escuro) no rodapé — só os botões. O .ds-segment.ds-mode usa tokens do DS, então adapta no claro e no escuro. */ .footer-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text); letter-spacing: -0.02em; } .footer-brand .logo-accent { color: var(--ds-accent-light); } .footer-copy { color: var(--text-3); font-size: 0.85rem; margin-top: 0.15rem; } .footer-points { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md); } .footer-points li { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-3); font-size: 0.8rem; } .footer-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--brand); flex-shrink: 0; } .footer a { color: var(--brand-text); text-decoration: none; } .footer a:hover { text-decoration: underline; } /* ---------- Animações ---------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ ENVIO DE ARQUIVO — único bloco escuro (suave) do formulário. As demais áreas (opções, switch, tamanho, lista) ficam CLARAS para não pesar; o tema entra como contraste pontual aqui, com um dark suave (--ds-ink-soft), não o preto do hero. ============================================================ */ .drop-zone { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--ds-accent) 18%, transparent), transparent 62%), var(--ds-ink-soft); border-color: rgba(255, 255, 255, 0.16); } .drop-zone:hover, .drop-zone:focus-visible, .drop-zone.drag-over { border-color: var(--ds-accent-light); background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--ds-accent) 30%, transparent), transparent 62%), var(--ds-ink-soft); } .drop-zone-icon { background: color-mix(in srgb, var(--ds-accent) 20%, transparent); border-color: color-mix(in srgb, var(--ds-accent) 40%, transparent); color: var(--ds-accent-light); } .drop-zone-text { color: var(--ds-on-dark); } .drop-zone-text span, .drop-zone-hint { color: var(--ds-on-dark-dim); } /* ============================================================ MODO ESCURO — quase tudo adapta sozinho (style.css deriva dos tokens --ds-*, que o DS reescreve em .ds-dark). Aqui só os poucos pontos com cor clara fixa específica do app. ============================================================ */ /* A faixa de pilares era um vidro branco translúcido; no escuro vira um painel escuro sutilmente elevado. */ .ds-dark .feature-band { background: rgba(255, 255, 255, 0.035); } /* ---------- Responsivo ---------- */ @media (max-width: 720px) { .main-content { padding-top: 4.75rem; } .card { padding: var(--space-lg); } .header { min-height: 28rem; padding: 5rem var(--space-xl) var(--space-xl); } .header-meta { gap: var(--space-lg); width: 100%; } .feature-band { padding: var(--space-xl) var(--space-lg); } .feature-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .compress-options { grid-template-columns: 1fr 1fr; } .compress-opt-card { min-height: auto; } .size-input-group { flex-direction: column; align-items: stretch; gap: var(--space-md); } .size-number-group { align-self: flex-start; } .result-stats { grid-template-columns: 1fr; } .progress-info, .time-estimate-header, .file-list-header { align-items: flex-start; flex-direction: column; gap: var(--space-xs); } } @media (max-width: 440px) { .compress-options { grid-template-columns: 1fr; } .ds-nav-links { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .feature-band.is-visible .reveal-child { animation: none; } .ds-progress-fill::after { animation: none; } } /* ========================================================================= DOCUMENTOS LEGAIS E ACEITE (app `legal`) O texto vem do banco, renderizado de Markdown: não há classes por elemento, então a tipografia é resolvida por seletores de descendência dentro de .legal-corpo. Três decisões sustentam a legibilidade: 1. Medida travada em 66ch. Texto jurídico em linha de 1100px é punitivo. 2. Seções numeradas por contador CSS. Numeração aqui não é enfeite: cláusula de documento legal é citável ("item 3"), e a ordem carrega informação. 3. Faixa de registro (versão · vigência · impressão do texto). O sha256 é o mesmo gravado no aceite — mostrá-lo é o que deixa a prova verificável. O corpo abaixo é idêntico entre os projetos: só usa variáveis --legal-*, definidas na ponte logo a seguir a partir dos tokens de cada app. ========================================================================= */ :root { --legal-surface: var(--ds-surface); --legal-painel: var(--ds-panel); --legal-line: var(--ds-line); --legal-line-forte: var(--ds-line-strong); --legal-t900: var(--ds-t-900); --legal-t700: var(--ds-t-700); --legal-t500: var(--ds-t-500); --legal-accent: var(--ds-accent); --legal-accent-forte: var(--ds-accent-dark); --legal-danger: var(--ds-danger); --legal-warn: var(--ds-warn); --legal-raio-lg: var(--ds-radius-lg); --legal-raio-md: var(--ds-radius-md); --legal-raio-sm: var(--ds-radius-sm); } .legal-page { --legal-medida: 66ch; max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .legal-doc { background: var(--legal-surface); border: 1px solid var(--legal-line); border-radius: var(--legal-raio-lg); padding: clamp(1.5rem, 5vw, 3rem); } /* -- Cabeçalho ----------------------------------------------------------- */ .legal-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--legal-accent-forte); margin: 0 0 .5rem; } .legal-doc-header h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; } .legal-lead { max-width: var(--legal-medida); margin: .875rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--legal-t700); } /* Faixa de registro: identidade do documento, em fonte de dados. */ .registro { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1.5rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--legal-line); } .registro-item { margin: 0; } .registro dt { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--legal-t500); margin: 0 0 .125rem; } .registro dd { margin: 0; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--legal-t900); } .registro code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .8125rem; color: var(--legal-t700); word-break: break-all; } /* -- Corpo do documento -------------------------------------------------- */ .legal-corpo { counter-reset: clausula; max-width: var(--legal-medida); margin-top: 2.5rem; font-size: 1rem; line-height: 1.75; color: var(--legal-t700); } .legal-corpo > :first-child { margin-top: 0; } .legal-corpo p { margin: 0 0 1.125rem; } .legal-corpo h2 { counter-increment: clausula; position: relative; margin: 2.75rem 0 .875rem; padding-top: 1.25rem; border-top: 1px solid var(--legal-line); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; color: var(--legal-t900); } /* O número fica pendurado na margem em telas largas e some no mobile, onde não há margem sobrando. */ .legal-corpo h2::before { content: counter(clausula); position: absolute; left: -2.75rem; top: 1.3rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .8125rem; font-weight: 500; color: var(--legal-t500); } .legal-corpo h3 { margin: 1.75rem 0 .5rem; font-size: .9375rem; color: var(--legal-t900); } .legal-corpo ul, .legal-corpo ol { margin: 0 0 1.125rem; padding-left: 1.25rem; } .legal-corpo li { margin-bottom: .5rem; } .legal-corpo li::marker { color: var(--legal-t500); } .legal-corpo strong { color: var(--legal-t900); font-weight: 600; } .legal-corpo table { width: 100%; border-collapse: collapse; margin: 0 0 1.125rem; font-size: .9375rem; } .legal-corpo th, .legal-corpo td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--legal-line); } @media (min-width: 60rem) { .legal-corpo { margin-left: 2.75rem; } } /* -- Aviso de versão arquivada ------------------------------------------- */ .legal-aviso { margin: 1.5rem 0 0; padding: .75rem 1rem; border: 1px solid var(--legal-line); border-left: 3px solid var(--legal-warn); border-radius: var(--legal-raio-sm); background: var(--legal-painel); font-size: .9375rem; color: var(--legal-t700); } /* -- Rodapé do documento ------------------------------------------------- */ .legal-doc-rodape { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--legal-line); } .legal-atalhos { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9375rem; } .legal-historico { margin-top: 1.25rem; font-size: .875rem; } .legal-historico summary { cursor: pointer; color: var(--legal-t500); padding: .25rem 0; } .legal-historico ul { margin: .75rem 0 0; padding: 0; list-style: none; } .legal-historico li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--legal-line); } .legal-historico li span { color: var(--legal-t500); } /* -- Portão de aceite (visitante e re-aceite) ---------------------------- */ .legal-resumo { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; } .legal-resumo li { max-width: var(--legal-medida); padding-left: 1rem; border-left: 2px solid var(--legal-accent); font-size: .9375rem; line-height: 1.6; color: var(--legal-t700); } .legal-resumo strong { display: block; color: var(--legal-t900); } /* O texto cortando na borda inferior, sem pista visual, lê-se como conteúdo truncado — o degradê e a barra sempre visível são o que dizem "continua". */ .legal-painel { position: relative; margin-top: 2rem; border: 1px solid var(--legal-line); border-radius: var(--legal-raio-md); overflow: hidden; } .legal-painel::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3rem; pointer-events: none; background: linear-gradient(to top, var(--legal-surface), transparent); border-radius: 0 0 var(--legal-raio-md) var(--legal-raio-md); } .legal-painel-topo { padding: 1rem 1.25rem; background: var(--legal-painel); border-bottom: 1px solid var(--legal-line); } .legal-painel-topo h2 { margin: 0; font-size: 1rem; } .legal-painel-topo .registro { margin-top: .625rem; padding-top: .625rem; } .legal-corpo--rolagem { max-width: none; margin: 0; padding: 1.25rem; max-height: 22rem; overflow-y: auto; font-size: .9375rem; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--legal-line-forte) transparent; } .legal-corpo--rolagem::-webkit-scrollbar { width: 10px; } .legal-corpo--rolagem::-webkit-scrollbar-thumb { background: var(--legal-line-forte); border: 3px solid var(--legal-surface); border-radius: 6px; } /* Espaço extra no fim, para a última linha não ficar sob o degradê. */ .legal-corpo--rolagem > :last-child { margin-bottom: 2rem; } @media (min-width: 60rem) { .legal-corpo--rolagem { margin-left: 0; } } .legal-corpo--rolagem h2 { margin-top: 1.75rem; padding-top: .875rem; font-size: .9375rem; } .legal-corpo--rolagem h2::before { display: none; } .legal-corpo--rolagem:focus-visible { outline: 2px solid var(--legal-accent); outline-offset: -2px; } /* -- Confirmação --------------------------------------------------------- */ .legal-acao { margin-top: 2rem; } .confirmacao { border: 1px solid var(--legal-line); border-radius: var(--legal-raio-md); background: var(--legal-painel); transition: border-color .15s ease, background-color .15s ease; } /* O estado marcado precisa ser visível à distância: é o gesto que vira prova. */ .confirmacao:has(input:checked) { border-color: var(--legal-accent); background: color-mix(in srgb, var(--legal-accent) 6%, transparent); } .confirmacao:has(input:focus-visible) { outline: 2px solid var(--legal-accent); outline-offset: 2px; } .confirmacao-alvo { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; cursor: pointer; } .confirmacao-alvo input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: .125rem 0 0; flex: 0 0 auto; accent-color: var(--legal-accent); cursor: pointer; } .confirmacao-texto { font-size: .9375rem; line-height: 1.55; color: var(--legal-t900); } .confirmacao--erro { border-color: var(--legal-danger); } .confirmacao-msg { margin: 0; padding: 0 1.25rem 1rem; font-size: .8125rem; color: var(--legal-danger); } .legal-acao-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; } .btn-quiet { background: none; border: 1px solid var(--legal-line); color: var(--legal-t700); } .legal-recusa { margin-top: 1.5rem; font-size: .875rem; color: var(--legal-t500); } .legal-recusa p { margin: 0; } /* Botão que se apresenta como link (recusar sem aceitar). O onclick inline seria bloqueado pela CSP, então a recusa é um submit de verdade. */ .link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; } /* -- Cor de link -------------------------------------------------------- Onde o app define `a { color: inherit }` num seletor com classe, estes precisam de força equivalente para vencer. */ .legal-corpo a, .legal-atalhos a, .legal-aviso a, .legal-historico a, .confirmacao-texto a, .legal-page .link-button { color: var(--legal-accent-forte); } /* Sublinhado, e não só cor. Link dentro de um bloco de texto distinguido apenas pela cor reprova o WCAG 1.4.1 (o axe acusa como `link-in-text-block`, impacto serious): quem não separa as duas cores não vê que ali há um link. Os atalhos e o histórico entram junto porque também vivem em meio a texto corrido. */ .legal-corpo a, .legal-atalhos a, .legal-aviso a, .legal-historico a, .confirmacao-texto a { text-decoration: underline; } .legal-corpo a:hover, .legal-atalhos a:hover, .confirmacao-texto a:hover { color: var(--legal-accent); } @media (prefers-reduced-motion: reduce) { .confirmacao { transition: none; } }