/* * OIRE WebApp design tokens and base layer. * * NFR-4.2.3 asks for one small, consistent token set applied everywhere rather * than each module inventing its own idiom - this matters more here than in a * typical app, since the same product spans registrar staff doing dense data * entry and a President glancing at a gauge. * * COLOR PROVENANCE * Brand values were sampled from the AUN logo files, not copied from prior * documentation (which recorded green as #3c8445 and red as #dc2627 - both * noticeably off the artwork). Measured: green #00a650, navy #201c70, * red #ec1d23. * * ACCESSIBILITY (NFR-4.2.5, WCAG 2.1 AA) * Contrast was computed, not eyeballed. Against white: * navy #201c70 14.37:1 passes everywhere * green #00a650 3.20:1 large text / UI components only * red #ec1d23 4.41:1 just under the 4.5 threshold * So the brand green and red are used for FILLS, BORDERS, and LARGE type, * while `--brand-green-text` / `--brand-red-text` carry the darkened variants * used wherever normal-size text sits on white. Dark mode needs the opposite * treatment - navy and red are lightened so they clear 4.5:1 on #1b1b28. * Never swap a *-text token for its brand counterpart to "match the logo"; * that trade is exactly what the token split exists to prevent. * * THEMING * The default is to follow the device (prefers-color-scheme). A user choice, * when made, is stamped on and must win in BOTH directions - * hence the :not([data-theme="light"]) guard on the media query, so someone who * explicitly picks Light on a dark-set device actually gets light. */ /* ---- Light (default) ---- */ :root { --brand-green: #00a650; --brand-navy: #201c70; --brand-red: #ec1d23; --brand-green-text: #008841; --brand-red-text: #e71c22; --brand-navy-text: #201c70; --brand-navy-dk: #161450; --brand-gold: #c8a84b; --surface-1: #ffffff; --surface-2: #f6f7f9; --surface-3: #eef0f3; --text: #1a1a2e; --text-muted: #55556e; --border: #dde1e6; --radius: 8px; --radius-sm: 5px; --sidebar-w: 224px; --topbar-h: 56px; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --shadow-1: 0 1px 3px rgba(16,18,32,.08); --shadow-2: 0 8px 28px rgba(16,18,32,.18); color-scheme: light; } /* ---- Dark, when the device asks for it AND the user hasn't forced light ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-green-text: #22c46a; --brand-red-text: #ef4a4f; --brand-navy-text: #8482b0; --surface-1: #1b1b28; --surface-2: #12121b; --surface-3: #262636; --text: #ececf2; --text-muted: #a5a5bd; --border: #33334a; --shadow-1: 0 1px 3px rgba(0,0,0,.4); --shadow-2: 0 8px 28px rgba(0,0,0,.55); color-scheme: dark; } } /* ---- Dark, forced by explicit user choice ---- */ :root[data-theme="dark"] { --brand-green-text: #22c46a; --brand-red-text: #ef4a4f; --brand-navy-text: #8482b0; --surface-1: #1b1b28; --surface-2: #12121b; --surface-3: #262636; --text: #ececf2; --text-muted: #a5a5bd; --border: #33334a; --shadow-1: 0 1px 3px rgba(0,0,0,.4); --shadow-2: 0 8px 28px rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--surface-2); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand-green-text); } a:hover { color: var(--brand-navy-text); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- topbar */ .topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 40; background: var(--brand-navy); color: #fff; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); } .topbar .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; } .topbar .brand img { height: 30px; width: auto; display: block; } .topbar .brand span { font-weight: 700; letter-spacing: .3px; font-size: .95rem; } .topbar .spacer { flex: 1; } /* Hamburger - hidden on desktop, shown when the sidebar becomes a drawer. */ .nav-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: var(--radius-sm); cursor: pointer; width: 38px; height: 34px; padding: 0; align-items: center; justify-content: center; } .nav-toggle:hover { background: rgba(255,255,255,.12); } .nav-toggle svg { display: block; } /* Account menu: the username is a real control, not decoration. */ .account { position: relative; } .account-btn { display: flex; align-items: center; gap: .5rem; background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: .28rem .6rem; border-radius: 99px; cursor: pointer; font: inherit; font-size: .85rem; max-width: 42vw; } .account-btn:hover { background: rgba(255,255,255,.12); } .account-avatar { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px; background: var(--brand-gold); color: var(--brand-navy-dk); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; } .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-caret { flex: 0 0 auto; opacity: .8; } .account-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: var(--space-2); z-index: 50; } .account-menu[hidden] { display: none; } .account-menu .who-block { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); } .account-menu .who-name { font-weight: 600; font-size: .9rem; } .account-menu .who-meta { font-size: .78rem; color: var(--text-muted); word-break: break-all; } .account-menu a, .account-menu button.menu-item { display: block; width: 100%; text-align: left; padding: .5rem var(--space-3); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .88rem; background: transparent; border: 0; cursor: pointer; font-family: inherit; } .account-menu a:hover, .account-menu button.menu-item:hover { background: var(--surface-3); color: var(--text); } .account-menu form { margin: 0; } .account-menu hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-2) 0; } /* Theme switch inside the account menu */ .theme-row { padding: var(--space-2) var(--space-3); } .theme-row .theme-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; margin-bottom: var(--space-2); } .theme-options { display: flex; gap: 4px; background: var(--surface-3); padding: 3px; border-radius: 99px; } .theme-options button { flex: 1; padding: .3rem .2rem; font-size: .78rem; font-family: inherit; border: 0; border-radius: 99px; background: transparent; color: var(--text-muted); cursor: pointer; } .theme-options button[aria-pressed="true"] { background: var(--surface-1); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); } /* ---------------------------------------------------------------- sidebar */ .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--surface-1); border-right: 1px solid var(--border); overflow-y: auto; padding: var(--space-4) 0; z-index: 30; } .sidebar h6 { margin: var(--space-4) var(--space-4) var(--space-1); font-size: .68rem; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); font-weight: 700; } .sidebar a { display: block; padding: .45rem var(--space-4); color: var(--text); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; } .sidebar a:hover { background: var(--surface-3); border-left-color: var(--brand-green); color: var(--text); } .sidebar a[aria-current="page"] { background: var(--surface-3); border-left-color: var(--brand-green); font-weight: 600; color: var(--brand-green-text); } .nav-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(10,10,20,.5); border: 0; padding: 0; } .nav-backdrop[hidden] { display: none; } main { margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + var(--space-5)) var(--space-5) var(--space-6); } /* * NFR-4.2.1. Below 860px the sidebar becomes a proper off-canvas drawer. * * The earlier approach - reflowing the nav into a wrapped inline row - pushed * page content far down the screen and got worse the more sections a role * could see, so an admin (who sees every section) got the worst layout. A * drawer keeps the cost of navigation constant regardless of role. */ @media (max-width: 860px) { .nav-toggle { display: flex; } .topbar .brand span { display: none; } .sidebar { width: min(280px, 84vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-2); border-right: 1px solid var(--border); } .sidebar.is-open { transform: translateX(0); } main { margin-left: 0; padding: calc(var(--topbar-h) + var(--space-4)) var(--space-4) var(--space-6); } } @media (min-width: 861px) { .nav-backdrop { display: none !important; } } /* ---------------------------------------------------------------- content */ .page-title { font-size: 1.5rem; margin: 0 0 var(--space-1); color: var(--text); } .section-title { font-size: 1.1rem; margin: var(--space-6) 0 var(--space-3); } .muted { color: var(--text-muted); font-size: .875rem; margin: 0 0 var(--space-5); } .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-1); } .tile-accent { border-color: var(--brand-green); border-width: 2px; } .tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; } .tile-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin-top: var(--space-1); } .tile-sub { font-size: .78rem; color: var(--text-muted); margin-top: var(--space-1); } .panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--shadow-1); } .panel > :first-child { margin-top: 0; } .panel > :last-child { margin-bottom: 0; } .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: var(--space-4); border: 1px solid; } .alert-success { background: rgba(0,166,80,.10); border-color: rgba(0,166,80,.45); color: var(--brand-green-text); } .alert-danger { background: rgba(236,29,35,.10); border-color: rgba(236,29,35,.45); color: var(--brand-red-text); } .alert-warning { background: rgba(200,168,75,.16);border-color: rgba(200,168,75,.55);color: #7d6317; } .alert-info { background: rgba(32,28,112,.07); border-color: rgba(32,28,112,.30); color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alert-warning { color: #e3c568; } } :root[data-theme="dark"] .alert-warning { color: #e3c568; } .badge { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; } .badge-ok { background: rgba(0,166,80,.16); color: var(--brand-green-text); } .badge-warn { background: rgba(236,29,35,.14); color: var(--brand-red-text); } .badge-info { background: rgba(32,28,112,.12); color: var(--brand-navy-text); } code { background: var(--surface-3); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; } /* ---------------------------------------------------------------- forms */ label { display: block; font-size: .875rem; font-weight: 600; margin: 0 0 var(--space-1); } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=tel], select, textarea { width: 100%; padding: .6rem .7rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); } input:focus, select:focus, textarea:focus { border-color: var(--brand-green); } .field { margin-bottom: var(--space-4); } .field-help { font-size: .78rem; color: var(--text-muted); margin-top: calc(var(--space-1) * -1 + 2px); } .btn { display: inline-block; padding: .6rem 1.1rem; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: var(--brand-green-text); color: #fff; text-decoration: none; text-align: center; } .btn:hover { background: var(--brand-navy); color: #fff; } .btn-block { display: block; width: 100%; } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-3); color: var(--text); } .btn-danger { background: var(--brand-red-text); } .btn-danger:hover { background: #b3161a; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); } th { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .visually-hidden:focus { position: static; width: auto; height: auto; margin: 0; clip: auto; padding: var(--space-2) var(--space-3); background: var(--surface-1); color: var(--text); }