/*
Theme Name: Web Solutions
Theme URI: https://www.websolutions.com/
Author: Web Solutions
Author URI: https://www.websolutions.com/
Description: WordPress wpCode
Version: 2.0.0
Text Domain: wpcodev2
Web Solutions is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/
@charset "UTF-8";
:root {
--ws-gray: #4A4A4A;
--ws-lt-blue: #E0E6EC;
--ws-lt-blue-2: #EBF0F5;
--ws-light: #EFF2F5;
--ws-navy: #01294F;
--ws-navy-rgb: 1,41,79;
--ws-orange: #EB8228;
--ws-red: #E12A28;
--ws-red-rgb: 225,42,40;
--ws-slate: #4E6D8B;
--ws-slate-rgb: 78,109,139;
--ws-slate-2: #9BB4CC;
--ws-slate-2-rgb: 155,180,204;
--ws-yellow: #F6BF28;
--ws-pattern-right: #FFF url('/wp-content/themes/wpcode-v2/images/pattern.svg') repeat right 2px top / .75rem auto;
--ws-pattern-left: #FFF url('/wp-content/themes/wpcode-v2/images/pattern.svg') repeat left top / .75rem auto;
--ws-column-width: 7.25em;
--ws-clip-1: polygon(0 0, 100% 0, 100% calc(100% - 1.875em), 0% 100%);
--ws-clip-2: polygon(0 1.875em, 100% 0, 100% 100%, 0% 100%);
--ws-clip-3: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - 1.875em));
--ws-clip-4: polygon(0 0, 100% 1.875em, 100% 100%, 0% 100%);
}
/* open-sans-regular - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-regular.woff') format('woff');
}
/* open-sans-500 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src: url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-500.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-500.woff') format('woff');
}
/* open-sans-600 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local(''),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-600.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-600.woff') format('woff');
}
/* open-sans-700 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local(''),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-700.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-700.woff') format('woff');
}
/* open-sans-800 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: local(''),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-800.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-800.woff') format('woff');
}
/* open-sans-italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local(''),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-italic.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-italic.woff') format('woff');
}
/* open-sans-700italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local(''),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-700italic.woff2') format('woff2'),
url('/wp-content/themes/wpcode-v2/fonts/open-sans-v34-latin-700italic.woff') format('woff');
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
margin: 0;
overflow-x: hidden;
padding: 0;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.no-flow {
overflow: hidden;
}
img {
border: 0;
height: auto;
max-width: 100%;
}
ul {
padding-left: 0;
}
ul li {
list-style: none;
}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit
}
table {
border-collapse: collapse;
}
td, th {
empty-cells: show;
vertical-align: top;
text-align: left;
}
#skipNavigation {
background: #FFF;
color: #000;
left: 0;
padding: .5em;
position: absolute;
top: -1000px;
z-index: 10
}
#skipNavigation:is(:focus, :active) {
top: 0;
}
.admin-bar #skipNavigation:is(:focus, :active) {
top: 32px;
}
/*page widths*/
body>header, #mainnav, main, body>footer, #alertApp {
display: block;
width: 100%;
}
body>footer>.fatFooter,#alertApp>*,.wrap {
margin-inline: auto;
max-width: calc(72em + (2 * var(--ws-gutter)));
padding-inline: var(--ws-gutter);
position: relative;
width: 100%;
}
/* text */
body, .text, input, button, select, textarea {
color: #4A4A4A;
font-family: 'Open Sans', sans-serif;
line-height: 1.625;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* TYPEFACES ------------------------------*/
/* Open Sans Regular */
h2.h1-size>span, #intro h1>span, #state-list h2>span, article.fpc .heading h3>time, .modal-header h2, main .ctct-custom-form input[type="text"], {
font-style: normal;
font-weight: 400;
}
/* Open Sans Regular Italic */
cite, figcaption, #calendar-news time, .news .time, .italic {
font-style: italic;
font-weight: 400;
}
/* Open Sans Medium */
#details .textbox a {
font-style: normal;
font-weight: 500;
}
/* Open Sans Semibold*/
.intro, .intro p, .content :is(p, li)>a:not(.button), #ancillary a, #sidenav>ul>li>a, #hero h1>span:nth-of-type(2), #hero label>span {
font-style: normal;
font-weight: 600;
}
/* Open Sans Bold */
.bold, h1, h2, h3, h4, h5, h6, #mainnav>div>ul>li>a, #mobilenav :is(a, span), #hero h1>span:nth-of-type(1),
#two-blocks h2.h1-size>span, .button, button, input[type="button"], input[type="submit"], input[type="reset"],
.wp-block-button__link, .callout-box a, .testimonials cite>span, #calendar-news .view-all, #state-list li>a,
#college-contacts thead td, #college-contacts tbody td:first-of-type, #filters ul ul label, #filters .close,
.state-modal :is(.block, .overlay), .modal-body .message p>a, .modal-header h2>:is(.state-name, b), #keep-in-mind a {
font-style: normal;
font-weight: 700;
}
/* Open Sans Bold Italic */
blockquote, blockquote p {
font-style: italic;
font-weight: 700;
}
/* Open Sans ExtraBold */
#hero h1, #how-to-apply ol li::before, #keep-in-mind li::before {
font-style: normal;
font-weight: 800;
}
/* TEXT ELEMENTS ------------------------------ */
h1, .h1-size {
font-size: clamp(1.5em, 1.154em + 1.54vw, 2.5em); /* 360 - 1400 */
text-transform: uppercase;
}
h2, .h2-size {
font-size: clamp(1.375em, 1.115em + 1.15vw, 2.125em); /* 360 - 1400 */
}
h3, .h3-size {
font-size: clamp(1.25em, 1.034em + 0.96vw, 1.875em); /* 360 - 1400 */
}
h4, .h4-size, th, #content h3 {
font-size: clamp(1.375em, 1.31em + 0.29vw, 1.563em); /* 360 - 1400 */
}
h5, .h5-size {
font-size: clamp(1.25em, 1.207em + 0.19vw, 1.375em); /* 360 - 1400 */
}
h6, .h6-size {
font-size: clamp(1.125em, 1.082em + 0.19vw, 1.25em); /* 360 - 1400 */
}
h1, .h1-color { color: var(--ws-navy); }
h2, .h2-color { color: var(--ws-slate); }
h3, .h3-color { color: var(--ws-navy); }
h4, .h4-color, th { color: var(--ws-navy); }
h5, .h5-color { color: var(--ws-slate); }
h6, .h6-color { color: var(--ws-navy); }
.large-text {
font-size: clamp(1.25em, 1.163em + 0.38vw, 1.5em); /* 360 - 1400 */
}
.highlight h2 {
margin: 0 0 .75rem;
}
.highlight h3 {font-size: 1.4rem}
.uppercase {
text-transform: uppercase;
}
h2.h1-size>span,
#intro h1>span {
display: block;
font-size: .65em;
line-height: 1.15;
text-transform: none;
}
:is(#two-blocks, #photoleft-text, .testimonials) h2.h1-size>span {
color: var(--ws-slate);
}
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).gray, .gray * { color: var(--ws-gray); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).lt-blue, .lt-blue * { color: var(--ws-lt-blue); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).navy, .navy * { color: var(--ws-navy); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).orange, .orange * { color: var(--ws-orange); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).red, .red * { color: var(--ws-red); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).slate, .slate * { color: var(--ws-slate); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).yellow, .yellow * { color: var(--ws-yellow); }
:is(p, li, strong, h1, h2, h3, h4, h5, span:not(.button)).white, .white * { color: #FFF; }
.intro {
font-size: clamp(1.125em, 1.082em + 0.19vw, 1.25em); /* 360 - 1400 */
line-height: 1.5;
margin: 0 0 1em;
}
.intro p {
font-size: 1em;
}
p, .text {
font-size: clamp(1em, 0.957em + 0.19vw, 1.125em); /* 360 - 1400 */
}
p>:is(b, strong) {
color: var(--ws-navy);
}
:is(.split-ribbon, #text-photo) p>:is(b, strong) {
color: #FFF;
}
:is(nav, .social) ul {
margin: 0;
}
.mt-1 { margin-top: 1em !important; }
.mt-2 { margin-top: 2em !important; }
.mt-3 { margin-top: 3em !important; }
.mb-1 { margin-bottom: 1em !important; }
.mb-3 { margin-bottom: 3em !important; }
.mb-2 { margin-bottom: 2em !important; }
/* ------------------------------ */
a, a * {
color: var(--ws-red);
text-decoration: none;
}
``
p, hr, blockquote, dd, ol {
margin-block: 0 1rem;
}
h1, h2, h3, h4, h5, h6, th {
line-height: 1.1;
margin-block: 0 1.25rem;
}
h2 + figure,
:is(p, ul, ol, .intro, div, figure) + :is(h2, h3, h4, h5, h6, .wp-block-buttons) {
margin-top: 1.5em;
}
.textColor, th, dt {
color: var(--ws-gray);
}
em, i, q, cite, .italic {
font-style: italic;
}
b, strong {
font-weight: 700;
}
.anchor {
position: relative;
}
hr,
.wp-block-separator {
border: 0;
border-top: 1px solid rgba(0,0,0,.15);
clear: both;
margin: 2em 0;
padding-top: 1px;
}
sup, sub {
font-size: .6em;
line-height: .6em;
vertical-align: baseline;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
padding: 0;
width: 1px;
}
blockquote {
line-height: 1.1;
}
.content blockquote {
clear: both;
float: right;
margin: 1em 0 1.5em 1.5em;
max-width: 50%;
text-align: right;
width: 18.75em;
}
blockquote p {
color: var(--ws-navy);
font-size: clamp(1.25em, 1.207em + 0.19vw, 1.375em); /* 360 - 1400 */
}
blockquote p:last-of-type {
margin: 0 0 .5em;
}
blockquote :is(footer, cite) {
font-size: 1em;
font-style: normal;
}
.content blockquote :is(cite, footer)::before {
content: '- ';
}
blockquote p {
quotes: '\201c' '\201d';
}
blockquote p:first-of-type::before {
content: open-quote;
}
blockquote p:last-of-type::after {
content: close-quote;
}
.content .wp-block-column blockquote {
max-width: 100%;
width: auto;
}
.content .wp-block-column blockquote cite {
display: block;
margin-top: 2em;
}
.content .wp-block-column blockquote cite>:is(b, strong) {
color: var(--ws-slate);
display: inline-block;
margin: 0 0 .25rem;
}
figure.wp-block-gallery.has-nested-images {
display: flex;
flex-wrap: wrap;
}
/* Hide the 'X' ancillary search input */
#ancillary input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
#ancillary input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
#ancillary input[type="search"]::-webkit-search-decoration,
#ancillary input[type="search"]::-webkit-search-cancel-button,
#ancillary input[type="search"]::-webkit-search-results-button,
#ancillary input[type="search"]::-webkit-search-results-decoration { display: none; }
/* MAIN ------------------------------ */
main {
background: #FFF;
overflow: hidden;
}
main:is(.current-scholars, .impact) {
overflow: visible; /* Current Scholars, Impact page only */
}
main .no-flow {
overflow-x: hidden;
}
/* t1 */
#sidenav {
background: #FFF;
margin: clamp(0em, -1.168em + 5.19vw, 3.375em) 0 3em;
overflow: hidden;
}
#sidenav ul {
padding: 0;
}
#sidenav ul:empty {
display: none;
}
#sidenav li {
height: 1%;
overflow: hidden;
}
#sidenav>ul>li:first-child {
border-top: 1px solid var(--ws-lt-blue);
}
#sidenav>ul>li {
border-bottom: 1px solid var(--ws-lt-blue);
}
#sidenav li a {
display: block;
line-height: 1.1;
}
#sidenav>ul>li>a {
color: var(--ws-navy);
display: block;
font-size: 1.125em;
padding: .4375em 1.75em .4375em .625em;
}
#sidenav li.current_page_item>a,
#sidenav li.current_page_ancestor>a {
background-color: var(--ws-red);
background-repeat: no-repeat;
background-position: right 1em top .375em;
background-size: auto 1.0625em;
color: #FFF;
}
#sidenav li.page_item_has_children.current_page_item>a,
#sidenav li.current_page_ancestor>a {
background-image: url('data:image/svg+xml;utf8,');
}
#sidenav>ul>li.current_page_item.page_item_has_children>a,
#sidenav>ul>li.current_page_ancestor.page_item_has_children>a {
background-image: url('/wp-content/themes/wpcode-v2/images/icons/caret-down-solid.svg');
background-repeat: no-repeat;
background-position: right .8125em top .375em;
background-size: .6875em auto;
}
/* Hide Opportunity Scholarship sidenav link on National Scholarship pages */
:is(body.national-scholarship, .page-id-14070) #sidenav a[href*='/opportunity-scholarship/'] {
display: none;
}
/* Hide National Scholarship sidenav link on Opportunity Scholarship pages */
:is(body.opportunity-scholarship, .page-id-14072) #sidenav a[href*='/national-scholarship/'] {
display: none;
}
/* T2 ----- */
#sidenav>ul>li>ul {
display: none;
}
#sidenav>ul>li:is(.current_page_item, .current_page_ancestor)>ul {
display: block;
}
#sidenav>ul>li.current_page_ancestor>ul {
background: var(--ws-lt-blue);
border: 1px solid var(--ws-lt-blue);
}
#sidenav li ul li a {
padding-left: 1.25em;
}
/* T3 ----- */
#sidenav>ul>li.current_page_ancestor>ul>li>a,
#sidenav>ul>li>ul>li>a {
background: var(--ws-lt-blue);
color: #555;
font-size: 1em;
padding: .3125em .3125em .3125em 1em;
}
#sidenav>ul>li.current_page_ancestor>ul>li.current_page_item>a {
background: var(--ws-navy);
color: #FFF;
}
/* T4 ----- */
#sidenav>ul>li>ul>li>ul {
display: none;
}
#sidenav>ul>li>ul>li:is(.current_page_item, .current_page_ancestor)>ul {
background: #FFF;
display: block;
}
#sidenav>ul>li>ul>li.current_page_parent a {
background: var(--ws-navy);
color: #FFF;
}
#sidenav>ul>li.current_page_ancestor>ul>li>ul>li>a {
background: #FFF;
color: var(--ws-navy)
}
#sidenav>ul>li.current_page_ancestor>ul>li>ul>li.current_page_item>a {
background: var(--ws-red);
color: #FFF;
}
#sidenav ul ul ul a {
color: #555;
font-size: .9em;
padding: .3125em .3125em .3125em 2em;
}
/* Hover/focus */
#sidenav li a:is(:hover, :focus),
#sidenav>ul>li>ul>li>a:is(:hover, :focus),
#sidenav li ul li a:is(:hover, :focus),
#sidenav li ul li ul li a:is(:hover, :focus),
#sidenav>ul>li.current_page_ancestor>ul>li>ul>li>a:is(:hover, :focus),
#sidenav li:is(.current_page_ancestor,.current_page_item)>a:is(:hover, :focus) {
background-color: var(--ws-navy);
color: #FFF;
}
/* Hide 'Elibibility' and 'How to Apply' sidenav links created with 'page-links-to' on template-scholarship-detail.php */
.page-template-template-scholarship-detail :is(#sidenav-item-14074, #sidenav-item-14077, #sidenav-item-14080, #sidenav-item-14082) {
display: none;
}
/* CONTENT ELEMENTS --------------------------- */
.breadcrumb {
margin-bottom: 1em;
}
.breadcrumb a::after {
content: "\00A0\00A0\203A\00A0";
}
.content {
word-wrap: break-word;
}
:is(.content, .tribe-events-content) :is(.alignleft, .alignright) {
height: auto;
max-width: min(50%, 19.3125em);
}
:is(.content, .tribe-events-content) .alignleft {
margin: 1.5em clamp(1.5em, 1.154em + 1.54vw, 2.5em) 1.5em 0; /* 360 - 1400 */
}
:is(.content, .tribe-events-content) .alignright {
margin: 1.5em 0 1.5em clamp(1.5em, 1.154em + 1.54vw, 2.5em); /* 360 - 1400 */
}
:is(.content, .tribe-events-content) :is(.alignleft, .alignright) img {
float: none;
height: auto;
margin: 0;
max-width: 100%;
}
.content img.phototreatment {
height: auto;
max-width: 50%;
}
.content figure.phototreatment {
text-align: center;
width: 100%;
}
.content figure.phototreatment img {
height: auto;
max-width: 100%;
width: auto;
}
img.phototreatment,
img.alignright,
.alignright img {
height: auto;
max-width: 100%;
}
:is(.phototreatment, .alignright, .alignleft) figcaption {
font-size: .875em;
}
.alignleft {
clear: left;
float: left;
}
.alignright {
clear: right;
float: right;
}
.alignright figcaption {
text-align: right;
}
.wp-block-embed:is(.alignright, .alignleft) .wp-block-embed__wrapper {
min-width: 100%;
width: 100%;
}
.muted {
opacity: 0.5;
}
.highlight,
.content .highlight {
clear: both;
margin: 2.5em 0;
}
.highlight .highlight-content {
background: #EBF0F5;
border-top: .25em solid var(--ws-navy);
padding: 1.75em 2em 3em 2em;
}
.highlight.alt .highlight-content {
background: rgba(var(--ws-red-rgb), .05);
border-top: .25em solid var(--ws-red);
}
.highlight .highlight-content :first-child {
margin-top: 0;
}
.highlight .highlight-content :last-child,
.highlight .highlight-content ul:last-child li:last-child {
margin-bottom: 0;
}
small {
font-size: .8em;
}
.content table {
width: 100%;
}
.aligncenter {
clear: both;
display: block;
margin-inline: auto;
}
/* list */
.content :is(ol, ul) {
margin: 1.5em 0;
}
.content ol {
padding: 0 0 0 1.5em;
}
.content ol li {
margin: 0 0 1em;
}
.content ol ol li {
list-style: lower-alpha;
}
.content ul li,
.single-news article.news ul li {
margin: 0 0 .875em;
padding-left: 2em;
position: relative;
}
.content :is(ol, ul) li li,
.single-news article.news :is(ol, ul) li li {
font-size: 1em;
}
.content ul li::before,
.single-news article.news ul li::before {
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
content: '';
display: inline-block;
height: 0.9rem;
left: .75em;
position: absolute;
text-align: center;
top: .4em;
width: 0.9rem;
}
.box:is(.navy, .red, .slate) li::before {
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.content ul li ul li::before,
.single-news article.news ul li ul li::before {
opacity: .75;
}
.content :is(ul ul, ol ol),
.single-news article.news :is(ul ul, ol ol) {
margin-top: 1em;
}
/* misc content area overrides */
.page-template-template-scholarship-detail .content figure:first-of-type { padding-bottom: 2em; }
.page-template-template-scholarship-detail .content :is(.alignleft, .alignright) { max-width: min(50%, 22.3125em); }
/* popover */
.popover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.5);
z-index: 7;
display: none;
}
.popover .popover-inner {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 50rem;
max-width: 90%;
background: #FFF;
padding: 2.5rem 2rem;
border-radius: 5px;
}
.popover .popover-close-button {
background: transparent;
padding: 0;
border: 0;
width: 2rem;
height: 2rem;
position: absolute;
top: .5rem;
right: .5rem;
line-height: 0;
transition: all .2s ease;
}
.popover .popover-close-button:before {
content: "\00D7";
color: var(--ws-navy);
font-weight: 700;
font-size: 2rem;
}
.popover .popover-close-button:hover:before {
color: var(--ws-red);
}
.popover .popover-inner p {
margin-top: 0;
}
.popover .popover-inner .button {
display: table;
margin: 1.5rem auto 0;
}
/* addon classes */
.clearFloats {
clear: both;
}
.nobr {
white-space: nowrap;
}
.twoCol, .threeCol, .resCol {
column-gap: 2em;
}
.resCol {
columns: auto;
}
.req, .required {
color: #C00;
}
.clearfix::after {
clear: both;
content: '';
display: table;
}
.videoContainer,
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
height: 0;
line-height: 0;
padding-top: 56.25%; /* 16:9 */
position: relative;
width: 100%;
}
.videoContainer.ratio-4-3 {
padding-top: 75%; /* 4:3 full-frame */
}
:is(.videoContainer, .wp-block-embed.is-type-video .wp-block-embed__wrapper) iframe {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper .videoContainer {
display: contents;
}
figure div.wp-block-embed__wrapper {
position: static;
}
/* BLOG ------------------------------ */
span.posted-on {
font-size: .85em;
}
span.byline {
display: block;
font-size: .85em;
}
article .entry-content {
padding: 1em 0;
}
.blogThumb {
width: 100%;
}
.blogThumb img, .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
height: auto;
max-width: 100%;
}
.news time.updated {
display: none;
}
/* FORMS ------------------------------ */
input, button, select {
line-height: 1.2;
}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"],
input[type="url"], input[type="search"], textarea, select, input[type="button"], input[type="submit"], input[type="reset"] {
border-radius: 0;
outline: none;
-webkit-appearance: none;
}
main .ctct-custom-form input[type="text"],
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"],
input[type="url"], input[type="search"], textarea, select {
background-color: rgba(0,0,0,.02);
border: 1px solid rgba(0,0,0,.2);
border-radius: 0;
box-shadow: none;
font-size: clamp(1em, 0.957em + 0.19vw, 1.125em);
line-height: 1.2;
padding: .5em 1em;
width: 100%;
}
main .ctct-custom-form input[type="text"]:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
background-color: #FFF;
border-color: var(--ws-slate-2);
outline: 0;
}
textarea {
display: block;
resize: vertical;
}
select {
width: auto;
}
select option {
padding: 0 .2em;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
.content .wp-block-buttons {
margin: 2em 0 0;
}
/* BUTTONS ------------------------------ */
main .ctct-custom-form .ctct-button,
.button, button, input[type="button"], input[type="submit"], input[type="reset"], .wp-block-button__link {
background: var(--ws-navy);
border: .125em solid var(--ws-navy);
border-radius: 0;
color: #FFF;
cursor: pointer;
font-size: clamp(0.875rem, 0.788rem + 0.38vw, 1.125rem); /* 360 - 1400 */
letter-spacing: 2px;
line-height: 1.265;
padding: .625em .8125em .6875em;
text-align: center;
text-transform: uppercase;
}
:is(button, .button).red,
.red .wp-block-button__link {
background: var(--ws-red);
border-color: var(--ws-red);
color: #FFF;
}
:is(button, .button).slate,
.slate .wp-block-button__link {
background: var(--ws-slate);
border-color: var(--ws-slate);
color: #FFF;
}
:is(button, .button).orange,
.orange .wp-block-button__link {
background: var(--ws-orange);
border-color: var(--ws-orange);
color: var(--ws-navy);
}
:is(button, .button).white,
.white .wp-block-button__link {
background: #FFF;
border-color: #FFF;
color: var(--ws-navy);
}
.button {
display: inline-block;
}
.content .wp-block-buttons .wp-block-button {
margin-block: .125em;
}
.wp-block-buttons.is-content-justification-center.is-layout-flex {
display: flex;
}
/* FORMIDABLE FORM STYLING ------------------------------ */
fieldset { border: 0; margin: 0; padding: 0; }
.frm_primary_label { display: block; margin: .75em 0 0; }
.frm_full textarea { margin: 0; }
.frm_button_submit { margin: 1.5em 0 0; }
.frm_required, .frm_error, .frm_error_style { color: #FF0000; }
.frm_error { font-size: .9375em; }
/* CONSTANT CONTACT FORM STYLING (/stay-informed/sign-up/)----------------------------- */
main .ctct-custom-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
}
main .ctct-custom-form h2 {
display: none;
}
main .ctct-custom-form label {
display: table;
margin: 0 0 .25em;
}
main .ctct-custom-form .ctct-form-required:before {
color: #FF0000;
font-size: 1.25em;
left: auto;
right: -.625em;
top: -.3125em;
}
main .ctct-custom-form .ctct-button {
width: auto !important;
}
p[data-id="Email Address:p"] {
width: 100%;
}
p[data-id="First Name:p"],
p[data-id="Last Name:p"] {
width: calc(50% - clamp(0.375em, 0.15em + 0.4vw, 0.5em)); /* 900 - 1400 */
}
/* TRANSITIONS ------------------------------ */
a, a *, button, .button, input[type="button"], input[type="submit"], :is(input, select, textarea):focus,
.table-wrap::before, .table-wrap::after, #filters>ul>li>div, #filters label, .close, .select-button:after, #news-filters>div,
.baguetteBox-button:is(#next-button, #previous-button, #close-button), .tribe-events-content a.button {
transition: all .3s ease;
}
:is(#callouts, #featured-scholars) .clip, :is(#callouts, #featured-scholars) .clip::after {
transition: all .5s ease;
}
.stop-transitions * {
transition: none !important;
}
/* SEARCH PAGE ------------------------------ */
form.search-page {
display: flex;
margin: 0 0 2em;
}
form.search-page input[type="search"] {
background: #FFF;
}
form.search-page button {
background: var(--ws-navy) url('/wp-content/themes/wpcode-v2/images/icons/search-white.svg') no-repeat center / 1.125em auto;
border: 0;
padding-inline: 1.375em;
}
/* FLEX / GRID COLUMNS ------------------------------ */
.flex {
display: flex;
flex-wrap: wrap;
gap: var(--ws-gap);
}
.flex>:is(li, article, div) {
width: calc( 100% / var(--ws-columns) - ( var(--ws-gap) * ( var(--ws-columns) - 1 ) / var(--ws-columns) ) );
}
@supports (-moz-appearance:none) {
.flex>:is(li, article) {
width: calc( 99.99% / var(--ws-columns) - ( var(--ws-gap) * ( var(--ws-columns) - 1 ) / var(--ws-columns) ) );
}
}
.ws-grid,
.ws-inner-grid {
display: grid;
}
.ws-grid>:is(div, blockquote, article) {
grid-column: wrap-start / wrap-end;
}
.ws-grid>.four {
display: contents;
}
/* ANIMATIONS ------------------------------ */
.translate-left, .translate-right,
.translate-down, .translate-up {
opacity: 0;
transition: all 1s ease;
}
.translate-left {
transform: translateX(3rem);
}
.translate-right {
transform: translateX(-3rem);
}
.translate-down {
transform: translateY(-3rem);
}
.translate-up {
transform: translateY(3rem);
}
:is(.translate-left, .translate-right, .translate-down, .translate-up).animated {
opacity: 1;
transform: translate(0, 0);
}
/* PAGEHEADER ------------------------------ */
.pageHeader {
aspect-ratio: 1400 / 285;
background: #FFF;
max-height: 20em;
position: relative;
width: 100%;
z-index: 1;
}
.pageHeader>.image {
background: no-repeat center / cover;
bottom: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.pageHeader .shape {
background: #FFF;
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
z-index: 0;
}
.pageHeader .shape::before {
background: var(--ws-slate);
content: '';
display: block;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
/* FOOTER ------------------------------ */
body>footer {
background: var(--ws-lt-blue-2);
color: #555;
padding-block: 3em 1.75em;
}
body>footer>.wrap {
display: flex;
flex-wrap: wrap;
overflow: visible;
}
body>footer p {
line-height: 1.28;
margin: 0 0 .75em;
}
body>footer a {
color: var(--ws-slate);
display: block;
}
body>footer li.current_page_item a {
color: var(--ws-red);
text-decoration: none;
}
body>footer :is(p, .copyright a:not(.button), .links a) {
font-size: .875em;
}
body>footer .logo {
width: 100%;
}
body>footer .logo img {
width: 16em;
}
body>footer .copyright .button {
font-size: 1em;
margin-block: .75em 1.75em;
padding: .625em .875em;
}
body>footer nav a {
padding-block: .0625em;
}
body>footer .social a {
display: block;
text-align: center;
}
body>footer .social path {
fill: var(--ws-slate);
}
/* COLORED BOXES: ------------------------------ /
- Homepage ribbon 4
- CMS page colored-boxes ribbon
- CMS page callout-block custom block
- Current Scholars ribbon 2
- For Businesses ribbon 3
- About page ribbons 3 & 5
- National and Opportunity Scholarship pages Ribbon 3 and sidebar callout
*/
.box.navy { background: var(--ws-navy); }
.box.orange { background: var(--ws-orange); }
.box.red { background: var(--ws-red); }
.box.slate { background: var(--ws-slate); }
.box.yellow { background: var(--ws-yellow); }
.box:is(.navy, .red, .slate) * {
color: #FFF;
}
.box:is(.orange, .yellow) * {
color: var(--ws-navy);
}
.box:is(.red, .navy, .slate) path {
fill: #FFF;
}
.box:is(.orange, .yellow) path {
fill: var(--ws-navy);
}
aside.callout-box,
li.callout-box:nth-child(1),
#homepage-news article:nth-child(odd),
#data li:nth-child(odd),
#keep-in-mind li:nth-child(odd)>div {
clip-path: var(--ws-clip-1);
}
li.callout-box:nth-child(2),
#homepage-news article:nth-child(even),
#data li:nth-child(even),
#keep-in-mind li:nth-child(even)>div {
clip-path: var(--ws-clip-2);
}
li.callout-box:nth-child(3) {
clip-path: var(--ws-clip-3);
}
.box svg {
display: block;
margin: 0 auto 1em;
max-height: 4em;
max-width: 5em;
}
:is(.sidebar, .contact-info).box:is(.navy, .red, .slate) p {
color: rgba(255,255,255,.8);
}
.sidebar.box:is(.navy, .red, .slate) p>:is(b,strong) {
color: #FFF;
}
/* aside.callout-box = the custom block (single) */
aside.callout-box {
padding: 2em 1.5em 4em;
}
/* li.callout-box = the callout strip ribbon (row of 3) */
li.callout-box {
padding: 3em 1.5em 5em;
}
li.callout-box:nth-child(2) {
padding: 4em 1.5em;
}
.callout-box :first-child {
margin-top: 0;
}
.callout-box :last-child {
margin-bottom: 0;
}
.callout-box :is(h2, h3) {
font-size: clamp(1.125em, 0.981em + 0.31vw, 1.25em); /* 750 - 1400 */
letter-spacing: 2px;
text-transform: uppercase;
}
.callout-box a {
text-decoration: underline;
}
.callout-box p {
line-height: 1.38;
}
/* CONTACT INFO BLOCK ------------------------------ */
aside.contact-info {
margin-block: 2.5em;
padding: clamp(2em, 1.654em + 1.54vw, 3em) clamp(1.5em, -0.231em + 3.69vw, 3em) 4em; /* 360 - 1400, 750 - 1400 */
}
aside.contact-info:last-child {
margin-bottom: 0;
}
.contact-info h2:first-child {
margin: 0 0 .5rem;
}
.contact-info .flex {
margin: 2em 0 0;
}
#content .contact-info .flex>div>h3:first-child {
font-size: 1.125em;
margin: 0 0 .5em;
padding-left: 1.25em;
}
.contact-info .flex>.email>h3:first-child {
background: url('/wp-content/themes/wpcode-v2/images/icons/envelope-white.svg') no-repeat left center / 1rem auto;
}
.contact-info .flex>.phone>h3:first-child {
background: url('/wp-content/themes/wpcode-v2/images/icons/phone.svg') no-repeat left center / 1rem auto;
}
.contact-info p {
margin-top: 0;
}
/* SHARED ------------------------------ */
/* Colored dividers underneath some landing page headings */
.accent-orange::after,
.accent-yellow::after {
clip-path: polygon(0 0, calc(100% - 0.125rem) 0, 100% 100%, 0.0625rem calc(100% - 0.0625rem));
content: '';
display: block;
height: .5rem;
margin-top: 1.125rem;
width: 5.625rem;
}
.accent-orange::after {
background: var(--ws-orange);
}
.accent-yellow::after {
background: var(--ws-yellow);
}
/* Shape that overlaps the bottom of some ribbons
- Homepage ribbon 1, For Current Scholars ribbon 4, About ribbon 4 */
.bottom-shape {
position: relative;
}
.bottom-shape::after {
content: '';
position: absolute;
z-index: 1;
}
.bottom-shape.bottom-shape-orange::after { background: var(--ws-orange); }
.bottom-shape.bottom-shape-red::after { background: var(--ws-red); }
.bottom-shape.bottom-shape-slate::after { background: var(--ws-slate); }
.bottom-shape.bottom-shape-yellow::after { background: var(--ws-yellow); }
/* PAGINATION --------------------------------- */
/* News archive page */
#pagination {
margin: 2.5em 0 0;
text-align: center;
}
#pagination :is(a,span) {
color: var(--gray);
display: inline-block;
font-size: 1.125em;
padding: .375em .5em;
}
#pagination :is(.next,.prev) {
background: url('/wp-content/themes/wpcode-v2/images/icons/angle-right-slate.svg') no-repeat center / .625em auto;
color: transparent;
position: relative;
}
#pagination .prev {
transform: scaleX(-1);
}
#pagination .current {
background-color: var(--ws-slate);
color: #FFF;
pointer-events: none;
}
/* HERO RIBBON (Homepage ribbon 1) ------------------ */
#hero .fader {
position: relative;
z-index: 0;
}
#hero .fader>div {
background: no-repeat center / cover;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
#hero .fader .prev {
opacity: 1;
z-index: -1;
}
#hero .fader .on {
opacity: 1;
position: static;
transition: opacity 1s ease;
z-index: 2;
}
#hero .textbox {
align-items: center;
background: no-repeat center / cover;
display: flex;
justify-content: center;
position: relative;
z-index: 0;
}
#hero .textbox::before,
#hero .textbox::after {
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
#hero .textbox::before {
background: var(--ws-slate);
opacity: .93;
z-index: -2;
}
#hero .textbox::after {
background: linear-gradient(180deg, rgba(var(--ws-slate-rgb), .7) 0%, rgba(var(--ws-slate-rgb), 0) 65%);
opacity: .93;
z-index: -1;
}
#hero .textbox>div {
padding-inline: var(--ws-gutter);
}
#hero h1 {
color: #FFF;
text-align: center;
}
#hero h1>span {
display: block;
}
#hero h1>span:nth-of-type(1) {
background: var(--ws-red);
letter-spacing: .0625em;
line-height: 2.029;
padding: .125em.5em;
margin: .2em;
}
#hero h1>span:nth-of-type(1) {
font-size: .3125em;
}
#hero h1>span:nth-of-type(2) {
font-size: .765em;
}
#hero h1>span:nth-of-type(3) {
font-size: 1.7em;
line-height: 0.875;
}
#hero label {
color: #FFF;
display: block;
padding-inline: .625em;
position: relative;
text-align: center;
text-transform: uppercase;
}
#hero label>span {
font-size: clamp(1.125em, 1.082em + 0.19vw, 1.25em); /* 360 - 1400 */
margin: 0 0
}
#hero label::before,
#hero label::after {
border: 1px solid rgba(255,255,255,.4);
bottom: -2.25em;
content: '';
position: absolute;
top: 1.125em;
z-index: -1;
}
#hero label::before {
border-right: 0;
left: 0;
right: calc(50% + 2em);
}
#hero label::after {
border-left: 0;
left: calc(50% + 2em);
right: 0;
}
#hero button {
display: table;
margin: 0 auto;
}
/* CUSTOM SELECT ELEMENT ---------------------------- */
/*
- Homepage Hero
- Scholarships Landing page
*/
.custom-select select {
background: #FFF;
border: 0;
color: #555;
flex: 1 0 auto;
max-width: 100%;
text-align: center;
}
.custom-select {
display: flex;
margin: .375em 0 .625em;
position: relative;
}
.custom-select::after {
background: #FFF url('data:image/svg+xml;utf8,') no-repeat center / 1em auto;
content: '';
height: 100%;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
.custom-select:focus-within::after {
background-color: #EEE;
}
/* CALLOUTS RIBBON (Homepage ribbon 2, For Scholars ribbon 6) ------------------ */
/* Some shared styles with "Featured Scholars" ribbon on Impact page */
#callouts {
position: relative;
z-index: 0;
}
#callouts .textbox {
grid-column: wrap-start / wrap-end;
}
#callouts .textbox h2 {
margin: 0;
}
#callouts li {
text-align: center;
}
#callouts .image {
aspect-ratio: 267 / 350;
background: no-repeat center / cover;
margin: 0 0 .5em;
}
#callouts a {
display: block;
}
:is(#callouts, #featured-scholars) .clip {
position: relative;
transform-origin: center bottom;
}
:is(#callouts, #featured-scholars) .clip::after {
bottom: 0;
content: '';
height: 1.625em;
left: 0;
position: absolute;
right: 0;
}
#callouts li:nth-child(odd) .image { clip-path: polygon(0 1.3125em, 100% 0, 100% calc(100% - .875em), 0 calc(100% - 1.875em)); }
#callouts li:nth-child(even) .image { clip-path: polygon(0 1.3125em, 100% 0, 100% calc(100% - 1.875em), 0 calc(100% - .875em)); }
:is(#callouts, #featured-scholars) li:nth-child(odd) .clip::after { clip-path: polygon(0 0, 100% 1em, 100% 100%, 0 100%); }
:is(#callouts, #featured-scholars) li:nth-child(even) .clip::after { clip-path: polygon(0 1em, 100% 0, 100% 100%, 0 100%); }
:is(#callouts, #featured-scholars) li:nth-child(4n+1) .clip::after { background: var(--ws-red); }
:is(#callouts, #featured-scholars) li:nth-child(4n+2) .clip::after { background: var(--ws-yellow); }
:is(#callouts, #featured-scholars) li:nth-child(4n+3) .clip::after { background: var(--ws-slate); }
:is(#callouts, #featured-scholars) li:nth-child(4n+4) .clip::after { background: var(--ws-orange); }
#callouts strong {
display: block;
letter-spacing: 1px;
line-height: 1.2;
}
#callouts p {
color: var(--ws-gray);
}
/* TEXT-PHOTO RIBBON -------------------------------- */
/*
* Homepage ribbon 3, About ribbon 4
* National Scholarship Ribbon 3, Opportunity Scholarship ribbon 3
*/
#text-photo {
background: var(--ws-navy);
position: relative;
z-index: 1;
}
#text-photo::after {
content: '';
position: absolute;
z-index: 1;
}
#text-photo .textbox>h2:first-child::after {
background: var(--ws-yellow);
clip-path: polygon(0 0, calc(100% - .1rem) 0, 100% 100%, .0625rem calc(100% - .0625rem));
content: '';
display: block;
height: .5rem;
margin-block: .375em .5em;
width: 5.625rem;
}
#text-photo h2.h1-size>span,
#text-photo p {
color: rgba(255,255,255,.8);
}
#text-photo.scholarship p {
font-size: clamp(1.25em, 1.12em + 0.58vw, 1.625em);
line-height: 1.2;
}
#text-photo .button {
margin-top: 1em;
}
#text-photo .image {
background: no-repeat center top / cover;
position: relative;
}
#text-photo .image::before {
background: var(--ws-navy);
bottom: 0;
content: '';
left: 0;
opacity: .4;
position: absolute;
right: 0;
top: 0;
}
#text-photo .content ul li::before {
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
#text-photo .content ul li {
color: #FFF;
}
#text-photo .content p + ul {
margin-top: 0;
}
/* HOMEPAGE NEWS (Homepage ribbon 4) ------------------ */
#homepage-news {
padding-block: clamp(3em, 2.091em + 4.04vw, 5.625em) 3em; /* 360 - 1400 */
}
#homepage-news h2 {
margin: 0 0 .75rem
}
#homepage-news h2 + p {
margin-top: 0;
}
#homepage-news article>a {
display: block;
height: 100%;
}
#homepage-news article:nth-child(odd) a { padding: 2em 1.5em 1.5em; }
#homepage-news article:nth-child(even) a { padding: 3.5em 1.5em 1.5em; }
#homepage-news .textbox {
grid-column: wrap-start / wrap-end;
max-width: 26.0625em;
}
#homepage-news p {
font-size: clamp(1em, 0.913em + 0.38vw, 1.25em); /* 360 - 1400 */
line-height: 1.2;
}
#homepage-news p>:is(b, strong) {
color: var(--ws-slate);
letter-spacing: 1px;
}
#homepage-news h3 {
font-size: 1em;
line-height: 1.5;
}
#homepage-news time {
display: block;
font-size: .875em;
letter-spacing: 1px;
margin: 0 0 .25em;
text-transform: uppercase;
}
/* SPLIT RIBBON -------------------------- /
- #WELCOME - Homepage ribbon 5, About Ribbon 6
- #INTRO - For Scholars, For Businesses, About Ribbon 1
- Standard and fullwidth interior pages,
- News archive page
*/
.split-ribbon {
clear: both;
}
.split-ribbon .blue {
align-items: center;
background: no-repeat center / cover;
display: flex;
justify-content: center;
position: relative;
z-index: 0;
}
.split-ribbon .blue::before,
.split-ribbon .blue::after {
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
.split-ribbon .blue::before {
background: var(--ws-slate);
opacity: .93;
z-index: -2;
}
.split-ribbon .blue::after {
background: linear-gradient(180deg, rgba(var(--ws-slate-rgb), .7) 0%, rgba(var(--ws-slate-rgb), 0) 65%);
opacity: .93;
z-index: -1;
}
.split-ribbon .image {
overflow: hidden;
position: relative;
}
.split-ribbon .image>div {
background: no-repeat center top / cover;
}
.split-ribbon .textbox {
background: no-repeat center / cover;
position: relative;
z-index: 1;
}
.split-ribbon p,
#intro h1>span {
color: rgba(255,255,255,.8);
}
.split-ribbon h2 {
line-height: 1;
text-transform: none;
}
.split-ribbon h2>span {
margin: .25em 0 0;
}
.split-ribbon :is(p, ul, ol) + .wp-block-buttons {
margin-top: 1rem;
}
.split-ribbon.scholarships .blue::before {
background: var(--ws-red);
opacity: .93;
z-index: -2;
}
.split-ribbon.scholarships .blue::after {
background: linear-gradient(180deg, rgba(var(--ws-red-rgb), .7) 0%, rgba(var(--ws-red-rgb), 0) 65%);
opacity: .93;
z-index: -1;
}
/* PHOTOLEFT-TEXT RIBBON (For Businesses ribbon 2, About ribbon 2) ------------------ */
#photoleft-text .image {
aspect-ratio: 432 / 521;
position: relative;
}
#photoleft-text .image::after {
background: var(--ws-yellow);
bottom: 0;
clip-path: polygon(0 0, 100% 1.5em, 100% 100%, 0 100%);
content: '';
height: 2.75em;
left: 0;
position: absolute;
right: 0;
}
#photoleft-text .image>div {
background: no-repeat center / cover;
clip-path: polygon(0 1.3125em, 100% 0, 100% calc(100% - 1.5em), 0 calc(100% - 3em));
height: 100%;
}
/* STACKED BOXES RIBBON (For Businesses ribbon 3) ------------------ */
#stacked-boxes {
overflow: hidden;
padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 750 - 1400 */
position: relative;
}
#stacked-boxes .box-wrap {
position: relative;
}
#stacked-boxes .box {
overflow: visible;
padding-inline: clamp(1.25em, 0.774em + 2.12vw, 2.625em); /* 360 - 1400 */
position: relative;
z-index: 0;
}
#stacked-boxes .box-1 {
clip-path: var(--ws-clip-1);
padding-block: clamp(2.5em, 1.938em + 2.5vw, 4.125em) clamp(4em, 3.394em + 2.69vw, 5.75em); /* 360 - 1400 */
}
#stacked-boxes .box-2 {
clip-path: var(--ws-clip-2);
padding-block: clamp(4em, 3.394em + 2.69vw, 5.75em) clamp(2.5em, 1.938em + 2.5vw, 4.125em); /* 360 - 1400 */
}
#stacked-boxes .box::before {
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
#stacked-boxes .box-1::before {
background: var(--ws-red);
clip-path: var(--ws-clip-1);
}
#stacked-boxes .box-2::before {
background: var(--ws-navy);
clip-path: var(--ws-clip-2);
}
#stacked-boxes .line {
background: var(--ws-slate-2);
position: absolute;
right: 1.25em;
width: .125rem;
z-index: 1;
}
#stacked-boxes .line::before,
#stacked-boxes .line::after {
background: var(--ws-slate-2);
content: '';
height: .125em;
position: absolute;
right: 0;
}
#stacked-boxes .line::before {
top: 0;
}
#stacked-boxes .line::after {
bottom: 0;
}
#stacked-boxes .box p {
font-size: clamp(1.125rem, 0.995rem + 0.58vw, 1.5rem); /* 360 - 1400 */
}
#stacked-boxes .textbox p:not(:first-of-type)>strong {
color: var(--ws-slate);
}
/* TESTIMONIALS RIBBON (For Businesses ribbon 4) ------------------------- */
.testimonials {
padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 750 - 1400 */
}
.testimonials blockquote {
align-items: start;
margin-inline: auto;
display: flex;
}
.testimonials .image {
aspect-ratio: 1;
width: 100%;
}
.testimonials .image + div {
padding-left: clamp(1.5em, 0.346em + 2.46vw, 2.5em)
}
.testimonials .image {
aspect-ratio: 1;
}
.testimonials .image img {
height: 100%;
object-fit: cover;
width: 100%;
}
.testimonials blockquote p::before,
.testimonials blockquote p::after {
color: var(--ws-slate-2);
}
.testimonials blockquote p::before {
margin-left: -.375em;
}
.testimonials blockquote p:last-of-type {
margin: 0 0 1.125em;
}
.testimonials cite>span {
color: var(--ws-slate);
display: block;
line-height: 1.25;
margin: 0 0 .25em;
}
/* Custom testmonials block specific styles ----- */
.testimonials.block {
padding-block: 2em;
}
.testimonials.block blockquote {
float: none;
max-width: 100%;
text-align: left;
width: 100%;
}
.testimonials.block .image + div {
padding-left: 1.5em;
}
.testimonials.block p {
font-size: clamp(1.063em, 1.019em + 0.19vw, 1.188em);
}
.testimonials.block cite::before {
display: none;
}
/* PHOTO-CALLOUTS RIBBON ------------------------------ */
/* For Businesses page ribbon 5 */
/* Scholar Stories page ribbon 2 */
/* National Scholarship page ribbon 6 */
/* Opportunity Scholarship page ribbon 6 */
#photo-callouts.blue-bg ul {
display: contents;
}
#photo-callouts .image {
background: no-repeat center / cover;
border-bottom: .1875em solid #FFF;
}
#photo-callouts.blue-bg .image {
clip-path: polygon(0 1.25em, 100% 0, 100% 100%, 0% 100%);
}
#photo-callouts .box {
padding: .5625em 2.5em .5625em 1em;
background-image: url('data:image/svg+xml;utf8,');
background-position: right 1em center;
background-repeat: no-repeat;
background-size: .8125em auto;
}
#photo-callouts h2 {
margin: 0;
}
#photo-callouts.stories li {
padding: 0;
}
#photo-callouts.stories li>a {
display: flex;
flex-direction: column;
height: 100%;
}
#photo-callouts.stories li::before {
display: none;
}
#photo-callouts.stories h2 {
font-size: 1em;
margin: 0 0 .25em;
}
#photo-callouts.stories p {
font-size: .9375em;
line-height: 1.25;
margin: 0;
}
#photo-callouts.stories .box {
justify-content: start;
flex: 1 0 auto;
}
/* TWO BLOCKS RIBBON (About ribbon 3) ------------------ */
#two-blocks {
align-items: start;
overflow: hidden;
padding-block: clamp(2.5em, 2.435em + 0.29vw, 2.688em) clamp(2.5em, 1.808em + 3.08vw, 4.5em); /* 360 - 1400 */
}
#two-blocks::before {
background: rgba(var(--ws-slate-2-rgb), .2);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -2;
}
#two-blocks h2.h1-size>span {
font-size: 1em;
}
#two-blocks .textbox p>:is(b, strong) {
color: var(--ws-slate)
}
#two-blocks .box {
padding-inline: clamp(1.5em, 1.046em + 2.02vw, 2.813em); /* 360 - 1400 */
}
#two-blocks .left {
clip-path: var(--ws-clip-1);
padding-block: clamp(3em, 2.481em + 2.31vw, 4.5em) clamp(4em, 3.221em + 3.46vw, 6.25em); /* 360 - 1400 */
}
#two-blocks .right {
padding-block: clamp(4em, 3.221em + 3.46vw, 6.25em) clamp(3em, 2.481em + 2.31vw, 4.5em); /* 360 - 1400 */
}
#two-blocks h3 {
color: var(--ws-navy);
font-size: 1.125em;
}
#two-blocks .box p:last-child {
margin: 0;
}
/* DATA RIBBON (About page ribbon 5) ------------------------- */
#data .textbox {
margin-block: 0 clamp(2em, 1.308em + 3.08vw, 4em); /* 360 - 1400 */
}
#data .textbox .button {
display: table;
margin: 2em auto 0;
}
#data li {
padding-inline: 1.0625em;
}
#data li:nth-child(odd) { padding-block: clamp(3em, 2.654em + 1.54vw, 4em) clamp(3em, 2.308em + 3.08vw, 5em); } /* 750 - 1400 */
#data li:nth-child(even) { padding-block: clamp(3em, 2.308em + 3.08vw, 5em) clamp(3em, 2.654em + 1.54vw, 4em); } /* 750 - 1400 */
#data li>strong {
display: block;
line-height: 1;
margin: 0 0 .375em;
}
#data li>p {
line-height: 1.25;
}
/* ABOUT -> NEWS FILTERS (/about/news/ page) ------------------------------ */
#news-filters>div>p {
margin-bottom: .5rem;
}
#news-filters ul {
margin: 0;
}
#news-filters li::before {
display: none;
}
#news-filters li {
padding: 0;
}
/* CALLOUT BLOCK (custom block) and CALLOUT RIBBON ------------------------------ /
- Interior pages
- National and Opportunity Scholarship pages, Ribbon 3
*/
#colored-boxes {
background: var(--ws-pattern-left);
clear: both;
padding-block: clamp(2em, 1.308em + 3.08vw, 4em);
}
#colored-boxes .wrap>h2 {
color: var(--ws-navy);
margin: 0 0 1.25em;
text-align: center;
}
#colored-boxes ul.flex {
margin: 0;
}
/* Scholarship pages overrides: --- */
#colored-boxes.scholarships {
position: relative;
z-index: 2;
}
/* li.callout-box = the callout strip ribbon (row of 3) */
#colored-boxes.scholarships li {
padding: clamp(3em, 2.308em + 3.08vw, 5em) clamp(1.5rem, 0.981rem + 2.31vw, 3rem); /* 360 - 1400 */
}
#colored-boxes.scholarships li.callout-box:nth-child(2) {
padding-top: clamp(3rem, 1.962rem + 4.62vw, 6rem);
}
/* RESOURCES RIBBON ------------------------------ */
/* Interior CMS pages ( #resources ) */
/* Resources custom block ( .resources.block )*/
.resources {
clear: both;
padding-block: clamp(2em, 1.308em + 3.08vw, 4em);
}
.resources ul {
margin: 0 auto;
--ws-gap: clamp(1.5em, 0.85em + 1.39vw, 2.063em); /* 750 - 1400 */
}
.resources ul.center {
justify-content: center;
}
.resources li, .content .resources ul li {
margin: 0 0 1em;
padding: 0;
text-align: center;
}
.content .resources>ul>li::before {
display: none;
}
.resources a {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.resources .image {
display: block;
position: relative;
width: 100%;
}
.resources .image::before {
content: '';
display: block;
padding: 0 0 129.6%;
}
.resources.square .image::before {
padding: 0 0 100%;
}
.resources.landscape .image::before {
padding: 0 0 34%;
}
#resrouces.resources .image {
margin: 0 0 clamp(1.5em, 1.327em + 0.77vw, 2em); /* 360 - 1400 */
}
.resources.block {
margin: 0 0 1em;
padding-block: 1.5em 2em;
}
.resources .image img {
height: 100%;
left: 0;
object-fit: contain;
object-position: bottom;
position: absolute;
top: 0;
width: 100%;
}
.resources .image ~ div {
display: block;
margin: 0 0 .5em;
width: 100%;
}
.resources strong.title {
display: block;
line-height: 1.1;
}
.resources p {
line-height: 1.375;
}
.resources .button {
margin-top: auto;
font-size: 1em;
padding: 0.456em 0.541em;
}
/* HOW DO I RIBBON (Current Scholars Page ribbon 2) ------------------------------ */
#how-do-i {
row-gap: 0;
padding-block: clamp(3em, 2.827em + 0.77vw, 3.5em); /* 360 - 1400 */
}
#how-do-i ul {
display: contents;
}
#how-do-i li>a {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: 3em;
text-align: center;
}
#how-do-i li:is(:nth-child(1), :nth-child(3), :nth-child(5)) a {
clip-path: var(--ws-clip-1);
padding-block: clamp(3em, 2.481em + 2.31vw, 4.5em) clamp(4em, 3.221em + 3.46vw, 6.25em); /* 360 - 1400 */
}
#how-do-i li:is(:nth-child(2), :nth-child(4)) a {
clip-path: var(--ws-clip-2);
padding-block: clamp(4em, 3.221em + 3.46vw, 6.25em) clamp(3em, 2.481em + 2.31vw, 4.5em); /* 360 - 1400 */
}
#how-do-i svg {
margin: 0 0 .5em;
max-height: 3.125em;
width: auto;
}
#how-do-i a>strong {
line-height: 1.25;
}
/* SCHOLARSHIP GUIDES RIBBON (Current Scholars Page ribbon 3) ------------------------------ */
#guides {
align-items: start;
background: var(--ws-lt-blue-2);
overflow: hidden;
padding-block: clamp(3em, 2.372em + 2.79vw, 4.813em); /* 360 - 1400 */
z-index: 0;
}
#guides::after {
top: 50%;
}
#guides .textbox {
grid-column: wrap-start / wrap-end;
}
#guides article {
background: #FFF;
border: .125rem solid var(--ws-lt-blue-2);
padding: 1.5em;
}
#guides img {
aspect-ratio: 232 / 302;
object-fit: cover;
}
#guides h3 {
font-size: clamp(1.25em, 1.077em + 0.77vw, 1.75em); /* 360 - 1400 */
}
/* CALENDAR / NEWS RIBBON (Current Scholars Page ribbon 4) ------------------------------ */
#calendar-news {
background: var(--ws-navy);
}
#calendar-news h2 {
grid-column: 1 / 3;
}
#calendar-news .view-all {
align-self: start;
background: url('/wp-content/themes/wpcode-v2/images/icons/caret-right-white.svg') no-repeat left calc(50% - 1px) / .6em auto;
color: var(--ws-slate-2);
grid-column: 4 / 5;
padding-left: 1.25em;
position: relative;
top: clamp(0.25em, 0.163em + 0.38vw, 0.5em);
white-space: nowrap;
}
#calendar-news :is(.calendar, .news) {
align-content: start;
display: grid;
gap: .5em clamp(1em, -0.154em + 2.46vw, 2em);
grid-template-columns: repeat(4, 1fr);
}
#calendar-news h3.no-results {
grid-column: 1 / -1;
}
#calendar-news h3 {
color: #FFF;
font-size: 1.125em;
line-height: 1.66;
}
#calendar-news time {
color: #FFF;
display: block;
margin: 0 0 1.5em;
}
#calendar-news .button {
padding: .5em .5em;
}
#calendar-news .divider {
background: var(--ws-slate-2);
content: '';
opacity: .75;
}
/* SCHOLARSHIP TOOLS RIBBON (Current Scholars Page ribbon 4) ------------------------------ */
#scholarship-tools {
background: var(--ws-lt-blue-2);
overflow: hidden;
padding-block: clamp(3em, 1.875em + 5vw, 6.25em); /* 360 - 1400 */
position: relative;
z-index: 0;
}
#scholarship-tools h3 {
font-size: clamp(1.25em, 1.077em + 0.77vw, 1.75em); /* 360 - 1400 */
}
#scholarship-tools .icon-wrap {
align-items: center;
display: flex;
margin: 0 0 1em;
}
#scholarship-tools .icon-wrap::before {
aspect-ratio: 1;
background: url('/wp-content/themes/wpcode-v2/images/icons/scholarship-tools.svg') no-repeat left center / contain;
content: '';
height: 5.625em;
margin: 0 1em 0 0;
}
#scholarship-tools h3 {
margin: 0;
}
/* NEWS ARCHIVE PAGE ----------------------- */
.loading {
margin-block: 1.5em;
text-align: center;
}
.news time {
display: block;
margin: 0 0 1.5em;
}
#ajax article:first-of-type {
margin-top: 2.5em;
}
#ajax article {
border-top: 1px solid #CCCC;
padding: 2em 0 2.5em;
}
#ajax article h3 {
margin: 0 0 .5rem;
}
/* STATE LIST (Our Partner Colleges page ribbon 3) ------------------------------ */
#state-list {
background: var(--ws-navy);
clear: both;
position: relative;
}
#state-list h2>span {
display: block;
font-size: .65em;
line-height: 1.15;
text-transform: none;
}
#state-list h2 {
line-height: 1;
}
#state-list h2>span {
color: rgba(255,255,255,.8);
}
#state-list h2>span:first-of-type { margin: 0 0 .125em; }
#state-list h2>span:last-of-type { margin: .125em 0 0; }
#state-list ul {
margin: 0;
columns: 3;
}
#state-list li>a {
background: url('/wp-content/themes/wpcode-v2/images/icons/caret-down-orange.svg') no-repeat left .375em / .75em auto;
color: #FFF;
display: block;
padding: .25em 1em .25em 1.25em;
text-transform: uppercase;
}
/* PARTNER COLLEGES (Our Partner Colleges page ribbon 4) ------------------------------ */
#partner-colleges {
padding-block: clamp(3em, 1.962em + 4.62vw, 6em); /* 360 - 1400 */
}
#partner-colleges section {
grid-column: wrap-start / wrap-end;
}
#partner-colleges section + section {
margin-top: 1em;
}
#partner-colleges h2 {
margin: 0 0 2rem;
}
#partner-colleges .ws-inner-grid {
align-items: start;
}
#partner-colleges .college {
background: var(--ws-lt-blue-2);
}
#partner-colleges .college h3 {
font-size: 1em;
margin: 0 0 .75rem;
}
#partner-colleges .box {
background: var(--ws-lt-blue-2);
text-align: center;
}
#partner-colleges .box.top {
padding: 1em .75em .875em;
}
#partner-colleges .box.bottom {
padding: .125em .75em .75em;
}
#partner-colleges .logo {
align-items: center;
aspect-ratio: 267 / 170;
background: #FFF;
display: flex;
justify-content: center;
}
#partner-colleges .logo img {
max-height: calc(100% - 2em);
max-width: max(10em, calc(100% - 4.75em));
object-fit: contain;
width: 100%;
}
#partner-colleges .button {
background: #FFF;
border: 0;
color: var(--ws-slate);
font-size: .875em;
}
#partner-colleges hr {
border-top-color: #FFF;
margin-block: 0 .875rem;
width: 100%;
}
#partner-colleges .bottom {
align-items: end;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
}
#partner-colleges .bottom :is(strong, .name, a) {
font-size: .875em;
}
#partner-colleges .bottom strong {
display: block;
line-height: 1;
}
#partner-colleges .name {
color: #555;
}
#partner-colleges .bottom a {
color: var(--ws-navy);
}
#partner-colleges .bottom a {
background: url('data:image/svg+xml;utf8,') no-repeat left .1875em / 1em auto;
padding-left: 1.25em;
}
#partner-colleges .bottom a>b {
color: inherit;
transition: none;
}
/* PARTNER LOGOS (Our Partner Colleges page ribbon 5) ------------------------------ */
#partner-logos {
padding-block: clamp(3em, 2.481em + 2.31vw, 4.5em); /* 360 - 1400 */
text-align: center;
}
#partner-logos h2 {
font-size: clamp(1.375em, 1.267em + 0.48vw, 1.688em); /* 360 - 1400 */
margin: 0 0 clamp(1.5rem, 0.635rem + 3.85vw, 4rem); /* 360 - 1400 */
position: relative;
z-index: 0;
}
#partner-logos h2::before {
background: var(--ws-navy);
content: '';
height: .125rem;
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
#partner-logos h2>span {
background: #FFF;
display: table;
margin-inline: auto;
position: relative;
z-index: 0;
}
#partner-logos h2>span::before {
background: #FFF;
bottom: 0;
content: '';
left: -1rem;
position: absolute;
right: -1rem;
top: 0;
z-index: -1;
}
#partner-logos ul {
--ws-gap: var(--ws-grid-gap);
justify-content: center;
}
#partner-logos a {
display: block;
}
#partner-logos img {
max-height: 6.5em;
}
/* DETAILS (College detail page ribbon 2) ------------------------------ */
#details {
border: 2px solid var(--ws-lt-blue-2);
}
#details .logo {
align-items: center;
display: flex;
justify-content: center;
width: var(--ws-image-width);
}
#details .logo img {
height: auto;
max-width: calc(100% - 3em);
width: 100%;
}
#details .textbox {
background: var(--ws-lt-blue-2);
width: calc(100% - var(--ws-image-width));
}
#details .textbox {
}
#details .textbox>div>div {
border-bottom: 1px solid #FFF;
font-size: clamp(1em, 0.957em + 0.19vw, 1.125em); /* 360 - 1400 */
padding: .5em 0;
}
#details .textbox b {
color: var(--ws-navy);
display: block;
line-height: 1.22;
}
#details .textbox .details-website {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* COLLEGE CONTACTS (College detail page ribbon 3) ------------------------------ */
#college-contacts {
background: var(--ws-navy);
clear: both;
padding-block: clamp(3em, 2.654em + 1.54vw, 4em) clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
position: relative;
}
#college-contacts table {
grid-column: wrap-start / wrap-end;
width: 100%;
}
#college-contacts thead {
background: var(--ws-yellow);
}
#college-contacts thead tr {
text-transform: uppercase;
}
#college-contacts tr {
color: var(--ws-navy);
}
#college-contacts tr>td:nth-child(1) { width: 23%; }
#college-contacts tr>td:nth-child(2) { width: 17%; }
#college-contacts tr>td:nth-child(3) { width: 23%; }
#college-contacts tr>td:nth-child(4) { width: 17%; }
#college-contacts tr>td:nth-child(5) { width: 20%; }
#college-contacts td {
padding: .375em .625em;
}
#college-contacts tbody tr {
border-bottom: 1px solid var(--ws-slate-2);
}
#college-contacts tbody tr:nth-of-type(even) {
background: rgba(255,255,255,.05);
}
#college-contacts tbody :is(td, td>a) {
color: #FFF;
}
/* 'current-scholars' hide other than Admissions,Career Services,Mental Health,Scholar Advisor, Financial Aid Advisor */
#college-contacts table.current-scholars tr:not(.role_Admission, .role_Admissions, .role_CareerServicesLiaison, .role_MentalHealthLiaison, .role_ScholarAdvisor, .role_FinancialAidAdvisor ) {
display: none;
}
/* 'partner-colleges' hide other than Admissions,Career Services,Mental Health,Scholar Advisor, Financial Aid Advisor, Primary Rel Manager, Secondary RelManager (last 2 are reduced to .rm in code) */
#college-contacts table.partner-colleges tr:not(.role_Admission, .role_Admissions, .role_CareerServicesLiaison, .role_MentalHealthLiaison, .role_ScholarAdvisor, .role_FinancialAidAdvisor, .rm ) {
display: none;
}
/* FOR PARTNER COLLEGES NEWS ITEMS ------------------------------ */
/* (For Partner Colleges ribbon 3, For Partner Colleges News Archive page) */
#fpc-news {
padding-block: clamp(3em, 2.654em + 1.54vw, 4em) clamp(3em, 2.308em + 3.08vw, 5em); /*360 - 1400*/
position: relative;
z-index: 0;
}
#fpc-news::before {
background: var(--ws-navy);
content: '';
height: 29em;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
#fpc-news .textbox p {
color: rgba(255,255,255,.7);
}
#fpc-news .textbox p>:is(b, strong) {
color: #FFF;
}
#fpc-news article + .textbox {
margin-top: .75em
}
/* News items ------ */
article.fpc .heading {
align-items: center;
display: flex;
justify-content: space-between;
}
article.fpc .heading {
background: var(--ws-red);
margin: 0 0 .3125rem;
padding: .3125em .3125em .3125em 1em;
}
article.fpc .heading h3 {
font-size: clamp(1.125em, 1.025em + 0.61vw, 1.563em); /* 360 - 1400 */
margin: 0;
}
article.fpc .heading h3 :is(b, time) {
display: inline-block;
margin: 0;
}
article.fpc .heading .button {
margin-left: 2em;
white-space: nowrap;
}
article.fpc .textbox {
background: #FFF;
border: 1px solid var(--ws-lt-blue-2);
padding: clamp(1.5em, 1.154em + 1.54vw, 2.5em) clamp(1.5em, 0.938em + 2.5vw, 3.125em); /* 360 - 1400 */
}
article.fpc:nth-of-type(even) .textbox {
background: var(--ws-lt-blue-2);
}
article.fpc .image {
aspect-ratio: 170 / 270;
flex: 1 0 auto;
object-fit: cover;
}
article.fpc .textbox h4 {
margin: 0 0 1rem;
}
article.fpc .textbox ul {
margin: 0;
}
article.fpc .textbox li {
break-inside: avoid-column;
line-height: 1.4;
margin: 0 0 .75em;
padding-left: 1.625em;
}
article.fpc .textbox li::before {
background: var(--ws-slate);
border-radius: 50%;
height: .3125em;
top: .6875em;
width: .3125em;
}
article.fpc .content img {
content-visibility: hidden;
display: none;
}
/* SCHOLAR STORIES FILTERS (/impact/scholar-stories/ page) ------------------------------ */
#filters {
margin: 2em 0;
}
#filters>ul>li {
margin: 0;
padding: 0;
position: static;
}
#filters>ul>li::before {
display: none;
}
#filters>ul>li>button {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right .685em center;
background-size: .875em auto;
height: 100%;
font-size: 1em;
padding: .5em 1.75em .5em .5em;
width: 100%;
}
#filters>ul>li>div {
height: 0;
left: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1;
}
#filters>ul>li>div>div {
background: #FFF;
border: .3125em solid var(--ws-lt-blue-2);
box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.2), 0 4px 4px rgba(0,0,0,.2), 0 8px 8px rgba(0,0,0,.2), 0 16px 16px rgba(0,0,0,.2);
max-height: 12.75em;
overflow: auto;
padding: 1.5em 1em .75em;
}
#filters .close {
background: transparent;
border: 0;
color: var(--ws-navy);
cursor: pointer;
font-size: 2em;
line-height: 1;
padding: .25em;
position: absolute;
right: .25em;
top: 0;
}
#filters ul ul {
columns: 2;
margin: 0;
padding-block: .5em;
}
#filters ul ul button {
background: transparent;
border: 0;
color: var(--ws-navy);
display: block;
letter-spacing: 0;
padding: .25em .5em;
text-align: left;
text-transform: none;
width: 100%;
}
#filters ul ul input[type="checkbox"] {
left: 0;
position: absolute;
top: .375em;
}
#filters label {
color: var(--ws-navy);
cursor: pointer;
display: inline-block;
padding-left: 1.5em;
position: relative;
}
#filters ul ul>li {
margin: 0;
}
#filters>ul>li li {
padding-left: 0;
}
#filters>ul>li li::before {
display: none;
}
/* CRITERIA RIBBON ------------------------------ */
/*
- National Scholarship page ribbon 4
- Opportunity Scholarship page ribbon 4
*/
#criteria {
padding-block: clamp(2em, 1.308em + 3.08vw, 4em) clamp(2em, 1.654em + 1.54vw, 3em); /* 360 - 1400 */
position: relative;
}
#criteria h2 {
margin: 0 0 1.25em;
}
#criteria li {
background: var(--ws-lt-blue-2);
padding: 3.25em 1.25em 2.5em;
position: relative;
}
#criteria li::before {
background: url('/wp-content/themes/wpcode-v2/images/icons/check.svg') no-repeat center / 1.6875em auto;
content: '';
height: 2.5em;
left: 0;
position: absolute;
top: 0;
width: 2.5em;
}
#criteria li:nth-child(odd)::before { background-color: var(--ws-navy); }
#criteria li:nth-child(even)::before { background-color: var(--ws-red); }
#criteria li p {
color: #555;
line-height: 1.33;
margin: 0;
}
/* HOW TO APPLY RIBBON ------------------------------ */
/*
- National Scholarship page ribbon 5
- Opportunity Scholarship page ribbon 5
*/
#how-to-apply {
padding-block: 0 clamp(2em, 1.308em + 3.08vw, 4em); /* 360 - 1400 */
}
#how-to-apply .ws-inner-grid {
align-items: start;
}
#how-to-apply .textbox {
grid-column: wrap-start / wrap-end;
}
#how-to-apply .textbox p {
font-size: clamp(1.25em, 1.12em + 0.58vw, 1.625em);
line-height: 1.2;
}
#how-to-apply .textbox p:last-child {
margin-bottom: 0;
}
#how-to-apply ol {
counter-reset: ws-counter;
list-style: none;
margin: 0;
padding: 0;
}
#how-to-apply ol li {
counter-increment: ws-counter;
display: flex;
justify-content: space-between;
}
#how-to-apply ol li:not(:last-of-type) {
margin: 0 0 .8125rem;
}
#how-to-apply ol li>span {
align-items: center;
border: 1px solid var(--ws-lt-blue-2);
display: flex;
margin-left: .75rem;
padding: .5em 1.25em;
width: calc(100% - 5.625rem);
}
#how-to-apply li>span>span {
color: var(--ws-gray);
line-height: 1.2;
}
#how-to-apply ol li:nth-child(odd)>span {
background: var(--ws-lt-blue);
}
#how-to-apply li b {
color: var(--ws-navy);
}
#how-to-apply ol li::before {
content: counter(ws-counter);
display: inline-block;
height: 5.625rem;
font-size: 3.4375em;
line-height: 1.2;
text-align: center;
width: 5.625rem;
}
#how-to-apply ol li:nth-child(5n+1)::before { background: var(--ws-red); color: #FFF; }
#how-to-apply ol li:nth-child(5n+2)::before { background: var(--ws-yellow); color: var(--ws-navy); }
#how-to-apply ol li:nth-child(5n+3)::before { background: var(--ws-navy); color: #FFF; }
#how-to-apply ol li:nth-child(5n+4)::before { background: var(--ws-orange); color: var(--ws-navy); }
#how-to-apply ol li:nth-child(5n+5)::before { background: var(--ws-slate); color: #FFF; }
#how-to-apply ol li::after {
align-items: end;
color: rgba(255,255,255,.8);
content: 'STEP';
display: flex;
height: 5.625rem;
font-size: 1em;
justify-content: center;
padding: 0 0 .25em;
position: absolute;
width: 5.625rem;
}
#how-to-apply ol li:nth-child(5n+2)::after,
#how-to-apply ol li:nth-child(5n+4)::after {
color: rgba(255,255,255,.8);
color: rgba(var(--ws-navy-rgb),.9);
}
#how-to-apply .guide {
background: var(--ws-lt-blue-2);
padding: 1.5em;
text-align: center;
}
#how-to-apply .guide img {
margin: 0 0 1em;
}
#how-to-apply .guide :is(h3, .button) {
font-size: 1.125em;
}
/* SCHOLARSHIPS LANDING PAGE ( ribbon 1 )------------------------------ */
.state-select {
background: #FFF;
margin: 2em 0 0;
max-width: 25em;
padding: .5em 1.5em 1.5em;
position: relative;
}
/* Select your State button */
.state-select .select-button {
background: var(--ws-lt-blue);
border: 0;
color: var(--ws-slate);
letter-spacing: 0;
padding-right: 2.5em;
position: relative;
text-transform: none;
width: 100%;
}
.state-select>div {
position: relative;
}
.state-select .select-button::after {
aspect-ratio: 1;
background: var(--ws-yellow) url('data:image/svg+xml;utf8,') no-repeat center / 1em auto;
content: '';
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.state-select p>b {
color: var(--ws-navy) !important;
}
.state-select p {
color: var(--ws-gray);
}
.state-select p>b {
letter-spacing: 2px;
text-transform: uppercase;
}
.state-select .states {
background: #FFF;
border: .25em solid var(--ws-lt-blue-2);
display: none;
left: 0;
overflow: auto;
position: absolute;
top: 100%;
}
.state-select>div.show .states {
display: block;
}
.state-select .states li {
margin: 0 0 .25em;
}
.state-select .states button {
background: url('data:image/svg+xml;utf8,') no-repeat left .625em top .5em / .4375em auto;
border: 0;
border-radius: .125rem;
color: var(--ws-navy);
display: block;
font-size: clamp(1em, 0.957em + 0.19vw, 1.125em); /* 360 - 1400 */
letter-spacing: 0;
text-align: left;
text-transform: none;
padding: .3125em 1em .3125em 1.5em;
position: relative;
width: 100%;
white-space: nowrap;
}
/* STATE MODALS -------- */
.state-modal {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
overflow-y: auto;
position: fixed;
right: 0;
top: 0;
transform: translate3d(0, 100%, 0);
z-index: 10;
}
.modal-active {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.modal-active .modal-overlay {
opacity: .9;
}
.modal-active .modal-inner {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: all 0.3s ease;
transition-delay: 0.3s;
}
.modal-overlay {
background: var(--ws-navy);
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
}
.modal-inner {
background: var(--ws-lt-blue);
border: .25em solid var(--ws-lt-blue-2);
margin: 2em auto;
max-width: 68.5em;
max-height: calc(100% - 4em);
opacity: 0;
overflow: auto;
position: relative;
transform: translate3d(0, 100%, 0);
width: calc(100% - 3em);
}
.modal-header {
background: #FFF;
padding: clamp(1.5rem, 0.923rem + 1.23vw, 2rem) 2.5em clamp(1.625rem, 0.904rem + 1.54vw, 2.25rem);
position: relative;
text-align: center;
}
.modal-close {
background: #FFF;
border: 0;
color: var(--ws-red);
text-decoration: none;
font-size: 3rem;
line-height: 1;
padding: 0 .25rem;
position: absolute;
right: .5rem;
top: 0rem;
}
.modal-header h2 {
color: var(--ws-gray);
margin: 0;
}
.modal-header h2>.state-name {
color: var(--ws-navy);
display: block;
}
.modal-header h2>b {
color: var(--ws-red);
text-transform: uppercase;
}
.modal-body {
text-align: center;
}
.modal-body .message {
background: #FFF;
margin: 1em auto 2em;
max-width: 54.1875em;
padding: 2em 3em;
text-align: left;
}
.modal-body .message p {
margin: 0;
}
.modal-body>strong {
display: block;
margin: 0 0 1em;
text-transform: uppercase;
}
.state-modal ul.flex {
justify-content: center;
margin: 0;
}
.state-modal li>a {
background: #FFF;
display: block;
position: relative;
}
.state-modal .overlay {
align-items: center;
bottom: 0;
color: #FFF;
display: flex;
height: 6em;
justify-content: center;
left: -1px;
line-height: 1;
opacity: 0;
padding: 1em;
pointer-events: none;
position: absolute;
right: 0;
text-transform: uppercase;
}
.state-modal .opp .overlay {
background: var(--ws-red);
}
.state-modal .nat .overlay {
background: var(--ws-slate);
}
.state-modal li a>div {
padding: 2em;
}
.state-modal li a>div>img {
width: auto;
}
.state-modal li p {
max-width: 14em;
}
.state-modal p {
color: var(--ws-gray);
line-height: 1.3;
margin: 0 auto;
}
.state-modal li>img {
margin: 1em auto;
}
.state-modal .block {
color: #FFF;
line-height: 1.2;
padding: 1em;
margin: 0;
text-transform: uppercase;
}
.state-modal p>a {
color: var(--ws-red);
}
.state-modal .opp .block {
background: var(--ws-red);
}
.state-modal .nat .block {
background: var(--ws-slate);
}
.state-modal p>a:is(:hover, :focus),
#scholarship-california p>:is(b, strong) {
color: var(--ws-red);
}
/* SPLIT IMAGE RIBBON (Scholarships Landing Page ribbon 2) ------------------------------ */
#split-image .wrap>div {
padding-block: clamp(3em, 1.962em + 4.62vw, 6em); /* 360 - 1400 */
}
#split-image .right>div {
margin-left: auto;
}
#split-image .left {
background: no-repeat right bottom;
}
#split-image .right {
background: no-repeat left bottom;
}
#split-image img {
margin: 0 auto 1em;
max-width: min(21.125em, 100%);
}
#split-image p:first-of-type {
color: var(--ws-slate);
}
/* IMPACT RIBBON (Impact page ribbon 2) ------------------------------ */
#impact .textbox {
max-width: 54em;
}
#impact ul.flex {
margin-block: 2.25em 0;
--ws-gap: clamp(1.5em, 0.923em + 1.23vw, 2em);
}
#impact .image {
aspect-ratio: 369 / 452;
background: no-repeat center / cover;
border: 1px solid var(--ws-lt-blue-2);
margin: 0 0 1.75em;
}
/* FEATURED SCHOLARS RIBBON (Impact page ribbon 3) ------------------------------ */
#featured-scholars {
background: var(--ws-lt-blue-2);
padding-block: clamp(3em, 1.962em + 4.62vw, 6em); /* 360 - 1400 */
text-align: center;
}
#featured-scholars .textbox {
text-align: left;
}
#featured-scholars ul.flex {
flex-wrap: wrap;
margin-block: 2.25em 3.5em;
--ws-gap: clamp(1.5em, 0.923em + 1.23vw, 2em);
}
#featured-scholars .image {
aspect-ratio: 1;
background: no-repeat center / cover;
margin: 0 0 .5em;
}
#featured-scholars li:nth-child(odd) .image {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - .875em), 0 calc(100% - 1.875em));
}
#featured-scholars li:nth-child(even) .image {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.875em), 0 calc(100% - .875em));
}
#featured-scholars .clip {
margin: 0 0 1.375em;
}
#featured-scholars li h3 {
margin: 0 0 .625em;
}
#featured-scholars li p {
line-height: 1.4;
margin: 0;
}
#featured-scholars .button {
padding-inline: 1.5em;
}
/* KEEP IN MIND RIBBON (template-opportunity-partner-colleges.php ribbon 3) ------------------------------ */
/* /scholarships/opportunity-scholarship/our-partner-colleges/ */
#keep-in-mind {
clear: both;
padding-block: 0 clamp(3em, 1.962em + 4.62vw, 6em); /* 360 - 1400 */
}
#keep-in-mind ol.flex {
align-items: center;
counter-reset: ws-counter-2;
list-style: none;
padding: 0;--ws-gap: var(
--ws-grid-gap);
}
#keep-in-mind li {
counter-increment: ws-counter-2;
position: relative;
}
#keep-in-mind li::before {
content: counter(ws-counter-2);
color: var(--ws-navy);
display: inline-block;
font-size: 3.75em;
left: 1.5rem;
line-height: 1.2;
position: absolute;
text-align: center;
transform: translateY(-50%);
z-index: 1;
}
#keep-in-mind li:nth-child(odd)::before { top: -.125em; }
#keep-in-mind li:nth-child(even)::before {top: .4em;}
#keep-in-mind li:nth-child(odd)>div {
padding: 2em 1.5em 3.5em;
}
#keep-in-mind li:nth-child(even)>div {
padding: 3.5em 1.5em 3em;
}
#keep-in-mind p {
font-size: 1em;
}
#keep-in-mind .box:is(.navy, .red, .slate) p {
color: rgba(255,255,255,.8);
}
#keep-in-mind a {
text-decoration: underline;
}
/* Opportunity Partner Colleges (template-opportunity-partner-colleges.php ribbon 4) ------------------------------ */
/* /scholarships/opportunity-scholarship/our-partner-colleges/ */
#opportunity-partner-colleges {
padding-block: 0 clamp(3em, 1.962em + 4.62vw, 6em); /* 360 - 1400 */
}
#opportunity-partner-colleges blockquote {
background: var(--ws-lt-blue-2);
border: 1px solid var(--ws-lt-blue-2);
margin: 0;
}
#opportunity-partner-colleges blockquote {
margin-top: 2.5em;
}
#opportunity-partner-colleges .logo {
align-items: center;
background: #FFF;
display: flex;
justify-content: center;
padding: 2em 1.5em;
text-align: center;
}
#opportunity-partner-colleges img {
object-fit: contain;
margin: 0 0 1em;
max-height: 10em;
max-width: min(18.75em, 100%);
}
#opportunity-partner-colleges .quote {
padding: clamp(1.5rem, 0.829rem + 2.98vw, 3.438rem); /* 360 - 1400 */
}
#opportunity-partner-colleges .quote p:last-of-type {
margin: 0 0 1.5em;
}
#opportunity-partner-colleges blockquote p::before,
#opportunity-partner-colleges blockquote p::after {
color: var(--ws-slate-2);
position: relative;
}
#opportunity-partner-colleges blockquote p::before {
left: -.125em;
margin-left: -.5em;
}
#opportunity-partner-colleges blockquote p::after {
right: -.125em;
}
#opportunity-partner-colleges cite>span {
display: block;
line-height: 1.5;
}
#opportunity-partner-colleges cite>span:first-of-type {
line-height: 1.3;
}
/* Not-a-quote overrides */
#opportunity-partner-colleges blockquote.not-quote .quote {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#opportunity-partner-colleges blockquote.not-quote cite {
display: none;
}
#opportunity-partner-colleges blockquote.not-quote p::before,
#opportunity-partner-colleges blockquote.not-quote p::after {
display: none;
}
#opportunity-partner-colleges blockquote.not-quote p:last-of-type {
margin: 0;
}
/* Gallery/Image block lightbox ------------------------------ */
.baguetteBox-button:is(#next-button, #previous-button, #close-button) {
background: transparent;
}
/* Logo block (custom block) ------------------------------ */
.content .logo-block {
--ws-gap: clamp(2em, 1.654em + 1.54vw, 3em); /* 360 - 1400 */
align-items: center;
margin: 2em 0;
row-gap: 2em;
}
.content .logo-block li {
padding: 0;
}
.content .logo-block li::before {
display: none;
}
.logo-block a {
display: block;
}
.logo-block img {
display: block;
margin: 0 auto;
max-height: 5em;
}
/* Social Media (custom block) ------------------------------ */
.social-media a {
display: inline-block;
padding: .5em;
}
.social-media svg {
display: block;
height: 1.75em;
transition: none;
vertical-align: bottom;
width: 1.75em;
}
.social-media .linkedin svg {
fill: #0a66c2;
}
/* --------------- STYLE.CSS --------------- */