/* ========================================================================== EduCore: App Shell Top bar + content region. Navigation lives in an off-canvas drawer at every width — there is no permanent sidebar. The dashboards carry the primary navigation as a module grid; the drawer is the same permission-filtered list, reachable from the header hamburger on any page. Shell state lives on as data attributes, so CSS can react to it without JS touching individual element styles: data-theme="light" | "dark" Drawer visibility is a class on : .ec-drawer-open ========================================================================== */ /* --- Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ec-font-sans); font-size: var(--ec-text-md); line-height: var(--ec-leading-normal); color: var(--ec-text); background-color: var(--ec-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--ec-weight-semibold); line-height: var(--ec-leading-tight); color: var(--ec-text); } p { margin: 0; } a { color: var(--ec-accent); text-decoration: none; transition: color var(--ec-transition-fast); } a:hover { color: var(--ec-accent-hover); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } img, svg { vertical-align: middle; } /* Numbers must not jitter when they update, and columns of figures must align. Applied wherever a value is rendered. */ .ec-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* One consistent focus ring everywhere, keyboard-only. The colour is --ec-focus rather than --ec-accent directly. The accent is now the brand green, and the ring is drawn 2px outside the element, so on every ordinary surface it contrasts fine — but anything *painted* the accent (the primary button, the active sidebar row, an active chip) would be ringed in its own fill. The block at the foot of this file re-keys --ec-focus on exactly those elements. */ :focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; border-radius: var(--ec-radius-sm); } .ec-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link: first tab stop, hidden until focused. */ .ec-skip-link { position: absolute; top: var(--ec-space-2); left: var(--ec-space-2); z-index: 2000; padding: var(--ec-space-2) var(--ec-space-4); font-weight: var(--ec-weight-medium); color: var(--ec-accent-on); background: var(--ec-accent); border-radius: var(--ec-radius-sm); transform: translateY(-200%); transition: transform var(--ec-transition); } .ec-skip-link:focus { color: var(--ec-accent-on); transform: translateY(0); } /* --- Scrollbars ---------------------------------------------------------- */ .ec-scroll { scrollbar-width: thin; scrollbar-color: var(--ec-border-strong) transparent; } .ec-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .ec-scroll::-webkit-scrollbar-track { background: transparent; } .ec-scroll::-webkit-scrollbar-thumb { background: var(--ec-border-strong); border-radius: var(--ec-radius-full); } .ec-scroll::-webkit-scrollbar-thumb:hover { background: var(--ec-text-subtle); } /* ========================================================================== NAVIGATION DRAWER The old sidebar, now an off-canvas drawer at every width. Closed by default; .ec-drawer-open on slides it in over the page. ========================================================================== */ .ec-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--ec-z-sidebar); display: flex; flex-direction: column; width: var(--ec-sidebar-w); background: var(--ec-sidebar-bg); border-inline-end: 1px solid var(--ec-sidebar-border); transform: translateX(-100%); transition: transform var(--ec-transition); } .ec-drawer-open .ec-sidebar { transform: translateX(0); box-shadow: var(--ec-shadow-lg); } .ec-sidebar__brand { display: flex; flex-shrink: 0; gap: var(--ec-space-3); align-items: center; height: var(--ec-header-h); padding-inline: var(--ec-space-5); border-block-end: 1px solid var(--ec-sidebar-border); } .ec-sidebar__logo { display: grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; color: #fff; background: linear-gradient(135deg, var(--ec-primary-500), var(--ec-primary-700)); border-radius: var(--ec-radius-md); } .ec-sidebar__wordmark { overflow: hidden; font-size: var(--ec-text-base); font-weight: var(--ec-weight-bold); letter-spacing: -0.02em; white-space: nowrap; } .ec-sidebar__wordmark span { color: var(--ec-accent); } .ec-sidebar__nav { flex: 1; padding: var(--ec-space-4) var(--ec-space-3) var(--ec-space-8); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } /* One collapsible group per nav section. See the note in includes/layout.php: sixty-eight items across nine sections made the drawer a single scroll of everything the school owns. */ .ec-nav-group > summary.ec-nav-section { display: flex; gap: var(--ec-space-2); align-items: center; cursor: pointer; border-radius: var(--ec-radius-md); /* Both are needed: Safari still draws the triangle from its own pseudo element rather than from list-style. */ list-style: none; -webkit-user-select: none; user-select: none; } .ec-nav-group > summary.ec-nav-section::-webkit-details-marker { display: none; } .ec-nav-group > summary.ec-nav-section:hover { color: var(--ec-sidebar-text); background: var(--ec-sidebar-hover-bg); } .ec-nav-section__label { flex: 1; } /* The count sits on the heading as well as on the link, so a folded section still reports what is waiting inside it. Reset the uppercase letter-spacing the heading carries, or the digits are drawn apart. */ .ec-nav-section__badge { letter-spacing: normal; text-transform: none; } .ec-nav-group[open] > summary .ec-nav-link__chevron { transform: rotate(90deg); } .ec-nav-section { padding: var(--ec-space-5) var(--ec-space-3) var(--ec-space-2); font-size: var(--ec-text-2xs); font-weight: var(--ec-weight-semibold); color: var(--ec-sidebar-section); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } /* The heading is inside a

now, so :first-child no longer matches it against the nav — it matches against its own group, where it is always first. The group is what has to be asked. */ .ec-nav-group:first-of-type > .ec-nav-section { padding-top: 0; } .ec-nav-link { position: relative; display: flex; gap: var(--ec-space-3); align-items: center; padding: var(--ec-space-2) var(--ec-space-3); margin-block-end: 2px; font-size: var(--ec-text-md); font-weight: var(--ec-weight-medium); color: var(--ec-sidebar-text); cursor: pointer; border-radius: var(--ec-radius-md); transition: background var(--ec-transition-fast), color var(--ec-transition-fast); } .ec-nav-link:hover { color: var(--ec-sidebar-text); background: var(--ec-sidebar-hover-bg); } .ec-nav-link.is-active { color: var(--ec-sidebar-active-text); background: var(--ec-sidebar-active-bg); box-shadow: var(--ec-shadow-sm); } .ec-nav-link.is-active .ec-nav-link__icon { opacity: 1; } .ec-nav-link__icon { flex-shrink: 0; width: 18px; height: 18px; opacity: 0.75; } .ec-nav-link__label { flex: 1; overflow: hidden; white-space: nowrap; } .ec-nav-link__chevron { flex-shrink: 0; width: 14px; height: 14px; opacity: 0.6; transition: transform var(--ec-transition); } .ec-nav-link[aria-expanded='true'] .ec-nav-link__chevron { transform: rotate(90deg); } .ec-nav-link__badge { flex-shrink: 0; padding: 1px 7px; font-size: var(--ec-text-2xs); font-weight: var(--ec-weight-semibold); color: var(--ec-accent-on); background: var(--ec-danger); border-radius: var(--ec-radius-full); } /* Submenu: height animated via max-height so it works without JS measuring */ .ec-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ec-transition); } .ec-nav-sub.is-open { grid-template-rows: 1fr; } .ec-nav-sub > div { overflow: hidden; } .ec-nav-sub__link { display: block; padding: var(--ec-space-2) var(--ec-space-3) var(--ec-space-2) calc(var(--ec-space-3) + 30px); font-size: var(--ec-text-sm); color: var(--ec-sidebar-text-muted); border-radius: var(--ec-radius-sm); transition: color var(--ec-transition-fast), background var(--ec-transition-fast); } .ec-nav-sub__link:hover { color: var(--ec-sidebar-text); background: var(--ec-sidebar-hover-bg); } .ec-nav-sub__link.is-active { font-weight: var(--ec-weight-medium); color: var(--ec-accent); } /* ========================================================================== MAIN COLUMN ========================================================================== */ .ec-main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* --- Header -------------------------------------------------------------- */ .ec-header { position: sticky; top: 0; z-index: var(--ec-z-header); display: flex; gap: var(--ec-space-3); align-items: center; height: var(--ec-header-h); padding-inline: var(--ec-space-5); background: var(--ec-header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid var(--ec-header-border); } .ec-header__spacer { flex: 1; } .ec-header__divider { width: 1px; height: 24px; background: var(--ec-border); } /* Square icon button used across header, cards, and tables */ .ec-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ec-text-muted); cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--ec-radius-md); transition: background var(--ec-transition-fast), color var(--ec-transition-fast); } .ec-icon-btn:hover { color: var(--ec-text); background: var(--ec-surface-hover); } .ec-icon-btn--bordered { background: var(--ec-surface); border-color: var(--ec-border); } .ec-icon-btn__dot { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; min-width: 16px; height: 16px; padding-inline: 4px; font-size: 10px; font-weight: var(--ec-weight-bold); line-height: 1; color: #fff; background: var(--ec-danger); border: 2px solid var(--ec-surface); border-radius: var(--ec-radius-full); } .ec-has-dot { position: relative; } /* Hamburger: the drawer is the navigation at every width, so its toggle is always present. */ .ec-header__toggle { display: grid; } /* Brand in the header — the drawer is closed most of the time, so the wordmark cannot live in it any more. */ .ec-header__brand { display: flex; flex-shrink: 0; gap: var(--ec-space-2); align-items: center; margin-inline-end: var(--ec-space-2); } /* --- Content ------------------------------------------------------------- */ .ec-content { flex: 1; width: 100%; max-width: var(--ec-content-max); padding: var(--ec-space-6) var(--ec-space-5) var(--ec-space-12); margin-inline: auto; } .ec-page-head { display: flex; flex-wrap: wrap; gap: var(--ec-space-4); align-items: flex-start; justify-content: space-between; margin-block-end: var(--ec-space-6); } .ec-page-head__title { font-size: var(--ec-text-xl); letter-spacing: -0.02em; } .ec-page-head__sub { margin-block-start: var(--ec-space-1); font-size: var(--ec-text-md); color: var(--ec-text-muted); } .ec-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--ec-space-2); align-items: center; } .ec-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--ec-space-2); align-items: center; margin-block-end: var(--ec-space-2); font-size: var(--ec-text-sm); color: var(--ec-text-muted); } .ec-breadcrumb a { color: var(--ec-text-muted); } .ec-breadcrumb a:hover { color: var(--ec-accent); } .ec-breadcrumb__sep { color: var(--ec-text-subtle); } /* --- Back ---------------------------------------------------------------- */ /* * Above the page head on every signed-in screen. See back_bar() in * includes/helpers.php for why it is not left to the browser: the manifest * ships `display: standalone`, and an installed window has no chrome to put a * back button in. * * Pulled left by its own inline padding so the label lines up with the * breadcrumb underneath it rather than sitting a few pixels in from everything * else on the page. */ .ec-backbar { margin-block-end: var(--ec-space-3); } .ec-backbar .ec-btn { padding-inline: var(--ec-space-2); margin-inline-start: calc(var(--ec-space-2) * -1); } /* --- Grid helpers -------------------------------------------------------- */ /* Bootstrap's grid handles most layout; these cover the two patterns it does awkwardly: equal auto-fit card rows and the dashboard's 12-col regions. */ .ec-grid { display: grid; gap: var(--ec-space-4); } .ec-grid--stats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* Two panels side by side, collapsing to one column when there is no room. The term summary pairs first-three with last-three, and the statistics block with the term details; each pair is one comparison and only reads as one while the two halves sit level with each other. Without this modifier the bare .ec-grid above sets `display: grid` and no columns at all, so both pairs stacked full width and the comparison was lost. 320px, because a panel holding three names and two figures stops being a table below that. */ .ec-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Cards carrying a paragraph of explanation, not a number. Wider than the stats grid so the text does not set in a column three words across. */ .ec-grid--cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* The dashboard's module launcher. auto-fill rather than auto-fit so a filtered-down grid keeps its tile width instead of stretching the last two matches across the whole row. */ .ec-grid--modules { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); } /* ========================================================================== DRAWER SCRIM (all widths) ========================================================================== */ .ec-overlay { position: fixed; inset: 0; z-index: var(--ec-z-overlay); background: var(--ec-overlay); opacity: 0; visibility: hidden; transition: opacity var(--ec-transition), visibility var(--ec-transition); } .ec-drawer-open .ec-overlay { opacity: 1; visibility: visible; } /* Body scroll lock while the drawer is open */ .ec-drawer-open { overflow: hidden; } @media (max-width: 991.98px) { .ec-content { padding-inline: var(--ec-space-4); } } /* Very small phones: the low-end Android target. */ @media (max-width: 575.98px) { :root { --ec-header-h: 56px; } .ec-content { padding: var(--ec-space-4) var(--ec-space-3) var(--ec-space-8); } .ec-header { padding-inline: var(--ec-space-3); } .ec-page-head__title { font-size: var(--ec-text-lg); } /* Header gets crowded fast; non-essential controls drop out. */ .ec-hide-sm { display: none !important; } } /* ========================================================================== MOTION / PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } @media print { .ec-sidebar, .ec-header, .ec-overlay, .ec-no-print { display: none !important; } .ec-main { margin: 0; } .ec-content { max-width: none; padding: 0; } .ec-card { break-inside: avoid; border: 1px solid #ddd; box-shadow: none; } body { background: #fff; } } /* ========================================================================== PLATFORM CONSOLE ========================================================================== The one screen outside the tenant boundary, and the only one whose user can suspend a school or read a record in any of them. It has to be recognisable at a glance: a console that looks exactly like the school portal makes "which side of the boundary am I on" a question you answer by reading the URL. The rail is tinted rather than restyled. Same widths, same type, same components — it is the same design system doing a different job, not a second product — but the accent edge and the warmer surface make the switch unmistakable in peripheral vision. ========================================================================== */ .ec-sidebar--owner { background: var(--ec-sidebar-owner-bg, var(--ec-sidebar-bg)); border-inline-end: 2px solid var(--ec-warning, #d97706); } /* The accent runs behind the brand too, so the top of the rail reads as one surface rather than a tinted list under a normal header. */ .ec-sidebar--owner .ec-sidebar__brand { border-block-end-color: color-mix(in srgb, var(--ec-warning, #d97706) 35%, transparent); } .ec-sidebar--owner .ec-nav-section { color: color-mix(in srgb, var(--ec-warning, #d97706) 80%, var(--ec-text-muted)); } .ec-sidebar--owner .ec-nav-link.is-active { color: var(--ec-warning, #d97706); background: color-mix(in srgb, var(--ec-warning, #d97706) 12%, transparent); } /* The active marker on the school rail is the accent; up here it is the warning colour, or the two disagree on what "you are here" looks like. */ .ec-sidebar--owner .ec-nav-link.is-active::before { background: var(--ec-warning, #d97706); } /* ========================================================================== SECRETARIAT CONSOLE The third scope: above a school, below the platform. A diocesan or convention education office reading aggregate figures for the schools it oversees, and able to change none of them. Blue, not the owner's amber, and that choice carries meaning rather than variety. Amber marks the one account that can suspend a school and read any record on the installation; handing a secretariat the same rail would tell everybody who ever glanced at the screen — the principal it is shown to, the bursar walking past — that the diocese holds operator powers. It does not. Blue is --ec-info, which is this system's colour for "this is a statement, not a warning", and that is exactly what the whole console is. Same widths, same type, same components. One design system, three jobs. ========================================================================== */ .ec-sidebar--secretariat { background: var(--ec-sidebar-secretariat-bg, var(--ec-sidebar-bg)); border-inline-end: 2px solid var(--ec-info, #0e7490); } .ec-sidebar--secretariat .ec-sidebar__brand { border-block-end-color: color-mix(in srgb, var(--ec-info, #0e7490) 35%, transparent); } .ec-sidebar--secretariat .ec-nav-section { color: color-mix(in srgb, var(--ec-info, #0e7490) 80%, var(--ec-text-muted)); } .ec-sidebar--secretariat .ec-nav-link.is-active { color: var(--ec-info, #0e7490); background: color-mix(in srgb, var(--ec-info, #0e7490) 12%, transparent); } .ec-sidebar--secretariat .ec-nav-link.is-active::before { background: var(--ec-info, #0e7490); } /* ========================================================================== MARKETER CONSOLE The fourth scope: the schools one salesperson brought, and nothing in any of them. It used to wear the owner's amber rail, so the two consoles outside the tenant boundary were told apart by reading the badge — and amber says "can suspend a school", which a marketer cannot. Violet is nobody else's colour here: not the operator's amber, not the secretariat's blue, not the brand green of a school rail. Same widths, same type, same components. One design system, four jobs. ========================================================================== */ .ec-sidebar--marketer { background: var(--ec-sidebar-marketer-bg, var(--ec-sidebar-bg)); border-inline-end: 2px solid var(--ec-marketer, #6d28d9); } .ec-sidebar--marketer .ec-sidebar__brand { border-block-end-color: color-mix(in srgb, var(--ec-marketer, #6d28d9) 35%, transparent); } .ec-sidebar--marketer .ec-nav-section { color: color-mix(in srgb, var(--ec-marketer, #6d28d9) 80%, var(--ec-text-muted)); } .ec-sidebar--marketer .ec-nav-link.is-active { color: var(--ec-marketer, #6d28d9); background: color-mix(in srgb, var(--ec-marketer, #6d28d9) 12%, transparent); } .ec-sidebar--marketer .ec-nav-link.is-active::before { background: var(--ec-marketer, #6d28d9); } /* ========================================================================== FOCUS RING: THE GREEN-ON-GREEN CASE The ring is --ec-focus, which defaults to --ec-accent, and is drawn 2px outside the element. Against a cream page, a white card or the dark theme's near-black that is a 5–6:1 edge and nothing more is needed. It stops working the moment the thing being ringed is itself painted the accent. This is not hypothetical: the marketing pages hit it first, where the ring landed on the green closing band and a keyboard user tabbing into the call to action saw nothing at all. Every accent-filled control in the application has the same shape. So on those, and only those, the ring turns into the ink that already works on that fill — --ec-accent-on, white in the light theme and a near black in the dark one — and moves *inside* the fill, where that ink is the guaranteed contrast. A negative offset rather than a positive one, because a white ring sitting 2px outside a green button lands on cream at 1.06:1, which is worse than the problem. The list is every accent-filled element a keyboard can reach. Anything painted with --ec-accent that is not focusable (the calendar's today, the sender's chat bubble, the unread dot) is deliberately absent. ========================================================================== */ /* The brand tile is deliberately not on this list. It is painted by a gradient rather than a flat --ec-accent, so an inside ring meets #43a379 at one corner and #1d5943 at the other and only clears 3:1 at one of them. It keeps the outside ring, which meets the sidebar and reads 6:1. */ body:not(.ec-mk) .ec-btn--primary:focus-visible, body:not(.ec-mk) .ec-skip-link:focus-visible, body:not(.ec-mk) .ec-nav-link.is-active:focus-visible, body:not(.ec-mk) .ec-page-btn.is-active:focus-visible, body:not(.ec-mk) .ec-settings__tab.is-active:focus-visible, body:not(.ec-mk) .ec-chip.is-active:focus-visible, body:not(.ec-mk) .dropdown-item.active:focus-visible { --ec-focus: var(--ec-accent-on); outline: 2px solid var(--ec-focus); outline-offset: -4px; } /* The switch track and the register's four choice dots are the other half of the problem and want the opposite answer. They are 18px, so there is no room to draw a ring inside them, and their fill is a semantic colour rather than the accent — so an accent ring can still land next to a colour close to it. They keep the outside ring and get a 2px band of the surface painted underneath it, so the ring always meets the page and never the fill. --ec-ring, the soft glow these two used, was a 32% wash of the accent: on a filled control it was a green haze on green. */ body:not(.ec-mk) .ec-switch input:checked:focus-visible + .ec-switch__track, body:not(.ec-mk) .ec-register__opt input:checked:focus-visible + span { outline: 2px solid var(--ec-focus); outline-offset: 4px; box-shadow: 0 0 0 2px var(--ec-surface); } /* The platform console's rail marks its active row with a 12% wash of the warning colour, not with a fill of the accent — so the rule above was drawing a white ring inside a near-white row, at 1.08:1. Measured, not guessed: it is the one row in the application where "the active nav link" and "painted the accent" are not the same statement. It goes back outside, in the colour this rail already uses to say you are here, so the ring agrees with the marker beside it. */ body:not(.ec-mk) .ec-sidebar--owner .ec-nav-link.is-active:focus-visible { --ec-focus: var(--ec-warning); outline: 2px solid var(--ec-focus); outline-offset: 2px; } /* The secretariat rail has the same problem for the same reason — a 12% wash rather than a fill — and needs the same answer in its own colour. Separate rule rather than a shared selector list, because each one sets --ec-focus to the colour ITS marker uses, and the whole point is that the ring agrees with the marker beside it. */ body:not(.ec-mk) .ec-sidebar--secretariat .ec-nav-link.is-active:focus-visible { --ec-focus: var(--ec-info); outline: 2px solid var(--ec-focus); outline-offset: 2px; } /* And the marketer rail, in its own colour, for the same reason. */ body:not(.ec-mk) .ec-sidebar--marketer .ec-nav-link.is-active:focus-visible { --ec-focus: var(--ec-marketer); outline: 2px solid var(--ec-focus); outline-offset: 2px; }