/* ============================================================================ brand.css — Carnegie 2026 site redesign (applicant + reviewer portals) ---------------------------------------------------------------------------- Override sheet, loaded LAST in each master . Implements the "Carnegie site redesign" mock (docs/assets/Carnegie site redesign): - Oswald (display / eyebrows) + Lora (body serif), Google Fonts - electric blue #4050F0 on a warm off-white ground #FBFCF7 - slim cream header with a 1px hairline; slim single-row black footer - full-height BLUE left sidebar nav with the off-white logo watermark - white cards (14px radius, #ECE7DC hairlines), rounded inputs, pill buttons, tinted status pills, soft-yellow deadline callouts - split-panel "hero + form" login / register screens (.auth-split) Structure hooks live in the masters (.brand-*) and the auth pages (.auth-*). Everything else re-skins the legacy theme classes in place. ========================================================================== */ :root { --brand-blue: #4050f0; --brand-blue-d: #2e3cc8; --brand-blue-t: #edefff; --brand-ink: #131212; --brand-body: #56525b; --brand-faint: #8d8a82; --brand-faint-2: #9a958b; --brand-label: #6e6a73; --brand-ground: #fbfcf7; --brand-white: #ffffff; --brand-line: #ece7dc; /* card hairline */ --brand-line-hd: #e7e1d5; /* header hairline */ --brand-line-in: #e0dace; /* input border */ --brand-line-sec: #eee9de; /* section rule */ --brand-cream: #fbf4d2; /* deadline callout */ --brand-cream-ln: #ece4c2; --brand-footer: #0c0c0c; --brand-sidebar-w: 252px; --brand-serif: "Lora", Georgia, "Times New Roman", serif; --brand-display: "Oswald", "Arial Narrow", sans-serif; } /* ---- base ---------------------------------------------------------------- */ html { scrollbar-gutter: stable; } /* identical layout width with or without a scrollbar */ body { font-family: var(--brand-serif); color: var(--brand-ink); background: var(--brand-ground); -webkit-font-smoothing: antialiased; accent-color: var(--brand-blue); /* native radios / checkboxes in brand blue */ } a { color: var(--brand-blue); } a:hover, a:focus { color: var(--brand-blue-d); } /* ---- flexbox sticky footer ------------------------------------------------ */ #wrapper { background: var(--brand-ground) !important; min-height: 100vh; padding-bottom: 0 !important; display: flex; flex-direction: column; } #main { flex: 1 0 auto; display: flex; } /* ---- header: slim cream band with hairline -------------------------------- */ #header { background: var(--brand-ground) !important; border-bottom: 1px solid var(--brand-line-hd) !important; } .colored-bg, .colored-bg.top, #header .colored-bg, #header .colored-bg.top { background: transparent !important; height: 0 !important; border: 0 !important; } #header .main-header--wrap { background: var(--brand-ground) !important; } #header .main-header, #header .main-header.D-border { background: var(--brand-ground) !important; border: 0 !important; height: auto !important; max-width: none; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 40px; min-height: 0; flex-wrap: wrap; } #header .main-header > *, #header .main-header--wrap, .main-header__program--title { border: 0 !important; } .D-border { border: 0 !important; height: auto !important; } #header .main-header .logo { border: 0 !important; flex: none; height: auto !important; width: auto !important; padding: 0 !important; margin: 0 !important; line-height: 0; } #header .main-header .logo img, #header .main-header .logo img.svg { height: 34px; width: auto; max-width: none; display: block; } /* legacy mobile menu (menuMobile.ascx): redundant in the redesign — portal nav stacks the blue sidebar on mobile, auth screens use the header nav */ #header .main-nav { display: none !important; } /* program title, right-aligned (portal chrome) */ .main-header__program--title { font-family: var(--brand-serif) !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: #46434b !important; margin: 0 0 0 auto !important; text-align: right; } /* anonymous header nav (shown only on .auth-split screens) */ .brand-header--nav { display: none; align-items: center; gap: 28px; margin-left: auto; } .brand-header--nav a { font-family: var(--brand-serif); font-weight: 500; font-size: 16px; color: var(--brand-body); text-decoration: none; } .brand-header--nav a:hover { color: var(--brand-blue); text-decoration: none; } .brand-header--nav a.sel { font-weight: 600; color: var(--brand-ink); } .brand-header--nav a .ext { font-size: 12px; opacity: .6; } body:has(.auth-split) .brand-header--nav, body:has(.anon-page) .brand-header--nav { display: flex; } body:has(.auth-split) .main-header__program--title, body:has(.anon-page) .main-header__program--title { display: none !important; } /* ---- main shell: blue sidebar + content column ---------------------------- */ #main.brand-main { padding: 0; margin: 0; } /* main.css gives #main 20px padding */ .brand-main { display: flex; align-items: stretch; width: 100%; min-height: 0; } .brand-menu-btn { margin: 0 0 8px; } .brand-menu-btn .open-nav { float: none; display: inline-block; color: var(--brand-ink); } .brand-content { flex: 1 1 auto; min-width: 0; padding: 42px 52px 52px; } /* the old bootstrap-grid classes are neutralized inside the new shell */ .brand-main .container, .brand-main .container.third, .brand-main .holder-container, .brand-main .holder-container2, .brand-main .content { background: transparent !important; width: auto; max-width: none; padding: 0; margin: 0; } .brand-main .brand-page { max-width: 980px; } /* sidebar */ .left-nav.brand-sidebar, nav.brand-sidebar { width: var(--brand-sidebar-w); flex: none; background: var(--brand-blue); padding: 30px 18px 24px; display: flex; flex-direction: column; float: none; } .brand-sidebar--eyebrow { font-family: var(--brand-display); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #b3bcff; margin: 0 0 16px 14px; } .brand-sidebar--logo { width: 184px; max-width: 90%; opacity: .2; margin: 24px 0 0 6px; flex: none; align-self: flex-start; } .brand-sidebar--spacer { flex: 1 1 auto; min-height: 24px; } /* menu list (rendered by menu.ascx) — legacy css hides it on mobile; always show */ .brand-sidebar .left-nav--list { list-style: none; margin: 0; padding: 0; display: block !important; } .brand-sidebar .left-nav--select { display: none !important; } /* the legacy mobile