/* * Degree Maps — the only custom stylesheet the public pages need. * Everything here is scoped to app-owned classes (dm-*, .noprint, .site-chrome) * so it behaves the same under the current and the new site design. * Print target: US letter, portrait. */ body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* ---- page-level bits ---------------------------------------------------- */ .dm-filters > form { margin-left: 1rem; margin-right: 1rem; } .dm-filters > form:first-child { margin-left: 0; } .dm-filters > form:last-child { margin-right: 0; } .dm-page { flex-direction: column; } .dm-view-switch { width: 100%; } .dm-view-switch p { font-size: 14pt; } .dm-results { width: 100%; } .dm-message p { color: #bb4935; } .majors-admin-bar { font-size: 0.9rem; background: #f2f2f2; border-bottom: 1px solid #c9c7c4; } .majors-admin-bar__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; padding: 0.5rem 1rem; } .majors-admin-bar nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } /* ---- the map -------------------------------------------------------------- */ .dm { width: 100%; } .dm-heading { text-align: center; } .dm-rule { margin: 30px 0; height: 2px; border: none; background: linear-gradient(to right, transparent, #ffc217 50%, transparent); } .dm-rule--header { margin: 0.5rem 0 1.5rem; background: #ffc217; } .dm-header { display: flex; align-items: flex-start; gap: 1.5rem; } .dm-logo { width: 16.66%; min-width: 120px; padding-top: 1.5rem; } .dm-header__text { flex: 1; } .dm-college { margin-top: 0; line-height: 1; } .dm-title { line-height: 1.2; } .dm-versions { font-size: 0.95rem; margin-bottom: 1rem; } .dm-versions p { margin: 0 0 0.35rem; } .dm-versions__notice { padding: 0.6rem 0.9rem; background: #fff5d6; border-left: 4px solid #ffc217; } .dm-versions__list a, .dm-versions__list strong { margin-right: 0.75rem; } .dm-versions__permalink { color: #3b3b3b; word-break: break-all; } /* Old-design alert bars assume they run full-bleed with the 75rem wrapper centred in the viewport, so the site only pads the wrapper below an 80em viewport. Inside our (already ≤ 75rem) column that leaves the icon on the edge; pad it always. */ .dm-note .alert-bar__wrapper, .ma-sge-warning .alert-bar__wrapper { padding-left: 1.875rem; padding-right: 1.875rem; } /* table */ .dm-year { margin-bottom: 1rem; } .dm-table { margin-bottom: 1rem; width: 100%; } .dm-table caption { text-align: left; font-weight: 600; } .dm-table th, .dm-table td { padding: 0.25rem 0.5rem; vertical-align: top; } .dm-table th.dm-course, .dm-table td.dm-course { width: 40%; border-right: none; } .dm-table th.dm-hours, .dm-table td.dm-hours { border-left: none; white-space: nowrap; } .dm-table--summer th.dm-course, .dm-table--summer td.dm-course { width: 30%; } .dm-table tbody tr:nth-child(odd) { background-color: #f9f9f9; } .dm-table td.dm-blank { border: none !important; background-color: #fff !important; } .dm-table tbody ul, .dm-table tbody ol { margin-left: 1.25rem; margin-bottom: 0; } .dm-table tbody li { margin-bottom: 0; } .dm-extra { display: block; font-size: 0.85em; color: #666; margin-top: 4px; line-height: 1.3; } .dm-year-total { margin-bottom: 1rem; } .dm-footnote-link { text-decoration: none; } /* SGE badges */ .dm-sge { display: inline-block; padding: 2px 6px; border-radius: 1rem; font-size: small; font-weight: 600; line-height: 1.2; background: #666; color: #fff; } .dm-sge-010 { background-color: #0A1172; color: #FFFFFF; } /* Navy / white */ .dm-sge-020 { background-color: #62737F; color: #FFFDD0; } /* Slate / cream */ .dm-sge-030 { background-color: #006B6B; color: #FFDAB9; } /* Teal / peach */ .dm-sge-040 { background-color: #556B2F; color: #F5F5DC; } /* Olive / beige */ .dm-sge-050 { background-color: #32127A; color: #D3D3D3; } /* Purple / grey */ .dm-sge-060 { background-color: #FF9447; color: #36454F; } /* Orange / charcoal */ .dm-sge-070 { background-color: #4B0082; color: #FFFFE0; } /* Indigo / pale yellow */ .dm-sge-key ul { list-style: none; margin-left: 0; } .dm-sge-key li { margin-bottom: 0.25rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ---- new design (body.majors-new) ------------------------------------------ This app's templates are part of the theme's Tailwind content scan (see tools/theme-build), so layout is utilities in the templates. What lives here is only what the theme does not style at all: form controls, the map table's corrections on top of .prose, and a few app components. Palette from the compiled theme: ink rgb(39 37 31), hover red rgb(144 59 65), Shocker yellow rgb(255 219 0), Inter type. */ .majors-new .dm-filters input[type="search"], .majors-new .dm-filters input[type="text"], .majors-new .dm-filters select { border: 0; border-bottom: 2px solid rgb(39 37 31); background: rgb(245 244 242); font: inherit; padding: .75rem 1rem; margin: 0; min-width: 12rem; } .majors-new .dm-filters input[type="search"] { flex: 1 1 16rem; } .majors-new .dm-filters input:focus, .majors-new .dm-filters select:focus { outline: 2px solid rgb(39 37 31); outline-offset: 2px; } .majors-new .dm-filters button { background: rgb(39 37 31); color: #fff; border: 0; cursor: pointer; font-weight: 700; padding: .75rem 1.5rem; margin: 0; transition: background-color .15s; } .majors-new .dm-filters button:hover, .majors-new .dm-filters button:focus { background: rgb(144 59 65); } .majors-new .dm-filters label:not(.sr-only) { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .25rem; } .majors-new .dm-view-switch a, .majors-new .majors-results-header a:not(.nc-button), .majors-new .dm-versions a { color: rgb(39 37 31); text-decoration: underline; text-decoration-thickness: 1px; } .majors-new .dm-view-switch a:hover { color: rgb(144 59 65); } /* Tables: the theme's .prose does the styling (the wrapper carries prose max-w-none); these only adjust what prose gets wrong for a degree map. */ .majors-new .prose .dm-table { margin-top: 0; border: 1px solid rgb(167 167 167); border-collapse: collapse; } .majors-new .prose .dm-table thead th { border-right: 1px solid rgb(255 255 255 / .18); } .majors-new .prose .dm-table tfoot tr { background: rgb(240 240 240); border-top: 2px solid rgb(56 56 56); } .majors-new .prose .dm-table tfoot th, .majors-new .prose .dm-table tfoot td { font-weight: 700; } .majors-new .prose .dm-table caption { caption-side: top; padding: 0; margin: 0 0 .5rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; color: rgb(39 37 31); } .majors-new .prose .dm-table thead th { color: #fff; } .majors-new .prose .dm-table tbody tr:nth-child(odd) { background: transparent; } /* prose stripes even rows; don't double up */ .majors-new .prose .dm-table td.dm-blank { border: 0 !important; background: #fff !important; } .majors-new .prose .dm-table tbody ul, .majors-new .prose .dm-table tbody ol { margin: 0 0 0 1.25rem; padding: 0; } .majors-new .prose .dm-table tbody li { margin: 0; padding: 0; } .majors-new .prose .ma-table td.ma-cell { padding: 0 !important; } .majors-new .nc-button.majors-subtle { background: transparent; color: rgb(39 37 31); box-shadow: inset 0 0 0 2px rgb(39 37 31); } /* Accent = the theme's own variant-2 button colours (yellow in the default, neutral-200 and neutral-900 themes), forced so nothing in a dialog or a theme band can turn it back to ink. */ .majors-new .nc-button.majors-accent { background-color: rgb(var(--theme-button-2-bg-color, 255 219 0)) !important; color: rgb(var(--theme-button-2-text-color, 39 37 31)) !important; } .majors-new .nc-button.majors-accent:hover, .majors-new .nc-button.majors-accent:focus-visible { background-color: rgb(39 37 31) !important; color: #fff !important; } .majors-new .nc-chip-link { display: inline-block; padding: .25rem .75rem; border: 1px solid rgb(39 37 31 / .3); border-radius: 999px; font-size: .85rem; text-decoration: none; color: rgb(39 37 31); } .majors-new .nc-chip-link:hover { border-color: rgb(144 59 65); color: rgb(144 59 65); } .majors-new .nc-button.majors-small { padding: .4rem .9rem; font-size: .85rem; } .majors-new .nc-button.ma-danger { background-color: rgb(232 0 0) !important; color: #fff !important; } .majors-new .nc-button.ma-danger:hover, .majors-new .nc-button.ma-danger:focus-visible { background-color: rgb(144 59 65) !important; } /* top slot: full-bleed slabs stacked directly under the title band */ .majors-new .majors-top .dm-filters form { margin: 0; } .majors-new .majors-top .dm-filters select { min-width: 14rem; } .majors-new .majors-top .dm-filters input, .majors-new .majors-top .dm-filters select { background: #fff; } .majors-new .majors-top .dm-help { margin-top: 1rem; border-top: 1px solid rgb(39 37 31 / .12); padding-top: .25rem; } .majors-new .majors-slab--actions .ma-actions { margin-top: .75rem; } .majors-new .majors-slab--actions .majors-results-header, .majors-new .majors-slab--actions p { margin: 0; } /* buttons on the dark actions slab */ .majors-new [data-tw-theme="neutral-900"] .nc-button:not(.majors-accent):not(.majors-subtle) { background: #fff; color: rgb(39 37 31); } .majors-new [data-tw-theme="neutral-900"] .nc-button:not(.majors-accent):not(.majors-subtle):hover { background: rgb(255 219 0); } .majors-new [data-tw-theme="neutral-900"] .nc-button.majors-subtle { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .8); } .majors-new [data-tw-theme="neutral-900"] .nc-button.majors-subtle:hover { background: rgb(232 0 0); box-shadow: none; } .majors-new [data-tw-theme="neutral-900"] .ma-note, .majors-new [data-tw-theme="neutral-900"] .help-block { color: rgb(225 225 225); } /* alerts (design-system GlobalAlert markup, see partials/alert.php) */ .majors-new .majors-alert-slab { margin: 1.5rem 0; } .majors-new .majors-alert-slab .majors-slab__inner { padding: 1.5rem 0; } .majors-new .majors-alert__title { font-size: 1.35rem; } .majors-new .majors-alert .prose ul { margin: 0; } /* map header: the logo is wide (4.4:1), so centre it against the two title lines */ .majors-new .dm-header { align-items: center; gap: 1.5rem; margin-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgb(39 37 31 / .15); } .majors-new .dm-logo { width: auto; height: 3.5rem; min-width: 0; padding-top: 0; flex: 0 0 auto; } .majors-new .dm-college { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; line-height: 1.2; } .majors-new .dm-title { font-size: 1.4rem; font-weight: 700; margin: 0; } .majors-new .dm-year { margin-top: 2rem; } .majors-new .majors-admin-bar { background: rgb(245 244 242); border-bottom: 1px solid rgb(39 37 31 / .15); font-size: .9rem; } .majors-admin-bar__role { display: inline-block; margin-left: .35rem; padding: 0 .5rem; border-radius: 999px; background: rgb(39 37 31 / .08); font-size: .8rem; text-transform: capitalize; } .majors-new .majors-admin-bar .nc-chip-link { background: #fff; } .majors-new .majors-admin-bar .nc-chip-link.is-current { background: rgb(39 37 31); border-color: rgb(39 37 31); color: #fff; } .majors-new .majors-admin-bar__out { margin-left: .5rem; border-style: dashed; } .majors-new .ma-editor .button, .majors-new .ma-actions .button { display: inline-flex; align-items: center; gap: .4rem; } /* ---- program details (old design; the new design uses utilities) ------- */ .majors-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; border: 2px solid #3b3b3b; padding: 1rem; margin: 1rem 0; } .majors-facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0; } .majors-facts dd { margin: 0; font-size: 1.6rem; font-weight: 900; line-height: 1.1; } .majors-new .majors-facts { display: grid; } /* Certificates listing: each half's intro, as the design system's Callout (8px yellow border) */ .majors-new .majors-callout { border: 8px solid rgb(255 219 0); padding: 1.5rem 1.75rem; margin: 1rem 0 2rem; } .majors-new .majors-callout > h3 { margin: 0 0 .75rem; } .majors-old .majors-callout { margin: 1rem 0 2rem; } .majors-cert-section + .majors-cert-section { margin-top: 3rem; } /* Inside the Program (new design): the text wraps around the photo on desktop; photo first on mobile */ .majors-new .majors-feature { display: flow-root; } .majors-new .majors-feature__media { margin: 0 0 2rem; } .majors-new .majors-feature__media img { display: block; width: 100%; height: auto; } .majors-new .majors-feature__label { margin: 0 0 1.25rem; } .majors-new .majors-feature__text > h3 { margin-top: 0; } .majors-new .majors-feature__links { margin-top: 1.5rem; } @media (min-width: 48em) { .majors-new .majors-feature__media { float: right; width: 48%; margin: .4rem 0 1.5rem 2.5rem; } } /* Full-width section: the heading sits closer to its text than a slab's default rhythm */ .majors-new .majors-band .generic-slab-content-inner-wrapper { gap: 1.25rem; } /* feature band: the body sits in its own wrapper after the h3 (so it can be edited on its own); keep prose rhythm */ .majors-new .prose .majors-body > :first-child { margin-top: 0; } .majors-new .prose .majors-body > :last-child { margin-bottom: 0; } /* ---- advisors' help page ------------------------------------------------ */ .majors-help { max-width: 70ch; } .majors-help__lead { font-size: 1.1em; } .majors-help__toc { margin: 1rem 0 2rem; padding: .75rem 1rem; background: rgb(0 0 0 / .04); font-size: .95em; line-height: 1.8; } .majors-help h2 { margin-top: 2rem; } .majors-help code { padding: 0 .3em; background: rgb(0 0 0 / .06); border-radius: 3px; font-size: .95em; } .majors-new .majors-help { max-width: none; } /* ---- print ---------------------------------------------------------------- */ @media print { @page { size: letter portrait; margin: 0.5in; } /* Hide either site's chrome (any header/footer that is not inside
) and anything marked as screen-only. Works for the old design (header.inc renders
) and the new one (