/* ===================================================================== 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; --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 { margin: 16px 16px 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; } /* Degree picker — label matches the section headers (Exam Credit, Dual/Transfer) and sits at the top; the dropdown drops to the next line beneath it. */ .degree-picker { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 16px; } .degree-picker label { font-size: 15px; font-weight: 700; color: var(--baylor-green); } #flowchart-select { width: 100%; max-width: 560px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 15px; cursor: pointer; } #flowchart-select:focus { outline: 2px solid var(--baylor-green-light); border-color: transparent; } /* 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 */ .layout { display: grid; grid-template-columns: minmax(320px, 0.8fr) 2fr; gap: 16px; padding: 16px; align-items: start; } .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; } /* 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; } .flow-stage { position: relative; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; } #flow-canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; } .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; } .credit-summary { font-size: 13px; color: var(--baylor-green); font-weight: 700; } .footer-right { display: flex; align-items: center; gap: 14px; } .legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); } .legend .swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--credit-bg); border: 1px solid var(--credit); display: inline-block; } .disclaimer { margin: 0 0 14px; padding: 12px 14px; 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; } @media (max-width: 950px) { .layout { grid-template-columns: 1fr; } } /* ===================================================================== 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 +