/* fonte própria, servida pelo nosso domínio: nada de @import bloqueante */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button { appearance: none; -webkit-appearance: none; background: none; border: none; font: inherit; color: inherit; outline: none; box-shadow: none; } /* ══════════════════════════════════════════════════════════ TEMAS Padrão = claro. O escuro entra por [data-tema="dark"] no . Regra: nenhuma cor fixa fora daqui — tudo passa por variável, senão algo fica invisível ao trocar de tema. ══════════════════════════════════════════════════════════ */ :root { /* superfícies */ --bg: #ffffff; --bg2: #f6f6fa; --bg3: #f3f3f8; --bg4: #e9e9f1; /* texto */ --text: #15151c; --text2: #55555f; --text3: #5c5c66; /* linhas */ --border: rgba(0,0,0,0.12); --border2: rgba(0,0,0,0.22); /* camadas neutras (chips, inputs, botões fantasma) */ --surface-1: rgba(0,0,0,0.045); --surface-2: rgba(0,0,0,0.075); --surface-3: rgba(0,0,0,0.115); /* roxo da marca */ --accent: #7c3aed; --accent2: #6d28d9; --accent3: #5b21b6; --accent-light: #a78bfa; --accent-glow: rgba(124,58,237,0.30); --accent-text: #5b21b6; /* roxo escuro: legível sobre branco */ --accent-soft: rgba(124,58,237,0.13); /* fundo de selo/badge roxo */ --trava-veu: rgba(245,245,250,0.55); /* véu sobre o check-up bloqueado */ --accent-soft-border: rgba(124,58,237,0.42); --brand-grad: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%); /* estados */ --red: #e50914; --ok-text: #15803d; --ok-soft: rgba(34,197,94,0.14); --ok-border: rgba(22,163,74,0.35); --err-text: #b91c1c; --err-soft: rgba(229,9,20,0.09); --err-border:rgba(229,9,20,0.25); --info-text: #1d4ed8; --info-soft: rgba(59,130,246,0.12); --info-border: rgba(59,130,246,0.28); /* elementos compostos */ --nav-top-grad: #ffffff; --nav-solid: #ffffff; --elevated: #ffffff; /* modal, tooltip, card de login */ --card: #ffffff; /* aviso de 1o acesso, tela de banido, trava do check-up */ --backdrop: rgba(20,20,35,0.45); --hero-grad: linear-gradient(125deg, #f1ecff 0%, #f6f4ff 40%, #fafaff 80%, var(--bg) 100%); --hero-overlay: linear-gradient(to right, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 55%, transparent 100%), linear-gradient(to top, var(--bg) 0%, transparent 85%); --course-grad: linear-gradient(135deg, #efe9ff 0%, #f5f3ff 50%, var(--bg) 100%); --course-overlay: linear-gradient(to right, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.35) 50%, transparent 80%), linear-gradient(to top, var(--bg) 0%, transparent 40%); --title-shadow: none; --cta-grad: linear-gradient(135deg, #15803d 0%, #166534 100%); --cta-grad-hover: linear-gradient(135deg, #16a34a 0%, #15803d 100%); --cta-solid: #15803d; --cta-solid-hover: #176e37; --scroll-thumb: #c9c9d4; --scroll-thumb-hover: #aeaebc; --nav-h: 68px; --radius: 10px; --shadow: 0 6px 26px rgba(20,20,45,0.10); --shadow-lg: 0 18px 52px rgba(20,20,45,0.16); } [data-tema="dark"] { --bg: #0a0a0a; --bg2: #141414; --bg3: #1c1c1c; --bg4: #242424; --text: #ffffff; --text2: #b3b3b3; --text3: #8b8b8b; --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14); --surface-1: rgba(255,255,255,0.05); --surface-2: rgba(255,255,255,0.10); --surface-3: rgba(255,255,255,0.18); --accent-glow: rgba(124,58,237,0.35); --accent-text: #c4b5fd; --accent-soft: rgba(124,58,237,0.18); --trava-veu: rgba(10,10,14,0.55); --accent-soft-border: rgba(167,139,250,0.30); --brand-grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #5b21b6 100%); --ok-text: #86efac; --ok-soft: rgba(34,197,94,0.12); --ok-border: rgba(34,197,94,0.30); --err-text: #ff8080; --err-soft: rgba(229,9,20,0.10); --err-border:rgba(229,9,20,0.25); --info-text: #60a5fa; --info-soft: rgba(59,130,246,0.12); --info-border: rgba(59,130,246,0.20); --nav-top-grad: #0a0a0a; --nav-solid: #0a0a0a; --elevated: #141418; --card: #141418; --backdrop: rgba(0,0,0,0.88); --hero-grad: linear-gradient(125deg, #130a2e 0%, #0d0d2b 40%, #0a0a14 80%, var(--bg) 100%); --hero-overlay: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 55%, transparent 100%), linear-gradient(to top, var(--bg) 0%, transparent 85%); --course-grad: linear-gradient(135deg, #13082e 0%, #0d0d2b 50%, var(--bg) 100%); --course-overlay: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 50%, transparent 80%), linear-gradient(to top, var(--bg) 0%, transparent 40%); --title-shadow: 0 2px 20px rgba(0,0,0,0.5); --cta-grad: linear-gradient(135deg, #16a34a 0%, #15803d 100%); --cta-grad-hover: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --cta-solid: #16a34a; --cta-solid-hover: #12833c; --scroll-thumb: #333; --scroll-thumb-hover: #555; --shadow: 0 8px 40px rgba(0,0,0,0.7); --shadow-lg: 0 20px 60px rgba(0,0,0,0.85); } /* troca suave ao alternar o tema */ body, .znf-nav, .znf-module-header, .znf-module-body, .znf-modal-box, .znf-form-card, .znf-input, .znf-auth-card, .znf-access-card { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } html { scroll-behavior: smooth; } /* foco de teclado: o reset apagava o contorno e não repunha nada */ :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 6px; } /* números que se alinham em coluna não podem dançar */ .znf-module-progress-badge, .znf-lesson-duration, .znf-module-num { font-variant-numeric: tabular-nums; } body { background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.5; } /* ─── SCROLLBAR ─────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* ─── SELECTION ─────────────────────────────────────────── */ ::selection { background: var(--accent); color: #fff; } /* texto com o gradiente da marca, em qualquer lugar (logo, rodapé…) */ .accent { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── BOTÃO DE TEMA (claro / escuro) ─────────────────────── */ .znf-theme-toggle { position: relative; width: 52px; height: 28px; flex-shrink: 0; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border2); cursor: pointer; padding: 0; transition: background 0.25s ease, border-color 0.25s ease; } .znf-theme-toggle:hover { border-color: var(--accent); } .znf-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* bolinha que desliza */ .znf-theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.28); transition: transform 0.28s cubic-bezier(0.34,1.35,0.64,1); } [data-tema="dark"] .znf-theme-toggle::after { transform: translateX(24px); } /* ícones dentro do trilho */ .znf-theme-toggle svg { position: absolute; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); transition: opacity 0.25s ease; pointer-events: none; } .znf-theme-toggle .znf-icon-sun { left: 6px; color: #f59e0b; opacity: 0; } .znf-theme-toggle .znf-icon-moon { right: 6px; color: var(--text2); opacity: 1; } [data-tema="dark"] .znf-theme-toggle .znf-icon-sun { opacity: 1; } [data-tema="dark"] .znf-theme-toggle .znf-icon-moon { opacity: 0; } /* nas telas de login/registro, que não têm navbar. Fica do lado do formulário: em cima da foto ele sumia. */ .znf-theme-toggle.floating { position: fixed; top: 18px; left: 18px; z-index: 50; } /* ─── NAVBAR ─────────────────────────────────────────────── */ .znf-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 4%; z-index: 900; border-bottom: 1px solid var(--border); transition: background 0.35s ease, box-shadow 0.35s ease; } .znf-nav.at-top { background: var(--nav-top-grad); } .znf-nav.scrolled { background: var(--nav-solid); box-shadow: 0 1px 0 var(--border); } .znf-nav-logo { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 0; flex-shrink: 0; } .znf-nav-logo .accent { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .znf-nav-links { display: flex; align-items: center; gap: 8px; } .znf-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text2); transition: color 0.2s, background 0.2s; white-space: nowrap; } .znf-nav-link:hover { color: var(--text); background: var(--surface-1); } .znf-nav-link.active { color: var(--text); } .znf-nav-link.accent-link { color: var(--accent-text); } .znf-nav-link.accent-link:hover { color: var(--accent2); background: var(--accent-soft); } .znf-nav-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; background: var(--accent); color: white; text-decoration: none; transition: background 0.2s, transform 0.2s; } .znf-nav-badge:hover { background: var(--accent2); transform: scale(1.03); } .znf-user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 30px; font-size: 13px; font-weight: 500; color: var(--text2); background: var(--surface-1); border: 1px solid var(--border); } .znf-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-light)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; } /* ─── HERO ───────────────────────────────────────────────── */ .znf-hero { min-height: 0; display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 20px) 4% 24px; position: relative; overflow: hidden; } .znf-hero-bg { position: absolute; inset: 0; background: var(--hero-grad); } .znf-hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 15% 55%, rgba(124,58,237,0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 75% 25%, rgba(167,139,250,0.07) 0%, transparent 55%), radial-gradient(ellipse 30% 50% at 90% 80%, rgba(91,33,182,0.1) 0%, transparent 50%); } .znf-hero-overlay { position: absolute; inset: 0; background: var(--hero-overlay); } .znf-hero-content { position: relative; z-index: 1; max-width: 680px; animation: fadeInUp 0.8s ease both; } .znf-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); padding: 6px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 22px; } .znf-hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); animation: pulse 2s infinite; } .znf-hero-title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -1px; margin-bottom: 12px; text-shadow: var(--title-shadow); } .znf-hero-title .highlight { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .znf-hero-sub { font-size: 14px; color: var(--text2); line-height: 1.55; margin-bottom: 18px; max-width: 480px; } .znf-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .znf-hero-warning { display: flex; align-items: center; gap: 8px; background: var(--err-soft); border: 1px solid var(--err-border); color: var(--err-text); padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; max-width: 520px; margin-bottom: 20px; animation: pulse 2.2s ease-in-out infinite; } .znf-nav-social { display: flex; align-items: center; gap: 10px; margin-right: 4px; } .znf-nav-social a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text2); background: var(--surface-1); border: 1px solid var(--border); transition: color 0.2s, background 0.2s, transform 0.2s; } .znf-nav-social a:hover { color: var(--accent2); background: var(--accent-soft); border-color: var(--accent-soft-border); transform: scale(1.06); } /* ─── BUTTONS ────────────────────────────────────────────── */ .znf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 8px; font-size: 15px; font-weight: 600; font-family: inherit; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; letter-spacing: -0.1px; } .znf-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.20); } .znf-btn-primary:hover { background: var(--accent2); box-shadow: 0 2px 6px rgba(0,0,0,0.26); color: #fff; } .znf-btn-primary:active { transform: translateY(0); } .znf-btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border2); backdrop-filter: blur(8px); } .znf-btn-ghost:hover { background: var(--surface-3); color: var(--text); } /* CTA principal: verde e pulsando */ .znf-btn-cta { background: var(--cta-solid); color: #fff; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.20); } .znf-btn-cta:hover { background: var(--cta-solid-hover); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.26); } .znf-btn-cta:active { transform: translateY(0); } /* Botão da live: vermelho */ .znf-btn-live { background: #c0392f; color: #fff; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.20); } /* azul, sem pulso: dois botoes piscando juntos brigariam pela atencao, e o verde ficaria competindo com o "Comecar a operar" */ .znf-btn-comunidade { background: #1d6fd0; color: #fff; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.20); } .znf-btn-live:hover { background: #d0463a; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.26); } .znf-btn-live:active { transform: translateY(0); } .znf-btn-danger { background: var(--err-soft); color: var(--err-text); border: 1px solid var(--err-border); } .znf-btn-danger:hover { background: #e50914; color: #fff; border-color: #e50914; box-shadow: 0 4px 20px rgba(229,9,20,0.4); } .znf-btn-sm { padding: 8px 16px; font-size: 13px; } .znf-btn-lg { padding: 16px 36px; font-size: 16px; } .znf-btn-full { width: 100%; } /* ─── SECTIONS ───────────────────────────────────────────── */ .znf-section { padding: 10px 4% 50px; } .znf-section-title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .znf-section-title .dot { width: 4px; height: 20px; background: var(--accent); border-radius: 2px; } /* ─── COURSE CARDS ───────────────────────────────────────── */ .znf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } @media (min-width: 1400px) { .znf-grid { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1200px) and (max-width: 1399px) { .znf-grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 900px) and (max-width: 1199px) { .znf-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 600px) and (max-width: 899px) { .znf-grid { grid-template-columns: repeat(3, 1fr); } } .znf-card { position: relative; border-radius: 8px; overflow: visible; cursor: pointer; text-decoration: none; color: inherit; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), z-index 0s 0.3s; display: block; } .znf-card:hover { transform: scale(1.1); z-index: 20; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), z-index 0s 0s; } .znf-card-inner { border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; position: relative; box-shadow: var(--shadow); transition: box-shadow 0.3s ease; } .znf-card:hover .znf-card-inner { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent); } .znf-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .znf-card:hover .znf-card-img { transform: scale(1.06); } .znf-card-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #2d1b69 0%, #1e1b4b 50%, #1a0a3e 100%); display: flex; align-items: center; justify-content: center; font-size: 44px; position: relative; } .znf-card-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(124,58,237,0.15) 100%); } .znf-card-base-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 10px 10px; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 100%); } .znf-card-base-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .znf-card-hover-panel { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,0,25,0.97) 0%, rgba(10,0,25,0.7) 60%, transparent 100%); padding: 14px 12px 12px; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .znf-card:hover .znf-card-hover-panel { opacity: 1; pointer-events: auto; } .znf-card-play-btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; transition: transform 0.2s; } .znf-card-play-btn:hover { transform: scale(1.1); } .znf-card-hover-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; line-height: 1.3; } .znf-card-hover-meta { font-size: 11px; color: var(--text3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } /* ─── EMPTY STATE ────────────────────────────────────────── */ .znf-empty { text-align: center; padding: 80px 20px; border: 1px dashed var(--border2); border-radius: 16px; background: var(--surface-1); } .znf-empty-icon { font-size: 56px; margin-bottom: 20px; opacity: 0.5; } .znf-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .znf-empty-sub { color: var(--text2); margin-bottom: 28px; font-size: 15px; } /* ─── COURSE DETAIL HEADER ───────────────────────────────── */ .znf-course-header { min-height: 26vh; display: flex; align-items: flex-end; padding: var(--nav-h) 4% 24px; position: relative; overflow: hidden; } .znf-course-bg { position: absolute; inset: 0; background: var(--course-grad); } .znf-course-bg-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.15; filter: blur(2px); } .znf-course-overlay { position: absolute; inset: 0; background: var(--course-overlay); } .znf-course-header-content { position: relative; z-index: 1; max-width: 750px; animation: fadeInUp 0.7s ease both; } .znf-course-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; } .znf-course-title { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 6px; } .znf-course-desc { font-size: 12.5px; color: var(--text2); line-height: 1.45; max-width: 580px; margin-bottom: 12px; } .znf-course-stats { display: flex; gap: 18px; flex-wrap: wrap; } .znf-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); } .znf-stat svg { color: var(--accent-text); } /* ══════════════════════════════════════════════════════════ CHECK-UP DE GERENCIAMENTO ══════════════════════════════════════════════════════════ */ .znf-ck { padding: calc(var(--nav-h) + 28px) 4% 40px; max-width: 1060px; margin: 0 auto; } /* ── Sem acesso: conteúdo aparece atrás, desfocado ───────── */ .znf-ck.bloqueado { filter: blur(7px) saturate(0.55); opacity: 0.5; pointer-events: none; user-select: none; max-height: 100vh; overflow: hidden; } .znf-ck-trava { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 20px) 5% 30px; background: var(--trava-veu); } .znf-ck-trava-card { width: 100%; max-width: 430px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 32px 26px 26px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28); } .znf-ck-trava-icone { width: 54px; height: 54px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--accent); background: var(--accent-soft); } .znf-ck-trava-card h2 { font-size: clamp(1.15rem, 3.4vw, 1.4rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.5px; color: var(--text); margin-bottom: 10px; } .znf-ck-trava-card p { font-size: 0.92rem; line-height: 1.55; color: var(--text2); margin-bottom: 22px; } .znf-ck-trava-card .znf-btn { width: 100%; justify-content: center; } .znf-ck-trava-voltar { display: inline-block; margin-top: 16px; font-size: 0.84rem; color: var(--text3); text-decoration: none; } .znf-ck-trava-voltar:hover { color: var(--text2); text-decoration: underline; } @media (max-width: 600px) { .znf-ck-trava-card { padding: 26px 20px 22px; border-radius: 18px; } } .znf-ck-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .znf-ck-titulo { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; letter-spacing: -1px; line-height: 1.1; } .znf-ck-titulo .highlight { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .znf-ck-sub { font-size: 13px; color: var(--text3); margin-top: 5px; } .znf-ck-chips { display: flex; gap: 7px; flex-wrap: wrap; } .znf-ck-chip { padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; border: 1px solid; } .znf-ck-chip.perfil-ok { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok-text); } .znf-ck-chip.perfil-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info-text); } .znf-ck-chip.perfil-warn { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-text); } .znf-ck-chip.perfil-err { background: var(--err-soft); border-color: var(--err-border); color: var(--err-text); } .znf-ck-chip.fogo { background: var(--surface-1); border-color: var(--border2); color: var(--text2); } /* ─── Alerta vermelho ─────────────────────────────────── */ .znf-ck-alerta { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin-bottom: 18px; border-radius: 14px; /* vermelho solido nos dois temas: e um alerta, tem que gritar e o texto claro precisa de fundo escuro para ser legivel */ background: linear-gradient(135deg, #991b1b, #7f1d1d); border: 1.5px solid #ef4444; box-shadow: 0 0 0 4px rgba(220,38,38,0.12), 0 10px 34px rgba(220,38,38,0.22); animation: alertaPulso 1.7s ease-in-out infinite; } .znf-ck-alerta[hidden] { display: none; } .znf-ck-alerta.entrando { animation: alertaEntra 0.45s cubic-bezier(0.34,1.5,0.64,1) both, alertaPulso 1.7s 0.45s ease-in-out infinite; } .znf-ck-alerta-icone { flex-shrink: 0; color: #fecaca; } .znf-ck-alerta strong { display: block; font-size: 15px; font-weight: 900; letter-spacing: 0.4px; color: #fecaca; margin-bottom: 5px; } .znf-ck-alerta p { font-size: 13px; line-height: 1.55; color: #fee2e2; margin: 0; } @keyframes alertaPulso { 0%,100% { box-shadow: 0 0 0 4px rgba(220,38,38,0.10), 0 10px 30px rgba(220,38,38,0.18); } 50% { box-shadow: 0 0 0 9px rgba(220,38,38,0.05), 0 14px 40px rgba(220,38,38,0.30); } } @keyframes alertaEntra { from { opacity: 0; transform: scale(0.94) translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .znf-ck-alerta, .znf-ck-alerta.entrando { animation: none; } } /* ─── Card do dia ─────────────────────────────────────── */ .znf-ck-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); } .znf-ck-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .znf-ck-data { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); } .znf-ck-config-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--surface-1); border: 1px solid var(--border); color: var(--text3); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.18s; } .znf-ck-config-btn:hover { color: var(--text); border-color: var(--accent); } .znf-ck-data.passado { color: var(--accent-text); } .znf-ck-voltar-hoje { font-size: 11.5px; color: var(--text3); text-decoration: underline; text-underline-offset: 2px; margin-right: auto; margin-left: 10px; white-space: nowrap; } .znf-ck-data { white-space: nowrap; } .znf-ck-voltar-hoje:hover { color: var(--text2); } /* anel + números */ .znf-ck-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; } .znf-ck-anel { position: relative; width: 132px; height: 132px; flex-shrink: 0; } .znf-ck-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); } .znf-ck-anel circle { fill: none; stroke-width: 9; stroke-linecap: round; } .znf-ck-anel .trilho { stroke: var(--surface-2); } .znf-ck-anel .preenche { stroke: var(--accent); transition: stroke-dashoffset 0.5s cubic-bezier(0.4,0,0.2,1), stroke 0.3s; } .znf-ck-anel.up .preenche { stroke: #16a34a; } .znf-ck-anel.down .preenche { stroke: #dc2626; } .znf-ck-anel.zero .preenche { stroke: var(--surface-3); } .znf-ck-anel-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; } .znf-ck-anel-centro .rotulo { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); } .znf-ck-anel-centro strong { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; } .znf-ck-anel.up strong { color: var(--ok-text); } .znf-ck-anel.down strong { color: var(--err-text); } .znf-ck-anel-centro .pct { font-size: 10.5px; color: var(--text3); } .znf-ck-numeros { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; } .znf-ck-num { display: flex; flex-direction: column; gap: 2px; } .znf-ck-num span { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; } .znf-ck-num strong { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; } .znf-ck-num .verde { color: var(--ok-text); } .znf-ck-num .vermelho { color: var(--err-text); } /* campos */ .znf-ck-campo { margin-bottom: 20px; } .znf-ck-campo > label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 9px; } .znf-ck-input-linha { display: flex; align-items: stretch; gap: 9px; } .znf-ck-sinal { width: 46px; flex-shrink: 0; border-radius: 11px; background: var(--surface-1); border: 1px solid var(--border2); color: var(--text2); font-size: 21px; font-weight: 700; line-height: 1; cursor: pointer; transition: all 0.15s; } .znf-ck-sinal:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); } .znf-ck-sinal:active { transform: scale(0.94); } .znf-ck-money { flex: 1; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-radius: 11px; background: var(--surface-1); border: 1px solid var(--border2); transition: border-color 0.18s, background 0.18s; min-width: 0; } .znf-ck-money:focus-within { border-color: var(--accent); background: var(--accent-soft); } .znf-ck-money span { font-size: 14px; font-weight: 700; color: var(--text3); flex-shrink: 0; } .znf-ck-money input { flex: 1; min-width: 0; border: none; background: none; outline: none; padding: 14px 0; font: inherit; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); } .znf-ck-dica { font-size: 11.5px; color: var(--text3); margin-top: 8px; transition: color 0.3s; } .znf-ck-dica.salvo { color: var(--ok-text); } .znf-ck-dica.salvo::after { content: ' · salvo ✓'; } /* stops */ .znf-ck-stops { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .znf-ck-bolinhas { display: flex; align-items: center; gap: 7px; } .znf-ck-bolinhas .bola { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border2); background: transparent; transition: all 0.28s cubic-bezier(0.34,1.5,0.64,1); } .znf-ck-bolinhas .bola.cheia { background: #dc2626; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); transform: scale(1.12); } .znf-ck-bolinhas .extra { font-size: 12px; font-weight: 700; color: var(--err-text); } .znf-ck-stops-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; } .znf-ck-stop-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 11px; background: var(--err-soft); border: 1px solid var(--err-border); color: var(--err-text); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.18s; white-space: nowrap; } .znf-ck-stop-btn:hover { background: rgba(220,38,38,0.2); border-color: #dc2626; } .znf-ck-stop-btn:active { transform: scale(0.96); } .znf-ck-stop-btn.travado { background: #dc2626; border-color: #dc2626; color: #fff; } .znf-ck-stop-btn.pulsou { animation: stopPulso 0.4s ease; } @keyframes stopPulso { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } } .znf-ck-desfazer { font-size: 11.5px; color: var(--text3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .znf-ck-desfazer:hover { color: var(--text2); } #btnFechar.ok { background: var(--cta-grad-hover); } /* ─── Trilha horizontal (arrasta para o lado) ─────────── */ .znf-ck-secao { margin: 4px 0 12px; } .znf-ck-secao h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; } .znf-ck-secao-sub { font-size: 12.5px; color: var(--text3); margin-top: 3px; } .znf-trilha-wrap { position: relative; overflow-x: auto; overflow-y: hidden; margin: 0 -4px 26px; padding: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .znf-trilha-wrap::-webkit-scrollbar { display: none; } .znf-trilha { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 6px 2px 4px; width: max-content; min-width: 100%; } /* linha que costura os passos, atrás dos círculos */ .znf-trilha::before { content: ''; position: absolute; left: 26px; right: 26px; top: 47px; height: 3px; background: repeating-linear-gradient(to right, var(--border2) 0 7px, transparent 7px 14px); border-radius: 2px; } .znf-passo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 0 auto; min-width: 62px; scroll-snap-align: center; animation: passoEntra 0.4s ease both; animation-delay: calc(var(--i) * 0.035s); } @keyframes passoEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .znf-passo-dia { font-size: 10.5px; font-weight: 600; color: var(--text3); white-space: nowrap; } .znf-passo-val { font-size: 11px; font-weight: 700; white-space: nowrap; min-height: 14px; } .znf-passo-val.up { color: var(--ok-text); } .znf-passo-val.down { color: var(--err-text); } .znf-passo-no { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border2); background: var(--bg3); color: var(--text3); flex-shrink: 0; transition: transform 0.2s; } .znf-passo-no:hover { transform: scale(1.1); } .znf-passo-no .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); } .znf-passo.ganho .znf-passo-no { background: linear-gradient(140deg, #16a34a, #15803d); border-color: #22c55e; color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,0.35); } .znf-passo.perda .znf-passo-no { background: linear-gradient(140deg, #dc2626, #b91c1c); border-color: #ef4444; color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,0.32); } .znf-passo.hoje .znf-passo-no { background: var(--brand-grad); border-color: var(--accent-light); color: #fff; animation: hojePulsa 2.2s ease-in-out infinite; } .znf-passo.hoje .znf-passo-dia { color: var(--accent-text); font-weight: 700; } @keyframes hojePulsa { 0%,100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 9px transparent; } } @media (prefers-reduced-motion: reduce) { .znf-passo.hoje .znf-passo-no { animation: none; } } /* ─── Duas colunas no desktop ─────────────────────────── */ .znf-ck-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .znf-ck-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* ─── Barra de resumo (compacta, no topo) ─────────────── */ .znf-ck-barra { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; } .znf-ck-mini { background: var(--bg3); border: 1px solid var(--border); border-radius: 11px; padding: 9px 10px; text-align: center; min-width: 0; } .znf-ck-mini.destaque { border-color: var(--accent-soft-border); background: var(--accent-soft); } .znf-ck-mini span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .znf-ck-mini strong { font-size: 14.5px; font-weight: 800; letter-spacing: -0.3px; } .znf-ck-mini .verde { color: var(--ok-text); } .znf-ck-mini .vermelho { color: var(--err-text); } /* ─── Calendário ──────────────────────────────────────── */ .znf-cal { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .znf-cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .znf-cal-topo strong { font-size: 14.5px; font-weight: 700; } .znf-cal-nav { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 1px solid var(--border); color: var(--text2); font-size: 18px; text-decoration: none; transition: all 0.15s; } .znf-cal-nav:hover { border-color: var(--accent); color: var(--text); } .znf-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .znf-cal-ds { text-align: center; font-size: 10px; font-weight: 700; color: var(--text3); padding-bottom: 4px; } .znf-cal-dia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--text3); background: var(--surface-1); border: 1px solid transparent; transition: transform 0.15s; } .znf-cal-dia { text-decoration: none; cursor: pointer; } .znf-cal-dia:hover { transform: scale(1.08); border-color: var(--accent); } .znf-cal-dia.sel { outline: 2px solid var(--accent); outline-offset: 1px; } .znf-cal-dia.futuro { opacity: 0.35; cursor: default; pointer-events: none; } .znf-cal-legenda span:last-child { color: var(--text3); font-size: 10.5px; } .znf-cal-dia.ganho { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-border); } .znf-cal-dia.perda { background: var(--err-soft); color: var(--err-text); border-color: var(--err-border); } .znf-cal-dia.hoje { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); font-weight: 800; } .znf-cal-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; color: var(--text3); } .znf-cal-legenda span { display: inline-flex; align-items: center; gap: 5px; } .znf-cal-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .znf-cal-legenda i.ganho { background: rgba(22,163,74,0.5); } .znf-cal-legenda i.perda { background: rgba(220,38,38,0.5); } .znf-cal-legenda i.vazio { background: var(--surface-2); } /* ─── Perfil ──────────────────────────────────────────── */ .znf-ck-perfil { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border); } .znf-ck-perfil-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .znf-ck-perfil-topo > span:last-child { font-size: 11.5px; color: var(--text3); } .znf-ck-perfil p { font-size: 13px; line-height: 1.6; color: var(--text2); margin: 0; } .znf-ck-perfil .obs { font-size: 11.5px; color: var(--text3); margin-top: 10px; } .znf-ck-config { padding: 22px; } .znf-ck-linha-rot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } /* alternador entre percentual e valor fixo */ .znf-ck-toggle { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--border); gap: 2px; } .znf-ck-toggle button { min-width: 38px; padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--text3); cursor: pointer; transition: all 0.18s; } .znf-ck-toggle button:hover { color: var(--text2); } .znf-ck-toggle button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.20); } .znf-ck-campo-tipo[hidden] { display: none; } .znf-ck-campo-tipo .znf-ck-money input { font-size: 17px; padding: 12px 0; } .znf-ck-campo-tipo .znf-form-hint { margin-top: 7px; } @media (max-width: 900px) { /* uma coluna só: o card em cima, calendário embaixo */ .znf-ck-grade { grid-template-columns: 1fr; } } @media (max-width: 640px) { .znf-ck { padding: calc(var(--nav-h) + 20px) 5% 32px; } .znf-trilha-wrap { margin-left: -5%; margin-right: -5%; padding-left: 5%; padding-right: 5%; } .znf-passo { min-width: 58px; } .znf-ck-card { padding: 18px 16px; border-radius: 16px; } .znf-ck-card-topo { gap: 8px; } .znf-ck-data { flex: 1 1 100%; } .znf-ck-voltar-hoje { margin-left: 0; } .znf-ck-meta { flex-direction: column; align-items: stretch; gap: 16px; } .znf-ck-anel { width: 118px; height: 118px; align-self: center; } .znf-ck-numeros { flex-direction: row; justify-content: space-between; gap: 10px; } .znf-ck-num strong { font-size: 14px; } .znf-ck-num span { font-size: 9.5px; } .znf-ck-stops { flex-direction: column; align-items: stretch; gap: 12px; } .znf-ck-stops-acoes { margin-left: 0; justify-content: space-between; } .znf-ck-stop-btn { flex: 1; justify-content: center; } .znf-ck-barra { grid-template-columns: repeat(3, 1fr); gap: 7px; } .znf-ck-mini.destaque { grid-column: span 3; } .znf-ck-mini { padding: 8px; } .znf-ck-mini strong { font-size: 13.5px; } .znf-ck-config { padding: 18px 16px; } } /* ─── BANNER DO TOPO ─────────────────────────────────────── */ .znf-hero-banner { width: 100%; /* ocupa a largura toda do bloco do topo */ max-width: 100%; margin-bottom: 18px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border2); box-shadow: var(--shadow); line-height: 0; animation: fadeInUp 0.5s ease both; } .znf-hero-banner img { display: block; width: 100%; height: 100%; /* preenche a largura e corta um pouco da altura, para não ficar quadrado. 2/1 é o limite: cortar mais comeria o selo LIVE em cima e o horário embaixo. */ aspect-ratio: 2 / 1; object-fit: cover; object-position: center; } @media (max-width: 640px) { .znf-hero-banner { max-width: 100%; margin-bottom: 14px; border-radius: 10px; } } /* prévia do banner no admin */ .znf-banner-atual { margin-bottom: 12px; padding: 12px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); } .znf-banner-atual img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); } .znf-banner-remover { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12.5px; color: var(--text2); cursor: pointer; } .znf-banner-remover input { width: 15px; height: 15px; accent-color: var(--red); cursor: pointer; } .znf-file { padding: 10px 12px; font-size: 13px; cursor: pointer; } .znf-file::file-selector-button { margin-right: 12px; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--border2); background: var(--surface-2); color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .znf-file::file-selector-button:hover { border-color: var(--accent); color: var(--text); } /* ─── MÓDULO "EM BREVE" ──────────────────────────────────── */ .znf-em-breve { position: relative; display: flex; align-items: center; gap: 15px; margin: 14px 18px 18px; padding: 18px 20px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%), var(--bg3); border: 1px solid var(--accent-soft-border); } /* brilho que passa devagar, dando sensação de "em andamento" */ .znf-em-breve-brilho { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, var(--accent-soft) 42%, transparent 62%); background-size: 260% 100%; animation: emBreveBrilho 4.5s ease-in-out infinite; } @keyframes emBreveBrilho { 0% { background-position: 130% 0; } 100% { background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { .znf-em-breve-brilho { animation: none; } } .znf-em-breve-icone { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); } .znf-em-breve-texto { position: relative; flex: 1; min-width: 0; } .znf-em-breve-titulo { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; color: var(--text); } .znf-em-breve-texto p { font-size: 12.5px; line-height: 1.55; color: var(--text3); margin: 0; } .znf-em-breve-selo { position: relative; flex-shrink: 0; align-self: flex-start; padding: 4px 11px; border-radius: 20px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; } @media (max-width: 640px) { .znf-em-breve { flex-wrap: wrap; gap: 12px; margin: 12px 12px 14px; padding: 15px 16px; } .znf-em-breve-icone { width: 38px; height: 38px; border-radius: 10px; } .znf-em-breve-texto { flex: 1 1 100%; order: 3; } .znf-em-breve-selo { margin-left: auto; } } /* ─── ADMIN: ALUNOS ──────────────────────────────────────── */ /* a lista precisa de mais largura que o padrao de formulario */ .znf-form-card.largo { max-width: 1100px; } .znf-card-titulo { font-size: 15px; font-weight: 700; margin-bottom: 14px; } .znf-tabela-wrap { overflow-x: auto; } .znf-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .znf-tabela th { text-align: left; font-weight: 600; color: var(--text3); padding: 8px 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .znf-tabela td { padding: 11px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; } .znf-tabela tr:last-child td { border-bottom: none; } .znf-tabela td.dim { color: var(--text3); } .znf-tabela td.nowrap, .znf-tabela th.nowrap { white-space: nowrap; } .znf-tabela.alunos { min-width: 620px; } .znf-linha-aluno { display: flex; align-items: center; gap: 10px; } .znf-linha-aluno .nome { font-weight: 600; display: flex; align-items: center; gap: 6px; } .znf-linha-aluno .email { font-size: 12px; color: var(--text3); } .znf-mini-progresso { display: flex; align-items: center; gap: 8px; } .znf-mini-progresso .barra { flex: 1; height: 5px; min-width: 60px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .znf-mini-progresso .fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); } .znf-mini-progresso span { font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; } .znf-ok { color: var(--ok-text); font-weight: 600; } .znf-nao { color: var(--text3); } .znf-aluno-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .znf-aluno-nome { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .znf-aluno-email { font-size: 13px; color: var(--text3); } .znf-aluno-progresso { margin-bottom: 18px; } .znf-aluno-progresso-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; font-size: 13px; color: var(--text3); } .znf-aluno-progresso-topo strong { color: var(--text2); font-weight: 600; } .znf-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .znf-dado { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .znf-dado span { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; } .znf-dado strong { font-size: 13.5px; font-weight: 600; color: var(--text2); overflow-wrap: anywhere; } .znf-dado strong.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } .znf-aceite-ok { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: var(--ok-soft); border: 1px solid var(--ok-border); color: var(--ok-text); } .znf-aceite-ok strong { font-size: 14px; } .znf-aceite-ok p { font-size: 12.5px; line-height: 1.55; color: var(--text2); margin-top: 4px; } .znf-ua-bruto { margin-top: 14px; } .znf-ua-bruto summary { font-size: 12.5px; color: var(--accent-text); cursor: pointer; font-weight: 600; } .znf-ua-bruto code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--border); font-size: 11.5px; line-height: 1.5; color: var(--text3); overflow-wrap: anywhere; } .znf-aviso-geo { margin-top: 16px; padding: 12px 14px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--border); font-size: 12px; line-height: 1.6; color: var(--text3); } .znf-aviso-geo strong { color: var(--text2); } /* ─── ACEITE DOS TERMOS (cadastro) ───────────────────────── */ .znf-check-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 11px 13px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.2s; } .znf-check-terms:hover { border-color: var(--accent-soft-border); } .znf-check-terms input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--border2); background: transparent; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s; } .znf-check-terms input:checked { background: var(--accent); border-color: var(--accent); } .znf-check-terms input:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); } .znf-check-terms input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .znf-check-terms span { font-size: 12.5px; line-height: 1.55; color: var(--text2); } .znf-check-terms strong { color: var(--text); font-weight: 600; } .znf-check-terms a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .znf-check-terms a:hover { color: var(--accent2); } [data-tema="dark"] .znf-check-terms a:hover { color: #fff; } /* ─── RODAPÉ + AVISO LEGAL ───────────────────────────────── */ .znf-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 32px 4% 40px; background: var(--bg2); } .znf-footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .znf-footer-logo { font-size: 20px; font-weight: 900; letter-spacing: -0.3px; } .znf-footer-copy { font-size: 13px; color: var(--text3); } .znf-disclaimer { border-top: 1px solid var(--border); padding-top: 18px; max-width: 900px; } .znf-disclaimer p { font-size: 11.5px; line-height: 1.65; color: var(--text3); margin-bottom: 9px; } .znf-disclaimer strong { color: var(--text2); font-weight: 600; } .znf-disclaimer-link { margin-bottom: 0 !important; } .znf-disclaimer-link a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .znf-disclaimer-link a:hover { color: var(--accent2); } [data-tema="dark"] .znf-disclaimer-link a:hover { color: #fff; } /* Página de termos */ .znf-legal { padding: calc(var(--nav-h) + 40px) 4% 50px; max-width: 760px; margin: 0 auto; animation: fadeInUp 0.5s ease both; } .znf-legal-tag { display: inline-block; padding: 4px 11px; border-radius: 20px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent-text); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; } .znf-legal-title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 900; letter-spacing: -1px; line-height: 1.12; margin-bottom: 8px; } .znf-legal-title .highlight { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .znf-legal-updated { font-size: 12.5px; color: var(--text3); margin-bottom: 26px; } .znf-legal h2 { font-size: 16px; font-weight: 700; margin: 30px 0 10px; padding-left: 11px; border-left: 3px solid var(--accent); line-height: 1.3; } .znf-legal p, .znf-legal li { font-size: 14px; line-height: 1.7; color: var(--text2); margin-bottom: 11px; } .znf-legal ul { padding-left: 20px; margin-bottom: 14px; } .znf-legal li { margin-bottom: 6px; } .znf-legal strong { color: var(--text); font-weight: 600; } .znf-legal-alert { background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 10px; padding: 16px 18px; margin: 22px 0; } .znf-legal-alert p:last-child { margin-bottom: 0; } .znf-legal-alert.warn { background: var(--err-soft); border-color: var(--err-border); } .znf-legal-alert.warn strong { color: var(--err-text); } .znf-legal-actions { margin-top: 34px; } @media (max-width: 640px) { .znf-footer { padding: 26px 6% 32px; } .znf-legal { padding: calc(var(--nav-h) + 24px) 6% 36px; } .znf-legal h2 { font-size: 15px; } .znf-legal p, .znf-legal li { font-size: 13.5px; } } /* ─── ACESSO COMPLETO ────────────────────────────────────── */ .znf-access { padding: calc(var(--nav-h) + 40px) 4% 40px; max-width: 720px; margin: 0 auto; text-align: center; animation: fadeInUp 0.6s ease both; } .znf-access-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; } .znf-access-badge.unlocked { background: var(--ok-soft); border: 1px solid var(--ok-border); color: var(--ok-text); } .znf-access-badge.locked { background: var(--surface-1); border: 1px solid var(--border2); color: var(--text2); } .znf-access-title { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px; } .znf-access-title .highlight { background: var(--brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .znf-access-sub { font-size: 14.5px; color: var(--text2); line-height: 1.6; max-width: 520px; margin: 0 auto 28px; } .znf-access-sub strong { color: var(--text); font-weight: 600; } .znf-access-card { background: var(--bg3); border: 1px solid var(--accent-soft-border); border-radius: 14px; padding: 32px 26px; box-shadow: var(--shadow); } .znf-access-card.locked { border-color: var(--border2); } .znf-access-card-icon { font-size: 40px; line-height: 1; margin-bottom: 14px; } .znf-access-card-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .znf-access-card-text { font-size: 14px; color: var(--text3); line-height: 1.6; max-width: 430px; margin: 0 auto; } .znf-access-soon { margin-top: 26px; display: flex; justify-content: center; } .znf-btn-soon { background: var(--surface-1); border: 1px dashed var(--border2); color: var(--text3); cursor: not-allowed; opacity: 0.85; } .znf-btn-soon:hover { transform: none; } @media (max-width: 640px) { .znf-access { padding: calc(var(--nav-h) + 26px) 6% 30px; } .znf-access-card { padding: 26px 20px; } .znf-access-soon .znf-btn { width: 100%; } } /* ─── MODULES / LESSONS ──────────────────────────────────── */ .znf-modules { padding: 40px 4% 60px; } .znf-module-block { margin-bottom: 8px; } .znf-module-header { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: var(--bg3); border-radius: 10px; cursor: pointer; border: 1px solid var(--border); transition: background 0.2s, border-color 0.2s; user-select: none; } .znf-module-header:hover { background: var(--bg4); border-color: var(--border); } .znf-module-header.open { background: var(--bg4); border-color: var(--accent-soft-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .znf-module-num { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent-text); flex-shrink: 0; } .znf-module-info { flex: 1; min-width: 0; } .znf-module-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; } .znf-module-sub { font-size: 13px; color: var(--text3); } .znf-module-progress-bar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-top: 8px; max-width: 240px; } .znf-module-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; } .znf-module-progress-badge { font-size: 12px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); padding: 4px 11px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; } .znf-module-chevron { color: var(--text3); transition: transform 0.3s ease; flex-shrink: 0; } .znf-module-header.open .znf-module-chevron { transform: rotate(180deg); } .znf-module-body { background: var(--bg2); border: 1px solid var(--accent-soft-border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; max-height: 0; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1); } .znf-module-body.open { max-height: 2000px; } .znf-lesson-row { display: flex; align-items: center; gap: 14px; padding: 14px 24px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; } .znf-lesson-row:last-child { border-bottom: none; } /* quando a linha mostra a thumbnail, alinha os controles com o título */ .znf-lesson-row:has(.znf-lesson-next-box.is-next) { align-items: flex-start; } .znf-lesson-row:hover { background: var(--accent-soft); } .znf-lesson-play { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.2s; color: var(--accent-text); } .znf-lesson-row:hover .znf-lesson-play { background: var(--accent); border-color: var(--accent); color: white; transform: scale(1.1); } .znf-lesson-info { flex: 1; min-width: 0; } .znf-lesson-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; } .znf-lesson-desc { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .znf-lesson-duration { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; background: var(--surface-1); padding: 3px 8px; border-radius: 4px; flex-shrink: 0; } /* Thumbnail + materiais: só na próxima aula a assistir */ .znf-lesson-next-box { display: none; } .znf-lesson-next-box.is-next { display: block; margin-top: 10px; /* maior para a capa preencher melhor; no mobile vira 100% */ width: 100%; max-width: 640px; border-radius: 10px; overflow: hidden; border: 1px solid var(--accent-soft-border); box-shadow: var(--shadow); animation: fadeInUp 0.4s ease both; } .znf-lesson-thumb { position: relative; display: block; line-height: 0; } .znf-lesson-thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .znf-lesson-thumb-tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 20px; background: rgba(124,58,237,0.92); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.4; text-transform: uppercase; } /* Materiais da aula, logo abaixo da thumbnail */ /* link longo trunca com reticências em vez de quebrar no meio da palavra */ .znf-lesson-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 26px; height: 26px; min-width: 26px; border-radius: 50%; border: 1.5px solid var(--border2); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; color: transparent; padding: 0; margin: 0; font: inherit; line-height: 1; outline: none; box-shadow: none; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; } .znf-lesson-check:hover { border-color: var(--accent); transform: scale(1.08); } .znf-lesson-check.completed { background: var(--accent); border-color: var(--accent); color: #fff; } /* ─── VIDEO MODAL ────────────────────────────────────────── */ .znf-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .znf-modal.open { opacity: 1; pointer-events: auto; } .znf-modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .znf-modal-box { position: relative; z-index: 1; background: var(--elevated); border-radius: 16px; width: 100%; max-width: 960px; max-height: 92vh; /* rola quando vídeo + descrição não cabem na tela */ overflow-x: hidden; overflow-y: auto; box-shadow: var(--shadow-lg), 0 0 0 1px var(--border2); transform: scale(0.94) translateY(24px); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .znf-modal.open .znf-modal-box { transform: scale(1) translateY(0); } .znf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--elevated); position: sticky; top: 0; z-index: 1; } .znf-modal-title { font-size: 16px; font-weight: 700; } .znf-modal-close { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text2); cursor: pointer; transition: all 0.2s; font-size: 18px; line-height: 1; } .znf-modal-close:hover { background: var(--surface-3); color: var(--text); } .znf-modal-video { aspect-ratio: 16/9; background: #000; } .znf-modal-video iframe { width: 100%; height: 100%; display: block; } .znf-modal-desc { display: none; padding: 16px 20px 18px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6; color: var(--text2); } .znf-modal-desc a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .znf-modal-desc a:hover { color: var(--accent2); } .znf-modal-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .znf-modal-next { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; background: var(--accent); border: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.2s; white-space: nowrap; } .znf-modal-next:hover { background: var(--accent2); transform: scale(1.03); } .znf-modal-next-tooltip { position: absolute; /* abaixo do botão: acima ficava cortado pelo overflow do modal */ top: calc(100% + 10px); right: 0; z-index: 5; background: var(--elevated); border: 1px solid var(--border2); padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text); white-space: normal; text-align: left; line-height: 1.35; width: max-content; max-width: min(300px, 70vw); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: var(--shadow-lg); } .znf-modal-next-tooltip::before { content: 'Próxima:'; display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 3px; } .znf-modal-next:hover .znf-modal-next-tooltip, .znf-modal-next:focus-visible .znf-modal-next-tooltip { opacity: 1; transform: translateY(0); } .znf-modal-complete { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border2); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .znf-modal-complete:hover { border-color: var(--accent); color: var(--text); } .znf-modal-complete.completed { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok-text); } /* ─── AUTH PAGES ─────────────────────────────────────────── */ /* ─── LOGIN / CADASTRO ─────────────────────────────────────── Tela dividida: formulário à esquerda, foto à direita. No celular a foto sai e sobra só o formulário, que é o que interessa lá. */ .znf-auth-body { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--bg); overflow-x: hidden; } @media (min-width: 1000px) { .znf-auth-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .znf-auth-painel { display: flex; align-items: center; justify-content: center; padding: 12px 24px; } .znf-auth-card { position: relative; z-index: 1; width: 100%; max-width: 400px; background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; } .znf-auth-logo { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; text-decoration: none; color: var(--text); margin-bottom: 6px; } .znf-auth-logo .accent { color: var(--accent-text); } .znf-auth-subtitle { color: var(--text2); font-size: 14px; margin-bottom: 18px; } /* coluna da direita */ .znf-auth-foto { display: none; position: relative; background: var(--bg2); border-left: 1px solid var(--border); } @media (min-width: 1000px) { .znf-auth-foto { display: block; } } .znf-auth-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; } /* camada preta por cima da foto inteira */ .znf-auth-foto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); } .znf-auth-foto-texto { position: absolute; left: 48px; right: 48px; bottom: 48px; z-index: 1; color: #fff; } .znf-auth-foto-nome { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; } .znf-link-forte { color: var(--accent-text); font-weight: 600; text-decoration: none; } .znf-link-forte:hover { color: var(--text); text-decoration: underline; } .znf-form-group { margin-bottom: 11px; } .znf-form-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; } .znf-input { width: 100%; background: var(--surface-1); border: 1px solid var(--border2); color: var(--text); padding: 11px 15px; border-radius: 9px; font-size: 15px; font-family: inherit; outline: none; transition: all 0.2s ease; -webkit-appearance: none; } .znf-input:focus { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-glow); } .znf-input::placeholder { color: var(--text3); } .znf-input:-webkit-autofill, .znf-input:-webkit-autofill:hover, .znf-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--bg3) inset; -webkit-text-fill-color: var(--text); } .znf-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--text3); font-size: 12px; } .znf-divider::before, .znf-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .znf-alert { padding: 12px 16px; border-radius: 9px; font-size: 14px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; } .znf-alert-error { background: var(--err-soft); border: 1px solid var(--err-border); color: var(--err-text); } .znf-alert-success { background: var(--ok-soft); border: 1px solid var(--ok-border); color: var(--ok-text); } .znf-alert-info { display: block; /* o alerta padrão é flex e quebraria o texto em colunas */ background: var(--info-soft); border: 1px solid var(--info-border); color: var(--info-text); line-height: 1.5; max-width: 900px; } .znf-alert-info strong { font-weight: 700; } /* ─── ADMIN ──────────────────────────────────────────────── */ .znf-admin-layout { padding-top: var(--nav-h); min-height: 100vh; } .znf-admin-header { padding: 36px 4% 28px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .znf-admin-title { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; } .znf-admin-sub { color: var(--text2); font-size: 14px; margin-top: 4px; } .znf-admin-body { padding: 36px 4%; } .znf-admin-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .znf-admin-card:hover { border-color: var(--border2); box-shadow: var(--shadow); } .znf-admin-card-img { width: 100%; height: 160px; object-fit: cover; display: block; } .znf-admin-card-placeholder { width: 100%; height: 160px; background: linear-gradient(135deg, #2d1b69, #1e1b4b); display: flex; align-items: center; justify-content: center; font-size: 36px; } .znf-admin-card-body { padding: 18px; } .znf-admin-card-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; line-height: 1.3; } .znf-admin-card-actions { display: flex; gap: 8px; } .znf-action-btn { flex: 1; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; border: none; cursor: pointer; font-family: inherit; transition: all 0.18s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .znf-action-edit { background: var(--info-soft); color: var(--info-text); border: 1px solid var(--info-border); } .znf-action-edit:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: 0 4px 16px rgba(59,130,246,0.3); } .znf-action-manage { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); } .znf-action-manage:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.20); } .znf-action-delete { background: var(--err-soft); color: var(--err-text); border: 1px solid var(--err-border); flex: 0; padding: 8px 12px; } .znf-action-delete:hover { background: #e50914; color: #fff; border-color: #e50914; box-shadow: 0 4px 16px rgba(229,9,20,0.3); } /* ADMIN FORM */ .znf-form-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; padding: 32px; max-width: 700px; } .znf-form-card .znf-input { background: var(--bg4); border-color: var(--border2); } .znf-form-card .znf-input:focus { border-color: var(--accent); background: var(--accent-soft); } .znf-form-card textarea.znf-input { resize: vertical; min-height: 100px; } .znf-form-hint { font-size: 12px; color: var(--text3); margin-top: 6px; } .znf-form-actions { display: flex; gap: 12px; margin-top: 28px; } /* ADMIN LIST ITEMS */ .znf-list-item { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; transition: border-color 0.2s; } .znf-list-item:hover { border-color: var(--border2); } .znf-list-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .znf-lesson-url { font-size: 12px; color: var(--text3); font-family: monospace; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; } /* BREADCRUMB */ .znf-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text3); margin-bottom: 6px; } .znf-breadcrumb a { color: var(--text3); text-decoration: none; transition: color 0.2s; } .znf-breadcrumb a:hover { color: var(--accent-text); } .znf-breadcrumb-sep { color: var(--border2); } /* ─── UTILITIES ──────────────────────────────────────────── */ .znf-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .znf-badge-purple { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); } .znf-badge-blue { background: var(--info-soft); color: var(--info-text); border: 1px solid var(--info-border); } .znf-badge-vermelho { background: var(--err-soft); color: var(--err-text); border: 1px solid var(--err-border); } .znf-btn-perigo { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #fff; border: none; } .znf-btn-perigo:hover { filter: brightness(1.1); } .znf-card-banido { border-color: var(--err-border) !important; } .znf-badge-verde { background: var(--ok-soft); color: var(--ok-text); border: 1px solid var(--ok-border); } .znf-badge-cinza { background: var(--bg4); color: var(--text3); border: 1px solid var(--border2); } /* ─── Admin: liberação do Check-up ───────────────────────── */ .znf-ck-lib-form { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 14px; align-items: end; } .znf-ck-lib-form select.znf-input { cursor: pointer; } .znf-check-inline { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--text2); background: var(--bg4); border: 1px solid var(--border2); } .znf-check-inline input { accent-color: var(--accent); cursor: pointer; } .znf-ck-lib-form .znf-btn { height: 42px; } .znf-ck-lib-nome { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .znf-ck-lib-nome .znf-badge { font-size: 10px; padding: 2px 8px; } .znf-ck-lib-mail { font-size: 12px; color: var(--text3); margin-top: 2px; } .znf-ck-lib-obs { font-size: 11px; color: var(--text3); margin-top: 3px; font-style: italic; } .znf-ck-lib-data { color: var(--text3); white-space: nowrap; } .znf-ck-lib-chips { display: flex; flex-wrap: wrap; gap: 8px; } .znf-ck-lib-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text2); background: var(--bg4); border: 1px solid var(--border2); transition: background 0.18s, color 0.18s, border-color 0.18s; } .znf-ck-lib-chip:hover { color: var(--ok-text); background: var(--ok-soft); border-color: var(--ok-border); } @media (max-width: 1000px) { .znf-ck-lib-form { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .znf-ck-lib-form { grid-template-columns: 1fr; } } /* ─── Admin: check-up do aluno ───────────────────────────── */ .znf-adm-ck-resumo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; } .znf-adm-ck-item { background: var(--bg4); border: 1px solid var(--border); border-radius: 11px; padding: 11px 10px; text-align: center; } .znf-adm-ck-item span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text3); margin-bottom: 5px; } .znf-adm-ck-item strong { font-size: 15px; font-weight: 800; color: var(--text); } .znf-adm-ck-item strong.verde { color: var(--ok-text); } .znf-adm-ck-item strong.vermelho { color: var(--err-text); } .znf-adm-ck-calnav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; font-size: 14px; color: var(--text); } .znf-adm-ck-seta { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; font-size: 17px; color: var(--text2); background: var(--bg4); border: 1px solid var(--border2); } .znf-adm-ck-seta:hover { color: var(--accent-text); border-color: var(--accent-soft-border); } .znf-adm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .znf-adm-cal-cab { text-align: center; font-size: 10px; font-weight: 700; color: var(--text3); padding-bottom: 4px; } .znf-adm-cal-vazio { min-height: 52px; } .znf-adm-cal-dia { min-height: 52px; border-radius: 9px; padding: 5px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--bg4); border: 1px solid var(--border); } .znf-adm-cal-dia.pos { background: var(--ok-soft); border-color: var(--ok-border); } .znf-adm-cal-dia.neg { background: var(--err-soft); border-color: var(--err-border); } .znf-adm-cal-num { font-size: 11px; font-weight: 700; color: var(--text3); } .znf-adm-cal-dia.tem .znf-adm-cal-num { color: var(--text2); } .znf-adm-cal-val { font-size: 10.5px; font-weight: 800; line-height: 1.1; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; } .znf-adm-cal-dia.pos .znf-adm-cal-val { color: var(--ok-text); } .znf-adm-cal-dia.neg .znf-adm-cal-val { color: var(--err-text); } .znf-adm-cal-dia.tem .znf-adm-cal-val { color: var(--text3); } .znf-adm-cal-stops { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 20px; color: var(--err-text); background: var(--err-soft); border: 1px solid var(--err-border); } @media (max-width: 780px) { .znf-adm-ck-resumo { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .znf-adm-ck-resumo { grid-template-columns: repeat(2, 1fr); } .znf-adm-cal-dia, .znf-adm-cal-vazio { min-height: 44px; } /* não cabe o valor em 7 colunas: fica a cor do dia, e os números na tabela abaixo */ .znf-adm-cal-val { display: none; } .znf-adm-cal-num { font-size: 12px; } } /* ─── Aviso de primeiro acesso ───────────────────────────── */ .znf-aviso-fundo { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(5px); animation: avisoEntra 0.3s ease both; } .znf-aviso-fundo.saindo { animation: avisoSai 0.26s ease both; } @keyframes avisoEntra { from { opacity: 0; } to { opacity: 1; } } @keyframes avisoSai { to { opacity: 0; } } .znf-aviso-card { width: 100%; max-width: 440px; max-height: calc(100dvh - 44px); overflow-y: auto; padding: 30px 26px 26px; text-align: center; border-radius: 18px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); animation: avisoSobe 0.34s cubic-bezier(0.2, 1.1, 0.4, 1) both; } @keyframes avisoSobe { from { transform: scale(0.9) translateY(16px); } to { transform: none; } } .znf-aviso-icone { width: 54px; height: 54px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: #f59e0b; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.3); } .znf-aviso-titulo { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); margin-bottom: 12px; } .znf-aviso-texto { font-size: 14px; line-height: 1.6; color: var(--text2); margin-bottom: 24px; text-align: left; } .znf-aviso-texto strong { color: var(--text); font-weight: 700; } .znf-aviso-btn { width: 100%; justify-content: center; } @media (max-width: 480px) { .znf-aviso-card { padding: 26px 20px 22px; border-radius: 16px; } .znf-aviso-titulo { font-size: 18px; } .znf-aviso-texto { font-size: 13.5px; } } /* ─── Admin: setas para reordenar módulos ────────────────── */ .znf-ordem-col { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } .znf-ordem-btn { width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: var(--text3); background: var(--bg4); border: 1px solid var(--border2); transition: color 0.16s, background 0.16s, border-color 0.16s; } .znf-ordem-btn:hover:not(:disabled) { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-soft-border); } .znf-ordem-btn:active:not(:disabled) { transform: scale(0.9); } .znf-ordem-btn:disabled { opacity: 0.28; cursor: default; } /* ─── Admin: aviso de saldo de SMS ───────────────────────── */ .znf-saldo-aviso { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 20px; border-radius: 11px; max-width: 900px; border: 1px solid var(--border); background: var(--bg4); } .znf-saldo-icone { flex-shrink: 0; display: flex; } .znf-saldo-texto { flex: 1; min-width: 0; } .znf-saldo-texto strong { display: block; font-size: 14px; font-weight: 700; } .znf-saldo-texto span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text3); margin-top: 3px; } .znf-saldo-aviso.nivel-ok { color: var(--ok-text); background: var(--ok-soft); border-color: var(--ok-border); } .znf-saldo-aviso.nivel-baixo { color: #f59e0b; background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.32); } .znf-saldo-aviso.nivel-critico { color: var(--err-text); background: var(--err-soft); border-color: var(--err-border); } @media (max-width: 640px) { .znf-saldo-aviso { flex-wrap: wrap; } .znf-saldo-aviso .znf-btn { width: 100%; justify-content: center; } } /* ─── Tela de acesso removido ────────────────────────────── */ .znf-banido { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .znf-banido-card { width: 100%; max-width: 460px; padding: 34px 28px 28px; text-align: center; border-radius: 18px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4); } .znf-banido-icone { width: 58px; height: 58px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--err-text); background: var(--err-soft); border: 1px solid var(--err-border); } .znf-banido-card h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); margin-bottom: 18px; } .znf-banido-motivo { text-align: left; padding: 14px 16px; margin-bottom: 18px; border-radius: 11px; background: var(--bg4); border: 1px solid var(--border); } .znf-banido-motivo span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; } .znf-banido-motivo p { font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: break-word; } .znf-banido-data { font-size: 12.5px; line-height: 1.55; color: var(--text3); margin-bottom: 20px; } .znf-banido-card .znf-btn { width: 100%; justify-content: center; } .znf-banido-sair { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--text3); text-decoration: none; } .znf-banido-sair:hover { color: var(--text2); text-decoration: underline; } /* ─── ANIMATIONS ─────────────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .znf-animate { animation: fadeInUp 0.6s ease both; } .znf-animate-delay-1 { animation-delay: 0.1s; } .znf-animate-delay-2 { animation-delay: 0.2s; } .znf-animate-delay-3 { animation-delay: 0.3s; } .znf-animate-delay-4 { animation-delay: 0.4s; } /* sem entrada escalonada: a lista aparece pronta */ .znf-stagger > * { opacity: 1; } /* ─── RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 640px) { .znf-auth-painel { padding: 40px 20px; } .znf-form-actions { flex-direction: column; } .znf-admin-header { flex-direction: column; align-items: flex-start; } .znf-hero { padding: calc(var(--nav-h) + 16px) 6% 24px; } /* CTA e live lado a lado, compactos; o resto (admin) vai para baixo */ .znf-hero-actions { gap: 8px; } .znf-hero-actions .znf-btn { flex: 1 1 0; min-width: 0; padding: 11px 10px; font-size: 13.5px; gap: 6px; white-space: nowrap; } .znf-hero-actions .znf-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* estes ocupam a linha de baixo inteira: com tres botoes na mesma linha eles encolhiam e o texto (nowrap) vazava para fora da borda */ .znf-hero-actions .znf-btn-ghost, .znf-hero-actions .znf-btn-comunidade { flex-basis: 100%; } /* Navbar compacta: logo menor, textos viram só ícones */ .znf-nav { padding: 0 14px; gap: 8px; } .znf-nav-logo { font-size: 16px; letter-spacing: -0.3px; } .znf-nav-links { gap: 2px; } .znf-nav-social { gap: 2px; margin-right: 4px; } .znf-nav-social a { width: 32px; height: 32px; background: none; border: none; } .znf-user-chip { padding: 0; background: none; border: none; } .znf-user-name { display: none; } .znf-nav-link { padding: 0; width: 32px; height: 32px; justify-content: center; gap: 0; } .znf-nav-link span, .znf-nav-link { font-size: 0; } .znf-nav-link svg { width: 17px; height: 17px; flex-shrink: 0; } .znf-lesson-row { gap: 10px; padding: 12px 14px; } .znf-lesson-desc { display: none; } /* no celular a thumbnail usa toda a largura disponível da aula */ .znf-lesson-next-box.is-next { /* 100% aqui seria 100% da coluna de 235px e travaria o crescimento */ max-width: none; margin-top: 9px; /* * No celular a capa ficava presa na coluna do meio (235px de 315 uteis), * espremida entre o botao de play e o circulo de concluido. As margens * negativas devolvem esse espaco: 44px do play + espacamento a esquerda, * 36px do circulo + espacamento a direita. */ margin-left: -44px; margin-right: -36px; /* com width:100% a largura ja estava resolvida em 235px e as margens so deslocavam a caixa; com auto ela cresce e ocupa o espaco devolvido */ width: auto; } .znf-lesson-title { font-size: 14.5px; } /* Curso: header e módulos mais compactos */ .znf-course-header { min-height: 0; padding: calc(var(--nav-h) + 14px) 5% 18px; } .znf-modules { padding: 22px 4% 40px; } .znf-module-header { padding: 14px 16px; gap: 10px; } .znf-module-num { width: 30px; height: 30px; font-size: 12px; } .znf-module-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .znf-module-progress-badge { padding: 3px 8px; font-size: 11px; } /* Modal: título numa linha, botões na linha de baixo */ .znf-modal { padding: 10px; } .znf-modal-header { flex-wrap: wrap; gap: 10px; padding: 12px 14px; } .znf-modal-title { font-size: 14px; line-height: 1.3; flex: 1 1 100%; } .znf-modal-header-actions { flex: 1 1 100%; justify-content: flex-end; } .znf-modal-complete, .znf-modal-next { font-size: 12px; padding: 7px 12px; } /* rótulos curtos para os 3 botões caberem na largura do celular */ #completeLessonLabel, .znf-modal-next-label { display: none; } .znf-modal-complete::after { content: 'Concluir'; } .znf-modal-complete.completed::after { content: 'Concluída'; } .znf-modal-next::before { content: 'Próxima'; } /* ::before para ficar antes da seta */ .znf-modal-close { width: 32px; height: 32px; flex-shrink: 0; } .znf-modal-next-tooltip { max-width: calc(100vw - 56px); } .znf-modal-desc { padding: 14px 16px 16px; font-size: 13.5px; } }