/* * The reseller's header and footer, on a page WHMCS renders. * * Loaded only by lib/SiteChrome.php, on every client-area page served on a * reseller's hostname: the dashboard a customer lands on after signing in, * their services, invoices and tickets, and the invoice page where a card * gateway takes the card number. Until this existed all of them wore the * platform's identity on the reseller's own domain. * * Scope * ----- * EVERY rule here sits under .sfr-chrome, the wrapper SiteChrome puts around * the injected markup. That is not tidiness, it is the whole design: the page * underneath belongs to the client theme and to WHMCS's invoice markup, and a * bare `header`, `.btn` or `form` rule escaping this file would land on the * card form. The reseller's own design pack is NOT loaded here for exactly that * reason — only its :root palette comes across, re-scoped onto .sfr-chrome by * SiteChrome::rootVars(), which is why the custom properties below resolve. * * Relationship to checkout.css * ---------------------------- * The "site chrome, without a design pack" block at the end of checkout.css * solves the same problem for BrandedPage, where the markup underneath is ours * and the scope is `.sfrc-body:not(.sfrc-skinned)`. The two are deliberately * separate files: same chrome markup, different pages, different things they * must avoid colliding with. Change one and read the other. * * Every colour falls back to a literal, so a reseller whose pack defined no * palette still gets a header rather than black text on a black background. */ /* ---- the swap ---------------------------------------------------------- * The class is added by an inline script in , so the platform's chrome * is out of the layout before the first paint. If JavaScript is off the class * never appears and the platform's chrome stays — unbranded, but a whole page. * See the note on SiteChrome::head(). */ .sfr-chrome-pending .sf-header, .sfr-chrome-pending #sfHeader, .sfr-chrome-pending .sf-client-nav, .sfr-chrome-pending .sf-footer, /* The platform naming itself on the reseller's domain: a link back to classic.serverfellows.com, and our own password-reset/cart strip. */ .sfr-chrome-pending .sf-top-strip-classic, .sfr-chrome-pending .sf-top-strip { display: none !important; } /* ---- shell ------------------------------------------------------------- */ .sfr-chrome { font-family: var(--font-body, inherit); color: var(--ink, #17211f); } .sfr-chrome-top { background: var(--panel, #fff); border-bottom: 1px solid var(--line, #e5e7eb); } .sfr-chrome-bottom { background: var(--panel, #fff); border-top: 1px solid var(--line, #e5e7eb); margin-top: 48px; padding: 32px 0 24px; font-size: .9rem; } /* The pack's container width, restated so the chrome lines up with the invoice's own column instead of running to the edge of the viewport. */ .sfr-chrome .wrap { width: 100%; max-width: var(--maxw, 1200px); margin: 0 auto; padding: 0 20px; } /* ---- header ------------------------------------------------------------ */ .sfr-chrome .nav { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; } .sfr-chrome .logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; font-family: var(--font-head, inherit); font-size: 1.15rem; font-weight: 700; } .sfr-chrome .logo b { font-weight: 800; } /* The wordmark's second half is an purely for the weight contrast the studio gives it. Italic here would be a different name from the one on the reseller's home page. */ .sfr-chrome .logo i { font-style: normal; font-weight: 400; } .sfr-chrome .logo svg, .sfr-chrome .logo img { height: 30px; width: auto; } .sfr-chrome .nav-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; } .sfr-chrome .nav-links a { color: var(--muted, #4b5563); text-decoration: none; font-size: .92rem; } .sfr-chrome .nav-links a:hover { color: var(--accent, #2563eb); } .sfr-chrome .nav-cta { display: flex; align-items: center; gap: 10px; } .sfr-chrome .nav-cta .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent, #2563eb); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .sfr-chrome .nav-cta .btn-ghost { color: var(--accent, #2563eb); background: none; } .sfr-chrome .nav-cta .btn-primary { color: var(--on-accent, #fff); background: var(--accent, #2563eb); } /* The arrow is decorative and the studio sizes it against the pack's type scale; left alone it can arrive taller than the button it sits in. */ .sfr-chrome .nav-cta .btn svg { width: 14px; height: 14px; } /* ---- footer ------------------------------------------------------------ */ .sfr-chrome .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; } .sfr-chrome .foot-brand p { margin-top: 10px; color: var(--muted, #6b7280); max-width: 46ch; } .sfr-chrome .foot-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); margin-bottom: 10px; } .sfr-chrome .foot-col a { display: block; padding: 3px 0; color: var(--muted, #4b5563); text-decoration: none; } .sfr-chrome .foot-col a:hover { text-decoration: underline; } .sfr-chrome .socials { display: flex; gap: 10px; margin-top: 14px; } .sfr-chrome .socials a { color: var(--muted, #6b7280); } .sfr-chrome .socials svg { width: 18px; height: 18px; } .sfr-chrome .foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line, #e5e7eb); color: var(--muted, #6b7280); font-size: .84rem; } @media (max-width: 700px) { /* At this width the link row is taller than it is useful; the mark and the call to action carry the header on their own. */ .sfr-chrome .nav-links { display: none; } .sfr-chrome .nav { min-height: 56px; } } /* ---- the reseller's own words above their customer's account ---------- * Built by SiteChrome::welcome() from PageCopy, and present only when the * reseller has written something. Everything below is escaped text, never * markup they supplied. */ .sfr-chrome-intro { background: var(--bg-2, #f8fafc); } .sfr-chrome-notice { background: var(--accent, #2563eb); color: var(--on-accent, #fff); text-align: center; padding: 9px 20px; font-size: .88rem; } .sfr-chrome-welcome { padding: 22px 0 18px; } .sfr-chrome-welcome h2 { margin: 0; font-family: var(--font-head, inherit); font-size: 1.3rem; font-weight: 700; color: var(--ink, #17211f); } .sfr-chrome-welcome p { margin: 6px 0 0; color: var(--muted, #6b7280); max-width: 70ch; } /* ==================== the pages between the chrome ==================== * * Header and footer matching is not the same as the page matching. Above this * point the reseller's own markup is drawn and styled; between it sits WHMCS's * client area — its dashboard tiles, its tables, its buttons — still wearing * the platform's palette and type. A customer reads that as two sites stitched * together, which is most of the way to the problem the white-label exists to * solve, and not all the way. * * So this restyles WHMCS's own components in the reseller's colours and fonts. * It is NOT the design pack: the pack targets bare `form`, `.btn` and `body` * against the landing page's class contract and would break the invoice and the * card form (see the note at the top of lib/SiteChrome.php). This targets named * client-area components only, so nothing it does can land somewhere unplanned. * * Scope * ----- * Everything is under `.sfr-chromed`, the class SiteChrome puts on only * after the injection succeeded. If the chrome did not go on, none of this * applies and the page is WHMCS's, untouched — the same fail-safe the hiding * rules use. * * The palette comes from the wrapper, so these read var(--accent) etc. via * .sfr-chrome. They are restated on body here because WHMCS's markup is NOT * inside that wrapper — the custom properties have to be put somewhere the * client area can see them, and body is the only shared ancestor. */ body.sfr-chromed { /* --canvas is the page background in both the light and dark variants of rootCss(); --bg exists only in the light one. */ background: var(--canvas, #f6f7f9); } /* Type. Headings follow the reseller's display face, body text theirs too — between them these two carry more of "this is the same site" than colour does. Falls back to inherit so a pack that named no font changes nothing. */ body.sfr-chromed .sf-page-title, body.sfr-chromed h1, body.sfr-chromed h2, body.sfr-chromed h3, body.sfr-chromed .panel-title { font-family: var(--font-head, inherit); } /* Cards and panels: the reseller's corner radius and hairline, so the page furniture is shaped like their own. */ body.sfr-chromed .sf-dash-card, body.sfr-chromed .sf-dash-action, body.sfr-chromed .panel, body.sfr-chromed .card { border-color: var(--line, #e5e7eb); border-radius: var(--r, 10px); } /* The primary action. This is the single most recognisable piece of a brand on a functional page, and left alone it stays the platform's blue on every screen of the customer's account. */ body.sfr-chromed .sf-btn-primary, body.sfr-chromed .btn-primary, body.sfr-chromed .sf-dash-card-link:hover { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: var(--on-accent, #fff); } body.sfr-chromed .sf-btn-outline, body.sfr-chromed .btn-default { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); } /* Links and the dashboard's own accents. */ body.sfr-chromed a:not(.btn):not(.sf-btn-primary):not(.sf-nav-link) { color: var(--accent, #2563eb); } body.sfr-chromed .sf-dash-card-value { color: var(--ink, #17211f); } body.sfr-chromed .sf-dash-card-label, body.sfr-chromed .sf-text-muted { color: var(--muted, #6b7280); } /* Table headers, which are the other large block of platform colour on the invoices and services screens. */ body.sfr-chromed .table > thead > tr > th, body.sfr-chromed table thead th { border-bottom-color: var(--line, #e5e7eb); color: var(--muted, #6b7280); } /* * Deliberately NOT restyled: form controls, the invoice total block, and * anything inside the payment area. A gateway renders its own markup there — * Stripe's card fields are an iframe it controls — and a rule that reached * inside would either do nothing or break the one form on the site that must * not break. Colour is worth less than a working checkout. */