/** Variables **/ :root { --nsu-green: #007A53; --nsu-yellow: #F3D03E; --nsu-black: #000; --nsu-gray: #54585A; --nsu-font: 'proxima-nova', Arial, Arial, Helvetica, sans-serif; } /** END Variables **/ /** reset code **/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } strong { font-weight: bold; } em { font-style: italic; } /** END reset code **/ /** Typography **/ body { color: var(--nsu-black); font: 1rem var(--nsu-font); } a { color: var(--nsu-green); } a:hover { color: var(--nsu-black); text-decoration: none; } h1, h2 { color: var(--nsu-green); font-weight: 700; text-transform: uppercase; } h1 { font-size: 37px; } h2 { font-size: 1.5rem; } h3 { color: var(--nsu-black); font-size: 28px; font-weight: 700; margin-bottom: .25rem; } small { font-size: 1rem; } hr { margin: .5rem 0 0; } /** END Typography **/ /** Grids **/ .gradcontainer { margin: 0 auto; max-width: 1320px; position: relative; padding: 0 2rem; } .gradcontainer-fluid { margin: 0 auto; width: 100%; } .gradrow { display: flex; justify-content: space-between; flex-wrap: wrap; } /** END Grids **/ /** Mobile Navigation **/ .gradmobilenav { height: 100%; width: 0; position: fixed; z-index: 2; left: 0; top: 0; background-color: var(--nsu-green); background-color: rgba(0,122,83,.95); overflow-x: hidden; transition: 0.5s; display: none; } .gradmobilenav__overlay-content { position: relative; top: 10%; width: 100%; text-align: center; margin-top: 30px; } .gradmobilenav__overlay-content img { max-width: 75px; } .gradmobilenav a { padding: 8px; text-decoration: none; font-size: 1.25rem; color: #fff; display: block; transition: .3s; text-transform: uppercase; font-weight: bold; cursor: pointer; } .gradmobilenav a:hover, .gradmobilenav a:focus { color: var(--nsu-yellow); } .gradmobilenav .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } .gradmobilenav__dropdown { display: none; padding: 1rem 0; } .gradmobilenav .gradmobilenav__dropdown-link { text-transform: none; font-weight: normal; } .gradmobilenav__dropdown-header .fa { font-size: 1.5rem; } .gradmobilenav__dropdown-header span.material-symbols-outlined { font-size: 2rem; position: relative; top: 9px; font-weight: bold; } @media screen and (max-height: 450px) { .gradmobilenav a {font-size: 20px} .gradmobilenav .closebtn { font-size: 40px; top: 15px; right: 35px; } } @media (min-width: 768px) { .gradmobilenav__dropdown-header span.material-symbols-outlined { font-size: 2.75rem; top: 11px; } .gradmobilenav a { font-size: 1.75rem; } .gradmobilenav__dropdown-header .fa { font-size: 2rem; } } /** END Mobile Navigation **/ /** Navigation **/ .gradheader { align-items: center; display: flex; justify-content: space-between; } .gradheader__navmenulogo { align-items: center; display: flex; flex-grow: 1; } .gradheader__navmenu { background: var(--nsu-green); cursor: pointer; font-size: 3rem; height: 84px; text-align: center; width: 84px; } .gradheader__navmenu:hover { background: var(--nsu-yellow); } .gradheader__navmenu-icon { color: #fff; position: relative; top: 50%; transform: translateY(-50%); font-size: 2.5rem; display: flex; justify-content: center; } .gradheader__navmenu-icon span { font-weight: bold; font-size: 3rem; } .gradheader__navmenu:hover .gradheader__navmenu-icon { color: var(--nsu-black); } .gradheader__logo { display: flex; align-items: center; } .gradheader__logo img { height: 65px; padding: 0 1rem; box-sizing: border-box; } .gradheader__logo a { text-decoration: none; color: var(--nsu-black); text-decoration: none; } .gradheader__logo-school { color: var(--nsu-black); border-left: 1px solid; padding-left: 1rem; font-size: 1rem; display: none; font-weight: bold; } .gradheader__nav { display: none; } .gradheader__nav-links { display: flex; } .gradheader__nav-links li { margin-right: 2rem; } .gradheader__nav-links li:last-child { margin-right: 1rem; } .gradheader__nav-links a { color: var(--nsu-black); font-weight: bold; text-decoration: none; } .gradheader__nav-links a:hover, .gradheader__nav-links a:active { color: var(--nsu-green); } .gradheader__nav-links span { cursor: pointer; } .gradheader__skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; padding: 5px 10px; background: var(--nsu-green); color: #fff; font-weight: bold; align-self: baseline; } .gradheader__skip:focus { position: static; width: auto; height: auto; } .gradheader__skip:focus, .gradheader__skip:hover { color: #fff; } @media (min-width: 960px) { .gradheader__nav { display: initial; } } @media (min-width: 1280px) { .gradheader__navmenu { display: none; } .gradheader__logo { padding: 9.5px 0; } .gradheader__logo img { padding: 0 1rem 0 2rem; } .gradheader__nav-links li:last-child { margin-right: 1.5rem; } .gradheader__logo-school { display: inline-block; } } @media (min-width: 1600px) { .gradheader__logo-school { font-size: 1.5rem; } } /** END Navigation **/ /** Subnav **/ .gradsubnavigation { display: none; background: var(--nsu-green); color: #fff; border-bottom: .625rem solid var(--nsu-yellow); } .gradsubnavigation__container { margin: 0 auto; max-width: 1320px; } .gradsubnavigation__menu { display: none; text-align: center; font-size: 1rem; font-weight: bold; text-decoration: none; text-transform: uppercase; color: #fff; padding: 1rem 0; } .gradsubnavigation__menu:hover { color: #fff; } .gradsubnavigation__links { display: none; justify-content: space-between; flex-wrap: wrap; } .gradsubnavigation__link, .gradsubnavigation__dropdown-header { box-sizing: border-box; color: #fff; flex-grow: 1; font-size: 1rem; font-weight: bold; height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; flex-basis: 100%; display: flex; justify-content: center; align-items: center; } .gradsubnavigation__link:hover, .gradsubnavigation__link:focus, .gradsubnavigation__link:active { background: var(--nsu-yellow); color: var(--nsu-black); } .gradsubnavigation__dropdown { position: relative; cursor: pointer; } .gradsubnavigation__dropdown:hover, .gradsubnavigation__dropdown:focus, .gradsubnavigation__dropdown:active { color: var(--nsu-black); } .gradsubnavigation__dropdown-content { display: none; position: absolute; background: var(--nsu-green); width: 100%; z-index: 3; left: 0; top: 50px; } .gradsubnavigation__dropdown-link { float: none; color: #fff; padding: 1rem .5rem; text-decoration: none; text-align: center; display: block; text-transform: none; } .gradsubnavigation__dropdown-link:hover, .gradsubnavigation__dropdown-link:active, .gradsubnavigation__dropdown-link:focus { background: var(--nsu-yellow); color: var(--nsu-black); } .gradsubnavigation__dropdown:hover .gradsubnavigation__dropdown-header, .gradsubnavigation__dropdown:focus .gradsubnavigation__dropdown-header, .gradsubnavigation__dropdown:active .gradsubnavigation__dropdown-header { color: var(--nsu-black); } .gradsubnavigation__dropdown:hover .gradsubnavigation__dropdown-content, .gradsubnavigation__dropdown:focus .gradsubnavigation__dropdown-content, .gradsubnavigation__dropdown:focus-within .gradsubnavigation__dropdown-content, .gradsubnavigation__dropdown:active .gradsubnavigation__dropdown-content { display: block; z-index: 2; } @media (min-width: 1280px) { .gradsubnavigation { display: block; } .gradsubnavigation__links { display: flex; } .gradsubnavigation__link { flex-basis: auto; } .gradsubnavigation__menu { display: none; } } @media (min-width: 1440px) { .gradsubnavigation__link, .gradsubnavigation__dropdown-header { font-size: 1.25rem; height: 75px; } .gradsubnavigation__dropdown-content { top: 75px; } } /** END Subnav **/ /** Banner Component **/ .gradbanner { background: var(--nsu-yellow); width: 100%; color: var(--nsu-black); text-align: center; padding: .5rem 0; z-index: 1; font-weight: bold; } @media (min-width: 1280px) { .gradbanner { font-size: 1.25rem; display: none; } } /** END Banner Component **/ /** Image Carousel **/ .gradcarousel { margin: auto; max-width: 100%; position: relative; height: 400px; } .gradcarousel__slide { display: none; height: 400px; } .gradcarousel__slide img { height: 400px; object-fit: cover; object-position: top; } .gradcarousel__slide-prev, .gradcarousel__slide-next { background-color: var(--nsu-green); border-radius: 0; color: #fff; cursor: pointer; font-weight: bold; font-size: 1rem; margin-top: -22px; padding: 1rem; position: absolute; top: 37%; transition: .6s ease; user-select: none; width: auto; z-index: 1; } .gradcarousel__slide-pauseplay { background-color: transparent; border-radius: 0; color: #fff; cursor: pointer; font-weight: bold; font-size: 1rem; line-height: 1; padding: .5rem 1rem; position: absolute; transition: .6s ease; user-select: none; width: auto; right: 0; z-index: 1; bottom: 2rem; } .gradcarousel__slide-pauseplay span { font-variation-settings: 'FILL' 1; font-size: 2rem; } .gradcarousel__slide-pauseplay:hover, .gradcarousel__slide-pauseplay:hover { color: var(--nsu-yellow); } .gradcarousel__slide-prev:hover, .gradcarousel__slide-next:hover { background-color: var(--nsu-yellow); color: var(--nsu-black); } .gradcarousel__slide-next { right: 0; } .gradcarousel__slide-caption { background: var(--nsu-green); background: linear-gradient(to top, rgba(0, 122, 83, .85) 50%, transparent); color: #fff; font-size: 1rem; line-height: normal; margin: 0 auto; padding: 6rem 0 2rem; position: absolute; width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content: center; bottom: 0; } .gradcarousel__slide-caption > div { max-width: 1320px; position: relative; padding: 0 3rem 0 2rem; width: 100%; margin: 0 auto; } .gradcarousel__slide-caption p { margin-bottom: 0; line-height: 1; } .gradcarousel__slide-caption a, .gradcarousel__slide-caption a:hover { color: var(--nsu-yellow); text-decoration: underline; } .gradcarousel__button { background: transparent; border-color: #fff; color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 10px 22px 9px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; margin-top: 1rem; } .gradcarousel__button:hover { background: #009465; border-color: #009465; color: #fff; } .gradcarousel__slide-caption h3 { color: var(--nsu-yellow); font-size: 1.25rem; text-transform: uppercase; line-height: 1; } .gradcarousel__caption-container { position: absolute; bottom: 2rem; z-index: 1; display: none; justify-content: center; margin: 0 auto; max-width: 1320px; padding: 0 2rem; right: 0; left: 0; } .gradcarousel__caption { background: var(--nsu-black); color: #fff; flex-basis: 25%; padding: 2rem; margin-right: 1.5rem; font-size: 1.25rem; cursor: pointer; display: block; text-decoration: none; } .gradcarousel__caption:hover { background: var(--nsu-yellow); color: var(--nsu-black); } .gradcarousel__caption:hover .gradcarousel__button { background: var(--nsu-green); border-color: var(--nsu-green); color: #fff; } .gradcarousel__caption:hover h3 { color: var(--nsu-black); } .gradcarousel__caption:last-child { margin-right: 0; } .gradcarousel__caption h3 { color: #fff; } .gradcarousel__fade { animation-name: gradcarousel-fade; animation-duration: 1.5s; } @keyframes gradcarousel-fade { from {opacity: .4} to {opacity: 1} } @media (min-width: 768px) { .gradcarousel__slide, .gradcarousel { height: 400px; } .gradcarousel__slide-prev, .gradcarousel__slide-next { top: 50%; } .gradcarousel__slide-pauseplay { right: 1.5rem; } } @media (min-width: 1280px) { .gradcarousel__slide, .gradcarousel { height: calc(100vh - 90px - 50px); } .gradcarousel__slide img { height: calc(100vh - 90px - 50px); } .gradcarousel__slide-prev, .gradcarousel__slide-next { font-size: 2rem; } .gradcarousel__slide-caption { padding: 6rem 0 3rem; } .gradcarousel__slide-caption h3 { font-size: 2rem; margin-bottom: .35rem; } .gradcarousel__slide-caption p { font-size: 1.5rem; } .gradcarousel__button { font-size: 1.25rem; } .gradcarousel__slide-pauseplay { font-size: 2rem; bottom: 3rem; } .gradcarousel__slide-pauseplay span { font-size: 3rem; } } @media (min-width: 1440px) { .gradcarousel__slide-caption { padding: 8rem 0 3rem; } .gradcarousel__slide-caption p { font-size: 2rem; } .gradcarousel__slide-caption h3 { font-size: 2.5rem; } .gradcarousel__slide, .gradcarousel { height: calc(100vh - 84px - 85px); } .gradcarousel__slide img { height: calc(100vh - 84px - 85px); } .gradcarousel__caption-container { display: flex; } } /** END Image Carousel **/ /** Spotlight Hero **/ .grad__spotlighthero { height: 550px; width: 100%; position: relative; background: url('/NSU/media/Photos/2024/career-services/Graduate-Information-banner-02.jpg') center no-repeat; background-size: cover; font-size: 2rem; margin-bottom: 2rem; } .grad__spotlighthero .grad__spotlighthero-caption { padding: 8rem 2rem 2rem; background: linear-gradient(to top, rgba(0, 122, 83, .85) 50%, transparent); position: absolute; align-content: center; display: flex; bottom: 0; color: #fff; width: 100%; box-sizing: border-box; } .grad__spotlighthero .grad__spotlighthero-caption h1 { color: var(--nsu-yellow); font-size: 2.5rem; text-transform: uppercase; line-height: 1; } .grad__spotlighthero-button { background: transparent; border-color: #fff; color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 1.25rem; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 10px 22px 9px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; } .grad__spotlighthero-button:hover { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); } .grad__ss { border: 4px solid var(--nsu-green); text-align: center; margin-bottom: 2rem; } .grad__ss-title { background: var(--nsu-green); color: #fff; font-weight: bold; padding: .5rem 0; } .grad__spotlighthero-intro { display: flex; justify-content: space-between; flex-wrap: wrap; } .grad__spotlighthero-intro h2:first-child { margin-top: 0; } .grad__spotlighthero-intro .intro, .grad__spotlighthero-intro .spartansheet { flex-basis: 100%; } .grad__ss-body { font-size: 18px; } .grad__ss-body-line { display: flex; justify-content: center; padding: .5rem 0; } .grad__ss-body-line:last-child { display: inline-block; } .grad__ss-body-line:nth-child(odd) { background: #f2f2f2; } .grad__ss-body-line .label { font-weight: bold; margin-right: .5rem; } .grad__ss-body-buttons { margin: 1rem 0; } .grad__ss-body-buttons .program__button, .grad__ss-body-buttons .program__button-secondary { padding: 5px 10px; } .program__button { background: var(--nsu-green); color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border: 3px solid var(--nsu-green); border-radius: 0; padding: 10px 15px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; flex-basis: 100%; text-align: center; max-width: 175px; } .program__button:hover { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); } .program__button-inverse { background: #fff; border: 3px solid var(--nsu-green); color: var(--nsu-green); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-radius: 0; padding: 10px 15px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; margin: .5rem 0 0 0; flex-basis: 100%; text-align: center; max-width: 175px; } .program__button-inverse:hover { background: var(--nsu-green); color: #fff; } .program__button-secondary { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; border-radius: 0; padding: 10px 15px; flex-basis: 100%; text-align: center; max-width: 175px; } .program__button-secondary:hover { color: var(--nsu-black); background: #f4d557; border-color: #f4d557; } .program__button-inverse, .program__button-secondary { margin: 0 0 0 1rem; } .spotlight__testimonial-container { display: flex; padding: 2rem; background: #f2f2f2; justify-content: space-between; margin: 2rem 0; align-items: center; flex-wrap: wrap; } .spotlight__testimonial-container .content { flex-basis: 100%; order: 1; text-align: center; } .spotlight__testimonial-container .feat-image { flex-basis: 100%; } .spotlight__testimonial-container .feat-image img { display: block; border-radius: 50%; width: 100%; border: 4px solid var(--nsu-gray); height: auto; max-width: 300px; margin: 0 auto 1rem; } .gradcontent .spotlight__testimonial-container h2 { margin: 0; } .gradcontent .spotlight__testimonial-container h4 { margin-bottom: 1rem; } .grad__whychoose-container { display: flex; justify-content: space-between; flex-wrap: wrap; } .grad__whychoose-facultyspotlight { flex-basis: 100%; } .grad__whychoose-facultyspotlight h2 { text-align: center; } .grad__facultyspotlight { text-align: center; border: 4px solid; } .gradcontent .grad__facultyspotlight h3 { color: var(--nsu-black); line-height: 1; } .grad__facultyspotlight img { border-radius: 50%; display: block; max-width: 160px; margin: 0 auto 1rem; border: 2px solid; } .grad__whychoose-content { flex-basis: 100%; } .grad__facultyspotlight-title { padding: 1rem 0; background: var(--nsu-yellow); } .grad__facultyspotlight-content { padding: 1.5rem 2rem; } @media (min-width: 768px) { .program__button-inverse, .program__button-secondary, .program__button { flex-basis: 100%; } .program__buttons { flex-wrap: nowrap; } } @media (min-width: 1025px) { .grad__spotlighthero-intro { flex-wrap: nowrap; } .grad__spotlighthero-intro .intro { flex-basis: 65%; } .grad__spotlighthero-intro .spartansheet { flex-basis: 30%; } .spotlight__testimonial-container { flex-wrap: nowrap; } .spotlight__testimonial-container .content { flex-basis: 69%; order: 2; text-align: left; } .spotlight__testimonial-container .feat-image { flex-basis: 30%; } .spotlight__testimonial-container .feat-image img { margin: 0 auto; } .grad__whychoose-container { flex-wrap: nowrap; } .grad__whychoose-facultyspotlight { flex-basis: 35%; } .grad__whychoose-content { flex-basis: 60%; } } @media (min-width: 1280px) { .grad__intro-content { flex-basis: 70%; } .grad__intro-ss { flex-basis: 25%; } .grad__intro-container { flex-wrap: nowrap; } } @media (min-width: 1440px) { .program__button, .program__button-inverse, .program__button-secondary { font-size: 18px; } } /** END Spotlight Hero **/ /** Grad Features **/ .gradfeatures { background: var(--nsu-black); display: flex; justify-content: center; flex-wrap: wrap; } .gradfeature { background: var(--nsu-black); color: #fff; flex-basis: 100%; font-size: 1.25rem; cursor: pointer; display: block; text-decoration: none; padding: 2rem; border-bottom: 1px solid #fff; flex-grow: 1; } .gradfeature__button { background: transparent; border-color: #fff; color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 10px 22px 9px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; margin-top: 1rem; } .gradfeature__button:hover { background: #009465; border-color: #009465; color: #fff; } .gradfeature:hover { background: var(--nsu-yellow); color: var(--nsu-black); } .gradfeature:hover .gradfeature__button { background: var(--nsu-green); border-color: var(--nsu-green); color: #fff; } .gradfeature:hover h3 { color: var(--nsu-black); } .gradfeature h3 { color: #fff; } @media (min-width: 768px) { .gradfeature { flex-basis: 40%; } .gradfeature:nth-child(odd) { border-right: 1px solid #fff; } } @media (min-width: 1280px) { .gradfeature { flex-basis: 20%; border-right: 1px solid #fff; } .gradfeature:last-child { border-right: 0; } } @media (min-width: 1440px) { .gradfeature { display: none; } } /** END Grad Features **/ /** Grad Featured **/ .gradfeatured { padding: 30px 0 50px; } @media (min-width: 768px) { .gradfeatured { padding: 50px 0; } } /** END Grad Featured **/ /** Intro Component **/ .gradintro { box-sizing: border-box; border: 6px solid var(--nsu-green); flex-basis: 100%; padding: 2rem; margin-bottom: 2rem; } .gradintro h2 { color: var(--nsu-black); font-size: 1.5rem; margin-bottom: 1rem; text-transform: uppercase; } .gradintro p { font-size: 1.25rem; margin-bottom: 1rem; } .gradintro__buttons { display: flex; flex-wrap: wrap; } .gradintro__button { background: var(--nsu-green); color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border: 3px solid var(--nsu-green); border-radius: 0; padding: 10px 15px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; flex-basis: 100%; text-align: center; max-width: 210px; } .gradintro__button:hover { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); } .gradintro__button-secondary { background: #fff; border: 3px solid var(--nsu-green); color: var(--nsu-green); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-radius: 0; padding: 10px 15px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; margin: .5rem 0 0 0; flex-basis: 100%; text-align: center; max-width: 210px; } .gradintro__button-secondary:hover { background: var(--nsu-green); color: #fff; } @media (min-width: 568px) { .gradintro__button-secondary { margin: 0 0 0 .5rem; } } @media (min-width: 768px) { .gradintro__button-secondary, .gradintro__button { flex-basis: 100%; } .gradintro__buttons { flex-wrap: nowrap; } .gradintro__button-secondary { margin: 0 0 0 .5rem; } } @media (min-width: 1280px) { .gradintro { flex-basis: 39%; padding: 42px; margin-bottom: 0; } } @media (min-width: 1440px) { .gradintro__button, .gradintro__button-secondary { font-size: 18px; } } @media (min-width: 1600px) { .gradintro h2 { font-size: 1.75rem; } .gradintro p { font-size: 1.5rem; } } /** END Intro Component **/ /** Program Spotlight Component **/ .gradspotlight { align-items: center; background: var(--nsu-yellow); display: flex; flex-basis: 100%; flex-wrap: wrap; } .gradspotlight__content, .gradspotlight__featimage { flex: 0 0 100%; } .gradspotlight__content { box-sizing: border-box; padding: 2rem; } .gradspotlight__content-subtitle { font-size: 1.5rem; text-transform: uppercase; } .gradspotlight__content h2 { color: var(--nsu-black); font-size: 1.5rem; margin-bottom: 1rem; text-transform: uppercase; } .gradspotlight__button { background: var(--nsu-green); border-color: var(--nsu-green); color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 10px 22px 9px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; } .gradspotlight__button:hover { background: #009465; border-color: #009465; color: #fff; } .gradspotlight__featimage { display: flex; height: auto; justify-content: center; } .gradspotlight__featimage img { width: 100%; object-fit: cover; } @media (min-width: 768px) { .gradspotlight__content h2 { font-size: 2rem; } .gradspotlight { flex-wrap: nowrap; } .gradspotlight__content, .gradspotlight__featimage { flex: 0 0 50%; } .gradspotlight__featimage { display: flex; height: 100%; justify-content: center; flex-shrink: 1; } .gradspotlight__button { font-size: 20px; } } @media (min-width: 1280px) { .gradspotlight__content { padding: 42px; } .gradspotlight { flex-basis: 59%; } } /** END Program Spotlight Component **/ /** Calendar Component **/ .gradcalendar { padding: 50px 0; background: url('/NSU/media/Media-Library/2025/grad/nsu-texture.svg') no-repeat var(--nsu-green) left center; color: white; background-size: cover; appearance: none; } #gradCalendar.fc .fc-toolbar { flex-wrap: wrap; } #gradCalendar { flex-grow: 1; margin-bottom: 50px; max-height: 550px; } #gradCalendar .fc-toolbar-title { color: #fff; font-size: 1.25rem; } #gradCalendar th.fc-col-header-cell { background: var(--nsu-green); border: 1px solid var(--nsu-black); } #gradCalendar.fc-theme-standard .fc-scrollgrid { border: 1px solid var(--nsu-black); } #gradCalendar.fc .fc-view-harness-active > .fc-view { background: #fff; } #gradCalendar .fc-button-primary, .gradcalendar__button a{ background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; padding: revert; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; border-radius: 0; padding: 5px 12px; } #gradCalendar .fc-button-primary:disabled { cursor: not-allowed; background: #f5f5f5; border-color: #f5f5f5; color: #54585A; } #gradCalendar .fc-button-primary:hover:not(:disabled), .gradcalendar__button a:hover { color: var(--nsu-black); background: #f4d557; border-color: #f4d557; } .gradcalendar__button { text-align: center; } #gradCalendar .fc-prev-button { margin-right: .5rem; } #gradCalendar.fc-theme-standard .fc-list { background: #fff; border: 1px solid var(--nsu-black); } #gradCalendar .fc-list-empty { background: #fff; color: var(--nsu-black); } #gradCalendar table.fc-list-table { font-size: 1rem; color: #fff; } #gradCalendar.fc-theme-standard .fc-list-day-cushion { background: var(--nsu-green); } #gradCalendar th a { color: #fff; } #gradCalendar .fc-event { color: var(--nsu-black); } #gradCalendar .fc-toolbar-chunk:nth-child(3) { display: none; } #gradCalendar.fc .fc-scroller-liquid { overflow-x: auto !important; } @media (min-width: 768px) { .gradcalendar { background-size: contain; } #gradCalendar table.fc-list-table { font-size: 1.5rem; color: #fff; } #gradCalendar .fc-button-primary, .gradcalendar__button a{ font-size: 20px; padding: 10px 22px 9px; } #gradCalendar .fc-toolbar-title { font-size: 2rem; } } @media (min-width: 1280px) { #gradCalendar .fc-toolbar-chunk:nth-child(3) { display: block; } } /** END Calendar Component **/ /** Calendar Widget **/ .gradcalendar__container { display: flex; justify-content: center; margin-top: 1rem; } .gradcalendar h2 { color: var(--nsu-yellow); font-size: 2rem; text-align: center; } .gradcalendar p { font-size: 1.5rem; text-align: center; } .gradcalendar .localist_widget_container { background: transparent; } .gradcalendar .localist_widget_container li.lw_event_item { margin: 0 2rem 1rem; border: 2px solid var(--nsu-black); } .gradcalendar .localist_widget_container div.lw_event_item_title a { color: var(--nsu-green); } .gradcalendar .localist_widget_container div.lw_event_item_description { color: var(--nsu-black); } .gradcalendar .localist_widget_container .action_button a { background: var(--nsu-green); color: #fff; margin-top: 0; } .gradcalendar .localist_widget_container .action_button a:hover { background: var(--nsu-yellow); color: var(--nsu-black); } .gradcalendar .localist_widget_container span.lw_event_item_date { background: var(--nsu-gray); } .gradcalendar .localist_widget_container div.lw_event_item_time { color: var(--nsu-black); } .gradcalendar .localist_widget_container a.lw_event_item_image { border-right: 2px solid var(--nsu-black); max-width: 150px; } .gradcalendar .localist_widget_container div.lw_event_content { padding: 5px 20px 0; } .gradcalendar .localist_widget_container .lw_event_meta { margin: 10px 0; } @media (max-width: 945px) { .gradcalendar .localist_widget_container a.lw_event_item_image { border: 2px solid var(--nsu-black); float: none; margin: .5rem auto; } .localist_widget_container div.lw_event_item_title { line-height: normal; margin-bottom: .5rem; } } /** End Calendar Widget **/ /** Breadcrumbs Component **/ .gradcontent__breadcrumbs { font-size: 1.25rem; margin: 0 0 1rem; } .gradcontent .gradcontent__breadcrumbs a span { color: var(--nsu-green); } .gradcontent .gradcontent__breadcrumbs a span:hover, .gradcontent .gradcontent__breadcrumbs a:hover { color: var(--nsu-yellow); background: transparent; } .gradcontent__breadcrumbs span { font-variation-settings: 'FILL' 1; font-weight: bold; color: var(--nsu-yellow); font-size: 1.5rem; } .gradcontent__breadcrumbs span#gradcontent__breadcrumbs-title { color: var(--nsu-black); font-weight: normal; } .gradcontent__breadcrumbs a:hover, .gradcontent__breadcrumbs a:active { color: var(--nsu-yellow); } .gradcontent__breadcrumbs .fa-caret-right { color: var(--nsu-yellow); margin: 0 .5rem; } .gradcontent__breadcrumbs span.material-symbols-outlined { position: relative; top: 3px; } /** END Breadcrumbs Component **/ /** Content Component **/ .gradcontent { padding: 50px 0; position: relative; font-size: 1.5rem; } .gradcontent h1 { margin: 0 0 1rem; color: var(--nsu-green); } .gradcontent h2 { margin: 1.5rem 0 .75rem; color: var(--nsu-black); font-size: 1.75rem; } .gradcontent h3 { color: var(--nsu-gray); font-size: 26px; } .gradcontent p { margin-bottom: .75rem; } .gradcontent__decor { width: 15pt; position: absolute; left: 0; bottom: 0; background: var(--nsu-yellow); height: 55%; } .gradcontent a:hover { color: var(--nsu-black); background: var(--nsu-yellow); text-decoration: none; } .gradcontainer ul { margin-bottom: 1rem; } .gradcontainer ul li:before { content: url('/NSU/media/Media-Library/2025/grad/nsu-bullet.png'); position: relative; top: 5px; margin-right: .5rem; } .gradcontent hr { margin: 1rem 0; } .gradcontent__faq { margin: .5rem 0 2rem; } .gradcontent__accordion-button { color: var(--nsu-black); cursor: pointer; padding: 18px 0; width: 100%; text-align: left; transition: .4s; font-weight: bold; font-size: 1.5rem; background: transparent; border: 0; } .gradcontent__accordion-button::marker { color: var(--nsu-yellow); } .gradcontent__accordion-button:hover, .gradcontent__accordion-button.active { color: var(--nsu-green); } .gradcontent__faq details { margin-bottom: .5rem; } .gradcontent__accordion-answer ol { list-style: initial; margin: 1rem 0 1rem 4rem; } .gradcontent__accordion-answer ol[type="a"] { list-style: lower-alpha; } .gradcontent__faq details:last-child { margin-bottom: 0; } .gradcontent .gradstaffgrid { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; } .gradcontent .gradstaffgrid-item { display: flex; justify-content: space-between; flex-basis: 100%; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap; } .gradcontent .gradstaffgrid-item .photo { flex-basis: 37%; border: 3px solid var(--nsu-yellow); } .gradcontent .gradstaffgrid-item .info { flex-basis: 100%; } .gradcontent .gradstaffgrid-item .info em { font-weight: bold; color: var(--nsu-green); } .gradcontent__image-header { max-width: 100%; height: auto; } .gradorientation__button { background: var(--nsu-green); border-color: var(--nsu-green); color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 1.25rem; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 1.5rem; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; position: relative; transform: translateX(-50%); left: 50%; margin: 1.5rem auto 12px; text-align: center; } .gradorientation__button:hover { background: #009465; border-color: #009465; color: #fff; } @media (min-width: 768px) { .gradcontent .gradstaffgrid-item { flex-basis: 100%; } .gradcontent .gradstaffgrid-item .photo { flex-basis: 20%; } } @media (min-width: 1280px) { .gradcontent .gradstaffgrid-item { flex-basis: 32%; } .gradcontent .gradstaffgrid-item .photo { flex-basis: 25%; } } /** END Content Component **/ /** Last Call Component **/ .gradlastcall { padding: 50px 0; } .gradlastcall__container { border: 6px solid var(--nsu-green); box-sizing: border-box; padding: 2rem; text-align: center; } .gradlastcall h2 { color: var(--nsu-black); font-size: 2rem; margin-bottom: 1rem; } .gradlastcall p { font-size: 1.5rem; margin-bottom: 1.5rem; } .gradlastcall__button { background: var(--nsu-green); border-color: var(--nsu-green); color: #fff; box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 10px 22px 9px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; width: 162px; margin-bottom: .5rem; } .gradlastcall__button:hover { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); } .gradlastcall__button-secondary { background: transparent; border-color: var(--nsu-green); color: var(--nsu-green); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; line-height: 1; padding: 10px 22px 9px; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; width: 162px; } .gradlastcall__button-secondary:hover { background: var(--nsu-green); color: #fff; } @media (min-width: 768px) { .gradlastcall__container { padding: 40px; } .gradlastcall__button { margin-bottom: 0; margin-right: .5rem; } .gradlastcall__button, .gradlastcall__button-secondary { font-size: 18px; } } /** END Last Call Component **/ /** Interest Component **/ .gradinterest { padding: 50px 0; text-align: center; background: url('/NSU/media/Media-Library/2025/grad/nsu-texture.svg') no-repeat var(--nsu-green) left center; color: white; background-size: cover; appearance: none; } .gradinterest h2 { color: #fff; font-size: 2rem; margin-bottom: 1rem; } .gradinterest p a, .gradinterest p a:hover { color: var(--nsu-yellow); } .gradinterest p { font-size: 1.5rem; margin-bottom: 1.5rem; } .gradinterest__container { border: 6px solid var(--nsu-yellow); box-sizing: border-box; padding: 2rem; } .gradinterest__button { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; padding: revert; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; border-radius: 0; padding: 5px 12px; width: 145px; margin-bottom: .5rem; } .gradinterest__button-secondary { background: #fff; border-color: #fff; color: var(--nsu-black); box-sizing: border-box; display: inline-block; font-weight: bold; font-size: 16px; border-width: 3px; border-style: solid; border-radius: 0; padding: revert; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; border-radius: 0; padding: 5px 12px; width: 142px; } .gradinterest__button:hover, .gradinterest__button:active { color: var(--nsu-black); background: #f4d557; border-color: #f4d557; } @media (min-width: 768px) { .gradinterest { background-size: contain; } .gradinterest__container { padding: 40px; } .gradinterest__button { font-size: 20px; margin-bottom: 0; margin-right: .5rem; } .gradinterest__button-secondary { font-size: 20px; } } /** END Interest Component **/ /** Footer Component **/ footer { background: #f2f2f2; border-bottom: 6px solid var(--nsu-yellow); color: #54585A; padding: 2rem 0; } .footer__container { display: flex; flex-wrap: wrap; } .footer__container a { color: #54585A; text-decoration: none; } .footer__container a:hover { color: var(--nsu-green); } .footer__info { flex: 0 0 100%; margin-bottom: 1rem; font-variation-settings: 'FILL' 1; } .footer__info span.material-symbols-outlined { color: #54585A; font-size: 1.2rem; position: relative; top: 3px; } .footer__info-phone a:hover span.material-symbols-outlined, .footer__info-address a:hover span.material-symbols-outlined { color: var(--nsu-green); } .footer__info-logo { margin-bottom: 1rem; max-height: 75px; } .footer__info-phone { font-weight: bold; } .footer__info-social { margin-top: 1rem; } .footer__info-social .fa-brands { font-size: 2rem; } .footer__info-social img { width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(33%) sepia(8%) saturate(297%) hue-rotate(155deg) brightness(91%) contrast(81%); } .footer__info-social img:hover { filter: brightness(0) saturate(100%) invert(35%) sepia(12%) saturate(6684%) hue-rotate(132deg) brightness(88%) contrast(105%); } .footer__links { display: flex; flex: 0 0 100%; flex-wrap: wrap; } .footer__links > div { flex-grow: 1; margin-bottom: 1rem; } .footer__links-title { font-weight: bold; } .footer__links a { display: block; } @media (min-width: 768px) { footer { font-size: 18px; } .footer__info { flex: 0 0 35%; margin-bottom: 0; } .footer__links { flex: 0 0 65%; } .footer__links > div { margin-bottom: 0; } } /** END Footer Component **/ /** Grad Content Events **/ .gradcontent__event { background: #eee; padding: 2.5rem; border: 1px solid #ccc; margin-bottom: 1.5rem; } .gradcontent__event:last-child { margin-bottom: 0; } .gradcontent__event h3 { color: var(--nsu-black); } .gradcontent__event-content p, .gradcontent__event-content ul li { font-size: 1.25rem; } .gradcontent__event-detail span.material-symbols-outlined { position: relative; bottom: -4px; } .gradcontent__event-button { background: var(--nsu-yellow); border-color: var(--nsu-yellow); color: var(--nsu-black); box-sizing: border-box; display: inline-block; font-weight: bold; border-width: 3px; border-style: solid; border-radius: 0; text-transform: uppercase; cursor: pointer; transition: all .5s ease 0ms; text-decoration: none; padding: 5px 12px; margin-top: 1.5rem; } .gradcontent__event-button:hover, .gradcontent__event-button:active { color: var(--nsu-black); background: #f4d557; border-color: #f4d557; } /** END Grad Content Events **/