/* ========================================================================== FEI — v2 cinematic art direction (layered on fei.css) -------------------------------------------------------------------------- Same brand (FEI blue, deep-blue, gold, square corners, the original photography), staged like a film: full-bleed graded photographs, "night" sections in a deeper shade of FEI's deep blue, oversized display type, title-sequence reveals and scroll-linked motion (fei-motion.js). Everything renders fully without JS and with prefers-reduced-motion. ========================================================================== */ :root { --fei-night: #0B1530; /* deepest shade of FEI deep blue #112550 */ --fei-night-2: #111F44; --fei-g: 40px; /* side gutter */ --fei-header-total: 124px; /* utility bar + main bar */ --fei-cine-grade: linear-gradient(90deg, rgba(11,21,48,.94) 0%, rgba(11,21,48,.72) 38%, rgba(11,21,48,.18) 78%, rgba(11,21,48,.10) 100%), linear-gradient(0deg, rgba(11,21,48,.96) 0%, rgba(11,21,48,.35) 42%, rgba(11,21,48,0) 64%), linear-gradient(180deg, rgba(11,21,48,.6) 0%, rgba(11,21,48,0) 24%); } @media (max-width: 1024px) { :root { --fei-g: 32px; --fei-header-total: 116px; } } @media (max-width: 767px) { :root { --fei-g: 20px; --fei-header-total: 108px; } } /* Page-to-page cross-fade (Chromium/Safari; ignored elsewhere). */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22,1,.36,1); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } body { background: var(--fei-night); } .elementor-location-header + * , main, .elementor { background: transparent; } /* ---------- Film grain (static SVG noise, very low opacity) ---------- */ .fei-grain { position: relative; isolation: isolate; } .fei-grain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Header: transparent over the opening shot, solid once scrolling ---------- */ .elementor-location-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 900; } .admin-bar .elementor-location-header { top: 32px; } @media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } } .fei-header .fei-utility { background: transparent; border-bottom: 1px solid rgba(255,255,255,.12); max-height: 40px; overflow: hidden; transition: max-height .45s var(--fei-ease), opacity .3s, border-color .3s; } .fei-header .fei-mainbar { background: transparent; border-bottom: 1px solid rgba(255,255,255,.14); transition: background-color .4s var(--fei-ease), border-color .4s, box-shadow .4s; } .fei-header:not(.is-stuck) .fei-nav .elementor-nav-menu--main .elementor-item { color: #fff; } .fei-header:not(.is-stuck) .fei-nav .elementor-nav-menu--main .elementor-item:hover, .fei-header:not(.is-stuck) .fei-nav .elementor-nav-menu--main .elementor-item.highlighted { color: var(--fei-gold); } .fei-header:not(.is-stuck) .fei-nav .elementor-nav-menu--main .elementor-item.elementor-item-active, .fei-header:not(.is-stuck) .fei-nav .elementor-nav-menu--main .current-menu-ancestor > .elementor-item { color: #fff; box-shadow: inset 0 -2px 0 var(--fei-gold); } .fei-header:not(.is-stuck) .fei-nav .elementor-menu-toggle { background: rgba(255,255,255,.12) !important; color: #fff !important; } .fei-header:not(.is-stuck) .fei-nav .elementor-menu-toggle svg { fill: #fff; } .fei-header.is-stuck .fei-utility { max-height: 0; opacity: 0; border-color: transparent; } .fei-header.is-stuck .fei-mainbar { background: #fff; border-color: var(--fei-line); box-shadow: 0 10px 30px -18px rgba(11,21,48,.55); } .fei-header .fei-nav .elementor-nav-menu--main .elementor-item { letter-spacing: .01em; } /* ---------- Cinematic sections ---------- */ .e-con.fei-cine { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-end; background-color: var(--fei-night); color: #fff; } .fei-cine--full { min-height: 100svh; } .fei-cine--page { min-height: 86svh; } .fei-cine--program { min-height: 94svh; } .fei-cine--compact { min-height: 58svh; } .fei-cine--post { min-height: 76svh; } .fei-cine--cta { min-height: 92svh; justify-content: center; } .fei-cine--aid { min-height: 100svh; } .fei-cine--apply { justify-content: flex-start; } .e-con.fei-cine::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fei-cine-grade); pointer-events: none; } .fei-cine--cta::before { background: linear-gradient(0deg, rgba(11,21,48,.92) 0%, rgba(11,21,48,.55) 55%, rgba(11,21,48,.7) 100%) !important; } .fei-cine--aid::before { background: linear-gradient(0deg, rgba(11,21,48,.55) 0%, rgba(11,21,48,0) 50%) !important; } .fei-cine--apply::before { background: linear-gradient(90deg, rgba(11,21,48,.97) 0%, rgba(11,21,48,.9) 55%, rgba(11,21,48,.8) 100%) !important; } @media (max-width: 767px) { .e-con.fei-cine::before { background: linear-gradient(0deg, rgba(11,21,48,.97) 0%, rgba(11,21,48,.8) 45%, rgba(11,21,48,.35) 100%); } .fei-cine--page, .fei-cine--program { min-height: 92svh; } .fei-cine--compact { min-height: 48svh; } } .fei-cine__media { position: absolute !important; inset: 0; z-index: -2; overflow: hidden; padding: 0 !important; } .fei-cine__media > .elementor-widget, .fei-cine__media > .e-con-inner > .elementor-widget { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; } .fei-cine__media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; } .fei-cine--program .fei-cine__media img { object-position: 70% center; } .fei-cine__media--faint img { opacity: .55; filter: grayscale(.3); } /* Slow push-in on opening shots (not on parallax layers). */ .fei-motion-on .fei-cine > .fei-cine__media:not(.fei-parallax) img { animation: fei-push 20s cubic-bezier(.2,.6,.2,1) both; } @keyframes fei-push { from { transform: scale(1.16); } to { transform: scale(1.04); } } .fei-parallax img { transform: translate3d(0, var(--py, 0px), 0) scale(1.18) !important; } .fei-cine__content { position: relative; width: 100%; max-width: calc(1240px + 2 * var(--fei-g)); margin: 0 auto; padding: calc(var(--fei-header-total) + 96px) var(--fei-g) 96px !important; } .fei-cine--full .fei-cine__content { padding-bottom: 48px !important; } .fei-cine--compact .fei-cine__content { padding-bottom: 80px !important; } .fei-cine--cta .fei-cine__content { padding-top: 160px !important; padding-bottom: 160px !important; } .fei-cine--program .fei-cine__content { padding-bottom: 40px !important; } @media (max-width: 767px) { .fei-cine__content { padding-top: calc(var(--fei-header-total) + 56px) !important; padding-bottom: 56px !important; } .fei-cine--cta .fei-cine__content { padding-top: 112px !important; padding-bottom: 112px !important; } } .fei-cine__content--grid { padding-bottom: 120px !important; } .fei-cine .fei-cine__lede p, .fei-cine__lede p { color: rgba(255,255,255,.84); max-width: 34em; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; } .fei-cine .fei-crumbs, .fei-cine .fei-crumbs a { color: rgba(255,255,255,.72); } .fei-cine .fei-crumbs a:hover { color: #fff; } .fei-cine .fei-crumbs span[aria-hidden] { color: rgba(255,255,255,.4); } .fei-cine .fei-post-meta, .fei-cine .fei-legal-meta p { color: rgba(255,255,255,.75); } .fei-cine .fei-post-meta a { color: var(--fei-gold); } .fei-eyebrow-html p { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fei-gold); } .fei-eyebrow-html a { color: inherit; } /* Scroll cue */ .fei-scroll-cue { position: absolute; right: var(--fei-g); bottom: 48px; width: 1px; height: 72px; background: rgba(255,255,255,.22); overflow: hidden; display: block; } .fei-scroll-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--fei-gold); } .fei-motion-on .fei-scroll-cue::after { animation: fei-cue 2.4s cubic-bezier(.6,0,.2,1) infinite; } @keyframes fei-cue { to { top: 100%; } } @media (max-width: 1024px) { .fei-scroll-cue { display: none; } } /* ---------- Display typography ---------- */ .fei-display .elementor-heading-title { font-size: clamp(46px, 7vw, 120px); line-height: .94; letter-spacing: -.045em; font-weight: 800; color: #fff; text-wrap: balance; } .fei-display--hero .elementor-heading-title { font-size: clamp(56px, 10.4vw, 172px); line-height: .88; letter-spacing: -.05em; } .fei-display--cta .elementor-heading-title { font-size: clamp(50px, 8.6vw, 148px); line-height: .9; } .fei-display--md .elementor-heading-title { font-size: clamp(40px, 5.4vw, 88px); line-height: .98; } .fei-display .elementor-heading-title em, .fei-cine .elementor-heading-title em { color: var(--fei-gold); font-style: italic; font-weight: 700; background: none; } .fei-h2 .elementor-heading-title { font-size: clamp(36px, 4.8vw, 76px); line-height: .98; letter-spacing: -.04em; } .fei-chapter .fei-h2 .elementor-heading-title, .fei-h2--sm .elementor-heading-title { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.02; letter-spacing: -.035em; } .fei-statement p { font-size: clamp(24px, 2.6vw, 42px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--fei-navy); max-width: 22em; } /* Word-mask reveals (only when fei-motion.js is active) */ .fei-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .fei-wi { display: inline-block; } .fei-motion-on .fei-split .fei-wi { transform: translate3d(0, 108%, 0); transition: transform 1.05s cubic-bezier(.19,1,.22,1); transition-delay: calc(var(--i, 0) * 55ms + 80ms); } .fei-motion-on .fei-split.is-in .fei-wi { transform: none; } .fei-motion-on .fei-rise { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity 1s var(--fei-ease), transform 1.1s var(--fei-ease); } .fei-motion-on .fei-rise.is-in { opacity: 1; transform: none; } .fei-motion-on .fei-clip { clip-path: inset(14% 10% 14% 10%); transition: clip-path 1.5s cubic-bezier(.19,1,.22,1); } .fei-motion-on .fei-clip.is-in { clip-path: inset(0 0 0 0); } .fei-motion-on .fei-cine .fei-btn-row, .fei-motion-on .fei-cine .fei-cine__lede, .fei-motion-on .fei-cine .fei-eyebrow, .fei-motion-on .fei-cine .fei-proof, .fei-motion-on .fei-cine .fei-facts, .fei-motion-on .fei-cine .fei-hero__chip, .fei-motion-on .fei-cine .fei-crumbs { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s var(--fei-ease) .55s, transform 1.1s var(--fei-ease) .55s; } .fei-motion-on.fei-loaded .fei-cine .fei-btn-row, .fei-motion-on.fei-loaded .fei-cine .fei-cine__lede, .fei-motion-on.fei-loaded .fei-cine .fei-eyebrow, .fei-motion-on.fei-loaded .fei-cine .fei-proof, .fei-motion-on.fei-loaded .fei-cine .fei-facts, .fei-motion-on.fei-loaded .fei-cine .fei-hero__chip, .fei-motion-on.fei-loaded .fei-cine .fei-crumbs { opacity: 1; transform: none; } .fei-motion-on.fei-loaded .fei-cine .fei-proof, .fei-motion-on.fei-loaded .fei-cine .fei-facts { transition-delay: .85s; } /* Scrub statements: words light up with the scroll. */ .fei-motion-on .fei-scrub .fei-sw { opacity: .16; transition: opacity .35s linear; } .fei-motion-on .fei-scrub .fei-sw.on { opacity: 1; } /* ---------- Night sections ---------- */ .fei-night { background-color: var(--fei-night); } .fei-night .fei-lead p, .fei-night .fei-text p { color: rgba(255,255,255,.8); } /* ---------- Hero proof row + facts strip (credits) ---------- */ .fei-cine .fei-proof, .fei-cine .fei-facts { background: transparent; box-shadow: none; border: 0; border-top: 1px solid rgba(255,255,255,.2); margin-top: 8px; } .fei-cine .fei-proof__item { padding: 22px 24px 0 0 !important; } .fei-cine .fei-proof__item + .fei-proof__item { border-left: 1px solid rgba(255,255,255,.2); padding-left: 24px !important; } .fei-cine .fei-proof__num .elementor-heading-title { color: var(--fei-gold); font-size: clamp(26px, 2.6vw, 40px); } .fei-cine .fei-proof__label p { color: rgba(255,255,255,.72); } .fei-cine .fei-facts { position: relative; width: calc(100% - 2 * var(--fei-g)); max-width: 1240px; margin: 0 auto 56px; } .fei-cine .fei-fact { padding: 22px 24px 0 0 !important; } .fei-cine .fei-fact + .fei-fact { border-left: 1px solid rgba(255,255,255,.2); padding-left: 24px !important; } .fei-cine .fei-fact__value .elementor-heading-title { color: #fff; font-size: clamp(18px, 1.6vw, 24px); } .fei-cine .fei-fact__label p { color: rgba(255,255,255,.62); } @media (max-width: 767px) { .fei-cine .fei-proof__item + .fei-proof__item { padding-left: 12px !important; } .fei-cine .fei-proof__item { padding-right: 8px !important; } .fei-cine .fei-fact:nth-child(odd) { border-left: 0; padding-left: 0 !important; } .fei-cine .fei-fact:nth-child(even) { border-left: 1px solid rgba(255,255,255,.2); padding-left: 16px !important; } .fei-cine .fei-fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.2); margin-top: 18px; } .fei-cine .fei-facts { margin-bottom: 40px; } } /* Hero testimonial chip */ .fei-cine .fei-hero__chip { position: static !important; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); box-shadow: none; padding: 18px 22px !important; max-width: 280px; } .fei-cine .fei-hero__chip p { color: #fff; } /* ---------- Buttons on cinema surfaces ---------- */ .elementor-widget-button .elementor-button { min-height: 56px; padding: 18px 30px; font-size: 16px; letter-spacing: .01em; } .fei-btn--sm .elementor-button { min-height: 44px; padding: 11px 20px; font-size: 15px; } .fei-btn .elementor-button-icon svg, .elementor-widget-button:not([class*="fei-btn--"]) .elementor-button-icon svg { transition: transform .3s var(--fei-ease); } .fei-btn .elementor-button:hover .elementor-button-icon svg { transform: translateX(4px); } .fei-on-dark .fei-btn--light .elementor-button, .fei-btn--light .elementor-button { border-color: rgba(255,255,255,.55); } /* ---------- Program panels (home) ---------- */ .fei-panels { height: min(76vh, 720px); min-height: 560px; } .fei-panel-x { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 0 !important; min-width: 0; justify-content: flex-end; padding: 32px !important; transition: flex-grow .9s cubic-bezier(.19,1,.22,1); background: var(--fei-night-2); } .fei-panel-x::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,21,48,.97) 0%, rgba(11,21,48,.7) 42%, rgba(11,21,48,.2) 100%); transition: opacity .6s; } .fei-panel-x .fei-cine__media img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(.19,1,.22,1), filter .8s; filter: saturate(.75); } .fei-panel-x__body { width: 320px; max-width: 100%; } .fei-panel-x__title .elementor-heading-title { font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.05; white-space: nowrap; } .fei-proglist--dark li { border-top-color: rgba(255,255,255,.16); } .fei-proglist--dark a { color: #fff; } .fei-proglist--dark a:hover, .fei-proglist--dark a:focus-visible { color: var(--fei-gold); } .fei-proglist--dark a span { color: var(--fei-navy) !important; background: var(--fei-gold); } @media (min-width: 1025px) { .js-panels .fei-panel-x { flex-grow: 1 !important; } .js-panels .fei-panel-x.is-open { flex-grow: 2.6 !important; } .js-panels .fei-panel-x .fei-proglist { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .4s var(--fei-ease), transform .6s var(--fei-ease); } .js-panels .fei-panel-x.is-open .fei-proglist { opacity: 1; transform: none; pointer-events: auto; transition-delay: .3s; } .js-panels .fei-panel-x .fei-proglist a:focus { opacity: 1; } .js-panels .fei-panel-x.is-open img { transform: scale(1); filter: saturate(1); } /* Collapsed panels: title runs up the frame like a film credit. */ .js-panels .fei-panel-x:not(.is-open) .fei-panel-x__body { position: absolute; left: 28px; bottom: 32px; width: auto; } .js-panels .fei-panel-x:not(.is-open) .fei-proglist { position: absolute; visibility: visible; height: 0; overflow: hidden; } .js-panels .fei-panel-x:not(.is-open) .fei-panel-x__title .elementor-heading-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(22px, 1.9vw, 30px); } } @media (min-width: 1025px) and (prefers-reduced-motion: reduce) { .fei-panel-x, .fei-panel-x * { transition: none !important; } } @media (max-width: 1024px) { .fei-panels { height: auto; min-height: 0; } .fei-panel-x { min-height: 440px; flex: none !important; width: 100%; } } /* ---------- Advantage: portrait + statement ---------- */ .fei-portrait-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 5; align-self: stretch; } .fei-portrait-wrap > .elementor-widget { position: absolute !important; inset: 0; width: 100% !important; height: 100%; } .fei-portrait-wrap img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; max-width: none !important; transform: translate3d(0, var(--py, 0px), 0) scale(1.14); } @media (max-width: 1024px) { .fei-portrait-wrap { aspect-ratio: 4 / 3; } } .fei-features .fei-feature { border-top: 2px solid var(--fei-navy); padding-top: 22px !important; } .fei-features .fei-feature .elementor-heading-title { color: var(--fei-navy); } .fei-features .fei-feature p { color: var(--fei-gray); } /* Same cards on a dark section (home Student support): light text, gold rule */ .fei-on-dark .fei-features .fei-feature { border-top-color: var(--fei-gold); } .fei-on-dark .fei-features .fei-feature .elementor-heading-title { color: #fff; } .fei-on-dark .fei-features .fei-feature p { color: rgba(255,255,255,.82); } /* Text links on dark sections: brand blue is too dark on navy */ .fei-on-dark .elementor-widget-text-editor a:not(.elementor-button) { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Journey (steps on a drawn line) ---------- */ .fei-journey { position: relative; } .fei-journey__line { position: absolute; left: 0; right: 0; top: 25px; height: 2px; background: rgba(255,255,255,.14); } .fei-bg-paper .fei-journey__line, .fei-bg-tint .fei-journey__line { background: var(--fei-line); } .fei-journey__line span { display: block; height: 100%; background: var(--fei-gold); transform-origin: left center; transform: scaleX(var(--p, 1)); } .fei-journey .fei-step::after { display: none !important; } .fei-journey .fei-step p { color: rgba(255,255,255,.74); } .fei-bg-paper .fei-journey .fei-step p { color: var(--fei-gray); } .fei-journey .fei-step .fei-h3 .elementor-heading-title { font-size: 22px; } .fei-journey .fei-step__no .elementor-heading-title { width: 52px; height: 52px; display: grid; place-items: center; font-size: 18px; font-weight: 800; } @media (max-width: 767px) { .fei-journey__line { left: 25px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .fei-journey__line span { transform-origin: center top; transform: scaleY(var(--p, 1)); } .fei-journey .fei-step { padding-left: 76px !important; min-height: 52px; } .fei-journey .fei-step__no { position: absolute !important; left: 0; top: 0; } } @media (min-width: 768px) and (max-width: 1024px) { .fei-journey__line { display: none; } } /* ---------- Financial aid panel over a full-bleed photo ---------- */ .fei-cine--aid { justify-content: flex-end; } .fei-aid-panel { position: relative; background: var(--fei-blue); width: min(640px, calc(100% - 2 * var(--fei-g))); margin: 0 0 0 max(var(--fei-g), calc((100vw - 1240px) / 2)) !important; padding: 72px 64px 80px !important; } .fei-aid-panel .fei-h2 .elementor-heading-title { font-size: clamp(36px, 4.4vw, 68px); } @media (max-width: 767px) { .fei-aid-panel { padding: 44px 24px 52px !important; } } /* ---------- Testimonial ---------- */ .fei-quote .fei-quote__text p { font-size: clamp(28px, 3.5vw, 58px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; font-style: normal; color: #fff; } .fei-quote .fei-quote__text blockquote { margin: 0; padding: 0; border: 0; position: relative; } .fei-quote .fei-quote__body { max-width: 1100px; } .fei-on-dark .fei-quote__name .elementor-heading-title { color: #fff; } .fei-on-dark .fei-quote__role p { color: rgba(255,255,255,.65); } .fei-on-dark .fei-quote__avatar .elementor-heading-title { background: var(--fei-gold); color: var(--fei-navy); } .fei-support { border-top: 2px solid var(--fei-gold); padding-top: 28px !important; } /* ---------- Program posters (directory) ---------- */ .e-con.fei-card.fei-poster { position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; justify-content: flex-end; background: var(--fei-night-2); border: 0; color: #fff; text-decoration: none; } .fei-poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,21,48,.97) 0%, rgba(11,21,48,.78) 34%, rgba(11,21,48,.08) 72%); } .fei-poster__media { position: absolute !important; inset: 0; z-index: -2; padding: 0 !important; } .fei-poster__media > .elementor-widget { position: absolute !important; inset: 0; width: 100% !important; height: 100%; } .fei-poster__media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 64% center; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.19,1,.22,1), filter .6s; filter: saturate(.8); } a.fei-poster:hover .fei-poster__media img, a.fei-poster:focus-visible .fei-poster__media img { transform: scale(1.12); filter: saturate(1); } a.fei-card.fei-poster:hover { transform: none; box-shadow: none; } .fei-poster__badge { position: absolute !important; top: 0; left: 0; z-index: 1; width: auto !important; padding: 0 !important; } .fei-poster__badge p { background: var(--fei-gold); color: var(--fei-navy); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; margin: 0; } .fei-poster__body { padding: 28px !important; } .fei-poster__cat p { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fei-gold); } .fei-poster__title .elementor-heading-title { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; color: #fff; } .fei-poster__desc p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); } .fei-poster__more p { font-size: 14px; font-weight: 700; color: #fff; } .fei-poster__more p::after { content: " →"; color: var(--fei-gold); } a.fei-poster:focus-visible { outline: 3px solid var(--fei-gold); outline-offset: 3px; } .fei-night .fei-filters .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); } .fei-night .fei-filters .chip:hover { border-color: #fff; } .fei-night .fei-filters .chip.is-active, .fei-night .fei-filters .chip[aria-pressed="true"] { background: var(--fei-gold); color: var(--fei-navy); border-color: var(--fei-gold); } @media (max-width: 767px) { .e-con.fei-card.fei-poster { aspect-ratio: 4 / 5; } } /* ---------- Program body: dark sticky card ---------- */ .fei-side-card { padding: 32px !important; border-top: 4px solid var(--fei-gold); } .fei-side-name .elementor-heading-title { font-size: 28px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: #fff; } .fei-side-facts { border-top: 1px solid rgba(255,255,255,.16); } .fei-side-fact { padding: 14px 12px 14px 0 !important; border-bottom: 1px solid rgba(255,255,255,.16); } .fei-side-fact:nth-child(even) { padding-left: 14px !important; border-left: 1px solid rgba(255,255,255,.16); } .fei-side-fact__v .elementor-heading-title { font-size: 16px; font-weight: 800; color: #fff; } .fei-side-fact__l p { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); } /* ---------- Light chapters keep air ---------- */ .fei-bg-paper .fei-hairline, .fei-bg-tint .fei-hairline { border-top-color: rgba(26,32,44,.14); } /* ---------- Apply ---------- */ .fei-apply__copy .fei-text p, .fei-apply__copy .fei-note p { color: rgba(255,255,255,.8); } .fei-apply__copy .fei-address p { color: rgba(255,255,255,.88); } .fei-apply__copy .fei-address strong { color: #fff; } .fei-apply__copy a { color: var(--fei-gold); } .fei-cine .fei-form-card { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); } /* ---------- Blog on paper ---------- */ .fei-side-card--light { background: #fff; border: 1px solid var(--fei-line); } .fei-side-card--light .elementor-heading-title { font-size: 16px; font-weight: 800; color: var(--fei-navy); } .fei-night .fei-related__title, .fei-night .fei-related h2.fei-related__title { color: #fff; } .fei-night .fei-related__kicker { color: var(--fei-gold); } .fei-night .fei-related__all { color: #fff; } .fei-night .fei-related__card { background: var(--fei-night-2); border-color: rgba(255,255,255,.12); } .fei-night .fei-related__body h3 a { color: #fff; } .fei-night .fei-related__body p { color: rgba(255,255,255,.72); } .fei-night .fei-related__tag { color: var(--fei-gold); } .fei-night .fei-related__more { color: var(--fei-gold); } /* ---------- Footer ---------- */ .fei-footer.fei-night { background-color: var(--fei-night); background-image: none; } /* ---------- Editor: show everything static ---------- */ .elementor-editor-active .fei-cine__media img, .elementor-editor-preview .fei-cine__media img { animation: none !important; } .elementor-editor-active .elementor-location-header { position: relative !important; } /* CTA photo: keep the two people in frame */ .fei-cine--cta .fei-cine__media img { object-position: 60% 30%; } /* Long text links may wrap on phones */ @media (max-width: 767px) { .fei-btn--link .elementor-button { white-space: normal; text-align: left; justify-content: flex-start; } .fei-btn--link .elementor-button .elementor-button-text { white-space: normal; } .fei-display--hero .elementor-heading-title { font-size: clamp(48px, 13.5vw, 64px); } } /* Utility bar: fixed height, never wraps (no shift while fonts load) */ .fei-header .fei-utility { height: 40px; } .fei-utility .elementor-icon-list-items { flex-wrap: nowrap !important; white-space: nowrap; } /* Hold the opening titles (invisible, not just transparent) until fonts are ready. */ .fei-motion-on .fei-split:not(.is-ready) { visibility: hidden; } .fei-motion-on:not(.fei-loaded) .fei-cine .fei-btn-row, .fei-motion-on:not(.fei-loaded) .fei-cine .fei-cine__lede, .fei-motion-on:not(.fei-loaded) .fei-cine .fei-eyebrow, .fei-motion-on:not(.fei-loaded) .fei-cine .fei-proof, .fei-motion-on:not(.fei-loaded) .fei-cine .fei-facts, .fei-motion-on:not(.fei-loaded) .fei-cine .fei-hero__chip, .fei-motion-on:not(.fei-loaded) .fei-cine .fei-crumbs { visibility: hidden; } .fei-sitemap .fei-sitemap__all a { color: var(--fei-blue-dark); font-weight: 700; border: 0; } /* ========================================================================== Home banner v3 — "Career Pathfinder" An enrollment tool, not a poster: identity + next step on the left, an interactive program finder (Elementor Nested Tabs) on the right, proof below. ========================================================================== */ .fei-cine--path { min-height: 100svh; justify-content: center; } .e-con.fei-cine--path::before { background: linear-gradient(90deg, rgba(11,21,48,.96) 0%, rgba(11,21,48,.88) 40%, rgba(11,21,48,.74) 100%), linear-gradient(0deg, rgba(11,21,48,.9) 0%, rgba(11,21,48,0) 40%); } .fei-cine__media--path img { object-position: 30% center; filter: saturate(.7); } .fei-path { padding-top: calc(var(--fei-header-total) + clamp(32px, 5vh, 64px)) !important; padding-bottom: 48px !important; } .fei-display--path .elementor-heading-title { font-size: clamp(46px, 5.1vw, 76px); line-height: .95; letter-spacing: -.045em; } /* Friction-removal checklist (verbatim admissions facts) */ .fei-enroll-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fei-enroll-facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,.9); } .fei-enroll-facts li::before { content: ""; width: 22px; height: 22px; margin-top: -1px; background: var(--fei-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1530' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; } /* ---------- Finder card ---------- The card adapts to ITS OWN width (container queries), not the viewport: wide card (≥ 640px) → one row of tabs, photo beside the program list compact card → 2×2 segmented tabs, photo as a banner above the list Laptop widths give the card ~450–565px, so they get the compact layout. */ .fei-path__card { container: pathcard / inline-size; background: #fff; color: var(--fei-navy); border-top: 4px solid var(--fei-gold); box-shadow: 0 50px 100px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); } .fei-path__head { padding: 28px 32px 10px !important; } .fei-path__title .elementor-heading-title { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; text-wrap: balance; color: var(--fei-navy); } .fei-path__title .elementor-heading-title br { display: none; } .fei-cine .fei-path__card .elementor-widget-heading.fei-path__title .elementor-heading-title { color: var(--fei-navy); } .fei-cine .fei-path__card .fei-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--fei-blue-dark); } .fei-cine .fei-path__card p, .fei-cine .fei-path__card li { color: inherit; } .fei-motion-on .fei-cine .fei-path__card .fei-eyebrow { opacity: 1; transform: none; visibility: visible; } /* Tabs — default (wide card): a single underlined row, labels never wrap */ .fei-path__tabs .e-n-tabs { --n-tabs-title-gap: 0px; flex-direction: column !important; gap: 0 !important; } .fei-path__tabs .e-n-tabs-heading { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; padding: 0 20px; border-bottom: 1px solid var(--fei-line); } .fei-path__tabs .e-n-tab-title { flex: 1 1 auto !important; width: auto !important; min-width: 0; justify-content: center; padding: 16px 10px 14px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; color: var(--fei-gray) !important; font: 700 15px/1.2 var(--fei-font) !important; white-space: nowrap !important; text-align: center; cursor: pointer; transition: color .2s, background-color .2s, border-color .3s var(--fei-ease); } .fei-path__tabs .e-n-tab-title .e-n-tab-title-text { font: inherit !important; color: inherit !important; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .fei-path__tabs .e-n-tab-title:hover { color: var(--fei-navy) !important; } .fei-path__tabs .e-n-tab-title[aria-selected="true"] { color: var(--fei-navy) !important; border-bottom-color: var(--fei-blue) !important; } .fei-path__tabs .e-n-tab-title:focus-visible { outline: 3px solid var(--fei-blue); outline-offset: -3px; } .fei-tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; font-weight: 700; line-height: 1; background: var(--fei-tint); color: var(--fei-blue-dark); } .fei-path__tabs .e-n-tab-title[aria-selected="true"] .fei-tab-count { background: var(--fei-gold); color: var(--fei-navy); } .fei-path__tabs .e-n-tabs-content > .e-con { padding: 24px 32px 26px !important; border: 0 !important; } /* Pane — default (wide card): photo beside the list */ /* Elementor shows the first panel as flex until its JS activates the tabs; keep our grid from the first paint (no layout shift) */ .fei-path__tabs .e-n-tabs:not(.e-activated) > .e-n-tabs-content > .e-con.fei-path__pane:first-child { display: grid; } .fei-path__photo { position: relative; overflow: hidden; padding: 0 !important; background: var(--fei-tint); aspect-ratio: auto; min-height: 280px; align-self: stretch; } .fei-path__photo > .elementor-widget { position: absolute !important; inset: 0; width: 100% !important; height: 100%; } .fei-path__photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 66% 30%; display: block; } .fei-motion-on .fei-path__tabs .e-n-tabs-content > .e-con.e-active .fei-path__photo img { animation: fei-path-in 1s cubic-bezier(.19,1,.22,1) both; } .fei-motion-on .fei-path__tabs .e-n-tabs-content > .e-con.e-active .fei-path__list li { animation: fei-path-row .7s cubic-bezier(.19,1,.22,1) both; } .fei-motion-on .fei-path__tabs .e-n-tabs-content > .e-con.e-active .fei-path__list li:nth-child(2) { animation-delay: .06s; } .fei-motion-on .fei-path__tabs .e-n-tabs-content > .e-con.e-active .fei-path__list li:nth-child(3) { animation-delay: .12s; } .fei-motion-on .fei-path__tabs .e-n-tabs-content > .e-con.e-active .fei-path__list li:nth-child(4) { animation-delay: .18s; } @keyframes fei-path-in { from { clip-path: inset(0 0 0 100%); transform: scale(1.12); } to { clip-path: inset(0); transform: scale(1); } } @keyframes fei-path-row { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .fei-path__list { align-self: center; } .fei-path__list ul { list-style: none; margin: 0; padding: 0; } .fei-path__list li { border-top: 1px solid var(--fei-line); } .fei-path__list li:last-child { border-bottom: 1px solid var(--fei-line); } .fei-path__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 14px 0; min-height: 54px; text-decoration: none; color: var(--fei-navy); } .fei-path__list a::after { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072CE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--fei-ease); } .fei-path__list a:hover::after, .fei-path__list a:focus-visible::after { transform: translateX(4px); } .fei-path__list a:hover .fei-path__name { color: var(--fei-blue); } .fei-path__name { font-size: 16px; font-weight: 700; line-height: 1.3; text-wrap: balance; } .fei-path__tag { font-size: 13px; font-weight: 700; color: var(--fei-blue-dark); background: var(--fei-tint); padding: 4px 9px; white-space: nowrap; } /* Card footer: all programs + accreditation */ .fei-path__foot { padding: 14px 32px 18px !important; border-top: 1px solid var(--fei-line); background: var(--fei-paper); } .fei-path__foot > .elementor-widget, .fei-path__foot > .e-con-inner > .elementor-widget { width: auto !important; max-width: 100%; } .fei-path__foot .elementor-widget-button { flex: 0 0 auto; } .fei-path__foot .fei-path__coe { flex: 0 1 auto; } .fei-path__foot .fei-btn--link .elementor-button { color: var(--fei-blue-dark); padding-left: 0; padding-right: 0; } .fei-path__coe p { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700; color: var(--fei-navy); line-height: 1.35; } .fei-path__coe p::before { content: ""; flex: 0 0 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072CE' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- Compact card (< 640px wide): segmented 2×2 tabs, photo banner, full-width list ---------- */ @container pathcard (max-width: 639px) { .fei-path__head { padding: 22px 20px 14px !important; } .fei-path__tabs .e-n-tabs-heading { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; padding: 0 20px 18px; border-bottom: 0; } .fei-path__tabs .e-n-tab-title { justify-content: flex-start; padding: 12px 14px !important; border: 1px solid var(--fei-line) !important; background: #fff !important; text-align: left; } .fei-path__tabs .e-n-tab-title .e-n-tab-title-text { width: 100%; justify-content: space-between; } .fei-path__tabs .e-n-tab-title:hover { border-color: var(--fei-navy) !important; } .fei-path__tabs .e-n-tab-title[aria-selected="true"] { background: var(--fei-navy) !important; color: #fff !important; border-color: var(--fei-navy) !important; } .fei-path__tabs .e-n-tab-title[aria-selected="true"] .fei-tab-count { background: var(--fei-gold); color: var(--fei-navy); } .fei-path__tabs .e-n-tabs-content > .e-con { padding: 0 20px 20px !important; } .fei-path__pane { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } .fei-path__photo { aspect-ratio: 16 / 7; min-height: 0; } .fei-path__list { align-self: stretch; } .fei-path__foot { padding: 12px 20px 16px !important; } } /* In the 2×2 grid a long label (e.g. "Oficios Especializados") wraps inside its cell; the count stays pinned right */ @container pathcard (max-width: 639px) { .fei-path__tabs .e-n-tab-title { white-space: normal !important; align-items: stretch; } .fei-path__tabs .e-n-tab-title .e-n-tab-title-text { white-space: normal; align-items: center; text-align: left; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } .fei-tab-count { flex: 0 0 auto; } } @container pathcard (max-width: 400px) { .fei-path__head { padding: 20px 16px 12px !important; } .fei-path__tabs .e-n-tabs-heading { gap: 6px !important; padding: 0 16px 16px; } .fei-path__tabs .e-n-tab-title { padding: 10px 10px !important; font-size: 14px !important; } .fei-path__tabs .e-n-tabs-content > .e-con { padding: 0 16px 18px !important; } .fei-path__foot { padding: 12px 16px 16px !important; } } /* Laptop-width cards (420–639px): slimmer photo banner and denser rows so the whole finder fits in the first screen */ @container pathcard (min-width: 420px) and (max-width: 639px) { .fei-path__photo { aspect-ratio: 3 / 1; } .fei-path__list a { padding: 10px 0; min-height: 48px; } .fei-path__head { padding-bottom: 12px !important; } .fei-path__tabs .e-n-tabs-heading { padding-bottom: 14px; } .fei-path__tabs .e-n-tab-title { padding-top: 10px !important; padding-bottom: 10px !important; } } /* Only a truly tiny card falls back to one tab per row */ @container pathcard (max-width: 299px) { .fei-path__tabs .e-n-tabs-heading { grid-template-columns: minmax(0, 1fr); } } /* Hero spacing */ @media (max-width: 1024px) { .fei-path { padding-top: calc(var(--fei-header-total) + 48px) !important; } } @media (max-width: 767px) { .fei-path { padding-top: calc(var(--fei-header-total) + 36px) !important; padding-bottom: 36px !important; } .fei-display--path .elementor-heading-title { font-size: clamp(44px, 12.5vw, 60px); } } /* Desktop fold fit: intro, finder card and card footer all sit in the first screen. Sizes follow the viewport height; the photo gives way first and drops out below 760px tall. */ .fei-path__tag { line-height: 1.3; } @media (min-width: 1025px) { .fei-path { padding-top: calc(var(--fei-header-total) + clamp(12px, 3vh, 48px)) !important; padding-bottom: clamp(12px, 3vh, 48px) !important; } .fei-path__intro { gap: clamp(14px, 3.2vh, 28px) !important; } .fei-display--path .elementor-heading-title { font-size: clamp(44px, min(5.1vw, 9vh), 76px); } .fei-path__card { gap: 0 !important; } .fei-path__head { padding: clamp(12px, 2.4vh, 26px) 24px 14px !important; } .fei-path__title .elementor-heading-title { font-size: clamp(20px, min(1.7vw, 3vh), 26px); } .fei-path__tabs .e-n-tabs-heading { padding: 0 24px 12px; gap: 6px !important; } .fei-path__tabs .e-n-tab-title { padding: 9px 12px !important; } .fei-path__tabs .e-n-tabs-content > .e-con { padding: 0 24px 16px !important; } .fei-path__pane { gap: 10px !important; } .fei-path__photo { aspect-ratio: auto !important; min-height: 0 !important; height: clamp(80px, calc(100vh - 690px), 200px); } .fei-path__photo img { object-position: 66% 22%; } .fei-path__list a { padding: 8px 0; min-height: 44px; } .fei-path__foot { padding: 8px 24px 10px !important; } .fei-cine .fei-path__foot .elementor-button { padding-top: 6px !important; padding-bottom: 6px !important; min-height: 40px; } } @media (min-width: 1025px) and (max-height: 739px) { .fei-path__photo { display: none !important; } } @media (min-width: 1025px) and (max-height: 680px) { .fei-path__intro { gap: clamp(12px, 2.4vh, 16px) !important; } .fei-display--path .elementor-heading-title { font-size: clamp(40px, 8vh, 54px); } .fei-cine__lede p { font-size: 16px; line-height: 1.5; } .fei-path__tabs .e-n-tab-title { padding: 7px 12px !important; } .fei-path__list a { padding: 6px 0; min-height: 40px; } .fei-enroll-facts ul { gap: 6px; } .fei-path { padding-top: calc(var(--fei-header-total) + 10px) !important; padding-bottom: 10px !important; } .fei-path__head { padding-top: 12px !important; padding-bottom: 10px !important; } .fei-path__title .elementor-heading-title { font-size: 18px; } } @media (min-width: 1025px) and (max-height: 620px) { .fei-path__list a { padding: 5px 0; min-height: 36px; } .fei-path__tabs .e-n-tabs-heading { padding-bottom: 8px; } .fei-path__head { padding-bottom: 6px !important; } .fei-path__tabs .e-n-tabs-content > .e-con { padding-bottom: 8px !important; } } /* Narrow desktop cards (1025–1150px windows) wrap more text, so they drop the photo sooner */ @container pathcard (max-width: 479px) { @media (min-width: 1025px) and (max-height: 819px) { .fei-path__photo { display: none !important; } } } /* ========================================================================== Program pages v3: enrollment-first hero + in-page navigation ========================================================================== */ .fei-cine__media--program img { filter: saturate(.55) blur(1.5px); opacity: .55; transform: scale(1.08) !important; object-position: 70% center; } .e-con.fei-cine--programhero::before { background: linear-gradient(90deg, rgba(11,21,48,.97) 0%, rgba(11,21,48,.9) 50%, rgba(11,21,48,.8) 100%), linear-gradient(0deg, rgba(11,21,48,.9) 0%, rgba(11,21,48,0) 45%); } .fei-cine--programhero { min-height: auto; } .fei-path--program { padding-bottom: 88px !important; } .fei-display--program .elementor-heading-title { font-size: clamp(46px, 6vw, 92px) !important; line-height: .98; } /* "Program at a glance" card */ .fei-glance { background: #fff; color: var(--fei-navy); border-top: 4px solid var(--fei-gold); box-shadow: 0 50px 100px -40px rgba(0,0,0,.75); } .fei-glance__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; padding: 0 !important; } .fei-glance__photo > .elementor-widget:first-child { position: absolute !important; inset: 0; width: 100% !important; height: 100%; } .fei-glance__photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 66% center; display: block; } .fei-glance__badge { position: absolute !important; left: 0; bottom: 0; width: auto !important; padding: 0 !important; z-index: 1; } .fei-glance__badge p { margin: 0; background: var(--fei-gold); color: var(--fei-navy); font-weight: 700; font-size: 15px; padding: 8px 14px; } .fei-glance__body { padding: 26px 28px 28px !important; } .fei-cine .fei-glance .fei-glance__title.elementor-widget-heading .elementor-heading-title { font-family: var(--fei-serif) !important; font-style: italic; font-weight: 400; font-size: 21px; letter-spacing: 0; color: var(--fei-blue-dark); } .fei-glance__facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--fei-line); } .fei-glance__facts > div { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--fei-line); } .fei-glance__facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--fei-line); } .fei-glance__facts dt { font-size: 14px; color: var(--fei-gray-soft); margin: 0 0 2px; } .fei-glance__facts dd { margin: 0; font-family: var(--fei-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--fei-navy); } .fei-glance__badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fei-glance__badges li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--fei-navy); } .fei-glance__badges li::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072CE' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .fei-cine .fei-glance .fei-glance__aid p { color: var(--fei-gray); font-size: 15px; line-height: 1.5; margin: 0; padding-top: 14px; border-top: 1px solid var(--fei-line); } .fei-cine .fei-glance p, .fei-cine .fei-glance li { color: inherit; } /* Desktop: sticky "On this page" + actions */ .fei-side-nav { gap: 14px; } .fei-jumpnav__label { font-family: var(--fei-serif); font-style: italic; font-size: 20px; color: var(--fei-blue-dark); margin: 0 0 10px; } .fei-jumpnav ul { list-style: none; margin: 0 0 8px; padding: 0; border-left: 2px solid var(--fei-line); } .fei-jumpnav a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fei-gray); text-decoration: none; transition: color .2s, border-color .2s; } .fei-jumpnav a:hover { color: var(--fei-navy); border-left-color: var(--fei-line-strong); } .fei-jumpnav a[aria-current="true"] { color: var(--fei-navy); border-left-color: var(--fei-blue); } .fei-jumpnav a:focus-visible { outline: 3px solid var(--fei-blue); outline-offset: 2px; } /* Tablet/phone: sticky swipeable chip bar */ .fei-jumpbar { position: relative; margin: -8px calc(-1 * var(--fei-g)) 0; padding: 10px var(--fei-g); background: rgba(247,250,252,.96); border-bottom: 1px solid var(--fei-line); } .fei-jumpbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; } .fei-jumpbar ul::-webkit-scrollbar { display: none; } .fei-jumpbar a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: nowrap; border: 1px solid var(--fei-line); background: #fff; font-size: 14px; font-weight: 600; color: var(--fei-navy); text-decoration: none; } .fei-jumpbar a[aria-current="true"] { background: var(--fei-navy); color: #fff; border-color: var(--fei-navy); } .elementor-widget-html:has(.fei-jumpbar) { position: sticky; top: 76px; z-index: 5; } @media (max-width: 767px) { .elementor-widget-html:has(.fei-jumpbar) { top: 68px; } } .admin-bar .elementor-widget-html:has(.fei-jumpbar) { margin-top: 0; } /* Anchor targets clear the fixed header (+ the chip bar on small screens) */ html { scroll-padding-top: 108px; } @media (max-width: 1024px) { html { scroll-padding-top: 140px; } } /* Sticky header: the utility bar really collapses (height was pinned for CLS) */ .fei-header.is-stuck .fei-utility { height: 0 !important; min-height: 0 !important; --min-height: 0px; padding: 0 !important; } /* Program hero: keep the glance card inside a 900px viewport */ .fei-glance__photo { aspect-ratio: 2 / 1; } .fei-glance__body { padding: 22px 26px 24px !important; } .fei-glance__facts > div { padding-top: 12px; padding-bottom: 12px; } .fei-glance__facts dd { font-size: 20px; } .fei-path--program { padding-top: calc(var(--fei-header-total) + 48px) !important; padding-bottom: 72px !important; } @media (max-width: 1024px) { .fei-glance__photo { aspect-ratio: 16 / 9; } } /* ========================================================================== About / Admissions v3 cards (same frame as "Program at a glance") ========================================================================== */ .fei-cine .fei-glance .fei-glance__heading.elementor-widget-heading .elementor-heading-title { font-family: var(--fei-serif); font-weight: 600; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.015em; color: var(--fei-navy); } .fei-cine .fei-glance .fei-glance__heading .elementor-heading-title br { display: none; } /* Admissions: the four steps as a compact numbered sequence */ .fei-glance__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fei-line); } .fei-glance__steps li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--fei-line); font-weight: 700; font-size: 16px; color: var(--fei-navy); } .fei-glance__steps span { width: 34px; height: 34px; display: grid; place-items: center; background: var(--fei-navy); color: #fff; font-family: var(--fei-serif); font-weight: 600; font-size: 17px; } .fei-glance__steps li:last-child span { background: var(--fei-gold); color: var(--fei-navy); } .fei-cine .fei-glance .fei-glance__visit p { margin: 0; color: var(--fei-navy); } .fei-glance__sub { font-family: var(--fei-serif); font-style: italic; font-size: 19px; color: var(--fei-blue-dark) !important; margin-bottom: 4px !important; } .fei-glance__addr { font-size: 15px; line-height: 1.55; } .fei-glance__addr a { font-weight: 700; color: var(--fei-blue-dark); } /* About: the Fun · Active · Motivating points */ .fei-glance__points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fei-line); } .fei-glance__points li { padding: 12px 0; border-bottom: 1px solid var(--fei-line); font-size: 15px; line-height: 1.5; color: var(--fei-gray); } .fei-glance__points li strong { display: block; font-family: var(--fei-serif); font-weight: 600; font-size: 19px; color: var(--fei-navy); margin-bottom: 2px; } /* About proof checklist: bold figure first */ .fei-enroll-facts li strong { color: var(--fei-gold); font-weight: 700; margin-right: 2px; } /* Section intros inside the reading column */ .fei-bg-paper .fei-lead p { color: var(--fei-gray); } /* Info cards (About/Admissions): fit the first screen */ .fei-glance--info .fei-glance__photo { aspect-ratio: 5 / 2; } .fei-glance--info .fei-glance__body { gap: 12px !important; padding: 20px 26px 22px !important; } .fei-glance__steps li { padding: 8px 0; } .fei-glance__points li { padding: 9px 0; } @media (max-width: 1024px) { .fei-glance--info .fei-glance__photo { aspect-ratio: 16 / 9; } } /* Support / Employers card lists */ .fei-glance__points--plain li { font-weight: 700; color: var(--fei-navy); font-size: 15px; } .fei-glance__points--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } .fei-glance__points--2col li:nth-child(2) { border-top: 0; } @media (max-width: 480px) { .fei-glance__points--2col { grid-template-columns: 1fr; } } .fei-glance .fei-btn--link .elementor-button { color: var(--fei-blue-dark); } /* Info-card photos: frame faces (portrait sources like support.jpg) */ .fei-glance--info .fei-glance__photo img { object-position: center 22%; } .fei-glance--info .fei-glance__photo img { object-position: center 30%; } .fei-glance .fei-btn--link .elementor-button { padding-left: 0; padding-right: 0; } .fei-glance .elementor-widget-button.fei-btn--link { align-self: flex-start; } /* ========================================================================== Calls to action v4 (client: "more calls to action, straight to the point") Apply Now opens the original lead form; Call uses FEI's main number. ========================================================================== */ .fei-inline-cta { background: #fff; border: 1px solid var(--fei-line); border-left: 4px solid var(--fei-gold); padding: 22px 26px !important; } .fei-inline-cta__copy p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--fei-navy); } @media (min-width: 1025px) { /* one line: facts left, buttons right */ .fei-inline-cta__copy { flex: 1 1 220px; } .fei-inline-cta .fei-btn-row { flex: 0 0 auto; width: auto !important; --width: auto; } } @media (max-width: 1024px) { .fei-inline-cta__copy, .fei-inline-cta .fei-btn-row { flex: 0 0 auto; } } @media (max-width: 767px) { .fei-inline-cta { padding: 20px !important; } } /* Phone glyph on every call button */ .elementor-button[href^="tel:"] .elementor-button-content-wrapper::before { content: ""; width: 17px; height: 17px; flex: 0 0 17px; margin-right: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; } .elementor-button[href^="tel:"] .elementor-button-content-wrapper { align-items: center; } /* Sticky mobile action bar */ .fei-mbar { display: none; } @media (max-width: 767px) { .fei-mbar { position: fixed; z-index: 990; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 21, 48, .97); box-shadow: 0 -10px 30px rgba(0, 0, 0, .28); transform: translateY(110%); transition: transform .4s cubic-bezier(.19, 1, .22, 1); } .fei-mbar.is-on { transform: none; } .fei-mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; font: 700 15px/1.2 var(--fei-font); text-decoration: none; text-align: center; } .fei-mbar__apply { background: var(--fei-gold); color: var(--fei-navy); } .fei-mbar__call { border: 2px solid rgba(255, 255, 255, .75); color: #fff; } .fei-mbar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .fei-mbar { transition: none; } } /* ========================================================================== Video v4: FEI's own films ========================================================================== */ /* Home banner loop: fades in over the identical still once it is actually playing */ .fei-cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; filter: saturate(.7); opacity: 0; transition: opacity 1s ease; pointer-events: none; } .fei-cine__video.is-playing { opacity: 1; } /* Play button on a card photo */ .fei-glance__photo > .elementor-widget-html:has(.fei-play), .fei-glance__photo > .e-con-inner > .elementor-widget-html:has(.fei-play) { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; z-index: 2; pointer-events: none; } .fei-play { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; padding: 0; border: 0; background: rgba(11, 21, 48, .78); cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: background .2s, transform .2s cubic-bezier(.19, 1, .22, 1); } .fei-play span { width: 0; height: 0; margin-left: 5px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .fei-play:hover { background: var(--fei-gold); transform: translate(-50%, -50%) scale(1.06); } .fei-play:hover span { border-left-color: var(--fei-navy); } .fei-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Film dialog */ .fei-film { width: min(1120px, 92vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; } .fei-film::backdrop { background: rgba(5, 10, 25, .9); } .fei-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } .fei-film__close { position: absolute; top: -52px; right: -6px; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: #fff; font: 400 38px/1 var(--fei-font); cursor: pointer; } .fei-film__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Student stories: vertical testimonial reels (home), tap to play in the film dialog */ .fei-reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .fei-reels li { margin: 0; } .fei-reel { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; } .fei-reel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.19, 1, .22, 1); } .fei-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 21, 48, .88) 0%, rgba(11, 21, 48, 0) 42%); pointer-events: none; } .fei-reel:hover img { transform: scale(1.04); } .fei-reel__play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; display: grid; place-items: center; background: rgba(11, 21, 48, .78); transition: background .2s; } .fei-reel__play::before { content: ""; margin-left: 4px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .fei-reel:hover .fei-reel__play { background: var(--fei-gold); } .fei-reel:hover .fei-reel__play::before { border-left-color: var(--fei-navy); } .fei-reel__cat { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; color: #fff; text-align: left; font: italic 400 18px/1.2 var(--fei-serif); } .fei-reel:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (max-width: 1024px) { .fei-reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 240px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .fei-reels li { scroll-snap-align: start; } } @media (max-width: 767px) { .fei-reels { grid-auto-columns: 62vw; gap: 12px; } } .fei-film.is-portrait { width: min(420px, 88vw, calc((100vh - 140px) * 9 / 16)); } .fei-film.is-portrait video { aspect-ratio: 9 / 16; } /* The kit's global