/* ============================================================ Novidda — Design System v2 (DESIGN.md — Signal Violet) Inspirado no design language da Wise: superfície por contraste, sem sombras neumórficas, radius xl=24px, Inter weight 800 no display. Claro/escuro via classe .dark no . ============================================================ */ /* ── Tokens completos ── */ :root { /* Marca */ --primary: #7B61FF; --primary-active: #9D8FFF; --primary-neutral: #C4BAFF; --primary-pale: #E8E4FF; --on-primary: #F5F5F0; --accent: #7B61FF; /* alias legado */ --accent-contrast: #F5F5F0; /* Superfícies */ --canvas: #f7f7f7; --canvas-soft: #E0DCFF; --card-bg: #FFFFFF; --bg: #F5F5F0; /* alias legado */ /* Texto */ --ink: #16213E; --body-txt: #3D3D5C; --mute: #8B8BA0; --text: #16213E; /* alias legado */ --text-soft: #8B8BA0; /* alias legado */ /* Semântica */ --positive: #2EB87A; --positive-deep: #0A6647; --positive-pale: #D4F5E9; --warning: #FFB347; --warning-pale: #FFF3DC; --negative: #D03060; --negative-deep: #A01040; --negative-pale: #FFE0EB; --success: #2EB87A; /* alias legado */ --danger: #D03060; /* alias legado */ /* Compat neumórfico (para bordas do Quill, etc.) */ --shadow-dark: #C4BAFF; --shadow-light: #FFFFFF; /* Geometria */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px; --radius: 24px; /* alias legado */ --radius-sm: 12px; /* alias legado */ /* Espaçamento */ --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --gap: 24px; /* Layout */ --sidebar-w: 260px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-feature-settings: "calt"; } /* ── Dark mode ── */ body.dark { --canvas: #0A0F1E; --canvas-soft: #16213E; --card-bg: #1A2540; --bg: #0A0F1E; --ink: #F5F5F0; --body-txt: #C4BAFF; --mute: #8B8BA0; --text: #F5F5F0; --text-soft: #8B8BA0; --positive-pale: rgba(46, 184, 122, 0.15); --warning-pale: rgba(255, 179, 71, 0.15); --negative-pale: rgba(208, 48, 96, 0.15); --shadow-dark: rgba(0,0,0,0.4); --shadow-light: rgba(255,255,255,0.04); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: inherit; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .25s ease, color .25s ease; } a { color: var(--primary); text-decoration: none; transition: color .15s; } a:hover { color: var(--primary-active); } h1, h2, h3, h4 { color: var(--ink); font-weight: 800; margin: 0 0 .5em; letter-spacing: -.02em; } h1 { font-size: 40px; line-height: 1.1; } h2 { font-size: 32px; line-height: 1.15; } h3 { font-size: 24px; } h4 { font-size: 18px; } p { margin: 0 0 1em; color: var(--body-txt); } code { font-family: ui-monospace, 'Fira Code', monospace; font-size: .875em; } /* ── Superfícies (substituem neumórficas) ── */ .card { background: var(--card-bg); border-radius: var(--r-xl); padding: var(--space-xl); } /* Aliases neumórficos mantidos para templates existentes */ .neu-raised { background: var(--card-bg); border-radius: var(--r-xl); padding: var(--space-xl); } .neu-flat { background: var(--canvas-soft); border-radius: var(--r-xl); } .neu-inset { background: var(--canvas-soft); border-radius: var(--r-md); border: 1px solid var(--primary-pale); } body.dark .neu-inset { background: var(--canvas-soft); border-color: rgba(123, 97, 255, 0.2); } /* ── Botões ── */ .btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 24px; color: var(--ink); background: transparent; border-radius: var(--r-xl); padding: 10px 20px; transition: background .15s, color .15s, transform .05s; text-decoration: none; } .btn:hover { background: var(--canvas-soft); color: var(--ink); } .btn:active { transform: scale(.98); } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-active); color: var(--on-primary); } .btn-primary:active { transform: scale(.98); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; background: transparent; color: var(--body-txt); border-radius: var(--r-sm); padding: 8px; transition: background .15s, color .15s; } .btn-ghost:hover { background: var(--canvas-soft); color: var(--ink); } .btn-danger { color: var(--negative); } .btn-danger:hover { background: var(--negative-pale); color: var(--negative-deep); } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-icon { padding: 8px; border-radius: var(--r-sm); } /* ── Inputs ── */ .field { margin-bottom: 20px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--mute); margin-bottom: 6px; letter-spacing: .01em; } .input, .select, .textarea { width: 100%; border: 1.5px solid var(--primary-pale); outline: none; font: inherit; font-size: 15px; color: var(--ink); background: var(--card-bg); border-radius: var(--r-md); padding: 11px 14px; transition: border-color .15s, box-shadow .15s; appearance: none; } body.dark .input, body.dark .select, body.dark .textarea { border-color: rgba(123, 97, 255, 0.2); } .input::placeholder, .textarea::placeholder { color: var(--mute); } .textarea { resize: vertical; min-height: 90px; } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-pale); } body.dark .input:focus, body.dark .select:focus, body.dark .textarea:focus { box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.25); } select.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8BA0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } /* ── App shell ── */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--canvas-soft); display: flex; flex-direction: column; padding: 24px 12px; gap: 2px; } body.dark .sidebar { background: var(--canvas-soft); } .brand { padding: 4px 8px 24px; } .sidebar-logo { height: 36px; display: block; object-fit: contain; } body.dark .sidebar-logo { filter: invert(1) hue-rotate(180deg); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm); color: var(--body-txt); font-size: 14px; font-weight: 600; transition: background .15s, color .15s; } body.dark .nav-link { color: var(--mute); } .nav-link i { width: 18px; text-align: center; flex-shrink: 0; } .nav-link:hover { background: var(--primary-pale); color: var(--primary); } .nav-link.active { background: var(--primary-pale); color: var(--primary); } body.dark .nav-link:hover, body.dark .nav-link.active { background: rgba(123, 97, 255, 0.2); color: var(--primary-active); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); } .topbar { display: flex; align-items: center; padding: 20px 32px 0; gap: 12px; margin-bottom: 4px; } .topbar .title { font-size: 22px; font-weight: 800; color: var(--ink); flex: 1; } .topbar .spacer { flex: 1; } .topbar-user { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); } .user-avatar { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-pale); color: var(--primary); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; flex-shrink: 0; } body.dark .user-avatar { background: rgba(123, 97, 255, 0.2); color: var(--primary-active); } .content { padding: 20px 32px 48px; } /* ── Métricas ── */ .grid { display: grid; gap: var(--gap); } .grid-metrics { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .metric-card { background: var(--card-bg); border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; gap: 4px; } .metric-card .metric-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-pale); color: var(--primary); border-radius: var(--r-md); font-size: 15px; margin-bottom: 12px; flex-shrink: 0; } body.dark .metric-card .metric-icon { background: rgba(123, 97, 255, 0.2); color: var(--primary-active); } .metric-card .value { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); } .metric-card .label { font-size: 13px; font-weight: 600; color: var(--mute); margin-top: 2px; } /* Alias legado para metric-card com ícone flutuante */ .metric-card .icon { float: right; color: var(--primary); font-size: 18px; opacity: .7; } /* ── Tabelas ── */ .table-wrap { overflow-x: auto; } table.neu { width: 100%; border-collapse: collapse; } table.neu th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; padding: 0 16px 12px; } table.neu td { padding: 14px 16px; font-size: 14px; color: var(--ink); background: var(--card-bg); border-bottom: 1px solid var(--canvas); } table.neu tbody tr:last-child td { border-bottom: none; } table.neu tbody tr td:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); } table.neu tbody tr td:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; } table.neu tbody { background: var(--card-bg); border-radius: var(--r-xl); overflow: hidden; } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .01em; } .badge-draft { background: var(--canvas-soft); color: var(--mute); } .badge-published { background: var(--positive-pale); color: var(--positive-deep); } .badge-archived { background: var(--negative-pale); color: var(--negative-deep); } body.dark .badge-draft { background: rgba(139,139,160,.15); color: var(--mute); } /* ── Alertas ── */ .alert { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--gap); font-size: 14px; font-weight: 500; display: flex; align-items: flex-start; gap: 8px; } .alert-error { background: var(--negative-pale); color: var(--negative-deep); } .alert-success { background: var(--positive-pale); color: var(--positive-deep); } body.dark .alert-error { background: rgba(208,48,96,.15); color: #FF9BB8; } body.dark .alert-success { background: rgba(46,184,122,.15); color: #6DEDB6; } /* ── Empty state ── */ .empty-state { text-align: center; padding: 64px 24px; } .empty-state .icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-pale); color: var(--primary); border-radius: var(--r-lg); font-size: 22px; margin-bottom: 20px; } body.dark .empty-state .icon { background: rgba(123, 97, 255, 0.2); color: var(--primary-active); } .empty-state h3 { color: var(--ink); margin-bottom: 8px; font-size: 20px; } .empty-state p { color: var(--mute); font-size: 15px; } /* ── Toggle de tema ── */ .theme-toggle { font-size: 16px; } /* ── Auth — split screen ── */ .auth-split { display: flex; min-height: 100vh; } .auth-hero { flex: 1; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 48px; } body.dark .auth-hero { background: var(--canvas-soft); } .auth-hero-content { max-width: 460px; } .auth-hero-logo { height: 70px; display: block; object-fit: contain; margin-bottom: 48px; } .auth-hero-title { font-size: 38px; font-weight: 900; line-height: 1.1; color: var(--primary-active); margin-bottom: 20px; letter-spacing: -.03em; } body.dark .auth-hero-title { color: var(--primary); } .auth-hero-body { font-size: 16px; color: rgba(245, 245, 240, .65); line-height: 1.65; margin-bottom: 40px; } .auth-feature-list { display: flex; flex-direction: column; gap: 14px; } .auth-feature { display: flex; align-items: center; gap: 14px; color: rgba(245, 245, 240, .8); font-size: 14px; font-weight: 500; } .auth-feature-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(123, 97, 255, .2); color: var(--primary-active); border-radius: var(--r-sm); font-size: 13px; flex-shrink: 0; } .auth-form-panel { width: 480px; flex-shrink: 0; background: var(--canvas); display: flex; align-items: center; justify-content: center; padding: 48px; } .auth-form-inner { width: 100%; max-width: 380px; } .auth-form-title { font-size: 28px; font-weight: 800; color: var(--ink); margin-bottom: 6px; letter-spacing: -.02em; } .auth-form-subtitle { font-size: 15px; color: var(--mute); margin-bottom: 32px; } /* ── Utilitários ── */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap { gap: var(--gap); } .gap-sm { gap: 10px; } .mt { margin-top: var(--gap); } .mb { margin-bottom: var(--gap); } .text-soft { color: var(--mute); } .text-danger { color: var(--negative); } .text-success { color: var(--positive); } .w-full { width: 100%; } /* Code inline */ .code-block { background: var(--canvas-soft); border-radius: var(--r-md); padding: 18px 20px; font-family: ui-monospace, 'Fira Code', monospace; font-size: 13px; color: var(--ink); word-break: break-all; line-height: 1.7; } body.dark .code-block { background: var(--canvas-soft); } /* Divider */ hr.divider { border: none; border-top: 1px solid var(--canvas-soft); margin: 20px 0; } body.dark hr.divider { border-color: rgba(123,97,255,.12); } /* ── Responsivo ── */ @media (max-width: 880px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 12px; gap: 4px; } .brand { width: 100%; padding: 4px 8px 12px; } .sidebar-nav { flex-direction: row; flex-wrap: wrap; } .nav-link span { display: none; } .nav-link { padding: 10px 13px; } .content { padding: 16px 16px 32px; } .topbar { padding: 14px 16px 0; } .topbar .title { font-size: 18px; } } @media (max-width: 768px) { .auth-split { flex-direction: column; } .auth-hero { padding: 40px 24px 36px; } .auth-hero-title { font-size: 26px; } .auth-hero-body { font-size: 15px; margin-bottom: 28px; } .auth-form-panel { width: 100%; padding: 32px 24px; } .auth-form-inner { max-width: 100%; } } /* ── Paginação ── */ .pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; font-size: 14px; font-weight: 600; color: var(--body-txt, var(--ink)); background: var(--card-bg); border: 1.5px solid var(--primary-pale); border-radius: var(--r-sm); transition: background .15s, color .15s, border-color .15s; } body.dark .pagination .page-link { border-color: rgba(123, 97, 255, 0.2); } .pagination a.page-link:hover { background: var(--canvas-soft); color: var(--ink); border-color: var(--primary-neutral); } .pagination .page-link.active { background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; } .pagination .page-link.disabled { color: var(--mute); opacity: .5; cursor: not-allowed; } .pagination .page-link.dots { border-color: transparent; background: transparent; cursor: default; } /* ── Barra de filtros ── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .filter-bar .filter-field { display: flex; flex-direction: column; gap: 6px; } .filter-bar .filter-field > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); } .filter-bar .filter-search { flex: 1 1 240px; min-width: 200px; } .filter-bar .input, .filter-bar .select { font-size: 14px; padding: 9px 12px; } .filter-bar select.select { padding-right: 32px; } @media (max-width: 768px) { .filter-bar .filter-field { flex: 1 1 100%; } } /* ── Banner Contextual (admin form) ── */ #nv-banner-card .banner-toggle-hd:hover { opacity: .85; } #nv-banner-body .field > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); margin-bottom: 6px; display: block; } .rule-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .rule-row .input, .rule-row .select { height: 36px; font-size: 13px; } .rule-row .select { padding-right: 28px; }