/* Outset Business program pages in the main site's 2026 design (src/clones/routes/program-refresh.astro). Loaded on those pages only, after /refresh.css (Business's menu layer). Copied from the main site, in four parts: 1. public/refresh.css 1.6 buttons, scoped to the page (.main-wrapper: on the main site they are site-wide, here the menu and footer keep Business's buttons), first so the page's own button rules below still win; 2. public/refresh/program.css as it is (hero, campus cards, popular band, marquee), the hero panel in Business's colours; 3. from public/refresh.css: the type scale (0.5), breadcrumb (1.5), the P8 "Learn More About Outset" band and the sections the page shows (P2 video, P3 curriculum, P7 included, P10 summer, P13 FAQ, P15 newsletter); 4. Business's colours. Main site -> Business colours, as in Business's menu: dark blue and mid blue (accents, links, the "Learn More" band) are Business's red-brown (its orange-red is too light for small text); turquoise (the hero burst, the Included block) is its orange-red; the hero panel is the off-white of its pages. Text on every coloured block is 4.5:1 or more (part 4 gives the figures). A main-site change to these files does not reach Business: copy it over. */ .main-wrapper { --_style-guide-2-0---outset-dark-blue: var(--_style-guide-2-0---outset-red-brown); --_style-guide-2-0---outset-mid-blue: var(--_style-guide-2-0---outset-red-brown); } /* ---- 1. from public/refresh.css ---- */ /* 1.6 Buttons: 48px box, 2px radius, 600 label (the 2px border stays so outline variants line up) */ .main-wrapper .button { min-height: 3rem; padding: .75rem 2.25rem; border-radius: 2px; font-weight: 600; line-height: 1; letter-spacing: -.02em; } .main-wrapper .button.is-link, .main-wrapper .button.is-small { min-height: 0; } .main-wrapper .button.is-link { border-radius: 0; } @media screen and (min-width: 768px) { .main-wrapper .button.is-icon { padding-left: 2.25rem; padding-right: 2.25rem; } } @media screen and (max-width: 767px) { .main-wrapper .button { padding-left: 1.5rem; padding-right: 1.5rem; } } @media screen and (max-width: 479px) { .main-wrapper .button { padding-left: 1rem; padding-right: 1rem; } } /* ---- 2. public/refresh/program.css ---- */ /* 2026 refresh: program page template (src/lib/templates/program-page.js). Spec sections 2.1 P1, P6, P11, P12. The campus template reuses the campus cards, logos strip and popular band. */ /* P1 Hero: photo 43%, panel 57%, 768px tall under the 88px bar */ .section_program-hero { padding-top: var(--nav-h); } .program-hero_component { display: flex; min-height: 48rem; border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); } .program-hero_image { position: relative; flex: none; width: 43.33%; overflow: hidden; background-color: var(--_style-guide-2-0---outset-grey); } .program-hero_image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .program-hero_panel { display: flex; align-items: center; flex: 1; padding: 4rem 3.25rem; background: #f3f7f7 url(/refresh/hero-burst-business.svg) 50% / cover no-repeat; /* Business: panel and burst (part 4) */ color: var(--_style-guide-2-0---outset-soft-black); --check-tick: var(--_style-guide-2-0---outset-off-white); } .section_program-hero.is-sand .program-hero_panel { background-color: #d7c8af; background-image: url(/refresh/hero-burst-sand.svg); } .section_program-hero.is-blue .program-hero_panel { background-color: #004fa8; background-image: url(/refresh/hero-burst-blue.svg); color: var(--_style-guide-2-0---outset-off-white); --check-tick: #004fa8; } .program-hero_content { width: 100%; max-width: 53.5rem; } .program-hero_chips { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 2.5rem 0 1.5rem; padding: 0; list-style: none; } .program-hero_chip { display: flex; align-items: center; gap: .375rem; margin: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: .875rem; font-weight: 500; line-height: 1.1429; } .program-hero_chip svg { flex: none; width: 1.125rem; height: 1.125rem; } .section_program-hero.is-blue .program-hero_heading { font-size: 4.5rem; line-height: 1; letter-spacing: -.04em; } .program-hero_intro { max-width: 35.25rem; margin-top: 1.5rem; } .program-hero_intro p { margin: 0; } .program-hero_form { max-width: 32rem; margin: 3.5rem 0 0; } .program-hero_form-row { display: flex; align-items: center; gap: .5rem; height: 4rem; margin: 0; padding: .5rem; border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); border-radius: 2px; background-color: var(--_style-guide-2-0---white); } .program-hero_form-row:focus-within { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; } .program-hero_input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 0 0 1rem; border: 0; background: transparent; color: var(--_style-guide-2-0---outset-soft-black); font-family: Marrsans Web, Arial, sans-serif; font-size: .875rem; font-weight: 500; text-transform: uppercase; } .program-hero_input::placeholder { color: #787880; } .program-hero_input:focus { outline: none; } .program-hero_submit.button { flex: none; padding-left: 1.5rem; padding-right: 1.5rem; border-color: var(--_style-guide-2-0---outset-soft-black); background-color: var(--_style-guide-2-0---outset-soft-black); } .program-hero_form .w-form-done { padding: 1rem; background-color: var(--_style-guide-2-0---white); text-align: left; } .program-hero_apply.button { display: inline-flex; margin-top: 2.5rem; min-width: 13.4375rem; } /* .button is display:flex, which fills the panel */ /* 992-1199px: the panel is 57% of the window, and a program name at full size ("Anesthesiology" at 76px is 528px) was wider than it, so the page scrolled sideways (51px at 1024px). There the name scales with the window; full size from 1200px. */ @media screen and (min-width: 992px) and (max-width: 1199px) { .program-hero_heading, .section_program-hero.is-blue .program-hero_heading { font-size: 6.2vw; } } .section_program-hero.is-sand .program-hero_apply.button { border-color: var(--_style-guide-2-0---outset-red-brown); background-color: var(--_style-guide-2-0---outset-red-brown); } .section_program-hero.is-blue .program-hero_apply.button { border-color: var(--_style-guide-2-0---outset-turquoise); background-color: var(--_style-guide-2-0---outset-turquoise); } @media screen and (max-width: 991px) { .program-hero_component { flex-direction: column; min-height: 0; } .program-hero_image { width: 100%; aspect-ratio: 4 / 3; max-height: 50vh; } .program-hero_panel { padding: 2.5rem 1.5rem 3rem; } .section_program-hero.is-blue .program-hero_heading { font-size: 3.5rem; } .program-hero_chips { margin-top: 1.5rem; } } @media screen and (max-width: 767px) { .section_program-hero.is-blue .program-hero_heading { font-size: 2.75rem; } .program-hero_form { margin-top: 2rem; } /* phone: field and button stack (the snapshot makes every .button full width below 480px) */ .program-hero_form-row { flex-wrap: wrap; height: auto; padding: 0; border: 0; background: transparent; } .program-hero_form-row:focus-within { outline: none; } .program-hero_input { flex-basis: 100%; height: 3.5rem; padding: 0 1rem; border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); border-radius: 2px; background: var(--_style-guide-2-0---white); } .program-hero_input:focus { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; } .program-hero_submit.button { width: 100%; } } @media screen and (max-width: 479px) { .program-hero_panel { padding: 2rem 1rem 2.5rem; } .section_program-hero.is-blue .program-hero_heading { font-size: 2.25rem; } .program-hero_submit.button { padding-left: 1rem; padding-right: 1rem; } .program-hero_apply.button { width: 100%; } } /* P6 / C4 campus cards: full-bleed row, 24px insets */ .section_campus-cards { padding: 5.5rem 1.5rem 4.5rem; } .campus-cards_heading { margin-bottom: 3rem; text-align: center; } .campus-cards_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; } .campus-cards_card { display: flex; flex-direction: column; gap: 1rem; color: var(--_style-guide-2-0---outset-soft-black); text-decoration: none; } .campus-cards_image { aspect-ratio: 336 / 388; overflow: hidden; border-radius: .5rem; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; } .campus-cards_image img { display: block; width: 100%; height: 100%; object-fit: cover; } .campus-cards_name { margin: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 1.3125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; transition: color .2s; } .campus-cards_card:hover .campus-cards_name, .campus-cards_card:focus-visible .campus-cards_name { color: var(--_style-guide-2-0---outset-mid-blue); } .campus-cards_card:hover .campus-cards_image, .campus-cards_card:focus-visible .campus-cards_image { outline-color: var(--_style-guide-2-0---outset-mid-blue); } .campus-cards_more { display: flex; justify-content: flex-end; margin-top: 2rem; } .icon-link_component { display: inline-flex; align-items: center; gap: 1rem; color: var(--_style-guide-2-0---outset-soft-black); font-family: Marrsans Web, Arial, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; text-decoration: none; } .icon-link_button { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background-color: var(--_style-guide-2-0---outset-mid-blue); color: var(--_style-guide-2-0---outset-off-white); transition: transform .2s; } .icon-link_component:hover .icon-link_button { transform: translateX(.25rem); } @media screen and (max-width: 991px) { .campus-cards_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 767px) { .section_campus-cards { padding: 4rem 0 3.5rem; } .campus-cards_heading { padding: 0 1rem; margin-bottom: 2rem; } .campus-cards_list { display: flex; gap: 1rem; padding: 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .campus-cards_list::-webkit-scrollbar { display: none; } .campus-cards_card { flex: none; width: 75%; scroll-snap-align: start; } .campus-cards_more { padding: 0 1rem; } } /* P11 University logos */ .section_logos { background-color: var(--_style-guide-2-0---outset-off-white); } .logos_component { display: flex; flex-direction: column; align-items: center; gap: 3rem; padding: 5.5rem 0; text-align: center; } .logos_heading { max-width: 36rem; } .logos_row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 4.5rem; margin: 0; padding: 0; list-style: none; } .logos_item { margin: 0; } .logos_image { display: block; width: auto; height: 3.75rem; max-width: 13.625rem; object-fit: contain; } .logos_disclaimer { max-width: 40rem; margin: 0; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.5556; letter-spacing: -.01em; } @media screen and (max-width: 767px) { .logos_component { gap: 2rem; padding: 4rem 0; } .logos_row { gap: 1.5rem 2.5rem; } .logos_image { height: 2.75rem; } .logos_disclaimer { font-size: 1rem; } } /* P12 Popular programs band (reuses .section_tabs for the blue band and its artwork). The text column is never narrower than its longest word: at 992-1099px the photo shrinks instead ("Neurosurgery" at 48px is 296px and ran 22px past the window at 1024px, so campus and program pages scrolled sideways). */ .tabs-2026_component { display: grid; grid-template-columns: minmax(0, 41.375rem) minmax(min-content, 1fr); align-items: center; gap: 4rem; padding: 1.5rem 1.5rem 1.5rem; } .tabs-2026_image { aspect-ratio: 662 / 648; overflow: hidden; } .tabs-2026_image img { display: block; width: 100%; height: 100%; object-fit: cover; } .tabs-2026_content { padding: 2rem 0; } .tabs-2026_eyebrow { margin-bottom: 1.5rem; color: var(--_style-guide-2-0---outset-dark-blue); } .tabs-2026_list { margin: 0 0 2.5rem; padding: 0; list-style: none; } .tabs-2026_list > li { margin: 0; } .tabs-2026_content .button { display: inline-flex; } .tabs-2026_link { display: inline-block; color: var(--_style-guide-2-0---outset-off-white); font-family: Marrsans Web, Arial, sans-serif; font-size: 3rem; font-weight: 600; line-height: 1.1667; letter-spacing: -.03em; text-decoration: none; transition: color .2s; } .tabs-2026_link:hover, .tabs-2026_link:focus-visible { color: var(--_style-guide-2-0---outset-dark-blue); } @media screen and (max-width: 991px) { .tabs-2026_component { grid-template-columns: 1fr; gap: 2rem; padding: 1rem 1rem 3rem; } .tabs-2026_link { font-size: 2.25rem; } } @media screen and (max-width: 479px) { .tabs-2026_link { font-size: 1.875rem; } } /* P4 Marquee: no heading (partial), 3:4 cards */ .section_marquee .vertial-card_marquee { aspect-ratio: 3 / 4; width: 17.375rem; max-width: none; } @media screen and (max-width: 767px) { .section_marquee .vertial-card_marquee { width: 13rem; min-height: 0; } } /* ---- 3. from public/refresh.css ---- */ /* Inline email forms (email box + button in one grey bar): the semibold 2026 label is wider, so the button gives the field its room back */ .submit_button-wrap .button { padding-left: 1.25rem; padding-right: 1.25rem; } @media screen and (min-width: 768px) { .hero_form-wrap { max-width: 26rem; } } /* "Email Address" fits beside the brochure button */ /* 0.5 Type scale */ .heading-style-display, .heading-style-cta, .heading-style-band, .heading-style-quote { margin: 0; font-family: Marrsans Web, Arial, sans-serif; font-weight: 600; letter-spacing: -.03em; } .heading-style-display { font-size: 4.75rem; line-height: .95; } .heading-style-cta { font-size: 4rem; line-height: 1.125; } .heading-style-band { font-size: 3rem; line-height: 1.1667; } .heading-style-quote { font-size: 2.25rem; line-height: 1.2222; } .heading-style-section { margin: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 2.25rem; font-weight: 300; line-height: 1.2222; letter-spacing: -.02em; } .text-size-body-large { font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.5556; letter-spacing: -.01em; } .text-style-eyebrow-2026 { font-family: Marrsans Web, Arial, sans-serif; font-size: .75rem; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: uppercase; } @media screen and (max-width: 991px) { .heading-style-display { font-size: 3.5rem; } .heading-style-cta { font-size: 3rem; } .heading-style-band { font-size: 2.5rem; } } @media screen and (max-width: 767px) { .heading-style-display { font-size: 2.75rem; line-height: 1; } .heading-style-cta { font-size: 2.5rem; } .heading-style-band { font-size: 2rem; } .heading-style-section, .heading-style-quote { font-size: 1.75rem; } } @media screen and (max-width: 479px) { .heading-style-display, .heading-style-cta { font-size: 2.25rem; } .heading-style-band { font-size: 1.75rem; } .heading-style-section { font-size: 1.625rem; } .heading-style-quote { font-size: 1.5rem; } } /* 1.5 Breadcrumb: