/* ============================================================================ * Milestone Corporation — Brand & component system * * The palette IS the wordmark: the navy of the M and "MILESTONE" (#1F375C) and * the grey of the swoosh and "CORPORATION" (#6D7278). --shell is that navy and * carries the chrome (topbar, rail, drawer); --brand is a lighter tint of it and * is the single accent that marks the live/selected thing. Large fills never use * --brand. Milestone is a HOLDING COMPANY, so the chrome stays restrained enough * that a subsidiary's own accent can sit on top without fighting it. * * RE-THEMING happens ONLY in the :root block below. Every rule in this file * references a token, so a logo drop or a subsidiary palette is a token edit, * never a find-and-replace through the components. * * PER-COMPANY ACCENT: ms-api.js sets data-company="" on and the * [data-company] blocks at the end of this file override --brand/--brand-t * for that subsidiary. Corporate (Milestone) uses the default. * * Loaded on every page. Tap targets >=44px, touch inputs >=16px (no iOS zoom). * ========================================================================== */ :root { /* Core ink & steel — taken straight from the Milestone wordmark: the navy of the M and "MILESTONE", and the grey of the swoosh and "CORPORATION". Component rules across this file reference --ink for "the dark surface" and --shell for the chrome, so restyling starts and ends here. */ --ink: #1b2430; --ink-2: #1f375c; /* logo navy */ --ink-3: #33507a; --shell: #1f375c; /* logo navy — topbar, rail, drawer */ --shell-2: #162945; /* one step down, for depth inside the chrome */ --steel: #6d7278; /* logo grey — "CORPORATION" / the swoosh */ --steel-2: #949aa1; --steel-3: #c6cbd1; /* Surfaces */ --bg: #f3f5f8; --surface: #ffffff; --surface-2: #f7f9fb; --border: #e3e7ed; --border-2: #cfd6df; /* Text */ --text: #1b2430; --muted: #5b6068; --faint: #949aa1; /* Brand accent. Marks what is LIVE or SELECTED — the active rail item, a focus ring, a chosen tab. The identity is navy + grey only, so the accent is a lighter tint of the same navy: it stays on-brand, it is legible on both the white page and the navy rail, and — unlike a red/green accent — it never collides with the variance colours a financial statement depends on. Never used for large fills. */ --brand: #4c8fd1; --brand-t: #eaf2fa; --accent: #1f375c; /* links + focus sit in the logo navy itself */ /* Financial variance palette. THIS IS SEMANTIC, NOT DECORATIVE: --fav = better than plan/prior, --unfav = worse. Every KPI, variance column and trend arrow in the app reads these two and nothing else, so the whole suite flips together if the convention ever changes. */ --fav: #11794a; --unfav: #c0392f; --fav-t: #eaf6f0; --unfav-t: #fdf0ef; --neutral: #6d7278; --neutral-t: #f1f3f6; /* Status palette — doubles as the meeting / calendar colour code */ --st-red: #c0392f; /* Blocked / off track / overdue */ --st-yellow: #d99b0b; /* At risk / needs review */ --st-green: #11794a; /* On track / approved */ --st-blue: #1f375c; /* Scheduled / informational */ --st-gray: #949aa1; /* Draft / not started */ --st-red-t: #fdf0ef; --st-yellow-t: #fefaeb; --st-green-t: #eaf6f0; --st-blue-t: #eef2f7; --st-gray-t: #f2f4f7; /* Chart series. Ordered for categorical use and safe to read in sequence — a consolidated statement charts one series PER SUBSIDIARY, so this list must hold at least as many entries as Milestone has companies. Anchored on the logo navy and grey, then widened enough to stay distinguishable. */ --series-1: #1f375c; --series-2: #4c8fd1; --series-3: #6d7278; --series-4: #2f8f7d; --series-5: #a8623f; --series-6: #6b5aa8; --series-7: #8d8f3b; /* Feedback */ --ok: #11794a; --warn: #d99b0b; --danger:#c0392f; --radius: 10px; --radius-lg: 14px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06); --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-cond: 'Montserrat', 'Inter', system-ui, sans-serif; /* Financial figures ALWAYS set in a tabular-figure face so columns of money line up digit-for-digit. Used by .num / .money in the table kit. */ --font-num: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --topbar-h: 54px; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; overflow-x: hidden; /* clip the off-screen slide-out nav drawer so no page scrolls sideways */ } h1, h2, h3, .cond { font-family: var(--font-cond); letter-spacing: .01em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------- Topbar / chrome ---------------------------- */ header.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 14px; background: linear-gradient(180deg, var(--shell), var(--shell-2)); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.18); } header.topbar a.home { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; } header.topbar a.home img { height: 26px; width: auto; display: block; } header.topbar a.home img.ms-logo-img { height: 30px; width: auto; border-radius: 0; background: none; } @media (max-width: 600px) { header.topbar a.home img.ms-logo-img { height: 24px; } } header.topbar .wordmark { font-family: var(--font-cond); font-weight: 800; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: #fff; } header.topbar .wordmark .light { color: var(--steel-2); } header.topbar .module { font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; color: var(--steel-2); padding-left: 12px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,.15); } header.topbar .spacer { flex: 1; } .ms-offline { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.4); border-radius: 999px; padding: 3px 10px; margin-left: 10px; white-space: nowrap; } .ms-offline[hidden] { display: none; } /* Neutral loading placeholder — pages show this (not their empty state) until msHydrated(). */ .ms-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px 16px; color: var(--muted); font-weight: 600; } .ms-loading::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--border-2); border-top-color: var(--steel); border-radius: 50%; animation: ms-spin .7s linear infinite; } @keyframes ms-spin { to { transform: rotate(360deg); } } .ms-userchip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #e5e5e5; } .ms-userchip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st-green); box-shadow: 0 0 0 3px rgba(22,163,74,.2); } .ms-userchip .dot.off { background: var(--steel); box-shadow: none; } .ms-userchip a { color: var(--steel-2); font-size: 12px; } /* Hamburger + slide nav */ .ms-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; border: none; background: transparent; color: #fff; cursor: pointer; border-radius: 8px; font-size: 20px; } .ms-navbtn:hover { background: rgba(255,255,255,.1); } .ms-navbtn.ms-bell { position: relative; text-decoration: none; } .ms-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--st-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--ink); } .ms-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .16s ease; z-index: 98; } .ms-nav-overlay.open { opacity: 1; pointer-events: auto; } .ms-nav-drawer { position: fixed; top: 0; right: 0; height: 100%; max-height: 100dvh; width: 280px; max-width: 84vw; background: var(--ink); color: #fff; z-index: 99; transform: translateX(100%); transition: transform .18s ease; display: flex; flex-direction: column; padding: 14px 0; box-shadow: -8px 0 30px rgba(0,0,0,.4); overflow-y: auto; -webkit-overflow-scrolling: touch; /* long menus stay reachable on short screens */ } .ms-nav-drawer.open { transform: translateX(0); } .ms-nav-drawer .head { display: block; padding: 6px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; text-decoration: none; } .ms-nav-drawer a.head:hover { color: #fff; text-decoration: none; opacity: .85; } .ms-nav-drawer a.link { display: flex; align-items: center; gap: 12px; padding: 13px 18px; color: #e5e5e5; text-decoration: none; font-size: 15px; min-height: 44px; } .ms-nav-drawer a.link:hover { background: rgba(255,255,255,.07); text-decoration: none; } .ms-nav-drawer a.link.active { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 rgba(255,255,255,.9); } /* Drawer footer: who's signed in + Sign out. On phones this is the ONLY home for sign-out — * the topbar identity chip is hidden ≤600px (see the media rule below) so the four action * buttons always fit the viewport. */ .ms-nav-drawer .ms-nav-foot { border-top: 1px solid rgba(255,255,255,.12); margin-top: auto; padding: 12px 18px 4px; font-size: 13px; color: var(--steel-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ms-nav-drawer .ms-nav-foot a { color: #fff; min-height: 44px; display: inline-flex; align-items: center; } .ms-nav-drawer .ms-nav-foot .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st-green); flex: none; } .ms-nav-drawer .ms-nav-foot .dot.off { background: var(--steel); } /* -------------------------------- Layout -------------------------------- */ .page { max-width: 1200px; margin: 0 auto; padding: 18px 16px 60px; } .page-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 26px; font-weight: 800; text-transform: uppercase; } .page-head .sub { color: var(--muted); font-size: 14px; } /* -------------------------------- Buttons ------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .05s ease; } .btn:hover { background: var(--surface-2); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-primary:hover { background: var(--ink-3); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; } .btn-sm { min-height: 32px; padding: 5px 11px; font-size: 13px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Touch devices: small buttons stay compact on desktop (fine pointer) but meet the 44px tap-target rule on phones/tablets. Applies app-wide so every .btn-sm is field-friendly. */ @media (pointer: coarse) { .btn-sm { min-height: 44px; padding-top: 8px; padding-bottom: 8px; } /* But a