*/
.card.card-clear {
background-color: rgba(255, 255, 255, 0.25);
}
.card-header {
padding: 0.75rem 0.75rem;
}
.project-tabs {
padding: 0;
}
.project-tabs .nav-tabs {
background-color: var(--installa-primary);
color: var(--installa-gray-700);
}
.project-tabs .nav-tabs .nav-link {
padding: 0.75rem 0.75rem;
border-right: 1px solid var(--installa-info) !important;
}
/* ==========================================================================
7. TEXT COLORS FOR CARDS
========================================================================== */
/**
* Dark text for light-background containers
* Ensures readability on white/light card backgrounds
*/
.card-body,
.card-footer,
.modal-body,
.modal-footer,
.table,
.list-group-item,
.accordion-body,
.alert,
label {
color: #344050;
}
/**
* Keep inherited text color for glass/transparent cards
* These cards have dark backgrounds, so text should stay light
*/
.card-glass .card-body,
.card-glass .card-footer,
.card-glass .list-group-item,
.card-clear .card-body,
.card-clear .card-footer {
color: inherit;
}
/**
* Adjust .text-mid for better visibility on glass backgrounds
* Darker than normal to contrast with translucent backgrounds
*/
.card-glass .text-mid,
.card-clear .text-mid {
color: rgba(60, 60, 60, 0.7) !important;
}
/* ==========================================================================
8. BUTTON OVERRIDES
========================================================================== */
/**
* Outline buttons need solid-ish backgrounds
* to be visible against translucent card backgrounds and other dark backgrounds
*/
.btn-outline-primary {
background-color: rgba(13, 110, 253, 0.5);
border-color: #0d6efd;
color: #fff;
}
.btn-outline-secondary {
background-color: rgba(108, 117, 125, 0.5);
border-color: #6c757d;
color: #fff;
}
.btn-outline-success {
background-color: rgba(25, 135, 84, 0.5);
border-color: #198754;
color: #fff;
}
.btn-outline-info {
background-color: rgba(13, 202, 240, 0.5);
border-color: #0dcaf0;
color: #fff;
}
.btn-outline-warning {
background-color: rgba(255, 193, 7, 0.5);
border-color: #ffc107;
color: #000;
}
.btn-outline-danger {
background-color: rgba(220, 53, 69, 0.5);
border-color: #dc3545;
color: #fff;
}
/* On the app background or frosted glass (page headers, filter rows) this is a secondary action, and grey on blue
read as disabled ("Edit", "Back to the job", "Team availability"). It is white there, and grey only on a white surface. */
.btn-outline-light {
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.65);
color: #fff;
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
background-color: rgba(255, 255, 255, 0.28);
border-color: #fff;
color: #fff;
}
.card:not(.card-glass):not(.card-clear) .btn-outline-light,
.card-solid .btn-outline-light,
.modal-content .btn-outline-light,
.dropdown-menu .btn-outline-light,
.offcanvas .btn-outline-light {
background-color: rgba(225, 225, 225, 0.2);
border-color: rgba(120, 120, 120, 0.5);
color: #555;
}
/* A task row's title is a line in a list, not a heading */
.summary-task .summary-title.task-title {
font-size: 1rem;
line-height: 1.3;
}
/* ==========================================================================
9. FORM INPUT ADJUSTMENTS
========================================================================== */
/** More vertical, less horizontal padding for inputs */
.form-control,
.form-select {
padding: 0.5rem 0.5rem;
border: 1px solid #ccc;
}
/* ==========================================================================
10. CARD HEADER/BODY/FOOTER CONTRAST
========================================================================== */
.card.card-glass {
background-color: rgba(255, 255, 255, 0.80);
}
/** Standard cards: white header, light gray body/footer */
.card:not(.card-glass):not(.card-clear)>.card-header {
background-color: rgba(255, 255, 255, 1);
}
.card:not(.card-glass):not(.card-clear)>.card-body {
background-color: rgba(248, 249, 250, 1);
}
.card:not(.card-glass):not(.card-clear)>.card-footer {
background-color: rgba(248, 249, 250, 1);
}
/** Ensure card-body/footer inherit border-radius when at the edges of a card */
.card:not(.card-glass):not(.card-clear)>.card-body:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.card:not(.card-glass):not(.card-clear)>.card-body:last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
/** Glass cards: subtle transparent backgrounds */
.card-glass>.card-header {
background-color: rgba(255, 255, 255, 0.15);
}
.card-glass>.card-body {
background-color: rgba(0, 0, 0, 0.03);
}
.card-glass>.card-footer {
background-color: rgba(0, 0, 0, 0.05);
}
/* ==========================================================================
11. TABLE STYLES
========================================================================== */
/** Large row variant for emphasis */
tr.bigrow {
font-size: 150%;
}
/* ==========================================================================
12. DEVELOPMENT HELPERS
========================================================================== */
/**
* Visual indicator for work-in-progress features
* Usage:
*/
.development-placeholder {
opacity: 0.9;
outline: 1px dashed red;
box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, 0.5);
}
/* ==========================================================================
13. USER BADGE COMPONENT
========================================================================== */
/**
* Compact user display with avatar
* Usage:
Name
*/
.user-badge {
display: inline-block;
padding: 2px;
border: 1px solid #eee;
background: #fff;
color: #111;
border-radius: 24px;
text-align: left;
min-width: 160px;
}
.user-badge span {
padding: 0 10px 0 0;
}
.user-badge img {
width: 32px;
height: 32px;
margin-right: 8px;
border-radius: 16px;
}
.user-badge:hover {
background-color: #106DB8;
}
.user-badge:hover span {
color: #fff;
}
/* ==========================================================================
14. CONTENT EDITABLE STYLES
========================================================================== */
/** Remove default outline for contenteditable elements */
[contenteditable] {
outline: 0px solid transparent;
}
/** Visual indicator when editing inline content */
.editing {
outline: 5px dashed rgba(252, 151, 0, 0.9);
}
/* ==========================================================================
15. NOTEBOARD COMPONENT
========================================================================== */
/**
* Sticky note / noteboard styling
* Yellow background reminiscent of physical sticky notes
*/
.noteboard {
padding: 20px;
font-size: 22px;
line-height: 140%;
color: #171717;
background: #F5EEA6;
}
/** Noteboard empty state - compact with placeholder */
.noteboard .editable-content:empty::before {
content: "Sticky note — access codes, \"call after 6pm\", anything the team should see at a glance. Click the pen to add one.";
color: #b0a050;
font-size: 13px;
font-style: italic;
}
.noteboard:has(.editable-content:empty) {
padding: 8px 20px;
font-size: 13px;
}
/** Noteboard in edit mode - more vibrant, with inner shadow */
.noteboard.editing {
background-color: #f9f193;
box-shadow: inset 2px 2px 1em rgb(201, 154, 5);
color: #000;
font-style: italic;
}
/* ==========================================================================
16. ADDRESS/MAP STYLES
========================================================================== */
/** Responsive address map image */
.address-map {
max-width: 100%;
height: auto;
margin: 0 auto;
max-height: 240px;
width: 100%;
}
/* ==========================================================================
17. FORM HELP BLOCKS
========================================================================== */
/** Help text below form inputs - hidden until hover */
.main-form-area .help-block {
font-size: 14px;
line-height: 16px;
margin-top: 2px;
margin-bottom: 0;
padding: 0;
opacity: 0;
}
.main-form-area input:hover+.help-block,
.main-form-area select:hover+.help-block,
.main-form-area textarea:hover+.help-block {
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
}
/** Required field indicator (asterisk) */
.main-form-area .form-group .control-label sup {
font-size: 18px;
color: #FF9719;
line-height: 80%;
}
/* ==========================================================================
18. SCROLLBAR STYLES
========================================================================== */
/**
* Thin, themed scrollbars for all scrollable elements
* (textareas, dropdowns, modals, kanban columns, etc.)
* The main page body scrollbar is handled by OverlayScrollbars in scrollbar.js
*/
*,
*::before,
*::after {
scrollbar-width: thin;
scrollbar-color: rgba(59, 130, 211, 0.4) transparent;
}
/* ==========================================================================
19. CURSOR UTILITIES
========================================================================== */
/**
* Cursor utility classes for interactive elements
* Usage:
for grab cursor on hover
*/
.alias {
cursor: alias;
}
.all-scroll {
cursor: all-scroll;
}
.auto {
cursor: auto;
}
.cell {
cursor: cell;
}
.col-resize {
cursor: col-resize;
}
.context-menu {
cursor: context-menu;
}
.copy {
cursor: copy;
}
.crosshair {
cursor: crosshair;
}
.default {
cursor: default;
}
.e-resize {
cursor: e-resize;
}
.ew-resize {
cursor: ew-resize;
}
.grab {
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.help {
cursor: help;
}
.move {
cursor: move;
}
.n-resize {
cursor: n-resize;
}
.ne-resize {
cursor: ne-resize;
}
.nesw-resize {
cursor: nesw-resize;
}
.ns-resize {
cursor: ns-resize;
}
.nw-resize {
cursor: nw-resize;
}
.nwse-resize {
cursor: nwse-resize;
}
.no-drop {
cursor: no-drop;
}
.none {
cursor: none;
}
.not-allowed {
cursor: not-allowed;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.row-resize {
cursor: row-resize;
}
.s-resize {
cursor: s-resize;
}
.se-resize {
cursor: se-resize;
}
.sw-resize {
cursor: sw-resize;
}
.text {
cursor: text;
}
.w-resize {
cursor: w-resize;
}
.wait {
cursor: wait;
}
.zoom-in {
cursor: zoom-in;
}
.zoom-out {
cursor: zoom-out;
}
/* ==========================================================================
20. BREADCRUMB / CONTEXT TRAIL (rendered by layouts/app from each
screen's @section('breadcrumbs') via App\Support\Breadcrumbs)
========================================================================== */
.app-breadcrumbs {
padding: 0.35rem 0 0.15rem;
min-height: 1.9rem;
font-size: 0.8125rem;
}
.app-breadcrumbs .app-breadcrumb {
background: transparent;
padding: 0;
}
.app-breadcrumbs .breadcrumb-item,
.app-breadcrumbs .breadcrumb-item a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.app-breadcrumbs .breadcrumb-item a:hover {
color: #fff;
text-decoration: underline;
}
.app-breadcrumbs .breadcrumb-item.active {
color: #fff;
font-weight: 600;
}
.app-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.45);
}
.app-breadcrumbs-help {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
line-height: 1;
}
.app-breadcrumbs-help:hover,
.app-breadcrumbs-help:focus {
color: #fff;
}
/* ==========================================================================
21. PROJECT LIFECYCLE TRACKER (livewire/projects/lifecycle-control,
rendered inside the light project hero card)
========================================================================== */
.lifecycle-tracker {
display: flex;
align-items: flex-start;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
counter-reset: lifecycle;
}
.lifecycle-tracker__step {
position: relative;
flex: 1 1 0;
min-width: 0;
text-align: center;
padding-top: 0.15rem;
}
.lifecycle-tracker__step::before {
content: "";
position: absolute;
top: 0.95rem;
left: 50%;
right: -50%;
height: 2px;
background: rgba(15, 40, 80, 0.14);
}
.lifecycle-tracker__step:last-child::before {
display: none;
}
.lifecycle-tracker__step.is-done::before {
background: #2ecc71;
}
.lifecycle-tracker__dot {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
background: #fff;
color: #6c7a8f;
border: 2px solid rgba(15, 40, 80, 0.18);
}
.lifecycle-tracker__step.is-done .lifecycle-tracker__dot {
background: #2ecc71;
border-color: #2ecc71;
color: #fff;
}
.lifecycle-tracker__step.is-current .lifecycle-tracker__dot {
background: #0d6efd;
border-color: #0d6efd;
color: #fff;
box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18);
}
.lifecycle-tracker__label {
display: block;
margin-top: 0.3rem;
font-size: 0.68rem;
line-height: 1.15;
color: #6c7a8f;
padding: 0 0.15rem;
}
.lifecycle-tracker__step.is-current .lifecycle-tracker__label {
color: #0d6efd;
font-weight: 700;
}
.lifecycle-tracker__step.is-done .lifecycle-tracker__label {
color: #2f3e55;
}
.lifecycle-tracker--parked {
opacity: 0.55;
}
.lifecycle-control__badge {
border-radius: 999px;
font-size: 0.74rem;
padding: 0.35rem 0.75rem;
}
.lifecycle-control__menu {
min-width: 17rem;
max-height: 70vh;
overflow-y: auto;
}
@media (max-width: 767.98px) {
.lifecycle-tracker__label {
display: none;
}
}
/* ==========================================================================
22. DISCOVERABLE UI: "+ New" button, screen tips, Today work queues,
customer journey, workspace hint in the sidebar
========================================================================== */
.app-new-btn {
padding: 0.25rem 0.85rem;
border: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.app-tip {
margin: 0.25rem 0 1rem;
padding: 0.75rem 1rem;
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.92);
border-left: 4px solid #f5b400;
color: #2f3e55;
box-shadow: 0 2px 8px rgba(15, 40, 80, 0.08);
}
.app-tip__icon {
color: #f5b400;
font-size: 1.15rem;
line-height: 1.4;
}
.app-tip__title {
font-weight: 700;
font-size: 0.9rem;
}
.app-tip__body {
font-size: 0.85rem;
line-height: 1.45;
}
.app-tip__close {
font-size: 0.7rem;
margin-top: 0.15rem;
}
/* Today queues (dashboard) */
.today-queues {
align-items: flex-start;
}
.today-queue {
border: 0;
border-radius: 0.75rem;
background: #fff;
box-shadow: 0 4px 14px rgba(15, 40, 80, 0.08);
}
.today-queue__head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.9rem 0.4rem;
}
.today-queue__count {
margin-left: auto;
min-width: 1.9rem;
text-align: center;
border-radius: 999px;
font-weight: 700;
font-size: 0.8rem;
padding: 0.15rem 0.5rem;
}
.today-queue__title {
font-weight: 700;
font-size: 0.85rem;
color: #2f3e55;
}
.today-queue__list {
list-style: none;
margin: 0;
padding: 0 0.4rem 0.4rem;
}
.today-queue__item {
display: block;
padding: 0.4rem 0.5rem;
border-radius: 0.4rem;
color: #2f3e55;
text-decoration: none;
line-height: 1.25;
}
.today-queue__item:hover {
background: rgba(13, 110, 253, 0.06);
color: #0d6efd;
}
.today-queue__item-title {
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.today-queue__item-meta {
font-size: 0.72rem;
color: #6c7a8f;
}
.today-queue__empty {
padding: 0.4rem 0.9rem 0.9rem;
font-size: 0.78rem;
color: #6c7a8f;
}
.today-queue__foot {
padding: 0.3rem 0.9rem 0.7rem;
font-size: 0.75rem;
}
/* Customer journey (customer / enquiry page) */
.customer-journey {
background: rgba(255, 255, 255, 0.94);
border-radius: 0.75rem;
padding: 0.9rem 1.1rem;
box-shadow: 0 4px 14px rgba(15, 40, 80, 0.08);
}
.customer-journey .lifecycle-tracker__label {
font-size: 0.72rem;
}
.customer-journey__next {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed rgba(15, 40, 80, 0.12);
}
.customer-journey__hint {
font-size: 0.85rem;
color: #2f3e55;
}
/* Sidebar workspace hint */
.nav-workspace-hint {
display: block;
margin: 0 0.5rem;
padding: 0.6rem 0.75rem;
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.72rem;
line-height: 1.35;
}
.nav-workspace-hint:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.nav-workspace-hint__label {
display: block;
font-weight: 700;
margin-bottom: 0.15rem;
}
.navbar-vertical-collapsed .nav-workspace-hint__text {
display: none;
}
/* ==========================================================================
20. Design System Primitives
--------------------------------------------------------------------------
Styles for the shared Blade components in resources/views/components/general.
Anything here is used by more than one screen; if a rule is only true of one
screen it belongs in that screen, not in the system.
Card surfaces - there are three, and a screen picks one:
.card solid, for content on a light background
.card-glass frosted, for content over the app background
.card-clear lighter frosted, for nesting inside a glass card
.card-solid opaque white with a soft shadow, for dense dashboards
where frosted glass makes small text hard to read
========================================================================== */
.card-solid {
border: 1px solid rgba(36, 72, 140, 0.12);
border-radius: 12px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 10px 24px rgba(21, 52, 105, 0.10);
color: #1f2a3d;
}
.card-solid .card-header {
border-bottom-color: rgba(36, 72, 140, 0.10);
background: transparent;
}
.card-solid .list-group-item {
border-color: rgba(36, 72, 140, 0.10);
}
.card-solid .text-muted {
color: #5a6780 !important;
}
/* Page header ------------------------------------------------------------- */
.page-header__back {
display: inline-block;
margin-bottom: 0.15rem;
font-size: 0.78rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.page-header__back:hover {
color: #fff;
}
.page-header__subtitle {
font-weight: 400;
}
.page-header__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
}
/* A form-select is display:block in Bootstrap, so it would take the whole row
in a header that mixes a filter with buttons. */
.page-header__actions .form-select,
.page-header__actions .form-control {
width: auto;
}
.page-header__actions form {
margin: 0;
}
/* Panel ------------------------------------------------------------------- */
.panel-header--subtle {
font-weight: 600;
color: #344050;
border-bottom: 1px solid rgba(36, 72, 140, 0.12);
}
.card-glass .panel-header--subtle,
.card-clear .panel-header--subtle {
color: #344050;
}
.panel-header__toggle {
text-decoration: none;
line-height: 1;
}
.panel-header__toggle i {
transition: transform 0.2s ease;
}
.panel-header__toggle[aria-expanded="false"] i {
transform: rotate(-90deg);
}
/* Filter chips ------------------------------------------------------------ */
.chip-bar {
margin-bottom: 0;
}
.quick-filter-btn {
border-radius: 999px;
font-weight: 600;
}
.quick-filter-btn .badge {
margin-left: 0.2rem;
font-weight: 700;
}
/* Empty states ------------------------------------------------------------ */
.empty-state__body {
max-width: 34rem;
margin-left: auto;
margin-right: auto;
}
.empty-state-plain .card-body {
padding-left: 0;
padding-right: 0;
}
/* Stat tiles -------------------------------------------------------------- */
a.stat-tile {
color: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.stat-tile:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(21, 52, 105, 0.16);
}
.stat-tile__value {
font-weight: 700;
}
/* Pagination -------------------------------------------------------------- */
.pagination-bar .pagination {
margin-bottom: 0;
}
.pagination-bar .text-mid {
color: rgba(255, 255, 255, 0.75) !important;
}
.card .pagination-bar .text-mid,
.card-solid .pagination-bar .text-mid {
color: #5a6780 !important;
}
/* Section headings -------------------------------------------------------- */
.section-heading {
margin-top: 1.25rem;
}
.section-heading:first-child {
margin-top: 0;
}
/* Pill buttons - quick actions on the home page, quick filters on lists */
.quick-action-btn {
border-radius: 999px;
font-weight: 600;
}
/* Card header defaults ------------------------------------------------------
A .card-header with no classes gets Bootstrap's grey bar, which sits wrong
on a frosted card. 47 headers had none and 100 said bg-transparent, so the
same panel looked like two different components depending on who wrote it.
Inside the app's own card surfaces, transparent is the default; a screen
that wants a solid bar still says bg-primary and wins on specificity. */
.card-glass > .card-header:not([class*="bg-"]),
.card-clear > .card-header:not([class*="bg-"]),
.card-solid > .card-header:not([class*="bg-"]) {
background-color: transparent;
border-bottom-color: rgba(36, 72, 140, 0.12);
}
/* Headings inside a card header drift between h5 and h6 across screens; they
are the same thing, so they read the same size. Scoped to the app's own card
surfaces: the system admin panel is a separate design family and its plain
.card headers are left as they are. */
.card-glass > .card-header > h5,
.card-glass > .card-header > h6,
.card-clear > .card-header > h5,
.card-clear > .card-header > h6,
.card-solid > .card-header > h5,
.card-solid > .card-header > h6 {
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0;
}
/* ==========================================================================
* Settings page - a long settings form made navigable
* (docs/CompanyProfileUXAudit.md). A sticky section menu, one panel per
* section, and a save bar that is always within reach.
*
* Usage: .settings-page > (.settings-nav | .settings-section*) + .settings-savebar
* ========================================================================== */
.settings-page {
padding-bottom: 5rem; /* room for the save bar */
}
.settings-section {
scroll-margin-top: 5.5rem; /* clear the app's top bar when jumped to */
margin-bottom: 1.5rem;
padding: 0; /* the theme pads every as if it were a landing-page band */
}
.settings-section .card-header h5,
.settings-section .card-header h6 {
font-size: 1.05rem;
}
/* Where this section's contents end up, in the panel header */
.settings-section__where {
font-size: 0.8rem;
opacity: 0.75;
}
.settings-subheading {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.7;
margin: 0.25rem 0 0.75rem;
}
.settings-subheading:not(:first-child) {
margin-top: 0.75rem;
padding-top: 1rem;
border-top: 1px solid rgba(11, 23, 39, 0.1);
}
/* Section menu */
.settings-nav {
position: sticky;
top: 5.5rem;
padding: 0.5rem;
gap: 2px;
}
.settings-nav__link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
border-radius: 0.5rem;
border-left: 3px solid transparent;
color: inherit;
text-decoration: none;
font-size: 0.9rem;
opacity: 0.8;
transition: background-color 0.15s ease, opacity 0.15s ease;
}
.settings-nav__link:hover {
background-color: rgba(255, 255, 255, 0.45);
color: inherit;
opacity: 1;
}
.settings-nav__link.is-active {
background-color: rgba(255, 255, 255, 0.75);
border-left-color: var(--falcon-success, #00d27a);
font-weight: 600;
opacity: 1;
}
@media (max-width: 991.98px) {
.settings-nav {
position: static;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
}
.settings-nav__link {
border-left: 0;
border-bottom: 3px solid transparent;
}
.settings-nav__link.is-active {
border-bottom-color: var(--falcon-success, #00d27a);
}
}
/* An aside inside a section: context, not a control */
.settings-note {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.settings-note > i {
margin-top: 0.2rem;
opacity: 0.7;
}
/* A link out to a related settings screen */
.settings-link {
display: flex;
align-items: center;
gap: 0.75rem;
height: 100%;
padding: 0.75rem 1rem;
border: 1px solid rgba(11, 23, 39, 0.15);
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.35);
color: inherit;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.settings-link:hover {
background-color: rgba(255, 255, 255, 0.7);
border-color: rgba(11, 23, 39, 0.3);
color: inherit;
}
.settings-link small {
display: block;
opacity: 0.7;
}
/* Logo on a white tile: what it will look like on paper */
.settings-logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
color: #9da9bb;
}
.settings-logo img {
max-width: 100%;
max-height: 100px;
}
/* Live preview of a computed value */
.settings-preview {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
border-radius: 0.5rem;
border: 1px dashed rgba(11, 23, 39, 0.3);
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
}
.settings-preview__label {
font-size: 0.8rem;
opacity: 0.7;
}
.settings-preview__value {
font-size: 1.35rem;
font-family: var(--falcon-font-monospace, monospace);
letter-spacing: 0.02em;
}
/* Pick-one cards: the option and its explanation are the same thing */
.settings-choice {
display: flex;
gap: 0.75rem;
height: 100%;
padding: 0.9rem 1rem;
border: 1px solid rgba(11, 23, 39, 0.15);
background-color: rgba(255, 255, 255, 0.35);
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.settings-choice:hover {
background-color: rgba(255, 255, 255, 0.65);
}
.settings-choice:has(input:checked) {
border-color: var(--falcon-success, #00d27a);
background-color: rgba(0, 210, 122, 0.14);
}
.settings-choice input {
margin-top: 0.3rem;
accent-color: var(--falcon-success, #00d27a);
}
.settings-choice__title {
display: block;
font-weight: 600;
}
.settings-choice__text {
display: block;
font-size: 0.85rem;
opacity: 0.75;
}
/* Save bar */
.settings-savebar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1020;
padding: 0.6rem 1rem;
background-color: rgba(11, 23, 39, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
}
.settings-savebar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 1320px;
margin: 0 auto;
padding-right: 4rem; /* the help widget lives in the bottom-right corner */
}
.settings-savebar__status {
font-size: 0.9rem;
}
.settings-savebar__status i {
font-size: 0.55rem;
vertical-align: middle;
color: #9da9bb;
}
.settings-savebar[data-dirty="true"] {
border-top-color: #f5803e;
}
.settings-savebar[data-dirty="true"] .settings-savebar__status i {
color: #f5803e;
}
.settings-savebar[data-dirty="false"] [data-when="dirty"],
.settings-savebar[data-dirty="true"] [data-when="clean"] {
display: none;
}
/* ==========================================================================
* Brands - a list, then a workbench per brand (docs/BrandsUXAudit.md):
* the brand's settings on the left, a live preview that follows on the right.
*
* Usage: .settings-page.brand-workbench > .brand-workbench__form + .brand-workbench__preview
* ========================================================================== */
.settings-nav--row {
color: #344050; /* outside a panel, so nothing else sets it */
flex-direction: row;
flex-wrap: wrap;
top: 4.5rem;
z-index: 5;
margin-bottom: 1rem;
border-radius: 0.6rem;
}
.settings-nav--row .settings-nav__link {
border-left: 0;
border-bottom: 3px solid transparent;
padding: 0.4rem 0.7rem;
font-size: 0.85rem;
}
.settings-nav--row .settings-nav__link.is-active {
border-bottom-color: var(--falcon-success, #00d27a);
}
.brand-workbench {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 1.5rem;
align-items: start;
}
.brand-workbench .settings-section {
scroll-margin-top: 9rem; /* the top bar and the section menu */
}
.brand-workbench__preview {
position: sticky;
top: 4.5rem;
}
.brand-preview {
display: flex;
flex-direction: column;
height: calc(100vh - 9.5rem);
min-height: 420px;
border-radius: 0.6rem;
overflow: hidden;
}
.brand-preview__bar,
.brand-preview__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.6rem 0.75rem;
}
.brand-preview__foot {
font-size: 0.8rem;
opacity: 0.75;
}
.brand-preview__stage {
flex: 1;
min-height: 0;
overflow: hidden;
background-color: #e5e7eb;
}
.brand-preview__stage iframe {
display: block;
border: 0;
background-color: #fff;
transform-origin: 0 0;
}
@media (max-width: 1199.98px) {
.brand-workbench {
grid-template-columns: minmax(0, 1fr);
}
.brand-workbench__preview {
position: static;
order: -1;
}
.brand-preview {
height: 60vh;
}
}
/* Colour: picker, hex and a row of starting points */
.brand-colour {
display: flex;
gap: 0.5rem;
}
.brand-colour__picker {
flex: 0 0 2.6rem;
height: calc(1.5em + 0.75rem + 2px);
padding: 2px;
border: 1px solid rgba(11, 23, 39, 0.2);
border-radius: 0.375rem;
background-color: #fff;
cursor: pointer;
}
.brand-swatches {
display: flex;
gap: 0.35rem;
margin-top: 0.5rem;
}
.brand-swatches button {
width: 1.4rem;
height: 1.4rem;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(11, 23, 39, 0.2);
cursor: pointer;
}
/* A thumbnail of where the logo sits in the document header */
.brand-layout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
width: 100%;
min-width: 6.5rem;
height: 2rem;
margin-bottom: 0.35rem;
padding: 0.3rem;
border-bottom: 2px solid rgba(11, 23, 39, 0.35);
background-color: #fff;
border-radius: 0.25rem 0.25rem 0 0;
}
.brand-layout i {
width: 2rem;
height: 0.9rem;
border-radius: 2px;
background-color: rgba(11, 23, 39, 0.55);
}
.brand-layout b {
width: 1.4rem;
height: 0.35rem;
border-radius: 2px;
background-color: rgba(11, 23, 39, 0.25);
}
.brand-layout--right {
flex-direction: row-reverse;
}
.brand-layout--centre {
flex-direction: column;
justify-content: center;
gap: 0.2rem;
}
.brand-layout--centre i {
height: 0.7rem;
}
/* The brands list: each row is the way in */
.brand-list {
display: grid;
gap: 0.75rem;
}
.brand-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.9rem 1.1rem;
border-radius: 0.6rem;
color: #344050; /* a bare link on the page background inherits white; this row is a light card */
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brand-row:hover {
color: #344050;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(11, 23, 39, 0.18);
}
.brand-row__logo {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 7.5rem;
height: 3.5rem;
padding: 0.4rem;
border-radius: 0.4rem;
background-color: #fff;
}
.brand-row__logo img {
max-width: 100%;
max-height: 100%;
}
.brand-row__initials {
display: flex;
align-items: center;
justify-content: center;
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
font-weight: 700;
font-size: 0.9rem;
overflow: hidden;
}
.brand-list + .settings-note {
color: #344050;
background-color: rgba(255, 255, 255, 0.8);
}
.brand-row__main {
flex: 1;
min-width: 0;
}
.brand-row__name {
display: block;
font-size: 1.05rem;
font-weight: 600;
}
.brand-row__meta {
display: block;
font-size: 0.85rem;
opacity: 0.75;
}
.brand-row__swatches {
display: flex;
}
.brand-row__swatches span {
width: 1.5rem;
height: 1.5rem;
margin-left: -0.4rem;
border: 2px solid #fff;
border-radius: 50%;
}
.brand-row__go {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
}
.brand-empty {
padding: 2.5rem 1rem;
text-align: center;
}
.brand-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
border-radius: 50%;
background-color: rgba(0, 210, 122, 0.18);
font-size: 1.6rem;
}
/* ==========================================================================
* Quotes: the journey card on a quote, the send screen, the history list
* (docs/QuoteToAcceptanceUXAudit.md). The journey card reuses .customer-journey;
* the send screen reuses .brand-workbench and .brand-preview.
* ========================================================================== */
.quote-journey__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.quote-journey__actions .btn.w-100 {
width: auto !important; /* the acceptance button is full-width in a sidebar, not here */
}
.quote-checks {
list-style: none;
margin: 0.75rem 0 0;
padding: 0.6rem 0.8rem;
border-radius: 0.5rem;
background-color: #fff8e6;
color: #5c4a12;
font-size: 0.85rem;
}
.quote-checks li + li {
margin-top: 0.3rem;
}
.quote-checks li i {
width: 1.1rem;
color: #d39e00;
}
.quote-checks li.is-blocking i {
color: #dc3545;
}
.quote-checks--panel {
margin-top: 0;
}
.quote-history {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.85rem;
}
.quote-history li {
display: flex;
gap: 0.75rem;
padding: 0.45rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.quote-history li:last-child {
border-bottom: 0;
}
.quote-history__when {
flex: 0 0 4.2rem;
opacity: 0.7;
white-space: nowrap;
}
.quote-send__effects {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.quote-send__effects li {
display: flex;
gap: 0.65rem;
padding: 0.3rem 0;
}
.quote-send__effects li i {
flex: 0 0 1.1rem;
margin-top: 0.2rem;
opacity: 0.75;
}
.quote-send .brand-workbench__form .card {
margin-bottom: 1rem;
}
.quote-line--off td {
opacity: 0.55;
}
.quote-line--off td:first-child {
opacity: 1;
}
.quote-message {
margin: 0 1.25rem 0.5rem 0;
padding: 0.5rem 0.7rem;
border-radius: 10px 10px 10px 3px;
background-color: rgba(255, 255, 255, 0.16);
font-size: 0.85rem;
overflow-wrap: anywhere;
}
.quote-message.is-ours {
margin: 0 0 0.5rem 1.25rem;
border-radius: 10px 10px 3px 10px;
background-color: rgba(46, 204, 113, 0.22);
}
.quote-message__who {
display: block;
font-size: 0.7rem;
opacity: 0.75;
}
/* ==========================================================================
* Job guide: every step of a job, what is set and what is not (docs/JobGuideUXAudit.md)
* Usage: .job-guide > .job-guide__next + .job-guide__steps > details.job-guide__step.is-{done|current|gap|todo}
* Sits inside the job screen's light .project-panel, so its colours are dark-on-light.
* ========================================================================== */
.job-guide__next {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0.85rem 0;
padding: 0.75rem 1rem;
border-radius: 0.6rem;
background-color: #eefaf2;
border: 1px solid #bfe8cd;
color: #1d3b29;
}
.job-guide__next strong { margin-right: 0.4rem; }
.job-guide__gaps {
margin: 0 0 0.75rem;
font-size: 0.85rem;
color: #7a5a00;
}
.job-guide__step {
border: 1px solid #e3e8ef;
border-radius: 0.6rem;
background-color: #fff;
}
.job-guide__step + .job-guide__step { margin-top: 0.4rem; }
.job-guide__step.is-current { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1); }
.job-guide__step.is-gap { border-color: #f0c36d; }
.job-guide__step > summary {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.85rem;
cursor: pointer;
list-style: none;
color: #2f3e55;
}
.job-guide__step > summary::-webkit-details-marker { display: none; }
.job-guide__dot {
flex: 0 0 1.9rem;
height: 1.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.75rem;
background-color: #eef1f5;
color: #6c7a8f;
}
.is-done > summary .job-guide__dot { background-color: #2ecc71; color: #fff; }
.is-current > summary .job-guide__dot { background-color: #0d6efd; color: #fff; }
.is-gap > summary .job-guide__dot { background-color: #f5a623; color: #fff; }
.job-guide__label { flex: 0 0 auto; min-width: 8.5rem; font-weight: 600; }
.job-guide__summary { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; color: #5b6779; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-guide__count { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background-color: #fff3d6; color: #7a5a00; white-space: nowrap; }
.job-guide__chevron { font-size: 0.7rem; color: #9aa6b8; transition: transform 0.15s; }
.job-guide__step[open] .job-guide__chevron { transform: rotate(180deg); }
.job-guide__body { padding: 0.25rem 0.85rem 0.75rem 3.5rem; }
.job-guide__facts { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; color: #2f3e55; }
.job-guide__facts li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px dashed #eef1f5; }
.job-guide__facts li:first-child { border-top: 0; }
.job-guide__facts li > i { flex: 0 0 1rem; font-size: 0.8rem; }
.job-guide__facts .is-set > i { color: #2ecc71; }
.job-guide__facts .is-open > i { color: #f5a623; }
.job-guide__facts .is-optional > i { color: #c5cedb; }
.job-guide__facts .is-optional { color: #6c7a8f; }
.job-guide__fact { flex: 1 1 auto; }
.job-guide__fix { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.job-guide__moves { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.stage-warnings {
margin: 0.75rem 0;
padding: 0.75rem 1rem;
border-radius: 0.6rem;
background-color: #fff8e6;
border: 1px solid #f0c36d;
color: #5c4a12;
font-size: 0.88rem;
}
.stage-warnings ul { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; }
.stage-warnings small { display: block; margin-top: 0.5rem; opacity: 0.8; }
.lifecycle-tracker__step { position: relative; }
.lifecycle-tracker__link { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 767.98px) {
.job-guide__summary { display: none; }
.job-guide__body { padding-left: 0.85rem; }
}
.job-guide__catchup {
margin: 0 0 0.75rem;
font-size: 0.85rem;
color: #2f3e55;
}
/* Livewire's own paginator prints "Showing 1 to 25 of 98 results" under , which has already
said "Showing 1-25 of 98 customers". Say it once, with the right noun. */
.pagination-bar nav p.small.text-muted {
display: none;
}
/* Sales board: columns side by side on a wide screen; on a phone, the one column picked above the board */
.kanban-columns { min-width: max-content; }
.kanban-column { width: 280px; flex-shrink: 0; }
@media (max-width: 767.98px) {
.kanban-columns { min-width: 0; }
.kanban-column { display: none; width: 100%; }
.kanban-column.is-phone-stage { display: block; }
}
/* ── Calendar: the top bar and the month grid's own header ────────────────────────────────────────
Two sticky things were both pinned to top: 0. The app's top bar (.navbar-top) is see-through until
the page scrolls, when the theme adds .navbar-glass-shadow — but only the shadow, not a background,
so whatever scrolled underneath it showed straight through. FullCalendar separately pins the month
grid's day-name row, which is what scrolled underneath: the day names and the top bar's own controls
ghosted through each other.
The bar gets a solid background the moment it is scrolled (its look at the top of the page is
unchanged), and the grid's header stops below it rather than sliding under it. */
.navbar-top.navbar-glass.navbar-glass-shadow {
background-color: var(--installa-body-bg, #3b82d3);
}
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
top: var(--installa-top-nav-height, 4.3125rem);
z-index: 2; /* the top bar is 1020: the day names pass under it, never over */
}
/* The same for the week list, which is the view a phone opens on */
.fc .fc-list-sticky .fc-list-day > * {
top: var(--installa-top-nav-height, 4.3125rem);
z-index: 2;
}
/* Designer: the Solar Analysis strip carries two annual figures worked out two different ways, so each
says under itself where its number came from (the tooltip says it at length). */
.stats-strip .stat-note {
font-size: 0.65rem;
line-height: 1.2;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}
/* ── Pick one of a few: tiles and chips ───────────────────────────────────────────────────────────
Bootstrap's .btn-check + .btn-outline-* only changes colour when it is checked, and the screens
that used it wrote their own overrides in a @push('styles') block. Those blocks reached for
var(--installa-secondary), which this theme does not define (it has --installa-secondary-rgb and
--installa-secondary-color, not that): the background resolved to nothing and a selected tile was
white text on a white card. These are the same controls, written once, in tokens that exist.
Used by: start a job (screens/projects/startproject). */
.choice-tile,
.choice-chip {
display: flex;
cursor: pointer;
border: 2px solid rgba(36, 72, 140, 0.18);
background: #fff;
color: #1f2a3d;
transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.choice-tile {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
height: 100%;
min-height: 5.25rem;
padding: 0.85rem 0.6rem;
border-radius: 12px;
text-align: center;
font-weight: 600;
line-height: 1.25;
}
.choice-tile i {
color: var(--installa-primary, #279ef9);
}
.choice-chip {
align-items: center;
padding: 0.35rem 0.8rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
}
.choice-tile--wide {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
padding: 0.5rem;
text-align: left;
font-weight: 500;
}
.choice-tile:hover,
.choice-chip:hover {
border-color: var(--installa-primary, #279ef9);
background: var(--installa-primary-bg-subtle, #d8eefe);
}
/* Checked: a filled tile in the brand blue, with white text that has 4.5:1 against it, and the
focus ring drawn on the label because the input itself is visually hidden. */
.btn-check:checked + .choice-tile,
.btn-check:checked + .choice-chip {
border-color: var(--installa-primary, #279ef9);
background: var(--installa-primary-text-emphasis, #1d77bb);
color: #fff;
box-shadow: 0 0 0 3px rgba(var(--installa-primary-rgb, 39, 158, 249), 0.25);
}
.btn-check:checked + .choice-tile i {
color: #fff;
}
.btn-check:focus-visible + .choice-tile,
.btn-check:focus-visible + .choice-chip {
outline: 3px solid var(--installa-primary, #279ef9);
outline-offset: 2px;
}
.btn-check:disabled + .choice-chip {
opacity: 0.45;
cursor: default;
}
/* The map thumbnail and the address lines beside it, on a tile or on its own */
.address-card__map {
width: 72px;
height: 72px;
flex: 0 0 auto;
border-radius: 8px;
object-fit: cover;
background: rgba(36, 72, 140, 0.08);
}
.address-card__lines {
line-height: 1.35;
font-size: 0.875rem;
}
.address-card--only {
padding: 0.75rem;
border: 2px solid var(--installa-success-border-subtle, #99edca);
border-radius: 12px;
background: var(--installa-success-bg-subtle, #d9f8eb);
color: #1f2a3d;
}