/* ============================================================================ uCheck360 — Brand Theme Override ---------------------------------------------------------------------------- A drop-in rebrand that recolors the Sneat (Bootstrap 5) admin template and the Tailwind auth pages toward the warm / earthy uCheck360 design system. HOW TO USE ---------- 1. Drop this file at: public/assets/css/ucheck360-brand.css 2. App shell (resources/views/layouts/app.blade.php) — add LAST in , AFTER core.css and demo.css: 3. Auth pages (resources/views/layouts/auth.blade.php) — add LAST in , AFTER tailwind.min.css and auth.css: It only changes color, type, radius, shadow and a few spacing/layout details. No markup changes required. ApexCharts colors are driven by JS (config.js) — see the note at the very bottom to recolor charts. ============================================================================ */ /* ---- 1. Fonts ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap'); /* ---- 2. Brand tokens ----------------------------------------------------- */ :root { /* Brand — aubergine / plum (the wordmark ink) */ --u-plum-950:#1b1026; --u-plum-900:#241531; --u-plum-800:#302040; --u-plum-700:#3a2348; --u-plum-600:#4b2f5d; --u-plum-500:#634076; --u-plum-400:#876b97; --u-plum-300:#ac9bb8; --u-plum-200:#d3c9da; --u-plum-100:#e9e3ee; --u-plum-50:#f5f2f7; /* Coral (accent / danger) */ --u-coral-700:#c1333b; --u-coral-600:#d83c45; --u-coral-500:#ed4a52; --u-coral-100:#fde6e7; --u-coral-50:#fdf2f2; /* Azure (info / data) */ --u-azure-600:#0f93c6; --u-azure-500:#14a8de; --u-azure-100:#dcf2fb; /* Warm neutrals */ --u-sand-50:#fbf7f1; --u-sand-100:#f5eee3; --u-sand-200:#ece1d2; --u-sand-300:#ddccb7; --u-taupe-500:#9a8772; --u-taupe-600:#786857; --u-bark-700:#574a3d; --u-bark-800:#382f26; --u-bark-900:#251e17; /* Semantic */ --u-green-600:#3f8457; --u-green-500:#4e9a68; --u-green-100:#e3efe7; --u-amber-600:#c2761a; --u-amber-500:#e0922f; --u-amber-100:#fbeeda; /* Aliases */ --u-primary:var(--u-plum-700); --u-primary-hover:var(--u-plum-800); --u-accent:var(--u-coral-500); --u-surface-page:var(--u-sand-50); --u-text-heading:var(--u-plum-800); --u-text-body:var(--u-bark-800); --u-text-muted:var(--u-taupe-600); --u-border:var(--u-sand-200); --u-border-strong:var(--u-sand-300); --u-radius-card:12px; --u-radius-control:8px; --u-shadow-sm:0 2px 6px rgba(48,32,64,.07); --u-shadow-md:0 4px 14px rgba(48,32,64,.09); --u-shadow-lg:0 10px 30px rgba(48,32,64,.12); --u-focus-ring:0 0 0 3px rgba(99,64,118,.25); --u-font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --u-font-display:'Newsreader',Georgia,serif; --u-font-mono:'Spline Sans Mono',ui-monospace,Menlo,Consolas,monospace; } /* ---- 3. Bootstrap variable remap (cascades to most Sneat components) ----- */ :root, [data-bs-theme='light'] { --bs-primary:#3a2348; --bs-primary-rgb:58,35,72; --bs-link-color:#3a2348; --bs-link-color-rgb:58,35,72; --bs-link-hover-color:#241531; --bs-link-hover-color-rgb:36,21,49; --bs-body-bg:#fbf7f1; --bs-body-bg-rgb:251,247,241; --bs-body-color:#382f26; --bs-body-color-rgb:56,47,38; --bs-heading-color:#302040; --bs-secondary-color:rgba(120,104,87,.85); --bs-secondary-bg:#f5eee3; --bs-tertiary-bg:#f5eee3; --bs-border-color:#ece1d2; --bs-border-color-translucent:rgba(48,32,64,.10); --bs-emphasis-color:#251e17; --bs-secondary-rgb:122,104,87; --bs-success:#4e9a68; --bs-success-rgb:78,154,104; --bs-warning:#e0922f; --bs-warning-rgb:224,146,47; --bs-danger:#ed4a52; --bs-danger-rgb:237,74,82; --bs-info:#14a8de; --bs-info-rgb:20,168,222; --bs-font-sans-serif:var(--u-font-sans); --bs-body-font-family:var(--u-font-sans); --bs-border-radius:.5rem; --bs-border-radius-sm:.375rem; --bs-border-radius-lg:.75rem; --bs-border-radius-xl:1rem; } /* Sneat-specific custom properties (where present) */ :root { --bs-paper-bg:#ffffff; --bs-heading-color:#302040; } /* ---- 4. Page chrome ------------------------------------------------------ */ body { font-family:var(--u-font-sans); background-color:var(--u-surface-page) !important; color:var(--u-text-body); } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color:var(--u-text-heading); font-weight:600; letter-spacing:-.01em; } .text-heading { color:var(--u-text-heading) !important; } .text-muted,.text-body-secondary { color:var(--u-text-muted) !important; } a { color:var(--u-primary); } a:hover { color:var(--u-primary-hover); } hr,.dropdown-divider { border-color:var(--u-border); } /* The warm canvas behind the content area */ .layout-page, .content-wrapper { background-color:var(--u-surface-page); } /* ---- 5. Sidebar / vertical menu ----------------------------------------- */ #layout-menu.menu, .layout-menu { background-color:#ffffff; border-right:1px solid var(--u-border); box-shadow:0 0 1px rgba(48,32,64,.04); } .menu-inner-shadow { display:none !important; } .menu-link { color:var(--u-bark-700); border-radius:var(--u-radius-control); font-weight:500; } .menu-icon { color:var(--u-taupe-500); } .menu-item .menu-link:hover { background-color:var(--u-sand-100); color:var(--u-plum-800); } .menu-item .menu-link:hover .menu-icon { color:var(--u-plum-700); } /* active item — solid plum pill (replaces Sneat's purple gradient) */ .menu-inner > .menu-item.active > .menu-link { background:var(--u-plum-700) !important; color:#fff !important; box-shadow:0 4px 12px rgba(48,32,64,.28) !important; } .menu-inner > .menu-item.active > .menu-link .menu-icon { color:#fff !important; } /* active sub-item — quiet plum tint */ .menu-sub > .menu-item.active > .menu-link { color:var(--u-plum-800) !important; background-color:var(--u-plum-50); } .menu-sub > .menu-item.active > .menu-link::before, .menu-item.active > .menu-link.menu-toggle::after { color:var(--u-plum-700); } .menu-header-text { color:var(--u-taupe-500); letter-spacing:.08em; } /* ---- 6. Topbar / navbar -------------------------------------------------- */ .layout-navbar { background-color:rgba(251,247,241,.86) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--u-shadow-sm); border:1px solid var(--u-border); } .layout-navbar .nav-item .text-muted { color:var(--u-text-muted) !important; } /* ---- 7. Cards ------------------------------------------------------------ */ .card { background-color:#fff; border:1px solid var(--u-border); border-radius:var(--u-radius-card); box-shadow:var(--u-shadow-sm); --bs-card-bg:#fff; --bs-card-border-color:var(--u-border); --bs-card-border-radius:var(--u-radius-card); } .card .card-header { border-bottom-color:var(--u-border); } .card-title,.card-header h5,.card-header h6 { color:var(--u-text-heading); } /* ---- 8. Buttons ---------------------------------------------------------- */ .btn { border-radius:var(--u-radius-control); font-weight:500; } .btn-primary { --bs-btn-bg:var(--u-plum-700); --bs-btn-border-color:var(--u-plum-700); --bs-btn-hover-bg:var(--u-plum-800); --bs-btn-hover-border-color:var(--u-plum-800); --bs-btn-active-bg:var(--u-plum-900); --bs-btn-active-border-color:var(--u-plum-900); --bs-btn-disabled-bg:var(--u-plum-700); --bs-btn-disabled-border-color:var(--u-plum-700); color:#fff; } .btn-primary:hover { box-shadow:0 6px 16px rgba(48,32,64,.28); transform:translateY(-1px); } .btn-outline-primary { --bs-btn-color:var(--u-plum-700); --bs-btn-border-color:var(--u-plum-300); --bs-btn-hover-bg:var(--u-plum-700); --bs-btn-hover-border-color:var(--u-plum-700); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--u-plum-800); --bs-btn-active-border-color:var(--u-plum-800); } .btn-outline-secondary { --bs-btn-color:var(--u-taupe-600); --bs-btn-border-color:var(--u-border-strong); --bs-btn-hover-bg:var(--u-sand-100); --bs-btn-hover-color:var(--u-bark-800); --bs-btn-hover-border-color:var(--u-border-strong); } .btn-success { --bs-btn-bg:var(--u-green-500); --bs-btn-border-color:var(--u-green-500); --bs-btn-hover-bg:var(--u-green-600); --bs-btn-hover-border-color:var(--u-green-600); } .btn-danger { --bs-btn-bg:var(--u-coral-500); --bs-btn-border-color:var(--u-coral-500); --bs-btn-hover-bg:var(--u-coral-600); --bs-btn-hover-border-color:var(--u-coral-600); } .btn-warning { --bs-btn-bg:var(--u-amber-500); --bs-btn-border-color:var(--u-amber-500); color:#fff; } /* accent CTA helper (optional, add class="btn-accent") */ .btn-accent { background:var(--u-coral-500); border:1px solid var(--u-coral-500); color:#fff; } .btn-accent:hover { background:var(--u-coral-600); border-color:var(--u-coral-600); color:#fff; box-shadow:0 6px 18px rgba(237,74,82,.28); transform:translateY(-1px); } /* ---- 9. Badges & Sneat "label" tints ------------------------------------ */ .badge { font-weight:600; letter-spacing:.01em; } .bg-primary { background-color:var(--u-plum-700) !important; } .bg-success { background-color:var(--u-green-500) !important; } .bg-warning { background-color:var(--u-amber-500) !important; } .bg-danger { background-color:var(--u-coral-500) !important; } .bg-info { background-color:var(--u-azure-500) !important; } .bg-label-primary { background-color:var(--u-plum-100) !important; color:var(--u-plum-700) !important; } .bg-label-secondary { background-color:var(--u-sand-200) !important; color:var(--u-taupe-600) !important; } .bg-label-success { background-color:var(--u-green-100) !important; color:var(--u-green-600) !important; } .bg-label-warning { background-color:var(--u-amber-100) !important; color:var(--u-amber-600) !important; } .bg-label-danger { background-color:var(--u-coral-100) !important; color:var(--u-coral-700) !important; } .bg-label-info { background-color:var(--u-azure-100) !important; color:var(--u-azure-600) !important; } .bg-soft-primary { background-color:var(--u-plum-100) !important; } .text-primary { color:var(--u-plum-700) !important; } .text-success { color:var(--u-green-600) !important; } .text-warning { color:var(--u-amber-600) !important; } .text-danger { color:var(--u-coral-600) !important; } .text-info { color:var(--u-azure-600) !important; } /* avatar initials */ .avatar-initial { font-weight:600; } .avatar-online::after { background-color:var(--u-green-500); } /* ---- 10. Forms ----------------------------------------------------------- */ .form-control,.form-select { border-color:var(--u-border-strong); border-radius:var(--u-radius-control); color:var(--u-text-body); background-color:#fff; } .form-control::placeholder { color:var(--u-taupe-500); } .form-control:focus,.form-select:focus { border-color:var(--u-plum-500); box-shadow:var(--u-focus-ring); } .form-check-input:checked { background-color:var(--u-plum-700); border-color:var(--u-plum-700); } .form-check-input:focus { border-color:var(--u-plum-500); box-shadow:var(--u-focus-ring); } .form-switch .form-check-input:checked { background-color:var(--u-plum-700); } /* ---- 11. Tables ---------------------------------------------------------- */ .table { --bs-table-color:var(--u-text-body); --bs-table-border-color:var(--u-border); --bs-table-striped-bg:var(--u-sand-50); --bs-table-hover-bg:var(--u-sand-100); } .table > thead th, .table thead th { color:var(--u-taupe-600); text-transform:uppercase; font-size:.6875rem; letter-spacing:.06em; font-weight:600; border-bottom-color:var(--u-border-strong); } .table caption { color:var(--u-taupe-500); } /* ---- 12. Progress, dropdowns, pagination, alerts ------------------------ */ .progress { background-color:var(--u-sand-200); border-radius:50rem; } .progress-bar { background-color:var(--u-plum-700); } .progress-bar.bg-success { background-color:var(--u-green-500) !important; } .progress-bar.bg-lighter { background-color:var(--u-sand-100) !important; color:var(--u-taupe-600) !important; } .dropdown-menu { --bs-dropdown-bg:#fff; --bs-dropdown-border-color:var(--u-border); --bs-dropdown-border-radius:var(--u-radius-control); --bs-dropdown-link-active-bg:var(--u-plum-700); --bs-dropdown-link-active-color:#fff; --bs-dropdown-link-hover-bg:var(--u-sand-100); box-shadow:var(--u-shadow-lg); } .dropdown-item.active,.dropdown-item:active { background-color:var(--u-plum-700) !important; color:#fff !important; } .page-item.active .page-link { background-color:var(--u-plum-700); border-color:var(--u-plum-700); } .page-link { color:var(--u-plum-700); } .page-link:hover { background-color:var(--u-sand-100); color:var(--u-plum-800); } .alert-warning { --bs-alert-bg:var(--u-amber-100); --bs-alert-border-color:#f0dcb6; --bs-alert-color:var(--u-amber-600); } .alert-success { --bs-alert-bg:var(--u-green-100); --bs-alert-border-color:#cbe3d2; --bs-alert-color:var(--u-green-600); } .alert-danger { --bs-alert-bg:var(--u-coral-100); --bs-alert-border-color:#f6cdcf; --bs-alert-color:var(--u-coral-700); } .alert-primary { --bs-alert-bg:var(--u-plum-100); --bs-alert-border-color:#ddd2e6; --bs-alert-color:var(--u-plum-700); } /* spinners / focus */ .spinner-border.text-primary,.text-primary { color:var(--u-plum-700) !important; } :focus-visible { outline:none; } /* mono figures (scores, ids) */ .u-mono,.font-mono { font-family:var(--u-font-mono); font-variant-numeric:tabular-nums; } .u-display { font-family:var(--u-font-display); letter-spacing:-.01em; } /* ============================================================================ 13. AUTH PAGES (Tailwind markup in resources/views/auth/*) The login/signup pages use hard-coded Tailwind "blue" utilities and an animated pastel gradient. These rules retint them to the brand without touching the blade markup. ============================================================================ */ body { font-family:var(--u-font-sans); } /* calmer, warm brand gradient (replaces the pastel rainbow) */ body.h-screen.bg-gray-50, body[class*="bg-gray-50"] { background:linear-gradient(135deg,#f5f2f7,#fbf7f1 45%,#fde6e7) !important; background-size:cover !important; animation:none !important; } .main-div { border-radius:20px !important; box-shadow:var(--u-shadow-lg) !important; } .side-div { border-radius:20px !important; } /* headings & helper copy */ .auth-page .text-gray-800,.text-gray-800 { color:var(--u-plum-800) !important; } .text-gray-700 { color:var(--u-bark-800) !important; } .text-gray-600,.text-gray-500 { color:var(--u-taupe-600) !important; } /* primary action + links: blue -> plum, with coral as the focal CTA */ .bg-blue-500 { background-color:var(--u-coral-500) !important; } .hover\:bg-blue-600:hover { background-color:var(--u-coral-600) !important; } .text-blue-500,.text-blue-700 { color:var(--u-plum-700) !important; } .hover\:bg-blue-50:hover { background-color:var(--u-plum-50) !important; } .border-blue-300 { border-color:var(--u-plum-200) !important; } .focus\:ring-blue-500:focus { --tw-ring-color:rgba(99,64,118,.4) !important; } .focus\:border-blue-500:focus { border-color:var(--u-plum-500) !important; } .rounded-lg { border-radius:var(--u-radius-control) !important; } /* ============================================================================ 14. FORM BUILDER (resources/views/forms/builder.blade.php) The builder ships its own scoped