/* ============================================================================= Panelo — public (donor-facing) theme ----------------------------------------------------------------------------- Sibling of ./panelo-panel.css, but a different substrate: the public pages do NOT run Metronic. They run a Skote build — Bootstrap 5.0.0-beta2 recompiled with primary #5b73e8, plus theme.min.css (topbar/topnav/footer chrome) and style.min.css (ribbons, cookie bar). Loaded from the one front layout: resources/views/front/layouts/app.blade.php which serves all four platforms and stamps data-platform on . There is no dark theme here and there is not meant to be — these pages are permanently light, unlike the panel. Like the panel bundle, Skote compiles its palette to literal hex, so this overrides selectors rather than redefining variables. Where Bootstrap ships a utility with !important (.text-primary, .bg-primary, .border-primary, .text-muted) the override has to carry !important too. -------------------------------------------------------------- accent steps --pn-accent #2EE6C5 bright aqua. Dark grounds and button fills that carry ink text. Never behind white text. --pn-accent-strong #12B39A hover / pressed on dark grounds. --pn-accent-deep #0E8C79 non-text use only here: borders, focus rings, icon strokes. 4.16:1 on white — fine for the 3:1 non-text threshold, NOT fine for body text. --pn-accent-ink #0C7A69 the step that carries text. 5.25:1 against white, 4.88:1 against the page canvas. The fourth step exists because these pages are read by a customer's visitors, not by staff. panelo-panel.css uses --pn-accent-deep behind white text and in .text-primary; measured, that pairing is 4.16:1 — under 4.5:1 either way round. Rather than ship the same shortfall to the public side, text and white-on-fill use --pn-accent-ink instead. The panel file is not mine to change; flagged separately. Mirrors ../panelo/brand/tokens.json for the three shared steps. ------------------------------------------------- per-platform brand fills The sign-in button on each front is painted in that network's own colour so a visitor recognises what they are about to hand over. These four hexes were inline `style="background: …"` on the buttons themselves; they are moved here unchanged, because the layout now knows which platform it is rendering. Measured against the white label Bootstrap's .btn-* gives them. Two of the four inline values failed AA and were darkened along their own hue: instagram #7A47E9 5.38:1 unchanged google #D13636 4.89:1 unchanged facebook #2D86FF → #256ECF 3.52 → 4.99 twitter #2AA9E0 → #1D7396 2.68 → 5.32 A sign-in button is the one control on the page a visitor must be able to read, and at 2.68:1 the Twitter one was a pale wash. Facebook's and Twitter's published blues cannot carry white text at 4.5:1 — a known property of both palettes, not something this app introduced — so the choice is a darker step of the same hue or a different text colour, and the hue is what makes the button recognisable. The exact values live in the token block below. ========================================================================== */ :root { --pn-accent: #2ee6c5; --pn-accent-strong: #12b39a; --pn-accent-deep: #0e8c79; --pn-accent-ink: #0c7a69; --pn-accent-dim: #0e3a36; --pn-accent-wash: #e6fbf6; /* Per-platform brand fills, each carrying white button text. Measured with the WCAG formula against #ffffff, never estimated: instagram #7A47E9 5.38:1 unchanged google #D13636 4.89:1 unchanged facebook #256ECF 4.99:1 was #2D86FF, 3.52:1 — failed twitter #1D7396 5.32:1 was #2AA9E0, 2.68:1 — failed badly The two that failed are darker steps of the same hue, not different colours: Facebook's blue and Twitter's cyan at their published brightness cannot carry white text at 4.5:1, which is a well-known property of both palettes rather than anything this app did. The hue is what makes the button recognisable, and the hue is intact. */ --pn-brand-instagram: #7a47e9; --pn-brand-facebook: #256ecf; --pn-brand-google: #d13636; --pn-brand-twitter: #1d7396; --pn-ink-950: #05080b; --pn-ink-900: #0a0f15; --pn-ink-800: #111922; --pn-ink-700: #1b2733; --pn-ink-500: #5f6b76; --pn-ink-400: #7d8fa1; --pn-surface: #ffffff; --pn-canvas: #f4f7f9; --pn-hairline: #e6ecf1; } /* ------------------------------------------------------------------- shell */ body { background-color: var(--pn-canvas); } /* Skote's dark topbar is #2f374e. Matched to the panel's dark chrome so the two halves of the product read as one brand. */ body[data-topbar="dark"] #page-topbar { background-color: var(--pn-ink-950); border-bottom: 1px solid var(--pn-ink-800); box-shadow: none; } body[data-topbar="dark"] .header-item { color: #e9ecef; } body[data-topbar="dark"] .header-item:hover { color: var(--pn-accent); } .navbar-brand-box { background-color: transparent; } .header-profile-user { border: 1px solid var(--pn-accent-deep); } /* --------------------------------------------------------- secondary navbar .topnav is the white service bar under the logo bar. Its default link colour is #7b8190 — 3.90:1 on white, under the 4.5:1 minimum for the nine service links, so it moves to --pn-ink-500 (5.07:1 on this ground). */ .topnav { background: var(--pn-surface); border-bottom: 1px solid var(--pn-hairline); box-shadow: none; } /* 13.5px was an inline