/* LifeMuse Corporate Portal — Avo overrides * * Verified against: Avo 3.30.4 / Tailwind (compiled by Avo, no @layer) * Avo layout: — no #app wrapper. * Selectors use body.bg-application for specificity over Avo's Tailwind utilities. * * UPGRADE NOTE: Badge selectors target Avo's BadgeViewerComponent output * (span.rounded-md.uppercase.bg-COLOR-500.text-white). If Avo changes its * badge markup or Tailwind class names, these selectors will silently break. * Run a visual check of status badges after any Avo gem upgrade. * * Design spec palette: * Black: #333333 * Gray: #757D8A * White: #ffffff * Background: #F6F6F7 * Dark Blue: #216EA5 * Vibrant Blue: #007AFF * Light Blue: #3797DC * Green: #24965D * Error Red: #EF4444 * Error Red (light): #F45D6A * Accent Gold: #fcd45a (sidebar active text) */ /* ======================================== * Typography — Inter (self-hosted) * * Avo pages do not include the app Tailwind build, so we declare * @font-face here. Propshaft rewrites the relative url() at serve time. * ======================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2-variations"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable-Italic.woff2") format("woff2-variations"); } body.bg-application { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; } .avo-sidebar.application-sidebar { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* ======================================== * Sidebar — textured background * ======================================== */ .avo-sidebar.application-sidebar { background: linear-gradient( to bottom, rgba(51, 51, 51, 0.78) 0%, rgba(51, 51, 51, 0.9) 40%, rgba(51, 51, 51, 0.96) 100% ), url("/avo-assets/lifemuse-sidebar-texture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .avo-sidebar.application-sidebar .mac-styled-scrollbar { background: transparent !important; } .application-sidebar a, .application-sidebar .text-gray-500, .application-sidebar .text-gray-700, .application-sidebar .text-black { color: #ffffff !important; } .application-sidebar a svg, .application-sidebar .text-gray-500 svg, .application-sidebar .text-gray-700 svg, .application-sidebar .text-black svg { color: #ffffff !important; } /* Active sidebar item — gold text only, no background */ .application-sidebar .active, .application-sidebar .active:hover { color: #fcd45a !important; background-color: transparent !important; box-shadow: none !important; text-shadow: 0 0 10px rgba(252, 212, 90, 0.6), 0 0 20px rgba(252, 212, 90, 0.3); } .application-sidebar .active svg, .application-sidebar .active:hover svg { color: #fcd45a !important; filter: drop-shadow(0 0 6px rgba(252, 212, 90, 0.5)); } .application-sidebar a:hover:not(.active) { background-color: rgba(255, 255, 255, 0.06) !important; border-radius: 8px; } .application-sidebar a:focus-visible { outline: 2px solid #fcd45a !important; outline-offset: 2px; border-radius: 8px; } /* Section headers in sidebar */ .application-sidebar .uppercase { color: rgba(255, 255, 255, 0.50) !important; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em; } /* ======================================== * Logo container — white bg, dark logo * ======================================== */ .logo-placeholder { align-items: center; background-color: #ffffff; border-radius: 8px; display: inline-flex !important; height: 100%; justify-content: center; max-width: fit-content; padding: 0.4rem 0.65rem; } .logo-placeholder img { height: 0.9rem; } /* ======================================== * Main content area — background * ======================================== */ .main-content-area, .content { background-color: #F6F6F7; } /* ======================================== * Buttons — #333 primary, inverts on hover * * Avo buttons have .button-component + Tailwind utilities. * Tailwind hover:bg-primary-600 generates a :hover rule. * body.bg-application gives us enough specificity to win. * ======================================== */ body.bg-application .button-component[class*="bg-primary"] { background-color: #333333 !important; border-color: #333333 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; border-radius: 8px; font-weight: 600; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease; } /* Scoped to span/svg descendants so colored child content (e.g. badges inside * a dropdown button) is not clobbered by a universal selector. */ body.bg-application .button-component[class*="bg-primary"] > span, body.bg-application .button-component[class*="bg-primary"] svg, body.bg-application .button-component[class*="bg-primary"] svg * { background-color: transparent !important; border-color: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; } body.bg-application .button-component[class*="bg-primary"]:hover { background-color: #ffffff !important; border-color: #333333 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; fill: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:hover > span, body.bg-application .button-component[class*="bg-primary"]:hover svg, body.bg-application .button-component[class*="bg-primary"]:hover svg * { color: #333333 !important; -webkit-text-fill-color: #333333 !important; fill: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:active { background-color: #F6F6F7 !important; border-color: #333333 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:active > span, body.bg-application .button-component[class*="bg-primary"]:active svg, body.bg-application .button-component[class*="bg-primary"]:active svg * { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:disabled, body.bg-application .button-component[class*="bg-primary"][disabled] { background-color: #757D8A !important; border-color: #757D8A !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 0.5; cursor: not-allowed; } /* Outline / secondary buttons */ body.bg-application .button-component[class*="border-primary"], body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]) { border-color: #333333 !important; color: #333333 !important; border-radius: 8px; font-weight: 600; } body.bg-application .button-component[class*="border-primary"] span, body.bg-application .button-component[class*="border-primary"] svg, body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]) span, body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]) svg { color: #333333 !important; } body.bg-application .button-component[class*="border-primary"]:hover, body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]):hover { background-color: rgba(51, 51, 51, 0.04) !important; } /* ======================================== * Breadcrumbs — blue links * ======================================== */ .breadcrumbs a { color: #007AFF !important; } .breadcrumbs a:hover { color: #216EA5 !important; text-decoration: underline; } .breadcrumbs svg { color: #c7c7cc !important; } /* ======================================== * Pagination — transparent bg, dark selected * * Avo's pagination.css applies to every : * bg-white shadow-md border border-gray-300 * We override all of these to get the clean design. * ======================================== */ .pagy-gem-version-8-or-more .pagy.nav a:not(.gap) { color: #333333 !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 4px; } .pagy-gem-version-8-or-more .pagy.nav a:not(.gap):hover { background-color: rgba(51, 51, 51, 0.08) !important; color: #333333 !important; } .pagy-gem-version-8-or-more .pagy.nav a.current, .pagy-gem-version-8-or-more .pagy.nav a.current:hover { color: #ffffff !important; background-color: #333333 !important; border-color: #333333 !important; border-radius: 4px; } /* ======================================== * Status badges — tinted bg + colored text * * Avo renders badges as: * * Tailwind sets background-color via bg-* utility. * body.bg-application gives us enough specificity to win. * ======================================== */ /* Success: active, published, completed */ body.bg-application span.rounded-md.uppercase.bg-green-500.text-white { background-color: rgba(36, 150, 93, 0.1) !important; color: #107342 !important; } /* Warning: pending, draft, paused */ body.bg-application span.rounded-md.uppercase.bg-yellow-500.text-white { background-color: rgba(252, 198, 90, 0.2) !important; color: #966608 !important; } /* Danger: cancelled, expired, exhausted, missed */ body.bg-application span.rounded-md.uppercase.bg-red-500.text-white { background-color: rgba(212, 5, 17, 0.1) !important; color: #D40511 !important; } /* Info: skipped */ body.bg-application span.rounded-md.uppercase.bg-blue-500.text-white { background-color: rgba(55, 151, 220, 0.1) !important; color: #216EA5 !important; } /* Neutral: fallback for unmapped values (Avo default badge type) */ body.bg-application span.rounded-md.uppercase.bg-gray-500.text-white { background-color: rgba(102, 102, 102, 0.2) !important; color: #333333 !important; } /* All badges: pill shape override. * Tight selector matches Avo's BadgeViewerComponent signature (whitespace-nowrap + * rounded-md + uppercase + text-xs + font-bold) to avoid hitting unrelated spans * that happen to share a subset of these utilities. */ body.bg-application span.whitespace-nowrap.rounded-md.uppercase.text-xs.font-bold { border-radius: 9999px !important; padding: 0.2rem 0.75rem !important; font-size: 0.75rem !important; } /* ======================================== * Avo flash / alert overrides * ======================================== */ .avo-alert { border-radius: 8px !important; font-weight: 500; } /* ======================================== * Select / search dropdown — black hover * ======================================== */ body.bg-application [role="option"]:hover, body.bg-application [role="option"][aria-selected="true"], body.bg-application [role="option"].is-active, body.bg-application .aa-Item[aria-selected="true"], body.bg-application [data-selected="true"] { background-color: #333333 !important; color: #ffffff !important; } /* ======================================== * Form inputs — rounded, subtle focus ring * ======================================== */ body.bg-application input[type="text"], body.bg-application input[type="email"], body.bg-application input[type="password"], body.bg-application input[type="number"], body.bg-application input[type="url"], body.bg-application input[type="tel"], body.bg-application input[type="search"], body.bg-application input[type="date"], body.bg-application input[type="datetime-local"], body.bg-application textarea, body.bg-application select { border-radius: 8px !important; border-color: #D1D5DB !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.bg-application input[type="text"]:focus, body.bg-application input[type="email"]:focus, body.bg-application input[type="password"]:focus, body.bg-application input[type="number"]:focus, body.bg-application input[type="url"]:focus, body.bg-application input[type="tel"]:focus, body.bg-application input[type="search"]:focus, body.bg-application input[type="date"]:focus, body.bg-application input[type="datetime-local"]:focus, body.bg-application textarea:focus, body.bg-application select:focus { border-color: #333333 !important; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25) !important; outline: 2px solid transparent !important; } /* Error state on inputs */ body.bg-application input.border-red-500, body.bg-application input.border-red-600, body.bg-application textarea.border-red-500, body.bg-application select.border-red-500, body.bg-application .field-wrapper .text-red-600 ~ input, body.bg-application [data-slot="error"] input { border-color: #EF4444 !important; } body.bg-application input.border-red-500:focus, body.bg-application textarea.border-red-500:focus, body.bg-application select.border-red-500:focus { border-color: #EF4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important; } /* Error text */ body.bg-application .text-red-600, body.bg-application [data-slot="error"] { color: #EF4444 !important; } /* Form labels */ body.bg-application label { font-weight: 500; color: #333333; } /* ======================================== * Links — vibrant blue accent * Only target actual anchor links, exclude buttons * ======================================== */ body.bg-application a.text-primary-500:not(.button-component), body.bg-application a[class*="text-primary"]:not(.button-component):not([class*="bg-primary"]):not([class*="border-primary"]) { color: #007AFF !important; } body.bg-application a.text-primary-500:not(.button-component):hover, body.bg-application a[class*="text-primary"]:not(.button-component):not([class*="bg-primary"]):not([class*="border-primary"]):hover { color: #216EA5 !important; } /* ======================================== * Table refinements * ======================================== */ body.bg-application table thead th { font-weight: 600; color: #333333; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; } body.bg-application table tbody tr:hover { background-color: rgba(51, 51, 51, 0.02) !important; } /* ======================================== * Trix link visibility * ======================================== */ body.bg-application trix-editor a:not(.attachment__name), body.bg-application .trix-content a:not(.attachment__name) { color: #007AFF; text-decoration: underline; } body.bg-application trix-editor a:not(.attachment__name):hover, body.bg-application .trix-content a:not(.attachment__name):hover { color: #216EA5; } /* * Permissions matrix (Avo::PermissionsMatrixComponent). * * Avo loads only avo.base.css from its gem, plus this file — the main * app's Tailwind build is not linked on admin pages. These rules fill * in utility classes the component uses that Avo's compiled CSS * doesn't already include. */ .permissions-matrix .text-emerald-600 { color: #059669; } .permissions-matrix .text-green-800 { color: #166534; } .permissions-matrix .text-green-700 { color: #15803d; } .permissions-matrix .border-green-200 { border-color: #bbf7d0; } .permissions-matrix .text-red-800 { color: #991b1b; } .permissions-matrix .border-red-200 { border-color: #fecaca; } .permissions-matrix .border-separate { border-collapse: separate; } .permissions-matrix .border-spacing-0 { border-spacing: 0; } .permissions-matrix .h-3\.5 { height: 0.875rem; } .permissions-matrix .w-3\.5 { width: 0.875rem; } .permissions-matrix .w-6 { width: 1.5rem; } .permissions-matrix .flex-none { flex: none; } .permissions-matrix .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .permissions-matrix tbody tr:nth-child(even) { background-color: rgba(249, 250, 251, 0.4); } /* WCAG 2.4.7 — keyboard focus ring for checkboxes in edit mode. */ .permissions-matrix input[type="checkbox"]:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; } .permissions-matrix label:focus-within { background-color: #f3f4f6; transition: background-color 150ms; }