/* Site-wide overrides on top of theme.css (loaded after it on every page). Sort carets: Phoenix ships these inverted (.asc = ▼, .desc = ▲). Swap them to the conventional direction: ascending = ▲, descending = ▼. Same data-URI icons as theme.css, just exchanged; !important needed to out-cascade the theme's own !important rules. */ [data-list] .sort[data-sort].asc::after, .table-list .sort[data-sort].asc::after { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy4xNDkgMC42NDY3NjhDMy4zNDM2NiAwLjQ1NDg4NSAzLjY1NjM0IDAuNDU0ODg1IDMuODUxIDAuNjQ2NzY4TDYuMTMxNTEgMi44OTQ2OUM2LjQ0OTk4IDMuMjA4NjIgNi4yMjc2OSAzLjc1MDc4IDUuNzgwNSAzLjc1MDc4SDEuMjE5NUMwLjc3MjMwNyAzLjc1MDc4IDAuNTUwMDE4IDMuMjA4NjIgMC44Njg0OTUgMi44OTQ2OUwzLjE0OSAwLjY0Njc2OFoiIGZpbGw9IiM2RTc4OTEiLz4KPC9zdmc+Cg==") !important; margin-top: 0 !important; } [data-list] .sort[data-sort].desc::after, .table-list .sort[data-sort].desc::after { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy4xNDkgOC4xNTQwMUMzLjM0MzY2IDguMzQ1OSAzLjY1NjM0IDguMzQ1OSAzLjg1MSA4LjE1NDAxTDYuMTMxNTEgNS45MDYwOUM2LjQ0OTk4IDUuNTkyMTYgNi4yMjc2OSA1LjA1IDUuNzgwNSA1LjA1SDEuMjE5NUMwLjc3MjMwNyA1LjA1IDAuNTUwMDE4IDUuNTkyMTYgMC44Njg0OTUgNS45MDYwOUwzLjE0OSA4LjE1NDAxWiIgZmlsbD0iIzZFNzg5MSIvPgo8L3N2Zz4K") !important; margin-top: -1px !important; } /* Heading typography — lighter, more "Google"-style headings, matched to the Vehrdict help site experiment (Figtree 700, softened color, tight tracking). The Phoenix default names Nunito Sans but ships no @font-face for it, so headings really rendered in the visitor's system font (Segoe UI on Windows) at weight 800 in --phoenix-emphasis-color (#141824). Figtree is loaded from Google Fonts in each that links this file (view/layout_header.php, login.php, signup.php, password_change.php). Color uses var(--phoenix-gray-900) rather than the help site's literal #31374a: same value in light mode, but it flips to a soft light gray in dark mode so the theme toggle keeps working. Scope is deliberate: h1-h4 (page and section titles, stat headings) only. h5/h6 labels (card titles, navbar logo text, dense UI labels) keep the theme's darker, heavier styling so dense UI text doesn't wash out. */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: "Figtree", "Nunito Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; color: var(--phoenix-gray-900); letter-spacing: -0.015em; } /* True-yellow text utility for the jobs-list audio "traffic light". Phoenix's text-warning is orange, which sits too close to the red "completed" state; this gold reads clearly as yellow. Darker shade on light backgrounds for contrast, brighter one in dark mode. */ .text-yellow { color: #e8c000; } [data-bs-theme=dark] .text-yellow { color: #ffd54d; } /* Jobs list (view/jobs_list.php) — colour-code the Audio and Documents views so it is obvious at a glance which one is open. Audio = secondary (slate, a dark neutral distinct from the blue UI); Documents = primary (blue, the same hue as the Word file icon). Each view gets its colour on the toggle button, card top stripe, header wash and table head. Tints are built from the theme's -rgb vars so they adapt to dark mode. */ #jobsList[data-view="audio"] { --ws-view-color: var(--phoenix-secondary); --ws-view-tint: rgba(var(--phoenix-secondary-rgb), 0.10); --ws-view-tint-strong: rgba(var(--phoenix-secondary-rgb), 0.17); } #jobsList[data-view="documents"] { --ws-view-color: var(--phoenix-primary); --ws-view-tint: rgba(var(--phoenix-primary-rgb), 0.07); --ws-view-tint-strong: rgba(var(--phoenix-primary-rgb), 0.13); } #jobsList[data-view] > .card { border-top: 3px solid var(--ws-view-color); } #jobsList[data-view] > .card > .card-header { background-color: var(--ws-view-tint); } #jobsList[data-view] .table > thead > tr > th { background-color: var(--ws-view-tint-strong) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } #jobsList[data-view] .jobs-view-caption { color: var(--ws-view-color); } /* Jobs list — the row of the job/document the user opened last (controller sets $last_visited from the session) keeps a tint in the view's colour plus a left accent bar, so they can find their place after coming back from a detail page. --phoenix-table-bg-state is the variable the theme's own hover rule uses, so the tint composes with (and yields to) hover. */ #jobsList tr.ws-row-last > td { --phoenix-table-bg-state: var(--ws-view-tint-strong); } #jobsList tr.ws-row-last > td:first-child { -webkit-box-shadow: inset 3px 0 0 var(--ws-view-color), inset 0 0 0 9999px var(--ws-view-tint-strong); box-shadow: inset 3px 0 0 var(--ws-view-color), inset 0 0 0 9999px var(--ws-view-tint-strong); } #jobsList .table-hover > tbody > tr.ws-row-last:hover > td { --phoenix-table-bg-state: var(--phoenix-table-hover-bg); } /* Top-left brand mark: one image (stock WebShuttle or the account's own upload), scaled to the navbar. Wide logos are capped so they never push the search box; tall ones are height-limited. */ .navbar-top .ws-brand-logo { display: block; height: 2.25rem; max-width: 11rem; width: auto; object-fit: contain; }