/** * TATAME ALUNO — PATCH DE DESIGN v2.0 * Arquivo: aluno-design-patch.css * * INSTRUÇÃO DE USO: * Adicionar no do tatame.site/index.html, * DEPOIS dos links de CSS existentes: * * * * E antes do : * */ /* ── Importa o design system ─────────────────────────────────── */ @import url('/assets/css/tatame-design-system.css'); /* ══════════════════════════════════════════════════════════════ SOBRESCREVE VARIÁVEIS LEGADAS DO ALUNO ══════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* Verde ANTES: #6CFF4D (neon) → AGORA: #3ecf6b (suave) */ --green: #3ecf6b; --green-dim: rgba(62,207,107,0.10); --green-mid: rgba(62,207,107,0.22); --bg: #0d0f12; --bg2: #131619; --bg3: #1a1e24; --bg4: #21262e; --bg5: #282e38; --border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.11); --text: #edf0f5; --text2: #8a95a3; --muted: #4e5764; --muted2: #6b7585; --blue: #4a90d9; --amber: #d4922a; --red: #d95c5c; --purple: #8b6fd9; --r: 16px; --rsm: 10px; } [data-theme="light"] { --green: #27a854; --green-dim: rgba(39,168,84,0.10); --green-mid: rgba(39,168,84,0.22); --bg: #f4f6f9; --bg2: #ffffff; --bg3: #ffffff; --bg4: #f0f2f6; --bg5: #e8ecf2; --border: rgba(0,0,0,0.06); --border2: rgba(0,0,0,0.11); --text: #111827; --text2: #4b5563; --muted: #9ca3af; --muted2: #6b7280; --blue: #2b72c7; --amber: #b5720d; --red: #c0392b; } /* ══════════════════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════════════════ */ html, body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; background: var(--bg) !important; color: var(--text) !important; } /* ══════════════════════════════════════════════════════════════ SHELL — adiciona classe de desktop ao body via JS (ver tatame-desktop-init.js) ══════════════════════════════════════════════════════════════ */ .shell { background: var(--bg) !important; } /* ══════════════════════════════════════════════════════════════ BOTTOM NAV — Mobile: floating pill ══════════════════════════════════════════════════════════════ */ .bnav { bottom: 10px !important; left: 10px !important; right: 10px !important; max-width: calc(430px - 20px) !important; transform: translateX(-50%) !important; border-radius: 14px !important; background: var(--bg3) !important; border: 1px solid var(--border2) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } .nb { color: var(--muted2) !important; transition: color 0.15s !important; } .nb.on { color: var(--green) !important; } /* ══════════════════════════════════════════════════════════════ DESKTOP LAYOUT — App do Aluno Espelha exatamente o layout da Academia ══════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { body { justify-content: flex-start !important; max-width: none !important; } #root { max-width: none !important; width: 100% !important; } /* Shell vira grid de 2 colunas */ .shell { display: grid !important; grid-template-columns: 248px minmax(0,1fr) !important; grid-template-rows: 64px minmax(0,1fr) !important; min-height: 100dvh !important; max-width: none !important; width: 100% !important; background: var(--bg) !important; } /* Bandeirinha de email/trial: span full width */ .shell > [class*="banner"], .shell > [class*="verify"], .shell > [class*="trial"] { grid-column: 1 / -1 !important; } /* Topbar — visível no desktop, no topo do content */ .shell .tatame-topbar-desktop { grid-column: 2 !important; grid-row: 1 !important; position: sticky !important; top: 0 !important; z-index: 70 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 28px !important; height: 64px !important; background: rgba(13,15,18,0.92) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; border-bottom: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; gap: 12px !important; } [data-theme="light"] .shell .tatame-topbar-desktop { background: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; border-left-color: rgba(0,0,0,0.08) !important; } /* Scroll area */ .scroll { grid-column: 2 !important; grid-row: 2 !important; height: calc(100dvh - 64px) !important; overflow: auto !important; padding: 0 28px 36px !important; padding-bottom: 36px !important; background: var(--bg) !important; } .page { width: min(100%, 1200px) !important; max-width: 1200px !important; margin: 0 auto !important; padding: 28px 0 0 !important; } /* Bottom nav vira sidebar */ .bnav { grid-column: 1 !important; grid-row: 1 / 3 !important; position: sticky !important; top: 0 !important; height: 100dvh !important; width: 248px !important; max-width: 248px !important; transform: none !important; bottom: unset !important; left: 0 !important; right: unset !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; padding: 20px 12px !important; border-radius: 0 !important; border: none !important; border-right: 1px solid var(--border) !important; background: var(--bg2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow-y: auto !important; z-index: 80 !important; } /* Logo na sidebar */ .bnav::before { content: 'Tatame.' !important; display: block !important; padding: 4px 10px 20px !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 800 !important; font-size: 17px !important; color: var(--text) !important; letter-spacing: -0.3px !important; } /* Nav links viram botões de sidebar */ .nb { flex: 0 0 auto !important; width: 100% !important; min-height: 40px !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 9px 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text2) !important; } .nb .nb-icon { font-size: unset !important; } .nb .nb-icon svg, .nb svg { width: 18px !important; height: 18px !important; } .nb.on, .nb:hover { background: var(--green-dim) !important; color: var(--green) !important; } /* Remove dot indicator do mobile */ .nb::after { display: none !important; } /* Overlay centralizado no desktop */ .overlay { align-items: center !important; padding-left: 248px !important; } .sheet { width: min(720px, calc(100vw - 248px - 40px)) !important; border-radius: 20px !important; max-height: 88dvh !important; } /* Auth screen ainda centraliza normalmente */ .auth-wrap { padding-left: 0 !important; width: 100% !important; } } /* ══════════════════════════════════════════════════════════════ STREAK HERO — ajuste de cor ══════════════════════════════════════════════════════════════ */ .streak-hero { background: var(--bg3) !important; border-color: var(--green-mid) !important; } .streak-num { color: var(--green) !important; } /* ══════════════════════════════════════════════════════════════ BOTÕES CTA ══════════════════════════════════════════════════════════════ */ .btn-cta { background: var(--green) !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; } .btn-cta.done { background: var(--green-dim) !important; color: var(--green) !important; border: 1px solid var(--green-mid) !important; } [data-theme="light"] .btn-cta { color: #05180c !important; } /* ══════════════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════════════ */ .card { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; } .card-row { background: var(--bg3) !important; border-color: var(--border) !important; } /* ══════════════════════════════════════════════════════════════ INPUTS ══════════════════════════════════════════════════════════════ */ .fi, .fta { background: var(--bg2) !important; border-color: var(--border2) !important; color: var(--text) !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; } .fi:focus, .fta:focus { border-color: var(--green-mid) !important; box-shadow: 0 0 0 3px var(--green-dim) !important; } /* ══════════════════════════════════════════════════════════════ SHEETS / OVERLAYS ══════════════════════════════════════════════════════════════ */ [data-theme="light"] .overlay { background: rgba(0,0,0,0.4) !important; } [data-theme="light"] .sheet { background: #fff !important; border-color: rgba(0,0,0,0.10) !important; } /* ══════════════════════════════════════════════════════════════ TÉCNICA CARDS ══════════════════════════════════════════════════════════════ */ .tec-card { background: var(--bg3) !important; border-color: var(--border) !important; } .tec-icon { background: var(--bg4) !important; color: var(--green) !important; } .dd.on { background: var(--green) !important; border-color: var(--green) !important; } /* ══════════════════════════════════════════════════════════════ EVENTO / CAL ══════════════════════════════════════════════════════════════ */ .chip.on { background: var(--green-dim) !important; border-color: var(--green-mid) !important; color: var(--green) !important; } /* ══════════════════════════════════════════════════════════════ TOPBAR MOBILE — aluno (injeta via JS) ══════════════════════════════════════════════════════════════ */ .tatame-topbar-aluno-mobile { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: rgba(13,15,18,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 70; } [data-theme="light"] .tatame-topbar-aluno-mobile { background: rgba(255,255,255,0.92); border-bottom: 1px solid rgba(0,0,0,0.08); } .tatame-theme-toggle-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border2); background: transparent; color: var(--muted2); cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .tatame-theme-toggle-btn:hover { color: var(--text); background: var(--bg4); } .tatame-theme-toggle-btn svg { width: 16px; height: 16px; pointer-events: none; } /* ══════════════════════════════════════════════════════════════ AUTH ══════════════════════════════════════════════════════════════ */ [data-theme="light"] .auth-wrap { background: var(--bg) !important; } [data-theme="light"] .auth-card { background: #fff !important; border-color: rgba(0,0,0,0.10) !important; } .auth-card { background: var(--bg3) !important; border-color: var(--border) !important; } /* ══════════════════════════════════════════════════════════════ SDOTS ══════════════════════════════════════════════════════════════ */ .sdot { background: var(--bg4) !important; border-color: var(--border) !important; } .sdot.done { background: var(--green-dim) !important; border-color: var(--green-mid) !important; } .sdot.done .sd-d, .sdot.today .sd-d { color: var(--green) !important; } .sdot.done .sd-i { background: var(--green) !important; } /* ══════════════════════════════════════════════════════════════ TRANSITION global ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { transition-property: background-color, border-color, color; transition-duration: 0.2s; transition-timing-function: ease; } .toast { transition: none !important; }