/* One KU Training Grants: design system over the Django admin. KU brand (brand.ku.edu): Kansas Blue #0051ba, Night #003459, Crimson #e8000d, Steam #dde5ed, Sky #73cbf2. Type: KU's Roc Grotesk (headlines) and Gotham Narrow (body) load from an Adobe Fonts web project when one is configured. Until then, the closest open-licence matches are self-hosted: Archivo (wide grotesque, for Roc Grotesk) and Figtree (geometric sans, for Gotham Narrow). Tokens first; components read only tokens. */ html[data-theme="light"], :root { /* Django sets its own light palette (yellow --accent) on html[data-theme="light"]; match it */ --font-family-primary: "gotham-narrow", "Figtree", "Helvetica Neue", Arial, Helvetica, sans-serif; --ku-headline: "roc-grotesk", "Archivo", "Helvetica Neue", Arial, Helvetica, sans-serif; --ku-blue: #0051ba; --ku-night: #003459; --ku-crimson: #e8000d; --ku-steam: #dde5ed; --ku-sky: #73cbf2; --page: #f4f6f9; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f7; --ink: #16191d; --ink-2: #3d434a; --muted: #5b626b; --line: #e3e7ed; --line-strong: #cfd6de; --accent: var(--ku-blue); --accent-ink: #ffffff; --accent-hover: #00439a; --accent-soft: #e7eef9; --critical: #c8102e; --critical-ink: #ffffff; --critical-soft: #fdecee; --good: #18794e; --good-soft: #e8f5ee; --warn: #9a5b00; --warn-soft: #fff5e0; --focus: 0 0 0 3px rgba(0, 81, 186, 0.35); --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07); --shadow-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08); --radius: 10px; --radius-sm: 7px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --tg-header: var(--ku-blue); --tg-selected-row: #f1f6fd; --tg-button-fg: #ffffff; --tg-link-hover: var(--ku-night); /* legacy names used by page templates */ --tg-surface: var(--surface); --tg-card: var(--surface); --tg-ink: var(--ink); --tg-muted: var(--muted); --tg-grid: var(--line); --tg-axis: var(--line-strong); --tg-ring: var(--line); --tg-critical: var(--critical); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #0f1215; --surface: #181c20; --surface-2: #1d2227; --surface-3: #252b31; --ink: #eef1f4; --ink-2: #c9d0d7; --muted: #a3acb6; --line: #2b3238; --line-strong: #3a434b; --accent: #5aa2f5; --accent-hover: #7db6f7; --accent-soft: #16263a; --accent-ink: #0b1a2c; --critical: #ff6b7a; --critical-ink: #2a0a0e; --critical-soft: #3a1a1f; --good: #4cc38a; --good-soft: #13291f; --warn: #f0b451; --warn-soft: #33260f; --focus: 0 0 0 3px rgba(90, 162, 245, 0.45); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 18px rgba(0, 0, 0, 0.45); --tg-header: #0b2743; --tg-selected-row: #1a2633; --tg-button-fg: #0b1a2c; --tg-link-hover: #a9cffa; } } :root[data-theme="dark"] { --page: #0f1215; --surface: #181c20; --surface-2: #1d2227; --surface-3: #252b31; --ink: #eef1f4; --ink-2: #c9d0d7; --muted: #a3acb6; --line: #2b3238; --line-strong: #3a434b; --accent: #5aa2f5; --accent-hover: #7db6f7; --accent-soft: #16263a; --accent-ink: #0b1a2c; --critical: #ff6b7a; --critical-ink: #2a0a0e; --critical-soft: #3a1a1f; --good: #4cc38a; --good-soft: #13291f; --warn: #f0b451; --warn-soft: #33260f; --focus: 0 0 0 3px rgba(90, 162, 245, 0.45); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 18px rgba(0, 0, 0, 0.45); --tg-header: #0b2743; --tg-selected-row: #1a2633; --tg-button-fg: #0b1a2c; --tg-link-hover: #a9cffa; } /* Django admin variables live on : Django's dark stylesheet sets its own on :root/html, and the nearest definition wins, so these always follow our tokens in both themes. */ body { --primary: var(--ku-blue); --secondary: var(--ku-night); --accent-admin: #fff; --body-bg: var(--page); --body-fg: var(--ink); --body-quiet-color: var(--muted); --body-medium-color: var(--ink-2); --body-loud-color: var(--ink); --header-bg: var(--tg-header); --header-color: #fff; --header-branding-color: #fff; --header-link-color: #fff; --breadcrumbs-bg: transparent; --breadcrumbs-fg: var(--muted); --breadcrumbs-link-fg: var(--accent); --link-fg: var(--accent); --link-hover-color: var(--tg-link-hover); --link-selected-fg: var(--tg-link-hover); --hairline-color: var(--line); --border-color: var(--line-strong); --darkened-bg: var(--surface-2); --selected-bg: var(--accent-soft); --selected-row: var(--tg-selected-row); --button-bg: var(--accent); --button-fg: var(--tg-button-fg); --button-hover-bg: var(--accent-hover); --default-button-bg: var(--accent); --default-button-hover-bg: var(--accent-hover); --close-button-bg: var(--ink-2); --close-button-hover-bg: var(--ink); --object-tools-bg: var(--surface); --object-tools-fg: var(--ink); --object-tools-hover-bg: var(--surface-3); --message-success-bg: var(--good-soft); --message-warning-bg: var(--warn-soft); --message-error-bg: var(--critical-soft); } /* ── Base ─────────────────────────────────────────────────────────────── */ html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } body { background: var(--page); color: var(--ink); font-feature-settings: "kern"; } h1, h2, h3, #site-name, .tg-nav a, .tg-tile .value { font-family: var(--ku-headline); letter-spacing: -0.005em; font-stretch: 112%; } body, input, select, textarea, button { font-family: var(--font-family-primary); } #content h1 { font-size: 1.3333rem; font-weight: 700; color: var(--ink); margin: 0 0 0.9rem; } @media (max-width: 560px) { #content h1 { font-size: 1.2222rem; } } a { text-underline-offset: 2px; } /* Links inside running text are underlined, so colour is never the only cue. */ div.breadcrumbs a, #content p a:not(.button), #content li a:not(.button), .guide td a, .tpl p a, .datetimeshortcuts a, .help a, .tg-clear a { text-decoration: underline; text-decoration-thickness: 1px; } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus); } #content { padding: 24px 32px 48px; } @media (max-width: 767px) { #content { padding: 16px; } } /* ── Header and navigation ───────────────────────────────────────────── */ html body #header { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav tools"; align-items: center; column-gap: 28px; height: auto; min-height: 104px; padding: 0 32px; flex-shrink: 0; /* Django's #container is a flex column that would otherwise squash the header */ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); flex-direction: initial; } html body #header #branding { grid-area: brand; display: flex; align-items: center; gap: 12px; margin: 0; } html body #header .tg-nav { grid-area: nav; justify-self: end; align-self: stretch; } html body #header #user-tools { grid-area: tools; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; white-space: nowrap; color: #fff; font-size: 0; text-align: right; } /* font-size 0 hides "Welcome, …" and the slashes */ html body #header #user-tools a, html body #header #user-tools button { font-size: 0.84rem; } html body #header #user-tools form { display: inline-flex; } html body #header #user-tools form button, html body #header #logout-form button { background: transparent !important; border: 0; color: #fff !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; font-size: 0.84rem; min-height: 0; } html body #header #user-tools strong { color: #fff; } html body #header #user-tools a { color: #fff; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; } .tg-nav a { white-space: nowrap; } /* KU Jayhawk: official artwork unaltered, background removed, with a thin white outline so it reads on KU Blue. */ .tg-mark { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 8px 0; align-self: center; } .tg-mark img { height: 88px; width: auto; display: block; } @media (max-width: 560px) { .tg-mark img { height: 60px; } } @media (max-width: 1540px) { /* Brand spans both rows so the Jayhawk and name sit vertically centered in the bar; tools top right, nav bottom right. */ html body #header { grid-template-columns: auto 1fr; grid-template-rows: auto 50px; grid-template-areas: "brand tools" "brand nav"; padding: 8px 16px 0; row-gap: 2px; } html body #header #branding { align-self: center; padding: 6px 0; } html body #header #user-tools { justify-self: end; align-self: end; padding-top: 10px; } html body #header .tg-nav { justify-self: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 -8px; height: 50px; min-height: 50px; } html body #header .tg-nav > a:first-child { margin-left: auto; } /* right-aligned, still scrollable when narrow */ html body #header .tg-nav::-webkit-scrollbar { display: none; } html body #header .tg-nav a { padding: 0 8px; min-height: 0; height: 50px; flex: 0 0 auto; box-sizing: border-box; } html body #header { padding-top: 0; row-gap: 0; } html body #header .tg-mark { margin: 0; } html body #header .tg-mark img { height: 80px; } } @media (max-width: 560px) { html body #header #user-tools a[href$="password_change/"] { display: none; } html body #header .tg-mark img { height: 60px; } } #branding #site-name { margin: 0; line-height: 1.12; white-space: nowrap; } #branding #site-name .l1 { display: block; font-size: 1.65rem; font-weight: 800; letter-spacing: 0.01em; } #branding #site-name .l2 { display: block; font-size: 1.1rem; font-weight: 600; opacity: 0.95; } #branding #site-name a { color: #fff; } @media (max-width: 560px) { #branding #site-name { white-space: normal; } #branding #site-name .l1 { font-size: 1.25rem; } #branding #site-name .l2 { font-size: 0.86rem; } html body #header { column-gap: 10px; padding: 0 12px; } #header #branding { gap: 8px; min-width: 0; } } #user-tools { font-size: 0.84rem; letter-spacing: 0.02em; text-transform: none; } .tg-nav { display: flex; gap: 4px; align-items: stretch; } .tg-nav a { display: flex; align-items: center; padding: 0 12px; min-height: 104px; color: rgba(255, 255, 255, 0.86); font-weight: 600; font-size: 0.94rem; border-bottom: 4px solid transparent; text-decoration: none; transition: color 150ms ease, border-color 150ms ease; } .tg-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.45); } #header .tg-nav a:hover, #header .tg-nav a:focus { text-decoration: none; } /* the header-edge bar is the only indicator */ .tg-nav a[aria-current="page"] { color: #fff; border-bottom: 4px solid var(--ku-crimson); font-weight: 700; } div.breadcrumbs { padding: 12px 32px 0; font-size: 0.8rem; color: var(--muted); } div.breadcrumbs a { color: var(--accent); } @media (max-width: 767px) { div.breadcrumbs { padding: 10px 16px 0; } } /* ── Buttons ─────────────────────────────────────────────────────────── */ .button, input[type=submit], input[type=button], .submit-row input, a.button, button.button { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.01em; min-height: 36px; padding: 8px 16px; transition: transform 160ms var(--ease-out), background-color 150ms ease, box-shadow 150ms ease; cursor: pointer; } .button:active, input[type=submit]:active, input[type=button]:active, a.button:active, button.button:active { transform: scale(0.97); } a.button { display: inline-flex; align-items: center; gap: 6px; } .button.secondary, a.button.secondary, button.button.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); } .button.secondary:hover, a.button.secondary:hover, button.button.secondary:hover { background: var(--surface-3); color: var(--ink); } a.deletelink, .submit-row a.deletelink, .submit-row a.deletelink:link, .submit-row a.deletelink:visited { background: #c8102e; color: #fff; border-radius: var(--radius-sm); } a.deletelink:hover, .submit-row a.deletelink:hover { background: #a00d25; color: #fff; } .object-tools a.addlink { background: var(--accent); color: var(--accent-ink); box-shadow: none; } .object-tools a.addlink:hover { background: var(--accent-hover); } .object-tools a { border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; } /* ── Forms ───────────────────────────────────────────────────────────── */ input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=search], textarea, select, .vTextField { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); padding: 7px 10px; min-height: 36px; transition: border-color 150ms ease, box-shadow 150ms ease; } select { padding-right: 28px; } /* Filter and build rows: every control the same height (native date inputs add their own padding). */ .tg-form input:not([type=checkbox]):not([type=radio]), .tg-form select, .tg-filter select, .tg-actions select, .tg-form input[type=submit], .tg-actions .button, .tg-actions input[type=submit] { box-sizing: border-box; height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; line-height: 38px; } .tg-form input[type=date] { line-height: normal; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } .form-row { padding: 12px 10px; } fieldset.module { border-radius: var(--radius); } .help, p.help, div.help { color: var(--muted); font-size: 0.78rem; } .errornote, .errorlist li { border-radius: var(--radius-sm); } .submit-row { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); border: 0; } /* ── Modules as cards ────────────────────────────────────────────────── */ .module { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } body .module h2, body .module caption, body .inline-group h2, body fieldset.collapse summary, body .collapse h2 { background: var(--surface-2); color: var(--ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line); } .module caption a.section { color: var(--ink); } #content-related .module h2 { background: var(--surface-2); color: var(--ink); } .dashboard .module table th, .dashboard .module table td { padding: 9px 14px; } .dashboard #content { max-width: 1100px; } /* Inline rows (degrees, positions, …) scroll inside their card instead of spilling out. */ .inline-group .tabular, .inline-group .tabular fieldset.module { overflow-x: auto; max-width: 100%; } .inline-group .tabular table { width: 100%; table-layout: auto; } .inline-group .tabular thead th { font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); background: var(--surface-2); padding: 8px 8px; white-space: nowrap; } .inline-group .tabular td { padding: 8px 8px; vertical-align: top; } .inline-group .tabular td input:not([type=checkbox]), .inline-group .tabular td select, .inline-group .tabular td textarea { width: 100%; min-width: 7.5em; box-sizing: border-box; } .inline-group .tabular td .related-widget-wrapper { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; } .inline-group .tabular td .related-widget-wrapper-link:not(.add-related) { display: none; } /* keep just "+ add" in rows */ .inline-group .tabular td select { min-width: 9.5em; } .inline-group .tabular td .related-widget-wrapper select, .inline-group .tabular td .select2-container { min-width: 12em; flex: 1 1 auto; } .inline-group .tabular td.original p { font-size: 0.72rem; color: var(--muted); margin: 0 0 4px; } .inline-group .tabular tr.form-row:nth-child(even) td { background: var(--surface-2); } .datetimeshortcuts { display: block; margin: 4px 0 0; font-size: 0.72rem; } .timezonewarning { display: none; } /* browser-vs-server clock note: noise for a single-campus tool */ /* ── Lists (changelists) ─────────────────────────────────────────────── */ #changelist .results { border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--surface); overflow: auto; } #result_list { width: 100%; } #result_list thead th { background: var(--surface-2); color: var(--ink-2); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding: 10px 10px; } #result_list tbody td, #result_list tbody th { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } #result_list tbody tr:hover td, #result_list tbody tr:hover th { background: var(--selected-row); } #changelist-filter { border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--surface); } #changelist-filter h2 { background: var(--surface-2); color: var(--ink); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } #changelist #toolbar { background: transparent; border: 0; padding: 0 0 12px; } #changelist #toolbar input[type=text] { min-width: 280px; } .paginator { border: 0; color: var(--muted); } /* ── Sidebar ─────────────────────────────────────────────────────────── */ #nav-sidebar { background: var(--surface); border-right: 1px solid var(--line); } #nav-sidebar .module { box-shadow: none; border-radius: 0; } #nav-sidebar .current-model { background: var(--accent-soft); } #nav-filter { border-radius: var(--radius-sm); margin: 10px 8px; width: calc(100% - 16px); } #nav-sidebar .current-app .section:link, #nav-sidebar .current-app .section:visited, #nav-sidebar caption a { color: var(--ink); } #nav-sidebar .current-app caption, #nav-sidebar caption { background: var(--surface-2); } /* ── Page components ─────────────────────────────────────────────────── */ .tg-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .tg-page-head h1 { margin: 0 !important; } .tg-page-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; max-width: 70ch; } .tg-filter { display: flex; gap: 10px; align-items: center; } .tg-filter label { font-weight: 600; font-size: 0.85rem; color: var(--ink-2); } .tg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; } .tg-tile { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 16px 13px; position: relative; } .tg-tile .label { color: var(--ink-2); font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tg-tile .value { color: var(--ink); font-size: 1.85rem; font-weight: 700; line-height: 1.15; margin: 6px 0 4px; font-family: var(--ku-headline); } .tg-tile .sub { color: var(--muted); font-size: 0.74rem; line-height: 1.4; } .tg-tile.alert::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--critical); } /* Hero numbers in KU colors (large bold text: every tone clears 3:1, most clear 4.5:1). */ :root { --tone-blue: #0051ba; --tone-red: #d0000c; --tone-green: #18794e; --tone-gold: #9a6400; --tone-night: #003459; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tone-blue: #6fb0ff; --tone-red: #ff6b73; --tone-green: #4cc38a; --tone-gold: #f0b451; --tone-night: #9fc4ea; } } :root[data-theme="dark"] { --tone-blue: #6fb0ff; --tone-red: #ff6b73; --tone-green: #4cc38a; --tone-gold: #f0b451; --tone-night: #9fc4ea; } .tg-tile.tone-blue .value { color: var(--tone-blue); } .tg-tile.tone-red .value { color: var(--tone-red); } .tg-tile.tone-green .value { color: var(--tone-green); } .tg-tile.tone-gold .value { color: var(--tone-gold); } .tg-tile.tone-night .value { color: var(--tone-night); } .tg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; margin-bottom: 26px; } @media (max-width: 560px) { .tg-grid { grid-template-columns: 1fr; } } .tg-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 16px 18px 12px; min-width: 0; } .tg-card h2 { background: none !important; color: var(--ink) !important; padding: 0 !important; margin: 0 0 2px !important; font-size: 1rem !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; } .tg-card .note { color: var(--muted); font-size: 0.78rem; margin: 0 0 6px; } .tg-chart { height: 280px; width: 100%; } .tg-card details { margin-top: 6px; font-size: 0.82rem; overflow-x: auto; } .tg-card summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 6px; } .tg-card table { width: 100%; margin-top: 6px; font-variant-numeric: tabular-nums; border-collapse: collapse; } .tg-card th, .tg-card td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); } .tg-card th:first-child, .tg-card td:first-child { text-align: left; } .tg-receipt { margin-bottom: 22px; } .tg-receipt-list { list-style: none; margin: 8px 0 4px; padding: 0; } .tg-receipt-list li { display: grid; grid-template-columns: 210px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; } .tg-receipt-list li:first-child { border-top: 0; } .tg-receipt-list .when { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tg-receipt-list .muted, .muted { color: var(--muted); } @media (max-width: 560px) { .tg-receipt-list li { grid-template-columns: 1fr; gap: 4px; } } .tg-res-group { margin-bottom: 18px; } .tg-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } a.tg-res-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 16px; text-decoration: none; color: var(--ink); min-height: 44px; transition: box-shadow 150ms ease, transform 160ms var(--ease-out); } a.tg-res-card:hover { box-shadow: var(--shadow-2); } a.tg-res-card:active { transform: scale(0.99); } a.tg-res-card .t { font-weight: 700; color: var(--accent); } a.tg-res-card .d { font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; } a.tg-res-card .u { font-size: 0.72rem; color: var(--muted); word-break: break-all; margin-top: auto; padding-top: 4px; } .tg-section-title { font-size: 1.1rem; font-weight: 700; margin: 6px 0 12px; color: var(--ink); } .tg-list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow-x: auto; margin-bottom: 22px; } .tg-list table { width: 100%; border-collapse: collapse; } .tg-list th { background: var(--surface-2); color: var(--ink-2); text-align: left; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line); } .tg-list td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .tg-list tr:last-child td { border-bottom: 0; } .tg-empty { padding: 18px; color: var(--muted); } .tg-attn details { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); margin-bottom: 8px; overflow-x: auto; } .tg-attn summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; } .tg-attn summary::-webkit-details-marker { display: none; } .tg-attn summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 200ms var(--ease-out); } .tg-attn details[open] summary::after { transform: rotate(-135deg); } .tg-attn table { width: 100%; border-collapse: collapse; } .tg-attn td { padding: 9px 16px; border-top: 1px solid var(--line); font-size: 0.9rem; } .tg-clear { color: var(--muted); font-size: 0.85rem; margin: 10px 2px; } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.5em; padding: 0 7px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; } .badge.critical { background: var(--critical); color: var(--critical-ink); } .badge.good { background: var(--good-soft); color: var(--good); } .badge.neutral { background: var(--surface-3); color: var(--ink-2); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: var(--surface-3); color: var(--ink-2); } .pill.good { background: var(--good-soft); color: var(--good); } .pill.critical { background: var(--critical-soft); color: var(--critical); } .pill.accent { background: var(--accent-soft); color: var(--accent); } .num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } @media print { body { background: #fff; } .tg-tile, .tg-card, .module, .tg-list { box-shadow: none; border: 1px solid #ccc; } } /* ── Login: Django's narrow login box. Jayhawk and name centered, Help and the theme toggle on a row below. ── */ html body.login #header { display: block; min-height: 0; padding: 18px 20px 10px; } html body.login #header #branding { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 12px; row-gap: 4px; } html body.login #header #branding::after { content: ""; order: 3; flex-basis: 100%; height: 0; } html body.login #header .tg-mark { order: 1; margin: 0; } html body.login #header .tg-mark img { height: 64px; } html body.login #branding #site-name { order: 2; white-space: normal; } html body.login #branding #site-name .l1 { font-size: 1.45rem; } html body.login #branding #site-name .l2 { font-size: 0.95rem; } html body.login #header .tg-nav { order: 4; margin: 0 !important; height: auto; min-height: 0; overflow: visible; } html body.login #header .tg-nav a { min-height: 36px; height: auto; padding: 0 8px; border-bottom: 0; } html body.login #header .theme-toggle { order: 5; } @media (max-width: 560px) { html body.login #header .tg-mark img { height: 52px; } html body.login #branding #site-name .l1 { font-size: 1.2rem; } html body.login #branding #site-name .l2 { font-size: 0.84rem; } } /* A tile that jumps to its list further down the page. */ a.tg-tile-link { display: block; color: inherit; text-decoration: none; transition: box-shadow 150ms ease, transform 150ms ease; } a.tg-tile-link:hover, a.tg-tile-link:focus-visible { text-decoration: none; box-shadow: var(--shadow-2); transform: translateY(-1px); } a.tg-tile-link .label::after { content: " ↓"; } #attention { scroll-margin-top: 16px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ── How KU compares (NIH RePORTER benchmarks) ── */ .tg-card.span-2 { grid-column: 1 / -1; } .tg-bench-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 16px; padding: 12px 18px; } .tg-bench-controls label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.85rem; color: var(--ink-2); } .tg-bench-controls label.check { font-weight: 500; } .tg-bench-controls input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ku-blue, #0051ba); } .tg-source { color: var(--muted); font-size: 0.78rem; margin: -12px 0 26px; max-width: 110ch; } /* ── Resource cards: KU gradient chase on hover (ported from the Gray-NAS dashboard bookmarks) ── A conic ring cut out with mask-composite leaves a 2px edge. It runs as a comet, dim most of the way round with a bright head cut off hard, and only on hover or keyboard focus: animating a conic repaints every frame. */ @property --chase-a { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes tg-chase { to { --chase-a: 360deg; } } a.tg-res-card { position: relative; } a.tg-res-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 2px; background: conic-gradient(from var(--chase-a), rgba(0, 81, 186, 0.08) 0deg 220deg, #0051ba 270deg, #e8000d 318deg, #ffc82d 350deg, rgba(0, 81, 186, 0.08) 351deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } a.tg-res-card:hover::after, a.tg-res-card:focus-visible::after { opacity: 1; animation: tg-chase 2.4s linear infinite; } a.tg-res-card:hover, a.tg-res-card:focus-visible { box-shadow: 0 0 22px rgba(232, 0, 13, 0.14), var(--shadow-2); } @media (prefers-reduced-motion: reduce) { a.tg-res-card:hover::after, a.tg-res-card:focus-visible::after { animation: none; opacity: 0.85; } } /* ── Pull & Compare ── */ .tg-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 16px; } .tg-subtabs a { padding: 10px 14px; font-weight: 700; color: var(--ink-2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } .tg-subtabs a span { font-weight: 500; color: var(--muted); font-size: 0.82rem; margin-left: 4px; } .tg-subtabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--ku-crimson); } .tg-subtabs a:hover { text-decoration: none; color: var(--accent); } .tg-pull-bar { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .tg-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .tg-sources li { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; min-width: 170px; margin: 0; } .tg-sources li span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .tg-sources li small { grid-column: 1 / -1; color: var(--muted); font-size: 0.74rem; } .tg-sources li.src-ready span { color: var(--good); } .tg-sources li.src-simulated span { color: var(--warn); } .tg-sources li.src-off span { color: var(--muted); } .tg-pull-go { min-width: 260px; } .tg-pull-go .note { color: var(--muted); font-size: 0.8rem; margin: 8px 0 0; } .tg-pull-go pre { white-space: pre-wrap; font-size: 0.75rem; max-height: 200px; overflow: auto; } .tg-progress .bar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; width: 260px; } .tg-progress .bar span { display: block; height: 100%; background: var(--ku-blue); transition: width 300ms ease; } .tg-progress .txt { font-size: 0.85rem; color: var(--ink-2); } .tg-pull-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 14px; } .tg-pull-filter .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; } .tg-pull-filter .seg a { padding: 8px 14px; font-weight: 600; font-size: 0.85rem; color: var(--ink-2); text-decoration: none; } .tg-pull-filter .seg a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); } details.tg-person { margin-bottom: 10px; padding: 0; } details.tg-person > summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 18px; cursor: pointer; } details.tg-person > summary .who { font-weight: 700; color: var(--ink); } details.tg-person > summary .when { color: var(--muted); font-size: 0.82rem; } details.tg-person > summary .counts { margin-left: auto; font-size: 0.82rem; color: var(--ink-2); } .tg-scroll { overflow-x: auto; padding: 0 12px 6px; } table.tg-cmp { width: 100%; border-collapse: collapse; font-size: 0.86rem; } table.tg-cmp th { font-size: 0.74rem; text-align: center; color: var(--ink-2); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } table.tg-cmp th:nth-child(2) { text-align: left; } table.tg-cmp td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; } table.tg-cmp td.ttl { min-width: 220px; text-align: left; } table.tg-cmp td.ttl small { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 2px; } table.tg-cmp td.mk { text-align: center; font-weight: 700; color: var(--good); width: 1%; } table.tg-cmp td.mk .no { color: var(--muted); font-weight: 400; } table.tg-cmp td.act { white-space: nowrap; text-align: right; width: 1%; } table.tg-cmp td.act form { display: inline-flex; gap: 6px; } table.tg-cmp tr.rej td { opacity: 0.55; } .button.small { padding: 5px 10px !important; font-size: 0.8rem !important; min-height: 32px; } .tg-only { margin: 8px 18px 14px; font-size: 0.84rem; color: var(--ink-2); } details.tg-person > .tg-empty { margin: 0 18px 12px; } /* Eight tabs: a little tighter so they fit beside the brand at laptop widths. */ .tg-nav { gap: 0; } .tg-nav a { font-size: 0.86rem; padding: 0 10px; } @media (max-width: 1540px) { html body #header .tg-nav a { padding: 0 7px; font-size: 0.84rem; } }