/* ============================================================================
Daily Roster -- brand stylesheet
Warm refresh, 2026-09-12, from the "Warming dailyroster logo" handoff.
⛔ EVERY selector in this file MUST start with html[data-theme="dailyroster"].
custom-styles.css is SHARED by all five fronts and uses !important
throughout; an unscoped rule here repaints netduty, staffworks,
shiftcalendar and officerscheduler too. Guarded mechanically by
scripts/check-brand-scope.js -- run it before every build.
Loads AFTER custom-styles.css (build.js, both templates). The
html[data-theme=...] prefix adds an element + attribute to the specificity,
so these win even where the shared sheet uses !important.
Scope: brand identity only -- tokens, type, accent colours. This is a logo
and palette refresh, not a re-layout. Compare assets/shiftcalendar, which
carries ~199 rules because that brand had a full screen-by-screen refresh.
============================================================================ */
/* --- Tokens ---------------------------------------------------------------
brand.css from the handoff, verbatim, scoped so they cannot leak. These are
the names the design system uses; --color-* (written onto by
theme-loader from themes/dailyroster.js) stays the app-facing set. */
html[data-theme="dailyroster"] {
/* --- the MARK: netDuty's palette (drop 2) ---
⚠ --dr-terracotta and the old warm --dr-ember are GONE from brand.css.
Anything still naming them is drop-1 residue and resolves to nothing. */
--nd-red: #B3121B; /* the netDuty cross -- primary accent, links, active nav */
--nd-ember: #D4232C; /* red on dark surfaces and filled tiles */
--nd-black: #111111; /* badge field, app icon tile */
--nd-silver: #E6E9EC; /* arched lettering on the badge */
--nd-steel: #D6D9DD; /* badge ring on dark surfaces */
--dr-brass: #E8B87A; /* the one warm accent -- the star at the cross centre */
/* --- the SURFACE: warm, and deliberately unchanged by drop 2 --- */
--dr-ink: #2A1C16; /* warm near-black -- primary text */
--dr-ink-deep: #231710; /* dark-surface background (chrome) */
--dr-paper: #FAF3E9; /* warm paper background */
--dr-paper-alt: #FCF7F0; /* secondary surface */
--dr-white: #FFFFFF;
--dr-text: #2A1C16;
--dr-text-muted: #5C463A;
--dr-text-caption: #8A6A55; /* 4.5:1 on white -- the floor at body size */
--dr-text-label: #7A6153; /* for 11-12px uppercase labels */
--dr-text-on-dark: #FAF3E9;
--dr-text-on-dark-muted: #B39781;
--dr-border: #E7D8C6;
--dr-border-soft: #F0E3D3;
--dr-border-dark: #3A281F;
--dr-radius-sm: 8px;
--dr-radius: 16px;
--dr-radius-lg: 20px;
--dr-radius-icon: 26px;
}
/* --- Type -----------------------------------------------------------------
theme-loader writes --font-primary / --font-headings from themes/dailyroster.js,
but the shared sheet and Tailwind set families on elements directly, so the
display face has to be asserted at the headings themselves.
Archivo + Archivo Black are linked in build.js; without that link both fall
back to system-ui and this file changes nothing visible. */
html[data-theme="dailyroster"] body {
font-family: Archivo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-theme="dailyroster"] h1 {
font-family: 'Archivo Black', Archivo, system-ui, sans-serif;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--dr-text);
}
/* ⛔ h2/h3 deliberately do NOT take the display cut. Archivo Black has a
single, very heavy weight, and this selector reaches far more than the brand
surfaces: 48 h2 + 228 h3 across app.js and admin.js against 3 h1. Those are
card and section titles, and a display face at 900 on them is what reads as
over-bold (Allen, 2026-09-12: "the font is too bolded in certain areas").
The text face carries the same hierarchy at 700/600 -- which is what the
webfont's 400;500;600;700 axis is loaded for. */
html[data-theme="dailyroster"] h2 {
font-family: Archivo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--dr-text);
}
html[data-theme="dailyroster"] h3 {
font-family: Archivo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
color: var(--dr-text);
}
/* The login card's brand line. login.js renders text.loginWelcome as the h1
directly under the mark, which is what carries the brand name now that
'stacked' is deliberately undeclared (see themes/dailyroster.js). */
html[data-theme="dailyroster"] .login-card h1,
html[data-theme="dailyroster"] .login-container h1 {
letter-spacing: 0.02em;
}
/* --- Accents --------------------------------------------------------------
⭐ DROP 2 RETIRED A DEVIATION. Against drop 1 this block used a darker tone
than the brief specified, because terracotta #C05A2E as link text measured
4.02:1 on paper and 4.43:1 on white -- under the 4.5:1 AA floor, and a
regression against the palette it replaced (#c0392b at 4.94:1).
netDuty red needs no such help:
#B3121B on --dr-paper #FAF3E9 ....... 6.31:1 PASSES
#B3121B on #FFFFFF .................. 6.96:1 PASSES
hover #8C0E15 on --dr-paper ........ 8.71:1 PASSES
So brand.css is now followed exactly, and there is nothing here for the
designer to arbitrate. This is what a palette change looks like when it
makes an accessibility problem go away rather than create one. */
html[data-theme="dailyroster"] a:not([class*="bg-"]):not(.btn) {
color: var(--nd-red);
}
html[data-theme="dailyroster"] a:not([class*="bg-"]):not(.btn):hover {
color: #8C0E15;
text-decoration: underline;
}
/* ⭐ DROP 2 RETIRED A SECOND WORKAROUND, and the rule is deleted rather than
rewritten. The Admin entry in the top nav (app.js:12722 desktop, :12917
mobile) paints itself theme.colors.secondary with a HARDCODED color:'#FFFFFF'.
Drop 1's secondary was brass, where white reads 1.82:1, so this file had to
force ink on it. Drop 2's secondary is Ember Red #D4232C, where the hardcoded
white is 5.15:1 -- so the shared code is simply correct for this brand again
and no override belongs here. Left as a comment because "why did this rule go
away" is the question a reader of the diff will have. */
/* Warm the paper surfaces. custom-styles.css paints the shared app chrome from
a cool palette; these two are the surfaces large enough for the mismatch to
read as "the logo doesn't match the app". */
html[data-theme="dailyroster"] .bg-gray-50 {
background-color: var(--dr-paper) !important;
}
html[data-theme="dailyroster"] .bg-gray-100 {
background-color: var(--dr-paper-alt) !important;
}
/* Hairlines, so warm surfaces are not divided by cool grey. */
html[data-theme="dailyroster"] .border-gray-200 {
border-color: var(--dr-border) !important;
}
html[data-theme="dailyroster"] .border-gray-100 {
border-color: var(--dr-border-soft) !important;
}
/* --- Dark chrome ----------------------------------------------------------
The nav bar and the three sidebars sit on --color-nav / --color-sidebar
(#231710). Text on them is paper, not pure white, and the muted tone is the
palette's own rather than a grey. */
html[data-theme="dailyroster"] .sc-chrome-dark .text-gray-300,
html[data-theme="dailyroster"] .sc-chrome-dark .text-gray-400 {
color: var(--dr-text-on-dark-muted) !important;
}
/* ⛔ Headings on dark chrome must NOT take the ink heading colour above.
The heading rules in the Type section set `color: var(--dr-text)` (#2A1C16),
and that is correct on paper and catastrophic on the rail: admin.js:11668
renders Admin
inside a container painted --color-nav (#231710), so
the word rendered at 1.06:1 -- invisible (Allen, 2026-09-12: "where it says
Admin on the left menu, it is dark on dark").
⚠ The shared sheet colours no headings at all, so before this brand sheet
existed that h1 simply inherited the container's own `text-white`. The ink
declaration is what took it away; this gives it back in the palette's tone
(15.86:1) rather than reverting to pure white.
⭐ Audited rather than patched at the reported instance: across app.js,
admin.js, payroll.js and orgtools.js this is the ONLY heading sitting on dark
chrome -- the compact admin rail, the app left rail and the top nav contain
none. h2/h3 are listed so the other two sc-chrome-dark rails are covered if
one ever gains a heading. */
html[data-theme="dailyroster"] .sc-chrome-dark h1,
html[data-theme="dailyroster"] .sc-chrome-dark h2,
html[data-theme="dailyroster"] .sc-chrome-dark h3 {
color: var(--dr-text-on-dark);
}
/* --- Header lockup --------------------------------------------------------
themes/dailyroster.js declares logo.lockup, so app.js:12614 renders
.sc-logo > img.sc-logo__mark + span.sc-logo__word > b
instead of a single ![]()
. The class names are shiftcalendar's because that
markup is shared; their styling is scoped to THAT brand, so without the rules
below Daily Roster would get an unsized mark and unstyled text.
This is the handoff's "Horizontal lockup": mark ~46px, wordmark beside it,
attribution line beneath. */
html[data-theme="dailyroster"] .sc-logo {
display: flex;
align-items: center;
gap: 12px;
}
html[data-theme="dailyroster"] .sc-logo__mark {
height: 46px;
width: auto;
flex: 0 0 auto;
}
html[data-theme="dailyroster"] .sc-logo__word {
display: block;
font-family: 'Archivo Black', Archivo, system-ui, sans-serif;
font-weight: 900;
font-size: 21px;
line-height: 1;
letter-spacing: 0.04em;
color: var(--dr-text-on-dark);
white-space: nowrap;
}
/* ⭐ Drop 2's lockup is ONE colour -- its own lockups.html renders
"DAILY ROSTER" entirely in --dr-text-on-dark, so the drop-1 two-tone wordmark
is gone and themes/dailyroster.js now sends the whole name as `word` with an
empty `wordAccent`. This rule stays so that if anyone ever repopulates
wordAccent the matches the word instead of reviving a brass half. */
html[data-theme="dailyroster"] .sc-logo__word b {
font-weight: 900;
color: inherit;
}
/* The attribution line. The handoff: "powered by netDuty sits as a small line
directly under the wordmark, never beside it" -- 10-12px, 0.12-0.14em tracking,
`powered by` muted, `netDuty` in brass on dark, lowercase n / capital D.
⭐ This hook only exists because the lockup does. The wordmark used to be
app.js's {appName} span, which carries nothing but `text-lg font-semibold` --
utility classes that appear all over the app, so a ::after on those would have
been the recurring-bug-classes Class 90 shape. `.sc-logo__word` is a real
element class that exists solely inside this lockup. */
html[data-theme="dailyroster"] .sc-logo__word::after {
content: 'powered by netDuty';
display: block;
margin-top: 3px;
font-family: Archivo, system-ui, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.13em;
color: var(--dr-text-on-dark-muted);
text-transform: none;
}
/* ⚠ One detail of the brief is NOT reproduced here: drop 2 sets "powered by" in
--dr-text-on-dark-muted and "netDuty" in --nd-silver, two tones on one line.
A single ::after carries one `content` string and one colour. The element's
own cannot help -- it is a child, so ::after renders AFTER it and the word
would land on the wrong side. Two-toning this needs a real element at the
render site (app.js), i.e. shared code, for a 10px line. Left one-tone and
recorded rather than solved with a fragile trick. */
/* ⚠ The one coupling worth knowing about. The {appName} text span in app.js is
gated on hasSidebarNav, so when an ORG opts into the left rail
(loader.nav.layout = 'sidebar', overriding this brand's default of top nav)
BOTH it and this lockup render, and the name appears twice.
`nav.py-2` is the layout switch itself -- app.js writes py-2 for the sidebar
layout and py-3 for top nav -- so it is a structural discriminator rather than
a styling utility, and it is the only thing in the DOM that distinguishes the
two modes. Drop this lockup's wordmark there and let the shell's own span be
the wordmark, which is what the sidebar layout was designed around. */
html[data-theme="dailyroster"] nav.py-2 .sc-logo__word {
display: none;
}