/* Profit Control — the "Square" theme. * * EVERY rule is scoped under [data-theme="square"]. Nothing here can touch the app * unless that attribute is on , so the original look survives untouched and the * switch is a genuine A/B rather than a rewrite with a fallback bolted on. Remove the * attribute and you are exactly back to where the app was. * * Loaded AFTER Bootstrap so it can retune it. Bootstrap 5.3 is itself variable-driven, * so most of this is handing it a palette rather than fighting it: set --bs-* and every * button, card, table and input follows. * * Palette lifted from the Square dashboard the owner chose — indigo primary, pink accent, * emerald for good news, a slate text ramp, Poppins, 12px corners, and shadows tinted * indigo rather than grey. That tint is what makes it read as designed rather than * defaulted. * * Adapted, not copied. Square shows five roomy panels; this app carries a 252-row count * sheet on a phone in a kitchen. So the rhythm tightens where rows repeat, contrast is * pushed above the template's (slate-500 on a pastel wash is fine in a marketing shot, * thin in daylight), and the page gradient is fixed so it cannot smear as a long table * scrolls. */ html[data-theme="square"] { /* ---- palette ------------------------------------------------------------ */ --rpc-primary: #6366f1; /* indigo-500 */ --rpc-primary-hover: #4f46e5; /* indigo-600 */ --rpc-primary-deep: #4338ca; /* indigo-700 */ --rpc-primary-soft: #eef2ff; /* indigo-50 */ --rpc-primary-line: #c7d2fe; /* indigo-200 */ --rpc-accent: #ec4899; /* pink-500 */ --rpc-good: #10b981; /* emerald-500 */ --rpc-good-soft: #d1fae5; /* emerald-100 */ --rpc-warn: #f59e0b; /* amber-500 */ --rpc-warn-soft: #fef3c7; /* amber-100 */ --rpc-bad: #ef4444; /* red-500 */ --rpc-ink: #1e293b; /* slate-800 — headings, numbers */ --rpc-body: #334155; /* slate-700 — body copy */ --rpc-muted: #64748b; /* slate-500 — hints */ --rpc-label: #475569; /* slate-600 — see note above */ --rpc-faint: #94a3b8; /* slate-400 */ --rpc-border: #e2e8f0; /* slate-200 */ --rpc-line: #cbd5e1; /* slate-300 — input edges */ --rpc-surface:#ffffff; --rpc-wash: #f8fafc; /* slate-50 — table head strip */ /* ---- shape and depth ---------------------------------------------------- */ --rpc-radius: 12px; /* rounded-xl, the template's default */ --rpc-radius-lg: 16px; /* rounded-2xl, the big panels */ --rpc-radius-sm: 10px; --rpc-shadow: 0 1px 2px rgba(99, 102, 241, .06), 0 10px 30px rgba(99, 102, 241, .08); --rpc-shadow-sm: 0 1px 3px rgba(99, 102, 241, .10); /* ---- hand it to Bootstrap ------------------------------------------------ */ --bs-primary: var(--rpc-primary); --bs-primary-rgb: 99, 102, 241; --bs-success: var(--rpc-good); --bs-success-rgb: 16, 185, 129; --bs-warning: var(--rpc-warn); --bs-danger: var(--rpc-bad); --bs-body-color: var(--rpc-body); --bs-border-color: var(--rpc-border); --bs-border-radius: var(--rpc-radius); --bs-border-radius-lg: var(--rpc-radius-lg); --bs-border-radius-sm: 8px; --bs-link-color: var(--rpc-primary); --bs-link-hover-color: var(--rpc-primary-hover); --bs-emphasis-color: var(--rpc-ink); --bs-font-sans-serif: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* The page wash. FIXED so a 252-row count sheet scrolls over it rather than dragging it. */ [data-theme="square"] body { font-family: var(--bs-font-sans-serif); color: var(--rpc-body); background: linear-gradient(100deg, #e0e7ff 0%, #f0f9ff 52%, #fce7f3 100%) fixed; -webkit-font-smoothing: antialiased; } [data-theme="square"] h1, [data-theme="square"] h2, [data-theme="square"] h3, [data-theme="square"] h4, [data-theme="square"] h5, [data-theme="square"] h6, [data-theme="square"] .h1, [data-theme="square"] .h2, [data-theme="square"] .h3, [data-theme="square"] .h4, [data-theme="square"] .h5 { color: var(--rpc-ink); font-weight: 600; letter-spacing: -.015em; } /* ---- navbar ------------------------------------------------------------------ */ [data-theme="square"] .navbar.bg-dark { background: var(--rpc-ink) !important; } [data-theme="square"] .navbar-brand { font-weight: 600; letter-spacing: -.02em; } [data-theme="square"] .navbar .nav-link { font-weight: 500; } [data-theme="square"] .dropdown-menu { border: 1px solid var(--rpc-border); border-radius: var(--rpc-radius); box-shadow: var(--rpc-shadow); padding: .35rem; } [data-theme="square"] .dropdown-item { border-radius: 8px; padding: .45rem .7rem; } [data-theme="square"] .dropdown-item:hover { background: var(--rpc-primary-soft); color: var(--rpc-primary-deep); } [data-theme="square"] .dropdown-item:active { background: var(--rpc-primary); color: #fff; } /* ---- cards -------------------------------------------------------------------- */ [data-theme="square"] .card { border: 1px solid rgba(226, 232, 240, .9); border-radius: var(--rpc-radius-lg); box-shadow: var(--rpc-shadow-sm); background: var(--rpc-surface); } [data-theme="square"] .card-body { padding: 1rem; } [data-theme="square"] .card.bg-light { background: var(--rpc-primary-soft) !important; border-color: var(--rpc-primary-line); } [data-theme="square"] .card.border-primary { border-color: var(--rpc-primary) !important; box-shadow: var(--rpc-shadow); } /* ---- buttons ------------------------------------------------------------------ */ [data-theme="square"] .btn { font-weight: 500; border-radius: var(--rpc-radius); } [data-theme="square"] .btn-lg { border-radius: var(--rpc-radius); padding: .6rem 1.15rem; font-size: 1rem; } [data-theme="square"] .btn-primary { background: var(--rpc-primary); border-color: var(--rpc-primary); } [data-theme="square"] .btn-primary:hover, [data-theme="square"] .btn-primary:focus { background: var(--rpc-primary-hover); border-color: var(--rpc-primary-hover); } [data-theme="square"] .btn-success { background: var(--rpc-good); border-color: var(--rpc-good); } [data-theme="square"] .btn-success:hover { background: #059669; border-color: #059669; } [data-theme="square"] .btn-danger { background: var(--rpc-bad); border-color: var(--rpc-bad); } [data-theme="square"] .btn-outline-secondary { border-color: var(--rpc-line); color: var(--rpc-body); } [data-theme="square"] .btn-outline-secondary:hover { background: var(--rpc-ink); border-color: var(--rpc-ink); color: #fff; } [data-theme="square"] .btn-outline-dark { border-color: var(--rpc-line); color: var(--rpc-ink); } [data-theme="square"] .btn:focus-visible { box-shadow: 0 0 0 3px rgba(99, 102, 241, .28); } /* ---- inputs ------------------------------------------------------------------- */ [data-theme="square"] .form-control, [data-theme="square"] .form-select { border-color: var(--rpc-line); border-radius: var(--rpc-radius-sm); color: var(--rpc-ink); } [data-theme="square"] .form-control::placeholder { color: var(--rpc-faint); } [data-theme="square"] .form-control:focus, [data-theme="square"] .form-select:focus { border-color: var(--rpc-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); } [data-theme="square"] .form-control-lg, [data-theme="square"] .form-select-lg { font-size: 1rem; padding: .55rem .8rem; } [data-theme="square"] label.form-label { color: var(--rpc-label); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; } [data-theme="square"] .input-group-text { background: var(--rpc-wash); border-color: var(--rpc-line); color: var(--rpc-muted); } [data-theme="square"] .form-text { color: var(--rpc-muted); } [data-theme="square"] .form-check-input:checked { background-color: var(--rpc-primary); border-color: var(--rpc-primary); } /* ---- tables -------------------------------------------------------------------- */ [data-theme="square"] .table { --bs-table-border-color: var(--rpc-border); color: var(--rpc-body); } [data-theme="square"] .table > thead th { color: var(--rpc-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: var(--rpc-wash); border-bottom: 1px solid var(--rpc-border); } [data-theme="square"] .table > tbody td { border-color: var(--rpc-border); } [data-theme="square"] .table-hover > tbody > tr:hover > * { background: var(--rpc-primary-soft); } [data-theme="square"] .table td .fw-semibold, [data-theme="square"] .table th { color: var(--rpc-ink); } /* Bootstrap's stock row tints are muddy next to this palette. */ [data-theme="square"] .table-warning, [data-theme="square"] .table-warning > * { background: var(--rpc-warn-soft) !important; } [data-theme="square"] .table-success, [data-theme="square"] .table-success > * { background: var(--rpc-good-soft) !important; } /* ---- badges, alerts -------------------------------------------------------------- */ [data-theme="square"] .badge { font-weight: 500; border-radius: 9999px; padding: .34em .7em; } [data-theme="square"] .badge.bg-secondary { background: var(--rpc-muted) !important; } [data-theme="square"] .badge.bg-info { background: var(--rpc-primary-soft) !important; color: var(--rpc-primary-deep) !important; } [data-theme="square"] .alert { border: 1px solid var(--rpc-border); border-radius: var(--rpc-radius); } [data-theme="square"] .alert-success { background: var(--rpc-good-soft); border-color: #a7f3d0; color: #065f46; } [data-theme="square"] .alert-warning { background: var(--rpc-warn-soft); border-color: #fde68a; color: #92400e; } [data-theme="square"] .alert-danger { background: #fee2e2; border-color: #fecaca; color: #991b1b; } [data-theme="square"] .list-group-item { border-color: var(--rpc-border); } /* ---- dashboard number tiles ------------------------------------------------------- */ [data-theme="square"] .stat-card { box-shadow: var(--rpc-shadow); } [data-theme="square"] .stat-card .stat-value { color: var(--rpc-ink); font-weight: 600; letter-spacing: -.025em; } [data-theme="square"] .nav-section { color: var(--rpc-faint); } [data-theme="square"] .text-muted { color: var(--rpc-muted) !important; } /* On a phone the page IS the app — trim the frame so content gets the room. */ @media (max-width: 576px) { [data-theme="square"] .card-body { padding: .85rem; } [data-theme="square"] .container, [data-theme="square"] .container-fluid { padding-left: .7rem; padding-right: .7rem; } }