/* ECPS Facilities — read one-handed, at arm's length, in a bright gym or a dim mechanical room. Design rules that follow from that: * Light background, not dark. Half this work happens outdoors or under gym lights where a dark UI washes out completely. * Colour carries exactly one meaning: how soon this is due. Nothing else on the page is coloured, so the rails are unmissable. * One loud element per card — the countdown. Everything around it is quiet. * Every action target clears 48px and sits in the thumb zone. */ :root { --ink: #16181d; --ink-2: #3d434b; /* The one customizable colour: the app bar's ground. Overridden by an inline custom property in scheduling/base.html when a district has set one, which is why the value here is only a fallback and why nothing else may read it. It is deliberately separate from --ink even though they start out the same. --ink is body text, button fills and rules; rebranding by changing --ink would repaint the words on the page. */ --brand: #16181d; --muted: #6c737b; --paper: #eceeed; --surface: #ffffff; --rule: #d2d7d4; --overdue: #a4231b; --today: #a35c00; --soon: #2b5f8f; --scheduled: #4a5560; --done: #838a90; --pad: 16px; --radius: 4px; --tap: 48px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; padding-bottom: calc(88px + env(safe-area-inset-bottom)); } a { color: inherit; } /* ---- Page watermark ---------------------------------------------------- The district mark, faint, behind everything. Only drawn when one has been uploaded -- base.html emits neither the element nor --page-mark otherwise. Fixed and centred rather than tiled or scrolling: a repeating pattern behind a task board is visual noise competing with the rails, and one that scrolls drags the eye down a list somebody is scanning for a countdown. 7% is deliberately almost-nothing. The cards are opaque, so on a busy board this shows only in the margins, which is where a watermark belongs. If it wants to be stronger, this is the one number to change -- but the board has to stay readable at arm's length in a bright gym, and that is what is being traded against. */ .page-mark { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--page-mark); background-repeat: no-repeat; background-position: center 58%; background-size: min(76vw, 460px) auto; opacity: 0.07; } /* Lifts the page above the watermark. Everything else that stacks -- the bar at 20, the day headers at 15, the action bar at 30 -- is either inside this or outside and higher, so one step is enough. */ .wrap { position: relative; z-index: 1; } /* ---- App bar ---------------------------------------------------------- */ .bar { position: sticky; top: 0; z-index: 20; /* The only place --brand is read. Keep it that way: the moment a second element takes its colour from here, "brand" becomes a meaning that colour carries, and colour in this app already has exactly one. */ background: var(--brand); color: #fff; padding: calc(env(safe-area-inset-top) + 12px) var(--pad) 12px; } .bar__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; /* White at reduced opacity rather than a fixed grey. The old #9aa2ab was chosen against a near-black bar and only worked there: on a mid-tone brand colour it fell to 2.6:1 and the district name became unreadable, which was the real reason a legitimate school colour was being refused. An alpha scales with whatever ground is chosen, so the check on save is about the colour and not about a grey that assumed one. 0.62 lands within a shade of the old value on the stock bar. */ color: rgb(255 255 255 / 0.62); margin: 0 0 2px; /* Flex so an uploaded mark sits on the baseline of the district name rather than pushing the line taller. */ display: flex; align-items: center; gap: 8px; } .bar__mark { /* Small and quiet. The countdown is the one loud element on a card, and a crest large enough to compete with it would cost the board the thing that makes it readable at arm's length. Height only, width auto, so a mark that is not quite square is not squashed. */ height: 20px; width: auto; flex: none; } .bar__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .bar__stat { margin-top: 6px; font-size: 13px; /* Same reasoning as the eyebrow, a shade brighter because this line carries the counts somebody actually reads. */ color: rgb(255 255 255 / 0.74); font-variant-numeric: tabular-nums; } .bar__stat b { color: #ff8d84; font-weight: 700; } /* ---- The bar's menu ---------------------------------------------------- Parked in the bar's top-right, deliberately *not* in the thumb-zone action bar at the bottom. That bar is for the one thing the current screen exists to do -- mark a task done, decide a request -- and it is where a thumb lands without looking. Navigating away is not what you came here for, and an accidental sign-out on a shared phone in a mechanical room costs somebody a fresh sign-in mid-job. Top-right is the awkward reach, which here is the point. .bar is position:sticky, so it is already a containing block and this needs no wrapper -- which matters, because wrapping .bar in a positioned div would confine the stickiness to that wrapper and the app bar would stop sticking. */ .nav { position: absolute; top: env(safe-area-inset-top); right: calc(var(--pad) - 12px); } .nav__toggle { /* Quiet. Colour in this app means how soon something is due, and nothing in a menu is due -- so this gets the same muted grey as the eyebrow it sits beside, no border and no fill. Full --tap box for the touch target, with the visible text much smaller than the box. */ display: flex; align-items: center; justify-content: flex-end; min-height: var(--tap); min-width: var(--tap); padding: 0 12px; color: #9aa2ab; font-size: 13px; cursor: pointer; list-style: none; /* Firefox */ user-select: none; } .nav__toggle::-webkit-details-marker { display: none; } /* Safari */ .nav[open] .nav__toggle { color: #fff; } .nav__panel { /* Anchored under the toggle rather than filling the screen. A full-height drawer would need a scrim, a scroll lock and a close button; this is nine rows at most and the page behind it is still the point. */ position: absolute; right: 0; min-width: 15rem; max-width: calc(100vw - var(--pad) * 2); padding: 4px 0; background: var(--ink-2); border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / 0.4); } .nav__list { margin: 0; padding: 0; list-style: none; } .nav__account { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgb(255 255 255 / 0.14); } .nav__whoami { /* Quiet caption heading the account group, not a row: there is nowhere to go from it. Muted grey like the toggle, with the address itself in white so the thing you came to read is the thing you see. */ margin: 0; padding: 10px 16px 6px; color: #9aa2ab; font-size: 12px; line-height: 1.35; } .nav__whoami b { display: block; color: #fff; font-size: 14px; font-weight: 600; /* Addresses do not break at spaces because they have none. Without this a long one widens the panel past the screen instead of wrapping. */ overflow-wrap: anywhere; } .nav__list form { margin: 0; } .nav__item { /* Link and form-button rows have to be indistinguishable: which HTTP verb the destination happens to want is not something the user should be able to see. Everything that differs between and