/* ============================================================ Hofstra program pages — unified stylesheet. Replaces every inline style that used to live in the legacy product-page markup (see scripts/extract_programs.php mapping) and adds cross-page layout unification. Background-image classes are generated separately in program-bg.css. ============================================================ */ /* ---- carried over from the legacy pages' style block ---- */ .navbar .navbar-collapse.collapse { flex: auto; } /* ---- state ---- */ .is-hidden { display: none; } /* ---- utilities replacing inline styles ---- */ .u-fs-12 { font-size: 12px; } .u-fs-13 { font-size: 13px; } .u-fs-14 { font-size: 14px; } .u-fs-16 { font-size: 16px; } .u-fs-18 { font-size: 18px; } .u-fs-20 { font-size: 20px; } .u-fs-21 { font-size: 21px; } .u-fs-22 { font-size: 22px; } .u-fs-30 { font-size: 30px; } .u-fs-2rem { font-size: 2rem; } .u-lh-30 { line-height: 30px; } .u-sym { font-size: 35px; vertical-align: baseline; position: relative; top: 5px; line-height: 1; } .u-sym-lower { top: 11px; } .u-text-left { text-align: left !important; } .u-text-center { text-align: center; } .u-underline { text-decoration: underline; } .u-bold { font-weight: bold; } .u-pos-rel { position: relative; } .u-pointer { cursor: pointer; } .u-w-120 { width: 120px; } .u-w-80 { width: 80px; } .u-w-25p { width: 25%; } .u-avatar-sm { width: 69px; border-radius: 54px; margin-right: 12px; } .u-pt-0 { padding-top: 0; } .u-pb-0 { padding-bottom: 0; } .u-px-8 { padding-left: 8px; padding-right: 8px; } .u-icon-pad { padding: 7px; margin-right: 10px; } .u-m-0 { margin: 0; } .u-mb-0 { margin-bottom: 0; } .u-mb-20 { margin-bottom: 20px; } .u-mb-34 { margin-bottom: 34px; } .u-ml-14 { margin-left: 14px; } .u-form-alert { margin: -5px 0 15px 0; } .u-list-disc { list-style: disc; margin-left: 16px; } .u-bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; } /* ---- utilities for the rebuilt .php pages (career, SST, property mgmt) ---- */ .u-block { display: block; } .u-ruby-text { display: ruby-text; } .u-fs-23 { font-size: 23px; } .u-fs-35 { font-size: 35px; } .u-fs-08rem { font-size: 0.8rem; } .u-fs-09rem { font-size: 0.9rem !important; } .u-fw-normal { font-weight: normal; } .u-lh-19 { line-height: 19px; } .u-lh-normal { line-height: normal; } .u-ls-4 { letter-spacing: 4px; } .u-blue { color: #00afef; } .u-orange { color: orange; } .u-text-red { color: red; } .u-text-white { color: #fff; } .u-bg-black { background: #000; } .u-bg-white { background: #fff; } .u-bg-soft { background: #f3f7fd; } .u-bg-pos-hero { background-position: 10% 76%; } .u-bg-size-100 { background-size: 100%; } .u-bg-cover-shift { background-size: cover; background-position: 0 -197px; } .u-mt-10 { margin-top: 10px; } .u-mr-13 { margin-right: 13px; } .u-mb-5 { margin-bottom: 5px; } .u-mb-8 { margin-bottom: 8px; } .u-mb-1rem { margin-bottom: 1rem; } .u-pt-7 { padding-top: 7px; } .u-pad-90-30 { padding: 90px 30px; } .u-h-147 { height: 147px; } .u-w-90 { width: 90px; } .u-w-150 { width: 150px; } .u-w-159 { width: 159px; } .u-bottom-1 { bottom: 1px; } .u-right-1 { right: 1px; } .u-left-auto { left: auto; } .u-right-95 { right: 95%; } .u-overflow-hidden { overflow: hidden !important; } .u-btn-brand-lg, .u-btn-brand-sm { background: linear-gradient(0deg, var(--uni_color_quaternary) 0%, var(--uni_color_primary) 100%) !important; border-color: var(--uni_color_primary); color: #fff; border-radius: 0; } .u-btn-brand-lg { padding: 10px 30px; } .u-btn-brand-sm { padding: 3px 15px; } .u-badge-red { background: red; color: #fff; padding: 3px 15px; border-radius: 0; } .u-list-disc-65 { list-style: disc; margin-left: 65px; } .u-list-disc-sm { list-style: disc; margin-left: 18px; font-size: 12px; line-height: normal; } /* ============================================================ Unification fixes — alignment consistency across program pages. (Deliberately conservative: the theme's own spacing/typography scale stays in charge; these rules only fix what was visibly broken — stacked panes, unequal card heights, overflow.) ============================================================ */ /* Feature/course boxes: equal heights. Bootstrap 4 rows are already flex, so stretching the box to its column height is all that's needed — forcing the columns themselves to flex broke unrelated content (e.g. the sticky request-info form laid its button and consent text out side-by-side). */ .default-features-area .item, .default-features-area .item-box, .bootcamp-courses .item, .categories-area .item { height: 100%; } /* "Bootcamp Outcomes" block (bootcamps_works_area): the theme gives the three icon items no layout at all, so they crowd together right under the intro paragraph. Lay them out as spaced cards; wraps to stacked cards on mobile. */ .bootcamps_works_area .top-info { margin-top: 2.5rem; } .bootcamps_works_area .top-info ul { display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; list-style: none; } .bootcamps_works_area .top-info ul li { display: flex; align-items: center; flex: 1 1 180px; padding: 14px 18px; background-color: #fff; box-shadow: 1px 4px 20px -2px rgb(0 0 0 / 10%); border-radius: 6px; } .bootcamps_works_area .top-info ul li .thumb { margin-right: 15px; flex-shrink: 0; } /* The label is split across a and an
("Virtual Office" + "Hours"); the longer third label wrapped and made that card taller than the others. Flow both parts as one line with identical type so all cards match. */ .bootcamps_works_area .top-info ul li .info { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; } .bootcamps_works_area .top-info ul li .info span, .bootcamps_works_area .top-info ul li .info h5 { font-size: 16px; font-weight: 700; color: #232323; margin: 0; line-height: 1.3; } /* Program stats block (Program Length / Category / Certification): 9 pages still carry the legacy stacked-list markup while the rest were modernized into three centered stat tiles (ul.row.row-cols-md-3). Render the legacy variant the same way: three tiles, icons hidden (the theme already hid all but the first icon anyway), value above label. Modern markup is untouched. */ /* A stats row with fewer than three tiles (python-development has two) centers instead of leaving a lopsided gap; full rows are unaffected. */ .become_professional .top-info > ul.row { justify-content: center; } .become_professional .top-info > ul:not(.row) { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0; list-style: none; } .become_professional .top-info > ul:not(.row) > li { flex: 1 1 160px; text-align: center; padding: 20px 16px; margin: 0; } .become_professional .top-info > ul:not(.row) > li .thumb { display: none; } .become_professional .top-info > ul:not(.row) > li .info { display: flex; flex-direction: column; } .become_professional .top-info > ul:not(.row) > li .info h5 { order: 1; margin-bottom: 2px; } .become_professional .top-info > ul:not(.row) > li .info span { order: 2; display: block; } .become_professional .top-info > ul:not(.row) > li .info .dataToggle { order: 3; } /* SST course tiles: the quick-view box pops to the RIGHT of its tile (page CSS: left: 95%), which pushes it off-screen for tiles in the rightmost column. Flip every third tile's box to open leftward — the legacy page hand-patched only one of the two rightmost tiles. */ .individual-box:nth-of-type(3n) .individual-hover-box { left: auto; right: 95%; } /* Duration switcher: only the active pane shows (legacy rendered every pane stacked because the hofstra pages never hid them); program.js switches. */ .course-details-area .tabData { display: none; } .course-details-area .tabData.active { display: block; } [data-tab-id] { cursor: pointer; } /* Modality / event boxes aligned */ .event-area .event-box { height: 100%; } /* Lead form: the theme's .register-area rules own the styling; only make sure the success alert doesn't collide with the button. */ .requestInfoLeadFormV2 .alert { margin-top: 8px; } /* Stats-row tiles: identical internal layout for ALL FOUR tiles — content centered both ways so the enroll tile lines up with its three siblings. The theme's `.top-info ul li { margin-bottom: auto }` cancels flex equal-height stretch (each tile collapses to its content height) — the same-specificity override below wins by cascade order and restores it. */ .course-details-area.become_professional .top-info ul li { margin-bottom: 0; display: flex; align-items: stretch; } .become_professional .top-info ul { align-items: stretch; } .become_professional .top-info ul li .info { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; width: 100%; flex: 1; } /* Enroll tile — compact so its height matches the other tiles */ .hc-enroll-amount { font-size: 18px; margin: 0 0 8px; color: #232323; font-weight: 700; } .hc-enroll-amount .hc-enroll-strike { color: #999; text-decoration: line-through; font-size: 13px; font-weight: 400; } .hc-enroll-li .hc-enroll-btn { display: inline-block; width: auto; padding: 8px 18px; font-size: 13px; } /* "Choose your Learning Track" box — button under the price */ .hc-track-enroll { margin: 12px 0 16px; } /* pricing-table variant (pharmacy/sterile/surgical): the button is the last table row, in the price column right under "Pay in Full" */ .hc-enroll-row td { padding: 14px 10px; text-align: center; border-top: 1px solid #eee; } .hc-enroll-row .hc-enroll-btn { display: inline-block; width: auto; padding: 10px 26px; font-size: 14px; } .hc-track-enroll .hc-enroll-btn { display: inline-block; width: auto; padding: 10px 24px; font-size: 14px; } /* Hero banner Enroll Now — price + button directly under the program title */ .hc-hero-enroll { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .hc-hero-price { font-size: 24px; font-weight: 700; color: #fff; } .hc-hero-price .hc-enroll-strike { color: rgba(255, 255, 255, 0.65); text-decoration: line-through; font-size: 16px; font-weight: 400; } .hc-hero-enroll .hc-enroll-btn { display: inline-block; width: auto; padding: 12px 28px; font-size: 14px; } @media (max-width: 767px) { .hc-hero-price { font-size: 20px; } .hc-hero-enroll .hc-enroll-btn { padding: 10px 20px; } } /* Enroll Now block (fallback placement for pages without a stats row) — sits above the sticky request-info form. */ .hc-enroll-box { background: #fff; padding: 16px 20px; margin-bottom: 12px; text-align: center; box-shadow: 1px 4px 20px -2px rgb(0 0 0 / 10%); } .hc-enroll-price { font-size: 22px; margin-bottom: 10px; color: #232323; } .hc-enroll-strike { color: #999; text-decoration: line-through; font-size: 16px; } .hc-enroll-btn { display: block; width: 100%; border: 0; cursor: pointer; padding: 14px 20px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, var(--uni_color_quaternary) 0%, var(--uni_color_primary) 100%); } .hc-enroll-btn:hover { filter: brightness(1.08); } /* FAQ blocks: uniform spacing */ .faq-area .faq-item, .faq-area .card { margin-bottom: 12px; } /* Images never overflow their column */ .page-main img { max-width: 100%; height: auto; } /* Header cart icon + count badge */ .hc-nav-cart a { position: relative; } .hc-nav-cart-count { position: absolute; top: 18px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e6b012; color: #1a1a1a; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } @media (max-width: 991px) { .hc-nav-cart-count { position: static; margin-left: 6px; display: inline-block; } } /* ============================================================ Header: "Bootcamps" dropdown — 14 items overflow the viewport on short laptop screens. On desktop, lay the menu out in two columns (halves its height) anchored to the right edge of the navbar, with a scroll fallback for very short screens. The collapsed mobile menu keeps the theme's behavior. ============================================================ */ @media (min-width: 992px) { nav.navbar.bootsnav li.dropdown ul.dropdown-menu { column-count: 2; column-gap: 0; min-width: 620px; left: auto; right: 0; padding: 10px 0; max-height: calc(100vh - 160px); overflow-y: auto; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li { break-inside: avoid; width: 100%; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a { white-space: normal; } }