/* ============================================================ TownSuite eServices redesign — production stylesheet Source: Claude Design handoff bundle (eservices-redesign) Scope: brand tokens (light+dark), global shell (top bar + app switcher + per-product sidebar), form primitives, Time Off Request page (Option B, guided steps), responsive. Apply by adding class "ts-app" to in _SiteLayout. Dark theme = body.ts-app.is-dark (toggled by townsuite-shell.js). ============================================================ */ /* ---------- brand type: Dax (Expedition skin) ---------- */ @font-face { font-family: 'Dax'; src: url('/assets/fonts/dax-regular.ttf') format('truetype'), url('/assets/fonts/dax-regular.otf') format('opentype'); font-weight: 400 900; font-style: normal; font-display: swap; } /* ---------- tokens (Expedition palette — townsuite.com 2026) ---------- */ body.ts-app { --bg: #EFF3F8; --side: #FFFFFF; --card: #FFFFFF; --inset: #F3F6FA; --line: #DCE4EC; --line-soft: #E8EEF4; --head: #13212D; --text: #44586A; --muted: #5C6A77; --faint: #5F6D77; --navy: #003C63; --navy-deep: #003C63; --blue: #00578E; --blue-soft: color-mix(in oklab, #00578E 10%, white); --blue-line: color-mix(in oklab, #00578E 28%, white); --green: #2DA343; --red: #CE2D32; --amber: #E48D1A; background: var(--bg); color: var(--text); font-family: 'Dax', 'Source Sans 3', 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.45; font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; color-scheme: light; margin: 0; --disabled-bg: #f1f4f7; --disabled-border: #eaebeb; --disabled-text: #7b8d9b; --disabled-placeholder: #94a3af; --disabled-radio-border: #adb5bd; --disabled-radio-label: #6c757d; --disabled-checkbox-label: #7b8790; --disabled-switch-bg: #d9dee2; --disabled-switch-border: #c5ccd2; --disabled-kendo-border: #eaebeb; } body.ts-app ::selection { background: #00578E; color: #fff; } body.ts-app.is-dark { --bg: #071420; --side: #0A1B2A; --card: #0D2032; --inset: #122A3F; --line: #1C3850; --line-soft: #173049; --head: #E9F0F6; --text: #A8BBCA; --muted: #8597A6; --faint: #8294A3; --navy: #00578E; --blue: color-mix(in oklab, #00578E 52%, white); --blue-soft: color-mix(in oklab, #00578E 17%, #0D2032); --blue-line: color-mix(in oklab, #00578E 42%, #0D2032); --green: #44B25D; --red: #E5716D; --amber: #E8A14A; color-scheme: dark; --disabled-bg: #132c3e; --disabled-border: #223d52; --disabled-text: #6f808e; --disabled-placeholder: #6f808e; --disabled-radio-border: #2a3d4b; --disabled-radio-label: #6f808e; --disabled-checkbox-label: var(--head); --disabled-switch-bg: #586167; --disabled-switch-border: #2a3d4b; --disabled-kendo-border: #2a3d4b; } /* ---- "auto" theme: dark tokens follow the device, from CSS only ---- This is deliberately NOT class-driven. body.ts-app.is-dark is added by JS (townsuite-shell.js, plus the snippet at the top of in _SiteLayout.TownSuite.cshtml), and script that runs after the stylesheets cannot be relied on to beat the first paint — on iOS/Safari that showed up as a white flash on every navigation. Matching on the server-rendered auto-theme class inside a media query means the dark tokens are in effect for the first paint, with no script involved. .pg-landing.is-auto / .pg-auth.is-auto are the logged-out landing and auth pages: no saved user preference exists there, so the device preference is the only signal, and they mark it with is-auto instead of auto-theme. */ @media (prefers-color-scheme: dark) { body.ts-app.auto-theme, body.ts-app.pg-landing.is-auto, body.ts-app.pg-auth.is-auto { --bg: #071420; --side: #0A1B2A; --card: #0D2032; --inset: #122A3F; --line: #1C3850; --line-soft: #173049; --head: #E9F0F6; --text: #A8BBCA; --muted: #8597A6; --faint: #8294A3; --navy: #00578E; --blue: color-mix(in oklab, #00578E 52%, white); --blue-soft: color-mix(in oklab, #00578E 17%, #0D2032); --blue-line: color-mix(in oklab, #00578E 42%, #0D2032); --green: #44B25D; --red: #E5716D; --amber: #E8A14A; color-scheme: dark; } } /* ---- 2FA method status colours (Views/User/TwoFactorVerification) ---- twoFactorAuthentication.ts applies these as an inline style via a Kendo `style:{color: …}` binding, so they cannot be overridden from CSS without !important — and CSS alone can't tell the verified state from the unverified one, since that lives in the view model. The .ts therefore emits var(--tfa-*) and the actual colours are defined here, which keeps them theme-aware. It previously emitted the literal "Red" (#FF0000 = 4.00:1 on white) and "#38E027" (1.80:1) — both under the 4.5:1 AA floor for body text. No single literal clears AA on the white card AND the dark card, which is exactly why these have to be tokens rather than fixed values. */ body.ts-app { --tfa-verified: #1A6B2C; --tfa-unverified: #B71C1C; } body.ts-app.is-dark { --tfa-verified: var(--green); --tfa-unverified: var(--red); } .ts-dia { display: inline-block; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: currentColor; flex: none; } /* ---------- shell layout ---------- */ .ts-shell-row { display: flex; min-height: calc(100vh - 58px); align-items: stretch; } .ts-maincol { display: flex; flex-direction: column; flex: 1; min-width: 0; } .ts-main { flex: 1; min-width: 0; } /* ---------- top bar ---------- */ .ts-top { height: 58px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 0 15px; position: sticky; top: 0; z-index: 100; } .ts-top-logo { display: flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; } .ts-logo-img { display: block; height: 36px; width: auto; max-width: 200px; object-fit: contain; } .ts-top .ts-logo-img.is-on-dark { display: none; } body.is-dark .ts-top .ts-logo-img.is-on-dark { display: block; } body.is-dark .ts-top .ts-logo-img.is-on-light { display: none; } .ts-logo-word { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--head); } .ts-logo-dias { display: inline-flex; gap: 3px; align-items: center; } .ts-logo-dias .ts-dia:nth-child(1) { color: #E48D1A; } .ts-logo-dias .ts-dia:nth-child(2) { color: #2DA343; width: 5px; height: 5px; } .ts-logo-dias .ts-dia:nth-child(3) { color: #E03A3E; width: 4px; height: 4px; } .ts-top-sep { width: 1px; height: 22px; background: var(--line); } .ts-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } @media (min-width: 1100px) { body.ts-sidebar-collapsed .ts-shell-row > .ts-side { display: none; } } /* app switcher */ .ts-switchwrap { position: relative; } .ts-switch { height: 38px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); padding: 0 13px; font-size: 13.5px; font-weight: 600; color: var(--head); cursor: pointer; } .ts-switch:hover { background: var(--inset); } .ts-grid9 { display: grid; grid-template-columns: repeat(3, 3px); gap: 2.5px; } .ts-grid9 span { width: 3px; height: 3px; border-radius: 1px; background: var(--blue); } .ts-chev { width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex: none; } .ts-pop { position: absolute; top: 46px; left: 0; width: min(384px, calc(100vw - 32px)); z-index: 170; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(12,44,73,0.18); padding: 16px; display: none; } .ts-pop.is-open { display: block; } .ts-pop-head { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 0 4px 8px; } .ts-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .ts-pop-app { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; } .ts-pop-app:hover:not(.is-current) { background: var(--inset); } .ts-pop-app .ts-dia { width: 7px; height: 7px; color: var(--faint); } /* was #B9C8D4 — 1.71:1 vs card, fails 3:1 */ .ts-pop-app.is-current { background: var(--blue-soft); color: var(--navy); } .ts-pop-app.is-current .ts-dia, body.is-dark .ts-pop-app.is-current { color: var(--blue); } .ts-pop-block + .ts-pop-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); } .ts-pop-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; gap: 18px; font-size: 12.5px; } /* icon buttons / badges / avatar / avatar menu */ .ts-iconbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; position: relative; background: var(--card); cursor: pointer; } .ts-iconbtn:hover { background: var(--inset); } /* FontAwesome glyphs used in the top-bar icon buttons (Finance, Notifications) */ a.ts-iconbtn { text-decoration: none; } .ts-iconbtn .fa { font-size: 15px; line-height: 1; color: var(--muted); } .ts-iconbtn:hover .fa { color: var(--head); } /* display:grid !important so the count stays centered even when BackgroundTasks() forces an inline display:block on #notification_fullcount / #cart_fullcount */ .ts-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 999px; background: #CE2D32; color: #fff; font-size: 9.5px; font-weight: 700; display: grid !important; place-items: center; padding: 0 4px; border: 1.5px solid var(--side); } /* CartCount()/BackgroundTasks() empty the badge when 0 — hide the empty badge */ .ts-badge:empty { display: none !important; } @media (max-width: 640px) { .ts-badge { top: -2px; } } /* ---- notifications dropdown (bell) ---- */ .ts-notifwrap { position: relative; } .ts-notif { position: absolute; right: 0; top: 44px; width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(12,44,73,0.18); padding: 8px; z-index: 140; display: none; } .ts-notif.is-open { display: block; } .ts-notif-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--head); } .ts-notif-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; text-decoration: none; cursor: pointer; } .ts-notif-item:hover { background: var(--inset); } .ts-notif-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; } .ts-notif-ic .fa { font-size: 15px; } /* .is-news/.is-complaints iconography: the raw token color on its own translucent tint chip only cleared ~2.3-2.8:1 in light mode (the tint was too pale to give the icon glyph enough contrast against its own chip) — reuse the same AA-vetted colour pairs already established for .sr-status (below) instead of inventing new ones, with the lighter token-based version kept for dark mode. */ .ts-notif-ic.is-news { background: rgba(221,148,52,0.12); } .ts-notif-ic.is-news .fa { color: #875200; } body.is-dark .ts-notif-ic.is-news { background: rgba(221,148,52,0.16); } body.is-dark .ts-notif-ic.is-news .fa { color: var(--amber); } .ts-notif-ic.is-receipts { background: var(--blue-soft); } .ts-notif-ic.is-receipts .fa { color: var(--blue); } .ts-notif-ic.is-complaints { background: #EAF5EE; } .ts-notif-ic.is-complaints .fa { color: #1A6B2C; } body.is-dark .ts-notif-ic.is-complaints { background: rgba(63,168,110,0.14); } body.is-dark .ts-notif-ic.is-complaints .fa { color: var(--green); } .ts-notif-tx { display: flex; flex-direction: column; min-width: 0; } .ts-notif-t { font-size: 13px; font-weight: 600; color: var(--head); } .ts-notif-s { font-size: 12px; color: var(--muted); } .ts-notif-more { justify-content: space-between; border-top: 1px solid var(--line-soft); margin-top: 6px; border-radius: 0 0 8px 8px; } .ts-notif-more small { font-size: 12.5px; font-weight: 600; color: var(--blue); } .ts-notif-count { min-width: 18px; height: 18px; border-radius: 999px; background: #CE2D32; color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; } .ts-notif-count:empty { display: none; } .ts-cartic { width: 13px; height: 9px; border: 1.6px solid var(--muted); border-top: none; border-radius: 0 0 4px 4px; position: relative; margin-top: 5px; } .ts-cartic::before { content: ''; position: absolute; top: -6px; left: 1.5px; right: 1.5px; height: 6px; border: 1.6px solid var(--muted); border-bottom: none; border-radius: 5px 5px 0 0; } .ts-bell { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--muted); } .ts-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; cursor: pointer; } .ts-avatarwrap { position: relative; } .ts-usermenu { position: absolute; right: 0; top: 44px; width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(12,44,73,0.18); padding: 8px; z-index: 140; display: none; } .ts-usermenu.is-open { display: block; } .ts-usermenu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; } .ts-usermenu-name { font-size: 13.5px; font-weight: 700; color: var(--head); } .ts-usermenu-mail { font-size: 12px; color: var(--muted); } .ts-usermenu-roles { font-size: 12px; color: var(--text); } .ts-usermenu-item { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; text-decoration: none; } .ts-usermenu-item:hover { background: var(--inset); } .ts-usermenu-item.is-danger { color: var(--red); } /* ---- top-bar toggles are