/* ═══════════════════════════════════════════════════════════════════════ OHXALA RECORDS — Base partilhada das apps ohxala-base.css · v1.0.1 · 2026-07-23 Alojar em: apps.ohxalarecords.com/assets/ohxala-base.css Carregar SEMPRE depois do tokens.css: ── DECISÃO DE NOMES ────────────────────────────────────────────────── Esta folha estiliza os nomes de classe que as apps JÁ usam (.app, .app-header, .brand, .btn, .tap-overlay...), em vez de introduzir um prefixo novo. As apps são documentos isolados dentro de iframes, por isso não há risco de colisão com o site, e assim a migração é quase toda automática: basta ligar as duas folhas e apagar o CSS duplicado. Duas uniformizações são necessárias antes, e são mecânicas: .plugin -> .app (adsr e oscilloscope usam .plugin) .unlock-overlay, .activate-overlay -> .tap-overlay .btn-unlock, .activate-btn -> .tap-btn ── O QUE ISTO CORRIGE ──────────────────────────────────────────────── · O bug do display:flex no , que fazia o encolher até ao conteúdo e mantinha apps a 416px em ecrãs de 780px. · 151 declarações de font-size abaixo de 12px espalhadas pelas apps. · 16 das 19 apps não tinham uma única media query. · Alvos de toque abaixo dos 44px recomendados. ── v1.0.1 ──────────────────────────────────────────────────────────── Acrescentado .preset-btn ao grupo das pastilhas. Faltava, e as apps que o usam (adsr, melodic-sequencer) ficavam com botões brancos por omissão do browser depois de lhes ser removido o CSS próprio. ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* CRÍTICO: o display:flex fica no body, NUNCA no html. Aplicado ao html, torna o body um item flex, que dimensiona shrink-to-fit em vez de preencher a janela, e o width:100% da app passa a resolver contra um body já colapsado. */ html { min-height: 100%; background: var(--ohxala-bg, #0d0d0d); -webkit-text-size-adjust: 100%; /* impede o iOS de aumentar texto ao rodar */ } body { min-height: 100%; background: var(--ohxala-bg, #0d0d0d); color: var(--ohxala-text, #f0f0f0); font-family: var(--ohxala-font); font-size: var(--ohxala-fs-body, 14px); line-height: var(--ohxala-lh-body, 1.6); display: flex; align-items: flex-start; justify-content: center; padding: var(--ohxala-sp-4, 16px); -webkit-font-smoothing: antialiased; } /* ── Contentor da app ──────────────────────────────────────────────── */ .app { width: 100%; max-width: 900px; background: var(--ohxala-surface, #1a1a1a); border: 1px solid var(--ohxala-border, #2a2a2a); border-radius: var(--ohxala-radius, 10px); overflow: hidden; } .app-header { display: flex; justify-content: space-between; align-items: center; gap: var(--ohxala-sp-3, 12px); padding: var(--ohxala-sp-3, 12px) var(--ohxala-sp-4, 16px); border-bottom: 1px solid var(--ohxala-border, #2a2a2a); background: var(--ohxala-surface-2, #141414); } .brand, .tool-name, .app-name { font-size: var(--ohxala-fs-label, 11px); font-weight: 700; letter-spacing: var(--ohxala-ls-label, .12em); text-transform: uppercase; line-height: var(--ohxala-lh-tight, 1.25); } .brand { color: var(--ohxala-orange, #f5a623); } .tool-name, .app-name { color: var(--ohxala-text-dim, #888); } .content, .controls { padding: var(--ohxala-sp-4, 16px); } /* ── Botões ────────────────────────────────────────────────────────── */ .btn, .tap-btn, .play-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ohxala-sp-2, 8px); min-height: var(--ohxala-touch-min, 44px); padding: 0 var(--ohxala-sp-5, 20px); background: var(--ohxala-orange, #f5a623); color: #111; border: none; border-radius: var(--ohxala-radius-sm, 6px); font-family: inherit; font-size: var(--ohxala-fs-small, 13px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background var(--ohxala-t-base, .18s ease); } .btn:hover, .tap-btn:hover, .play-btn:hover:not(:disabled) { background: var(--ohxala-orange-hi, #ffc04a); } .btn:disabled, .play-btn:disabled { opacity: .4; cursor: default; } /* Variante secundária: contorno em vez de preenchimento */ .btn-sec, .btn-stop, .play-btn.stop { background: transparent; color: var(--ohxala-orange, #f5a623); border: 1px solid var(--ohxala-orange, #f5a623); } .btn-sec:hover, .btn-stop:hover, .play-btn.stop:hover { background: rgba(245,166,35,.12); } /* Pastilhas e separadores (presets, géneros, formas de onda) */ .pill, .pbtn, .wave-btn, .preset-btn, .tab { min-height: var(--ohxala-touch-min, 44px); padding: var(--ohxala-sp-2, 8px) var(--ohxala-sp-3, 12px); background: var(--ohxala-surface-sunk, #111); border: 1px solid var(--ohxala-border, #2a2a2a); border-radius: var(--ohxala-radius-sm, 6px); color: var(--ohxala-text-dim, #888); font-family: inherit; font-size: var(--ohxala-fs-micro, 12px); font-weight: 700; letter-spacing: .05em; cursor: pointer; transition: border-color var(--ohxala-t-fast, .12s ease), color var(--ohxala-t-fast, .12s ease); } .pill:hover, .pbtn:hover, .wave-btn:hover, .preset-btn:hover, .tab:hover { border-color: var(--ohxala-orange, #f5a623); color: var(--ohxala-orange, #f5a623); } .pill.active, .pbtn.active, .wave-btn.active, .preset-btn.active, .tab.active { background: var(--ohxala-orange-dim, #4a2f0c); border-color: var(--ohxala-orange, #f5a623); color: var(--ohxala-orange, #f5a623); } /* ── Etiquetas e valores de controlos ──────────────────────────────── */ .ctrl-lbl, .sl-label { font-size: var(--ohxala-fs-label, 11px); font-weight: 700; letter-spacing: var(--ohxala-ls-label, .12em); text-transform: uppercase; color: var(--ohxala-text-dim, #888); } .ctrl-val, .sl-val { font-size: var(--ohxala-fs-micro, 12px); color: var(--ohxala-text-mid, #aaa); font-variant-numeric: tabular-nums; } .hint { font-size: var(--ohxala-fs-small, 13px); color: var(--ohxala-text-faint, #767676); line-height: var(--ohxala-lh-body, 1.6); } /* ── Sliders ─────────────────────────────────────────────────────────── O thumb passa de 14px para 20px. Um alvo de 14px é muito difícil de acertar com o dedo; a pista continua fina, só o manípulo cresce. */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; /* área de toque */ background: transparent; outline: none; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--ohxala-border, #2a2a2a); border-radius: 2px; } input[type=range]::-moz-range-track { height: 3px; background: var(--ohxala-border, #2a2a2a); border-radius: 2px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; background: var(--ohxala-orange, #f5a623); border-radius: 50%; cursor: pointer; } input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: var(--ohxala-orange, #f5a623); border: none; border-radius: 50%; cursor: pointer; } /* ── Overlay de activação de áudio ───────────────────────────────────── Nome único: .tap-overlay / .tap-btn. Substitui as três convenções que coexistiam (tap-, unlock-, activate-). */ .tap-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ohxala-sp-4, 16px); padding: var(--ohxala-sp-6, 24px); text-align: center; background: rgba(8,8,8,.94); cursor: pointer; transition: opacity .25s ease; } .tap-overlay.hidden { opacity: 0; pointer-events: none; } .tap-logo { font-size: var(--ohxala-fs-label, 11px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ohxala-orange, #f5a623); } .tap-btn { min-height: var(--ohxala-touch-comfy, 48px); } .tap-hint { font-size: var(--ohxala-fs-small, 13px); color: var(--ohxala-text-dim, #888); max-width: 34ch; } /* ── Acessibilidade: foco visível de marca ─────────────────────────── */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--ohxala-orange, #f5a623); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════ RESPONSIVO 16 das 19 apps não tinham uma única media query. Estes dois pontos de quebra cobrem tablet estreito e telemóvel. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { body { padding: var(--ohxala-sp-3, 12px); } .content, .controls { padding: var(--ohxala-sp-3, 12px); } .app-header { padding: var(--ohxala-sp-2, 8px) var(--ohxala-sp-3, 12px); } } @media (max-width: 480px) { body { padding: var(--ohxala-sp-2, 8px); } .app { border-radius: var(--ohxala-radius-sm, 6px); } /* Linhas de botões passam a grelha, para nada ficar espremido abaixo do alvo de toque mínimo. */ .wave-row, .presets-row, .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ohxala-sp-2, 8px); } /* Sem espremer texto: as etiquetas ficam por cima do controlo. */ .sl-row, .ctrl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ohxala-sp-1, 4px) var(--ohxala-sp-2, 8px); } .sl-row input[type=range], .ctrl input[type=range] { grid-column: 1 / -1; } .sl-label, .ctrl-lbl { min-width: 0; } } /* Telemóveis muito estreitos: uma coluna, sem excepções. */ @media (max-width: 360px) { .wave-row, .presets-row, .tabs { grid-template-columns: minmax(0, 1fr); } }