/* ============================================================ FRANQUIA LEGAL — brand layer on top of the Mel Design System Keeps Mel's structure/components, slate neutrals, Nunito type; swaps the honey brand for Franquia Legal navy + warm gradient. Scope everything under .fl-app so custom props override Mel's :root tokens by inheritance (no data-theme conflicts). ============================================================ */ /* The brand palette sits on :root rather than on .fl-app. Libraries that append an overlay straight to — the driver.js tour popover, for one — land outside .fl-app and would resolve these to nothing. Every name here is ours, so :root carries no risk of colliding with a Mel token; the Mel re-pointing below is what has to stay scoped. */ :root { --fl-navy: #112a48; --fl-navy-deep: #0a1b33; --fl-navy-700: #1b3a60; --fl-blue: #1f7ad1; /* primary action */ --fl-blue-600: #1763ad; /* hover / link text */ --fl-blue-700: #134e88; --fl-blue-050: #e9f2fb; --fl-blue-100: #d4e6f8; --fl-orange: #f7941d; --fl-coral: #ec5a6b; --fl-grad: linear-gradient(122deg, #f7941d 0%, #ec5a6b 36%, #7b3fd0 66%, #1f7ad1 100%); --fl-grad-soft: linear-gradient(122deg, #fff4e6 0%, #fde7ec 45%, #e9f2fb 100%); } .fl-app { /* re-point Mel tokens */ --color-primary: #1f7ad1; --color-primary-hover: #1763ad; --color-primary-text: #1763ad; --input-ring-focus: 0 0 0 3px color-mix(in srgb, #1f7ad1, transparent 78%); font-family: var(--font-sans); color: var(--text-main); } /* ---- Mel component re-skins (primary = blue, not honey) ---- */ .fl-app .btn-primary { background-color: var(--fl-blue); color: #fff; } .fl-app .btn-primary:hover:not(:disabled) { background-color: var(--fl-blue-600); color: #fff; } .fl-app .badge-primary { background: var(--fl-blue); color: #fff; } .fl-app .pagination-item.is-active { background: var(--fl-blue); border-color: var(--fl-blue); color: #fff; } .fl-app a:not([class]) { color: var(--fl-blue-600); } .fl-app a:not([class]):hover { color: var(--fl-blue-700); } .fl-app .mel-link { color: var(--fl-blue-600); } .fl-app .kpi-link { color: var(--fl-blue-600); } /* honey-tinted rail active → blue */ .fl-app .role-super { background: var(--fl-blue-050); color: var(--fl-blue-700); } .fl-app .badge-soft-warning { background: #fdeccd; color: #9a5b04; } /* ============================================================ SHELL — admin (labeled sidebar) ============================================================ */ .fl-shell { display: flex; min-height: 100vh; background: var(--bg-base); } .fl-sidebar { width: 256px; flex-shrink: 0; background: var(--slate-50); border-right: 1px solid var(--slate-200); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .fl-sidebar-logo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 16px; border-bottom: 1px solid var(--slate-200); background: #fff; } .fl-sidebar-logo img { height: 32px; width: auto; display: block; } .fl-sidebar-burger { display: none; border: 0; background: none; color: var(--slate-400); cursor: pointer; padding: 4px; } .fl-nav { flex: 1; overflow-y: auto; padding: 10px 12px 16px; } .fl-nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800; color: var(--slate-400); padding: 16px 12px 6px; } .fl-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 1px; border-radius: 10px; color: var(--slate-600); text-decoration: none; font-weight: 700; font-size: 14.5px; transition: background .15s, color .15s; } .fl-nav-item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--slate-400); transition: color .15s; } .fl-nav-item:hover { background: var(--slate-100); color: var(--slate-800); } .fl-nav-item:hover svg { color: var(--slate-600); } .fl-nav-item.is-active { background: var(--fl-blue-050); color: var(--fl-blue-700); } .fl-nav-item.is-active svg { color: var(--fl-blue); } .fl-nav-item.is-danger:hover { background: var(--color-error-bg); color: var(--color-error); } .fl-nav-item.is-danger:hover svg { color: var(--color-error); } .fl-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fl-main { flex: 1; padding: 30px 40px; } .fl-main-inner { max-width: 1200px; margin: 0 auto; } .fl-footer { text-align: center; padding: 18px; color: var(--slate-400); font-size: 13px; } /* ============================================================ SHELL — client (light topbar) ============================================================ */ .fl-topbar { display: flex; align-items: center; gap: 26px; padding: 0 32px; height: 70px; background: #fff; border-bottom: 1px solid var(--slate-200); position: sticky; top: 0; z-index: 30; } .fl-topbar-logo img { height: 30px; display: block; } .fl-topnav { display: flex; gap: 6px; margin-left: auto; align-items: center; } .fl-topnav a { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-600); font-weight: 700; font-size: 14.5px; text-decoration: none; padding: 8px 12px; border-radius: 9px; transition: background .15s, color .15s; } .fl-topnav a svg { width: 17px; height: 17px; color: var(--slate-400); } .fl-topnav a:hover { background: var(--slate-100); color: var(--slate-800); } .fl-topnav a.is-active { color: var(--fl-blue-700); background: var(--fl-blue-050); } .fl-topnav a.is-active svg { color: var(--fl-blue); } .fl-topnav a.is-danger { color: var(--color-error); } .fl-client-main { padding: 32px; } .fl-client-inner { max-width: 1080px; margin: 0 auto; } /* ============================================================ PUBLIC (auth) shell ============================================================ */ .fl-auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); } .fl-auth-bar { display: flex; align-items: center; padding: 16px 28px; background: #fff; border-bottom: 1px solid var(--slate-200); } .fl-auth-bar img { height: 28px; } .fl-auth-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 40px 48px; } .fl-auth-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; background: var(--fl-navy-deep); color: #cdd9ea; font-size: 13px; } .fl-auth-foot a { color: #cdd9ea; } /* ============================================================ Reusable brand bits ============================================================ */ .fl-grad-text { background: var(--fl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .fl-grad-bar { height: 4px; background: var(--fl-grad); border-radius: 999px; } .fl-grad-bg { background: var(--fl-grad); } .fl-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #7b3fd0; color: #fff; font-weight: 800; font-size: 14px; } .fl-avatar-sm { width: 30px; height: 30px; font-size: 12px; } .fl-iconbtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--slate-200); background: #fff; color: var(--slate-500); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .fl-iconbtn:hover { background: var(--slate-100); color: var(--slate-700); } .fl-iconbtn svg { width: 19px; height: 19px; } /* tinted stat-icon variants */ .ic-blue { background: var(--fl-blue-050) !important; color: var(--fl-blue) !important; } .ic-success{ background: color-mix(in srgb, var(--color-success), transparent 86%) !important; color: color-mix(in srgb, var(--color-success), black 8%) !important; } .ic-warning{ background: #fdeccd !important; color: #9a5b04 !important; } .ic-error { background: color-mix(in srgb, var(--color-error), transparent 86%) !important; color: color-mix(in srgb, var(--color-error), black 6%) !important; } .ic-grad { background: var(--fl-grad) !important; color: #fff !important; } @keyframes fl-fade-in { from { transform: translateY(7px); } to { transform: none; } } /* Fill mode must never include `forwards`. This wrapper is an ancestor of every page's content, modals included, and an element with a transform still being applied by an animation becomes the containing block for its fixed descendants — even when the value is `none`. With `forwards` that never lets go, so a full-screen overlay ends up the size of this box. */ .fl-fade { animation: fl-fade-in .32s cubic-bezier(.16,1,.3,1) backwards; } @media (prefers-reduced-motion: reduce) { .fl-fade { animation: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .fl-sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } .fl-shell.is-open .fl-sidebar { transform: translateX(0); } .fl-sidebar-burger { display: inline-grid; } .fl-main { padding: 20px 18px; } .fl-auth-body { grid-template-columns: 1fr; } .fl-auth-body .fl-auth-aside { display: none; } .fl-topnav { gap: 2px; overflow-x: auto; } .fl-client-main { padding: 18px; } }