/* ============================================================ * Coachecom — Error Screens (V3, standalone) * ============================================================ * Portado do Claude Design (project/error-screens.css), layout * "Standalone / pré-auth": card único centralizado sobre fundo * levemente lavado com a cor do owner. Usado pelas telas de erro * reais do sistema: * - application/views/erro_404.php (404 de rota) * - application/views/errors/html/error_404.php (show_404) * - application/views/errors/html/error_general.php (show_error/500) * - application/views/errors/html/error_db.php * * Autossuficiente (mesmo padrão de auth.css): traz o próprio :root * porque as telas de erro NÃO passam pelo shell/template e podem * disparar em qualquer ponto do request — não podem depender do * bundle dist/css/all.min.css. Ícones = SVG inline (Lucide), sem JS. * * White-label: a cor do owner entra via `--owner-accent` inline no * (best-effort). Default = royal-blue Coachecom (#1d4ed8). * ============================================================ */ /* ============================================================ * Tokens — espelho enxuto de tokens.css (só o que as telas usam) * ============================================================ */ :root { /* Neutros (slate) */ --fg-1: #0a0a0a; /* títulos display */ --fg-2: #0b1220; /* body forte */ --fg-3: #475569; /* body */ --fg-4: #64748b; /* sub-labels */ --fg-5: #94a3b8; /* eyebrows */ --surface-app: #f8fafc; --surface-card: #ffffff; --surface-muted: #f1f5f9; --border-default: #e2e8f0; /* Semânticos (resolve o gap --warning-* do :root claro de tokens.css) */ --danger-fg: #dc2626; --danger-bg: #fef2f2; --warning-fg: #b45309; --warning-bg: #fffbeb; /* White-label — owner sobrescreve --owner-accent inline no */ --owner-accent: #1d4ed8; --owner-bg: #003e73; --owner-wash: color-mix(in oklab, var(--owner-accent) 8%, #fff 92%); --owner-dot: #f97316; /* Type */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Inter Tight", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Sombras */ --shadow-sm: 0 1px 2px -1px rgba(0,0,0,.10), 0 1px 3px 0 rgba(0,0,0,.10); --shadow-card: 0 1px 2px 0 rgba(11,18,32,.04), 0 1px 3px 0 rgba(11,18,32,.08); --shadow-pop: 0 4px 6px -1px rgba(11,18,32,.10), 0 2px 4px -2px rgba(11,18,32,.08); --shadow-modal: 0 10px 25px -5px rgba(11,18,32,.22), 0 8px 10px -6px rgba(11,18,32,.10); /* Motion */ --ease: cubic-bezier(.4,0,.2,1); --duration: 150ms; } /* Dark mode — espelho do padrão auth.css. O card e o chrome neutro escurecem; o --owner-accent (marca) é preservado. */ /* Calibragem 2026-08-15 — em sincronia com tokens.css (faixa confortável 10-13:1, canvas fora do preto). Ver tokens.css. */ :root[data-theme="dark"] { color-scheme: dark; --fg-1: #eef2f7; --fg-2: #dbe3ee; --fg-3: #adbacd; --fg-4: #8492a6; --fg-5: #6b7a90; --surface-app: #0d1522; --surface-card: #161f2e; --surface-muted: #212c3d; --border-default: #334156; /* No claro é quase-branco; no escuro precisa ser tom tingido escuro, senão vira mancha branca no degradê e halo branco atrás do glyph. */ --owner-wash: color-mix(in oklab, var(--owner-accent) 20%, #161f2e); --warning-bg: color-mix(in oklab, #d97706 22%, #161f2e); --danger-bg: color-mix(in oklab, #dc2626 22%, #161f2e); --shadow-card: 0 1px 2px 0 rgba(0,0,0,.28), 0 1px 3px 0 rgba(0,0,0,.34); --shadow-pop: 0 4px 6px -1px rgba(0,0,0,.34), 0 2px 4px -2px rgba(0,0,0,.30); --shadow-modal: 0 10px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.32); } /* Segue o modo escuro do SISTEMA OPERACIONAL quando o tema ainda não foi resolvido explicitamente (fallback pré-JS / sem-JS). Assim que o anti-FOUC roda, o data-theme no assume e este bloco deixa de casar. Espelha os tokens de [data-theme="dark"]. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --fg-1: #eef2f7; --fg-2: #dbe3ee; --fg-3: #adbacd; --fg-4: #8492a6; --fg-5: #6b7a90; --surface-app: #0d1522; --surface-card: #161f2e; --surface-muted: #212c3d; --border-default: #334156; --owner-wash: color-mix(in oklab, var(--owner-accent) 20%, #161f2e); --warning-bg: color-mix(in oklab, #d97706 22%, #161f2e); --danger-bg: color-mix(in oklab, #dc2626 22%, #161f2e); --shadow-card: 0 1px 2px 0 rgba(0,0,0,.28), 0 1px 3px 0 rgba(0,0,0,.34); --shadow-pop: 0 4px 6px -1px rgba(0,0,0,.34), 0 2px 4px -2px rgba(0,0,0,.30); --shadow-modal: 0 10px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.32); } :root:not([data-theme]) .err-logo-name { color: #eef2f7; } :root:not([data-theme]) .err-logo--light { display: none; } :root:not([data-theme]) .err-paper__logo.has-dark .err-logo--dark { display: inline-block; } :root:not([data-theme]) .err-paper__logo.has-dark .err-logo-name { display: none; } :root:not([data-theme]) .err-paper__logo:not(.has-dark) .err-logo-name { display: inline-block; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: var(--font-sans); color: var(--fg-3); background: var(--surface-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ * Standalone framing — full-bleed light bg, single card, no shell * ============================================================ */ .err-standalone-bg { min-height: 100vh; width: 100%; background: radial-gradient(circle at 12% 18%, var(--owner-wash) 0%, transparent 42%), radial-gradient(circle at 88% 86%, color-mix(in oklab, var(--owner-accent) 8%, transparent) 0%, transparent 38%), var(--surface-app); display: grid; place-items: center; padding: 40px 20px; } .err-paper { width: 100%; max-width: 460px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 16px; box-shadow: var(--shadow-modal); padding: 36px 36px 28px; text-align: center; } .err-paper__logo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; min-height: 28px; } /* Logo do owner — troca por tema. Chaves com nomes INVERTIDOS vs cor: logo_white = Logo (Fundo Claro) · logo_black = Logo (Fundo Escuro). */ .err-logo { height: 26px; width: auto; max-width: 190px; object-fit: contain; } .err-logo--dark { display: none; } .err-logo-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -.2px; color: var(--owner-bg); display: none; } /* Claro: Logo (Fundo Claro) se existir, senão o nome */ .err-paper__logo.has-light .err-logo--light { display: inline-block; } .err-paper__logo:not(.has-light) .err-logo-name { display: inline-block; } /* Escuro: Logo (Fundo Escuro) se existir, senão o nome */ :root[data-theme="dark"] .err-logo-name { color: var(--fg-1); } :root[data-theme="dark"] .err-logo--light { display: none; } :root[data-theme="dark"] .err-paper__logo.has-dark .err-logo--dark { display: inline-block; } :root[data-theme="dark"] .err-paper__logo.has-dark .err-logo-name { display: none; } :root[data-theme="dark"] .err-paper__logo:not(.has-dark) .err-logo-name { display: inline-block; } /* ============================================================ * Illustration scene — blob + glyph (versão compacta standalone) * ============================================================ */ .err-paper__scene { margin: 0 auto 18px; display: grid; place-items: center; } .err-scene { position: relative; width: 78px; height: 78px; display: grid; place-items: center; } .err-scene .blob { position: absolute; inset: 0; border-radius: 50%; background: var(--owner-wash); } /* Dark: remove o halo atrás do glyph (a "bola") e destaca o glyph do card */ :root[data-theme="dark"] .err-scene .blob { display: none; } :root[data-theme="dark"] .err-scene .glyph { background: var(--surface-muted); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .err-scene .blob { display: none; } :root:not([data-theme]) .err-scene .glyph { background: var(--surface-muted); } } .err-scene .glyph { position: relative; width: 64px; height: 64px; border-radius: 16px; background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-pop); display: grid; place-items: center; color: var(--owner-accent); } .err-scene .glyph svg { width: 30px; height: 30px; stroke-width: 1.6; } .err-scene .glyph::after { content: ""; position: absolute; inset: 8px; border-radius: 10px; background: var(--owner-wash); z-index: 0; } .err-scene .glyph svg { position: relative; z-index: 1; } .err-scene .glyph[data-tone="warning"] { color: var(--warning-fg); } .err-scene .glyph[data-tone="warning"]::after { background: var(--warning-bg); } .err-scene .glyph[data-tone="danger"] { color: var(--danger-fg); } .err-scene .glyph[data-tone="danger"]::after { background: var(--danger-bg); } .err-scene .glyph[data-tone="neutral"] { color: var(--fg-3); } .err-scene .glyph[data-tone="neutral"]::after { background: var(--surface-muted); } /* ============================================================ * Copy — kicker / title / body * ============================================================ */ .err-kicker { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font-family: var(--font-sans); font-size: 13px; color: var(--fg-4); margin: 0 0 14px; } .err-kicker .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--owner-accent); } .err-kicker .code { color: var(--fg-2); font-weight: 600; } .err-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -.5px; color: var(--fg-1); margin: 0 0 12px; text-wrap: pretty; } .err-sub { font-family: var(--font-sans); font-size: 14.5px; line-height: 22px; color: var(--fg-3); max-width: 40ch; margin: 0 auto 22px; } /* ============================================================ * Actions * ============================================================ */ .err-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; } .err-btn { height: 40px; padding: 0 18px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), filter var(--duration) var(--ease); } .err-btn svg { width: 15px; height: 15px; stroke-width: 2; } .err-btn--primary { background: var(--owner-accent); color: #fff; } .err-btn--primary:hover { filter: brightness(.92); color: #fff; } .err-btn--ghost { background: var(--surface-card); color: var(--fg-2); border-color: var(--border-default); } .err-btn--ghost:hover { background: var(--surface-muted); } .err-btn--quiet { background: transparent; color: var(--fg-3); border-color: transparent; box-shadow: none; padding: 0 10px; } .err-btn:focus-visible { outline: 2px solid var(--owner-accent); outline-offset: 2px; } /* ============================================================ * Helper line + trace-id (suporte) * ============================================================ */ .err-helper { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--fg-4); padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--border-default); max-width: 38ch; margin-left: auto; margin-right: auto; } .err-helper a { color: var(--owner-accent); font-weight: 600; text-decoration: none; } .err-helper a:hover { text-decoration: underline; } .err-helper svg { width: 13px; height: 13px; stroke-width: 2; color: var(--fg-5); flex: 0 0 auto; } .err-trace { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); background: var(--surface-muted); border: 1px solid var(--border-default); padding: 3px 8px; border-radius: 6px; margin-top: 12px; word-break: break-all; } .err-trace b { color: var(--fg-2); font-weight: 700; } /* Retry state — animated dots (offline) */ .err-retry { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-4); margin-top: 12px; } .err-retry .ddot { width: 5px; height: 5px; border-radius: 999px; background: var(--owner-accent); animation: err-pulse 1.2s ease-in-out infinite; } .err-retry .ddot:nth-child(2) { animation-delay: .15s; } .err-retry .ddot:nth-child(3) { animation-delay: .3s; } @keyframes err-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .err-retry .ddot { animation: none; } } /* ============================================================ * Mobile — coluna estreita (o card já é centrado; ajustes finos) * ============================================================ */ @media (max-width: 520px) { .err-standalone-bg { padding: 24px 14px; align-items: stretch; } .err-paper { padding: 28px 22px 22px; border-radius: 14px; } .err-title { font-size: 22px; line-height: 28px; } .err-actions { flex-direction: column; } .err-btn { width: 100%; justify-content: center; height: 44px; } }