/* ═══════════════════════════════════════════════════════════════════════════ DOJO 2.0 — o visual do app. ═══════════════════════════════════════════════════════════════════════════ ── COMO ESTE ARQUIVO ENTROU NO DESIGN SYSTEM (Fase 1H, 12/08/2026) ──────── O app inteiro pende destas treze variáveis: 128 regras leem daqui. Migrá-lo não foi reescrever mil linhas — foi religar a raiz. Cada variável agora lê o token do Design System **com valor de reserva**: --floresta: var(--oss-floresta, #0D1A10); └─ o token ───────┘ └─ o que valia antes ─┘ É essa vírgula que torna a migração segura, e ela existe por um motivo concreto: **este arquivo roda em dois lugares.** · em ossyoga.com/dojo/praticar, a página carrega o Design System antes dele — os tokens existem, e o app inteiro passa a falar a língua da escola, com as fontes certas e o contraste medido; · dentro do Squarespace (ossyogadojo.com), onde os 58 alunos estão AGORA, não há Design System nenhum e não mandamos no — os tokens não existem, cada var() cai no valor de reserva, e o app fica EXATAMENTE como estava. Byte por byte. Um teste confere que nenhuma destas linhas perca a reserva. Perder a vírgula aqui é apagar o Dojo de 58 pessoas sem nenhum erro no console. ── TRÊS CORES QUE MUDAM, E POR QUE ELAS PRECISAVAM MUDAR ───────────────── Medido sobre o pergaminho, contra o mínimo de 4.5:1 da WCAG AA: --ouro-escuro #8b6f47 → 4.17:1 REPROVA --text-soft 55% da floresta → 4.08:1 REPROVA (e é texto de LEITURA) --text-fade 40% da floresta → 2.80:1 REPROVA As três eram invisíveis para quem enxerga bem e cansativas para quem não enxerga. Apontadas para os tokens, passam a 5.2:1, 7.0:1 e 5.0:1. É a única mudança de cor desta migração — o resto é a mesma paleta, com outro dono. */ :root{ /* O QUE A BARRA DE FERRAMENTAS COME DE TELA, medido de verdade. São 66px de barra mais um pedaço da área segura do aparelho. A área segura é a faixa que o iPhone reserva embaixo pra barra de gestos, e ela vale uns 34px. Reservando ela inteira, a barra chegava a 100px na tela do iPhone, com 48px de faixa VAZIA embaixo dos nomes: a barra afinou duas vezes e no aparelho não parecia ter afinado nenhuma, porque o vazio não mudava. Aqui ela entra descontada de 16px. Sobram uns 18px abaixo dos nomes no iPhone, que já livra o dedo da barra de gestos, e a barra fica em 84px no lugar de 100px. O max() com 0 garante que em aparelho sem entalhe (Mac, iPhone SE, Android antigo) nada mude: lá a área segura vale zero. Todas as reservas de espaço da tela saem deste token, pra essa conta existir num lugar só. Antes elas eram números soltos que esqueciam a área segura, e no iPhone a barra passava por cima das últimas faixas da fila da Music: o toque no nome da música ia parar no botão da barra. */ --dock-alta: calc(66px + max(0px, env(safe-area-inset-bottom) - 16px)); --dock-beta: calc(var(--dock-alta) + 12px); /* A marca, e o papel de cada superfície. */ --floresta: var(--oss-floresta, #0D1A10); --creme: var(--oss-carta-2, #FBF8F0); --ouro: var(--oss-ouro, #C9A94F); --ouro-claro: var(--oss-ouro-claro, #dcc070); /* O VERDE DAS FERRAMENTAS. Mesmo acordo do app.css: dentro das ferramentas o ambiente é verde e o ouro fica reservado ao que se aperta. Aqui ele existe porque a pele CLARA do Timer, do Dojo Breath e da Prática mora neste arquivo, e não no app.css: as três abrem com o painel em pergaminho. São dois tons porque o mesmo verde não serve nas duas camas: o escuro precisa de verde claro para ler, o pergaminho precisa de verde fechado. */ --acento: #2C6E3F; --acento-claro: #5FA97A; --pergaminho: var(--oss-fundo, #F5F1E8); --pergaminho-2: #ECE6D6; --bg-3: #e0dac8; --periwinkle: #8fabea; /* O dourado que carrega PALAVRA. O antigo dava 4.17:1. */ --ouro-escuro: var(--oss-ouro-tinta, #8b6f47); /* As famílias de prática: taxonomia de conteúdo, não decoração. A cor diz de que prática se trata, e por isso ela não muda com tema nenhum. */ --vinyasa: var(--oss-vinyasa, #C4522A); --yin: var(--oss-yin, #1B2A4A); --oss: var(--oss-oss, #7A9175); --breath: var(--oss-breath, #C9A94F); --integracao: var(--oss-integracao, #4A7C72); /* A hierarquia de tinta. As duas últimas reprovavam no contraste. */ --text-mid: var(--oss-tinta-2, rgba(13, 26, 16, .72)); --text-soft: var(--oss-tinta-2, rgba(13, 26, 16, .55)); --text-fade: var(--oss-tinta-3, rgba(13, 26, 16, .4)); --border: var(--oss-fio, rgba(139, 111, 71, .22)); /* A LETRA — a mudança que mais se vê. Até hoje o Dojo servido por ossyoga.com caía em Georgia, porque a página não carregava fonte nenhuma: o mesmo aluno via a escola numa fonte no /entrar e noutra no Dojo, e as duas telas pareciam dois produtos. Dentro do Squarespace a reserva continua sendo Georgia, que é o que sempre foi. */ --serif: var(--oss-serif, Georgia, "Times New Roman", serif); --sans: var(--oss-sans, 'Jost', Helvetica, Arial, sans-serif); } *{box-sizing:border-box} #beta{position:relative;background:var(--pergaminho);font-family:var(--serif);color:var(--floresta)} .beta-flag{position:fixed;top:calc(8px + env(safe-area-inset-top));right:12px;z-index:40;font-family:var(--sans);text-transform:uppercase;letter-spacing:1.2px;font-size:.46rem;font-weight:700;color:var(--floresta);background:var(--ouro);padding:2px 6px;border-radius:999px;opacity:.85} .b-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:4px;font-weight:600;font-size:.62rem;display:inline-flex;align-items:center;gap:12px;color:var(--ouro)} .b-eyebrow.dark{color:var(--ouro-escuro)} .b-eyebrow::before,.b-eyebrow::after{content:"";height:1px;width:30px;background:currentColor;opacity:.55} .b-wave{display:block;width:100%;height:46px} /* HERO */ .b-avatar[hidden]{display:none} /* MENU */ .b-bell{display:inline-flex;align-items:center;color:var(--ouro-claro)} /* Home atualizando: a seta gira até a página recarregar */ @keyframes bGirar{to{transform:rotate(360deg)}} /* botão de informações: pisca e mostra selo quando há aviso novo */ .b-info-btn{position:relative} .b-info-dot{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#C4522A;color:#fff;font-family:var(--sans);font-weight:700;font-size:.52rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--floresta)} .b-info-dot[hidden]{display:none} .b-info-btn.tem-novo{color:var(--ouro-claro);animation:bInfoPisca 1.15s ease-in-out infinite} @keyframes bInfoPisca{0%,100%{box-shadow:0 0 0 0 rgba(201,169,79,0)}50%{box-shadow:0 0 0 4px rgba(201,169,79,.4)}} /* SECTION shell */ .b-sec{padding:44px 20px 30px;max-width:1080px;margin:0 auto} .b-sh{text-align:center;margin-bottom:24px} .b-sh h2{font-family:var(--serif);font-weight:300;font-size:1.9rem;margin:12px 0 6px;color:var(--floresta)} .b-sh h2 em{font-style:italic;color:var(--ouro-escuro)} .b-sh p{font-family:var(--serif);font-style:italic;color:var(--text-soft);font-size:.95rem} .b-aulas-count{display:inline-block;margin-top:12px;font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:.6rem;font-weight:700;color:var(--ouro-escuro)} .b-sh.light h2 em{color:var(--ouro)} /* CONTINUE DE ONDE PAROU (card fino acima da aula do dia) */ #b-retomar[hidden]{display:none} #b-retomar{max-width:1000px;margin:0 auto 26px} .b-ret{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-left:3px solid var(--ouro);box-shadow:0 10px 26px rgba(13,26,16,.08);padding:10px 12px;position:relative} .b-ret-th{flex:none;width:86px;aspect-ratio:16/10;background-size:cover;background-position:center;cursor:pointer} .b-ret-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left} .b-ret-k{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.54rem;font-weight:700;color:var(--ouro-escuro)} .b-ret-t{font-family:var(--serif);font-size:1rem;color:var(--floresta);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .b-ret-d{font-family:var(--serif);font-style:italic;font-size:.8rem;color:var(--text-soft)} .b-ret-go{flex:none;font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.62rem;color:var(--floresta);background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));border:none;border-radius:999px;padding:10px 16px;cursor:pointer} .b-ret-go:active{transform:scale(.97)} .b-ret-x{flex:none;width:26px;height:26px;border:none;border-radius:50%;background:none;color:var(--text-fade);font-size:.8rem;cursor:pointer} @media(max-width:520px){ .b-ret{gap:10px;padding:10px} .b-ret-d{display:none} .b-ret-th{width:58px} .b-ret-k{font-size:.48rem;letter-spacing:1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .b-ret-t{font-size:.92rem} .b-ret-go{padding:9px 12px;font-size:.56rem;letter-spacing:1px} } /* SUA PRÁTICA (tempo: linha única, discreta) */ #b-tempo[hidden]{display:none} #b-tempo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 18px;max-width:1000px;margin:26px auto 0;padding:14px 16px;border-top:1px solid var(--border)} .b-tempo-tit{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:700;color:var(--ouro-escuro)} .b-tempo-item{font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--text-soft);white-space:nowrap} .b-tempo-item b{font-style:normal;font-weight:400;font-size:1.02rem;color:var(--floresta);margin-right:4px} .b-tempo-total b{color:var(--ouro-escuro)} /* AULA DO DIA (featured) */ .b-player{display:block;width:100%;max-width:1000px;margin:0 auto 22px;background:#000;border:1px solid var(--border);box-shadow:0 18px 40px rgba(13,26,16,.16);position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer;padding:0;text-align:left} .b-player-thumb{position:absolute;inset:0;background:linear-gradient(150deg,#22201a,#0D1A10 60%),radial-gradient(circle at 30% 30%,rgba(196,82,42,.35),transparent 60%);background-size:cover;background-position:center} .b-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;border:1px solid var(--ouro);background:rgba(13,26,16,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:2} .b-player-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 22px;background:linear-gradient(0deg,rgba(0,0,0,.66),transparent 55%);z-index:1} .b-chip{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:700;color:var(--ouro-claro);background:rgba(13,26,16,.6);padding:4px 10px;display:inline-block;margin-bottom:9px;align-self:flex-start} .b-player-ov h3{font-family:var(--serif);font-weight:300;color:#FBF8F0;font-size:1.4rem;line-height:1.2} .b-player-ov h3 em{font-style:italic;color:var(--periwinkle)} /* cards */ .b-card{background:#fff;border:1px solid rgba(139,111,71,.10);box-shadow:0 12px 28px rgba(13,26,16,.08);position:relative;cursor:pointer;padding:0;text-align:left;overflow:hidden} .b-card:active{transform:scale(.98)} .b-card .b-cbar{height:3px} .b-card .b-cth{aspect-ratio:16/10;position:relative;overflow:hidden;background-size:cover;background-position:center} .b-card .b-csym{position:absolute;right:9px;bottom:7px;width:34px;height:34px;object-fit:contain;opacity:.5} .b-card .b-ccc{position:absolute;top:7px;left:7px;font-family:var(--sans);text-transform:uppercase;letter-spacing:1.2px;font-size:.5rem;font-weight:700;color:#dcc070;background:rgba(13,26,16,.78);border:1px solid rgba(220,192,112,.35);padding:3px 7px;backdrop-filter:blur(6px)} .b-card .b-cnum{position:absolute;top:7px;right:7px;font-family:var(--serif);font-size:.9rem;font-weight:400;letter-spacing:.5px;line-height:1.1;color:#dcc070;background:rgba(13,26,16,.78);border:1px solid rgba(220,192,112,.35);padding:2px 9px;backdrop-filter:blur(6px)} .b-card .b-cdu{position:absolute;bottom:7px;left:7px;font-family:var(--sans);font-size:.56rem;color:#fff;background:rgba(13,26,16,.6);padding:2px 6px} .b-card .b-caudio{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:rgba(13,26,16,.55);border:1px solid var(--ouro-claro);color:var(--ouro-claro);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);z-index:2;transition:transform .3s ease,background .3s ease} .b-card.is-audio:active .b-caudio{transform:translate(-50%,-50%) scale(.92)} .b-card.is-audio .b-csym{opacity:.32} /* cor por categoria nas tarjas (mesma do dojo real) */ .b-card[data-cat="vinyasa"] .b-ccc,.b-card[data-cat="vinyasa"] .b-cnum{background:rgba(196,82,42,.88);color:#fff;border-color:rgba(255,255,255,.22)} .b-card[data-cat="yin"] .b-ccc,.b-card[data-cat="yin"] .b-cnum{background:rgba(27,42,74,.88);color:#F5F1E8;border-color:rgba(245,241,232,.22)} .b-card[data-cat="oss"] .b-ccc,.b-card[data-cat="oss"] .b-cnum{background:rgba(122,145,117,.92);color:#fff;border-color:rgba(255,255,255,.22)} .b-card[data-cat="breath"] .b-ccc,.b-card[data-cat="breath"] .b-cnum{background:rgba(201,169,79,.94);color:#0D1A10;border-color:rgba(13,26,16,.18)} .b-card[data-cat="integracao"] .b-ccc,.b-card[data-cat="integracao"] .b-cnum{background:rgba(74,124,114,.92);color:#fff;border-color:rgba(255,255,255,.22)} .b-card .b-cbd{padding:11px 12px 14px} .b-card .b-cbd h4{font-family:var(--serif);font-weight:400;font-size:.94rem;line-height:1.2;color:var(--floresta);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em} .b-card .b-cbd p{font-family:var(--serif);font-style:italic;color:var(--text-soft);font-size:.76rem;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em} /* FERRAMENTAS (dark) */ .b-tools{background:radial-gradient(90% 70% at 50% 0%,rgba(201,169,79,.10),transparent 55%),var(--floresta);color:var(--creme);padding:46px 20px 52px} .b-sh.light h2{color:var(--creme)} .b-sh.light p{color:rgba(251,248,240,.62)} /* cards compactos: miniatura + 3 linhas, o cartão inteiro é clicável */ .b-tgrid{display:grid;grid-template-columns:1fr;gap:12px;max-width:720px;margin:0 auto} .b-tool{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:1px solid rgba(201,169,79,.22);background:rgba(245,241,232,.03);padding:18px;cursor:pointer;color:inherit;font-family:var(--serif);transition:background .15s,border-color .15s} .b-tool:active{transform:scale(.99)} .b-tool:hover{background:rgba(201,169,79,.07);border-color:rgba(201,169,79,.4)} .b-tool-ic{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(201,169,79,.4);background:rgba(201,169,79,.06);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--ouro)} .b-tool-tx{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0} .b-tool-nm{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.64rem;font-weight:700;color:var(--ouro-claro)} .b-tool-ds{font-family:var(--serif);font-size:.9rem;line-height:1.45;color:rgba(251,248,240,.72)} .b-tool-go{flex:none;color:var(--ouro);font-size:1.15rem;opacity:.65} /* FOOTER — enxuto: só a marca e o selo de teste */ .b-foot{background:var(--floresta);color:rgba(251,248,240,.62);padding:34px 24px calc(34px + env(safe-area-inset-bottom));text-align:center} .b-wm{font-family:var(--serif);font-weight:300;font-size:1.3rem;color:var(--creme)} .b-wm em{font-style:italic;color:var(--periwinkle)} .b-foot-flag{display:block;margin-top:10px;font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:600;color:rgba(201,169,79,.7)} /* BIBLIOTECA (overlay) */ #b-biblioteca,#b-info{position:fixed;inset:0;z-index:900;background:var(--pergaminho);overflow-y:auto;-webkit-overflow-scrolling:touch} .b-bib-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 20px 14px;background:var(--floresta)} .b-bib-title{font-family:var(--serif);font-weight:300;font-size:1.2rem;color:var(--creme)} .b-bib-title em{font-style:italic;color:var(--ouro-claro)} #b-bib-close,#b-info-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(201,169,79,.35);background:transparent;color:var(--ouro-claro);font-size:1rem;cursor:pointer} /* painel de informações (avisos) */ #b-info[hidden]{display:none} /* A barra das ferramentas fica por cima da lista; o respiro no fim tem que caber ela, senão o último aviso nasce escondido atrás do dock. */ .b-info-lista{max-width:720px;margin:0 auto;padding:20px 18px calc(var(--dock-alta) + 56px);display:flex;flex-direction:column;gap:14px} .b-aviso{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--creme);border:1px solid rgba(201,169,79,.28);border-radius:16px;padding:16px 18px 17px;overflow:hidden;box-shadow:0 3px 14px rgba(13,26,16,.06)} /* fita de cor na lateral: o tipo do aviso se lê antes de ler o texto */ .b-aviso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--ouro-claro),var(--ouro))} .b-aviso.tipo-destaque::before{background:linear-gradient(180deg,#3d8a54,#2C6E3F)} .b-aviso.tipo-alerta::before{background:linear-gradient(180deg,#d9713f,#C4522A)} .b-aviso.novo{border-color:rgba(201,169,79,.5);box-shadow:0 4px 18px rgba(13,26,16,.09)} .b-aviso.clicavel{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .b-aviso.clicavel:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,26,16,.13);border-color:rgba(201,169,79,.6)} .b-aviso.clicavel:active{transform:translateY(0)} .b-aviso.clicavel:focus-visible{outline:2px solid #2C6E3F;outline-offset:3px} .b-aviso-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;flex-shrink:0;background:rgba(201,169,79,.14);border:1px solid rgba(201,169,79,.32);color:var(--ouro-escuro,#8b6f47);font-size:1.05rem;line-height:1} .b-aviso-ico svg{width:19px;height:19px;display:block} .b-aviso.tipo-alerta .b-aviso-ico{background:rgba(196,82,42,.12);border-color:rgba(196,82,42,.3);color:#C4522A} .b-aviso-corpo{flex:1;min-width:0} .b-aviso-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px;min-height:14px} .b-aviso-titulo{font-family:var(--serif);font-size:1.05rem;color:var(--floresta);margin:0;line-height:1.28} .b-aviso-novo-tag{display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:1px;font-size:.5rem;font-weight:700;color:#fff;background:#C4522A;padding:3px 8px;border-radius:999px;line-height:1} /* pre-line: a quebra de linha escrita no avisos.json vira quebra de verdade */ .b-aviso-texto{font-family:var(--serif);font-size:.9rem;color:rgba(13,26,16,.7);line-height:1.55;margin:6px 0 0;white-space:pre-line} /* Novidades: cada informação no seu card, dentro do aviso. minmax(0,1fr) é o que impede o texto comprido de estourar a coluna e criar rolagem lateral. */ .b-nov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px} .b-nov-i{display:flex;flex-direction:column;gap:5px;min-width:0;padding:11px 12px 12px;border-radius:12px;background:rgba(201,169,79,.09);border:1px solid rgba(201,169,79,.24)} /* item sozinho na última linha ocupa a largura toda, em vez de deixar buraco */ .b-nov-i:last-child:nth-child(odd){grid-column:1/-1} .b-nov-ic{display:block;color:var(--ouro-escuro)} .b-nov-ic svg{width:20px;height:20px;display:block} .b-nov-i b{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.3px;color:var(--floresta);line-height:1.25} .b-nov-i span{font-family:var(--serif);font-size:.76rem;color:rgba(13,26,16,.62);line-height:1.45} @media(min-width:620px){ .b-nov{grid-template-columns:repeat(3,minmax(0,1fr))} .b-nov-i:last-child:nth-child(odd){grid-column:auto} } .b-aviso-link,.b-aviso-abrir{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:.64rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#2C6E3F;text-decoration:none} .b-aviso-data{font-family:var(--sans);font-size:.58rem;letter-spacing:.8px;text-transform:uppercase;color:rgba(13,26,16,.42)} /* Cartão de boas-vindas: o primeiro do mural, com a cara da escola. */ .b-bv{flex-direction:column;align-items:center;text-align:center;gap:0;padding:28px 24px 26px;background:linear-gradient(165deg,#14301c 0%,var(--floresta) 55%,#0a1a0f 100%);border-color:rgba(201,169,79,.45);box-shadow:0 8px 28px rgba(13,26,16,.28)} .b-bv::before{left:0;right:0;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,transparent,var(--ouro),transparent)} .b-bv-logo{width:84px;height:auto;opacity:.95;margin-bottom:14px} .b-bv-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.55rem;font-weight:700;color:var(--ouro-claro)} .b-bv-titulo{font-family:var(--serif);font-weight:300;font-size:1.45rem;color:var(--creme);line-height:1.22;margin:9px 0 0} .b-bv-texto{font-family:var(--serif);font-size:.92rem;font-style:italic;color:rgba(251,248,240,.72);line-height:1.6;margin:12px auto 0;max-width:34ch} .b-bv-assina{display:block;margin-top:16px;font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:600;color:rgba(201,169,79,.8)} .b-bv-assina::before{content:"";display:block;width:30px;height:1px;background:rgba(201,169,79,.45);margin:0 auto 12px} .b-aviso-video{position:relative;aspect-ratio:16/9;margin-top:10px;background:#000;border:1px solid rgba(201,169,79,.25);border-radius:6px;overflow:hidden} .b-aviso-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .b-info-vazio{text-align:center;font-family:var(--serif);font-style:italic;color:rgba(13,26,16,.5);padding:40px 20px} .b-bib-search{position:relative;display:flex;align-items:center;padding:14px 20px 0;background:var(--floresta)} .b-bib-sicon{position:absolute;left:34px;color:var(--ouro-claro);opacity:.7;pointer-events:none} #b-bib-input{width:100%;font-family:var(--serif);font-size:1rem;color:var(--creme);background:rgba(245,241,232,.06);border:1px solid rgba(201,169,79,.3);border-radius:999px;padding:12px 44px 12px 40px;outline:none;-webkit-appearance:none} #b-bib-input::placeholder{color:rgba(251,248,240,.5)} #b-bib-input:focus{border-color:var(--ouro);background:rgba(245,241,232,.1)} #b-bib-input::-webkit-search-cancel-button{-webkit-appearance:none} #b-bib-clear{position:absolute;right:32px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(201,169,79,.2);color:var(--ouro-claro);font-size:.8rem;line-height:1;cursor:pointer} #b-bib-clear[hidden]{display:none} .b-bib-vazio{text-align:center;font-family:var(--serif);font-style:italic;color:var(--text-soft);padding:30px 24px 50px} .b-bib-vazio[hidden]{display:none} .b-bib-vazio em{color:var(--ouro-escuro);font-style:normal} .b-bib-filters{display:flex;gap:8px;overflow-x:auto;padding:16px 20px;background:var(--floresta);-webkit-overflow-scrolling:touch} .b-bib-filters::-webkit-scrollbar{display:none} .b-fil{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:.6rem;font-weight:600;color:rgba(251,248,240,.7);background:rgba(245,241,232,.05);border:1px solid rgba(201,169,79,.3);padding:9px 15px;border-radius:999px;white-space:nowrap;cursor:pointer;flex:none} .b-fil.on{background:var(--ouro);color:var(--floresta);border-color:var(--ouro)} /* quantas aulas tem em cada aba, do mesmo jeito que os chips da Music */ .b-fil em{font-style:normal;font-weight:700;opacity:.62;margin-left:3px;font-size:.92em} .b-fil.on em{opacity:.75} /* aba sem resultado durante a busca: fica no lugar, apagada, pra lista de abas não dançar a cada letra digitada */ .b-fil.vazia{opacity:.42} /* o pe reservava 40px, menos que a barra de ferramentas: a ultima linha de cartoes ficava embaixo dela. Sai do mesmo token que o resto. */ .b-bib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:22px 20px calc(var(--dock-alta) + 24px);max-width:1080px;margin:0 auto} @media(min-width:760px){.b-bib-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1024px){.b-bib-grid{grid-template-columns:repeat(4,1fr)}} /* garante que os overlays com display custom respeitem o atributo hidden */ #b-video[hidden],#b-biblioteca[hidden],#b-panel[hidden],#b-tools-fab[hidden]{display:none} /* VÍDEO modal */ #b-video{position:fixed;inset:0;z-index:1100;background:rgba(5,9,6,.94);display:flex;justify-content:center;padding:20px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch} #b-video-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(201,169,79,.4);background:rgba(13,26,16,.6);color:var(--ouro-claro);font-size:1.1rem;cursor:pointer;z-index:2} .b-video-box{width:100%;max-width:960px;margin:auto} .b-video-frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(201,169,79,.25)} .b-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .b-video-meta{margin-top:16px;text-align:center} .b-video-meta .vc{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:700;color:var(--ouro-claro)} .b-video-meta .vc-audio{margin-left:10px;color:#fff;background:#2C6E3F;padding:3px 8px;letter-spacing:1.5px} .b-video-meta h3{font-family:var(--serif);font-weight:300;font-size:1.4rem;color:var(--creme);margin-top:8px} .b-video-meta p{font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.6);font-size:.9rem;margin-top:8px;max-width:640px;margin-left:auto;margin-right:auto;line-height:1.5} /* CONVERSAR COM O PROFESSOR (dentro do modal do vídeo) */ #b-conversa{margin-top:18px;max-width:640px;margin-left:auto;margin-right:auto;text-align:left} .cv-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:1px solid rgba(201,169,79,.3);border-radius:999px;padding:10px 16px;color:var(--ouro-claro);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer} .cv-toggle-tx{flex:1;text-align:left} .cv-corpo{margin-top:12px} .cv-corpo[hidden]{display:none} .cv-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:12px} .cv-aviso-suave{font-family:var(--serif);font-style:italic;font-size:.85rem;color:rgba(251,248,240,.55);padding:6px 2px} .cv-item{display:flex;flex-direction:column;gap:8px} .cv-balao{max-width:85%;padding:10px 14px;border-radius:14px;font-family:var(--serif)} .cv-balao p{font-size:.92rem;line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word} .cv-aluno{align-self:flex-end;background:var(--pergaminho);color:var(--floresta);border-bottom-right-radius:4px} .cv-prof{align-self:flex-start;background:rgba(245,241,232,.08);color:var(--creme);border:1px solid rgba(201,169,79,.35);border-bottom-left-radius:4px} .cv-prof-tag{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:.5rem;font-weight:700;color:var(--ouro-claro);margin-bottom:4px} .cv-meta{display:block;margin-top:6px;font-family:var(--sans);font-size:.58rem;letter-spacing:.4px;color:rgba(13,26,16,.5)} .cv-apagar{margin-left:8px;background:none;border:none;font-family:var(--sans);font-size:.58rem;letter-spacing:.4px;color:rgba(13,26,16,.4);text-decoration:underline;cursor:pointer;padding:0} .cv-apagar.confirma{color:#C4522A;font-weight:700} .cv-ident{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} .cv-ident[hidden]{display:none} .cv-ident-hint{font-family:var(--serif);font-style:italic;font-size:.82rem;color:rgba(251,248,240,.6);margin:0} .cv-ident input{background:rgba(245,241,232,.06);border:1px solid rgba(201,169,79,.3);color:var(--creme);padding:11px 12px;font-family:var(--sans);font-size:16px;outline:none} .cv-ident input:focus{border-color:var(--ouro)} .cv-txt{width:100%;background:rgba(245,241,232,.06);border:1px solid rgba(201,169,79,.3);color:var(--creme);font-family:var(--serif);font-size:16px;line-height:1.5;padding:11px 12px;outline:none;resize:vertical;border-radius:10px} .cv-txt:focus{border-color:var(--ouro)} .cv-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:8px} .cv-cont{font-family:var(--sans);font-size:.62rem;color:rgba(251,248,240,.5)} .cv-cont[hidden]{display:none} .cv-enviar{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.64rem;color:var(--floresta);background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));border:none;border-radius:999px;padding:10px 20px;cursor:pointer} .cv-enviar:disabled{opacity:.4;cursor:default} .cv-feedback{margin-top:8px;font-family:var(--sans);font-size:.7rem} .cv-feedback[hidden]{display:none} .cv-feedback.ok{color:#8FBFB4} .cv-feedback.erro{color:#e08a6d} /* botão flutuante das ferramentas — pílula com rótulo (não é balão de chat) */ #b-tools-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);cursor:pointer;z-index:60;color:var(--floresta);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.68rem;background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));box-shadow:0 8px 22px rgba(201,169,79,.4)} #b-tools-fab:active{transform:scale(.96)} .b-fab-ic{font-size:.95rem} .b-fab-tx{line-height:1} /* PAINEL DAS FERRAMENTAS */ #b-panel{position:fixed;inset:0;z-index:1000;overflow-y:auto;background:var(--floresta)} #b-panel.light{background:var(--pergaminho)} .b-panel-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:inherit;z-index:5} .b-panel-title{font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.66rem;font-weight:700;color:var(--ouro)} #b-panel.light .b-panel-title{color:var(--acento)} #b-panel-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(44,110,63,.35);background:transparent;color:var(--acento);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center} #b-panel.light #b-panel-close{color:var(--acento);border-color:rgba(44,110,63,.3)} #b-panel-body{max-width:520px;margin:0 auto;padding:4px 20px 96px} /* no Music o painel alarga (card com fila lateral no desktop/tablet) */ /* o painel já tem o título "Dojo Music" na barra de cima: o cabeçalho interno do player repetiria a mesma palavra duas vezes na tela */ #b-panel .m-head{display:none} #b-panel[data-sec="music"] #b-panel-body{max-width:900px} /* ── Breathwork saiu do molde "uma tela só" (31/08/2026) ──────────────── Aqui morava o molde do guia de respiração: painel travado em overflow:hidden, virando uma coluna da altura do aparelho, e quem rolava era o conteúdo por dentro. Fazia sentido enquanto esta porta abria o guia, que é uma peça só e pede tela parada na frente. Ela não abre mais o guia. Abre o MESMO player da Music, na categoria Breathwork (beta.js, TOOLS.breathwork). O molde ficou para trás e cobrava caro: sobre a fila de faixas descontavam a capa, o transporte, os chips de categoria, o "‹ Dojo Breath" e o rodapé de músicas salvas, e o que restava era a janelinha. Medido no Chrome em 390x844: 149px de janela para 234px de lista, com a máscara apagando a última linha à vista. Na tela do aluno sobrava UMA faixa cortada no meio, e o nome das práticas não aparecia. Agora o Breathwork rola inteiro, pelas mesmas regras da Music, logo abaixo. Quando uma prática começa a tocar, o guia entra e a tela continua rolando pela regra do `:has(.sec-music.com-guia)`, mais adiante neste arquivo. */ /* ── Music (e Breathwork) rolam inteiros ──────────────────────────────── O Music também nasceu no molde "cabe numa tela só", e nele o molde não servia. A tela tem capa, transporte, chips de categoria, título da fila, 37 faixas e o rodapé de "músicas salvas". Tudo isso era mobília fixa, menos a fila: ela era a única que rolava, por dentro, no que sobrava. Medido no Chrome em 390x844: a janela da fila dava 321px para 1738px de lista, ou seja 7 faixas de 37 na tela. E quando o aluno salvava uma música, o rodapé "N faixas no aparelho · X MB · Liberar espaço" aparecia e a janela caía para 267px. Quanto mais a tela tinha para mostrar, menos ela mostrava, e o rodapé ficava fora de alcance. A Cura Sonora já tinha saído do mesmo molde (10/08/2026), com a conclusão que vale aqui também: nada de coluna com rolagem própria. Agora o painel inteiro rola, e capa, fila e rodapé andam juntos num só gesto. A máscara que esmaece a última linha sai junto: ela existia para avisar "a fila continua" dentro da janelinha. Sem janelinha, ela viraria uma faixa apagada no meio do caminho. */ #b-panel[data-sec="music"]:not([hidden]), #b-panel[data-sec="breathwork"]:not([hidden]){display:block;overflow-y:auto;-webkit-overflow-scrolling:touch} #b-panel[data-sec="music"] #b-panel-body, #b-panel[data-sec="breathwork"] #b-panel-body{display:block;padding-bottom:calc(var(--dock-alta) + 24px)} #b-panel[data-sec="music"] .sec-music:not([hidden]), #b-panel[data-sec="music"] .m-card, #b-panel[data-sec="music"] .m-body, #b-panel[data-sec="breathwork"] .sec-music:not([hidden]), #b-panel[data-sec="breathwork"] .m-card, #b-panel[data-sec="breathwork"] .m-body{display:block;min-height:0} /* block mata o gap de 36px do grid: a barra de categorias ficava colada no play. Ver a nota em app.css, na regra .com-guia .m-body > .m-fila. */ #b-panel[data-sec="music"] .m-fila, #b-panel[data-sec="breathwork"] .m-fila{margin-top:30px} #b-panel[data-sec="music"] .m-fila, #b-panel[data-sec="breathwork"] .m-fila{flex:none;min-height:0;max-height:none;overflow:visible} #b-panel[data-sec="music"] .m-list, #b-panel[data-sec="breathwork"] .m-list{flex:none;max-height:none;overflow:visible; mask-image:none;-webkit-mask-image:none} /* O guia da faixa rola como pagina (texto longo). A CURA SONORA TAMBEM, desde 10/08/2026: ela era uma tela de altura travada em que so a coluna de baixo rolava por dentro. Quem arrastava em cima dos botoes nao movia nada, e com os chakras dentro o que sobrava de area rolavel era uma faixa de 318px. */ #b-panel:has(.sec-music.com-guia):not([hidden]){display:block;overflow-y:auto} #b-panel:has(.sec-music.com-guia) #b-panel-body{display:block;padding-bottom:var(--dock-beta)} /* ---- aula feita + meta do mês (Dojo 2.0) ---- */ .b-feita-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;font-family:var(--sans);text-transform:uppercase;letter-spacing:1.2px;font-size:.56rem;font-weight:700;color:var(--text-soft);border:1px solid var(--border);border-radius:999px;padding:6px 11px;transition:.15s;-webkit-tap-highlight-color:transparent} .b-feita-toggle svg{width:13px;height:13px} .b-feita-toggle.is-feita{background:#7A9175;border-color:#7A9175;color:#fff} .b-card.feita .b-cth{filter:saturate(.82) brightness(.9)} .b-card.feita .b-cth::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:#7A9175 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 4px 12px rgba(13,26,16,.3)} .b-bib-meta{padding:14px 20px 4px} .b-bib-meta:empty{display:none} .b-meta-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px} .b-meta-tit{font-family:var(--serif);font-size:1.02rem;color:var(--floresta)} .b-meta-cont{font-family:var(--serif);font-size:.92rem;color:var(--text-mid);white-space:nowrap} .b-meta-bar{position:relative;height:10px;border-radius:999px;background:rgba(139,111,71,.16)} .b-meta-fill{height:100%;border-radius:999px;background:#7A9175;transition:width .6s ease;min-width:10px} .b-bib-meta.med .b-meta-fill{background:var(--ouro)} .b-bib-meta.max .b-meta-fill{background:linear-gradient(90deg,var(--ouro),#C4522A)} .b-meta-mark{position:absolute;top:-3px;width:2px;height:16px;background:rgba(13,26,16,.28);border-radius:2px} .b-meta-frase{margin-top:8px;font-family:var(--serif);font-style:italic;color:var(--text-mid);font-size:.86rem} /* ---------- Barra das ferramentas ---------- Timer, Music, Pratica e Cura Sonora sao funcoes de uso, nao paginas. Ficam numa barra que SENTA na base da tela, de ponta a ponta, com os cantos DE CIMA arredondados. As tres coisas que ela tem que ser ao mesmo tempo, e como cada uma chegou: 1. ARREDONDADA. Ela nasceu reta e colada, verde sobre verde, e se dissolvia no fundo. Virou pilula (canto, borda dourada, sombra) pra ler como objeto. Isso fica: o raio de 24px sobe pros cantos de cima e a borda dourada contorna o topo e as laterais. 2. NA BASE. Como pilula ela flutuava 12px acima da borda, e ai o conteudo aparecia por baixo e dos lados dela, cortando o ultimo cartao ao meio. Voltou pro bottom:0 de ponta a ponta: nada mais passa por baixo. Os cantos de baixo ficam retos, porque canto redondo encostado no chao so abre fresta pro fundo aparecer. 3. FINA. Como pilula ela engordou de 64 pra 80px (icone de 27px, respiro de 11px). Flutuando passava; sentada no pe da tela virava tarja gorda. Voltou pras medidas de origem: 64px + area segura. Fica ACIMA do painel (#b-panel, z 1000) pra dar pra trocar de ferramenta sem fechar a que esta aberta. */ /* ============================================================ A BARRA — cinco destinos (2.5) ============================================================ Substitui as TRÊS barras da 2.4: o menu de topo (.b-menu, oito itens de .7rem com ícones de 15px que sumiam no celular), a dock de ferramentas (.b-dock) e as abas do painel (#b-panel-tabs, cobertas pela dock e que ninguém nunca viu). Embaixo no celular, na altura do polegar. A partir de 1024px vira coluna lateral, com a MESMA marcação: painel com dois HTML é painel que apodrece por metade (a regra está escrita em /estilo). */ .b-nav{ position:fixed;z-index:1002; left:0;right:0;bottom:0; display:grid;grid-auto-flow:column;grid-auto-columns:1fr; padding:6px 4px calc(6px + max(0px, env(safe-area-inset-bottom) - 16px)); background:rgba(16,30,20,.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(201,169,79,.4); box-shadow:0 -8px 28px rgba(0,0,0,.42); } .b-nav-i{ position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; /* 44px é o mínimo de toque do iOS, e não é negociável. Os ícones do menu antigo tinham 15px e sumiam abaixo de 430px. */ min-height:44px;padding:8px 2px 7px;border:0;border-radius:13px;cursor:pointer;background:none; font-family:var(--sans);font-size:.62rem;font-weight:500;letter-spacing:.02em; color:rgba(230,201,122,.82);transition:color .18s; } .b-nav-i[hidden]{display:none} .b-nav-ic{width:23px;height:23px;stroke:currentColor;flex:none} .b-nav-i span{line-height:1.15;text-align:center;max-width:100%;white-space:nowrap} .b-nav-i:hover{color:var(--creme)} .b-nav-i:active{transform:scale(.94)} /* O destino em que a pessoa está: cor E o fio de ouro em cima. Nunca só a cor, e nunca a opacidade do texto. */ .b-nav-i.ativa{color:var(--ouro-claro)} .b-nav-i.ativa::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:26px;height:2px;background:var(--ouro);border-radius:0 0 3px 3px; } .b-nav-pt{ position:absolute;top:9px;right:calc(50% - 17px); width:7px;height:7px;border-radius:999px;background:var(--ouro); } .b-nav-pt[hidden]{display:none} @media(max-width:340px){ .b-nav-i{font-size:.56rem} .b-nav-ic{width:21px;height:21px} } /* ---------- o canto de cima: avisos, cursos, conta ---------- */ /* ---------- a grade das seis ferramentas ---------- */ #b-ferramentas{ /* 999, um degrau ABAIXO do painel das ferramentas (1000). Abrir uma porta cobre a grade; fechar o painel devolve a grade por baixo. O caminho de volta existe sem nenhum botão novo. */ position:fixed;inset:0;z-index:999;overflow-y:auto; background:var(--pergaminho); padding-bottom:calc(var(--dock-alta) + 32px); } #b-ferramentas[hidden]{display:none} .b-ferr-lede{ padding:16px 18px 18px;margin:0;font-family:var(--sans);font-size:.88rem; color:var(--text-mid);line-height:1.5; } .b-ferr-grade{ display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:11px;padding:0 18px;align-items:start; } .b-ferr{ display:flex;flex-direction:column;gap:5px;text-align:left; padding:18px 16px;min-height:132px;cursor:pointer; background:#fff;border:1px solid var(--border);border-radius:15px; } .b-ferr{text-decoration:none} .b-ferr:hover{border-color:var(--ouro)} .b-ferr:active{transform:scale(.985)} .b-ferr-ic{color:var(--ouro-escuro);line-height:1} .b-ferr-ic svg{width:24px;height:24px} .b-ferr-n{font-family:var(--serif);font-size:1.15rem;margin-top:5px;color:var(--floresta)} .b-ferr-s{font-family:var(--sans);font-size:.75rem;color:var(--text-mid);line-height:1.4} .b-ferr-k{ margin-top:auto;font-family:var(--sans);font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;color:var(--text-fade); } .b-ferr-atualizar{ display:block;margin:22px auto 0;padding:10px 18px;border:0;background:none; cursor:pointer;font-family:var(--sans);font-size:.78rem;color:var(--text-fade); text-decoration:underline; } .b-ferr-atualizar:hover{color:var(--text-mid)} /* O respiro pra barra fica SO no rodape. Antes estava tambem no body, e as duas reservas somavam mais de 200px de vazio no fim da home. */ .b-foot{padding-bottom:calc(var(--dock-alta) + 24px)} #b-panel-body{padding-bottom:calc(var(--dock-alta) + 64px)} /* ============================================================ A HOME DA 2.5 — o desenho aprovado ============================================================ O hero da 2.4 (logo de 216px, sobrancelha, título e slogan) gastava 304px dos 844 de um iPhone antes de qualquer conteúdo. Ele saiu. Quem fala com o aluno é a saudação, com o nome dele, e o primeiro bloco de conteúdo é o programa do mês. */ /* Arrastar a home para baixo atualiza o app. O app.css desliga o overscroll para a /pratica, que é tela cheia e não rola; aqui a home rola, e o gesto nativo do aparelho é o caminho de atualizar. Foi por isso que o botão de refresh saiu do topo: ele repetia um gesto que o telefone já tem. */ body{overscroll-behavior-y:auto} .b-topo{ position:sticky;top:0;z-index:40; display:flex;align-items:center;gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; background:var(--floresta);color:var(--creme); } .b-marca{display:flex;align-items:center;min-width:0} /* O LOGO DA ESCOLA NO TOPO. A altura é fixa e a largura é `auto`: sem isto o navegador usaria os 104px do atributo e o desenho entraria esticado. O arquivo é o corte de tela do logo principal, 320px de largura, que cobre 3x de retina nos 87px em que ele aparece aqui; qualquer uso maior deve ser recortado de novo a partir do PNG. */ .b-marca-logo{height:28px;width:auto;flex:none;display:block} /* Numa tela de 320px com quatro ícones no canto o logo em tamanho cheio deixa 8px de folga, e o próximo ícone que nascer empurra alguém para fora. Quem cede é a marca, nunca um botão: a mesma regra que valia quando ela era texto. */ @media (max-width:360px){.b-marca-logo{height:22px}} /* `flex:none` nos botões e `min-width:0` na marca: numa tela de 320px com quatro ícones (quem tem Cursos), quem tem que ceder espaço é o nome do app, e nunca um botão. Sem isto os ícones encolhem abaixo do alvo de toque e o último pode sair da tela. */ .b-canto{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none} .b-canto-i{ position:relative;display:grid;place-items:center;flex:none; width:44px;height:44px;border-radius:999px;border:0;background:none;cursor:pointer; color:rgba(251,248,240,.86); } .b-canto-i{text-decoration:none} .b-canto-i svg{width:21px;height:21px} .b-canto-i:hover{background:rgba(201,169,79,.14);color:var(--creme)} .b-canto-i:active{transform:scale(.94)} .b-avatar{ width:34px;height:34px;border-radius:999px;display:grid;place-items:center; font-family:var(--serif);font-size:1.02rem;color:var(--floresta); background:radial-gradient(circle at 50% 35%,var(--ouro-claro),var(--ouro)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); } .b-avatar[hidden]{display:none} .b-sec{padding:0 18px calc(var(--dock-alta) + 28px)} .b-saud{padding:22px 0 16px} .b-saud-n{font-family:var(--serif);font-size:1.6rem;line-height:1.15;color:var(--floresta);margin:0} .b-saud-n em{font-style:italic;color:var(--ouro-escuro)} .b-saud-d{font-family:var(--sans);font-size:.86rem;color:var(--text-mid);margin:2px 0 0} /* a faixa do aviso fixado: uma linha, dispensável */ #b-aviso-faixa{margin-bottom:18px} #b-aviso-faixa[hidden]{display:none} .b-af{ display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:11px 13px;background:#fffdf6;border:1px solid rgba(201,169,79,.5); border-left:3px solid var(--ouro);border-radius:10px;cursor:pointer; } .b-af-i{font-size:1rem;color:var(--ouro-escuro);flex:none} .b-af-t{ /* é