/* ============================================================ Apen Capital — Design System (UI Web) Fonte: docs/DESIGN_SYSTEM.md Templates devem importar este arquivo no : Fontes (Jost, Playfair Display) devem ser carregadas pelo template via Google Fonts antes deste CSS. ============================================================ */ :root { /* Cores — backgrounds */ --bg-white: #FFFFFF; --bg-off: #F8F7F4; --bg-warm: #F0EDE8; /* Cores — texto */ --navy: #081226; --text-2: #4A4844; --text-body: #888480; /* Cores — bordas */ --border: #E8E4DE; --border-w: #C8C4BE; /* Cores — semânticas e accents */ --pos: #365FAF; --blue-m: #365FAF; --blue-d: #0D2E6E; --blue-l: #8FA8C8; --neg: #C62828; --warn: #B17D00; /* Backgrounds semânticos (pills/alerts) */ --bg-ok: #E8F0FE; --bg-pending: #FFF4E0; --bg-error: #FDECEA; /* Tipografia — famílias */ --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Playfair Display', Georgia, serif; /* Tipografia — escala */ --fs-micro: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; /* Spacing (escala base 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; /* Border radius */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; /* Sombras */ --shadow-card-hover: 0 4px 16px rgba(54, 95, 175, 0.10); --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.25); --shadow-toast: 0 4px 20px rgba(8, 18, 38, 0.15); /* Transitions */ --t-fast: 0.15s ease; --t-base: 0.2s ease; /* Layout */ --header-h: 56px; --header-px: 40px; --modal-sm: 420px; --modal-md: 480px; --modal-lg: 560px; } /* ============================================================ Reset mínimo ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-white); color: var(--navy); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--blue-m); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--navy); } button { font-family: inherit; cursor: pointer; } /* ============================================================ Layout — header e main ============================================================ */ .apen-header { display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h); padding: 0 var(--header-px); background: var(--navy); color: rgba(255, 255, 255, 0.95); } .apen-logo { font-family: 'Louis George Cafe', 'Josefin Sans', sans-serif; font-size: 20px; color: #fff; text-decoration: none; margin-left: var(--sp-3); } .apen-logo:hover { text-decoration: none; } .apen-logo-img { display: inline-flex; align-items: center; margin-left: var(--sp-3); } .apen-logo-img img { height: 22px; width: auto; display: block; } .apen-header-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius); background: transparent; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: var(--t-fast); white-space: nowrap; } .apen-header-crumb::before { content: '\2039'; font-size: 14px; line-height: 1; color: rgba(255, 255, 255, 0.55); } .apen-header-crumb:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; } .apen-header-crumb:hover::before { color: #fff; } .apen-header-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.55); margin-left: var(--sp-2); } .apen-header-spacer { flex: 1; } .apen-header-user { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); } .apen-header-user b { font-weight: 500; color: rgba(255, 255, 255, 0.85); } .apen-btn-ghost-sm { padding: 4px 12px; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius); background: transparent; text-transform: uppercase; letter-spacing: 1px; transition: var(--t-fast); } .apen-btn-ghost-sm:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; } .apen-main { max-width: 1200px; margin: 0 auto; padding: var(--sp-7); } @media (max-width: 720px) { .apen-header { padding: 0 var(--sp-5); } .apen-main { padding: var(--sp-5); } } /* ============================================================ Subnav (tabs sob o header — Admin/Férias) ============================================================ */ .apen-subnav { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 0 var(--header-px); display: flex; gap: var(--sp-1); height: 44px; align-items: center; } .apen-subnav a { display: inline-flex; align-items: center; height: 100%; padding: 0 var(--sp-4); font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-body); text-decoration: none; border-bottom: 2px solid transparent; transition: var(--t-fast); } .apen-subnav a:hover { color: var(--text-2); text-decoration: none; } .apen-subnav a.is-active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 500; } @media (max-width: 720px) { .apen-subnav { padding: 0 var(--sp-5); } } /* ============================================================ Banner de aviso (warning) ============================================================ */ .apen-banner-warn { background: var(--bg-pending); border-left: 3px solid var(--warn); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-base); color: #6a4a00; margin-bottom: var(--sp-4); } .apen-banner-warn b { font-weight: 500; } .apen-banner-warn code { background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 3px; font-family: var(--font-body); font-size: var(--fs-sm); } .apen-section-title { font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-body); margin-bottom: var(--sp-3); } /* ============================================================ Cards ============================================================ */ .apen-card-action, .apen-card-data, .apen-card-list { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-6) calc(var(--sp-6) - 4px); } .apen-card-action { display: flex; flex-direction: column; gap: var(--sp-3); cursor: pointer; transition: var(--t-base); text-decoration: none; color: inherit; } .apen-card-action:hover { border-color: var(--border-w); box-shadow: var(--shadow-card-hover); text-decoration: none; } .apen-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-warm); border-radius: var(--radius-md); color: var(--navy); } .apen-card-label { font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-body); } .apen-card-title { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 500; color: var(--navy); } .apen-card-desc { font-size: var(--fs-base); color: var(--text-2); line-height: 1.55; } .apen-card-cta { font-size: var(--fs-sm); font-weight: 500; color: var(--blue-m); text-transform: uppercase; letter-spacing: 1px; margin-top: auto; } .apen-card-list { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); position: relative; } .apen-card-list.is-pos { border-left: 4px solid var(--pos); } .apen-card-list.is-neg { border-left: 4px solid var(--neg); } .apen-card-data { padding: var(--sp-5); } /* ============================================================ Botões ============================================================ */ .apen-btn, .apen-btn-ghost, .apen-btn-mini, .apen-btn-danger, .apen-btn-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-radius: var(--radius); border: 1px solid transparent; transition: var(--t-fast); text-decoration: none; cursor: pointer; } .apen-btn { padding: 10px 18px; font-size: var(--fs-xs); background: var(--navy); color: #fff; } .apen-btn:hover { background: var(--blue-d); text-decoration: none; } .apen-btn-ghost { padding: 10px 18px; font-size: var(--fs-xs); background: transparent; border-color: var(--border-w); color: var(--text-2); } .apen-btn-ghost:hover { background: var(--bg-warm); text-decoration: none; } .apen-btn-mini { padding: 5px 10px; font-size: var(--fs-xs); background: transparent; border-color: var(--border-w); color: var(--text-2); } .apen-btn-mini:hover { border-color: var(--blue-m); color: var(--blue-m); text-decoration: none; } .apen-btn-mini.is-primary { border-color: var(--blue-m); color: var(--blue-m); } .apen-btn-mini.is-primary:hover { background: var(--bg-ok); } .apen-btn-mini.is-danger { border-color: var(--neg); color: var(--neg); } .apen-btn-mini.is-danger:hover { background: var(--bg-error); } .apen-btn-danger { padding: 10px 18px; font-size: var(--fs-xs); background: transparent; border-color: var(--neg); color: var(--neg); } .apen-btn-danger:hover { background: var(--bg-error); text-decoration: none; } .apen-btn-link { padding: 0; font-size: var(--fs-sm); background: transparent; color: var(--blue-m); text-transform: none; letter-spacing: 0; } .apen-btn-link:hover { text-decoration: underline; } .apen-btn:disabled, .apen-btn-ghost:disabled, .apen-btn-mini:disabled, .apen-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ Inputs ============================================================ */ .apen-field { display: flex; flex-direction: column; gap: var(--sp-2); } .apen-field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.8px; } .apen-input, .apen-select, .apen-textarea { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; padding: var(--sp-3); border: 1px solid var(--border-w); border-radius: var(--radius); background: var(--bg-white); color: var(--navy); transition: var(--t-fast); width: 100%; } .apen-input:focus, .apen-select:focus, .apen-textarea:focus { outline: none; border-color: var(--blue-m); } .apen-input:read-only, .apen-input:disabled { background: var(--bg-off); color: var(--text-body); } .apen-input.is-error, .apen-select.is-error, .apen-textarea.is-error { border-color: var(--neg); } .apen-field-help { font-size: var(--fs-xs); color: var(--text-body); } .apen-field-error { font-size: var(--fs-xs); color: var(--neg); } /* ============================================================ Tabela ============================================================ */ .apen-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-white); font-size: var(--fs-base); } .apen-table th { padding: var(--sp-3) var(--sp-4); background: var(--bg-warm); font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-body); text-align: left; border-bottom: 1px solid var(--border); } .apen-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text-2); } .apen-table tr:last-child td { border-bottom: none; } .apen-table tbody tr:hover td { background: #FBFAF8; } /* ============================================================ Modal ============================================================ */ .apen-modal-overlay { position: fixed; inset: 0; background: rgba(8, 18, 38, 0.5); display: none; align-items: center; justify-content: center; padding: var(--sp-5); z-index: 1000; } .apen-modal-overlay.is-open { display: flex; } .apen-modal { background: var(--bg-white); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); padding: var(--sp-6); max-height: 90vh; overflow-y: auto; width: 100%; } .apen-modal-sm { max-width: var(--modal-sm); } .apen-modal-md { max-width: var(--modal-md); } .apen-modal-lg { max-width: var(--modal-lg); } .apen-modal-title { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 500; margin-bottom: var(--sp-4); } .apen-modal-body { margin-bottom: var(--sp-5); } .apen-modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); } /* ============================================================ Pills / Badges ============================================================ */ .apen-pill { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.6; } .apen-pill-ok { background: var(--bg-ok); color: var(--blue-d); } .apen-pill-pending { background: var(--bg-pending); color: var(--warn); } .apen-pill-error { background: var(--bg-error); color: var(--neg); } .apen-pill-admin { background: var(--navy); color: #fff; } .apen-pill-neutral { background: var(--bg-warm); color: var(--text-2); } /* ============================================================ Dropzone ============================================================ */ .apen-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-5); border: 1.5px dashed var(--border-w); border-radius: var(--radius-md); background: var(--bg-off); cursor: pointer; transition: var(--t-base); text-align: center; } .apen-dropzone:hover { background: rgba(54, 95, 175, 0.04); border-color: var(--blue-m); } .apen-dropzone.has-file { border-style: solid; border-color: var(--pos); background: rgba(54, 95, 175, 0.04); } .apen-dropzone-icon { font-size: var(--fs-xl); color: var(--text-body); } .apen-dropzone.has-file .apen-dropzone-icon { color: var(--pos); } .apen-dropzone-label { font-size: var(--fs-base); font-weight: 500; color: var(--text-2); } .apen-dropzone-hint { font-size: var(--fs-xs); color: var(--text-body); } /* ============================================================ Step indicator (wizard) ============================================================ */ .apen-steps { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); } .apen-step { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-w); background: var(--bg-white); font-size: var(--fs-base); font-weight: 500; color: var(--text-body); transition: var(--t-fast); } .apen-step.is-done { background: var(--blue-m); color: #fff; border-color: var(--blue-m); } .apen-step.is-active { background: var(--blue-d); color: #fff; border-color: var(--blue-d); } /* ============================================================ Toast ============================================================ */ .apen-toast { position: fixed; bottom: 28px; right: 28px; padding: var(--sp-3) var(--sp-4); background: var(--bg-white); border: 1px solid var(--border); border-left: 3px solid var(--blue-m); border-radius: var(--radius); box-shadow: var(--shadow-toast); font-size: var(--fs-sm); color: var(--navy); z-index: 1100; display: none; max-width: 420px; } .apen-toast.is-visible { display: block; } .apen-toast-ok { border-left-color: var(--blue-m); } .apen-toast-error { border-left-color: var(--neg); } /* ============================================================ Drawer (lateral) ============================================================ */ .apen-drawer { position: fixed; top: 0; right: 0; width: 480px; max-width: 100vw; height: 100vh; background: var(--bg-white); box-shadow: var(--shadow-modal); padding: var(--sp-6); overflow-y: auto; z-index: 900; } .apen-drawer-overlay { position: fixed; inset: 0; background: rgba(8, 18, 38, 0.4); z-index: 899; } /* ============================================================ Toolbar (admin) ============================================================ */ .apen-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .apen-toolbar .apen-input { max-width: 320px; } .apen-toolbar-spacer { flex: 1; }