/* ═══════════════════════════════════════════════════════════════════════════ JaE — Design Tokens & Global Styles Cores definidas no espaço oklch (perceptualmente uniforme). Hex no MAUI (App.xaml) são aproximações sRGB das mesmas variáveis. ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: dark; /* ── Brand ─────────────────────────────────────────────────────────────── */ --jae-green: oklch(0.76 0.15 176); --jae-green-dim: oklch(0.60 0.12 176); --jae-green-glow: oklch(0.76 0.15 176 / 0.55); --jae-green-subtle: oklch(0.76 0.15 176 / 0.12); /* ── Fundos ─────────────────────────────────────────────────────────────── */ --jae-bg: oklch(0.07 0.01 150); --jae-bg2: oklch(0.10 0.015 150); --jae-glass-bg: oklch(1 0 0 / 0.055); --jae-glass-border: oklch(1 0 0 / 0.10); /* ── Texto ──────────────────────────────────────────────────────────────── */ --jae-text: oklch(0.97 0.005 150); --jae-text-muted: oklch(0.65 0.01 150); /* ── Inputs ─────────────────────────────────────────────────────────────── */ --jae-input-bg: oklch(1 0 0 / 0.06); --jae-input-border: oklch(1 0 0 / 0.12); --jae-input-focus: oklch(0.76 0.15 176 / 0.25); /* ── Status ─────────────────────────────────────────────────────────────── */ --jae-error: oklch(0.65 0.22 25); --jae-success: oklch(0.78 0.20 145); --jae-warning: oklch(0.75 0.18 80); /* ── CTA ─────────────────────────────────────────────────────────────────── */ --jae-cta-text: oklch(0.08 0.02 150); /* ── Tipografia ─────────────────────────────────────────────────────────── */ --font-brand: 'Syne', sans-serif; --font-body: 'Inter', sans-serif; /* ── Escala de fontes fluida (clamp: mínimo, fluido, máximo) ──────────── Escala entre ~800px e ~1400px de largura de viewport. Em MAUI a viewport = janela do app; em web = janela do browser. */ --jae-fs-xs: clamp(12px, 0.4vw + 8.8px, 14px); /* rótulos, badges */ --jae-fs-sm: clamp(13px, 0.4vw + 9.8px, 15px); /* texto secundário */ --jae-fs-base: clamp(14px, 0.4vw + 10.8px, 16px); /* texto padrão */ --jae-fs-md: clamp(15px, 0.5vw + 11px, 17px); /* labels, botões */ --jae-fs-lg: clamp(18px, 0.8vw + 11.6px, 22px); /* subtítulos */ --jae-fs-xl: clamp(20px, 1vw + 12px, 26px); /* títulos */ --jae-fs-2xl: clamp(26px, 1.5vw + 14px, 36px); /* títulos grandes */ } /* ═══════════════════════════════════════════════════════════════════════════ Light Theme (classe .jae-light no ) ═══════════════════════════════════════════════════════════════════════════ */ .jae-light { color-scheme: light; --jae-green: oklch(0.52 0.18 148); --jae-green-dim: oklch(0.42 0.15 148); --jae-green-glow: oklch(0.52 0.18 148 / 0.30); --jae-green-subtle: oklch(0.52 0.18 148 / 0.10); --jae-bg: oklch(0.96 0.005 100); --jae-bg2: oklch(0.93 0.005 100); --jae-glass-bg: oklch(0 0 0 / 0.035); --jae-glass-border: oklch(0 0 0 / 0.08); --jae-text: oklch(0.12 0.01 150); --jae-text-muted: oklch(0.42 0.01 150); --jae-input-bg: oklch(0 0 0 / 0.04); --jae-input-border: oklch(0 0 0 / 0.12); --jae-input-focus: oklch(0.52 0.18 148 / 0.20); --jae-error: oklch(0.55 0.22 25); --jae-success: oklch(0.55 0.20 145); --jae-warning: oklch(0.60 0.18 80); --jae-cta-text: oklch(0.97 0.005 150); } html, body { width: 100%; height: 100%; font-family: var(--font-body); background-color: var(--jae-bg); color: var(--jae-text); overflow-x: hidden; -webkit-overflow-scrolling: touch; user-select: none; -webkit-user-select: none; } /* ── Splash de carregamento ─────────────────────────────────────────────── */ .jae-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: var(--font-body); color: var(--jae-text-muted); background: var(--jae-bg); } .jae-splash-logo { width: 72px; height: auto; opacity: 0; animation: jaeFadeIn 0.6s ease-out 0.1s forwards; } .jae-splash-spinner { width: 32px; height: 32px; border: 3px solid var(--jae-glass-border); border-top-color: var(--jae-green); border-radius: 50%; opacity: 0; animation: jaeFadeIn 0.4s ease-out 0.4s forwards, jaeSpin 0.8s linear 0.4s infinite; } .jae-splash p { font-size: var(--jae-fs-base); letter-spacing: 0.04em; opacity: 0; animation: jaeFadeIn 0.4s ease-out 0.6s forwards; } @keyframes jaeSpin { to { transform: rotate(360deg); } } @keyframes jaeFadeIn { to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ LOGIN — PÁGINA COMPLETA ═══════════════════════════════════════════════════════════════════════════ */ .jae-login-root { position: relative; width: 100%; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } /* ── Canvas de fundo ────────────────────────────────────────────────────── */ .jae-bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .jae-light-main { position: absolute; width: 900px; height: 700px; top: -180px; left: -120px; background: radial-gradient(ellipse at 40% 40%, oklch(0.78 0.30 145 / 0.38) 0%, oklch(0.72 0.28 145 / 0.18) 30%, transparent 70%); filter: blur(12px); animation: jae-breathe 8s ease-in-out infinite; } .jae-light-secondary { position: absolute; width: 600px; height: 500px; bottom: -100px; right: 60px; background: radial-gradient(ellipse at 60% 60%, oklch(0.78 0.30 145 / 0.22) 0%, oklch(0.70 0.26 145 / 0.08) 40%, transparent 70%); filter: blur(8px); animation: jae-breathe 8s ease-in-out 3s infinite reverse; } .jae-light-dot { position: absolute; width: 280px; height: 280px; top: 38%; left: 20%; background: radial-gradient(circle, oklch(0.86 0.28 150 / 0.18) 0%, transparent 60%); filter: blur(4px); animation: jae-breathe 6s ease-in-out 1.5s infinite; } .jae-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%); } @keyframes jae-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(1.08); } } .jae-logo-img { height: 120px; width: 120px; display: block; } .jae-sidebar-logo-img { height: 36px; width: auto; } .jae-header-brand-img { height: 36px; width: auto; } .jae-landing-logo-img { height: 40px; width: auto; } .jae-phone-logo-img { height: 14px; width: auto; vertical-align: middle; } .jae-landing-footer-logo-img { height: 32px; width: auto; } .jae-copyright-logo-img { height: 18px; width: auto; vertical-align: middle; } /* ── Painel de marca (esquerda) ─────────────────────────────────────────── */ .jae-brand-panel { position: relative; z-index: 1; padding: 64px; display: flex; flex-direction: column; gap: 32px; } .jae-logo { font-family: var(--font-brand); font-size: 52px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; color: var(--jae-text); display: flex; align-items: baseline; gap: 4px; } .jae-logo-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--jae-green); margin-left: 2px; box-shadow: 0 0 14px 4px var(--jae-green-glow); flex-shrink: 0; align-self: center; margin-bottom: 6px; } .jae-tagline { font-family: var(--font-brand); font-size: 42px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; color: var(--jae-text); max-width: 420px; text-wrap: pretty; } .jae-tagline em { font-style: normal; color: var(--jae-green); text-shadow: 0 0 24px var(--jae-green-glow); } .jae-brand-desc { font-size: var(--jae-fs-md); font-weight: 300; color: var(--jae-text-muted); line-height: 1.7; max-width: 380px; text-wrap: pretty; } .jae-pills { display: flex; gap: 10px; flex-wrap: wrap; } .jae-pill { display: flex; align-items: center; gap: 6px; font-size: var(--jae-fs-xs); font-weight: 500; letter-spacing: 0.04em; color: var(--jae-text-muted); padding: 6px 14px; border: 1px solid var(--jae-glass-border); border-radius: 100px; background: var(--jae-glass-bg); } .jae-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--jae-green); box-shadow: 0 0 6px 2px var(--jae-green-glow); } /* ── Painel do formulário (direita) ─────────────────────────────────────── */ .jae-form-panel { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 60px 64px; } /* ── Card de vidro ──────────────────────────────────────────────────────── */ .jae-glass-card { width: 100%; max-width: 420px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 24px; padding: 48px 44px; backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); box-shadow: 0 0 0 1px oklch(0.82 0.26 145 / 0.06), 0 32px 80px oklch(0 0 0 / 0.5), inset 0 1px 0 oklch(1 0 0 / 0.08); position: relative; overflow: hidden; } /* Linha de brilho no topo do card */ .jae-glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, oklch(0.82 0.26 145 / 0.4) 50%, transparent 100%); } .jae-card-header { margin-bottom: 36px; } .jae-card-title { font-family: var(--font-brand); font-size: var(--jae-fs-2xl); font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 8px; color: var(--jae-text); } .jae-card-sub { font-size: var(--jae-fs-base); color: var(--jae-text-muted); font-weight: 300; } /* ── Formulário ─────────────────────────────────────────────────────────── */ .jae-form { display: flex; flex-direction: column; gap: 18px; } .jae-field { display: flex; flex-direction: column; gap: 7px; } .jae-field label { font-size: var(--jae-fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); } .jae-input-wrap { position: relative; display: flex; align-items: center; } /* Aplica ao InputText e ao raw */ .jae-input, .jae-input.valid, .jae-input.invalid { width: 100%; padding: 13px 44px 13px 16px; background: var(--jae-input-bg); border: 1px solid var(--jae-input-border); border-radius: 12px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-base); font-weight: 400; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; /* Remove aparência nativa dos browsers */ -webkit-appearance: none; appearance: none; } .jae-input::placeholder { color: oklch(0.45 0.01 150); } /* Ícone nativo (calendário/relógio) dos inputs date/time — o navegador ignora as cores do tema, então inverte manualmente fora do light theme. */ .jae-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } .jae-light .jae-input::-webkit-calendar-picker-indicator { filter: none; } .jae-input:focus { border-color: var(--jae-green-dim); box-shadow: 0 0 0 3px var(--jae-input-focus); background: oklch(1 0 0 / 0.08); } /* Blazor validation states */ .jae-input.modified.invalid { border-color: var(--jae-error); box-shadow: 0 0 0 3px oklch(0.65 0.22 25 / 0.25); } .jae-input.modified.valid { border-color: var(--jae-green-dim); } .jae-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 220px; overflow-y: auto; background: oklch(0.14 0.015 150); border: 1px solid var(--jae-input-border); border-radius: 12px; box-shadow: 0 8px 24px oklch(0 0 0 / 0.5); } .jae-light .jae-search-results { background: oklch(0.99 0.002 100); box-shadow: 0 8px 24px oklch(0 0 0 / 0.18); } .jae-search-result-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid oklch(1 0 0 / 0.06); } .jae-search-result-item:last-child { border-bottom: none; } .jae-search-result-item:hover { background: oklch(1 0 0 / 0.08); } .jae-light .jae-search-result-item:hover { background: oklch(0 0 0 / 0.05); } .jae-search-result-name { font-weight: 600; color: var(--jae-text); font-size: var(--jae-fs-sm); } .jae-search-result-meta { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); } .jae-search-empty { padding: 10px 16px; font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } .jae-selected-tenant { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--jae-green-subtle); border: 1px solid var(--jae-green-dim); border-radius: 12px; } .jae-input-icon { position: absolute; right: 14px; color: var(--jae-text-muted); pointer-events: none; display: flex; align-items: center; } .jae-eye-btn { position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: var(--jae-text-muted); display: flex; align-items: center; padding: 4px; transition: color 0.2s; line-height: 0; } .jae-eye-btn:hover { color: var(--jae-text); } /* ── Linha: lembrar + esqueci ───────────────────────────────────────────── */ .jae-form-meta { display: flex; align-items: center; justify-content: space-between; margin-top: -4px; } .jae-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .jae-remember input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--jae-input-border); background: var(--jae-input-bg); cursor: pointer; position: relative; transition: border-color 0.2s, background 0.2s; flex-shrink: 0; } .jae-remember input[type="checkbox"]:checked { background: var(--jae-green); border-color: var(--jae-green); } .jae-remember input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 2px; width: 5px; height: 8px; border: 2px solid oklch(0.08 0.02 150); border-top: none; border-left: none; transform: rotate(45deg); } .jae-remember span { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } .jae-forgot-link { font-size: var(--jae-fs-sm); color: var(--jae-green-dim); text-decoration: none; transition: color 0.2s; } .jae-forgot-link:hover { color: var(--jae-green); } /* ── Botão primário (CTA) ───────────────────────────────────────────────── */ .jae-btn-primary { margin-top: 8px; width: 100%; padding: 15px 24px; background: var(--jae-green); color: var(--jae-cta-text); font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; letter-spacing: 0.02em; border: none; border-radius: 12px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; box-shadow: 0 0 32px oklch(0.82 0.26 145 / 0.45), 0 4px 16px oklch(0 0 0 / 0.3); position: relative; overflow: hidden; } .jae-btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, oklch(1 0 0 / 0.15) 0%, transparent 60%); pointer-events: none; } .jae-btn-primary:hover:not(:disabled) { background: oklch(0.88 0.26 145); box-shadow: 0 0 48px oklch(0.82 0.26 145 / 0.65), 0 6px 20px oklch(0 0 0 / 0.3); transform: translateY(-1px); } .jae-btn-primary:active:not(:disabled) { transform: translateY(0); } .jae-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } /* Variante sem margin-top (usada dentro de .jae-btn-row) */ .jae-btn-row .jae-btn-primary { margin-top: 0; flex: 1; padding: 13px 20px; } /* ── Divisor ────────────────────────────────────────────────────────────── */ .jae-divider { display: flex; align-items: center; gap: 14px; } .jae-divider-line { flex: 1; height: 1px; background: var(--jae-glass-border); } .jae-divider-text { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); white-space: nowrap; } /* ── Botão SSO (Google) ─────────────────────────────────────────────────── */ .jae-btn-sso { width: 100%; padding: 13px 24px; background: oklch(1 0 0 / 0.05); border: 1px solid var(--jae-glass-border); border-radius: 12px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-base); font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s, border-color 0.2s; margin-top: 4px; } .jae-btn-sso:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.18); } /* ── Painel do slug Google ──────────────────────────────────────────────── */ .jae-google-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .jae-btn-row { display: flex; gap: 8px; } .jae-btn-cancel { padding: 13px 20px; background: oklch(1 0 0 / 0.05); border: 1px solid var(--jae-glass-border); border-radius: 12px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-base); cursor: pointer; transition: background 0.2s; white-space: nowrap; } .jae-btn-cancel:hover { background: oklch(1 0 0 / 0.09); } /* ── Mensagem de erro ───────────────────────────────────────────────────── */ .jae-error-msg { font-size: var(--jae-fs-sm); color: var(--jae-error); padding: 10px 14px; background: oklch(0.65 0.22 25 / 0.1); border: 1px solid oklch(0.65 0.22 25 / 0.2); border-radius: 8px; } /* ── Mensagens de validação Blazor ──────────────────────────────────────── */ .validation-message { font-size: var(--jae-fs-xs); color: var(--jae-error); margin-top: 2px; } /* ── Rodapé do card ─────────────────────────────────────────────────────── */ .jae-card-footer { margin-top: 28px; text-align: center; font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } .jae-card-footer a { color: var(--jae-green); text-decoration: none; font-weight: 500; transition: color 0.2s; } .jae-card-footer a:hover { color: oklch(0.90 0.26 145); } /* ── Responsivo: coluna única em mobile ─────────────────────────────────── */ @media (max-width: 768px) { .jae-login-root { grid-template-columns: 1fr; } .jae-brand-panel { display: none; } .jae-form-panel { padding: 40px 24px; min-height: 100vh; align-items: flex-start; padding-top: 60px; } .jae-glass-card { padding: 36px 28px; } } /* ═══════════════════════════════════════════════════════════════════════════ AUTH ROOT — layout centrado (Register, ForgotPassword, Reset, Activate) ═══════════════════════════════════════════════════════════════════════════ */ .jae-auth-root { position: relative; z-index: 1; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } /* Variante larga para o formulário de registro */ .jae-glass-card--wide { max-width: 490px; } /* ── Mensagens de estado ──────────────────────────────────────────────────── */ .jae-success-msg { font-size: var(--jae-fs-sm); color: var(--jae-success); padding: 12px 16px; background: oklch(0.78 0.20 145 / 0.10); border: 1px solid oklch(0.78 0.20 145 / 0.25); border-radius: 8px; line-height: 1.5; } .jae-info-msg { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); padding: 12px 16px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 8px; line-height: 1.6; } /* ── Select estilizado ───────────────────────────────────────────────────── */ .jae-select { width: 100%; padding: 13px 36px 13px 16px; background: var(--jae-input-bg); border: 1px solid var(--jae-input-border); border-radius: 12px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-base); font-weight: 400; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .jae-select:focus { border-color: var(--jae-green-dim); box-shadow: 0 0 0 3px var(--jae-input-focus); background-color: oklch(1 0 0 / 0.08); } .jae-select option { background: oklch(0.12 0.015 150); color: var(--jae-text); } /* ── Row de dois campos lado a lado ─────────────────────────────────────── */ .jae-form-row { display: flex; gap: 14px; } .jae-form-row > .jae-field { flex: 1; min-width: 0; } /* ── Spinner de carregamento ─────────────────────────────────────────────── */ .jae-spinner { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 56px 40px; color: var(--jae-text-muted); font-size: var(--jae-fs-base); } .jae-spinner::before { content: ''; width: 28px; height: 28px; border: 2px solid var(--jae-glass-border); border-top-color: var(--jae-green); border-radius: 50%; animation: jae-spin 0.8s linear infinite; } @keyframes jae-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════════════ MAIN LAYOUT — sidebar + topbar + conteúdo autenticado ═══════════════════════════════════════════════════════════════════════════ */ /* ── Layout wrapper ───────────────────────────────────────────────────────── */ .jae-layout { display: flex; min-height: 100vh; } /* ── Topbar (user email + logout) ──────────────────────────────────────────── */ .jae-topbar { position: fixed; top: 0; left: 64px; right: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 28px; height: 52px; background: oklch(0.09 0.012 150 / 0.85); border-bottom: 1px solid var(--jae-glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: left 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .jae-sidebar--pinned ~ .jae-topbar { left: 240px; } .jae-topbar-email { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); text-decoration: none; transition: color .18s; } .jae-topbar-email:hover { color: var(--jae-text); } .jae-topbar-logout { padding: 6px 14px; background: oklch(1 0 0 / 0.05); border: 1px solid var(--jae-glass-border); border-radius: 8px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-sm); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .jae-topbar-logout:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.18); } /* ── Sidebar ────────────────────────────────────────────────────────────────── */ .jae-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: 64px; display: flex; flex-direction: column; background: oklch(0.08 0.01 150 / 0.92); border-right: 1px solid var(--jae-glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; } .jae-sidebar:hover, .jae-sidebar--pinned { width: 240px; } /* ── Brand logo ────────────────────────────────────────────────────────────── */ .jae-sidebar-brand { display: flex; align-items: center; height: 52px; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--jae-glass-border); } .jae-sidebar-logo { font-family: var(--font-brand); font-size: var(--jae-fs-lg); font-weight: 800; letter-spacing: -0.5px; color: var(--jae-text); text-decoration: none; display: flex; align-items: center; gap: 2px; white-space: nowrap; } .jae-sidebar-logo-mark { color: var(--jae-green); text-shadow: 0 0 16px var(--jae-green-glow); } /* ── Nav links ──────────────────────────────────────────────────────────────── */ .jae-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 8px; overflow-y: auto; overflow-x: hidden; } .jae-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text-muted); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .jae-sidebar-link:hover { background: oklch(1 0 0 / 0.06); color: var(--jae-text); } .jae-sidebar-link--active { background: var(--jae-green-subtle); color: var(--jae-green); } .jae-sidebar-icon { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.8; } .jae-sidebar-link--active .jae-sidebar-icon { opacity: 1; } .jae-sidebar-label { opacity: 0; transition: opacity 0.2s ease 0.05s; font-size: var(--jae-fs-sm); } .jae-sidebar:hover .jae-sidebar-label, .jae-sidebar--pinned .jae-sidebar-label { opacity: 1; } .jae-sidebar-section-label { padding: 16px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); opacity: 0; white-space: nowrap; transition: opacity 0.2s ease 0.05s; } .jae-sidebar:hover .jae-sidebar-section-label, .jae-sidebar--pinned .jae-sidebar-section-label { opacity: 0.7; } .jae-sidebar-brand-text { opacity: 0; transition: opacity 0.2s ease 0.05s; font-size: var(--jae-fs-lg); font-weight: 800; font-family: var(--font-body); } .jae-sidebar:hover .jae-sidebar-brand-text, .jae-sidebar--pinned .jae-sidebar-brand-text { opacity: 1; } .jae-brand-text { font-family: var(--font-body); font-weight: 700; } .jae-green-mark { color: var(--jae-green); } /* ── Footer / Pin button ────────────────────────────────────────────────────── */ .jae-sidebar-footer { flex-shrink: 0; padding: 8px; border-top: 1px solid var(--jae-glass-border); } .jae-sidebar-pin-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; background: none; border: none; color: var(--jae-text-muted); font-family: var(--font-body); font-size: var(--jae-fs-sm); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .jae-sidebar-pin-btn:hover { background: oklch(1 0 0 / 0.06); color: var(--jae-text); } .jae-sidebar--pinned .jae-sidebar-pin-btn .jae-sidebar-icon { color: var(--jae-green); } /* ── Light theme: sidebar + topbar ─────────────────────────────────────── */ .jae-light .jae-sidebar { background: oklch(0.94 0.005 100 / 0.97); border-right-color: oklch(0 0 0 / 0.08); } .jae-light .jae-topbar { background: oklch(0.96 0.004 100 / 0.92); border-bottom-color: oklch(0 0 0 / 0.08); } .jae-light .jae-sidebar-link:hover, .jae-light .jae-sidebar-pin-btn:hover { background: oklch(0 0 0 / 0.05); } .jae-light .jae-topbar-logout { background: oklch(0 0 0 / 0.04); border-color: oklch(0 0 0 / 0.10); } .jae-light .jae-topbar-logout:hover { background: oklch(0 0 0 / 0.08); border-color: oklch(0 0 0 / 0.15); } .jae-light .jae-sidebar-brand, .jae-light .jae-sidebar-footer { border-color: oklch(0 0 0 / 0.08); } /* ── Main content ───────────────────────────────────────────────────────────── */ .jae-main { margin-left: 64px; margin-top: 52px; padding: 36px 32px; max-width: 1320px; flex: 1; transition: margin-left 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .jae-sidebar--pinned ~ .jae-main { margin-left: 240px; } /* ── NotAuthorized header (kept for public pages) ──────────────────────────── */ .jae-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 56px; background: oklch(0.09 0.012 150 / 0.85); border-bottom: 1px solid var(--jae-glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .jae-header-brand { font-family: var(--font-brand); font-size: var(--jae-fs-xl); font-weight: 800; letter-spacing: -0.5px; color: var(--jae-text); text-decoration: none; display: flex; align-items: center; gap: 2px; } .jae-header-brand-mark { color: var(--jae-green); text-shadow: 0 0 16px var(--jae-green-glow); } .jae-btn-ghost { padding: 7px 16px; background: oklch(1 0 0 / 0.05); border: 1px solid var(--jae-glass-border); border-radius: 8px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-sm); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .jae-btn-ghost:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.18); } /* ═══════════════════════════════════════════════════════════════════════════ HOME / DASHBOARD ═══════════════════════════════════════════════════════════════════════════ */ .jae-page-title { font-family: var(--font-brand); font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--jae-text); margin-bottom: 24px; } .jae-info-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 16px; padding: 24px 28px; max-width: 420px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 12px; } .jae-info-row { display: flex; gap: 10px; align-items: baseline; } .jae-info-label { font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); min-width: 70px; flex-shrink: 0; } .jae-info-value { font-size: var(--jae-fs-base); color: var(--jae-text); } .jae-admin-card { margin-top: 16px; background: oklch(0.82 0.26 145 / 0.06); border: 1px solid oklch(0.82 0.26 145 / 0.15); border-radius: 12px; padding: 14px 20px; max-width: 420px; font-size: var(--jae-fs-base); color: var(--jae-green-dim); } /* ═══════════════════════════════════════════════════════════════════════════ PUBLIC PROFESSIONAL PAGE — /{slug} ═══════════════════════════════════════════════════════════════════════════ */ .jae-pub-root { max-width: 560px; margin: 0 auto; padding: 32px 20px 48px; } /* ── Hero do profissional ────────────────────────────────────────────────── */ .jae-pub-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; padding: 24px; background: oklch(1 0 0 / 0.04); border: 1px solid oklch(1 0 0 / 0.10); border-radius: 20px; position: relative; overflow: hidden; } .jae-pub-hero::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, oklch(0.76 0.15 176 / 0.45), transparent); } .jae-pub-hero--loading { justify-content: center; min-height: 100px; } .jae-pub-hero-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.62 0.18 176), oklch(0.44 0.16 210)); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: var(--jae-fs-2xl); font-weight: 800; color: oklch(0.97 0.005 150); flex-shrink: 0; box-shadow: 0 0 0 3px oklch(0.76 0.15 176 / 0.20), 0 6px 20px oklch(0 0 0 / 0.30); user-select: none; } .jae-pub-hero-info { min-width: 0; } .jae-pub-hero-name { font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--jae-text); margin-bottom: 4px; } .jae-pub-hero-desc { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.5; } .jae-pub-hero-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px oklch(0.76 0.15 176 / 0.20), 0 6px 20px oklch(0 0 0 / 0.30); } /* ── Indicador de etapas ─────────────────────────────────────────────────── */ .jae-pub-steps { display: flex; align-items: center; gap: 0; margin-bottom: 28px; } .jae-pub-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .jae-pub-step span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--jae-text-muted); white-space: nowrap; transition: color .2s; } .jae-pub-step--done span { color: var(--jae-green); } .jae-pub-step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--jae-glass-border); background: var(--jae-glass-bg); display: flex; align-items: center; justify-content: center; font-size: var(--jae-fs-xs); font-weight: 700; color: var(--jae-text-muted); transition: border-color .2s, background .2s, color .2s; } .jae-pub-step--done .jae-pub-step-dot { border-color: var(--jae-green); background: var(--jae-green-subtle); color: var(--jae-green); } .jae-pub-step-line { flex: 1; height: 2px; background: var(--jae-glass-border); margin: 0 8px; margin-bottom: 22px; transition: background .2s; } .jae-pub-step-line--done { background: var(--jae-green-dim); } /* ── Seção do wizard ─────────────────────────────────────────────────────── */ .jae-pub-section { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 18px; padding: 24px; margin-bottom: 16px; } .jae-pub-section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .jae-pub-section-title { font-family: var(--font-brand); font-size: var(--jae-fs-lg); font-weight: 700; color: var(--jae-text); margin-bottom: 18px; } .jae-pub-back { display: flex; align-items: center; gap: 5px; font-size: var(--jae-fs-xs); color: var(--jae-text-muted); background: none; border: 1px solid var(--jae-glass-border); border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: color .18s, border-color .18s; white-space: nowrap; flex-shrink: 0; } .jae-pub-back:hover { color: var(--jae-text); border-color: oklch(1 0 0 / 0.18); } /* ── Serviços ────────────────────────────────────────────────────────────── */ .jae-pub-service-grid { display: flex; flex-direction: column; gap: 10px; } .jae-pub-service-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px 20px; background: oklch(1 0 0 / 0.04); border: 1px solid var(--jae-glass-border); border-radius: 12px; cursor: pointer; transition: background .18s, border-color .18s, transform .14s; font-family: var(--font-body); color: var(--jae-text); } .jae-pub-service-card:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(0.76 0.15 176 / 0.30); transform: translateY(-1px); } .jae-pub-service-name { font-size: var(--jae-fs-md); font-weight: 600; color: var(--jae-text); } .jae-pub-service-meta { display: flex; gap: 14px; font-size: var(--jae-fs-xs); color: var(--jae-green-dim); font-weight: 500; } .jae-pub-service-desc { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); line-height: 1.5; margin-top: 2px; } /* ── Serviço selecionado (resumo) ────────────────────────────────────────── */ .jae-pub-selected-service { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--jae-green-subtle); border: 1px solid oklch(0.76 0.15 176 / 0.22); border-radius: 10px; font-size: var(--jae-fs-base); font-weight: 600; color: var(--jae-green); margin-bottom: 20px; } .jae-pub-selected-service-meta { font-size: var(--jae-fs-xs); font-weight: 400; color: var(--jae-green-dim); } /* ── Resumo do agendamento (step 3) ──────────────────────────────────────── */ .jae-pub-booking-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: oklch(1 0 0 / 0.04); border: 1px solid var(--jae-glass-border); border-radius: 10px; margin-bottom: 4px; } .jae-pub-booking-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--jae-fs-sm); gap: 12px; } .jae-pub-booking-summary-row span { color: var(--jae-text-muted); } .jae-pub-booking-summary-row strong { color: var(--jae-text); } /* ── Radio / checkbox ────────────────────────────────────────────────────── */ .jae-pub-radio-option { display: flex; align-items: center; gap: 8px; font-size: var(--jae-fs-base); font-weight: 400; color: var(--jae-text); cursor: pointer; } /* ── Tela de sucesso ─────────────────────────────────────────────────────── */ .jae-pub-success { text-align: center; padding: 48px 24px 32px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 20px; margin-bottom: 24px; } .jae-pub-success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--jae-green-subtle); border: 2px solid oklch(0.76 0.15 176 / 0.35); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--jae-green); margin: 0 auto 20px; } .jae-pub-success-title { font-family: var(--font-brand); font-size: 22px; font-weight: 700; color: var(--jae-text); margin-bottom: 10px; } .jae-pub-success-sub { font-size: var(--jae-fs-base); color: var(--jae-text-muted); line-height: 1.6; max-width: 360px; margin: 0 auto; } /* ── Rodapé "Powered by" ─────────────────────────────────────────────────── */ .jae-pub-brand { text-align: center; font-size: var(--jae-fs-xs); color: var(--jae-text-muted); margin-top: 32px; } .jae-pub-brand-link { font-family: var(--font-brand); font-weight: 700; font-size: var(--jae-fs-sm); color: var(--jae-text-muted); text-decoration: none; transition: color .18s; } .jae-pub-brand-link:hover { color: var(--jae-text); } /* ═══════════════════════════════════════════════════════════════════════════ IMAGE VIEWER / LIGHTBOX ═══════════════════════════════════════════════════════════════════════════ */ .jae-viewer-overlay { position: fixed; inset: 0; background: oklch(0.05 0 0 / 0.94); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; outline: none; } .jae-viewer-close { position: absolute; top: 14px; right: 18px; background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.15); color: oklch(1 0 0 / 0.9); width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 10; } .jae-viewer-close:hover { background: oklch(1 0 0 / 0.18); } .jae-viewer-main { display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; padding: 56px 8px 8px; gap: 10px; min-height: 0; } .jae-viewer-img { max-width: calc(100% - 120px); max-height: 72vh; object-fit: contain; border-radius: 10px; user-select: none; pointer-events: none; } .jae-viewer-arrow { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid oklch(1 0 0 / 0.18); background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.9); font-size: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; line-height: 1; } .jae-viewer-arrow:hover { background: oklch(1 0 0 / 0.22); } .jae-viewer-counter { color: oklch(1 0 0 / 0.5); font-size: 12px; letter-spacing: 0.5px; margin-bottom: 8px; flex-shrink: 0; } .jae-viewer-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 20px 20px; max-width: 100%; flex-shrink: 0; scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / 0.2) transparent; } .jae-viewer-thumbs::-webkit-scrollbar { height: 4px; } .jae-viewer-thumbs::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.2); border-radius: 2px; } .jae-viewer-thumb { flex-shrink: 0; width: 70px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity: 0.5; transition: opacity 0.15s, border-color 0.15s; } .jae-viewer-thumb:hover { opacity: 0.8; } .jae-viewer-thumb--active { border-color: var(--jae-green); opacity: 1; } /* gallery images are clickable */ .jae-pub-gallery-img { cursor: pointer; } .jae-pub-gallery-img:hover { opacity: 0.88; transition: opacity 0.15s; } /* ═══════════════════════════════════════════════════════════════════════════ PUBLIC BUSINESS PROFILE — estado "profile" da /{slug} ═══════════════════════════════════════════════════════════════════════════ */ .jae-pub-profile-root { max-width: 640px; margin: 0 auto; padding-bottom: 48px; } /* ── Banner ──────────────────────────────────────────────────────────────── */ .jae-pub-banner { position: relative; width: 100%; height: 190px; overflow: hidden; background: linear-gradient(135deg, oklch(0.14 0.04 176), oklch(0.09 0.02 210)); border-radius: 0 0 28px 28px; } .jae-pub-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; } .jae-pub-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, oklch(0 0 0 / 0.48)); } /* ── Identidade (logo + nome + redes sociais) ─────────────────────────────── */ .jae-pub-identity { display: flex; align-items: flex-end; gap: 14px; padding: 0 20px 14px; margin-top: -44px; position: relative; } .jae-pub-identity-logo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--jae-bg); box-shadow: 0 4px 20px oklch(0 0 0 / 0.45); } .jae-pub-identity-avatar { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; border: 3px solid var(--jae-bg); background: linear-gradient(135deg, oklch(0.62 0.18 176), oklch(0.44 0.16 210)); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: var(--jae-fs-2xl); font-weight: 800; color: oklch(0.97 0.005 150); user-select: none; box-shadow: 0 4px 20px oklch(0 0 0 / 0.45); } .jae-pub-identity-info { min-width: 0; flex: 1; padding-bottom: 4px; } .jae-pub-identity-name { font-family: var(--font-brand); font-size: var(--jae-fs-xl); font-weight: 800; letter-spacing: -0.4px; color: var(--jae-text); margin-bottom: 8px; line-height: 1.15; } /* ── Botões de redes sociais ─────────────────────────────────────────────── */ .jae-pub-social-row { display: flex; gap: 8px; flex-wrap: wrap; } .jae-pub-social-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--jae-glass-border); background: var(--jae-glass-bg); color: var(--jae-text-muted); font-size: var(--jae-fs-xs); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .jae-pub-social-btn:hover { border-color: oklch(1 0 0 / 0.22); color: var(--jae-text); background: oklch(1 0 0 / 0.07); } .jae-pub-social-btn--insta { border-color: oklch(0.65 0.18 330 / 0.35); } .jae-pub-social-btn--insta:hover { border-color: oklch(0.65 0.18 330 / 0.65); color: oklch(0.75 0.18 330); } .jae-pub-social-btn--whatsapp { border-color: oklch(0.70 0.17 145 / 0.35); } .jae-pub-social-btn--whatsapp:hover { border-color: oklch(0.70 0.17 145 / 0.65); color: oklch(0.78 0.20 145); } /* ── Bio ─────────────────────────────────────────────────────────────────── */ .jae-pub-bio { padding: 0 20px 22px; } .jae-pub-bio-text { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.65; } /* ── Status de funcionamento (badge + hoje + link) ───────────────────────── */ .jae-pub-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 20px 18px; } .jae-pub-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .jae-pub-status-badge--open { background: oklch(0.35 0.1 150 / 0.18); color: var(--jae-green); border: 1px solid oklch(0.5 0.12 150 / 0.35); } .jae-pub-status-badge--open::before { content: "●"; font-size: 8px; } .jae-pub-status-badge--closed { background: oklch(0.5 0.12 20 / 0.14); color: oklch(0.7 0.12 20); border: 1px solid oklch(0.5 0.12 20 / 0.3); } .jae-pub-status-badge--closed::before { content: "●"; font-size: 8px; } .jae-pub-status-badge--away { background: oklch(0.55 0.15 80 / 0.16); color: oklch(0.75 0.15 80); border: 1px solid oklch(0.55 0.15 80 / 0.35); } .jae-pub-status-badge--away::before { content: "●"; font-size: 8px; } .jae-pub-status-hours { font-size: 13px; color: var(--jae-text-muted); flex: 1; min-width: 120px; } .jae-pub-status-link { background: none; border: none; padding: 0; font-size: 12px; color: var(--jae-green); cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; } .jae-pub-status-link:hover { opacity: 0.75; } .jae-pub-status-link--disabled { cursor: default; pointer-events: none; opacity: 0.5; } .jae-pub-status--preview { padding: 8px 12px 14px; gap: 6px 8px; } .jae-pub-status--preview .jae-pub-status-badge { font-size: 10px; padding: 2px 8px; } .jae-pub-status--preview .jae-pub-status-hours { font-size: 11px; } .jae-pub-status--preview .jae-pub-status-link { font-size: 10px; } /* ── Horários de atendimento ─────────────────────────────────────────────── */ .jae-pub-hours { padding: 0 20px 24px; } .jae-pub-hours-title { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; color: var(--jae-text); margin-bottom: 10px; } .jae-pub-hours-list { display: grid; grid-template-columns: 6.5em 1fr; gap: 5px 8px; font-size: 13px; } .jae-pub-hours-day { color: var(--jae-text); font-weight: 500; } .jae-pub-hours-time { color: var(--jae-text-muted); } .jae-pub-hours-day--today { color: var(--jae-green); font-weight: 700; } .jae-pub-hours-time--today { color: var(--jae-green); font-weight: 600; } .jae-pub-hours-closed { opacity: 0.45; } .jae-pub-hours--preview .jae-pub-hours-list { font-size: 11px; } .jae-pub-hours--preview .jae-pub-hours-title { font-size: 13px; margin-bottom: 6px; } .jae-pub-hours-list--modal { display: grid; grid-template-columns: 7em 1fr; gap: 10px 12px; padding: 4px 0 8px; font-size: 14px; } .jae-pub-modal--hours { max-width: 340px; } .jae-pub-modal--hours .jae-pub-modal-header { margin-bottom: 8px; } .jae-preview-hours-hint { display: flex; flex-direction: column; gap: 6px; } .jae-preview-hours-hint-text { font-size: 10px; color: var(--jae-text-muted); opacity: 0.7; font-style: italic; } /* ── Carrossel de galeria ────────────────────────────────────────────────── */ .jae-pub-gallery { margin-bottom: 28px; } .jae-pub-gallery-title { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; color: var(--jae-text); margin-bottom: 12px; padding: 0 20px; } .jae-pub-gallery-track { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .jae-pub-gallery-track::-webkit-scrollbar { display: none; } .jae-pub-gallery-img { flex-shrink: 0; width: 168px; height: 126px; border-radius: 14px; object-fit: cover; border: 1px solid var(--jae-glass-border); scroll-snap-align: start; } /* ── Seção de serviços (perfil) ──────────────────────────────────────────── */ .jae-pub-services { padding: 0 20px; margin-bottom: 28px; } .jae-pub-services-header { margin-bottom: 14px; } .jae-pub-services-title { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; color: var(--jae-text); margin-bottom: 4px; } .jae-pub-services-hint { font-size: var(--jae-fs-xs); color: var(--jae-green); font-weight: 500; letter-spacing: .01em; } .jae-pub-profile-service-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 16px; cursor: pointer; text-align: left; width: 100%; transition: border-color .15s, background .15s, transform .1s; } .jae-pub-profile-service-card:hover { border-color: var(--jae-green-dim); background: oklch(1 0 0 / 0.065); transform: translateY(-1px); } .jae-pub-profile-service-card:active { transform: translateY(0); } /* ── Modal de detalhes do serviço ────────────────────────────────────────── */ .jae-pub-modal-overlay { position: fixed; inset: 0; background: oklch(0 0 0 / 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; z-index: 500; } .jae-pub-modal { background: var(--jae-bg2); border: 1px solid var(--jae-glass-border); border-radius: 28px 28px 0 0; width: 100%; max-width: 560px; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 0; animation: jaeSlideUp .22s ease-out; } @keyframes jaeSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .jae-pub-modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .jae-pub-modal-title { font-family: var(--font-brand); font-size: var(--jae-fs-lg); font-weight: 700; color: var(--jae-text); line-height: 1.2; } .jae-pub-modal-close { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; border: 1px solid var(--jae-glass-border); background: var(--jae-glass-bg); color: var(--jae-text-muted); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, color .15s; line-height: 1; } .jae-pub-modal-close:hover { border-color: oklch(1 0 0 / 0.22); color: var(--jae-text); } .jae-pub-modal-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .jae-pub-modal-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--jae-green-subtle); color: var(--jae-green); font-size: var(--jae-fs-xs); font-weight: 600; } .jae-pub-modal-desc { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.65; margin-bottom: 24px; } .jae-pub-modal-footer { display: flex; gap: 10px; } /* ── Light mode overrides ────────────────────────────────────────────────── */ .jae-light .jae-pub-banner { background: linear-gradient(135deg, oklch(0.72 0.12 176), oklch(0.50 0.10 210)); } .jae-light .jae-pub-identity-logo, .jae-light .jae-pub-identity-avatar { border-color: var(--jae-bg); } .jae-light .jae-pub-modal { background: oklch(0.97 0.003 150); } /* ═══════════════════════════════════════════════════════════════════════════ PROFILE PAGE — /perfil ═══════════════════════════════════════════════════════════════════════════ */ .jae-profile-root { max-width: 680px; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .jae-profile-hero { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; } .jae-profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.62 0.18 176), oklch(0.44 0.16 210)); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: 30px; font-weight: 800; color: oklch(0.97 0.005 150); flex-shrink: 0; box-shadow: 0 0 0 3px oklch(0.76 0.15 176 / 0.20), 0 8px 24px oklch(0 0 0 / 0.30); user-select: none; } .jae-profile-hero-info { display: flex; flex-direction: column; gap: 2px; } .jae-profile-handle { font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--jae-text); } .jae-profile-email-sub { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } /* ── Sections grid ───────────────────────────────────────────────────────── */ .jae-profile-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .jae-profile-section { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .jae-profile-section--full { grid-column: 1 / -1; margin-bottom: 16px; } .jae-profile-section--featured { border-color: oklch(0.82 0.26 145 / 0.35); box-shadow: 0 0 0 1px oklch(0.82 0.26 145 / 0.12), 0 20px 56px oklch(0 0 0 / 0.40), inset 0 1px 0 oklch(1 0 0 / 0.10); } .jae-current-plan-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--jae-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jae-green); background: oklch(0.82 0.26 145 / 0.12); border: 1px solid oklch(0.82 0.26 145 / 0.35); border-radius: 999px; padding: 2px 10px; } .jae-profile-section-title { font-family: var(--font-brand); font-size: var(--jae-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jae-text-muted); margin-bottom: 4px; } .jae-profile-section-desc { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.5; margin-top: -8px; } /* ── Fields ──────────────────────────────────────────────────────────────── */ .jae-profile-field { display: flex; align-items: baseline; gap: 12px; } .jae-profile-field-label { font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--jae-text-muted); min-width: 72px; flex-shrink: 0; } .jae-profile-field-value { font-size: var(--jae-fs-sm); color: var(--jae-text); word-break: break-all; } .jae-profile-field-value--muted { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); font-family: ui-monospace, monospace; } .jae-profile-code { font-size: var(--jae-fs-xs); color: var(--jae-green-dim); background: var(--jae-green-subtle); border: 1px solid oklch(0.76 0.15 176 / 0.18); border-radius: 5px; padding: 2px 7px; font-family: ui-monospace, monospace; } /* ── Actions ─────────────────────────────────────────────────────────────── */ .jae-profile-actions { display: flex; gap: 12px; padding-top: 8px; } /* ── Responsivo mobile ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .jae-auth-root { align-items: flex-start; padding-top: 48px; } .jae-glass-card--wide { max-width: 100%; } .jae-form-row { flex-direction: column; gap: 18px; } .jae-main { padding: 24px 16px; } .jae-header { padding: 0 16px; } .jae-header-email { display: none; } .jae-profile-sections { grid-template-columns: 1fr; } .jae-profile-hero { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ── Perfil público (card no /perfil) ───────────────────────────────────── */ .jae-profile-biz-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 16px; overflow: hidden; margin-bottom: 24px; } .jae-profile-biz-banner { height: 120px; background: linear-gradient(135deg, oklch(0.62 0.18 176 / 0.35) 0%, oklch(0.44 0.16 210 / 0.35) 100%); position: relative; overflow: hidden; } .jae-profile-biz-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; } .jae-profile-biz-identity { display: flex; align-items: flex-end; gap: 14px; padding: 0 20px 14px; margin-top: -28px; position: relative; } .jae-profile-biz-logo, .jae-profile-biz-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--jae-bg); flex-shrink: 0; object-fit: cover; } .jae-profile-biz-avatar { background: linear-gradient(135deg, oklch(0.62 0.18 176), oklch(0.44 0.16 210)); color: oklch(0.97 0.005 150); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: 26px; font-weight: 800; } .jae-profile-biz-meta { padding-top: 30px; min-width: 0; } .jae-profile-biz-name { font-size: 16px; font-weight: 700; color: var(--jae-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .jae-profile-biz-desc { font-size: 13px; color: var(--jae-text-muted); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jae-profile-biz-links { display: flex; gap: 8px; padding: 0 20px 16px; flex-wrap: wrap; } .jae-share-btn { display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s, border-color 0.15s; } .jae-share-btn--copied { color: var(--jae-green) !important; border-color: var(--jae-green) !important; } /* ── Sessões Ativas (cards) ─────────────────────────────────────────────── */ .jae-sessions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; } .jae-session-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; } .jae-session-card:hover { border-color: oklch(1 0 0 / 0.18); } .jae-session-card--current { border-color: oklch(0.76 0.15 176 / 0.3); background: oklch(0.76 0.15 176 / 0.04); } .jae-session-card--current:hover { border-color: oklch(0.76 0.15 176 / 0.45); } .jae-session-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; } .jae-session-device { display: flex; align-items: center; gap: 10px; } .jae-session-device-svg { flex-shrink: 0; color: var(--jae-green); } .jae-session-card--current .jae-session-device-svg { color: var(--jae-green); filter: drop-shadow(0 0 6px var(--jae-green-glow)); } .jae-session-device-name { font-size: var(--jae-fs-sm); font-weight: 600; color: var(--jae-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jae-session-card-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px; } .jae-session-ip-row { display: flex; align-items: center; gap: 10px; } .jae-session-ip-label { font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--jae-text-muted); flex-shrink: 0; } .jae-session-ip-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: var(--jae-fs-xs); font-weight: 500; font-family: ui-monospace, monospace; background: oklch(0.65 0.01 150 / 0.08); border: 1px solid oklch(0.65 0.01 150 / 0.12); color: var(--jae-text-muted); letter-spacing: 0.02em; } .jae-session-card--current .jae-session-ip-badge { background: oklch(0.76 0.15 176 / 0.10); border-color: oklch(0.76 0.15 176 / 0.18); color: var(--jae-green-dim); } .jae-session-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .jae-session-meta { display: flex; flex-direction: column; gap: 2px; } .jae-session-meta-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jae-text-muted); } .jae-session-meta-value { font-size: var(--jae-fs-xs); color: var(--jae-text); } .jae-session-card-footer { border-top: 1px solid var(--jae-glass-border); padding: 10px 16px; display: flex; justify-content: flex-end; } @media (max-width: 768px) { .jae-sessions-grid { grid-template-columns: 1fr; } .jae-session-meta-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ PRICING PAGE — /plans ═══════════════════════════════════════════════════════════════════════════ */ .jae-pricing-root { position: relative; z-index: 1; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 24px 80px; } .jae-pricing-topbar { width: 100%; max-width: 1060px; margin-bottom: 32px; } .jae-pricing-heading { text-align: center; margin-bottom: 32px; } .jae-pricing-title { font-family: var(--font-brand); font-size: 40px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.15; color: var(--jae-text); margin-bottom: 12px; } .jae-pricing-title em { font-style: normal; color: var(--jae-green); text-shadow: 0 0 28px var(--jae-green-glow); } .jae-pricing-sub { font-size: var(--jae-fs-md); font-weight: 300; color: var(--jae-text-muted); line-height: 1.6; } .jae-pricing-footer { margin-top: 52px; font-size: var(--jae-fs-base); color: var(--jae-text-muted); text-align: center; } .jae-pricing-footer a { color: var(--jae-green); text-decoration: none; font-weight: 500; } .jae-pricing-footer a:hover { color: oklch(0.90 0.26 145); } /* ── Billing tabs ────────────────────────────────────────────────────────── */ .jae-billing-tabs { display: inline-flex; align-items: center; gap: 4px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 10px; padding: 4px; margin-bottom: 36px; } .jae-billing-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; border-radius: 7px; font-family: var(--font-body); font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text-muted); background: none; border: none; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; } .jae-billing-tab:not(.jae-billing-tab--active):hover { background: oklch(1 0 0 / 0.06); color: var(--jae-text); } .jae-billing-tab--active { background: var(--jae-green); color: var(--jae-cta-text); font-weight: 600; } .jae-billing-badge { display: inline-flex; align-items: center; padding: 2px 8px; background: oklch(0.82 0.26 145 / 0.18); border: 1px solid oklch(0.82 0.26 145 / 0.30); border-radius: 100px; font-size: var(--jae-fs-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--jae-green); transition: background 0.2s, color 0.2s, border-color 0.2s; } .jae-billing-tab--active .jae-billing-badge { background: oklch(0.08 0.02 150 / 0.22); border-color: oklch(0.08 0.02 150 / 0.25); color: var(--jae-cta-text); } /* ── Plan grid ───────────────────────────────────────────────────────────── */ .jae-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 1060px; align-items: start; } /* ── Plan card ───────────────────────────────────────────────────────────── */ .jae-plan-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 22px; padding: 32px 28px 28px; backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 16px 48px oklch(0 0 0 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.07); position: relative; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; } .jae-plan-card:hover { transform: translateY(-3px); box-shadow: 0 28px 64px oklch(0 0 0 / 0.45), inset 0 1px 0 oklch(1 0 0 / 0.07); } .jae-plan-card--featured { border-color: oklch(0.82 0.26 145 / 0.35); box-shadow: 0 0 0 1px oklch(0.82 0.26 145 / 0.12), 0 20px 56px oklch(0 0 0 / 0.40), inset 0 1px 0 oklch(1 0 0 / 0.10); } .jae-plan-card--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, transparent 0%, oklch(0.82 0.26 145 / 0.55) 50%, transparent 100%); } .jae-plan-popular { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--jae-green-subtle); border: 1px solid oklch(0.82 0.26 145 / 0.25); border-radius: 100px; font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--jae-green); margin-bottom: 14px; width: fit-content; } .jae-plan-name { font-family: var(--font-brand); font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--jae-text); margin-bottom: 6px; } .jae-plan-tagline { font-size: var(--jae-fs-sm); font-weight: 300; color: var(--jae-text-muted); line-height: 1.55; margin-bottom: 22px; } /* ── Price block ─────────────────────────────────────────────────────────── */ .jae-plan-price { margin-bottom: 22px; } .jae-plan-price-row { display: flex; align-items: baseline; gap: 1px; line-height: 1; } .jae-plan-price-currency { font-family: var(--font-brand); font-size: var(--jae-fs-lg); font-weight: 700; color: var(--jae-text); align-self: flex-end; margin-bottom: 4px; } .jae-plan-price-amount { font-family: var(--font-brand); font-size: 40px; font-weight: 800; letter-spacing: -1.5px; color: var(--jae-text); } .jae-plan-price-period { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin-left: 5px; font-weight: 400; align-self: flex-end; margin-bottom: 4px; } .jae-plan-price-note { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); margin-top: 5px; font-weight: 300; } /* ── Feature list ────────────────────────────────────────────────────────── */ .jae-plan-divider { height: 1px; background: var(--jae-glass-border); margin-bottom: 20px; } .jae-plan-features { display: flex; flex-direction: column; gap: 9px; flex: 1; margin-bottom: 26px; } .jae-plan-feature { display: flex; align-items: flex-start; gap: 9px; font-size: var(--jae-fs-sm); color: var(--jae-text); line-height: 1.45; } .jae-plan-feature-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; } .jae-plan-feature-section { font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-green-dim); margin-top: 4px; margin-bottom: 1px; padding-left: 24px; } .jae-plan-feature--limit { color: var(--jae-text-muted); } /* ── CTA ─────────────────────────────────────────────────────────────────── */ .jae-plan-cta { display: block; width: 100%; padding: 13px 24px; border-radius: 12px; font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; border: none; line-height: 1; } .jae-plan-cta--primary { background: var(--jae-green); color: var(--jae-cta-text); box-shadow: 0 0 28px oklch(0.82 0.26 145 / 0.38), 0 4px 14px oklch(0 0 0 / 0.28); } .jae-plan-cta--primary:hover { background: oklch(0.88 0.26 145); box-shadow: 0 0 44px oklch(0.82 0.26 145 / 0.55), 0 6px 18px oklch(0 0 0 / 0.28); transform: translateY(-1px); } .jae-plan-cta--ghost { background: oklch(1 0 0 / 0.05); border: 1px solid var(--jae-glass-border); color: var(--jae-text); } .jae-plan-cta--ghost:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.18); transform: translateY(-1px); } /* ── Plan selected summary (no RegisterPage) ─────────────────────────────── */ .jae-plan-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; background: var(--jae-green-subtle); border: 1px solid oklch(0.82 0.26 145 / 0.22); border-radius: 12px; } .jae-plan-summary-info { display: flex; flex-direction: column; gap: 2px; } .jae-plan-summary-label { font-size: var(--jae-fs-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jae-text-muted); } .jae-plan-summary-value { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; color: var(--jae-green); } .jae-plan-summary-change { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color 0.2s; } .jae-plan-summary-change:hover { color: var(--jae-text); } /* ── Responsivo pricing ─────────────────────────────────────────────────── */ @media (max-width: 960px) { .jae-plan-grid { grid-template-columns: 1fr; max-width: 440px; } .jae-pricing-title { font-size: 30px; } } @media (max-width: 480px) { .jae-pricing-root { padding: 36px 16px 60px; } .jae-pricing-title { font-size: 26px; } } /* ═══════════════════════════════════════════════════════════════════════════ HEADER NAV ═══════════════════════════════════════════════════════════════════════════ */ .jae-header-nav { display: flex; align-items: center; gap: 2px; flex: 1; padding: 0 16px; } .jae-nav-link { padding: 6px 14px; border-radius: 8px; font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text-muted); text-decoration: none; transition: background 0.15s, color 0.15s; } .jae-nav-link:hover { background: oklch(1 0 0 / 0.06); color: var(--jae-text); } .jae-nav-link--active { background: oklch(1 0 0 / 0.08); color: var(--jae-text); } /* ═══════════════════════════════════════════════════════════════════════════ STAFF PAGE ═══════════════════════════════════════════════════════════════════════════ */ .jae-staff-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .jae-staff-count { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin-top: 2px; } .jae-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .jae-staff-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 16px; padding: 22px 24px; backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 4px; } .jae-staff-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .jae-staff-name { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 600; color: var(--jae-text); } .jae-staff-email { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } /* ── Badges ────────────────────────────────────────────────────────────── */ .jae-badge { display: inline-flex; align-items: center; width: fit-content; padding: 2px 9px; border-radius: 100px; font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; align-self: flex-start; } .jae-badge--active { background: oklch(0.78 0.20 145 / 0.12); border: 1px solid oklch(0.78 0.20 145 / 0.25); color: var(--jae-green); } .jae-badge--pending { background: oklch(0.75 0.18 80 / 0.12); border: 1px solid oklch(0.75 0.18 80 / 0.25); color: oklch(0.80 0.16 80); } .jae-badge--inactive { background: oklch(1 0 0 / 0.04); border: 1px solid var(--jae-glass-border); color: var(--jae-text-muted); } /* ── Botão danger (outline) ─────────────────────────────────────────────── */ .jae-btn-danger { padding: 7px 14px; background: oklch(0.65 0.22 25 / 0.08); border: 1px solid oklch(0.65 0.22 25 / 0.22); border-radius: 8px; color: var(--jae-error); font-family: var(--font-body); font-size: var(--jae-fs-sm); cursor: pointer; transition: background 0.2s, border-color 0.2s; align-self: flex-start; margin-top: 10px; } .jae-btn-danger:hover { background: oklch(0.65 0.22 25 / 0.15); border-color: oklch(0.65 0.22 25 / 0.32); } /* ── Botão danger (sólido, para confirmação) ─────────────────────────────── */ .jae-btn-danger-solid { flex: 1; padding: 13px 20px; background: var(--jae-error); color: oklch(0.97 0.005 150); font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; } .jae-btn-danger-solid:hover:not(:disabled) { background: oklch(0.72 0.25 25); box-shadow: 0 0 24px oklch(0.65 0.22 25 / 0.38); } .jae-btn-danger-solid:disabled { opacity: 0.55; cursor: not-allowed; } /* ── Botão primary pequeno (inline em header) ────────────────────────────── */ .jae-btn-primary--sm { margin-top: 0; width: auto; padding: 9px 18px; font-size: var(--jae-fs-base); display: inline-flex; align-items: center; gap: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════════════════ */ .jae-modal-overlay { position: fixed; inset: 0; z-index: 200; background: oklch(0 0 0 / 0.58); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; } .jae-modal { width: 100%; max-width: 420px; background: oklch(0.10 0.015 150); border: 1px solid var(--jae-glass-border); border-radius: 20px; padding: 32px 28px 28px; box-shadow: 0 32px 80px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.82 0.26 145 / 0.06); position: relative; } .jae-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, transparent 0%, oklch(1 0 0 / 0.12) 50%, transparent 100%); } .jae-modal-title { font-family: var(--font-brand); font-size: var(--jae-fs-xl); font-weight: 700; color: var(--jae-text); margin-bottom: 6px; } .jae-modal-sub { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin-bottom: 24px; line-height: 1.55; } .jae-modal-close { position: absolute; top: 14px; right: 16px; background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.12); color: oklch(1 0 0 / 0.75); width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .jae-modal-close:hover { background: oklch(1 0 0 / 0.14); color: oklch(1 0 0 / 1); } .jae-modal-actions { display: flex; gap: 8px; margin-top: 20px; } .jae-modal-actions .jae-btn-primary, .jae-modal-actions .jae-btn-danger-solid, .jae-modal-actions .jae-btn-cancel { margin-top: 0; flex: 1; } .jae-modal-actions .jae-btn-danger { margin-top: 0; align-self: auto; } .jae-modal-actions .jae-btn-ghost, .jae-modal-actions .jae-btn-ghost--sm { margin-top: 0; } /* ── Light theme: modais e elementos de UI compartilhados ──────────────── */ .jae-light .jae-modal { background: oklch(0.99 0.002 100); border-color: oklch(0 0 0 / 0.08); box-shadow: 0 32px 80px oklch(0 0 0 / 0.14), 0 0 0 1px oklch(0.52 0.18 148 / 0.06); } .jae-light .jae-modal::before { background: linear-gradient(90deg, transparent 0%, oklch(0 0 0 / 0.06) 50%, transparent 100%); } .jae-light .jae-modal-overlay { background: oklch(0 0 0 / 0.35); } .jae-light .jae-btn-cancel { background: oklch(0 0 0 / 0.04); border-color: oklch(0 0 0 / 0.10); } .jae-light .jae-btn-cancel:hover { background: oklch(0 0 0 / 0.08); } .jae-light .jae-btn-ghost { background: oklch(0 0 0 / 0.04); border-color: oklch(0 0 0 / 0.10); } .jae-light .jae-btn-ghost:hover { background: oklch(0 0 0 / 0.08); border-color: oklch(0 0 0 / 0.16); } .jae-light .jae-btn-ghost--sm { background: oklch(0 0 0 / 0.04); border-color: oklch(0 0 0 / 0.10); } .jae-light .jae-btn-ghost--sm:hover { background: oklch(0 0 0 / 0.08); } .jae-light .jae-empty-icon { color: oklch(0 0 0 / 0.18); } /* ── PendingPanel (HomePage) ────────────────────────────────────────────── */ .jae-pending-panel { display: flex; gap: 16px; padding: 18px 20px; background: oklch(0.70 0.16 80 / 0.07); border: 1px solid oklch(0.70 0.16 80 / 0.22); border-radius: 14px; margin-bottom: 24px; } .jae-pending-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: oklch(0.70 0.16 80 / 0.12); border: 1px solid oklch(0.70 0.16 80 / 0.22); display: flex; align-items: center; justify-content: center; color: oklch(0.80 0.16 80); margin-top: 1px; } .jae-pending-body { display: flex; flex-direction: column; gap: 4px; } /* ── Push Notification Prompt ───────────────────────────────────────── */ .jae-push-prompt { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: oklch(0.76 0.15 176 / 0.06); border: 1px solid oklch(0.76 0.15 176 / 0.18); border-radius: 14px; margin-bottom: 24px; } .jae-push-prompt--active { background: oklch(0.76 0.15 176 / 0.08); border-color: oklch(0.76 0.15 176 / 0.25); } .jae-push-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: oklch(0.76 0.15 176 / 0.12); border: 1px solid oklch(0.76 0.15 176 / 0.2); display: flex; align-items: center; justify-content: center; color: var(--jae-green); margin-top: 1px; } .jae-push-body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .jae-push-body strong { font-size: var(--jae-fs-base); color: var(--jae-text); } .jae-push-body p { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin: 0; } .jae-pending-body strong { font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 700; color: var(--jae-text); } .jae-pending-body p { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.5; margin: 0; } .jae-btn-ghost--sm { padding: 7px 14px; font-size: var(--jae-fs-sm); } /* ── Botão danger pequeno (para usar em linha com ghost--sm) ────────────── */ .jae-btn-danger--sm { padding: 7px 14px; font-size: var(--jae-fs-sm); background: oklch(0.65 0.22 25 / 0.08); border: 1px solid oklch(0.65 0.22 25 / 0.22); border-radius: 8px; color: var(--jae-error); font-family: var(--font-body); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .jae-btn-danger--sm:hover { background: oklch(0.65 0.22 25 / 0.15); border-color: oklch(0.65 0.22 25 / 0.32); } /* ── Botão success pequeno (para usar em linha com ghost--sm) ────────────── */ .jae-btn-success--sm { padding: 7px 14px; font-size: var(--jae-fs-sm); background: oklch(0.82 0.26 145 / 0.10); border: 1px solid oklch(0.82 0.26 145 / 0.28); border-radius: 8px; color: var(--jae-green); font-family: var(--font-body); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .jae-btn-success--sm:hover { background: oklch(0.82 0.26 145 / 0.18); border-color: oklch(0.82 0.26 145 / 0.42); } /* ── Botão warn pequeno (amarelo) ────────────────────────────────────────── */ .jae-btn-warn--sm { padding: 7px 14px; font-size: var(--jae-fs-sm); background: oklch(0.75 0.18 80 / 0.10); border: 1px solid oklch(0.75 0.18 80 / 0.28); border-radius: 8px; color: var(--jae-warning); font-family: var(--font-body); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .jae-btn-warn--sm:hover { background: oklch(0.75 0.18 80 / 0.18); border-color: oklch(0.75 0.18 80 / 0.42); } .jae-btn-success--sm:disabled { opacity: 0.55; cursor: not-allowed; } /* ── Ícone de sucesso (ActivatePage) ────────────────────────────────────── */ .jae-activate-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--jae-green-subtle); border: 1px solid oklch(0.82 0.26 145 / 0.25); display: flex; align-items: center; justify-content: center; color: var(--jae-green); box-shadow: 0 0 32px oklch(0.82 0.26 145 / 0.22); } /* ── Notice ─────────────────────────────────────────────────────────────── */ .jae-notice { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); padding: 10px 14px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 8px; margin-bottom: 20px; } .jae-notice--warning { border-color: var(--jae-warning); background: color-mix(in oklch, var(--jae-warning) 12%, var(--jae-glass-bg)); } /* ── Empty state ─────────────────────────────────────────────────────────── */ .jae-empty-state { text-align: center; padding: 60px 24px; color: var(--jae-text-muted); font-size: var(--jae-fs-base); line-height: 1.6; } .jae-empty-icon { width: 36px; height: 36px; margin: 0 auto 16px; color: oklch(1 0 0 / 0.18); } /* ── Responsivo staff ───────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ DASHBOARD — HOME PAGE ═══════════════════════════════════════════════════════════════════════════ */ /* ── Layout 2 colunas ────────────────────────────────────────────────────── */ .jae-dash-layout { display: grid; grid-template-columns: 1fr 368px 300px; gap: 28px; align-items: start; max-width: 1320px; margin: 0 auto; width: 100%; } .jae-dash-left { min-width: 0; } .jae-dash-right { min-width: 0; } .jae-dash-gamification { min-width: 0; } /* ── Boas-vindas ─────────────────────────────────────────────────────────── */ .jae-dash-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .jae-dash-date { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin-top: 2px; } .jae-role-chip { font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; background: var(--jae-green-subtle); color: var(--jae-green); border: 1px solid oklch(0.76 0.15 176 / 0.20); white-space: nowrap; flex-shrink: 0; } /* ── KPI grid ────────────────────────────────────────────────────────────── */ .jae-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; } .jae-kpi-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s, transform .15s; border-left: 3px solid oklch(1 0 0 / 0.08); } .jae-kpi-card:hover { border-color: oklch(1 0 0 / 0.16); transform: translateY(-1px); } .jae-kpi-card--warn { border-left-color: var(--jae-warning); } .jae-kpi-card--green { border-left-color: var(--jae-green); } .jae-kpi-card--blue { border-left-color: oklch(0.70 0.18 240); } .jae-kpi-value { font-family: var(--font-brand); font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--jae-text); } .jae-kpi-label { font-size: var(--jae-fs-xs); font-weight: 500; color: var(--jae-text-muted); letter-spacing: .02em; line-height: 1.4; } /* ── Cabeçalho de seção ──────────────────────────────────────────────────── */ .jae-section-title { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jae-text-muted); margin-bottom: 14px; } .jae-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .jae-link-sm { font-size: var(--jae-fs-xs); color: var(--jae-green-dim); text-decoration: none; transition: color .2s; } .jae-link-sm:hover { color: var(--jae-green); } /* ── Period tabs (Hoje / Semana / Mês) ───────────────────────────────────── */ .jae-period-tabs { display: flex; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 8px; padding: 2px; gap: 1px; } .jae-period-tab { padding: 3px 10px; font-size: 11px; font-family: var(--font-body); border: none; border-radius: 6px; background: transparent; color: var(--jae-text-muted); cursor: pointer; font-weight: 500; transition: background 0.15s, color 0.15s; white-space: nowrap; } .jae-period-tab:hover { color: var(--jae-text); } .jae-period-tab--active { background: var(--jae-green-subtle); color: var(--jae-green); font-weight: 600; } /* ── Day counter (Total / Concluídos / Restantes) ────────────────────────── */ .jae-day-counter { display: flex; align-items: center; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; } .jae-day-counter-item { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 3px; } .jae-day-counter-num { font-family: var(--font-brand); font-size: 22px; font-weight: 700; color: var(--jae-text); line-height: 1; } .jae-day-counter-label { font-size: 10px; color: var(--jae-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; } .jae-day-counter-item--done .jae-day-counter-num { color: var(--jae-green); } .jae-day-counter-item--pending .jae-day-counter-num { color: oklch(0.82 0.22 60); } .jae-day-counter-item--cancel .jae-day-counter-num { color: var(--jae-error); } .jae-day-counter-sep { width: 1px; height: 32px; background: var(--jae-glass-border); flex-shrink: 0; } /* ── Eye toggle (ocultar KPIs) ───────────────────────────────────────────── */ .jae-eye-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--jae-glass-border); background: var(--jae-glass-bg); color: var(--jae-text-muted); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; flex-shrink: 0; } .jae-eye-toggle:hover { background: var(--jae-input-bg); color: var(--jae-text); border-color: var(--jae-green-dim); } /* ── Acesso rápido ───────────────────────────────────────────────────────── */ .jae-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .jae-quick-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 16px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 14px; text-decoration: none; color: var(--jae-text-muted); font-size: var(--jae-fs-xs); font-weight: 500; text-align: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s; } .jae-quick-card:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.18); color: var(--jae-text); transform: translateY(-2px); } .jae-quick-card--accent { background: var(--jae-green-subtle); border-color: oklch(0.76 0.15 176 / 0.25); color: var(--jae-green); } .jae-quick-card--accent:hover { background: oklch(0.76 0.15 176 / 0.18); border-color: var(--jae-green-dim); color: var(--jae-green); transform: translateY(-2px); } .jae-quick-icon { width: 24px; height: 24px; flex-shrink: 0; } /* ── Calendário interativo (glassmorphism) ───────────────────────────────── */ .jae-cal-card { position: relative; overflow: hidden; background: oklch(1 0 0 / 0.04); border: 1px solid oklch(1 0 0 / 0.10); border-radius: 20px; padding: 22px 20px 20px; backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 0 0 1px oklch(0.76 0.15 176 / 0.05), 0 20px 60px oklch(0 0 0 / 0.30), inset 0 1px 0 oklch(1 0 0 / 0.07); } .jae-cal-card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, oklch(0.76 0.15 176 / 0.50), transparent); pointer-events: none; } .jae-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .jae-cal-month-title { font-family: var(--font-brand); font-size: 16px; font-weight: 700; color: var(--jae-text); letter-spacing: -0.3px; text-transform: capitalize; } .jae-cal-nav-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid oklch(1 0 0 / 0.10); border-radius: 8px; background: oklch(1 0 0 / 0.04); color: var(--jae-text-muted); cursor: pointer; transition: background .18s, border-color .18s, color .18s; padding: 0; flex-shrink: 0; } .jae-cal-nav-btn:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.18); color: var(--jae-text); } .jae-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; } .jae-cal-weekdays span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jae-text-muted); text-align: center; padding: 4px 0; } /* Grid de dias — animação padrão (carga inicial) */ .jae-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; animation: jae-cal-fadein .25s ease both; } .jae-cal-grid--from-right { animation: jae-cal-from-right .26s cubic-bezier(.25,.46,.45,.94) both; } .jae-cal-grid--from-left { animation: jae-cal-from-left .26s cubic-bezier(.25,.46,.45,.94) both; } @keyframes jae-cal-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes jae-cal-from-right { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } @keyframes jae-cal-from-left { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } } .jae-cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .16s, border-color .16s, transform .14s, box-shadow .16s; padding: 0; font-family: var(--font-body); color: var(--jae-text); line-height: 1; } .jae-cal-day:hover:not(.jae-cal-day--selected):not(.jae-cal-day--empty) { background: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.12); transform: scale(1.08); } .jae-cal-day--empty { pointer-events: none; cursor: default; visibility: hidden; } .jae-cal-day--today { border-color: oklch(0.76 0.15 176 / 0.38); } .jae-cal-day--today .jae-cal-day-num { color: var(--jae-green); font-weight: 700; } .jae-cal-day--selected { background: oklch(0.76 0.15 176 / 0.16); border-color: oklch(0.76 0.15 176 / 0.48); box-shadow: 0 0 14px oklch(0.76 0.15 176 / 0.22); } .jae-cal-day--selected .jae-cal-day-num { color: var(--jae-green); font-weight: 700; } .jae-cal-day-num { font-size: var(--jae-fs-xs); font-weight: 500; line-height: 1; } .jae-cal-dot { font-size: 8px; font-weight: 700; color: var(--jae-green); line-height: 1; background: oklch(0.76 0.15 176 / 0.18); border-radius: 3px; padding: 1px 3px; min-width: 12px; text-align: center; } /* ── Lista de agendamentos ───────────────────────────────────────────────── */ .jae-appt-list { display: flex; flex-direction: column; gap: 6px; } .jae-appt-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 10px; text-decoration: none; color: var(--jae-text); font-size: var(--jae-fs-sm); transition: background .2s, border-color .2s; min-width: 0; overflow: hidden; } .jae-appt-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .jae-appt-row:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.16); } .jae-appt-time { font-family: var(--font-brand); font-size: var(--jae-fs-sm); font-weight: 700; color: var(--jae-green); flex-shrink: 0; letter-spacing: .02em; } .jae-appt-sep { color: var(--jae-text-muted); flex-shrink: 0; } .jae-appt-ref { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jae-appt-desc { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* ── Badge warn ──────────────────────────────────────────────────────────── */ .jae-badge--warn { background: oklch(0.75 0.18 80 / 0.15); color: var(--jae-warning); border-color: oklch(0.75 0.18 80 / 0.30); } .jae-badge--error { background: oklch(0.65 0.22 25 / 0.12); color: var(--jae-error); border: 1px solid oklch(0.65 0.22 25 / 0.28); } .jae-badge--info { background: oklch(0.70 0.16 250 / 0.12); color: oklch(0.75 0.14 250); border: 1px solid oklch(0.70 0.16 250 / 0.28); } /* ── Abas de filtro coloridas por status ─────────────────────────────────── */ .jae-filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: 1px solid var(--jae-glass-border); background: oklch(1 0 0 / 0.03); color: var(--jae-text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s; } .jae-filter-tab:hover { background: oklch(1 0 0 / 0.07); color: var(--jae-text); } .jae-filter-tab--all.jae-filter-tab--active { background: oklch(1 0 0 / 0.12); border-color: oklch(1 0 0 / 0.22); color: var(--jae-text); } .jae-filter-tab--pending.jae-filter-tab--active { background: oklch(0.75 0.18 80 / 0.16); border-color: oklch(0.75 0.18 80 / 0.35); color: oklch(0.80 0.16 80); } .jae-filter-tab--paid.jae-filter-tab--active { background: oklch(0.78 0.20 145 / 0.16); border-color: oklch(0.78 0.20 145 / 0.35); color: var(--jae-green); } .jae-filter-tab--failed.jae-filter-tab--active { background: oklch(0.65 0.22 25 / 0.16); border-color: oklch(0.65 0.22 25 / 0.35); color: var(--jae-error); } .jae-filter-tab--refunded.jae-filter-tab--active { background: oklch(0.70 0.16 250 / 0.16); border-color: oklch(0.70 0.16 250 / 0.35); color: oklch(0.75 0.14 250); } .jae-light .jae-filter-tab { background: oklch(0 0 0 / 0.02); border-color: oklch(0 0 0 / 0.10); } .jae-light .jae-filter-tab:hover { background: oklch(0 0 0 / 0.05); } /* ── Botão "estou fora" (ausência) ───────────────────────────────────────── */ .jae-btn-away { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px 8px 14px; background: oklch(0.75 0.18 80 / 0.10); border: 1px solid oklch(0.75 0.18 80 / 0.32); border-radius: 100px; color: var(--jae-warning); font-family: var(--font-body); font-size: var(--jae-fs-sm); font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s; } .jae-btn-away svg { flex-shrink: 0; } .jae-btn-away:hover { background: oklch(0.75 0.18 80 / 0.18); border-color: oklch(0.75 0.18 80 / 0.50); transform: translateY(-1px); box-shadow: 0 4px 14px oklch(0.75 0.18 80 / 0.20); } .jae-btn-away:active { transform: translateY(0); } /* ── Form divider ──────────────────────────────────────────────────────────── */ .jae-form-divider { border: none; border-top: 1px solid var(--jae-glass-border); margin: 24px 0; } /* ═══════════════════════════════════════════════════════════════════════════ GAMIFICATION — DASHBOARD COLUMN ═══════════════════════════════════════════════════════════════════════════ */ .jae-dash-gamification { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* ── Card base ──────────────────────────────────────────────────────────── */ .jae-gam-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 14px; padding: 16px 18px; transition: border-color .2s; } .jae-gam-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .jae-gam-label { font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jae-text-muted); } /* ── Level badge ────────────────────────────────────────────────────────── */ .jae-gam-level-badge { font-family: var(--font-brand); font-size: var(--jae-fs-xs); font-weight: 700; letter-spacing: .04em; padding: 3px 12px; border-radius: 100px; text-transform: uppercase; } .jae-gam-badge--iniciante { background: oklch(0.60 0.05 280 / 0.15); color: oklch(0.65 0.06 280); border: 1px solid oklch(0.60 0.05 280 / 0.25); } .jae-gam-badge--bronze { background: oklch(0.70 0.10 60 / 0.20); color: oklch(0.75 0.12 60); border: 1px solid oklch(0.70 0.10 60 / 0.30); } .jae-gam-badge--prata { background: oklch(0.80 0.04 240 / 0.15); color: oklch(0.85 0.05 240); border: 1px solid oklch(0.80 0.04 240 / 0.25); } .jae-gam-badge--ouro { background: oklch(0.80 0.14 90 / 0.20); color: oklch(0.85 0.16 90); border: 1px solid oklch(0.80 0.14 90 / 0.30); } .jae-gam-badge--esmeralda { background: oklch(0.75 0.15 170 / 0.20); color: oklch(0.80 0.16 170); border: 1px solid oklch(0.75 0.15 170 / 0.30); } .jae-gam-badge--rubi { background: oklch(0.65 0.20 20 / 0.20); color: oklch(0.70 0.22 20); border: 1px solid oklch(0.65 0.20 20 / 0.30); } .jae-gam-badge--diamante { background: oklch(0.85 0.08 260 / 0.18); color: oklch(0.90 0.10 260); border: 1px solid oklch(0.85 0.08 260 / 0.28); } /* ── XP progress bar ────────────────────────────────────────────────────── */ .jae-gam-progress-track { height: 6px; background: oklch(1 0 0 / 0.08); border-radius: 100px; overflow: hidden; margin-bottom: 8px; } .jae-gam-progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--jae-green-dim), var(--jae-green)); transition: width .6s ease; } .jae-gam-progress-label { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); font-weight: 500; } /* ── Stat rows ──────────────────────────────────────────────────────────── */ .jae-gam-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; } .jae-gam-stat-row + .jae-gam-stat-row { border-top: 1px solid oklch(1 0 0 / 0.06); } .jae-gam-stat-label { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); } .jae-gam-stat-value { font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 700; color: var(--jae-text); } /* ── Milestone / next level ─────────────────────────────────────────────── */ .jae-gam-milestone { display: flex; align-items: center; justify-content: space-between; } .jae-gam-next-level { font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 700; color: var(--jae-green); } .jae-gam-xp-remaining { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); } .jae-gam-milestone-detail { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .jae-gam-max-msg { font-size: var(--jae-fs-sm); color: var(--jae-green); font-weight: 600; } /* ── Level history (expandable) ─────────────────────────────────────────── */ .jae-gam-history { padding: 0; overflow: hidden; } .jae-gam-history-summary { font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jae-text-muted); cursor: pointer; padding: 14px 18px; user-select: none; } .jae-gam-history-summary:hover { color: var(--jae-text); } .jae-gam-history-table { border-top: 1px solid var(--jae-glass-border); padding: 10px 18px 14px; } .jae-gam-history-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 5px 0; font-size: var(--jae-fs-xs); color: var(--jae-text-muted); align-items: center; } .jae-gam-history-row--header { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--jae-text-muted); padding-bottom: 6px; border-bottom: 1px solid oklch(1 0 0 / 0.06); margin-bottom: 4px; } .jae-gam-history-row .jae-gam-level-badge { font-size: 10px; padding: 1px 8px; justify-self: start; } /* ── Field hint ───────────────────────────────────────────────────────────── */ .jae-field-hint { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); margin-top: 2px; } .jae-field-hint--error { color: var(--jae-error); } /* ── Textarea ─────────────────────────────────────────────────────────────── */ .jae-textarea { resize: vertical; min-height: 72px; padding: 13px 16px; line-height: 1.5; } /* ── Toggle switch ────────────────────────────────────────────────────────── */ .jae-toggle-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; } .jae-toggle-label > span { font-size: var(--jae-fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); } .jae-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .jae-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .jae-toggle-slider { width: 40px; height: 22px; background: var(--jae-input-border); border-radius: 11px; transition: background 0.25s; position: relative; } .jae-toggle-slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.25s; } .jae-toggle input:checked + .jae-toggle-slider { background: var(--jae-green-dim); } .jae-toggle input:checked + .jae-toggle-slider::after { transform: translateX(18px); } /* ── Logo preview ─────────────────────────────────────────────────────────── */ .jae-logo-preview { margin-top: 8px; border: 1px solid var(--jae-glass-border); border-radius: 8px; padding: 8px; background: var(--jae-glass-bg); display: inline-flex; } .jae-logo-preview img { max-height: 64px; max-width: 200px; object-fit: contain; border-radius: 4px; } /* ── Config: layout de duas colunas ──────────────────────────────────────── */ .jae-config-layout { display: grid; grid-template-columns: minmax(0, 560px) 360px; gap: 48px; } .jae-config-form-col { min-width: 0; } /* Coluna direita: barra de ações (salvar) + prévia, empilhadas e "curtas" em relação ao formulário, pra não herdar a altura da linha do grid. */ .jae-config-side-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Barra de ações (salvar) fixa no canto superior direito da tela. position:fixed (não sticky) porque a coluna da prévia é mais curta que o formulário — um sticky preso a ela "descolaria" da tela ao rolar o form inteiro. Fixed a ancora direto no viewport, sempre visível. */ .jae-config-actions { position: fixed; top: 68px; /* 52px topbar + 16px breathing room */ right: 28px; z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .jae-config-save-btn { width: auto; margin-top: 0; padding: 12px 28px; } .jae-config-preview-col { position: sticky; top: 130px; /* abaixo da barra de ações fixa (68px + botão + respiro) */ max-height: calc(100vh - 146px); overflow-y: auto; scrollbar-width: thin; } @media (max-width: 960px) { .jae-config-layout { grid-template-columns: 1fr; } .jae-config-actions { position: static; align-items: stretch; } .jae-config-save-btn { width: 100%; } .jae-config-preview-col { display: none; } } /* ── Preview: frame de telefone ───────────────────────────────────────────── */ .jae-preview-wrap { display: flex; flex-direction: column; gap: 10px; } .jae-preview-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); padding-left: 2px; } .jae-preview-phone { container-type: inline-size; container-name: jae-preview; border-radius: 16px; border: 1px solid var(--jae-glass-border); background: var(--jae-glass-bg); overflow: hidden; box-shadow: 0 4px 24px oklch(0 0 0 / 0.12); } /* banner menor na preview */ .jae-preview-banner { height: 110px !important; } /* ── Preview: tipografia reage ao espaço real do frame (container query), não ao viewport da página — evita que o nome do negócio estoure a largura do preview em telas largas, sem precisar quebrar a palavra. ── */ .jae-preview-phone .jae-pub-identity-name { font-size: clamp(13px, 8.5cqi, 22px); white-space: nowrap; } .jae-preview-phone .jae-pub-identity { min-width: 0; } .jae-preview-phone .jae-pub-identity-logo, .jae-preview-phone .jae-pub-identity-avatar { width: clamp(48px, 20cqi, 84px); height: clamp(48px, 20cqi, 84px); } /* ── Preview: ghost cards de serviços ────────────────────────────────────── */ .jae-preview-ghost-card { cursor: default !important; pointer-events: none; } .jae-preview-ghost-card:hover { transform: none !important; box-shadow: none !important; } .jae-preview-ghost-line { border-radius: 6px; background: var(--jae-glass-border); opacity: 0.5; } /* ── Upload: botão ────────────────────────────────────────────────────────── */ .jae-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1.5px dashed var(--jae-glass-border); background: var(--jae-glass-bg); color: var(--jae-text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; user-select: none; margin-top: 6px; } .jae-upload-btn:hover:not(.jae-upload-btn--busy) { border-color: var(--jae-accent); color: var(--jae-accent); background: oklch(from var(--jae-accent) l c h / 0.06); } .jae-upload-btn--busy { opacity: 0.6; cursor: wait; } /* ── Upload: avatar (logo) ────────────────────────────────────────────────── */ .jae-upload-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .jae-avatar-wrap { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--jae-glass-border); background: var(--jae-glass-bg); } .jae-avatar-img { width: 100%; height: 100%; object-fit: cover; } .jae-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--jae-accent); } .jae-upload-actions { display: flex; align-items: center; gap: 8px; } .jae-upload-remove { background: none; border: none; cursor: pointer; color: var(--jae-text-secondary); font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; transition: color .15s, background .15s; } .jae-upload-remove:hover { color: oklch(0.6 0.2 25); background: oklch(0.6 0.2 25 / 0.08); } /* ── Upload: banner preview ───────────────────────────────────────────────── */ .jae-banner-preview { position: relative; margin-top: 6px; margin-bottom: 8px; border-radius: 10px; overflow: hidden; border: 1px solid var(--jae-glass-border); aspect-ratio: 3 / 1; max-width: 100%; } .jae-banner-preview img { width: 100%; height: 100%; object-fit: cover; } .jae-banner-remove { position: absolute; top: 6px; right: 6px; background: oklch(0.1 0 0 / 0.55); border: none; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 0.7rem; transition: background .15s; } .jae-banner-remove:hover { background: oklch(0.6 0.2 25 / 0.8); } /* ── Galeria ──────────────────────────────────────────────────────────────── */ .jae-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 4px; } .jae-gallery-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--jae-glass-border); } .jae-gallery-item img { width: 100%; height: 100%; object-fit: cover; } .jae-gallery-remove { position: absolute; top: 4px; right: 4px; background: oklch(0.1 0 0 / 0.55); border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 0.65rem; transition: background .15s; opacity: 0; } .jae-gallery-item:hover .jae-gallery-remove { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════════════════════════════════════ */ .jae-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; max-width: 400px; pointer-events: none; } .jae-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--jae-bg2); border: 1px solid var(--jae-glass-border); box-shadow: 0 8px 32px rgba(0,0,0,0.18); cursor: pointer; animation: jae-toast-in 0.3s ease-out; backdrop-filter: blur(12px); } @keyframes jae-toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .jae-toast--success { border-left: 4px solid var(--jae-success); } .jae-toast--error { border-left: 4px solid var(--jae-error); } .jae-toast--info { border-left: 4px solid var(--jae-primary, #3B82F6); } .jae-toast--warning { border-left: 4px solid var(--jae-warning); } .jae-toast-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--jae-fs-base); font-weight: 700; color: #fff; } .jae-toast--success .jae-toast-icon { background: var(--jae-success); } .jae-toast--error .jae-toast-icon { background: var(--jae-error); } .jae-toast--info .jae-toast-icon { background: var(--jae-primary, #3B82F6); } .jae-toast--warning .jae-toast-icon { background: var(--jae-warning); } .jae-toast-body { flex: 1; min-width: 0; } .jae-toast-title { font-size: var(--jae-fs-base); font-weight: 600; color: var(--jae-text); margin-bottom: 2px; } .jae-toast-message { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.4; } .jae-toast-close { flex-shrink: 0; background: none; border: none; color: var(--jae-text-muted); font-size: var(--jae-fs-base); cursor: pointer; padding: 2px 4px; line-height: 1; opacity: 0.6; transition: opacity 0.15s; } .jae-toast-close:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ CONFIRM DIALOG ═══════════════════════════════════════════════════════════════════════════ */ .jae-confirm-dialog { max-width: 400px; text-align: center; } .jae-confirm-icon { font-size: 36px; margin-bottom: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVO — MOBILE / TABLET ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .jae-dash-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .jae-sidebar { width: 100%; height: auto; bottom: auto; flex-direction: row; align-items: center; padding: 0 12px; border-right: none; border-bottom: 1px solid var(--jae-glass-border); overflow-x: auto; overflow-y: hidden; } .jae-sidebar-brand, .jae-sidebar-footer { display: none; } .jae-sidebar-nav { flex-direction: row; padding: 4px 0; gap: 0; overflow: visible; } .jae-sidebar-link { padding: 8px 10px; gap: 6px; font-size: var(--jae-fs-xs); white-space: nowrap; } .jae-sidebar-icon { width: 18px; height: 18px; } .jae-sidebar-label { opacity: 1; } .jae-sidebar:hover { width: 100%; } /* No hover expand on mobile */ .jae-sidebar--pinned { width: 100%; } .jae-topbar { left: 0; } .jae-sidebar--pinned ~ .jae-topbar { left: 0; } .jae-main { margin-left: 0; margin-top: 52px; padding: 20px 16px; } .jae-sidebar--pinned ~ .jae-main { margin-left: 0; } .jae-topbar-email { display: none; } } @media (max-width: 600px) { .jae-staff-header { flex-direction: column; align-items: flex-start; } .jae-staff-grid { grid-template-columns: 1fr; } .jae-modal-actions { flex-direction: column; } .jae-btn-danger-solid { flex: unset; width: 100%; } .jae-kpi-value { font-size: 24px; } .jae-dash-welcome { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════════════════════ LANDING PAGE ═══════════════════════════════════════════════════════════════════════════ */ .jae-landing { position: relative; z-index: 1; width: 100%; min-height: 100vh; display: flex; flex-direction: column; } /* ── Navbar ──────────────────────────────────────────────────────────────── */ .jae-landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: 1200px; margin: 0 auto; width: 100%; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .jae-landing-logo { font-family: var(--font-brand); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--jae-text); text-decoration: none; display: flex; align-items: center; gap: 2px; } .jae-landing-logo-mark { color: var(--jae-green); text-shadow: 0 0 16px var(--jae-green-glow); } .jae-landing-nav-links { display: flex; align-items: center; gap: 4px; } .jae-landing-nav-link { padding: 6px 14px; border-radius: 8px; font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text-muted); text-decoration: none; transition: background 0.15s, color 0.15s; } .jae-landing-nav-link:hover { background: oklch(1 0 0 / 0.06); color: var(--jae-text); } .jae-landing-nav-actions { display: flex; align-items: center; gap: 10px; } .jae-landing-btn-ghost { padding: 8px 18px; border-radius: 10px; font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text); text-decoration: none; transition: background 0.15s; } .jae-landing-btn-ghost:hover { background: oklch(1 0 0 / 0.06); } .jae-landing-btn-primary { padding: 8px 20px; border-radius: 10px; font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 700; letter-spacing: 0.02em; color: var(--jae-cta-text); background: var(--jae-green); text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; box-shadow: 0 0 24px oklch(0.82 0.26 145 / 0.35); } .jae-landing-btn-primary:hover { background: oklch(0.88 0.26 145); box-shadow: 0 0 36px oklch(0.82 0.26 145 / 0.55); transform: translateY(-1px); } .jae-landing-btn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--jae-text); text-decoration: none; transition: background 0.15s; } .jae-landing-btn-icon:hover { background: oklch(1 0 0 / 0.08); } /* ── Hero ────────────────────────────────────────────────────────────────── */ .jae-landing-hero { display: flex; align-items: center; justify-content: space-between; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 40px 32px 80px; width: 100%; flex: 1; } .jae-landing-hero-content { max-width: 560px; display: flex; flex-direction: column; gap: 20px; } .jae-landing-hero-title { font-family: var(--font-brand); font-size: 52px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.12; color: var(--jae-text); text-wrap: pretty; } .jae-landing-hero-title em { font-style: normal; color: var(--jae-green); text-shadow: 0 0 32px var(--jae-green-glow); } .jae-landing-hero-sub { font-size: 16px; font-weight: 300; color: var(--jae-text-muted); line-height: 1.7; max-width: 460px; text-wrap: pretty; } .jae-landing-hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .jae-landing-hero-cta { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 12px; font-family: var(--font-brand); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: var(--jae-cta-text); background: var(--jae-green); text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; box-shadow: 0 0 32px oklch(0.82 0.26 145 / 0.45), 0 4px 16px oklch(0 0 0 / 0.3); } .jae-landing-hero-cta:hover { background: oklch(0.88 0.26 145); box-shadow: 0 0 48px oklch(0.82 0.26 145 / 0.65), 0 6px 20px oklch(0 0 0 / 0.3); transform: translateY(-1px); } .jae-landing-hero-secondary { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 12px; font-family: var(--font-body); font-size: var(--jae-fs-md); font-weight: 500; color: var(--jae-text); text-decoration: none; background: oklch(1 0 0 / 0.05); border: 1px solid var(--jae-glass-border); transition: background 0.2s, border-color 0.2s, transform 0.15s; } .jae-landing-hero-secondary:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.18); transform: translateY(-1px); } .jae-landing-hero-note { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); font-weight: 300; } /* ── Phone mockup ───────────────────────────────────────────────────────── */ .jae-landing-hero-visual { flex-shrink: 0; width: 260px; perspective: 800px; } .jae-phone-mockup { width: 100%; aspect-ratio: 9 / 19; transition: transform 0.08s ease-out; transform-style: preserve-3d; transform: perspective(800px) rotateX(0deg) rotateY(0deg); margin: 0 auto; filter: drop-shadow(0 40px 80px oklch(0 0 0 / 0.5)); } .jae-phone-frame { position: relative; width: 100%; height: 100%; background: linear-gradient(145deg, oklch(0.18 0.02 150), oklch(0.12 0.015 150)); border-radius: 40px; padding: 10px; box-shadow: inset 0 0 0 2px oklch(1 0 0 / 0.08), inset 0 0 0 4px oklch(0 0 0 / 0.3), 0 0 0 1px oklch(1 0 0 / 0.06); } .jae-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 24px; background: oklch(0.08 0.02 150); border-radius: 0 0 16px 16px; z-index: 3; } .jae-phone-notch::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: oklch(0.12 0.02 150); border: 1px solid oklch(1 0 0 / 0.06); } .jae-phone-mockup, .jae-phone-screen { user-select: none; -webkit-user-select: none; } .jae-phone-screen { width: 100%; height: 100%; border-radius: 32px; background: var(--jae-bg); overflow: hidden; display: flex; flex-direction: column; position: relative; z-index: 2; color: var(--jae-text); } /* ── Status bar ─────────────────────────────────────────────────────────── */ .jae-phone-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 6px; font-size: var(--jae-fs-xs); font-weight: 600; color: var(--jae-text); flex-shrink: 0; } .jae-phone-statusbar svg { color: var(--jae-text); opacity: 0.7; } /* ── App header ─────────────────────────────────────────────────────────── */ .jae-phone-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 10px; flex-shrink: 0; } .jae-phone-logo { font-family: var(--font-brand); font-size: var(--jae-fs-lg); font-weight: 800; letter-spacing: -0.3px; } .jae-phone-logo-mark { color: var(--jae-green); } .jae-phone-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.62 0.18 176), oklch(0.44 0.16 210)); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: 10px; font-weight: 800; color: oklch(0.97 0.005 150); flex-shrink: 0; } /* ── Greeting ───────────────────────────────────────────────────────────── */ .jae-phone-greeting { padding: 0 16px 12px; flex-shrink: 0; } .jae-phone-greeting-text { font-family: var(--font-brand); font-size: 16px; font-weight: 700; display: block; margin-bottom: 2px; } .jae-phone-greeting-date { font-size: 10px; color: var(--jae-text-muted); display: block; } /* ── KPI cards ──────────────────────────────────────────────────────────── */ .jae-phone-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px 12px; flex-shrink: 0; } .jae-phone-kpi { background: oklch(1 0 0 / 0.04); border: 1px solid oklch(1 0 0 / 0.08); border-radius: 10px; padding: 10px 12px; border-left: 2px solid oklch(1 0 0 / 0.08); } .jae-phone-kpi--warn { border-left-color: var(--jae-warning); } .jae-phone-kpi--green { border-left-color: var(--jae-green); } .jae-phone-kpi-value { font-family: var(--font-brand); font-size: var(--jae-fs-lg); font-weight: 700; letter-spacing: -0.5px; display: block; line-height: 1; margin-bottom: 3px; } .jae-phone-kpi-label { font-size: 8px; color: var(--jae-text-muted); display: block; line-height: 1.3; } /* ── Mini calendar ──────────────────────────────────────────────────────── */ .jae-phone-cal { margin: 0 16px 12px; padding: 10px 12px; background: oklch(1 0 0 / 0.03); border: 1px solid oklch(1 0 0 / 0.08); border-radius: 12px; flex-shrink: 0; } .jae-phone-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: var(--font-brand); font-size: var(--jae-fs-xs); font-weight: 700; text-transform: capitalize; } .jae-phone-cal-nav { display: flex; gap: 6px; color: var(--jae-text-muted); } .jae-phone-cal-nav svg { display: block; } .jae-phone-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .jae-phone-cal-weekdays span { font-size: 8px; font-weight: 600; text-transform: uppercase; color: var(--jae-text-muted); text-align: center; } .jae-phone-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); } .jae-phone-cal-days span { font-size: 9px; font-weight: 500; text-align: center; padding: 3px 0; border-radius: 6px; color: var(--jae-text-muted); } .jae-phone-cal-today { background: oklch(0.76 0.15 176 / 0.18); color: var(--jae-green) !important; font-weight: 700 !important; } /* ── Quick access ───────────────────────────────────────────────────────── */ .jae-phone-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jae-text-muted); padding: 0 16px 8px; flex-shrink: 0; } .jae-phone-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 16px; flex-shrink: 0; } .jae-phone-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: oklch(1 0 0 / 0.04); border: 1px solid oklch(1 0 0 / 0.08); color: var(--jae-text-muted); text-decoration: none; font-size: 8px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .jae-phone-quick-btn:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.14); color: var(--jae-text); } .jae-phone-quick-btn--accent { background: var(--jae-green-subtle); border-color: oklch(0.76 0.15 176 / 0.22); color: var(--jae-green); } .jae-phone-quick-btn--accent:hover { background: oklch(0.76 0.15 176 / 0.18); border-color: var(--jae-green-dim); color: var(--jae-green); } /* ── Tab bar ────────────────────────────────────────────────────────────── */ .jae-phone-tabbar { display: flex; align-items: center; justify-content: space-around; padding: 6px 12px 4px; border-top: 1px solid oklch(1 0 0 / 0.08); margin-top: auto; flex-shrink: 0; } .jae-phone-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--jae-text-muted); font-size: 8px; font-weight: 500; } .jae-phone-tab--active { color: var(--jae-green); } .jae-phone-homebar { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; border-radius: 2px; background: oklch(1 0 0 / 0.12); z-index: 3; } /* ── Sections ────────────────────────────────────────────────────────────── */ .jae-landing-section { max-width: 1200px; margin: 0 auto; padding: 80px 32px; width: 100%; } .jae-landing-section--alt { background: oklch(1 0 0 / 0.02); max-width: 100%; padding-left: 0; padding-right: 0; } .jae-landing-section--alt > * { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } .jae-landing-section-title { font-family: var(--font-brand); font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; text-align: center; color: var(--jae-text); margin-bottom: 14px; } .jae-landing-section-title em { font-style: normal; color: var(--jae-green); text-shadow: 0 0 24px var(--jae-green-glow); } .jae-landing-section-sub { font-size: 16px; font-weight: 300; color: var(--jae-text-muted); text-align: center; max-width: 520px; margin: 0 auto 56px; line-height: 1.6; } /* ── Features grid ───────────────────────────────────────────────────────── */ .jae-landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jae-landing-feature-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 18px; padding: 28px 24px 24px; transition: border-color 0.2s, transform 0.15s; display: flex; flex-direction: column; gap: 10px; } .jae-landing-feature-card:hover { border-color: oklch(1 0 0 / 0.16); transform: translateY(-2px); } .jae-landing-feature-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--jae-green-subtle); border: 1px solid oklch(0.76 0.15 176 / 0.18); display: flex; align-items: center; justify-content: center; color: var(--jae-green); flex-shrink: 0; } .jae-landing-feature-title { font-family: var(--font-brand); font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--jae-text); margin: 0; } .jae-landing-feature-desc { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.6; margin: 0; } /* ── Testimonials ────────────────────────────────────────────────────────── */ .jae-landing-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .jae-landing-testimonial { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; } .jae-landing-testimonial-stars { display: flex; gap: 3px; color: var(--jae-warning); } .jae-landing-testimonial-text { font-size: var(--jae-fs-base); color: var(--jae-text); line-height: 1.65; font-weight: 300; flex: 1; } .jae-landing-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--jae-glass-border); } .jae-landing-testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.62 0.18 176), oklch(0.44 0.16 210)); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 800; color: oklch(0.97 0.005 150); flex-shrink: 0; } .jae-landing-testimonial-name { font-size: var(--jae-fs-base); font-weight: 600; color: var(--jae-text); } .jae-landing-testimonial-role { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); } /* ── CTA section ─────────────────────────────────────────────────────────── */ .jae-landing-cta-section { max-width: 1200px; margin: 0 auto; padding: 60px 32px 80px; width: 100%; } .jae-landing-cta-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 28px; padding: 64px 40px; text-align: center; backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); box-shadow: 0 0 0 1px oklch(0.82 0.26 145 / 0.06), 0 32px 80px oklch(0 0 0 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.08); position: relative; overflow: hidden; } .jae-landing-cta-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, oklch(0.82 0.26 145 / 0.5) 50%, transparent 100%); } .jae-landing-cta-title { font-family: var(--font-brand); font-size: 38px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.15; color: var(--jae-text); margin-bottom: 16px; } .jae-landing-cta-title em { font-style: normal; color: var(--jae-green); text-shadow: 0 0 28px var(--jae-green-glow); } .jae-landing-cta-sub { font-size: 16px; font-weight: 300; color: var(--jae-text-muted); margin-bottom: 28px; line-height: 1.6; } .jae-landing-cta-note { font-size: var(--jae-fs-base); color: var(--jae-text-muted); margin-top: 20px; } .jae-landing-cta-link { color: var(--jae-green); text-decoration: none; font-weight: 500; transition: color 0.2s; } .jae-landing-cta-link:hover { color: oklch(0.90 0.26 145); } /* ── Footer ──────────────────────────────────────────────────────────────── */ .jae-landing-footer { border-top: 1px solid var(--jae-glass-border); padding: 24px 32px; } .jae-landing-footer-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .jae-landing-footer-brand { display: flex; flex-direction: column; gap: 2px; } .jae-landing-footer-text { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); padding-left: 2px; } .jae-landing-footer-links { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .jae-landing-footer-link { padding: 6px 14px; border-radius: 8px; font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text-muted); text-decoration: none; transition: background 0.15s, color 0.15s; } .jae-landing-footer-link:hover { background: oklch(1 0 0 / 0.06); color: var(--jae-text); } .jae-landing-footer-bottom { max-width: 1200px; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid var(--jae-glass-border); text-align: center; font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } /* ── Responsivo landing ──────────────────────────────────────────────────── */ @media (max-width: 1024px) { .jae-landing-features { grid-template-columns: repeat(2, 1fr); } .jae-landing-testimonials { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } @media (max-width: 860px) { .jae-landing-hero { flex-direction: column; padding: 32px 24px 60px; text-align: center; } .jae-landing-hero-content { align-items: center; } .jae-landing-hero-sub { max-width: 100%; } .jae-landing-hero-title { font-size: 38px; } .jae-landing-hero-visual { width: 220px; } .jae-landing-hero-actions { justify-content: center; } .jae-landing-nav-links { display: none; } .jae-landing-section-title { font-size: 28px; } .jae-landing-cta-title { font-size: 30px; } .jae-landing-footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; } .jae-landing-footer-links { justify-content: center; } .jae-landing-footer-text { padding-left: 0; text-align: center; } } @media (max-width: 640px) { .jae-landing-features { grid-template-columns: 1fr; } .jae-landing-nav { padding: 14px 56px 14px 16px; } .jae-landing-hero-title { font-size: 30px; } .jae-landing-hero-visual { width: 160px; } .jae-phone-notch { display: none; } .jae-phone-frame { border-radius: 28px; padding: 6px; } .jae-phone-screen { font-size: 8px; } .jae-phone-kpi-value { font-size: var(--jae-fs-base); } .jae-phone-logo { font-size: var(--jae-fs-base); } .jae-phone-header { padding: 2px 10px 6px; } .jae-phone-greeting { padding: 0 10px 8px; } .jae-phone-greeting-text { font-size: var(--jae-fs-xs); } .jae-phone-greeting-date { font-size: 8px; } .jae-phone-kpis { padding: 0 10px 8px; gap: 4px; } .jae-phone-kpi { padding: 6px 8px; } .jae-phone-kpi-label { font-size: 7px; } .jae-phone-quick { padding: 0 10px; gap: 4px; } .jae-phone-quick-btn { padding: 4px 2px; font-size: 7px; } .jae-phone-cal { margin: 0 10px 8px; padding: 6px 8px; } .jae-phone-section-label { padding: 0 10px 4px; font-size: 8px; } .jae-phone-tabbar { padding: 4px 8px 2px; } .jae-phone-tab { font-size: 7px; } .jae-landing-hero-actions { flex-direction: column; width: 100%; max-width: 100%; } .jae-landing-hero-cta, .jae-landing-hero-secondary { width: 100%; max-width: 100%; justify-content: center; box-sizing: border-box; } flex-direction: column; width: 100%; } .jae-landing-hero-cta, .jae-landing-hero-secondary { width: 100%; justify-content: center; } .jae-landing-section { padding: 56px 16px; } .jae-landing-cta-section { padding: 40px 16px 60px; } .jae-landing-cta-card { padding: 40px 24px; } .jae-landing-cta-title { font-size: var(--jae-fs-2xl); } .jae-landing-nav-actions .jae-landing-btn-ghost { display: none; } } @media (prefers-reduced-motion: reduce) { .jae-phone-mockup { transition: none !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ FORM BUILDER — DRAG & DROP ═══════════════════════════════════════════════════════════════════════════ */ /* ── Duration picker (H : M : S) ───────────────────────────────────────── */ .jae-duration-picker { display: flex; align-items: center; gap: 8px; } .jae-duration-box { display: flex; flex-direction: column; align-items: center; gap: 4px; } .jae-duration-input { width: 72px; height: 64px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 12px; color: var(--jae-text); font-family: var(--font-brand); font-size: 26px; font-weight: 700; text-align: center; padding: 0; outline: none; -moz-appearance: textfield; appearance: textfield; transition: border-color 0.15s, box-shadow 0.15s; } .jae-duration-input::-webkit-outer-spin-button, .jae-duration-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jae-duration-input:focus { border-color: var(--jae-green); box-shadow: 0 0 0 2px var(--jae-green-subtle); } .jae-duration-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jae-text-muted); } .jae-duration-sep { font-family: var(--font-brand); font-size: 28px; font-weight: 700; color: var(--jae-text-muted); padding-bottom: 18px; user-select: none; } /* ── Toolbox (paleta de tipos) ──────────────────────────────────────────── */ .jae-form-field-toolbox { margin-top: 12px; } .jae-form-field-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .jae-form-field-chip { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--chip-color) 35%, transparent); background: color-mix(in srgb, var(--chip-color) 10%, transparent); color: var(--chip-color); cursor: grab; font-size: var(--jae-fs-sm); font-weight: 500; transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s; user-select: none; -webkit-user-select: none; } .jae-form-field-chip:hover { background: color-mix(in srgb, var(--chip-color) 20%, transparent); border-color: color-mix(in srgb, var(--chip-color) 60%, transparent); transform: translateY(-2px); box-shadow: 0 4px 16px color-mix(in srgb, var(--chip-color) 15%, transparent); } .jae-form-field-chip:active { cursor: grabbing; transform: scale(0.95) translateY(0); } .jae-form-field-chip-icon { font-size: var(--jae-fs-lg); line-height: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .jae-form-field-chip-label { font-size: var(--jae-fs-xs); line-height: 1; white-space: nowrap; } /* ── Drop zone ──────────────────────────────────────────────────────────── */ .jae-form-field-dropzone { margin-top: 12px; min-height: 90px; border: 2px dashed var(--jae-glass-border); border-radius: 14px; padding: 12px; transition: border-color 0.25s, background 0.25s; } .jae-form-field-dropzone.drag-over { border-color: var(--jae-green-dim); background: color-mix(in srgb, var(--jae-green) 6%, transparent); } .jae-form-field-empty { display: flex; align-items: center; justify-content: center; min-height: 66px; color: var(--jae-text-muted); font-size: var(--jae-fs-sm); text-align: center; padding: 0 16px; } /* ── Field items (campos colocados) ─────────────────────────────────────── */ .jae-form-field-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 12px; transition: border-color 0.2s, box-shadow 0.2s, background 0.15s; position: relative; } .jae-form-field-row { display: flex; align-items: center; gap: 10px; width: 100%; } /* ── Editor de opções (Seleção / Opção única / Múltipla escolha) ─────────── */ .jae-form-field-options { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px 0 2px 32px; margin-top: 2px; border-top: 1px dashed var(--jae-glass-border); } .jae-form-field-option-row { display: flex; align-items: center; gap: 8px; } .jae-form-field-option-bullet { color: var(--jae-text-muted); font-size: var(--jae-fs-sm); flex-shrink: 0; width: 14px; text-align: center; } .jae-form-field-option-input { flex: 1; min-width: 0; padding: 7px 10px; background: var(--jae-input-bg); border: 1px solid var(--jae-input-border); border-radius: 8px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-sm); outline: none; } .jae-form-field-option-input:focus { border-color: var(--jae-green-dim); box-shadow: 0 0 0 2px var(--jae-input-focus); } .jae-form-field-option-remove { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: transparent; color: var(--jae-text-muted); cursor: pointer; font-size: var(--jae-fs-sm); transition: background 0.15s, color 0.15s; } .jae-form-field-option-remove:hover { background: oklch(0.65 0.22 25 / 0.12); color: var(--jae-error); } .jae-form-field-add-option { align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--jae-glass-border); background: transparent; color: var(--jae-text-muted); cursor: pointer; font-size: var(--jae-fs-xs); transition: color 0.15s, border-color 0.15s; } .jae-form-field-add-option:hover { color: var(--jae-green); border-color: var(--jae-green-dim); } .jae-form-field-options-hint { font-size: var(--jae-fs-xs); color: var(--jae-warning); } .jae-form-field-item:last-child { margin-bottom: 0; } .jae-form-field-item.drag-over, .jae-form-field-item.jae-sort-over { border-color: var(--jae-green-dim); box-shadow: 0 0 0 2px var(--jae-input-focus); background: color-mix(in srgb, var(--jae-green) 4%, var(--jae-glass-bg)); } /* ── Drag handle ────────────────────────────────────────────────────────── */ .jae-form-field-handle { cursor: grab; color: var(--jae-text-muted); font-size: var(--jae-fs-xl); line-height: 1; padding: 4px 2px; flex-shrink: 0; transition: color 0.2s; display: flex; align-items: center; user-select: none; -webkit-user-select: none; } .jae-form-field-handle:hover { color: var(--jae-text); } /* ── Type badge ─────────────────────────────────────────────────────────── */ .jae-form-field-badge { display: flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 8px; flex-shrink: 0; background: color-mix(in srgb, var(--item-color) 14%, transparent); border: 1px solid color-mix(in srgb, var(--item-color) 28%, transparent); color: var(--item-color); font-size: var(--jae-fs-xs); font-weight: 600; white-space: nowrap; line-height: 1; } .jae-form-field-badge-icon { font-size: var(--jae-fs-md); line-height: 1; display: flex; align-items: center; } .jae-form-field-badge-label { text-transform: uppercase; letter-spacing: 0.05em; } /* ── Label input ────────────────────────────────────────────────────────── */ .jae-form-field-input { flex: 1; min-width: 0; padding: 9px 12px; background: var(--jae-input-bg); border: 1px solid var(--jae-input-border); border-radius: 8px; color: var(--jae-text); font-family: var(--font-body); font-size: var(--jae-fs-sm); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .jae-form-field-input:focus { border-color: var(--jae-green-dim); box-shadow: 0 0 0 2px var(--jae-input-focus); } .jae-form-field-input::placeholder { color: oklch(0.45 0.01 150); } /* ── Required toggle ────────────────────────────────────────────────────── */ .jae-form-field-required { display: flex; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; color: var(--jae-text-muted); font-size: var(--jae-fs-xs); font-weight: 500; padding: 5px 8px; border-radius: 8px; transition: color 0.2s, background 0.15s; user-select: none; -webkit-user-select: none; line-height: 1; } .jae-form-field-required:hover { color: var(--jae-text); background: var(--jae-glass-bg); } /* ── Plataformas grid ──────────────────────────────────────────────────── */ .jae-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 560px; margin: 0 auto 32px; } .jae-platform-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px 20px; border-radius: 16px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); color: var(--jae-text-muted); transition: border-color 0.2s, transform 0.15s; } .jae-platform-card:hover { border-color: oklch(1 0 0 / 0.18); transform: translateY(-2px); } .jae-platform-card i { font-size: 30px; color: var(--jae-green); filter: drop-shadow(0 0 6px var(--jae-green-glow)); } .jae-platform-name { font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 700; color: var(--jae-text); } .jae-platform-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 20px; background: oklch(0.76 0.15 176 / 0.12); color: var(--jae-green); } .jae-landing-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .jae-landing-cta-actions .jae-landing-hero-cta, .jae-landing-cta-actions .jae-landing-hero-secondary { padding: 10px 24px; font-size: var(--jae-fs-base); width: fit-content; max-width: none; } @media (max-width: 640px) { .jae-platform-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .jae-platform-card { padding: 18px 10px 16px; } } .jae-form-field-required input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--jae-green); cursor: pointer; flex-shrink: 0; margin: 0; } /* ── Remove button ──────────────────────────────────────────────────────── */ .jae-form-field-remove { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--jae-text-muted); font-size: var(--jae-fs-md); cursor: pointer; transition: color 0.2s, background 0.15s; line-height: 0; } .jae-form-field-remove:hover { color: var(--jae-error); background: color-mix(in srgb, var(--jae-error) 12%, transparent); } .jae-form-field-remove:active { transform: scale(0.92); } /* ── Theme Toggle ──────────────────────────────────────────────────────── */ .jae-auth-layout-toggle { position: fixed; top: 16px; right: 16px; z-index: 100; } .jae-theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--jae-glass-border); background: var(--jae-glass-bg); color: var(--jae-text-muted); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .jae-theme-toggle:hover { background: var(--jae-green-subtle); color: var(--jae-green); border-color: oklch(0.76 0.15 176 / 0.25); } .jae-topbar .jae-theme-toggle { width: 32px; height: 32px; } /* ── Sino de notificações ──────────────────────────────────────────────── */ .jae-notif-bell { position: relative; } .jae-notif-bell-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--jae-glass-border); background: var(--jae-glass-bg); color: var(--jae-text-muted); cursor: pointer; position: relative; transition: background 0.2s, color 0.2s, border-color 0.2s; } .jae-notif-bell-btn:hover { background: var(--jae-green-subtle); color: var(--jae-green); border-color: oklch(0.76 0.15 176 / 0.25); } .jae-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #E24B4A; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .jae-notif-backdrop { position: fixed; inset: 0; z-index: 40; } .jae-notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 400px; overflow-y: auto; background: oklch(0.14 0.015 150); border: 1px solid var(--jae-glass-border); border-radius: 12px; box-shadow: 0 12px 32px oklch(0 0 0 / 0.35); z-index: 41; } .jae-light .jae-notif-dropdown { background: oklch(0.99 0.002 100); box-shadow: 0 12px 32px oklch(0 0 0 / 0.18); } .jae-notif-dropdown-header { padding: 12px 16px; font-size: var(--jae-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jae-text-muted); border-bottom: 1px solid var(--jae-glass-border); } .jae-notif-empty { padding: 24px 16px; text-align: center; font-size: var(--jae-fs-sm); color: var(--jae-text-muted); } .jae-notif-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--jae-glass-border); cursor: pointer; transition: background 0.15s; } .jae-notif-item:last-child { border-bottom: none; } .jae-notif-item:hover { background: oklch(1 0 0 / 0.04); } .jae-light .jae-notif-item:hover { background: oklch(0 0 0 / 0.04); } .jae-notif-item--unread { background: var(--jae-green-subtle); } .jae-notif-item-title { font-size: var(--jae-fs-sm); font-weight: 700; color: var(--jae-text); } .jae-notif-item-message { font-size: var(--jae-fs-xs); color: var(--jae-text-muted); } /* ── Steps (Como funciona) ─────────────────────────────────────────────── */ .jae-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: 0; max-width: 960px; margin: 0 auto; } .jae-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; } .jae-step-number { width: 36px; height: 36px; border-radius: 50%; background: var(--jae-green); color: var(--jae-cta-text); font-family: var(--font-brand); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px var(--jae-green-glow); } .jae-step-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--jae-green-subtle); border: 1px solid oklch(0.76 0.15 176 / 0.18); display: flex; align-items: center; justify-content: center; color: var(--jae-green); } .jae-step-title { font-family: var(--font-brand); font-size: 17px; font-weight: 700; color: var(--jae-text); margin: 0; } .jae-step-desc { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); line-height: 1.6; margin: 0; max-width: 220px; } .jae-step-arrow { display: flex; align-items: center; justify-content: center; padding: 60px 8px 0; color: var(--jae-green); opacity: 0.5; } @media (max-width: 860px) { .jae-steps { grid-template-columns: 1fr; gap: 0; max-width: 360px; } .jae-step-arrow { transform: rotate(90deg); padding: 4px 0; } } /* ── Pricing ───────────────────────────────────────────────────────────── */ .jae-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; } .jae-pricing-card { display: flex; flex-direction: column; gap: 12px; padding: 32px 24px 24px; border-radius: 20px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); text-align: center; position: relative; transition: border-color 0.2s, transform 0.15s; } .jae-pricing-card:hover { border-color: oklch(1 0 0 / 0.18); transform: translateY(-2px); } .jae-pricing-card--featured { border-color: var(--jae-green); background: var(--jae-green-subtle); box-shadow: 0 0 0 1px oklch(0.76 0.15 176 / 0.2); } .jae-pricing-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: var(--jae-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 14px; border-radius: 20px; background: var(--jae-green); color: var(--jae-cta-text); white-space: nowrap; } .jae-pricing-name { font-family: var(--font-brand); font-size: var(--jae-fs-xl); font-weight: 800; color: var(--jae-text); } .jae-pricing-price { font-family: var(--font-brand); font-size: 36px; font-weight: 800; color: var(--jae-green); line-height: 1; } .jae-pricing-price span { text-shadow: 0 0 20px var(--jae-green-glow); } .jae-pricing-period { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin-top: -4px; } .jae-pricing-features { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; text-align: left; flex: 1; } .jae-pricing-features li { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); display: flex; align-items: center; gap: 8px; } .jae-pricing-features li i { color: var(--jae-green); font-size: 16px; flex-shrink: 0; } .jae-pricing-cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 10px; font-family: var(--font-brand); font-size: var(--jae-fs-base); font-weight: 700; letter-spacing: 0.02em; color: var(--jae-cta-text); background: var(--jae-green); text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; margin-top: 16px; } .jae-pricing-cta:hover { background: oklch(0.88 0.26 145); box-shadow: 0 0 24px var(--jae-green-glow); transform: translateY(-1px); } @media (max-width: 860px) { .jae-pricing-grid { grid-template-columns: 1fr; max-width: 400px; } } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .jae-faq-list { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .jae-faq-item { border-radius: 14px; background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); overflow: hidden; transition: border-color 0.2s; } .jae-faq-item[open] { border-color: oklch(0.76 0.15 176 / 0.25); } .jae-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-family: var(--font-brand); font-size: var(--jae-fs-md); font-weight: 600; color: var(--jae-text); cursor: pointer; list-style: none; user-select: none; } .jae-faq-question::-webkit-details-marker { display: none; } .jae-faq-arrow { font-size: 16px; color: var(--jae-text-muted); transition: transform 0.25s ease; flex-shrink: 0; } .jae-faq-item[open] .jae-faq-arrow { transform: rotate(180deg); } .jae-faq-answer { padding: 0 20px 18px; font-size: var(--jae-fs-base); color: var(--jae-text-muted); line-height: 1.7; } /* ── Billing toggle row ────────────────────────────────────────────────── */ .jae-billing-glass { display: flex; justify-content: center; margin-bottom: 36px; } .jae-billing-glass .jae-billing-row { margin-bottom: 0; } .jae-billing-glass > div { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 60px; padding: 8px 24px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 0 0 1px oklch(1 0 0 / 0.03), 0 8px 32px oklch(0 0 0 / 0.12); } .jae-billing-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 36px; } .jae-billing-label { font-size: var(--jae-fs-base); font-weight: 500; color: var(--jae-text-muted); transition: color 0.2s; } .jae-billing-label--active { color: var(--jae-green); } .jae-billing-toggle { width: 44px; height: 24px; border-radius: 12px; border: none; cursor: pointer; background: oklch(1 0 0 / 0.10); position: relative; transition: background 0.2s; padding: 0; flex-shrink: 0; } .jae-billing-toggle--annual { background: var(--jae-green-subtle); } .jae-billing-toggle-knob { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--jae-text); position: absolute; top: 3px; left: 3px; transition: transform 0.2s, background 0.2s; } .jae-billing-toggle--annual .jae-billing-toggle-knob { transform: translateX(20px); background: var(--jae-green); } .jae-billing-badge { font-size: var(--jae-fs-xs); font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--jae-green-subtle); color: var(--jae-green); white-space: nowrap; } /* ── Page header (título + ação) ─────────────────────────────────────────── */ .jae-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .jae-page-header .jae-page-title { margin-bottom: 0; } .jae-page-subtitle { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); margin-top: 3px; } /* ── Table ───────────────────────────────────────────────────────────────── */ .jae-table-card { background: var(--jae-glass-bg); border: 1px solid var(--jae-glass-border); border-radius: 16px; overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-bottom: 8px; } .jae-table { width: 100%; border-collapse: collapse; font-size: var(--jae-fs-sm); font-family: var(--font-body); } .jae-table thead th { padding: 12px 18px; text-align: left; font-size: var(--jae-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); background: oklch(1 0 0 / 0.03); border-bottom: 1px solid var(--jae-glass-border); white-space: nowrap; } .jae-table tbody tr { border-bottom: 1px solid oklch(1 0 0 / 0.05); transition: background 0.12s; } .jae-table tbody tr:last-child { border-bottom: none; } .jae-table tbody tr:hover { background: oklch(1 0 0 / 0.04); } .jae-table td { padding: 13px 18px; color: var(--jae-text); vertical-align: middle; } .jae-table td:last-child { text-align: right; } .jae-table thead th:last-child { text-align: right; } .jae-table-empty { padding: 48px 18px; text-align: center; color: var(--jae-text-muted); font-size: var(--jae-fs-sm); } /* ── Table: scroll em tablet ─────────────────────────────────────────────── */ @media (max-width: 860px) { .jae-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .jae-table { min-width: 560px; } } /* ── Table: card layout em mobile ────────────────────────────────────────── */ @media (max-width: 560px) { .jae-table-card { overflow-x: unset; } .jae-table { min-width: unset; } .jae-table thead { display: none; } .jae-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding: 14px 16px; border-bottom: 1px solid var(--jae-glass-border); border-radius: 0; } .jae-table td { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; text-align: left; border: none; } .jae-table td::before { content: attr(data-label); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jae-text-muted); } .jae-table td[data-label=""]::before { display: none; } /* ações ocupam linha inteira */ .jae-table td:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px; text-align: left; padding-top: 10px; margin-top: 4px; border-top: 1px solid oklch(1 0 0 / 0.06); } } /* ═══════════════════════════════════════════════════════════════════════════ PAGINAÇÃO ═══════════════════════════════════════════════════════════════════════════ */ .jae-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } .jae-pagination-info { font-size: var(--jae-fs-sm); color: var(--jae-text-muted); min-width: 60px; text-align: center; }