Spaces:
Sleeping
Sleeping
Multi-select areas, colour-coded area tags, Creighton students only, titles removed, Creighton blue
4f5fdec verified | /* CURAS Research Database. | |
| Creighton University brand palette (creighton.edu/brand/color-palette): | |
| Pantone 286 C #0054A6 (primary blue), Pantone 2767 C #00245D (navy), | |
| Pantone 2727 C #1F74DB (web blue), Warm Gray 1 C #D7D2CB, | |
| Pantone 291 C #95D2F3 (light blue), 346 C #71CC98 (green), 123 C #FFC72C (gold). | |
| Pages keep a white background and black text. */ | |
| :root { | |
| --cu-blue: #0054A6; | |
| --cu-navy: #00245D; | |
| --cu-web-blue: #1F74DB; | |
| --cu-light-blue: #95D2F3; | |
| --cu-pale-blue: #E6F1FB; | |
| --cu-gray: #D7D2CB; | |
| --cu-gray-light: #F3F1EE; | |
| --cu-gold: #FFC72C; | |
| --ink: #000; | |
| --paper: #fff; | |
| --rule: var(--cu-blue); | |
| --line: #8a857f; | |
| --soft: var(--cu-gray-light); | |
| } | |
| * { box-sizing: border-box; } | |
| html { background: var(--paper); } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| font-size: 16px; | |
| line-height: 1.5; | |
| } | |
| a { color: var(--cu-blue); text-decoration: underline; text-underline-offset: 2px; } | |
| a:hover { color: var(--cu-navy); text-decoration-thickness: 2px; } | |
| a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { | |
| outline: 3px solid var(--cu-web-blue); outline-offset: 2px; | |
| } | |
| h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; } | |
| h1 { font-size: 1.75rem; color: var(--cu-blue); } | |
| h2 { font-size: 1.25rem; color: var(--cu-navy); } | |
| h3 { font-size: 1.05rem; } | |
| p { margin: 0 0 1rem; } | |
| .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; } | |
| /* Header and footer */ | |
| .site-header { background: var(--cu-blue); color: var(--paper); padding: 18px 0 14px; border-bottom: 5px solid var(--cu-navy); } | |
| .site-header a { color: var(--paper); } | |
| .site-header a:hover { color: var(--paper); } | |
| .site-header a:focus-visible { outline-color: var(--cu-gold); } | |
| .btn-primary:focus-visible, .tag-eligibility:focus-visible { outline-color: var(--cu-gold); } | |
| .site-header .brand { font-size: 1.5rem; font-weight: 700; text-decoration: none; } | |
| .site-header .tagline { margin: 2px 0 10px; color: var(--paper); } | |
| .site-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; } | |
| .site-nav a { font-weight: 600; } | |
| .site-nav a[aria-current="page"] { text-decoration-thickness: 3px; } | |
| main { padding: 24px 0 40px; } | |
| .site-footer { border-top: 5px solid var(--cu-blue); background: var(--cu-gray-light); padding: 16px 0 32px; font-size: .95rem; } | |
| .site-footer p { margin: 0 0 .4rem; } | |
| /* Notices */ | |
| .flash { border: 1px solid var(--cu-blue); border-left-width: 6px; background: var(--cu-pale-blue); padding: 10px 14px; margin: 0 0 20px; } | |
| .notice { border: 1px solid var(--cu-gray); border-left: 6px solid var(--cu-blue); background: var(--paper); padding: 12px 14px; margin: 0 0 20px; } | |
| .notice p:last-child { margin-bottom: 0; } | |
| .error-summary { border: 2px solid var(--cu-navy); border-left-width: 8px; padding: 12px 14px; margin: 0 0 20px; background: var(--paper); } | |
| .error-summary ul { margin: .25rem 0 0; padding-left: 1.2rem; } | |
| /* Filters */ | |
| .filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 16px; border: 1px solid var(--cu-gray); border-top: 4px solid var(--cu-blue); background: var(--cu-gray-light); margin-bottom: 16px; } | |
| .filters label, .filters .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; color: var(--cu-navy); } | |
| .filters .field { flex: 0 1 190px; min-width: 150px; } | |
| .filters .field.search { flex: 1 1 260px; } | |
| .filters .actions { display: flex; gap: 10px; align-items: center; } | |
| .result-count { margin: 0 0 16px; font-weight: 600; } | |
| .result-count .active-areas { font-weight: 400; margin-left: .5rem; } | |
| .result-count .tag { margin-left: .25rem; } | |
| /* Area-of-study multi-select dropdown (works without JavaScript) */ | |
| details.dropdown { position: relative; } | |
| details.dropdown > summary { | |
| list-style: none; cursor: pointer; display: block; width: 100%; height: 40px; padding: 8px 32px 8px 10px; | |
| border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | |
| } | |
| details.dropdown > summary::-webkit-details-marker { display: none; } | |
| details.dropdown > summary::after { content: ""; position: absolute; right: 12px; top: 15px; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); } | |
| details.dropdown[open] > summary::after { transform: rotate(225deg); top: 19px; } | |
| .dropdown-panel { position: absolute; z-index: 20; left: 0; top: 42px; min-width: 300px; max-height: 340px; overflow-y: auto; background: var(--paper); border: 1px solid var(--cu-blue); box-shadow: 0 6px 16px rgba(0, 36, 93, .18); padding: 8px 10px; } | |
| .dropdown-help { font-size: .85rem; margin: 0 0 6px; } | |
| .filters .dropdown-option { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .95rem; color: var(--ink); padding: 4px 2px; margin: 0; } | |
| .dropdown-option input { width: 16px; height: 16px; margin: 0; } | |
| .swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, .25); flex: 0 0 14px; } | |
| /* Form controls */ | |
| input[type="text"], input[type="search"], input[type="password"], input[type="email"], select, textarea { | |
| width: 100%; padding: 8px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); | |
| font: inherit; border-radius: 0; | |
| } | |
| textarea { min-height: 120px; resize: vertical; } | |
| select { height: 40px; } | |
| .btn { | |
| display: inline-block; padding: 8px 16px; border: 1px solid var(--cu-blue); background: var(--paper); color: var(--cu-blue); | |
| font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 0; line-height: 1.3; | |
| } | |
| .btn:hover { background: var(--cu-pale-blue); color: var(--cu-navy); } | |
| .btn-primary { background: var(--cu-blue); color: var(--paper); } | |
| .btn-primary:hover { background: var(--cu-navy); color: var(--paper); } | |
| .btn-small { padding: 4px 10px; font-size: .9rem; font-weight: 500; } | |
| form.inline { display: inline; } | |
| /* Tags (colour code for areas of study, eligibility) */ | |
| .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .6rem; } | |
| .tag { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; line-height: 1.5; border: 1px solid rgba(0, 0, 0, .12); color: var(--ink); overflow-wrap: anywhere; } | |
| .tag-eligibility { background: var(--cu-blue); color: var(--paper); border-color: var(--cu-blue); } | |
| .c-blue { background: #D2E6FB; } | |
| .c-sky { background: #CBEBFA; } | |
| .c-teal { background: #C5EFE9; } | |
| .c-green { background: #D3F2D6; } | |
| .c-mint { background: #C8F3DD; } | |
| .c-lime { background: #E4F5BF; } | |
| .c-yellow { background: #FFF1B8; } | |
| .c-gold { background: #FFE2A3; } | |
| .c-orange { background: #FFD9BF; } | |
| .c-red { background: #FFD2D2; } | |
| .c-pink { background: #FFD6EA; } | |
| .c-magenta { background: #F5D0F0; } | |
| .c-purple { background: #E4D6FF; } | |
| .c-indigo { background: #D8DCFF; } | |
| .c-brown { background: #EAD9C8; } | |
| .c-gray { background: #E5E3DF; } | |
| .c-all { background: var(--paper); border-color: var(--cu-blue); color: var(--cu-blue); } | |
| /* Listing cards */ | |
| .listing { border: 1px solid var(--cu-gray); border-left: 6px solid var(--cu-blue); padding: 18px 20px; margin: 0 0 18px; } | |
| .listing h2 { margin-bottom: .25rem; } | |
| .listing .byline { margin: 0 0 .5rem; } | |
| .listing .byline .sep { padding: 0 .4rem; } | |
| .listing .keywords { margin: 0 0 .75rem; } | |
| .listing .meta { font-size: .95rem; margin: 0 0 .75rem; } | |
| .listing p, .listing a { overflow-wrap: anywhere; } | |
| dl.facts { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; margin: 0 0 .75rem; } | |
| dl.facts dt { font-weight: 600; color: var(--cu-navy); } | |
| dl.facts dd { margin: 0; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; } | |
| details.more > summary { cursor: pointer; font-weight: 600; margin: .25rem 0 .5rem; color: var(--cu-blue); } | |
| details.more[open] > summary { margin-bottom: .75rem; } | |
| .permalink { font-size: .9rem; } | |
| /* Submission and admin forms */ | |
| .form-section { border: 1px solid var(--cu-gray); border-top: 4px solid var(--cu-blue); padding: 18px 20px; margin: 0 0 20px; } | |
| .form-section h2 { margin-bottom: 1rem; } | |
| .form-row { margin: 0 0 18px; } | |
| .form-row > label, .form-row > .group-label { display: block; font-weight: 600; margin-bottom: 4px; } | |
| .form-row .help { font-size: .9rem; margin: 0 0 6px; } | |
| .form-row .field-error { font-weight: 600; margin: 6px 0 0; color: var(--cu-navy); } | |
| .form-row.has-error { border-left: 4px solid var(--cu-navy); padding-left: 12px; } | |
| .req { font-weight: 400; } | |
| .choices { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 8px; } | |
| .choices label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; } | |
| .choices input { width: 18px; height: 18px; margin: 0; } | |
| .other-row label { font-weight: 400; display: block; margin-bottom: 4px; font-size: .95rem; } | |
| .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } | |
| .form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } | |
| .form-actions.spaced { margin-bottom: 24px; } | |
| .form-narrow { max-width: 420px; } | |
| .form-medium { max-width: 640px; } | |
| fieldset.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; } | |
| fieldset.choice-group legend { padding: 0; font-weight: 600; margin-bottom: 4px; } | |
| /* Tables */ | |
| .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; } | |
| .table-scroll table.data { margin-bottom: 0; } | |
| table.data { width: 100%; border-collapse: collapse; margin: 0 0 20px; } | |
| table.data th, table.data td { border: 1px solid var(--cu-gray); padding: 8px 10px; vertical-align: top; text-align: left; overflow-wrap: anywhere; } | |
| table.data th { background: var(--cu-pale-blue); color: var(--cu-navy); border-bottom: 2px solid var(--cu-blue); } | |
| table.data td.actions { white-space: nowrap; } | |
| table.compare td.value { white-space: pre-line; width: 42%; } | |
| table.compare tr.changed th { background: var(--cu-blue); color: var(--paper); } | |
| table.compare tr.changed td { background: var(--cu-pale-blue); } | |
| .counts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 20px; } | |
| .counts div { border: 1px solid var(--cu-gray); border-top: 4px solid var(--cu-blue); padding: 10px 16px; min-width: 150px; } | |
| .counts .n { font-size: 1.5rem; font-weight: 700; display: block; color: var(--cu-blue); } | |
| .admin-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 0 0 20px; } | |
| .hidden { display: none; } | |
| .keep-lines { white-space: pre-line; } | |
| .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } | |
| @media (max-width: 700px) { | |
| dl.facts { grid-template-columns: 1fr; gap: 2px 0; } | |
| dl.facts dd { margin-bottom: 8px; } | |
| .listing { padding: 14px; } | |
| table.data { font-size: .95rem; } | |
| .filters .field, .filters .field.search { flex: 1 1 100%; } | |
| .dropdown-panel { min-width: 0; width: 100%; } | |
| } | |
| @media print { | |
| .site-nav, .filters, .site-footer, .form-actions, .btn { display: none; } | |
| .site-header { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); } | |
| .site-header a, .site-header .tagline { color: var(--ink); } | |
| details.more { display: block; } | |
| details.more > summary { display: none; } | |
| .listing { break-inside: avoid; } | |
| } | |