:root {
--border-color-gray: #c4c4c4;
}
html { --8px: 0.5rem;
--14px: 0.875rem;
--15px: 0.9375rem;
--16px: 1rem;
--17px: 1.0625rem;
--18px: 1.125rem;
--19px: 1.1875rem;
--20px: 1.25rem;
--21px: 1.3125rem;
--22px: 1.375rem;
--23px: 1.4375rem;
--24px: 1.5rem;
--25px: 1.5625rem;
--26px: 1.625rem;
--27px: 1.6875rem;
--28px: 1.75rem;
--29px: 1.8125rem;
--30px: 1.875rem;
--31px: 1.9375rem;
--32px: 2rem;
--34px: 2.125rem;
--36px: 2.25rem;
--40px: 2.5rem;
--46px: 2.875rem;
--48px: 3rem;
--51px: 3.188rem;
--64px: 4rem;
--72px: 4.5rem;
}
*, *:before, *:after {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
ol, ul {
margin: 0;
padding: 0;
}
html, body {
font-size: var(--16px);
font-family: var(--il-font-sans);
}
strong {
font-weight: 700;
}
.site-main p,
.site-main span,
.site-main li { 
font-size: var(--18px);
line-height: calc(32 / 18); }
.entry-content p {
margin-top: 0;
margin-bottom: var(--40px);
} .site-main h1 {
font-family: var(--il-font-montserrat);
font-size: var(--64px);
line-height: calc(72 / 64);
font-weight: 700;
text-align: center;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 30px;
padding-right: 30px;
max-width: 1200px; z-index: 3;
color: var(--il-blue);
position: relative;
max-width: 1050px;
}
.site-main h2, .site-main .post-header h1 {
font-size: var(--32px);
line-height: calc(40 / 32);
font-weight: 700;
margin-top:0;
margin-bottom: 40px;
color: var(--il-blue);
}
.site-main h3 {
margin-top: 0;
font-size: var(--29px);
line-height: calc(40 / 29);
color: var(--il-blue);
}
.site-main h4 {
font-size: var(--25px);
color: var(--il-blue);
}
.site-main h5 {
font-size: var(--21px);
}
.site-main h6 {
font-size: var(--18px);
}  .site-main a:not(.il-button) {
color: var(--il-industrial);
text-decoration: none;
transition: color 0.2s ease-in-out;
font-size: inherit;
}
.site-main a:not(.il-button):visited {
color: var(--il-blue);
}
.site-main a:not(.il-button):focus {
color: var(--il-altgeld);
outline: 4px dotted;
outline-offset: 4px; 
}
.site-main a:not(.il-button):hover {
color: var(--il-blue);
}
.site-main a:not(.il-button):active {
color: var(--il-altgeld);
}
.entry-content a:not(.il-button) {
text-decoration: underline;
}  .il-button {
display:inline-block;
padding:12px 20px;
text-align:center;
text-decoration:none;
color: var(--il-blue);
background-color: #ffffff;
border-color: var(--il-blue);
border-radius:5px;
border-width: 2px;
border-style: solid;
font:700 1.1875rem/1.25rem var(--il-font-sans);
letter-spacing:.01em;
transition:background-color .3s;
cursor:pointer;
}
.il-button:hover {
color: #ffffff;
background-color: var(--il-blue);
}
.il-button.il-blue {
background-color: var(--il-blue);
color: #ffffff;
}
.il-button.il-orange {
background-color: var(--il-orange);
color: #ffffff;
border-color: var(--il-orange);
}
.il-button.il-orange:hover {
background-color: #ffffff;
color: var(--il-orange);
}  .hide {
display: none;
}
.text-center {
text-align: center;
}
.visually-hidden {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.semi-transparent {
position: absolute;
background-color: #ffffff;
opacity: 0.7;
z-index: 4;
width: 100%;
height: 100%;
}
.overlay {
position: relative;
}  .entry-content ol,
.entry-content ul {
margin-top: 0;
margin-bottom: var(--40px);
padding-top: 0;
padding-bottom: 0;
padding-left: 24px;
}
.entry-content li {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
ul.blocks-gallery-grid {
padding: inherit;
}
.wp-block-code {
margin-bottom: $margin;
}
code {
display: block;
width: 100%;
overflow: auto;
padding: 10px;
}
.slider {
position: relative;
}
.slick-slide {
position: relative;
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
flex-direction: column;
width:1140px;
background-color: var(--il-storm-lighter-4);
}
.slick-slide .overlay {
margin-bottom: 24px;
}
.slick-center .semi-transparent {
display: none; // allows the center slide image to be clickable
opacity: 0;
transition: opacity 0.1s;
}
.slick-slide h2, .slick-slide p {
opacity: 0;
text-align: left;
}
.slick-center h2, .slick-center p {
transition: opacity 0.1s;
opacity: 1;
}
.slick-slide h2 {
margin-bottom: 0;
}
.slick-slide p {
overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 24px;
}
.slick-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slick-dots, .button-container {
display: flex;
justify-content: center;
}
.button-container {
margin-top: 40px;
padding-bottom: 24px;
}
.site-main .slick-dots {
margin-bottom: 0;
}
.slick-dots {
gap: 12px;
list-style: none;
}
.slick-dots button {
display: none;
}
.slick-dots li::before {
display: block;
width: 34px;
height: 8px;
content: "";
background-color: var(--il-storm-lighter-3);
}
.slick-dots .slick-active::before {
background-color: var(--il-orange);
}
.button-container {	
gap: 40px;
}
.homepage-slider, .homepage-behind-scenes, .homepage-explore-categories {
background-color: var(--il-storm-lighter-4);
}
.homepage-latest-posts, .homepage-behind-scenes, .homepage-illinois-news, .homepage-explore-categories, .homepage-x-embed {
padding-top: 40px;
padding-bottom: 40px;
}
.homepage-slider {
border-bottom: 1px solid var(--border-color-gray);
}
.homepage-latest-posts .grid-container {
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 24px 24px; 
}
.homepage-behind-scenes .flex, .search .flex {
display: flex;
flex-wrap: nowrap;
gap: 24px;
border-bottom: 1px solid var(--border-color-gray);
margin-bottom: 24px;
padding-bottom: 24px;
}
.homepage-behind-scenes .flex:last-child {
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 0;
}
.homepage-x-embed .content-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.x-card {
max-width: 369px;
}
.latest-posts .grid-container {
display: grid; 
grid-template-columns: repeat(3, 1fr);
gap: 24px 24px; 
}
.post-card {
position: relative;
max-width: 364px;
max-height: 556px;
overflow: hidden;
border: 1px solid var(--il-storm);
border-bottom: 4px solid var(--il-orange);
cursor: pointer;
background-color: #ffffff;
} .site-main .category-label {
background-color: var(--il-blue);
color: #ffffff;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
line-height: calc(24 / 18);
padding: 4px 8px;
position: absolute;
top: 0;
right: 0;
z-index: 3;
}
.post-card img {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
.post-card-text {
position: static;
padding: 40px 30px 0 30px;
}
.post-card-text h2 {
font-size: var(--21px);
line-height: calc(28 / 21);
margin-bottom: 25px;
}
.fade {
position: absolute;
bottom: 0;
z-index: 3;
width: 100%;
height: 84px;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 67%)
}
ul.illinois-news-list {
list-style: none;
}
.illinois-news-item {
margin-bottom: 40px;
}
.illinois-news-item .item-wrapper {
border-left: 4px solid var(--il-orange);
padding-left: 16px;
}
.illinois-news-item + .illinois-news-item {
border-top: 2px solid var(--il-storm-lighter-3);	
padding-top: 40px;
}
.illinois-news-item h2 {
margin-bottom: 20px;
}
.illinois-news-item p {
margin-bottom: 20px;
}
.illinois-suscribe {
padding-top: 80px;
padding-bottom: 80px;
margin-bottom: 80px;
background-color: var(--il-blue);
color: #ffffff;
}
.illinois-suscribe h2 {
color: inherit;
margin-bottom: 20px;
}
.illinois-suscribe p {
margin-bottom: 40px;
}
.post-type-archive-illinois_in_news .hero {
margin-bottom: 0;
}
section.categories {
padding-bottom: 40px;
}
ul.category-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.ascend{
background: var(--il-pattern-ascend-white);
background-color: var(--il-storm-lighter-4);
}
.lines-fade{
position: relative;
}
.lines-fade::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(244,244,244,1) 17%, rgba(255,255,255,0) 100%); 
z-index: 1;
}
.hero-divider {
margin: 0;
height: 8px;
background-color: var(--il-orange);
border: 0;
}
.hero {
margin-bottom: 80px;
}
.post-header {
margin-top: 40px;
}
.site-main .post-header h1 {
padding: 0;
margin: 0;
text-align: left;
margin-bottom: 0;
}
.post-meta {
font-size: var(--16px);
line-height: calc(24 / 16);
color: var(--il-storm);
margin-bottom: 11px;
}
.post-meta .author a {
color: inherit;
text-decoration: underline;
}
.post-meta ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.post-meta li {
padding: 12px 12px 12px 0;
margin: 0 12px 0 0;
}
.post-meta li.time, .post-meta li.author, .post-meta li.author-description {
text-transform: uppercase;
border-right: 1px solid var(--il-storm);
padding-top: 6px;
padding-bottom: 6px;
}
.post-meta li:first-child {
padding-left: 0;
}
.post-meta li:last-child {
margin-right: 11px;
}
.post-meta .post-share {
flex-basis: 100%;
}
.post-share {
margin-bottom: 11px;
}
.post-share ul {
list-style: none;
display: flex;
}
.post-share a {
display: block;
width: 44px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.entry-content, .editor-note > div, .search .hero .content-container > div {
max-width: 752px;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.post > .content-container {
border-bottom: 1px solid var(--il-storm-lighter-3);
margin-bottom: 40px;
}
.featured-image img {
max-width: 100%;
display: block;
height: auto;
}
.post .featured-image {
padding-bottom: 40px;
border-bottom: 1px solid var(--il-storm-lighter-3);
}
.post footer {
border-top: 1px solid var(--il-storm-lighter-3);
}
figcaption {
font-style: italic;
font-size: var(--16px);
line-height: calc(24 / 16);
margin-top: 16px;
margin-bottom: 16px;
}
section.latest-posts {
padding-bottom: 40px;
}
ul.page-numbers {
list-style: none;
display: flex;	
padding: 24px 0 0;
}
.page-numbers a,
.page-numbers span {
line-height: calc(20 / 18);
padding: 11px 10px 9px;
border-top: 2px solid #bcbcbc;
border-bottom: 2px solid #bcbcbc;
border-left: 1px solid #bcbcbc;
border-right: 1px solid #bcbcbc;
display: block;
min-width: 42px;
text-align: center;
text-decoration: none;
font-weight: 600;
}
ul.page-numbers li:first-child a {
border-left-width: 2px;
}
ul.page-numbers li:last-child a {
border-right-width: 2px;
}
.page-numbers.current {
background-color: var(--il-blue);
color: #ffffff;
border-color: var(--il-blue);
}
.entry-content p.has-large-font-size {
font-size: var(--28px) !important;
line-height: calc(40 / 28) !important;
} .wp-block-image.alignfull {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
.wp-block-image.alignfull .wp-element-caption {
text-align: center;
background-color: var(--il-storm-lighter-4);
margin-bottom: 0;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
} .entry-content > .alignleft {
float: left;
margin-inline-start: 0;
margin-inline-end: var(--20px);
}
.entry-content > .alignright {
float: right;
margin-inline-start: var(--20px);
margin-inline-end: 0;
} .wp-block-pullquote p {
font-family: var(--il-font-serif);
font-size: var(--35px);
line-height: calc(51 / 35);
color: var(--il-blue);
font-style: italic;
margin-bottom: 11px;
text-align: left;
}
.wp-block-pullquote blockquote {
max-width: 540px;
margin: 0 auto;
}
.wp-block-pullquote p {
position: relative;
}
.wp-block-pullquote p::before, .wp-block-pullquote p::after {
color: var(--il-orange);
font-size: 150px;
display: block;
position: absolute;
}
.wp-block-pullquote p::before {
content: open-quote;
left: -75px;
top: 30px;
}
.wp-block-pullquote p::after {
content: close-quote;
right: -50px;
bottom: -50px;
}
.search-form {
display: flex;
gap: 2px;
border: 2px solid #d9d9d9;
border-radius: 4px;
background-color: #d9d9d9;
width: 100%;
height: 42px;
}
.search-label {
text-indent: -200px;
display: none;
}
.search-field, .search-button {
min-height: 100%;
}
.search-field {
border: 0;
padding: 8px;
background-color: white;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: #000000;
font-family: var(--il-font-sans);
font-size: 16px;
flex-grow: 1;
}
.search-field::placeholder {
color: var(--il-gray-2);
}
.search-button {
background-color: #ffffff;
position: relative;
padding: 8px;
border: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
display: block;
box-sizing: border-box;
overflow: hidden;
position: relative;
cursor: pointer;
background-image: url(https://cdn.brand.illinois.edu/icons/duo/blue/search.svg);
background-repeat: no-repeat;
background-position: var(--8px); center;
background-size: var(--20px);
padding: 0 1em 0 2em;
}
.search-button svg {
fill: #606060;
}
.search .hero .content-container > div {
padding-top: 80px;
padding-bottom: 80px;
}
.search .hero {
background-color: var(--il-blue);
}
.search .page-title {
color: #ffffff;
text-align: left;
font-size: var(--40px);
line-height: calc(46 / 40);
padding-top: 0px;
padding-bottom: 80px;
padding-left: 0;
padding-right: 0;
}
.search-results time {
font-weight: 700;
font-size: var(--18px);
display: block;
margin-bottom: 10px;
}
@media screen and (max-width: 1140px) {
} @media screen and (max-width: 768px) {
.homepage-latest-posts .grid-container, .latest-posts .grid-container {
grid-template-columns: repeat(2, 1fr);
}
.homepage-behind-scenes .flex {
flex-direction: column;
}
.homepage-behind-scenes .flex img {
width: 100%;
height: auto;
}
} @media screen and (max-width: 600px) {
.site-main h1 {
font-size: var(--46px);
line-height: ;
}
} @media screen and (max-width: 480px) {
.homepage-latest-posts .grid-container, .latest-posts .grid-container {
grid-template-columns: repeat(1, 1fr);
}
.post-card {
place-self: center;
}
}
.content-container {
width: 100%;
max-width: 1200px; padding-left: 30px;
padding-right: 30px;
margin-left: auto;
margin-right: auto;
}
il-header {
position: relative;
z-index: 1;
}
.site-main {
position: relative;
z-index: 0;
padding-bottom: 40px;
}