/* WagerOS Agreements — proxy-layer white-label overlay for Documenso CE v2.18.0.
*
* Injected by Caddy (replace-response) as the last stylesheet in , so it
* wins on source order at equal specificity. The Documenso image is never
* modified; `docker compose pull` stays the upgrade path.
*
* Selectors mirror the ones in the compiled bundle (/assets/app-*.css):
* :root,.dark-mode-disabled light-mode design tokens
* .dark:not(.dark-mode-disabled) dark-mode design tokens
* Documenso's tokens are space-separated HSL channels consumed as
* hsl(var(--token)), so overrides must keep that format (no #hex here).
*
* WagerOS cyan #06B6D4 -> 188.7 94.5% 42.7%
* WagerOS navy #0F172A -> 222 47% 11%
*
* Every token declaration carries !important, because "last in " is not
* actually the last word: on route-level code-split pages (/articles/* is the
* signer-facing one - the Electronic Signature Disclosure) react-router appends
* a SECOND to the same /assets/app-*.css during hydration, after this
* file, and its :root block - identical specificity - then wins on order and
* restores Documenso's lime. !important survives that; raising specificity with
* an `html` prefix would not, because .dark-mode-disabled is applied to a
* wrapper element on some routes, not to . Nothing sets these tokens in
* an inline style attribute, so no per-team branding is being overridden.
*/
:root,
.dark-mode-disabled {
--primary: 188.7 94.5% 42.7% !important;
/* Navy on cyan = 8.6:1. White on #06B6D4 is only 2.45:1 and fails WCAG AA,
so the foreground stays dark — the same dark-on-bright pattern Documenso
itself uses for its lime primary. */
--primary-foreground: 222 47% 11% !important;
--ring: 188.7 94.5% 42.7% !important;
/* subtle hover/rest surface, tinted toward the brand instead of neutral grey */
--accent: 187 60% 95% !important;
--accent-foreground: 222 47% 11% !important;
/* signing-field cards (lime in stock Documenso) */
--field-card: 187 74% 92% !important;
--field-card-border: 188.7 70% 62% !important;
/* card sheen tint: plain RGB triplet upstream, not HSL */
--card-border-tint: 6 182 212 !important;
/* Documenso's own brand ramp, kept in case a component reads the var */
--documenso-50: #f0fdff !important;
--documenso-100: #dcfbff !important;
--documenso-200: #cffafe !important;
--documenso-300: #a5f3fc !important;
--documenso-400: #67e8f9 !important;
--documenso-500: #22d3ee !important;
--documenso-600: #06b6d4 !important;
--documenso-700: #0e7490 !important;
--documenso-800: #155e75 !important;
--documenso-900: #164e63 !important;
--documenso-950: #083344 !important;
--documenso: #06b6d4 !important;
}
.dark:not(.dark-mode-disabled) {
--primary: 188.7 94.5% 42.7% !important;
--primary-foreground: 222 47% 11% !important;
--ring: 188.7 94.5% 42.7% !important;
--secondary-foreground: 188.7 94.5% 52% !important;
--accent-foreground: 188.7 94.5% 52% !important;
--card-border-tint: 6 182 212 !important;
}
/* --- utility classes the bundle compiled to LITERAL lime, not to a var --------
* Attribute selectors are used so the Tailwind `dark:` colon needs no CSS
* escaping and so the rules survive changes to the surrounding :is() wrapper.
* Both light and dark variants resolve to the same cyan, so applying the
* dark:* rule in light mode is a no-op visually. */
[class~='bg-documenso'],
[class~='dark:bg-documenso'],
[class~='hover:bg-documenso']:hover {
background-color: hsl(var(--primary)) !important;
}
[class~='bg-documenso-200'] {
background-color: #cffafe !important;
}
[class~='border-documenso-300'] {
border-color: #a5f3fc !important;
}
[class~='text-documenso'] {
color: hsl(var(--primary)) !important;
}
[class~='text-documenso-700'] {
color: #0e7490 !important;
}
[class~='text-documenso-800'] {
color: #155e75 !important;
}
[class~='text-documenso-900'] {
color: #164e63 !important;
}
/* Documenso's decorative page-background PNG is a faint lime wash - the last
* visible cue of their palette on the auth pages. Rotate it onto the WagerOS
* cyan instead of replacing the asset. */
img[alt='background pattern'] {
filter: hue-rotate(95deg) saturate(0.9);
}
.dark:not(.dark-mode-disabled) img[alt='background pattern'] {
filter: brightness(0.95) contrast(70%) invert(1) sepia(1) hue-rotate(140deg);
}
/* --- brand mark above the card on the unauthenticated layouts ----------------
* Rendered as a ::before on the auth layout's , which is a centred flex
* column, so the mark becomes an in-flow flex item above the card and can never
* overlap it at any viewport size.
*
* It MUST be a pseudo-element. Documenso is a hydrated React app: a real
* injected into by the proxy is removed as soon as the client bundle
* hydrates, because React does not own that node. Pseudo-elements are invisible
* to React.
*
* The class chain below is Documenso v2.18.0's auth/card layout
* (`relative flex min-h-screen flex-col items-center justify-center
* overflow-hidden px-4 py-12 md:p-12 lg:p-24`). It deliberately does not
* match the signed-in app shell, which already renders the WagerOS branding
* logo in its header. If an upgrade changes those utility classes the mark
* simply stops appearing — re-check this selector after `docker compose pull`.
*/
main.min-h-screen.flex-col.items-center.justify-center.overflow-hidden::before {
content: '';
display: block;
flex: none;
width: 168px;
height: 47px;
margin-bottom: 2rem;
background-image: url('/wageros/logo.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 480px) {
main.min-h-screen.flex-col.items-center.justify-center.overflow-hidden::before {
width: 140px;
height: 39px;
margin-bottom: 1.5rem;
}
}
/* The navy wordmark needs to lighten on Documenso's dark theme. */
.dark:not(.dark-mode-disabled) main.min-h-screen.flex-col.items-center.justify-center.overflow-hidden::before {
filter: invert(1) brightness(2);
}
/* ===========================================================================
* IN-APP BRANDING (2026-09-13) — the signed-in shell and the signer's chrome.
*
* The block above only covers the UNAUTHENTICATED layouts. Everything below
* covers what a logged-in user or a signer sees. See README §4a.
*
* Text is NOT handled here: user-visible "Documenso" strings live in the
* compiled JS chunks (i18n catalogues, the app-header component) and are
* rewritten by brand/patch-assets.sh. CSS carries the visuals only.
* ======================================================================== */
/* --- Documenso wordmark in the signed-in header ------------------------------
* Two places render it, both as the SAME inline SVG, identified by its unique
* viewBox ("0 0 2248 320" — the gear + "Documenso" lockup, 7.03:1):
* 1. the app shell header: [data-testid="app-header-container"] > a > svg
* 2. the envelope editor's own nav bar: nav > … > a[href="/"] > svg
* A third place, the mobile navigation sheet, uses a hashed PNG instead:
* a > img[src^="/assets/logo-"] (alt="Documenso Logo" pre-patch)
*
* All three are handled the same way: the Documenso mark is removed and the
* WagerOS wordmark is painted as a background on the PARENT ANCHOR, which keeps
* the link clickable and correctly sized. The anchor needs an explicit box
* because its only child is now display:none.
*
* Matching the parent needs :has(); if a browser lacks it the mark simply does
* not render (graceful — the link still works). Sizes preserve logo.png's
* 725x202 aspect ratio at the header's own mark height (h-6 = 24px desktop,
* 25px in the sheet).
*
* The img selector keys on `src`, not on `alt`: patch-assets.sh rewrites the
* alt text to "WagerOS Agreements Logo", so an alt-based selector would break
* the moment the patch is applied. */
a:has(> svg[viewBox='0 0 2248 320']) {
display: inline-block !important;
width: 87px;
height: 24px;
background-image: url('/wageros/logo.png');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
a:has(> img[src^='/assets/logo-']) {
display: inline-block !important;
width: 90px;
height: 25px;
background-image: url('/wageros/logo.png');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
svg[viewBox='0 0 2248 320'],
img[src^='/assets/logo-'] {
display: none !important;
}
.dark:not(.dark-mode-disabled) a:has(> svg[viewBox='0 0 2248 320']),
.dark:not(.dark-mode-disabled) a:has(> img[src^='/assets/logo-']) {
filter: invert(1) brightness(2);
}
/* --- empty-state bird mascot -> neutral document glyph -----------------------
* Documenso draws a lucide "bird" in the documents and templates empty states.
* lucide icons stroke with `stroke="currentColor"`, so `color: transparent`
* erases the bird without touching layout, and the replacement glyph is painted
* as a background on the same