/* ============================================================================ * mo-theme.css — MuveOne brand theme for MoPricer (Stripe design system, * recolored to the MuveOne palette). * * WHAT THIS IS * A pure-CSS override layer that re-skins Materialize CSS 0.100.2 (loaded from * CDN in resources/views/layouts/app.blade.php) into the MuveOne visual * identity. NO build step: this file is served statically from public/css. * * LOAD ORDER (in layouts/app.blade.php , AFTER Materialize, AFTER mo-ui.css): * 1. materialize.min.css (framework) * 2. mo-ui.css (Phase-1 UX foundation — page header, flash, mo-btn) * 3. mo-theme.css (THIS FILE — brand skin; must win the cascade) * * PALETTE (role-preserving map from Stripe -> MuveOne): * primary/navy #081255 (was Stripe #533afd) — chrome, primary buttons, headings * interactive #1863dc (was Stripe #533afd) — links, focus, active, hover * accent/yellow #ffd500 (was Stripe #ffe0d1) — highlights/badges (dark ink on top) * secondary tint #eef1fa (was Stripe #e5edf5) — surfaces, row hover, panels * ink #0a0f2c (was #000000) — body text * ========================================================================== */ :root { --mo-primary: #081255; --mo-primary-hover: #0d1b7a; --mo-interactive: #1863dc; --mo-interactive-hov:#124fb3; --mo-accent: #ffd500; --mo-accent-ink: #4a3d00; /* AA-legible text ON yellow */ --mo-secondary: #eef1fa; --mo-bg: #ffffff; --mo-ink: #0a0f2c; --mo-muted: #64708f; --mo-line: #e2e7f4; --mo-radius: 8px; --mo-radius-lg: 16px; --mo-shadow-md: rgba(8,18,85,.06) 0 3px 6px 0; --mo-shadow-xl: rgba(8,18,85,.10) 0 30px 60px -50px, rgba(24,99,220,.25) 0 30px 60px -10px; --mo-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; } /* ---- Typography ---------------------------------------------------------- */ body { font-family: var(--mo-font); color: var(--mo-ink); background: #fbfcfe; } h1,h2,h3,h4,h5 { color: var(--mo-primary); letter-spacing: -0.01em; font-weight: 500; } /* ---- Global chrome: navbar ---------------------------------------------- * * App hardcodes `.nav-wrapper.light-blue.darken-3`. Retarget that exact class * to navy so no blade edit is required. */ nav, .nav-wrapper, .nav-wrapper.light-blue.darken-3 { background-color: var(--mo-primary) !important; } nav a, nav .brand-logo { color: #fff; } /* Brand wordmark: heading-style tracking at regular (400) weight. */ nav .brand-logo span { font-weight: 400; letter-spacing: -0.01em; } nav ul li.active > a, nav .mo-nav-link.active > a { background-color: rgba(255,255,255,0.16); } /* ---- Links (content area only; nav links stay white) -------------------- */ .container a:not(.btn):not(.btn-flat):not(.brand-logo):not(.mo-btn) { color: var(--mo-interactive); } .container a:not(.btn):not(.btn-flat):hover { color: var(--mo-interactive-hov); } /* ---- Buttons ------------------------------------------------------------- * * Materialize `.btn` defaults to its teal secondary color. Make the solid * button navy; the flat/secondary button an interactive-blue ghost. */ .btn, .btn-large, .btn-small { background-color: var(--mo-primary); border-radius: var(--mo-radius); text-transform: none; font-weight: 600; letter-spacing: 0; box-shadow: var(--mo-shadow-md); } .btn:hover, .btn-large:hover, .btn-small:hover { background-color: var(--mo-primary-hover); } /* NOTE: .btn:focus is intentionally NOT set to the hover background — keyboard * focus must stay distinguishable from hover. The :focus-visible ring at the end * of this file provides the visible focus indicator. */ .btn-flat { color: var(--mo-interactive); text-transform: none; font-weight: 600; } .btn-flat:hover { background: rgba(24,99,220,.08); } .waves-effect .waves-ripple { background-color: rgba(24,99,220,.35); } /* Danger action keeps red but harmonised */ .btn.red, .btn.red.lighten-1 { background-color: var(--mo-danger) !important; } /* Materialize color helper classes the blades actually use -> brand */ .light-blue.darken-3 { background-color: var(--mo-primary) !important; } .blue.darken-4 { background-color: var(--mo-primary) !important; } .blue.lighten-3 { background-color: #cdd8f7 !important; } .blue:not(.btn):not(.lighten-3):not(.darken-4) { background-color: var(--mo-interactive) !important; } .cyan.darken-1 { background-color: var(--mo-interactive) !important; } .teal, .teal.accent-3, .teal.darken-2 { background-color: var(--mo-interactive) !important; } /* ---- Form fields (Materialize) ------------------------------------------ * * Default focus color is green; switch the focus underline + label to blue. */ input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=number]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid var(--mo-interactive); box-shadow: 0 1px 0 0 var(--mo-interactive); } input:not([type]):focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label { color: var(--mo-interactive); } [type="checkbox"]:checked + label:before { border-right-color: var(--mo-interactive); border-bottom-color: var(--mo-interactive); } select:focus, .select-wrapper input.select-dropdown:focus { border-bottom: 1px solid var(--mo-interactive); } /* ---- Cards (home tiles, panels) ----------------------------------------- */ .card, .card-panel { border-radius: var(--mo-radius-lg); box-shadow: var(--mo-shadow-md); border: 1px solid var(--mo-line); } .card .card-title { color: var(--mo-primary); font-weight: 600; } .card .card-action a:not(.btn):not(.btn-flat) { color: var(--mo-interactive) !important; } /* ---- Dropdown / side-nav / collapsible ---------------------------------- */ .dropdown-content li > a, .dropdown-content li > span { color: var(--mo-interactive); } .side-nav li.active, .side-nav li > a.active { background: var(--mo-secondary); } .side-nav a:hover { background: var(--mo-secondary); } .collapsible-header.active { color: var(--mo-primary); } .collapsible-header .material-icons { color: var(--mo-interactive); } /* ---- Modals -------------------------------------------------------------- */ .modal { border-radius: var(--mo-radius-lg); } .modal .modal-footer .btn-flat { color: var(--mo-interactive); } /* ---- Chips / badges ------------------------------------------------------ */ .chip { background: var(--mo-secondary); color: var(--mo-primary); } .badge.new, .chip.mo-accent { background-color: var(--mo-accent); color: var(--mo-accent-ink); } /* ---- Progress loader ----------------------------------------------------- */ .progress { background-color: #cdd8f7; } .progress .indeterminate { background-color: var(--mo-interactive); } /* ---- Tables + DataTables ------------------------------------------------- */ table.striped > tbody > tr:nth-child(odd), tbody tr:hover { background-color: var(--mo-secondary); } thead { border-bottom: 2px solid var(--mo-primary); } th { color: var(--mo-primary); } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--mo-primary); color: #fff !important; border-radius: var(--mo-radius); border: 0; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--mo-secondary); color: var(--mo-primary) !important; border: 0; } .dataTables_filter input:focus { border-bottom: 1px solid var(--mo-interactive) !important; } /* ---- Re-point the Phase-1 mo-ui.css teal/green accents to brand ---------- */ .mo-btn--edit { color: var(--mo-interactive); border-color: #c7d7f6; } .mo-btn--edit:hover { background: var(--mo-secondary); } .mo-page-header .mo-page-title { color: var(--mo-primary); } .mo-page-header .mo-page-help { color: var(--mo-interactive); } .mo-flash--info { background: var(--mo-secondary); border-left-color: var(--mo-interactive); color: var(--mo-primary); } /* ---- Signature gradient accent (optional, for /home + /login heroes) ----- */ .mo-hero-grad { background: radial-gradient(120% 120% at 50% 108%, #081255 0%, #1338a0 22%, #1863dc 44%, #6ea3f2 60%, #ffe27a 82%, #ffffff 100%); } .mo-brand-gradient-text { background: linear-gradient(90deg, #081255 0%, #1863dc 48%, #ffcf00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Materialize accent states that default to teal/green (Phase 1b) ------ * * These render on ANY form/table, so they belong in the global layer, not a * page. Materialize's valid=green, radio/checkbox/switch=teal, DataTables * current-page, tabs indicator, and floating buttons all default off-brand. */ /* Valid input state (Materialize marks valid fields green) -> brand blue */ input.valid:not([type]), input[type=text].valid, input[type=email].valid, input[type=password].valid, input[type=number].valid, input[type=search].valid, input[type=tel].valid, input[type=url].valid, textarea.materialize-textarea.valid { border-bottom: 1px solid var(--mo-interactive) !important; box-shadow: 0 1px 0 0 var(--mo-interactive) !important; } /* (invalid stays Materialize red — semantic) */ /* Radio buttons (default checked dot = teal) -> brand blue */ [type="radio"]:checked + label:after, [type="radio"].with-gap:checked + label:after { background-color: var(--mo-interactive); border-color: var(--mo-interactive); } [type="radio"]:checked + label:before, [type="radio"].with-gap:checked + label:before { border-color: var(--mo-interactive); } [type="radio"].with-gap:checked + label:after { background-color: var(--mo-interactive); } /* Checkbox filled + switch lever (default teal) -> brand blue */ [type="checkbox"].filled-in:checked + label:after { background-color: var(--mo-interactive); border-color: var(--mo-interactive); } .switch label input[type=checkbox]:checked + .lever { background-color: #9fb6ef; } .switch label input[type=checkbox]:checked + .lever:after { background-color: var(--mo-interactive); } /* DataTables current page — force navy bg + white text over the plugin's own CSS. The `a` raises specificity to (0,4,1) so our white text beats DataTables' .paginate_button.current { color:#333!important } even though the plugin CSS loads after this file. */ .dataTables_wrapper .dataTables_paginate a.paginate_button.current, .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover { background: var(--mo-primary) !important; color: #fff !important; border: 1px solid var(--mo-primary) !important; border-radius: var(--mo-radius); } /* Tabs indicator + active tab (default teal) */ .tabs .indicator { background-color: var(--mo-interactive); } .tabs .tab a.active, .tabs .tab a:hover { color: var(--mo-primary); } .tabs .tab a { color: var(--mo-muted); } /* Floating action buttons + active collection items (default teal) */ .btn-floating { background-color: var(--mo-interactive); } .collection .collection-item.active { background-color: var(--mo-primary); } .collection a.collection-item { color: var(--mo-interactive); } /* Preloader spinner -> brand blue */ .spinner-blue-only, .spinner-blue { border-color: var(--mo-interactive); } /* ========================================================================== * AUDIT — THEME CONTRACT (T1) * Systemic UI/UX audit fixes owned by the theme layer. Additive only; these * rules are the single source for the app-wide focus ring, reduced-motion * guard, navbar clamp, DataTable overflow, semantic status tokens, contrast * retargets, touch targets, notifyBar/toast skins, and the auth Bootstrap- * compat layer. Per-surface files (T2–T8) REFERENCE these tokens/classes by * name and must NOT re-declare them. * ====================================================================== */ /* ---- 1. Semantic status tokens (S10) ------------------------------------ * * The brand deliberately keeps semantic red/amber/green. Define them once so * no surface has to hardcode raw hex. */ :root { --mo-success: #2e7d32; --mo-success-bg: #e8f5e9; --mo-error: #c62828; --mo-error-bg: #ffebee; --mo-error-line: #ef9a9a; --mo-warn: #8a6d00; --mo-warn-bg: #fff8e1; --mo-danger: #d64545; --mo-muted-strong: #4b5872; /* darker muted — clears 4.5:1 AA on light bg */ } /* ---- 2. Visible keyboard focus indicator (S1, P0) ----------------------- * * One ring lights up every interactive control. Materialize strips outlines; * this restores them for keyboard (:focus-visible) users only. */ a:focus-visible, .btn:focus-visible, .btn-large:focus-visible, .btn-small:focus-visible, .btn-flat:focus-visible, .mo-btn:focus-visible, .button-collapse:focus-visible, .dropdown-button:focus-visible, .mo-tile:focus-visible .card-panel, .card-panel:focus-visible, .log_type_item:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--mo-interactive); outline-offset: 2px; } .mo-tile:focus-visible { outline: none; } /* ---- 3. Reduced-motion guard (S6) --------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .progress .indeterminate { background: var(--mo-interactive); } } /* ---- 4. Navbar brand clamp on small screens (S7) ------------------------ * * The 2.1rem brand wordmark wraps to two lines and bleeds over content; keep * it on one line inside the 64px bar. */ @media only screen and (max-width: 992px) { nav .brand-logo { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } nav .brand-logo span { overflow: hidden; text-overflow: ellipsis; } } /* ---- 5. DataTables responsive overflow (S8) ----------------------------- * * Scroll the table inside its own box instead of stretching the whole page. */ @media only screen and (max-width: 992px) { .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dataTables_wrapper table.dataTable { min-width: 640px; } .dataTables_length, .dataTables_filter { float: none; text-align: left; margin: 8px 0; } .dataTables_filter input { width: 100%; } } /* ---- 6. Contrast retargets (S2) ----------------------------------------- * * Replace Materialize's sub-AA greys with on-token muted values. */ .input-field label, .input-field label.active { color: var(--mo-muted); } .mo-page-header .mo-page-purpose { color: var(--mo-muted-strong); } ::placeholder { color: var(--mo-muted); opacity: 1; } .mo-muted-key, .jse--output .mo-muted-key { color: var(--mo-muted); } .dataTables_length label, .dataTables_filter label { color: var(--mo-muted); } /* ---- 7. Touch targets ≥ 44px (S11) -------------------------------------- */ [type="checkbox"] + label, [type="radio"] + label { min-height: 44px; display: inline-flex; align-items: center; color: var(--mo-ink); } .switch label { min-height: 44px; display: inline-flex; align-items: center; } #settings .switch label { padding: 10px 0; } #settings .switch label .lever { min-height: 24px; } table.dataTable td .mo-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; margin: 2px 4px; } @media (pointer: coarse) { .jse--output input.jse--value, .mo-month input { height: 44px; font-size: 16px; } .log_type_item { min-height: 40px; padding: 8px 12px; } .date_selector { min-height: 44px; } } /* ---- 8. notifyBar brand skin (S1 findings / brand) ---------------------- * * jquery.notifyBar.css ships Arial + raw hex; bring it onto the brand type * and token status colors. */ .jquery-notify-bar { font-family: var(--mo-font); } .jquery-notify-bar.info { color: var(--mo-primary); background-color: var(--mo-secondary); } .jquery-notify-bar.success { color: var(--mo-success); background-color: var(--mo-success-bg); } .jquery-notify-bar.error { color: var(--mo-error); background-color: var(--mo-error-bg); } /* ---- 9. Success toast stays green (S10) --------------------------------- * * mo-theme remaps .teal to interactive-blue; a "Success" toast must not read * as info. Restore a real semantic green for the success toast surface. */ #toast-container .toast.teal.accent-3 { background-color: var(--mo-success) !important; } /* ---- 10. Login card header off the bright interactive slab -------------- * * Interactive blue is reserved for links/focus/active; a card-panel header of * this weight should be navy chrome. */ .card .card-panel.teal { background-color: var(--mo-primary) !important; } /* ---- 11. Auth (Forgot/Reset/Confirm) Bootstrap-compat layer (S9) -------- * * These blades use Bootstrap classes Materialize 0.100.2 doesn't define. Give * them centering, padding and token-styled validation/status without renaming * a single class. */ .container .card { max-width: 480px; margin: 32px auto; } .card-header { padding: 20px 24px; color: var(--mo-primary); font-weight: 600; font-size: 1.1rem; } .card-body { padding: 24px; } .form-group { margin-bottom: 16px; } .col-form-label { display: block; margin-bottom: 4px; color: var(--mo-ink); font-weight: 500; text-align: left; } .form-control:focus { border-bottom: 1px solid var(--mo-interactive) !important; box-shadow: 0 1px 0 0 var(--mo-interactive) !important; } .invalid-feedback { display: block; color: var(--mo-error); font-size: .85rem; margin-top: 4px; } .alert { margin-bottom: 16px; } .alert-success { background: var(--mo-success-bg); border-left: 4px solid var(--mo-success); color: var(--mo-success); padding: 12px 16px; border-radius: var(--mo-radius); } .btn-link { background: transparent !important; box-shadow: none !important; color: var(--mo-interactive) !important; padding: 0 !important; text-transform: none; font-weight: 600; line-height: inherit; } .card.grey.lighten-4 { background-color: var(--mo-bg) !important; } .card-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .card-action a { margin-left: 0; } /* ---- Checkbox field + help text (waypoint form) ------------------------- * * Materialize draws its checkbox via a top-anchored pseudo-element on the * label; the theme's 44px inline-flex touch-target rule then vertically * centres the text but not the box, so they misalign. Use the real native * box in a flex row for guaranteed alignment, and give the help text its own * block spacing (.mo-field-help was previously unstyled and rendered inline). */ .mo-check { display: flex; align-items: center; gap: 10px; min-height: 44px; } .mo-check input[type="checkbox"] { position: static; opacity: 1; pointer-events: auto; width: 18px; height: 18px; margin: 0; accent-color: var(--mo-interactive); cursor: pointer; } .mo-check input[type="checkbox"] + label { min-height: 0; padding-left: 0; margin: 0; display: inline-flex; align-items: center; color: var(--mo-ink); cursor: pointer; } /* neutralise Materialize's drawn pseudo-box for this native checkbox */ .mo-check input[type="checkbox"] + label:before, .mo-check input[type="checkbox"] + label:after { content: none; display: none; } .mo-field-help { display: block; margin: 6px 0 0; color: var(--mo-muted); font-size: .85rem; line-height: 1.45; }