/* ===================================================================== BRAND TOKENS — the single place to match Baylor / ECS brand standards. Update these values when official specs are confirmed; everything else in this file references them. Asset files live in assets/branding/ (see assets/branding/README.md). ===================================================================== */ :root { /* --- Brand colors --- */ --baylor-green: #154734; /* PMS 5535 */ --baylor-green-light: #1d6b4f; --baylor-gold: #ffb81c; /* PMS 1235 */ /* --- Brand fonts (see @font-face placeholder below) --- */ --brand-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --brand-font-serif: Georgia, "Times New Roman", serif; /* --- UI palette (derived) --- */ --ink: #1f2421; --muted: #5d6b63; --line: #d7ddd8; --bg: #eef1ee; --panel: #ffffff; --credit: #2e7d32; --credit-bg: #d7f0d8; /* Content width cap. Matches the Baylor header, whose .region-header and .region-primary-menu are max-width:1400px centred, so the tool's panels line up with the logo and menu above them instead of running wider. */ --content-max: 1400px; --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04); } /* ---- BRAND FONTS (placeholder) --------------------------------------- Baylor's brand typefaces (Verlag sans / Calluna serif) are licensed and are NOT bundled. When the licensed web-font files are available, drop the .woff2 files in assets/branding/fonts/, un-comment the block below, then point --brand-font-sans / --brand-font-serif at them. @font-face { font-family: "Verlag"; src: url("../assets/branding/fonts/Verlag-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Verlag"; src: url("../assets/branding/fonts/Verlag-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Calluna"; src: url("../assets/branding/fonts/Calluna-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } --------------------------------------------------------------------- */ /* Box-sizing reset scoped to THIS tool's own containers only. A global `* { box-sizing: border-box; }` also hit the Baylor site header this page is embedded under and shrank its logo (the logo is sized for the default content-box). The Baylor header uses its own ids (#baylor_header, #branding, #block-mainnavigation, .dialog-off-canvas-main-canvas), so it is untouched. */ .app-header, .app-header *, .layout, .layout * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: var(--brand-font-sans); color: var(--ink); background: var(--bg); } /* Header — tool title only. Baylor's site header/nav/branding is provided by the host site's template, so there is no green university bar here; just a plain titled band that names the tool and holds the degree picker. */ .app-header { width: calc(100% - 32px); max-width: var(--content-max); margin: 16px auto 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .app-title { min-width: 0; } .app-header h1 { font-size: 22px; margin: 0; line-height: 1.15; color: var(--baylor-green); } .tagline { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 720px; line-height: 1.4; } /* Chart pickers — catalog year, degree and (optional) name, sitting directly above the chart they drive. Labels match the panel headers on the left. */ .pickers { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(260px, 2fr); gap: 10px; margin: 0 0 14px; } .picker { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .picker label { font-size: 12px; font-weight: 700; color: var(--baylor-green); } .picker select, .picker input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 14px; } .picker select { cursor: pointer; } .picker select:focus, .picker input:focus { outline: 2px solid var(--baylor-green-light); border-color: transparent; } @media (max-width: 760px) { .pickers { grid-template-columns: 1fr; } } /* "optional" tag on a label or panel heading */ .opt { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #eef2ef; border-radius: 4px; padding: 1px 5px; vertical-align: middle; } /* Buttons */ .btn { padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; background: var(--baylor-gold); color: var(--baylor-green); font-weight: 700; font-size: 13px; cursor: pointer; } .btn:hover { filter: brightness(.96); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-ghost { background: transparent; border: 1px dashed var(--line); color: var(--baylor-green); width: 100%; font-weight: 600; } .btn-ghost:hover:not(:disabled) { background: #f0f4f1; } /* Layout */ /* One column: the credit-entry sidebar is currently hidden (see legacy/credit-panels.html to restore it and its two-column rule). */ .layout { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; align-items: start; max-width: calc(var(--content-max) + 32px); margin: 0 auto; } .col-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Panels */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; } .panel-head h2 { margin: 0 0 4px; font-size: 15px; color: var(--baylor-green); } .panel-sub { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.4; } .panel-sub a { color: var(--baylor-green-light); font-weight: 600; } .subhead { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 14px 0 8px; } .muted { color: var(--muted); } .small { font-size: 12px; } code { background: #eef2ef; padding: 1px 5px; border-radius: 4px; font-size: 11px; } /* --------------------------------------------------------------------- MARKING TOOLBAR — the heart of the tool, and the reason it sits directly above the chart: the chosen mark is what a click on a box applies, so the two belong next to each other. Each button shows the real mark rather than describing it, so the toolbar, the legend and the printed page all agree. --------------------------------------------------------------------- */ .marktools { border: 1px solid var(--baylor-green); border-radius: var(--radius); background: #f8faf9; padding: 10px 12px; margin: 0 0 12px; } .marktools-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; } .marktools-head h2 { margin: 0; font-size: 15px; color: var(--baylor-green); } .marktools-sub { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; } /* Flex, not a fixed grid: the Planned cell carries a colour dropdown as well as its button, so it needs to claim more room than the others. */ .mark-modes { display: flex; flex-wrap: wrap; gap: 8px; } .mode-cell { display: flex; gap: 6px; flex: 1 1 165px; min-width: 0; } .mode-cell-picker { flex: 1 1 210px; } .mode { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); } .mode:hover { background: #f2f6f3; } .mode.is-active { border-color: var(--baylor-green); background: #eaf2ed; box-shadow: inset 0 0 0 1px var(--baylor-green); } .mode .glyph { width: 32px; height: 23px; flex: none; } .mode-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mode-short, .narrow-only { display: none; } /* Colour picker, used by any mark that has colours (the planned circle and the summer S). Sits against its button so the pair reads as one control: which mark, and in which colour. The colours are the student's own shorthand for separating terms, so the picker shows the marks themselves — no names to read past. */ .mode-cell-picker { position: relative; } .swatch-trigger { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 0 8px 0 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; } .swatch-trigger:hover { background: #f2f6f3; } .swatch-trigger[aria-expanded="true"] { border-color: var(--baylor-green); box-shadow: inset 0 0 0 1px var(--baylor-green); } .swatch-trigger:focus-visible { outline: 2px solid var(--baylor-green-light); outline-offset: 1px; } .swatch-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--muted); } .ring { width: 24px; height: 24px; display: block; } .swatch-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.14); } .swatch-menu[hidden] { display: none; } .swatch { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; } .swatch:hover { background: #f2f6f3; } .swatch.is-sel { border-color: var(--baylor-green); background: #eaf2ed; } .swatch:focus-visible { outline: 2px solid var(--baylor-green-light); outline-offset: 1px; } .marktools-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .btn-clear { width: auto; flex: none; font-size: 12px; padding: 6px 12px; } kbd { display: inline-block; padding: 0 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: #fff; font: 600 10px/16px var(--brand-font-sans); color: var(--muted); } /* --------------------------------------------------------------------- COLLAPSIBLE CREDIT PANELS — currently unused: the Dual/Transfer and Exam Credit panels are not rendered (their markup is parked in legacy/credit-panels.html). These rules are kept so restoring the panels is a markup change only.
supplies the open/close behaviour, so there is no state to script and it works the same stacked on a phone as it does in the sidebar — the header stays put and the body opens beneath it. --------------------------------------------------------------------- */ .panel-credit { padding: 0; } .panel-summary { display: flex; align-items: center; gap: 8px; padding: 13px 14px; cursor: pointer; list-style: none; user-select: none; } .panel-summary::-webkit-details-marker { display: none; } /* replaced by the chevron below */ /* Chevron: points down while closed (expand), up while open (collapse). A box showing only its right and bottom borders is an "L" whose corner points down- right, so +45deg swings that corner to straight down and -135deg to straight up. */ .panel-summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .panel-credit[open] > .panel-summary::after { transform: translateY(2px) rotate(-135deg); } .panel-summary:hover { background: #f6f8f6; } .panel-summary:focus-visible { outline: 2px solid var(--baylor-green-light); outline-offset: -2px; } .summary-title { font-size: 15px; font-weight: 700; color: var(--baylor-green); } .panel-credit[open] > .panel-summary { border-bottom: 1px solid var(--line); } .panel-body { padding: 12px 14px 14px; } .panel-body .panel-sub { margin-bottom: 12px; } /* Fields */ .field { margin-bottom: 10px; } .field label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; } .field select, .field input { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: #fff; } .field select:focus { outline: 2px solid var(--baylor-green-light); border-color: transparent; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .add-course { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; } .status { font-size: 11px; color: var(--muted); min-height: 14px; margin: 6px 0; } .status.loading::after { content: " …"; } .dc-equiv { font-size: 12px; margin: 4px 0 8px; min-height: 16px; } .dc-equiv .ok { color: var(--credit); font-weight: 700; } .dc-equiv .none { color: #b23b3b; } /* Chips */ .chip-list { display: flex; flex-direction: column; gap: 6px; } .chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f6f8f6; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; } .chip .chip-main { min-width: 0; } .chip .chip-from { color: var(--muted); } .chip .chip-to { font-weight: 700; color: var(--credit); } .chip .chip-x { border: none; background: none; color: #b23b3b; font-size: 16px; cursor: pointer; line-height: 1; } /* Exam tabs */ .exam-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .tab { flex: 1; padding: 7px; border: 1px solid var(--line); background: #f6f8f6; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; } /* "is-active" rather than a bare "active": the host page's stylesheet styles .active generically (gold border + a 2000px-wide ::after rule that stretched the page sideways), so the tool namespaces its own state class. */ .tab.is-active { background: var(--baylor-green); color: #fff; border-color: var(--baylor-green); } .exam-tab-body { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow-y: auto; padding-right: 4px; } .exam-tab-body.hidden { display: none; } .exam-row { display: grid; grid-template-columns: 1fr 132px; gap: 6px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #eef2ef; } .exam-name { font-size: 12px; font-weight: 600; } .exam-row select { width: 100%; padding: 6px; font-size: 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; } .exam-grant { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: var(--credit); background: var(--credit-bg); padding: 4px 8px; border-radius: 6px; } .exam-grant.hidden { display: none; } /* Right column */ .col-right { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; min-width: 0; display: flex; flex-direction: column; } .flow-title { text-align: center; font-size: 16px; color: var(--baylor-green); margin: 0 0 10px; } /* The stage never grows past the screen: at Fit the chart sits inside it whole, and zoomed in the chart pans within it (JS sets its max-height and the canvas width — see applyZoom). */ /* Hugs the chart (fit-content), so on a wide screen the frame is the chart's size rather than a wide white panel with the chart floating in it. */ /* The chart doesn't scroll inside anything — it simply takes the room it needs and the page scrolls, so there is only ever one scrollbar on screen. On a wide screen zoom is capped to the column, so the page only ever grows taller; on a phone the chart may go wider than the screen and the page scrolls sideways, where the mark bar is fixed and stays put anyway. */ .flow-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; } /* Strip under the chart: the hovered box's name on the left, zoom on the right. Zoom lives here rather than floating over the chart, where it covered the top-right boxes (on most charts, the capstone). */ .flow-under { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; } .flow-under .flow-hint { margin: 0; flex: 1 1 auto; min-width: 0; } .zoom-note[hidden] { display: none; } .zoom-controls { flex: none; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); } .zoom-btn { min-width: 36px; height: 34px; padding: 0 10px; border: none; border-left: 1px solid var(--line); background: #fff; color: var(--baylor-green); font: 700 17px/1 var(--brand-font-sans); cursor: pointer; } .zoom-btn:first-child { border-left: none; } .zoom-btn:hover:not(:disabled) { background: #f0f5f2; } .zoom-btn:disabled { color: #b8c0bb; cursor: default; } .zoom-btn:focus-visible { outline: 2px solid var(--baylor-green-light); outline-offset: -2px; } .zoom-fit { font-size: 12px; } .flow-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; background: rgba(255,255,255,.85); } .flow-loading.hidden { display: none; } .flow-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .footer-right { display: flex; align-items: center; gap: 14px; } /* Legend shows the marks themselves, so the printed copy and the screen agree. */ .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--muted); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .legend .glyph { width: 30px; height: 21px; } /* Name of the box under the pointer — confirms what a click will hit. */ .flow-hint { min-height: 18px; margin: 6px 2px 10px; font-size: 12px; color: var(--muted); } .disclaimer { margin: 0 0 14px; padding: 12px 14px; box-sizing: border-box; background: #fff8d6; border: 1px solid #e2c85a; border-left: 5px solid var(--baylor-gold); border-radius: 8px; font-size: 13.5px; line-height: 1.5; color: #4a4636; } .disclaimer strong { color: var(--baylor-green); } /* Annotation mode (admin) */ #anno-panel { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fbfdfb; } #anno-panel.hidden { display: none; } .anno-head { font-weight: 700; color: var(--baylor-green); margin-bottom: 6px; font-size: 14px; } .anno-help { font-size: 11px; color: var(--muted); margin: 4px 0 10px; line-height: 1.4; } .anno-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .anno-row .anno-n { width: 18px; font-size: 12px; font-weight: 700; color: var(--muted); } .anno-row select { flex: 1; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; } .anno-row input[type=number] { width: 52px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; } .anno-del { border: none; background: none; color: #b23b3b; font-size: 16px; cursor: pointer; line-height: 1; } .anno-actions { display: flex; gap: 8px; margin: 10px 0 4px; } .anno-actions .btn { width: auto; } /* --------------------------------------------------------------------- WIDE SCREENS. The toolbar sticks to the top of the window while the chart scrolls beneath it, and the chart itself is fitted to the space left below the toolbar — so every box and the tool that marks it are on screen at once. (Nothing of Baylor's is pinned at these widths, so top: 0 is clear.) --------------------------------------------------------------------- */ @media (min-width: 761px) { .marktools { position: sticky; top: 0; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,.06); } } /* --------------------------------------------------------------------- MID WIDTHS (tablets, narrow windows). The toolbar still sticks here, so it has to stay one row: wrapped to two-per-row it grew to three rows and held a fifth of a tablet screen. Short labels ("Earned", "Now") make five fit, with the two picker cells given the extra room their colour trigger needs. --------------------------------------------------------------------- */ @media (max-width: 950px) and (min-width: 761px) { .mode-cell { flex: 1 1 0; } .mode-cell-picker { flex: 1.4 1 0; } .mode { gap: 7px; padding: 8px; font-size: 12.5px; } .mode .glyph { width: 26px; height: 19px; } .mode-label, .keyhint { display: none; } .mode-short { display: inline; } } /* --------------------------------------------------------------------- PHONES. The chart opens fitted to the screen's width — the whole chart, no sideways scrolling — with zoom for precise tapping. The five mark buttons leave the page and become a bar fixed to the bottom of the screen, so the tool is always a thumb's reach away however far the chart is panned. Baylor pins its own 51px header to the top at these widths; the bar lives at the bottom and the stage is sized around both, header untouched. --------------------------------------------------------------------- */ @media (max-width: 760px) { :root { --bar-h: 62px; } .wide-only, .mode-label, .keyhint { display: none; } .narrow-only, .mode-short { display: inline; } .mark-modes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.10); } .mode-cell, .mode-cell-picker { display: block; position: relative; min-width: 0; flex: none; } .mode { width: 100%; height: 50px; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px; font-size: 11px; text-align: center; } .mode .glyph { width: 28px; height: 20px; } .mode-short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* The colour trigger shrinks to a caret badge in the button's corner. Tapping the already-selected mark opens the same menu, which is the easier target. */ .swatch-trigger { position: absolute; top: 0; right: 0; width: 26px; height: 26px; padding: 0; justify-content: center; border: none; background: transparent; } .swatch-trigger .ring { display: none; } .swatch-trigger[aria-expanded="true"] { box-shadow: none; } .swatch-caret { border-top-color: var(--baylor-green); } /* Menus open upward from the bar, centred, so they never run off an edge. */ .swatch-menu { position: fixed; top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-h) + 10px + env(safe-area-inset-bottom)); /* max-content: a fixed box anchored at left:50% otherwise shrinks to the half-screen right of centre and wraps the swatches onto two rows. */ width: max-content; max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; } /* Every pixel of width goes to the chart: slimmer side gutters than on a wide screen, kept equal for the title band and the panel so they align. And room under the page for the bar, so it never covers Download. */ .app-header { width: calc(100% - 16px); } .layout { padding: 12px 8px calc(16px + var(--bar-h) + env(safe-area-inset-bottom)); } .col-right { padding: 10px 8px; } /* The one place the chart still scrolls inside itself. The host page sets overflow-x: hidden on , so a chart wider than the screen can't be reached by scrolling the page — it would simply be cut off. A finger pans the chart directly, and touch scrollbars are overlays, so this doesn't put a second scrollbar on screen the way the old desktop frame did. */ .flow-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .flow-hint::before { content: "Tap a box to mark it. Use + to zoom in for easier tapping. "; } } /* ===================================================================== EMBEDDED BAYLOR HEADER — adjustments for the assets/header.html include. header.html is only the TOP slice of an ECS page (it ends at ), so two things a real ECS page has are missing: Baylor's theme JavaScript (normally loaded just before ) and the mobile menu panel (#mobile__nav). That causes two problems this block fixes: 1) OFF-SCREEN SEARCH PANEL ADDED PAGE WIDTH. Baylor parks #header_search at translateX(2000px) and slides it in on click. With nothing clipping it here it stuck out ~2500px, contributing to the sideways scroll and zoom-out on mobile. (The other cause was a class-name collision on ".active" — see the .tab.is-active note above.) 2) DEAD CONTROLS. The magnifier and hamburger only work when Baylor's JavaScript is present, so they are hidden instead of left to be tapped with no result. (The hamburger also has no #mobile__nav to open.) TO RESTORE THE REAL HEADER BEHAVIOR: get the bottom portion of the ECS template (the closing markup +