stacks as
plain full-width rows rather than a 2-column grid. */
.wm-form-wrap .wm-form-listing.wm-form-listing-full {
display: block;
}
.wm-form-wrap .wm-form-listing.wm-form-listing-full > li {
width: 100%;
margin-bottom: 20px;
}
/* Text inputs: consistent width, visible border, readable text/placeholder */
.wm-form-wrap .wm-form-listing input[type="text"] {
width: 100%;
float: none;
border: 1px solid #64748b;
color: #1f2937;
border-radius: 4px;
}
.wm-form-wrap .wm-form-listing input[type="text"]::placeholder {
color: #64748b;
opacity: 1;
}
/* Graduation year select: match the text inputs' width/border/contrast */
.wm-form-wrap .wm-select select {
width: 100%;
border-color: #64748b;
color: #1f2937;
}
.wm-form-wrap .wm-select select:invalid {
color: #64748b;
}
.wm-form-wrap .wm-select:before {
color: #64748b;
}
/* Radio group */
.wm-form-wrap .wm-radio-fieldset {
border: 0;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 24px;
row-gap: 10px;
width: 100%;
}
.wm-form-wrap .wm-radio-fieldset legend.wm-radio-label {
width: auto;
flex: 0 0 minmax(140px, 30%);
float: none;
padding: 0;
margin: 0;
font-size: 15px;
color: #424242;
line-height: 1.4;
}
.wm-form-wrap .wm-radio-options {
flex: 1 1 340px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.wm-form-wrap .wm-select-checkbox {
display: flex;
align-items: center;
float: none;
width: 100%;
min-height: 44px;
margin-right: 0;
}
.wm-form-wrap .wm-select-checkbox input[type="radio"] {
float: none;
width: 18px;
height: 18px;
margin: 0 10px 0 0;
flex-shrink: 0;
}
.wm-form-wrap .wm-select-checkbox label {
float: none;
display: flex;
align-items: center;
min-height: 44px;
margin-bottom: 0;
}
/* Postal address: keep the label/textarea side-by-side row, resize the
textarea from 208px (fixed in style.css for every .wm-form-wrap
textarea) down to a height that suits a 2-3 line address. */
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row {
display: flex;
align-items: flex-start;
}
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row > .wm-label-sec {
width: 30%;
padding-top: 10px;
flex-shrink: 0;
}
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row > .wm-textarea-container {
width: 70%;
flex-shrink: 0;
}
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row textarea {
width: 100%;
height: auto;
min-height: 120px;
max-height: 260px;
border: 1px solid #64748b;
color: #1f2937;
}
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row textarea::placeholder {
color: #64748b;
opacity: 1;
}
/* Required indicator, prior-submission note, sign-in prompt */
.wm-form-wrap .wm-required {
color: #d9534f;
margin-left: 2px;
}
.wm-form-wrap .wm-form-note {
background: #f1f5f9;
border-left: 4px solid #076415;
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 20px;
font-size: 15px;
}
/* Footer: privacy notice + submit button as one clearly arranged row,
instead of a bare paragraph immediately followed by a floated
button. */
.wm-form-wrap .wm-form-footer {
/* display:flex always creates a new block-formatting-context root,
and with width left auto it shrinks to fit beside the still-
floated ancestors this theme relies on (.wm-form-wrap and
.col-md-12 are both float:left) instead of filling the column -
it measured 0px wide in testing. An explicit width pins it to
the column instead of leaving it to that shrink-to-fit sizing. */
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-top: 24px;
}
.wm-form-wrap .wm-privacy-notice {
font-size: 13px;
color: #4b5563;
flex: 1 1 340px;
min-width: 0;
margin: 0;
/* The theme's own "form p { float: left; position: relative; }"
(style.css) also matches this ; harmless once it's a flex
item (floats don't affect flex-item layout), but reset anyway
so it can't affect any non-flex context this class is reused
in later. */
float: none;
position: static;
}
.wm-signin-prompt {
text-align: center;
padding: 40px 20px;
}
.wm-signin-prompt p {
margin-bottom: 20px;
font-size: 16px;
}
.wm-signin-prompt .btn {
margin: 0 8px;
}
.wm-signin-prompt .wm-btn-outline {
background: transparent;
border: 2px solid #076415;
color: #076415;
}
/* Submit button: give the previously-unstyled "button-md" class an
actual filled, on-brand appearance plus disabled/loading states
(the disable + data-loading-text swap itself is handled in
custom.js's existing submit-lock handler for this form). */
.wm-form-wrap .wm-submit-btn {
flex: 0 0 auto;
background-color: #076415;
border: 1px solid #076415;
color: #ffffff;
font-weight: 600;
padding: 0 32px;
border-radius: 4px;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.wm-form-wrap .wm-submit-btn:hover,
.wm-form-wrap .wm-submit-btn:focus-visible {
background-color: #ea9c0b;
border-color: #ea9c0b;
color: #ffffff;
}
.wm-form-wrap .wm-submit-btn:active {
transform: translateY(1px);
}
.wm-form-wrap .wm-submit-btn:disabled {
background-color: #9ca3af;
border-color: #9ca3af;
color: #ffffff;
cursor: not-allowed;
transform: none;
}
/* Validation states (the theme's own .error-input/.warning-input
utility classes force width:50%, which breaks this layout, so these
are new rather than reused) */
.wm-form-wrap input.wm-input-invalid,
.wm-form-wrap select.wm-input-invalid,
.wm-form-wrap textarea.wm-input-invalid {
border-color: #d9534f !important;
}
.wm-form-wrap .wm-field-error {
color: #b52b27;
font-size: 0.875rem;
margin: 6px 0 0 0;
clear: both;
}
.wm-form-wrap .wm-error-summary {
border: 2px solid #d9534f;
background: #fdf2f2;
padding: 16px 20px;
margin-bottom: 24px;
border-radius: 6px;
clear: both;
}
.wm-form-wrap .wm-error-summary h4 {
margin: 0 0 8px 0;
color: #b52b27;
font-size: 16px;
}
.wm-form-wrap .wm-error-summary ul {
margin: 0;
padding-left: 20px;
}
.wm-form-wrap .wm-error-summary a {
color: #b52b27;
text-decoration: underline;
}
.wm-form-wrap .wm-error-summary:focus {
outline: none;
}
/* Focus-visible states and touch targets */
.wm-form-wrap input:focus-visible,
.wm-form-wrap select:focus-visible,
.wm-form-wrap textarea:focus-visible,
.wm-form-wrap button:focus-visible,
.wm-select-checkbox input:focus-visible + label,
.wm-signin-prompt a:focus-visible {
outline: 3px solid #076415;
outline-offset: 2px;
}
.wm-form-wrap input[type="text"],
.wm-form-wrap input[type="email"],
.wm-form-wrap input[type="tel"],
.wm-form-wrap select,
.wm-form-wrap textarea,
.wm-form-wrap button[type="submit"] {
min-height: 44px;
}
/* Responsive collapse to a single column. No breakpoints previously
existed for any .wm-form-* selector — the 30/70 split was completely
unresponsive. Mirrors the two-tier .auth-page .account-form
breakpoint structure used elsewhere in this file. */
@media (max-width: 767px) {
.wm-form-wrap .wm-form-listing {
grid-template-columns: 1fr;
}
.wm-form-wrap .wm-form-listing > li.wm-label-sec {
padding-top: 0;
margin-bottom: 4px;
}
.wm-form-wrap .wm-radio-fieldset {
flex-direction: column;
align-items: flex-start;
}
.wm-form-wrap .wm-radio-fieldset legend.wm-radio-label {
flex-basis: auto;
}
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row {
flex-direction: column;
}
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row > .wm-label-sec,
.wm-form-wrap .wm-form-listing > li.wm-postal-address-row > .wm-textarea-container {
width: 100%;
}
.wm-form-wrap .wm-form-footer {
flex-direction: column;
align-items: stretch;
}
.wm-form-wrap .wm-submit-btn {
width: 100%;
}
.wm-signin-prompt .btn {
display: block;
margin: 10px auto;
max-width: 260px;
}
}
@media (max-width: 576px) {
.wm-form-wrap {
padding: 10px;
}
.wm-form-wrap .wm-error-summary {
padding: 12px 14px;
}
.wm-select-checkbox label {
font-size: 14px;
}
}
.study-section .section-header,
.question-section .section-header,
.student-stories .section-header {
margin-bottom: 40px;
}
.study-section .section-header h2,
.question-section .section-header h2,
.student-stories .section-header h2 {
font-family: 'Ubuntu', sans-serif;
font-size: 36px;
color: #076415;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.2;
}
.study-section .section-header p,
.question-section .section-header p,
.student-stories .section-header p {
font-size: 16px;
color: #555;
max-width: 700px;
}
.study-section .section-header.text-center p,
.question-section .section-header.text-center p,
.student-stories .section-header.text-center p {
margin-left: auto;
margin-right: auto;
}
.begin-future-list .future-item {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
.begin-future-list .future-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.begin-future-list .future-item h3 {
color: #076415;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.begin-future-list .future-item p {
color: #555;
font-size: 15px;
line-height: 1.75;
margin-bottom: 10px;
}
.future-item-icon {
color: #e79800;
margin-right: 10px;
font-size: 20px;
}
.future-item-link {
color: #e79800;
text-decoration: none;
font-weight: 300;
transition: color 0.3s;
}
.future-item-link:hover {
color: #e79800;
text-decoration: underline;
}
.future-item-link .fa-long-arrow-right {
display: inline-block;
width: 18px;
height: 8px;
margin-left: 5px;
position: relative;
vertical-align: middle;
}
.future-item-link .fa-long-arrow-right:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 17px;
height: 1px;
background: currentColor;
transform: translateY(-50%);
}
.future-item-link .fa-long-arrow-right:after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
/* ================================
Admission Page - Search Section
================================ */
.admission-search-section {
margin-top: 40px;
}
.admission-search-container {
padding-top: 48px;
padding-bottom: 48px;
}
.admission-results-box {
border-left: 1px solid #e0e0e0;
}
.admission-results-title {
color: #076415;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
}
.admission-results-table {
margin-bottom: 0;
background-color: #ffffff;
}
.admission-search-alert {
margin-bottom: 0;
}
@media (max-width: 991px) {
.admission-results-box {
border-left: none;
border-top: 1px solid #e0e0e0;
margin-top: 25px;
padding-top: 25px;
}
}
.study-image-card {
position: relative;
overflow: hidden;
margin: 0;
background: #003366;
box-shadow: 0 20px 45px rgba(0,0,0,0.16);
}
.study-image-card img {
display: block;
transition: transform 0.45s ease;
}
.study-image-card:hover img {
transform: scale(1.04);
}
.study-image-card figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 26px 32px;
background: linear-gradient(180deg, rgba(0,51,102,0), rgba(0,51,102,0.92));
color: #fff;
z-index: 2;
}
.study-image-card-blue figcaption {
background: linear-gradient(180deg, rgba(0,153,89,0), rgba(0,80,55,0.94));
}
.study-image-card figcaption strong,
.study-image-card figcaption span {
display: block;
}
.study-image-card figcaption strong {
font-family: 'Ubuntu', sans-serif;
font-size: 24px;
margin-bottom: 6px;
}
.study-image-card figcaption span {
color: rgba(255,255,255,0.9);
font-size: 14px;
line-height: 1.55;
}
.student-stories {
padding: 70px 0;
background: #fff;
color: #333;
}
.student-stories .section-header {
text-align: center;
}
.student-stories .section-header h2 {
color: #333;
}
.student-stories .section-header p {
color: #666;
}
.video-wrapper {
position: relative;
padding-bottom: 40%;
height: 0;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 20px 45px rgba(0,0,0,0.14);
}
.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.video-bx {
position: relative;
padding-bottom: 40%;
height: 0;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 20px 45px rgba(0,0,0,0.14);
}
.video-bx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The campus tour video sits in a col-md-6 (narrower than the full-width
student-stories section .video-wrapper was designed for), so it needs a
taller aspect ratio to avoid looking squashed. */
.wm-studentslove-full .video-wrapper,
.wm-studentslove-full .video-bx {
padding-bottom: 75%;
}
@media (max-width: 768px) {
.wm-studentslove-full .video-wrapper,
.wm-studentslove-full .video-bx {
padding-bottom: 56.25%;
}
}
.story-note {
height: 100%;
min-height: 320px;
padding: 36px 32px;
background: #003366;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.story-note > i {
color: #FFD700;
font-size: 34px;
margin-bottom: 20px;
}
.story-note h3 {
color: #fff;
font-family: 'Ubuntu', sans-serif;
font-size: 26px;
line-height: 1.25;
margin-bottom: 14px;
}
.story-note p {
color: rgba(255,255,255,0.86);
font-size: 15px;
line-height: 1.75;
}
.story-note a,
.study-info-card a,
.study-related-card a {
color: #e79800;
font-weight: 300;
}
.story-note a {
color: #FFD700;
}
.study-card-row,
.study-related-row {
display: flex;
flex-wrap: wrap;
}
.study-card-row > [class*="col-"],
.study-related-row > [class*="col-"] {
margin-bottom: 30px;
}
.study-info-card {
height: 100%;
min-height: 268px;
padding: 34px 30px;
background: #fff;
border: 1px solid #e7ebef;
border-top: 4px solid #009959;
box-shadow: 0 12px 30px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.study-info-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}
.study-info-card > i {
color: #009959;
font-size: 40px;
margin-bottom: 18px;
}
.study-info-card h3 {
color: #003366;
font-size: 21px;
font-weight: 700;
margin-bottom: 12px;
}
.study-info-card p {
color: #555;
font-size: 14px;
line-height: 1.7;
margin-bottom: 16px;
}
.course-search-cta {
padding: 60px 0;
background: #009959;
text-align: center;
color: #fff;
}
.course-search-cta .study-eyebrow {
color: #FFD700;
}
.course-search-cta h2 {
font-family: 'Ubuntu', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 15px;
color: #fff;
}
.course-search-cta p {
font-size: 17px;
margin: 0 auto 25px;
color: rgba(255,255,255,0.9);
max-width: 760px;
}
.course-search-cta .cta-btn {
display: inline-block;
padding: 14px 40px;
background: #fff;
color: #009959;
font-weight: 600;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
}
.course-search-cta .cta-btn:hover {
background: #003366;
color: #fff;
}
.study-related-card {
height: 100%;
background: #fff;
border: 1px solid #e7ebef;
box-shadow: 0 12px 30px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.study-related-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}
.study-related-card img {
display: block;
width: 100%;
height: 170px;
object-fit: cover;
}
.study-related-card div {
padding: 22px 22px 24px;
}
.study-related-card h3 {
color: #076415;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.question-section {
padding: 60px 0;
background: #fff;
}
.question-section .section-header h2 {
color: #009959;
}
.question-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.question-card {
background: #fff;
border-radius: 10px;
padding: 35px 28px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 15px rgba(0,0,0,0.06);
transition: transform 0.3s;
}
.question-card:hover {
transform: translateY(-3px);
}
.question-card .q-icon {
font-size: 40px;
color: #009959;
margin-bottom: 15px;
}
.question-card h3 {
font-size: 20px;
color: #009959;
margin-bottom: 10px;
font-weight: 700;
}
.question-card p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 18px;
}
.question-card a {
display: inline-block;
padding: 10px 25px;
background: #009959;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
transition: background 0.3s;
}
.question-card a:hover {
background: #007a47;
}
@media (max-width: 991px) {
section.study-intro .study-intro-row,
.study-section .study-feature-row,
.student-stories .student-story-row,
.study-card-row,
.study-related-row {
display: block;
}
section.study-intro .intro-left,
section.study-intro .intro-right-col,
.study-col-left,
.study-col-right {
padding-left: 15px;
padding-right: 15px;
}
section.study-intro .intro-left {
margin-bottom: 34px;
}
.study-section .section-header h2,
.question-section .section-header h2,
.student-stories .section-header h2 {
font-size: 26px;
}
section.study-intro .intro-left h2 {
font-size: 34px;
}
.study-section-img {
height: 420px;
}
.story-note {
min-height: 0;
margin-top: 30px;
}
.question-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
section.study-intro {
padding: 45px 0 40px;
}
.study-section,
.student-stories,
.course-search-cta,
.question-section {
padding: 45px 0;
}
.question-grid,
.study-intro-stats {
grid-template-columns: 1fr;
}
section.study-intro .intro-left h2 {
font-size: 28px;
}
.study-quick-panel,
.story-note,
.study-info-card,
.question-card {
padding: 28px 24px;
}
.study-section-img {
height: 340px;
}
.video-wrapper {
padding-bottom: 56.25%;
}
}
/* =============================
NON SCHOOL LEAVERS CSS
=============================== */
/* ================================
Hero Slider Section
================================ */
#wm-header {
position: relative;
z-index: 30;
}
#wm-header .wm-megamenu,
#wm-header .wm-dropdown-menu {
z-index: 9999;
}
.edubin-slider-section-03 {
clear: both;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 0;
z-index: 1;
margin-top: 0;
width: 100%;
}
.edubin-slider-section-03 .slider-cont {
position: relative;
z-index: 5;
background-color: rgba(0, 0, 0, 0.4);
padding: 30px 45px;
text-align: left;
max-width: 1400px;
margin: 0;
}
.edubin-slider-section-03 .slider-cont .title {
font-size: 42px;
color: #ffffff;
padding-bottom: 15px;
font-weight: 700;
line-height: 1.15;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: -0.5px;
}
.edubin-slider-section-03 .slider-cont span {
font-size: 16px;
color: #ffffff;
display: block;
margin-bottom: 30px;
font-weight: 400;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
}
.edubin-slider-section-03 .slider-btn {
display: inline-block;
padding: 12px 30px;
background-color: #EFBB20;
color: #fff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
margin-top: 10px;
}
.edubin-slider-section-03 .slider-btn:hover {
background-color: #D4A017;
color: #ffffff;
transform: translateY(-2px);
}
/* ================================
Hero Slider Container
================================ */
.hero-slider-active {
position: relative;
overflow: hidden !important;
width: 100%;
max-width: none;
margin: 0;
}
.hero-slider-active .swiper-wrapper {
display: flex;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.hero-slider-active .swiper-slide {
flex: 0 0 100%;
max-width: 100%;
}
.hero-slider-active .swiper-pagination-bullet {
border: 0;
cursor: pointer;
display: block;
padding: 0;
}
.hero-slider-active .swiper-slide {
clip-path: polygon(
0 0,
100% 0,
100% 100%,
60% 100%,
55% calc(100% - 50px),
0 calc(100% - 50px)
);
overflow: visible;
}
.hero-slide-item {
position: relative;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
min-height: 400px;
max-height: 638px;
height: 638px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-slide-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%);
z-index: 1;
}
.hero-slide-item .container,
.hero-slide-item .row,
.hero-slide-item .slider-cont {
position: relative;
z-index: 2;
}
/* ================================
Slide Background Images
================================ */
.hero-slide-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.slide-1 {
background-image: url(../extra-images/new_slider-1.jpg);
}
.slide-2 {
background-image: url(../extra-images/new_slider-2.jpg);
}
.slide-3 {
background-image: url(../extra-images/banner-campuses-1.jpg);
}
.slide-4 {
background-image: url(../extra-images/banner-campuses-3.jpg);
}
/* ================================
Pagination Bars + Pause Button
================================ */
.slider-controls {
position: absolute;
bottom: -5px;
left: 0;
/* Stop at the slide's diagonal clip-path cut (0-55% flat, 55-60% diagonal)
instead of the full container width, so the bar fills the cut-out
notch rather than floating short of it or overlapping the photo. */
right: 45%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
z-index: 100;
padding: 12px 30px;
padding-left: 50px;
box-sizing: border-box;
}
.slide-counter {
font-size: 14px;
font-weight: 600;
color: #333;
min-width: 20px;
text-align: center;
}
.hero-slider-active .swiper-pagination {
position: relative;
bottom: auto;
left: auto;
right: auto;
text-align: center;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background: rgba(0, 0, 0, 0.3);
padding: 0 15px;
border-radius: 2px;
height: 2px;
/* Stretch to fill the space .slider-controls now reserves, instead of
sizing to the bullets' own fixed width. */
flex: 1 1 auto;
min-width: 0;
}
.hero-slider-active .swiper-pagination-bullet {
/* Share the stretched pagination width evenly instead of a fixed 80px,
so the bar reaches the end of .slider-controls (the clip-path cut). */
flex: 1 1 0;
width: auto;
height: 2px;
background: rgba(255, 255, 255, 0.5);
opacity: 1;
margin: 0;
transition: all 0.3s ease;
border-radius: 2px;
}
.hero-slider-active .swiper-pagination-bullet-active {
background: #389940;
height: 1.5px;
}
.pause-btn {
width: 32px;
height: 32px;
background: transparent;
border: 2px solid #555555;
color: #555555;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
border-radius: 4px;
flex-shrink: 0;
}
.pause-btn:hover {
background: transparent;
color: #ffffff;
}
.pause-btn i {
pointer-events: none;
}
/* ================================
Desktop / Tablet Responsive
================================ */
@media only screen and (max-width: 1199px) {
.edubin-slider-section-03 .slider-cont {
padding: 70px 60px 80px;
}
.edubin-slider-section-03 .slider-cont .title {
font-size: 40px;
}
}
@media only screen and (max-width: 991px) {
.edubin-slider-section-03 {
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.hero-slider-active {
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
.hero-slider-active .swiper-wrapper,
.hero-slider-active .swiper-slide {
clip-path: none !important;
overflow: hidden !important;
}
.hero-slide-item {
min-height: 50vh !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
display: flex !important;
align-items: flex-end !important;
padding-bottom: 40px !important;
overflow: hidden !important;
}
.slider-cont {
text-align: left !important;
padding: 25px 30px !important;
}
.slider-cont .title {
font-size: 28px !important;
line-height: 1.3 !important;
}
.slider-cont span {
font-size: 14px !important;
line-height: 1.5 !important;
}
.slider-statistics {
margin-top: 15px !important;
padding: 0 5px !important;
}
.slider-statistics .single-counter span::before {
display: none !important;
}
}
/* ================================
Tablet Hero Slider Fix
767px - 991px
================================ */
@media only screen and (min-width: 767px) and (max-width: 991px) {
.edubin-slider-section-03 {
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
.hero-slider-active {
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
.hero-slider-active .swiper-wrapper {
overflow: hidden !important;
}
.hero-slider-active .swiper-slide {
overflow: hidden !important;
}
.hero-slide-item {
min-height: 55vh !important;
height: 55vh !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
padding: 0 0 40px 0 !important;
}
.hero-slide-item::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
z-index: 1 !important;
}
.hero-slide-item .container,
.hero-slide-item .row {
position: relative !important;
z-index: 2 !important;
height: auto !important;
width: 100% !important;
}
.edubin-slider-section-03 .slider-cont {
position: relative !important;
z-index: 3 !important;
text-align: left !important;
padding: 25px 30px !important;
background-color: rgba(7, 41, 77, 0.55) !important;
border-radius: 8px !important;
max-width: 85% !important;
}
.edubin-slider-section-03 .slider-cont .title {
font-size: 28px !important;
line-height: 1.3 !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
.edubin-slider-section-03 .slider-cont span {
font-size: 14px !important;
line-height: 1.5 !important;
display: block !important;
margin-bottom: 12px !important;
}
.edubin-slider-section-03 .slider-btn {
padding: 10px 24px !important;
font-size: 14px !important;
margin-top: 8px !important;
}
.hero-slide-item .col-lg-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.slider-statistics .single-counter span::before {
display: none !important;
}
.slider-statistics .single-counter .stat-number {
font-size: 20px !important;
font-weight: 700 !important;
display: inline-block !important;
border-bottom: 2px solid #EFBB20 !important;
padding-bottom: 4px !important;
margin-bottom: 4px !important;
}
.slider-statistics {
margin-top: 15px !important;
padding: 0 !important;
width: 100% !important;
}
.slider-statistics .row {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
margin: 0 !important;
width: 100% !important;
}
.slider-statistics .single-counter {
padding: 10px 8px !important;
margin: 0 !important;
text-align: center !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border-radius: 4px !important;
}
.slider-statistics p {
font-size: 11px !important;
margin: 4px 0 0 0 !important;
line-height: 1.3 !important;
}
}
/* ================================
Mobile Hero Slider
================================ */
@media only screen and (max-width: 767px) {
.slider-controls {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 5px 0 0 0 !important;
justify-content: flex-start !important;
padding-left: 10px !important;
padding-right: 10px !important;
width: 100% !important;
gap: 4px !important;
box-sizing: border-box !important;
}
.slider-controls .slide-counter,
.slider-controls .swiper-pagination,
.slider-controls .pause-btn {
margin: 0 4px 0 0 !important;
}
.slider-controls .slide-counter {
font-size: 1rem !important;
min-width: 36px !important;
}
.slider-controls .pause-btn {
font-size: 1.1rem !important;
padding: 4px 8px !important;
}
.slider-controls .swiper-pagination {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.edubin-slider-section-03 {
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.hero-slider-active .swiper-wrapper,
.hero-slider-active .swiper-slide {
clip-path: none !important;
}
.swiper-slide,
.slider-item,
.hero-slide-item {
min-height: 65vh !important;
height: 65vh !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.hero-slide-item {
display: flex !important;
align-items: flex-end !important;
padding: 0 0 40px 0 !important;
}
.edubin-slider-section-03 .slider-cont {
padding: 20px 16px;
}
.edubin-slider-section-03 .slider-cont .title {
font-size: 22px;
}
.edubin-slider-section-03 .slider-cont span {
font-size: 20px;
}
}
@media only screen and (max-width: 576px) {
.hero-slide-item .container {
position: relative !important;
z-index: 2 !important;
height: auto !important;
width: 100% !important;
}
.hero-slide-item .row {
position: relative !important;
z-index: 2 !important;
height: auto !important;
margin: 0 !important;
width: 100% !important;
}
.edubin-slider-section-03 {
padding: 0 !important;
margin: 0 !important;
}
.hero-slide-item {
min-height: 65vh !important;
height: 65vh !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
padding: 0 0 40px 0 !important;
}
.hero-slide-item::before {
background: transparent !important;
}
.edubin-slider-section-03 .slider-cont {
position: relative !important;
z-index: 3 !important;
text-align: center !important;
padding: 20px 16px !important;
background-color: rgba(7, 41, 77, 0.6) !important;
border-radius: 8px !important;
max-width: 85% !important;
margin: 0 auto !important;
}
.edubin-slider-section-03 .slider-cont .title {
position: relative !important;
font-size: 20px !important;
line-height: 1.3 !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
background-color: transparent !important;
text-align: center !important;
}
.edubin-slider-section-03 .slider-cont span {
font-size: 13px !important;
line-height: 1.5 !important;
display: block !important;
margin-bottom: 10px !important;
}
.edubin-slider-section-03 .slider-btn {
padding: 8px 20px !important;
font-size: 13px !important;
margin-top: 6px !important;
border-radius: 4px !important;
display: inline-block !important;
}
.hero-slide-item .col-lg-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 0 10px !important;
}
.slider-statistics .single-counter span::before {
display: none !important;
}
.slider-statistics .single-counter .stat-number {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
display: inline-block !important;
border-bottom: 2px solid #EFBB20 !important;
padding-bottom: 4px !important;
margin-bottom: 4px !important;
}
.slider-statistics {
margin-top: 12px !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
}
.slider-statistics .row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
margin: 0 !important;
width: 100% !important;
position: relative !important;
}
.slider-statistics .single-counter {
padding: 8px 6px !important;
margin: 0 !important;
min-width: 0 !important;
width: 100% !important;
text-align: center !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border-radius: 4px !important;
}
.slider-statistics p {
font-size: 10px !important;
margin: 4px 0 0 0 !important;
line-height: 1.2 !important;
}
.hero-slider-active .swiper-pagination {
position: relative !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
margin: 15px 0 0 0 !important;
padding: 0 15px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
z-index: 5 !important;
}
.hero-slider-active .swiper-pagination-bullet {
width: 40px !important;
height: 3px !important;
background: rgba(255, 255, 255, 0.4) !important;
border-radius: 2px !important;
opacity: 1 !important;
transition: all 0.3s ease !important;
margin: 0 !important;
}
.hero-slider-active .swiper-pagination-bullet-active {
background: #ffffff !important;
height: 4px !important;
transform: scale(1.1) !important;
}
.slider-controls {
position: absolute !important;
bottom: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
z-index: 10 !important;
padding: 0 15px !important;
}
.slide-counter {
color: #ffffff !important;
font-size: 12px !important;
font-weight: 500 !important;
background: rgba(0, 0, 0, 0.5) !important;
padding: 4px 8px !important;
border-radius: 12px !important;
}
.pause-btn {
background: transparent !important;
border: 1px solid #555555 !important;
color: #555555 !important;
width: 32px !important;
height: 32px !important;
border-radius: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.pause-btn:hover {
background: #f5f5f5 !important;
}
}
/* ==============================
PROMOBOX AND BANNER
=============================== */
/* Main banner wrapper */
.wm-inner-banner {
position: relative;
height: 500px;
margin-bottom: 180px; /* space for overlapping promo box */
overflow: visible;
}
/* Background image */
.wm-inner-banner-bg {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url("extra-images/HP-slider2.png");
background-size: cover;
background-position:center;
z-index:1;
}
/* Optional dark effect on image */
.wm-inner-banner-bg::after {
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);
}
/* Promo box positioning */
.wm-banner-promo-wrapper {
position:absolute;
bottom:-130px;
left:0;
width:100%;
z-index:5;
}
/* Promo box styling enhancement */
.wm-banner-promo-wrapper .wm-promo-box {
background:#ffffff;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
border-radius:10px;
}
/* Make sure content below stays visible */
.wm-content-section {
position:relative;
z-index:1;
}
/* =======================================
IMPORTANT NOTICE CSS
======================================= */
.important-notice {
display: flow-root;
width: 100%;
background: #f5f5f5;
border-left: 3px solid #e79800;
padding: 20px;
margin: 20px 0;
box-sizing: border-box;
color: #444;
font-size: 16px;
line-height: 1.7;
}
.important-notice p {
margin: 10px 0;
float: none !important;
}
.important-notice strong {
display: inline; /* Important */
font-weight: 700;
color: #222;
}
/* ===========================
ACCOMMODATION CAMPUS CSS
============================ */
.row.d-flex {
display: flex;
flex-wrap: wrap;
}
.col-lg-4.col-md-6.d-flex {
display: flex;
}
.accommodation-card {
width: 100%;
height: 100%;
display: flex !important;
flex-direction: column;
background: #fff;
}
.accommodation-card figure {
margin: 0;
}
.accommodation-card img {
width: 100%;
height: 230px;
object-fit: cover;
}
/* Card content area */
.accommodation-card .wm-latest-event-text {
padding: 20px;
display: flex !important;
flex-direction: column;
flex: 1;
text-align: left;
}
/* Title */
.accommodation-card .wm-latest-event-text h6 {
margin-bottom: 15px;
font-weight: 700 !important;
}
/* Description */
.accommodation-card .wm-latest-event-text p {
margin-bottom: 20px;
flex: 1;
}
/* Button */
.accommodation-card .wm-banner-btn {
margin-top: auto !important;
align-self: flex-start;
}
.accommodation-row {
display:flex;
flex-wrap:wrap;
}
/* =============================
ABOUT US PAGE FACULTY CARDS CSS
============================== */
/* Faculty Cards */
@media (min-width: 992px) {
.faculty-row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.faculty-row .faculty-card {
width: 25%;
max-width: 25%;
flex: 0 0 25%;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px;
display: flex;
}
.faculty-row .faculty-card .wm-event {
height: 100%;
}
}
/* Tablet */
@media (max-width: 991px) and (min-width: 768px) {
.faculty-row .faculty-card {
width: 50%;
max-width: 50%;
flex: 0 0 50%;
margin-bottom: 30px;
}
}
/* Mobile */
@media (max-width: 767px) {
.faculty-row .faculty-card {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
margin-bottom: 30px;
}
}
/* =============================
FACULTY CARD BUTTON ALIGNMENT
============================== */
.faculty-row .faculty-card,
.faculty-row .faculty-card .wm-event,
.faculty-row .faculty-card ul,
.faculty-row .faculty-card li {
height: 100%;
}
.faculty-row .faculty-card .wm-latest-event-text {
display: flex;
flex-direction: column;
min-height: 220px; /* adjust depending on your card height */
}
.faculty-row .faculty-card .wm-latest-event-text p {
flex: 1;
}
.faculty-row .faculty-card .wm-latest-event-text {
display: flex;
flex-direction: column;
height: 100%;
}
.faculty-row .faculty-card .wm-banner-btn {
width: fit-content !important;
display: inline-block !important;
margin-top: auto;
}
/* =====================================
DWU MAIN MENU HOVER EFFECT (INCLUDING HOME)
Override active menu colour
===================================== */
/* Normal state */
.wm-header-one .navbar-nav > li > a {
color: #121212 !important;
transition: color 0.3s ease;
}
/* Hover state for ALL menu items including Home */
.wm-header-one .navbar-nav > li:hover > a,
.wm-header-one .navbar-nav > li > a:hover {
color: #ea9c0b !important;
}
/* Active Home item should not lock the colour */
.wm-header-one .navbar-nav > li.active > a {
color: #121212 !important;
}
/* Active item hover should still become yellow */
.wm-header-one .navbar-nav > li.active:hover > a,
.wm-header-one .navbar-nav > li.active > a:hover {
color: #ea9c0b !important;
}
/* Remove underline */
.wm-header-one .navbar-nav > li > a:after {
display: none !important;
}
.wm-header-one .navbar-nav > li > a {
text-transform: none !important;
}
/* =====================================
DWU MEGA MENU ITEM HOVER UNDERLINE
===================================== */
/* Positioning for mega menu text links only */
.wm-header-one .wm-megalist li a {
position: relative;
display: inline-block;
}
/* Hover text colour */
.wm-header-one .wm-megalist li a:hover {
color: #ea9c0b !important;
}
/* Yellow underline animation */
.wm-header-one .wm-megalist li a:after {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: -3px;
left: 0;
background-color: #ea9c0b;
visibility: hidden;
transform: scaleX(0);
transition: all .25s ease-out;
}
/* Display underline on hover */
.wm-header-one .wm-megalist li a:hover:after {
visibility: visible;
transform: scaleX(1);
}
/* ==========================================
DWU MOBILE MEGA MENU (MEANMENU)
========================================== */
/* =====================================
MOBILE MENU HAMBURGER
===================================== */
.mobile-menu-toggle {
display:none;
width:45px;
height:44px;
background:transparent;
border:none;
cursor:pointer;
padding:0;
}
.mobile-menu-toggle span {
display:block;
width:30px;
height:3px;
margin:6px auto;
background:#009959;
border-radius:3px;
transition:all .3s ease;
}
/* Hamburger Animation */
.mobile-menu-toggle.active span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2){
opacity:0;
}
.mobile-menu-toggle.active span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}
/* =====================================
OVERLAY
===================================== */
.mobile-menu-overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
opacity:0;
visibility:hidden;
transition:opacity .35s ease, visibility .35s ease;
z-index:9998;
}
.mobile-menu-overlay.active {
opacity:1;
visibility:visible;
}
/* =====================================
MOBILE SIDEBAR
===================================== */
.mobile-sidebar {
position:fixed;
top:0;
right:-390px;
display:flex;
flex-direction:column;
width:360px;
max-width:50%;
height:100vh;
background:#fff;
z-index:9999;
transition:right .4s ease;
overflow:hidden;
box-shadow:-5px 0 25px rgba(0,0,0,.15);
}
.mobile-sidebar.active {
right:0;
}
/* =====================================
MOBILE HEADER
===================================== */
.mobile-sidebar-header {
display:flex;
justify-content:space-between;
align-items:center;
flex:0 0 auto;
padding:20px;
border-bottom:1px solid #eee;
background:#ffffff;
}
.mobile-sidebar-header img {
width:150px;
height:auto;
}
.mobile-sidebar-body {
display:flex;
flex:1 1 auto;
flex-direction:column;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.mobile-close {
width:40px;
height:40px;
border:none;
background:none;
font-size:35px;
line-height:1;
color:#009959;
cursor:pointer;
}
.mobile-sidebar-image {
margin-top:auto;
padding:18px 20px 0;
}
.mobile-sidebar-image img {
display:block;
width:100%;
height:130px;
object-fit:cover;
border-radius:6px;
}
.mobile-sidebar-social {
padding:18px 20px 24px;
border-top:1px solid #eeeeee;
text-align:center;
background:#ffffff;
}
.mobile-sidebar-social span {
display:block;
margin-bottom:14px;
color:#222222;
font-size:14px;
font-weight:600;
}
.mobile-social-icons {
display:flex;
justify-content:center;
gap:12px;
}
.mobile-social-icons a {
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:1px solid #e5e5e5;
border-radius:50%;
color:#076415;
font-size:16px;
text-decoration:none;
transition:all .3s ease;
}
.mobile-social-icons a:hover {
border-color:#ea9c0b;
color:#ea9c0b;
}
/* =====================================
MOBILE CONTACT CARD
===================================== */
.mobile-menu-contact {
margin-top:auto;
padding:20px;
}
.mobile-menu-contact-card {
background: linear-gradient(65deg, #009959 0%, #076415 100%);
color:#fff;
border-radius:8px;
padding:24px 20px;
min-height:200px;
box-shadow:0 4px 14px rgba(0,0,0,.12);
display:flex;
flex-direction:column;
justify-content:center;
}
.mobile-menu-contact-eyebrow {
display:block;
font-size:12px;
text-transform:uppercase;
letter-spacing:1.5px;
opacity:.85;
margin-bottom:6px;
}
.mobile-menu-contact-card h4 {
color:#fff;
margin:0 0 10px;
font-size:18px;
font-weight: 400;
}
.mobile-menu-contact-card > p {
font-family: "Inter", "Segoe UI", Arial, sans-serif;
font-size: 13.5px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.2px;
}
.mobile-menu-contact-list {
margin:0;
padding:0;
list-style:none;
}
.mobile-menu-contact-list li {
display:flex;
align-items:flex-start;
margin-bottom:10px;
}
.mobile-menu-contact-icon {
display:flex;
align-items:center;
justify-content:center;
width:35px;
height:35px;
background:#e79800;
border-radius:50%;
margin-right:14px;
flex:0 0 34px;
color:#fff;
font-size:12px;
}
.mobile-menu-contact-list div span {
display:block;
font-size:12px;
opacity:.75;
margin-bottom:2px;
}
.mobile-menu-contact-list a,
.mobile-menu-contact-list p {
color: #fff;
font-family: "Inter", "Segoe UI", Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.2px;
margin: 0;
}
.mobile-menu-contact-list a:hover {
text-decoration:underline;
}
.mobile-menu-contact-actions {
margin-top:18px;
}
.mobile-contact-button {
display:inline-block;
background:#e79800;
color:#000;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-size:12px;
font-weight:500;
transition:all .3s ease;
}
.mobile-contact-button:hover {
background:#f0f0f0;
color:#007a47;
}
.mobile-menu-social {
padding-top:20px;
text-align:center;
}
.mobile-menu-social span {
display:block;
margin-bottom:12px;
color:#222;
font-size:1px;
font-weight:400;
}
.mobile-menu-social-links {
display:flex;
justify-content:center;
gap:12px;
}
.mobile-menu-social-links a {
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:1px solid #e5e5e5;
border-radius:50%;
color:#076415;
font-size:16px;
text-decoration:none;
transition:all .3s ease;
}
.mobile-menu-social-links a:hover {
border-color:#ea9c0b;
color:#ea9c0b;
}
/* =====================================
MOBILE NAVIGATION
===================================== */
.mobile-navigation ul {
margin:0;
padding:0;
list-style:none;
}
.mobile-navigation li {
list-style:none;
line-height:normal;
}
.mobile-navigation li::before,
.mobile-navigation li::after {
display:none;
content:none;
}
.mobile-navigation > ul > li {
border-bottom:1px solid #eeeeee;
}
.mobile-navigation a {
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
padding:16px 22px;
font-size:15px;
font-weight:500;
color:#222;
text-decoration:none;
transition:color .3s ease;
}
.mobile-navigation a:after {
content:"";
position:absolute;
height:3px;
right:22px;
bottom:8px;
left:22px;
background-color:#ea9c0b;
visibility:hidden;
transform:scaleX(0);
transform-origin:left;
transition:all .25s ease-out;
}
.mobile-navigation a:hover {
color:#ea9c0b;
}
.mobile-navigation a:hover:after {
visibility:visible;
transform:scaleX(1);
}
.mobile-navigation li ul a:after {
left:40px;
}
.mobile-navigation li ul li ul a:after {
left:60px;
}
.mobile-navigation a:hover .arrow {
border-color:currentColor;
}
/* Sub Menu */
.mobile-navigation li ul {
display:none;
background:#f8f8f8;
}
.mobile-navigation li.has-submenu.active > ul {
display:block;
}
.mobile-navigation li ul a {
padding-left:40px;
font-size:14px;
font-weight:400;
}
/* Nested submenu */
.mobile-navigation li ul li ul a {
padding-left:60px;
}
/* =====================================
CHEVRON ARROW
===================================== */
.mobile-navigation .arrow {
display:inline-block;
flex:0 0 auto;
width:9px;
height:9px;
border-right:2px solid #333;
border-bottom:2px solid #333;
transform:rotate(45deg);
transform-origin:center;
transition:transform .3s ease;
margin:0 5px 0 12px;
}
.mobile-navigation .arrow i {
display:none;
}
/* Rotate when active */
.mobile-navigation .has-submenu.active > a .arrow {
transform:rotate(225deg);
}
/* Parent items that link to their own page AND have a submenu
(About Us, Study at DWU, Campuses): the link and the toggle button
sit side by side instead of both living inside one anchor. */
.mobile-navigation .mobile-nav-item {
display:flex;
align-items:stretch;
}
.mobile-navigation .mobile-nav-item > a {
flex:1 1 auto;
min-width:0;
}
.mobile-navigation .submenu-toggle {
display:flex;
flex:0 0 auto;
align-items:center;
justify-content:center;
width:48px;
min-height:48px;
padding:0;
margin:0;
background:transparent;
border:none;
border-left:1px solid #eeeeee;
cursor:pointer;
}
.mobile-navigation .submenu-toggle .arrow {
margin:0;
}
.mobile-navigation .submenu-toggle:hover .arrow {
border-color:#ea9c0b;
}
.mobile-navigation .submenu-toggle:focus-visible {
outline:2px solid #ea9c0b;
outline-offset:-2px;
}
.mobile-navigation .has-submenu.active > .mobile-nav-item > .submenu-toggle .arrow {
transform:rotate(225deg);
}
/* =====================================
RESPONSIVE
===================================== */
@media(max-width:991px){
body.dwu-homepage {
overflow-y:auto;
}
body.dwu-homepage > .wm-main-wrapper {
padding-top:104px;
}
body.dwu-homepage #wm-header {
position:fixed;
top:0;
left:0;
width:100%;
z-index:9997;
}
.wm-main-header {
text-align:left;
box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.wm-main-header .row {
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
}
.wm-main-header .col-md-3 {
float:none!important;
width:auto!important;
flex:1 1 auto;
min-width:0;
}
.wm-main-header .col-md-9 {
float:none!important;
width:auto!important;
flex:0 0 auto;
}
.wm-main-header .wm-logo {
display:inline-flex!important;
align-items:center;
max-width:calc(100vw - 95px);
margin:18px 0 14px 0!important;
float:none!important;
}
.wm-main-header .wm-logo img {
width:220px!important;
max-width:100%;
height:auto;
}
.wm-main-header .navbar {
float:none;
min-height:0;
margin:0;
}
.wm-main-header .navbar-header {
float:none;
}
.desktop-navigation {
display:none!important;
}
.mobile-menu-toggle {
display:block;
}
}
@media(max-width:480px){
.mobile-sidebar {
width:100%;
max-width:70%;
right:-70%;
}
}
/* =========== MOBILE MENU NAVIGATION ARROWS =============== */
.arrow i {
transition: transform .3s ease;
}
.has-submenu.active > a .arrow i {
transform: rotate(180deg);
}
/* ============== HIDE ENTIRE TOP HEADER =============== */
/* Hide top strip on tablets and mobile */
@media (max-width: 991px) {
.wm-topstrip {
display: none;
}
}
/* ==========================================
DWU MOBILE MEGA MENU (MEANMENU) CSS ENDS HERE
========================================== */
/*=====================================
WORK EXPERIENCE WITH TABLE
======================================*/
.work-experience-section {
width:100%;
}
.wm-work-table-wrapper {
width:100%;
overflow-x:auto;
}
.work-experience-table {
width:100%;
border-collapse:collapse;
margin-top:20px;
}
.work-experience-table th {
background:#f5f5f5;
padding:12px;
text-align:left;
font-weight:600;
border:1px solid #ddd;
}
.work-experience-table td {
padding:10px;
border:1px solid #ddd;
}
.work-experience-table input {
width:100%;
height:40px;
border:1px solid #ddd;
padding:8px 12px;
}
.work-action {
white-space:nowrap;
}
.work-action a {
display:inline-block;
margin-right:15px;
color:#076415;
font-size:14px;
font-weight:600;
}
.work-action a:hover {
color:#ea9c0b;
}
/*===================================
WORK EXPERIENCE WITHOUT SECTION
===================================*/
.work-experience-item {
margin-bottom:30px;
padding-bottom:20px;
border-bottom:1px solid #eeeeee;
}
.form-action-buttons {
margin-top:15px;
}
.form-action-buttons a {
display:inline-block;
margin-right:20px;
color:#076415;
font-size:14px;
font-weight:400;
text-decoration:none;
}
.form-action-buttons a:hover {
color:#ea9c0b;
}
.form-action-buttons i {
margin-right:6px;
}
/* Work Experience Date Fields */
.work-date-field {
width:100%;
height:45px;
padding:0 15px;
border:1px solid #e5e5e5;
font-size:14px;
color:#555;
background:#fff;
}
.work-date-field:focus {
border-color:#076415;
outline:none;
}
/* Calendar icon spacing */
.work-date-field::-webkit-calendar-picker-indicator {
cursor:pointer;
}
/* Remove extra divider only */
.work-experience-section {
border-bottom: none !important;
}
.work-experience-section .wm-student-dashboard-settings {
border-bottom: none !important;
}
.work-experience-section .work-experience-item {
border-bottom: none !important;
}
/* =====================================
FORM NAVIGATION BUTTONS
===================================== */
.form-navigation form ul {
display: flex !important;
justify-content: flex-end !important;
align-items: center;
gap: 20px;
width: 100%;
padding: 0;
margin: 0;
}
.form-navigation form ul li {
float: none !important;
display: inline-block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Optional: Add spacing between buttons */
.form-navigation ul li + li {
margin-left: 20px;
}
.wm-upload-field {
margin-bottom: 20px;
}
/* Match DWU template label style */
.wm-select-two label,
.wm-upload-field label {
display: block;
margin-bottom: 8px;
}
/* Match field heights */
.wm-upload-field input[type="file"] {
width: 100%;
height: 45px;
padding: 10px;
border: 1px solid #e5e5e5;
background: #fff;
font-size: 14px;
}
.wm-upload-field small {
display: block;
margin-top: 6px;
color: #777;
font-size: 12px;
}
/* Declaration Checkbox Override */
.declaration-checkbox label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
color: #333;
}
.declaration-checkbox input[type="checkbox"] {
appearance: checkbox !important;
-webkit-appearance: checkbox !important;
width: 16px !important;
height: 16px !important;
margin-right: 10px !important;
padding: 0 !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Date Field */
input[type="date"] {
width: 100%;
height: 45px;
padding: 0 15px;
border: 1px solid #e5e5e5;
font-size: 14px;
color: #555;
background: #fff;
}
/* =====================================
EDUCATION SECTION BORDER BOX
===================================== */
#education-row1-container .education-row1,
#education-row2-container .education-row2 {
border: none;
border-radius: 0;
padding: 0;
margin-bottom: 15px;
background: transparent;
width: 100%;
float: none;
display: flow-root;
box-sizing: border-box;
}
/* Clear template floating issues */
#education-row1-container .education-row1::after,
#education-row2-container .education-row2::after {
content: "";
display: table;
clear: both;
}
/* Remove default HR divider if not needed */
.education-row1 hr,
.education-row2 hr {
display: none;
}
/* Action buttons spacing */
.form-action-buttons {
margin-top: 15px;
display: flex;
gap: 20px;
}
/* Add/remove link styling */
.form-action-buttons a {
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.education-row1 .wm-student-dashboard-settings,
.education-row2 .wm-student-dashboard-settings {
overflow: hidden;
}
/* =====================================
EDUCATION SECTION BORDER
===================================== */
.education-section-border {
border: 1px solid #ddd;
border-radius: none;
padding: 20px;
margin-bottom: 25px;
background: #fff;
box-sizing: border-box;
display: flow-root;
}
/* Individual added rows */
.education-row1,
.education-row2 {
border: none;
padding: 0;
margin-bottom: 15px;
}
/* Keep floated fields contained */
.education-row1,
.education-row2 {
display: flow-root;
}
/* Action buttons */
.form-action-buttons {
clear: both;
margin-top: 10px;
}
/* Separator between added rows */
.education-row1:not(:last-child),
.education-row2:not(:last-child) {
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
/* ==============================
FIVE CHECKBOXES CSS
=============================== */
.checkbox-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 15px;
cursor: pointer;
white-space: nowrap;
}
.checkbox-item input[type="checkbox"] {
width: 16px;
height: 16px;
}
/* ==============================
TEXT AREA CSS
=============================== */
.wm-form-group {
width: 100%;
}
.wm-form-group textarea {
width: 100%;
min-height: 320px;
padding: 15px;
border: 1px solid #d9d9d9;
border-radius: 6px;
box-sizing: border-box;
resize: vertical;
font-family: inherit;
font-size: 15px;
}
/* ===========================
HOME PAGE STUDY OPTIONS CARD H6
============================= */
/* Course title */
.wm-popular-courses-text h6 a {
display: block;
text-align: left !important;
text-decoration: none;
}
/* Course title */
.campus-course-nowrap h6 a {
display: block;
text-align: left !important;
text-decoration: none;
}
/* =========================================================
HOME PAGE STUDY OPTIONS CARDS - UNIFORM LAYOUT
===========================================================
The base theme lays these cards out with floats, so images keep
their native aspect ratio and cards take the height of their own
text (which varies with how many lines the title wraps to). We
override with flexbox so every card in a row is the same height,
every image is the same height, and the meta info aligns to the
bottom of every card. Scoped to .wm-courses-popular only, excluding
.wm-courses-mediumsec (the all-programs list layout keeps the theme's
original side-by-side float layout). */
/* Make the row a flex container so cards stretch to equal height. */
.wm-courses-popular:not(.wm-courses-mediumsec) > ul.row {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: stretch;
align-items: stretch;
}
/* Each column becomes a flex item; drop the base float. */
.wm-courses-popular:not(.wm-courses-mediumsec) > ul.row > li {
display: -webkit-flex;
display: flex;
float: none;
margin-bottom: 30px;
}
/* Card fills its column and stacks its contents in a column so the
text area can grow to absorb any extra height. */
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-courses-popular-wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
float: none;
width: 100%;
height: 100%;
}
/* Image block: fixed height + object-fit: cover so every image
fills the same area edge-to-edge without distortion. */
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-courses-popular-wrap > figure {
float: none;
width: 100%;
}
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-courses-popular-wrap > figure > a,
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-courses-popular-wrap > figure > a img {
float: none;
display: block;
width: 100%;
}
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-courses-popular-wrap > figure > a img {
height: 200px;
object-fit: cover;
-o-object-fit: cover;
object-position: center;
}
/* Text area grows to fill the remaining card height. Consistent
padding is inherited from the base .wm-popular-courses-text rule. */
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-popular-courses-text {
float: none;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
/* Push the duration/level meta list (the card's bottom row) to the
bottom so it aligns across every card regardless of title length. */
.wm-courses-popular:not(.wm-courses-mediumsec) .wm-popular-courses-text > ul {
float: none;
width: 100%;
margin-top: auto;
overflow: hidden;
}
/* ===========================================================
INTERACTIVE MEGA MENUS - CAMPUSES + LEARNING AND TEACHING
=============================================================
Each left-column link (.wm-campus-link / .wm-lt-link) is paired by its
data attribute with a detail panel (.wm-campus-detail / .wm-lt-detail)
and an image (.wm-campus-image / .wm-lt-image). Hovering/focusing a link
toggles the matching .is-active panel and image via custom.js. Scoped to
the desktop mega menus only, so the mobile menu and other menus are
unaffected. */
/* Experience details: only the active item's details are shown. */
.wm-campus-experience .wm-campus-detail,
.wm-lt-experience .wm-lt-detail {
display: none;
}
.wm-campus-experience .wm-campus-detail.is-active,
.wm-lt-experience .wm-lt-detail.is-active {
display: block;
}
/* Experience image: only the active item's image is shown. Stacking all
images in the same box with a fixed height (object-fit: cover keeps the
aspect ratio, no distortion) prevents the mega menu from changing size
when moving between items. */
.wm-campus-media,
.wm-lt-media {
position: relative;
width: 100%;
}
.wm-campus-media .wm-campus-image,
.wm-lt-media .wm-lt-image {
display: none;
margin-bottom: 0;
}
.wm-campus-media .wm-campus-image.is-active,
.wm-lt-media .wm-lt-image.is-active {
display: block;
}
.wm-campus-media .wm-campus-image img,
.wm-lt-media .wm-lt-image img {
width: 100%;
height: 230px;
object-fit: cover;
display: block;
}
/* Highlight the active link (matches the theme hover accent and its
underline animation) so users can see the current item. */
.wm-header-one .wm-campuses-megamenu .wm-campus-link.is-active,
.wm-header-one .wm-lt-megamenu .wm-lt-link.is-active {
color: #ea9c0b !important;
}
.wm-header-one .wm-campuses-megamenu .wm-campus-link.is-active:after,
.wm-header-one .wm-lt-megamenu .wm-lt-link.is-active:after {
visibility: visible;
transform: scaleX(1);
}
/* Keyboard accessibility: reveal the mega menu while focus is within its
top-level item, so keyboard users can tab through the links and trigger
the content/image updates. Scoped to these two menus only. */
@media (min-width: 992px) {
.wm-megamenu-li:focus-within .wm-campuses-megamenu,
.wm-megamenu-li:focus-within .wm-lt-megamenu {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* Campus of Application (how-to-apply page): a single reusable preview
card (.wm-campus-card) and an instructional placeholder
(.wm-campus-card-placeholder) share the same slot - only whichever one
has .is-active is shown, so selecting a campus never stacks up extra
cards. Reuses .wm-courses-medium's figure/text layout and typography. */
.wm-apply-campus-preview .wm-campus-card,
.wm-apply-campus-preview .wm-campus-card-placeholder {
display: none;
}
.wm-apply-campus-preview .wm-campus-card.is-active,
.wm-apply-campus-preview .wm-campus-card-placeholder.is-active {
display: block;
}
.wm-apply-campus-preview .wm-campus-card-placeholder p {
background-color: #f6f6f6;
padding: 30px;
color: #6c6c6c;
margin: 0;
}
/* =============================================================
ALL-EVENTS PAGE — EVENT CARDS
Scoped strictly to .wm-latestevents-full so the .wm-event /
.wm-latest-event / .wm-latest-event-text design used elsewhere
is untouched. Gives every event card the same height with
consistently aligned image, title, date, paragraph and button,
while preserving the existing card look and carousel behaviour.
============================================================= */
/* Text block is a flex column on every card so the date/paragraph
keep a fixed position and the button can be pinned to the bottom. */
.wm-latestevents-full .wm-latest-event .wm-latest-event-text {
float: none;
width: 100%;
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 17px 0 0 0; /* keep the theme's existing padding */
}
/* Image: identical dimensions on every card, cropped without distortion. */
.wm-latestevents-full .wm-latest-event figure,
.wm-latestevents-full .wm-latest-event figure a {
float: none;
width: 100%;
display: block;
margin-bottom: 0;
}
.wm-latestevents-full .wm-latest-event figure img {
float: none;
width: 100%;
height: 210px;
display: block;
}
/* card_thumbnail is an editor-cropped 16:9 image, safe to cover-fit. */
.wm-latestevents-full .wm-latest-event figure img.wm-event-card-thumb--cover {
object-fit: cover;
object-position: center top;
}
/* No thumbnail: this is the raw event poster, which may carry dates, QR
codes or sponsor logos anywhere in the frame, so it is shown in full
(letterboxed) rather than cropped. */
.wm-latestevents-full .wm-latest-event figure img.wm-event-card-thumb--contain {
object-fit: contain;
background-color: #f6f6f6;
}
/* Fallback placeholder (no event image): match the image's footprint
so the rest of the card stays aligned with cards that do have one. */
.wm-latestevents-full .wm-latest-event figure .alert {
width: 100%;
height: 210px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Title: reserve a fixed 2-line area and clamp overflow, so longer
titles never push the date/paragraph/button downward. */
.wm-latestevents-full .wm-latest-event .wm-latest-event-text h6 {
margin: 0 0 17px 0;
min-height: 48px; /* ~2 lines at 24px line-height */
line-height: 24px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Date/time: consistent spacing across all cards. */
.wm-latestevents-full .wm-latest-event .wm-latest-event-text time {
float: none;
width: 100%;
margin-bottom: 8px;
padding-bottom: 12px;
}
/* Paragraph: reserve a fixed 3-line area and clamp overflow, so
differing description lengths don't affect card alignment. */
.wm-latestevents-full .wm-latest-event .wm-latest-event-text p {
margin: 0 0 6px 0;
line-height: 24px;
min-height: 72px; /* ~3 lines at 24px line-height */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* "Check event" button pinned to the bottom of every card, with
identical alignment regardless of title/paragraph length. */
.wm-latestevents-full .wm-latest-event .wm-latest-event-text .wm-banner-btn {
margin-top: auto;
align-self: flex-start;
}
.wm-latestevents-full .wm-latest-event .wm-latest-event-text .wm-banner-btn:focus,
.wm-latestevents-full .wm-latest-event .wm-latest-event-text .wm-banner-btn:focus-visible {
outline: 2px solid #ea9c0b;
outline-offset: 2px;
color: #ffffff;
background-color: #ea9c0b;
}
/* From the sm breakpoint up (where the cards start sitting side-by-side —
2-up at sm, 3-up at md+ via col-sm-6 col-md-4), lay the row out with
flexbox so every card in a row shares the tallest height and its
button aligns along a common bottom edge. Matches Bootstrap's own
576px grid breakpoint so the equal-height fix and the column count
change together instead of leaving a tablet-width gap. */
@media (min-width: 576px) {
.wm-latestevents-full .wm-latest-event > ul.row {
display: flex;
flex-wrap: wrap;
}
/* Neutralise the theme's clearfix pseudo-elements which would
otherwise become stray flex items. */
.wm-latestevents-full .wm-latest-event > ul.row:before,
.wm-latestevents-full .wm-latest-event > ul.row:after {
display: none;
}
.wm-latestevents-full .wm-latest-event > ul.row > li {
float: none;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
}
/* ==================================================
GRADUATE HOME PAGE VIDEO TESTIMONIAL SLIDER
=================================================== */
.graduate-stories {
--testimonial-green: #076415;
--testimonial-green-overlay: rgba(7, 100, 21, 0.7);
--testimonial-orange: #e79800;
--testimonial-ink: #24162f;
--testimonial-muted: #655d69;
--testimonial-panel: #f5f5f5;
--testimonial-white: #ffffff;
padding: 24px 0 56px;
color: var(--testimonial-ink);
}
/*
* Keep box-sizing changes inside this section.
*/
.graduate-stories,
.graduate-stories *,
.graduate-stories *::before,
.graduate-stories *::after {
box-sizing: border-box;
}
.stories-shell {
width: min(1140px, calc(100% - 40px));
margin: 0 auto;
}
/* Title styled to match .wm-fancy-title-three (see style.css / color-three.css) without
reusing its float:left layout, which broke the shell's block flow. */
.stories-shell > h2 {
display: inline-block;
position: relative;
margin: 0 0 33px;
padding-bottom: 33px;
color: var(--testimonial-green);
font-size: clamp(1.75rem, 3vw, 35px);
font-weight: 500;
line-height: 1.2;
}
.stories-shell > h2::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 49px;
height: 2px;
background-color: var(--testimonial-orange);
}
/* ==================================================
MAIN IMAGE AND VIDEO AREA
=================================================== */
.story-stage {
position: relative;
z-index: 2;
min-height: 480px;
overflow: hidden;
background: #ded9e3;
}
.story-image {
display: block;
width: 100%;
height: 480px;
object-fit: cover;
object-position: center top;
transition:
opacity 220ms ease,
transform 550ms ease;
}
.story-stage:hover .story-image {
transform: scale(1.015);
}
.story-image.is-changing {
opacity: 0.2;
}
/* Left-side image overlay */
.story-overlay {
position: absolute;
inset: 0 50% 0 0;
z-index: 2;
background-color: var(--testimonial-green-overlay);
}
/* Large name displayed over the image */
.story-name {
position: absolute;
top: 50%;
left: 8%;
z-index: 3;
width: 34%;
color: var(--testimonial-white);
font-size: clamp(2.6rem, 5vw, 4.8rem);
font-weight: 700;
line-height: 0.94;
letter-spacing: -0.05em;
overflow-wrap: anywhere;
transform: translateY(-50%);
}
/* Play button */
.play-button {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 78px;
height: 78px;
padding: 0;
color: var(--testimonial-white);
border: 3px solid var(--testimonial-white);
border-radius: 50%;
background: rgba(25, 8, 37, 0.2);
cursor: pointer;
transform: translate(-50%, -50%);
transition:
background-color 180ms ease,
transform 180ms ease;
}
.play-button:hover,
.play-button:focus-visible {
background: var(--testimonial-orange);
outline: none;
transform: translate(-50%, -50%) scale(1.07);
}
.play-button svg {
width: 38px;
fill: currentColor;
transform: translateX(3px);
}
.play-button[hidden] {
display: none;
}
/* ==================================================
INLINE VIDEO
=================================================== */
.story-inline-video[hidden] {
display: none;
}
.story-inline-video {
position: absolute;
inset: 0;
z-index: 10;
width: 100%;
height: 100%;
background: #000;
}
.story-inline-video iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.close-inline-video {
position: absolute;
top: 16px;
right: 16px;
z-index: 12;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--testimonial-white);
border: 2px solid var(--testimonial-white);
border-radius: 50%;
background: rgba(0, 0, 0, 0.68);
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
transition:
background-color 180ms ease,
transform 180ms ease;
}
.close-inline-video:hover,
.close-inline-video:focus-visible {
background: var(--testimonial-orange);
outline: none;
transform: scale(1.06);
}
/* ==================================================
INFORMATION PANEL
=================================================== */
.story-panel {
position: relative;
min-height: 380px;
margin: -145px -7vw 0;
padding: 200px max(7vw, 28px) 42px;
background: var(--testimonial-panel);
}
/* Counter and progress bar */
.story-progress-wrap {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 32px;
padding-top: 12px;
}
.story-count {
flex: 0 0 auto;
color: var(--testimonial-ink);
}
.story-progress {
width: 100%;
height: 3px;
margin-top: 9px;
overflow: hidden;
background: #cccccc;
}
.story-progress span {
display: block;
width: 0;
height: 100%;
background: var(--testimonial-orange);
transition: width 350ms ease;
}
/* Graduate information */
.graduate-information {
width: 100%;
}
.graduate-slide[hidden] {
display: none;
}
.story-copy {
min-height: 150px;
}
.story-heading-row {
display: flex;
align-items: center;
gap: 18px;
}
.story-student-name {
margin: 0;
color: var(--testimonial-ink);
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
line-height: 1.25;
}
/* Slider navigation */
.story-navigation {
display: flex;
flex: 0 0 auto;
gap: 8px;
}
.story-navigation button {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
color: var(--testimonial-green);
border: 0;
background: transparent;
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
transition:
color 160ms ease,
transform 160ms ease;
}
.story-navigation button:hover,
.story-navigation button:focus-visible {
color: var(--testimonial-orange);
outline: none;
transform: scale(1.14);
}
.story-department {
margin: 14px 0 12px;
color: #6f626c;
font-weight: 500;
}
.story-testimony {
max-width: 700px;
margin: 0;
color: var(--testimonial-muted);
line-height: 1.65;
}
/* No-testimonial message */
.graduate-stories-empty {
padding: 24px;
color: #664d03;
border: 1px solid #ffecb5;
background: #fff3cd;
}
/* ==================================================
TABLET AND MOBILE
=================================================== */
@media (max-width: 760px) {
.stories-shell {
width: min(100% - 28px, 620px);
}
.story-stage {
min-height: 520px;
}
.story-image {
height: 520px;
}
.story-overlay {
inset: 55% 0 0;
background: linear-gradient(
0deg,
rgba(7, 100, 21, 0.98),
rgba(7, 100, 21, 0.78),
transparent
);
}
.story-name {
top: auto;
bottom: 26px;
left: 24px;
width: calc(100% - 48px);
font-size: clamp(2.4rem, 12vw, 4rem);
transform: none;
}
.play-button {
top: 43%;
left: 50%;
width: 68px;
height: 68px;
}
.story-panel {
min-height: 0;
margin: 0 -14px;
padding: 30px 24px 36px;
}
.story-heading-row {
align-items: flex-start;
}
.story-testimony {
max-width: 100%;
}
}
@media (max-width: 480px) {
.graduate-stories {
padding-top: 18px;
}
.stories-shell {
width: calc(100% - 20px);
}
.story-stage {
min-height: 440px;
}
.story-image {
height: 440px;
}
.story-name {
right: 20px;
bottom: 22px;
left: 20px;
width: auto;
}
.story-panel {
margin: 0 -10px;
padding: 28px 20px 32px;
}
.story-progress-wrap {
gap: 14px;
}
.story-heading-row {
flex-direction: column;
gap: 12px;
}
.story-navigation {
order: 2;
}
.story-student-name {
order: 1;
}
.close-inline-video {
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}
}
/* ==================================================
REDUCED MOTION
=================================================== */
@media (prefers-reduced-motion: reduce) {
.graduate-stories *,
.graduate-stories *::before,
.graduate-stories *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================
EVENT DETAILS IMAGE CSS
========================== */
.wm-event-countdown img {
display: block;
width: 100%;
height: auto;
}
/* ====================
NEWS DETAILS CAPTION TEXT
====================== */
.wm-authorpost {
display: inline-block;
margin-left: 20px;
}
.wm-blog-single {
width: 100%;
}
.wm-detail-thumb,
.wm-blog-author {
width: 100%;
box-sizing: border-box;
}
.wm-detail-thumb {
margin: 0;
}
.wm-detail-thumb img {
display: block;
width: 100%;
height: auto;
}
/* ==================================================
Rich-text article body images (news-details, event-details)
Default TinyMCE inserts stamp the image's native pixel
width/height (often ~300-500px from pasted Word/screenshot
content) as HTML attributes. width:100% here scales those
up to fill the content column while height:auto preserves
the saved aspect ratio; the alignment classes below map to
TINYMCE_DEFAULT_CONFIG's image_class_list.
================================================== */
.wm-detail-editore img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
margin: 1.5rem 0;
}
.wm-detail-editore img.wm-img-align-left {
display: inline;
float: left;
width: auto;
max-width: 100%;
margin: 0.5rem 1.5rem 1rem 0;
}
.wm-detail-editore img.wm-img-align-right {
display: inline;
float: right;
width: auto;
max-width: 100%;
margin: 0.5rem 0 1rem 1.5rem;
}
.wm-detail-editore img.wm-img-align-center {
width: auto;
max-width: 100%;
margin: 1.5rem auto;
}
.wm-detail-editore::after {
content: "";
display: table;
clear: both;
}
/* ====== READ MORE BUTTON ALIGNMENT ==== */
.faculty-row {
display: flex;
flex-wrap: wrap;
}
.faculty-card {
display: flex;
margin-bottom: 30px;
}
.faculty-card .wm-latest-event {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.faculty-card .wm-latest-event-text {
display: flex;
flex-direction: column;
flex: 1;
}
.faculty-card .wm-banner-btn {
align-self: flex-start;
margin-top: auto;
}
/* ==========================
CAMPUS DETAILED PAGE
=========================== */
/* ── Slider Item ── */
.slider-item {
height: 650px;
overflow: hidden;
position: relative;
padding-top: 85px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.slider-item::before {
background: #07294d none repeat scroll 0 0;
content: "";
height: 100%;
opacity: 0;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
/* ── Slide Animation ── */
.swiper-slide-active .slider-item {
animation-name: slideInRight;
animation-duration: 1.7s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-fill-mode: both;
}
@keyframes fadeInUp {
from { transform: translate3d(0, 40px, 0); }
to { transform: none; }
}
/* ── Slider Arrows (nav buttons) ──
Positioned via Swiper's own top:50% + margin-top centering (set by the
swiper-bundle CSS); we only style size/appearance and the icon glyph.
Previously these used flaticon codepoints (\f16d/\f16e) that don't exist
in flaticon.css's glyph set, so no arrow rendered at all. */
.slider-active .slider-arrow {
width: 50px;
height: 50px;
line-height: 48px;
margin-top: -25px; /* re-center against our own 50px height (swiper's default assumes 44px) */
border-radius: 50%;
border: 1px solid #ffffff;
background: rgba(7, 41, 77, 0.35);
box-shadow: 0px 5px 57px 0px rgba(0, 0, 0, 0.15);
color: #ffffff;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.slider-active .slider-arrow::after {
font-family: "FontAwesome" !important;
font-size: 18px;
}
.slider-active .slider-arrow.swiper-button-prev {
left: 20px;
}
.slider-active .slider-arrow.swiper-button-prev::after {
content: "\f053";
}
.slider-active .slider-arrow.swiper-button-next {
right: 20px;
}
.slider-active .slider-arrow.swiper-button-next::after {
content: "\f054";
}
.slider-active .slider-arrow:hover {
color: #07294d;
background: #ea9c0b;
border-color: #ea9c0b;
}
/* ── Reveal arrows on hover ── */
.slider-active:hover .slider-arrow {
opacity: 1;
visibility: visible;
}
.slider-active:hover .slider-arrow.swiper-button-prev {
left: 30px;
}
.slider-active:hover .slider-arrow.swiper-button-next {
right: 30px;
}
@media only screen and (max-width: 449px) {
.slider-active:hover .slider-arrow.swiper-button-prev {
left: 15px;
}
.slider-active:hover .slider-arrow.swiper-button-next {
right: 15px;
}
}
/* ── Active slide content animations ── */
.slider-active .swiper-slide-active .slider-content p,
.slider-active .swiper-slide-active .slider-content .title,
.slider-active .swiper-slide-active .slider-content .hero-btn {
animation-fill-mode: both;
animation-name: fadeInUp;
}
.slider-active .swiper-slide-active .slider-content .title {
animation-delay: 0.6s;
animation-duration: 0.6s;
}
.slider-active .swiper-slide-active .slider-content p {
animation-delay: 0.8s;
animation-duration: 0.8s;
}
.slider-active .swiper-slide-active .slider-content .hero-btn {
animation-delay: 0.9s;
animation-duration: 0.9s;
}
/* ── Responsive: .slider-item ── */
@media only screen and (max-width: 991px) {
.slider-item { height: 450px; }
.slider-item .slider-content { padding-top: 80px; }
.slider-item .slider-content .title { font-size: 52px; }
}
@media only screen and (max-width: 767px) {
.slider-item {
height: 450px;
background-size: cover;
background-position: center;
width: 100%;
}
.slider-item .slider-content .title { font-size: 36px; }
.slider-item .slider-content p { padding-right: 0; }
}
@media only screen and (max-width: 449px) {
.slider-item .slider-content { padding-top: 50px; }
.slider-item .slider-content .title { font-size: 30px; }
}
/* ── Responsive: .edubin-slider-section ── */
@media only screen and (max-width: 767px) {
.edubin-slider-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
.edubin-slider-section .slider-active,
.edubin-slider-section .swiper-wrapper,
.edubin-slider-section .swiper-slide {
height: 450px;
margin-top: 0 !important;
padding-top: 0 !important;
}
.edubin-slider-section .slider-item {
height: 100%;
padding-top: 0 !important;
background-size: cover !important;
background-position: center center !important;
}
}
/* ── Campus detail leaflet map ── */
.dwu-campus-map {
height: 496px;
width: 100%;
border-radius: 8px;
}
/* ── Fix float clearing so consecutive partner/event cards don't overlap ── */
.wm-event-medium-wrap:after {
content: "";
display: table;
clear: both;
}
/* ── Uniform partner logo/image size on the Partners page ── */
.wm-blog-grid figure img {
height: 220px;
object-fit: cover;
object-position: center;
}
/* ── Equal-height partner cards, with the message clamped to the same
number of lines and the button aligned at the same spot on every card ── */
.wm-blog-grid ul.row {
display: flex;
flex-wrap: wrap;
}
.wm-blog-grid ul.row > li {
display: flex;
flex-direction: column;
float: none;
}
.wm-blog-grid ul.row > li figure {
flex: 0 0 auto;
}
.wm-blog-grid-text {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.wm-blog-grid-text p {
flex: 1 1 auto;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.wm-blog-grid-text .wm-readarticle-btn {
align-self: flex-start;
margin-top: auto;
}
/* ── Mini header banner (Admin Divisions, President's Page, Partners, and
all other inner-page breadcrumb banners sharing the .wm-mini-header class) ──
margin-bottom is the DEFAULT hero-to-content gap for pages where the hero
is the only spacer (e.g. chapliancy.html, all-news.html, whose content
wrapper has no top padding of its own). Kept within the 48-72px desktop /
32-48px mobile target range.
Overlay tokens: reuse the DWU brand green already established for
.auth-page's photo panel (--auth-panel-overlay-color: #0d6b21) and the
"Notices and Deadlines" banner's baked-in wash (notice-bg.jpeg), so
every photographic hero on the site reads as one consistent, subdued
treatment. Kept as custom properties — not folded into
.wm-blue-transparent's background-color directly, and deliberately not
baked into the JPEG the way notice-bg.jpeg is — so the color/opacity
stay separately tunable in one place. 0.85 is not an arbitrary "looks
subdued" number: solved so white text/links clear WCAG AA (4.5:1) even
composited over the brightest (sky) pixels of the source photo, not
just its average brightness — see .wm-blue-transparent below. */
.wm-pro-mini-header,
.wm-mini-header {
--mini-header-overlay-color: #0d6b21;
--mini-header-overlay-opacity: 0.65;
background: #bcdfe4 url("../extra-images/default_banner.jpeg") no-repeat center center;
padding-top: 150px;
min-height: 250px;
/* Wide, shallow ~5:1 banner. aspect-ratio only ever grows the box past
the min-height floor above (never shrinks it), so it takes over once
the viewport is wide enough (~1250px+) to actually land near 5:1;
narrower viewports keep today's min-height instead of being squeezed
shorter. No JS, no fixed desktop-only px height. */
aspect-ratio: 5 / 1;
display: flex;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
animation: banner-bg-move 10s ease-in-out infinite alternate;
position: relative;
overflow: hidden;
z-index: 1;
margin-bottom: 60px;
}
/* Overlay layer — the .wm-blue-transparent span already present in every
mini-header page, kept as its own absolutely-positioned element (not
merged into the background-image) so opacity/color stay centrally
controlled instead of baked per-photo. background-color + a separate
`opacity` (rather than one rgba() value) mirrors the .auth-page token
pair (--auth-panel-overlay-color / --auth-panel-overlay-opacity) so the
two treatments are trivially easy to keep in sync. */
.wm-pro-mini-header .wm-blue-transparent,
.wm-mini-header .wm-blue-transparent {
background-color: var(--mini-header-overlay-color);
opacity: var(--mini-header-overlay-opacity);
}
/* .wm-breadcrumb a's original color (#adb5db, a pale lavender-gray) was
tuned against the old near-invisible 5%-opacity overlay and fails AA
(~2.4:1) against the real green wash above. White matches the already
AA-safe h1/li color; the chevron separators and the plain (unlinked)
current-page
- still carry the visual hierarchy. */
.wm-pro-mini-header .wm-breadcrumb a,
.wm-mini-header .wm-breadcrumb a {
color: #ffffff;
}
.wm-pro-mini-header .wm-breadcrumb a:hover,
.wm-pro-mini-header .wm-breadcrumb a:focus,
.wm-mini-header .wm-breadcrumb a:hover,
.wm-mini-header .wm-breadcrumb a:focus {
text-decoration: underline;
}
.wm-pro-mini-header .wm-breadcrumb a:focus-visible,
.wm-mini-header .wm-breadcrumb a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
/* When .wm-main-content immediately follows the hero (the standard page
pattern), it already supplies the gap via its own padding-top, so the
hero's margin-bottom above would double it (120px+/80px+ total). Zeroing
.wm-main-content's padding-top here — rather than the hero's margin —
keeps the hero's margin-bottom usable as-is for pages that don't have a
.wm-main-content sibling, avoiding a page-specific override. Higher
specificity (2 classes) than the plain `.wm-main-content` rules below, so
this wins at every viewport width without needing to be repeated inside
the mobile media query. */
.wm-mini-header + .wm-main-content,
.wm-pro-mini-header + .wm-main-content {
padding-top: 0;
}
/* Homepage opt-out: its full-bleed slider hero (.wm-main-banner) was never
part of the excessive-gap bug (no margin-bottom stacking with the base
.wm-main-content rule), so restore the original padding-top values here
to keep the homepage pixel-identical while every inner page gets the
standardized 60px/40px gap above. See body_class block in index.html. */
.home-page .wm-main-content {
padding-top: 100px;
}
@media (max-width: 767px) {
body.dwu-homepage > .wm-main-wrapper {
padding-top: 116px;
}
.wm-pro-mini-header,
.wm-mini-header {
/* Below 767px the min-height floor always wins over the 5:1
aspect-ratio (e.g. 390px / 5 = 78px, far under 170px), which is
the point: keep the existing shallow-but-usable mobile height
(unchanged from before this change) rather than shrinking further
to chase the ratio and clipping the title/breadcrumb text. */
padding-top: 90px;
min-height: 170px;
margin-bottom: 40px;
}
.wm-main-content {
padding-top: 40px;
}
.home-page .wm-main-content {
padding-top: 50px;
}
}
@keyframes banner-bg-move {
0% {
background-position: center center;
}
50% {
background-position: center 60%;
}
100% {
background-position: center center;
}
}
/* ── Admission progress section (announcement bar + hero + tabbed panel) ── */
.admission-announce-bar {
clear: both;
background: #d5121c;
color: #ffffff;
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.admission-announce-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 15px;
}
.admission-announce-text {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.admission-announce-btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 20px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.admission-announce-btn:hover,
.admission-announce-btn:focus-visible {
background: #ffffff;
color: #d5121c;
text-decoration: none;
}
.admission-announce-btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
.admission-hero {
position: relative;
}
.admission-hero-media {
height: 390px;
overflow: hidden;
}
.admission-hero-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
.admission-overlap {
position: relative;
z-index: 2;
margin-top: -110px;
display: flex;
align-items: flex-start;
gap: 0;
}
.admission-intro-card {
flex: 0 0 300px;
max-width: 300px;
background: #f2f1ef;
padding: 34px 30px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.admission-intro-title {
color: #3a1152;
font-size: 24px;
font-weight: 800;
margin: 0 0 14px;
}
.admission-intro-text {
color: #4a4a4a;
font-size: 14px;
line-height: 1.7;
margin: 0;
}
.admission-panel {
flex: 1 1 auto;
background: #ffffff;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
margin-left: 24px;
}
.admission-tabs {
display: flex;
}
.admission-tab {
flex: 1;
min-height: 56px;
padding: 14px 20px;
background: #ffffff;
color: #2b1331;
border: 1px solid #e7e4e1;
border-bottom: none;
font-size: 15px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
position: relative;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.admission-tab.is-active {
background: #d5121c;
color: #ffffff;
border-color: #d5121c;
}
.admission-tab.is-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #d5121c;
}
.admission-tab:focus-visible {
outline: 3px solid #3a1152;
outline-offset: -3px;
z-index: 1;
}
.admission-tabpanel {
padding: 30px 34px 34px;
}
.admission-tabpanel:focus-visible {
outline: 3px solid #3a1152;
outline-offset: -3px;
}
.admission-item + .admission-item {
margin-top: 22px;
}
.admission-item h3 {
color: #3a1152;
font-size: 17px;
font-weight: 800;
margin: 0 0 6px;
}
.admission-item p {
color: #4a4a4a;
font-size: 14px;
line-height: 1.7;
margin: 0 0 8px;
}
.admission-learn-more {
display: inline-flex;
align-items: center;
gap: 6px;
color: #d5121c;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.admission-learn-more:hover,
.admission-learn-more:focus-visible {
color: #a30e16;
text-decoration: underline;
}
.admission-learn-more:focus-visible {
outline: 3px solid #3a1152;
outline-offset: 2px;
}
@media (max-width: 991px) {
.admission-hero-media {
height: 340px;
}
.admission-overlap {
margin-top: -70px;
flex-direction: column;
gap: 20px;
}
.admission-intro-card {
flex: none;
max-width: none;
width: 100%;
}
.admission-panel {
margin-left: 0;
}
}
@media (max-width: 767px) {
.admission-announce-inner {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 16px 15px;
}
.admission-announce-btn {
width: 100%;
justify-content: center;
}
.admission-hero-media {
height: 220px;
}
.admission-overlap {
margin-top: 0;
padding-left: 0;
padding-right: 0;
}
.admission-intro-card {
clip-path: none;
padding: 26px 20px;
}
.admission-panel {
box-shadow: none;
border-top: 1px solid #eee;
}
.admission-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admission-tab {
flex: 0 0 auto;
min-width: 160px;
}
.admission-tabpanel {
padding: 24px 20px 28px;
}
}
/* ==================================================
DWU Progress Component
All styles are restricted to this component.
================================================== */
.dwu-progress-component {
--dwu-red: #ed2618;
--dwu-red-dark: #d91f13;
--dwu-green: #076415;
--dwu-text: #4e4851;
--dwu-border: #e7e5e7;
--dwu-light-grey: #f4f3f3;
--dwu-white: #ffffff;
--dwu-focus: #2675dc;
--dwu-shadow: 0 4px 12px rgb(39 24 52 / 13%);
width: 100%;
min-width: 0;
color: var(--dwu-text);
background-color: var(--dwu-white);
font-family: "Open Sans", Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Restrict box sizing to this component. */
.dwu-progress-component,
.dwu-progress-component *,
.dwu-progress-component *::before,
.dwu-progress-component *::after {
box-sizing: border-box;
}
/* Prevent external theme styles from affecting component images. */
.dwu-progress-component img {
max-width: 100%;
}
/* ==================================================
Notice banner
================================================== */
.dwu-progress-component .notice {
min-height: 104px;
overflow: hidden;
color: var(--dwu-white);
background-color: var(--dwu-red);
clip-path: polygon(
0 0,
calc(100% - 16px) 0,
100% 19px,
100% 100%,
0 100%
);
}
.dwu-progress-component .notice__inner {
width: min(calc(100% - 32px), 1248px);
min-height: 104px;
margin-right: auto;
margin-left: auto;
padding-top: 26px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.dwu-progress-component .notice__inner p {
margin: 0;
color: var(--dwu-white);
font-family: "Montserrat", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
}
.dwu-progress-component .notice__button {
min-height: 23px;
padding: 5px 10px;
border: 1px solid var(--dwu-white);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--dwu-white);
background-color: transparent;
font-family: "Open Sans", Arial, sans-serif;
font-size: 8px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition:
color 160ms ease,
background-color 160ms ease;
}
.dwu-progress-component .notice__button:hover {
color: var(--dwu-red);
background-color: var(--dwu-white);
text-decoration: none;
}
/* ==================================================
Hero image
================================================== */
.dwu-progress-component .hero {
width: 100%;
height: 350px;
overflow: hidden;
background-color: #dedede;
}
.dwu-progress-component .hero img {
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: cover;
object-position: center 48%;
}
/* ==================================================
Overlapping content section
================================================== */
.dwu-progress-component .progress {
position: relative;
width: 100%;
}
.dwu-progress-component .progress__grid {
position: relative;
z-index: 2;
width: min(calc(100% - 40px), 568px);
margin: -111px auto 0;
display: grid;
grid-template-columns: 182px minmax(0, 1fr);
align-items: start;
}
/* ==================================================
Introduction card
================================================== */
.dwu-progress-component .intro-card {
min-height: 146px;
margin: 0;
padding: 31px 16px 15px;
color: var(--dwu-text);
background-color: var(--dwu-light-grey);
clip-path: polygon(
0 0,
calc(100% - 31px) 0,
100% 31px,
100% 100%,
0 100%
);
}
.dwu-progress-component .intro-card h2 {
margin: 0 0 6px;
padding: 0;
color: var(--dwu-green);
font-family: "Montserrat", Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 0.92;
letter-spacing: -0.5px;
text-transform: none;
}
.dwu-progress-component .intro-card p {
margin: 0;
padding: 0;
color: #66616b;
font-family: "Open Sans", Arial, sans-serif;
font-size: 7.5px;
font-weight: 400;
line-height: 1.42;
}
/* ==================================================
Main content card
================================================== */
.dwu-progress-component .content-card {
min-width: 0;
min-height: 504px;
padding: 23px 24px 30px;
color: var(--dwu-text);
background-color: var(--dwu-white);
}
/* ==================================================
Tabs
================================================== */
.dwu-progress-component .tabs {
width: 100%;
height: 31px;
margin: 0 0 52px;
padding: 0;
display: grid;
grid-template-columns: 91px 72px minmax(0, 1fr);
box-shadow: var(--dwu-shadow);
}
.dwu-progress-component .tab {
position: relative;
min-width: 0;
height: 31px;
margin: 0;
padding: 4px 7px;
border: 1px solid var(--dwu-border);
border-left: 0;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
color: #181219;
background: var(--dwu-white);
box-shadow: none;
cursor: pointer;
appearance: none;
font-family: "Open Sans", Arial, sans-serif;
font-size: 7px;
font-weight: 600;
line-height: 1.15;
text-align: center;
text-transform: none;
white-space: normal;
}
.dwu-progress-component .tab:first-child {
border-left: 1px solid var(--dwu-border);
}
.dwu-progress-component .tab:hover:not(.is-active) {
color: var(--dwu-green);
background-color: #fafafa;
}
.dwu-progress-component .tab.is-active {
z-index: 1;
border-color: var(--dwu-red);
color: var(--dwu-white);
background-color: var(--dwu-red);
font-weight: 700;
}
.dwu-progress-component .tab.is-active::after {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: var(--dwu-red);
border-bottom: 0;
transform: translateX(-50%);
}
/* ==================================================
Tab panels
================================================== */
.dwu-progress-component .tab-panel {
margin: 0;
padding: 0;
}
.dwu-progress-component .tab-panel[hidden] {
display: none;
}
/* ==================================================
Information items
================================================== */
.dwu-progress-component .info-item {
margin: 0 0 27px;
padding: 0;
}
.dwu-progress-component .info-item:last-child {
margin-bottom: 0;
}
.dwu-progress-component .info-item h3 {
margin: 0 0 7px;
padding: 0;
color: var(--dwu-green);
font-family: "Montserrat", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.2px;
text-transform: none;
}
.dwu-progress-component .info-item p {
max-width: 334px;
margin: 0 0 12px;
padding: 0;
color: var(--dwu-text);
font-family: "Open Sans", Arial, sans-serif;
font-size: 7px;
font-weight: 400;
line-height: 1.45;
}
.dwu-progress-component .info-item a {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--dwu-red-dark);
font-family: "Open Sans", Arial, sans-serif;
font-size: 7px;
font-weight: 400;
line-height: 1.4;
text-decoration: none;
}
.dwu-progress-component .info-item a:hover {
color: var(--dwu-red-dark);
text-decoration: underline;
}
/* ==================================================
Keyboard focus
================================================== */
.dwu-progress-component .tab:focus-visible,
.dwu-progress-component .notice__button:focus-visible,
.dwu-progress-component .info-item a:focus-visible {
outline: 3px solid var(--dwu-focus);
outline-offset: 3px;
}
/* ==================================================
Tablet layout
================================================== */
@media (max-width: 720px) {
.dwu-progress-component .notice,
.dwu-progress-component .notice__inner {
min-height: 88px;
}
.dwu-progress-component .notice__inner {
padding-top: 0;
align-items: center;
}
.dwu-progress-component .hero {
height: 330px;
}
.dwu-progress-component .hero img {
object-position: center;
}
.dwu-progress-component .progress__grid {
width: min(calc(100% - 32px), 580px);
margin-top: -54px;
grid-template-columns: minmax(0, 1fr);
}
.dwu-progress-component .intro-card {
width: min(88%, 360px);
min-height: 0;
padding: 26px 24px 24px;
}
.dwu-progress-component .intro-card h2 {
font-size: 25px;
line-height: 0.95;
}
.dwu-progress-component .intro-card p {
max-width: 290px;
font-size: 12px;
line-height: 1.5;
}
.dwu-progress-component .content-card {
min-height: 0;
padding: 28px 24px 40px;
}
.dwu-progress-component .tabs {
height: auto;
margin-bottom: 44px;
grid-template-columns: 1fr 1fr 1.5fr;
}
.dwu-progress-component .tab {
min-height: 44px;
height: auto;
padding: 8px;
font-size: 10px;
}
.dwu-progress-component .info-item {
margin-bottom: 32px;
}
.dwu-progress-component .info-item h3 {
font-size: 17px;
line-height: 1.25;
}
.dwu-progress-component .info-item p {
max-width: 100%;
font-size: 12px;
line-height: 1.55;
}
.dwu-progress-component .info-item a {
min-height: 32px;
font-size: 12px;
}
}
/* ==================================================
Mobile layout
================================================== */
@media (max-width: 480px) {
.dwu-progress-component .notice {
clip-path: polygon(
0 0,
calc(100% - 12px) 0,
100% 14px,
100% 100%,
0 100%
);
}
.dwu-progress-component .notice__inner {
width: calc(100% - 30px);
min-height: 110px;
padding: 18px 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 12px;
}
.dwu-progress-component .notice__inner p {
font-size: 11px;
}
.dwu-progress-component .notice__button {
min-height: 36px;
padding: 8px 12px;
font-size: 10px;
}
.dwu-progress-component .hero {
height: 270px;
}
.dwu-progress-component .hero img {
object-position: 51% center;
}
.dwu-progress-component .progress__grid {
width: calc(100% - 32px);
margin-top: -34px;
}
.dwu-progress-component .intro-card {
width: 94%;
}
.dwu-progress-component .content-card {
padding: 24px 16px 34px;
}
.dwu-progress-component .tabs {
grid-template-columns: minmax(0, 1fr);
margin-bottom: 35px;
box-shadow: none;
}
.dwu-progress-component .tab {
width: 100%;
min-height: 44px;
border-top: 0;
border-left: 1px solid var(--dwu-border);
font-size: 11px;
}
.dwu-progress-component .tab:first-child {
border-top: 1px solid var(--dwu-border);
}
.dwu-progress-component .tab.is-active {
border-color: var(--dwu-red);
}
.dwu-progress-component .tab.is-active::after {
display: none;
}
.dwu-progress-component .info-item {
margin-bottom: 30px;
}
}
/* ==================================================
Reduced-motion preference
================================================== */
@media (prefers-reduced-motion: reduce) {
.dwu-progress-component *,
.dwu-progress-component *::before,
.dwu-progress-component *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.wm-weather-marquee-track {
animation: none !important;
white-space: normal !important;
}
}
/* ==================================================
Campus weather marquee (footer)
================================================== */
.wm-weather-marquee {
overflow: hidden;
white-space: nowrap;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wm-weather-marquee-track {
display: inline-block;
white-space: nowrap;
animation: wm-weather-marquee-scroll 35s linear infinite;
}
.wm-weather-marquee:hover .wm-weather-marquee-track {
animation-play-state: paused;
}
.wm-weather-marquee-track span {
display: inline-block;
padding-right: 50px;
}
@keyframes wm-weather-marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ==================================================
Faculty page department-head thumbnail
Theme's .wm-reviews-thums only floats the wrapper and
never caps the
![]()
itself, so admin-uploaded photos
of any resolution render at native size.
================================================== */
.wm-reviews-thums img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 100%;
}
/* ==================================================
BACK TO TOP BUTTON
Fixed circular button, hidden until the page is
scrolled down; fills with the brand accent color
while the page is being scrolled.
================================================== */
.wm-back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 999;
width: 46px;
height: 46px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: #ea9c0b;
background-color: #ffffff;
border: 2px solid #ea9c0b;
border-radius: 50%;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s,
background-color 0.25s ease, color 0.25s ease;
}
.wm-back-to-top i {
font-size: 18px;
line-height: 1;
}
.wm-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wm-back-to-top:hover {
color: #ffffff;
background-color: #ea9c0b;
}
/* Filled state while the page is actively being scrolled */
.wm-back-to-top.is-scrolling {
color: #ffffff;
background-color: #ea9c0b;
}
@media (max-width: 767px) {
.wm-back-to-top {
right: 18px;
bottom: 18px;
width: 40px;
height: 40px;
}
.wm-back-to-top i {
font-size: 16px;
}
}
/* ===== EXPLORE OUR CAMPUSES CARD — WHOLE-CARD LINK ===== */
/* Card is now a single (or a plain when a campus has no valid
detail page) instead of three separate anchors, so it needs its own
reset plus a visible keyboard-focus state. The "Read More" figcaption
badge and the title are now
s inside that single link; extend the
original anchor-only selectors from style.css so they keep their look. */
a.wm-ourprofessors-slider-layer {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.wm-ourprofessors-slider-layer figure figcaption span.wm-color-four {
position: absolute;
left: 50%;
top: 0%;
padding: 17px 32px 17px 27px;
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
background: url(../images/see-bg.png);
background-repeat: no-repeat;
background-position: right 0px;
line-height: 1;
margin: -22px 0px 0px -66px;
}
.wm-ourprofessors-slider-layer:hover figure figcaption span.wm-color-four {
top: 50%;
}
a.wm-ourprofessors-slider-layer:focus-visible {
outline: 3px solid #ea9c0b;
outline-offset: 3px;
}
a.wm-ourprofessors-slider-layer:focus:not(:focus-visible) {
outline: none;
}
/* =============================================================
EduChamp login page — single-file stylesheet (scoped)
-------------------------------------------------------------
EVERY rule in this file is scoped to .auth-page, so nothing
leaks into the rest of your site and nothing here can be
clobbered by a global .btn / .row / body rule elsewhere.
USAGE: ...login markup...
The class must sit on (or on a full-height wrapper) —
the layout uses 100vh for the left panel.
Tokens live on .auth-page, not :root, so they cannot collide
with a :root block in your custom.css. They are also prefixed
--auth-* as belt and braces.
RECOLOR THE WHOLE PAGE BY EDITING THE TOKEN BLOCK BELOW.
============================================================= */
.auth-page {
/* Brand */
--auth-primary: #009959; /* buttons, links, focused label, checkbox, underline */
--auth-primary-hover: #007a47; /* button :hover / :focus / :active */
--auth-accent: #e79800; /* heading accent bar, logo sub-text */
/* Left panel photo overlay — matches the DWU brand green used across the
site (see .dwu-progress-component --dwu-green: #076415) and tuned to
the same flat green wash used on the "Notices and Deadlines" mini-header
banner (wm-button-bg / notice-bg.jpeg), so the two panels read as the
same treatment. */
--auth-panel-via: #145a32; /* solid fallback shown while the image loads */
--auth-panel-overlay-color: #0d6b21;
--auth-panel-overlay-opacity: 0.75;
/* Neutrals */
--auth-heading: #111111;
--auth-text: #505050;
--auth-muted: #0f192d;
--auth-label: #606060;
--auth-field-border: rgba(0, 0, 0, 0.2);
}
/* =============================================================
1. BASE (was: typography.css + the body rule)
============================================================= */
.auth-page,
.auth-page *,
.auth-page *::before,
.auth-page *::after { box-sizing: border-box; }
/* A rule that targets an element directly (e.g. `p { font-family: serif }`
in your custom.css) beats a value INHERITED from an ancestor, whatever
the specificity. So the font is re-asserted on every descendant rather
than left to inherit from .auth-page — otherwise a bare element rule
elsewhere on the site silently changes the typeface here. */
.auth-page,
.auth-page * { font-family: Rubik, sans-serif; }
.auth-page {
margin: 0;
padding: 0;
background-color: #fff;
background-size: cover; /* only matters if you add a background-image */
background-attachment: fixed;
font-family: Rubik, sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--auth-text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.auth-page a { color: #6f6f6f; text-decoration: none; outline: 0 none; }
.auth-page a:hover,
.auth-page a:focus { text-decoration: none; outline: 0 none; color: #333333; }
.auth-page img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; }
/* `color: inherit` for the same reason as the font rule above — a bare
`p { color: ... }` in another stylesheet would otherwise win. */
.auth-page p { color: inherit; line-height: 28px; margin-top: 0; margin-bottom: 24px; }
.auth-page h1,
.auth-page h2,
.auth-page h3,
.auth-page h4,
.auth-page h5,
.auth-page h6 {
color: var(--auth-heading);
font-family: Rubik, sans-serif;
margin-top: 0;
}
.auth-page h2 { font-size: 32px; line-height: 45px; margin-bottom: 25px; font-weight: 700; }
.auth-page h6 { font-size: 16px; line-height: 22px; margin-bottom: 10px; font-weight: 500; }
/* =============================================================
2. LAYOUT UTILITIES (the Bootstrap classes this page uses)
-------------------------------------------------------------
Bootstrap's .row carries -15px side margins meant to be
cancelled by a .container's 15px padding. There is no such
container here, so they would push the form past each edge and
overflow on narrow screens. Every column here is full-width,
so the gutter is dropped instead.
============================================================= */
.auth-page .row { display: flex; flex-wrap: wrap; }
.auth-page .col-lg-12 { position: relative; flex: 0 0 100%; max-width: 100%; min-width: 0; }
.auth-page .d-flex { display: flex; }
.auth-page .flex-fill { flex: 1 1 auto; }
.auth-page .ml-auto { margin-left: auto; }
.auth-page .m-b30 { margin-bottom: 30px; }
.auth-page .m-r5 { margin-right: 5px; }
.auth-page .m-l5 { margin-left: 5px; }
/* =============================================================
3. ACCOUNT SHELL (was: style.css .account-*)
============================================================= */
.auth-page .account-form {
display: flex;
width: 100%;
position: relative;
}
/* Left panel. Campus photo (set inline via the template's background-image
style) covered by a dark green overlay for text contrast — the overlay
is a ::before layer so it never fights the inline background-image for
the same CSS property. */
.auth-page .account-head {
position: sticky;
left: 0;
top: 0;
z-index: 1;
width: 500px;
min-width: 500px;
height: 100vh;
display: flex;
align-items: center; /* vertical centering — no margin-top hack needed */
justify-content: center;
text-align: center;
overflow: hidden;
background-color: var(--auth-panel-via);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.auth-page .account-head::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--auth-panel-overlay-color);
opacity: var(--auth-panel-overlay-opacity);
}
.auth-page .account-head > * {
position: relative;
z-index: 1;
}
.auth-page .account-head a {
display: block;
width: 100%;
}
.auth-page .account-head img {
width: 120px;
height: auto;
display: block;
margin: 0 auto 16px;
}
.auth-page .account-form-inner {
width: 100%;
align-self: center;
}
.auth-page .account-container {
max-width: 400px;
margin: auto;
padding: 30px 0;
}
/* ---------- Logo lockup inside the left panel ---------- */
.auth-page .logo-text-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.auth-page .logo-bold-text {
font-weight: 700;
font-size: 25px;
color: #fff;
margin: 0;
line-height: 1.3;
}
.auth-page .logo-small-text {
font-size: 18px;
font-weight: 500;
color: var(--auth-accent);
opacity: 0.8;
margin: 0;
line-height: 1.4;
}
/* =============================================================
4. HEADING BLOCK (the accent bar)
============================================================= */
.auth-page .heading-bx { margin-bottom: 40px; }
.auth-page .heading-bx h1,
.auth-page .heading-bx h2,
.auth-page .heading-bx h3 { margin-top: 0; }
.auth-page .heading-bx h2 { font-size: 30px; }
.auth-page .heading-bx p {
padding-top: 10px;
font-size: 16px;
color: var(--auth-muted);
}
.auth-page .contact-bx .heading-bx { margin-bottom: 30px; }
/* The vertical bar. `border-left` shorthand is required — `border-color`
on its own sets neither width nor style, so nothing would be drawn. */
.auth-page .heading-bx.left .title-head {
margin-top: 0;
margin-bottom: 10px;
line-height: 32px;
padding-left: 10px;
border-left: 5px solid var(--auth-accent);
}
.auth-page .heading-bx.left p {
max-width: 500px;
margin-bottom: 0;
}
.auth-page .title-head span { font-weight: 400; }
.auth-page .account-form .heading-bx p a {
color: var(--auth-primary);
text-decoration: underline;
padding-bottom: 0;
}
/* =============================================================
5. FORM FIELDS + FLOATING LABELS
The `.focused` / `.filled` classes are applied by login.js
============================================================= */
.auth-page .form-group { margin-bottom: 1rem; }
.auth-page .form-control {
display: block;
width: 100%;
height: 40px;
padding: 9px 12px;
font-size: 13px;
line-height: 20px;
font-family: inherit;
color: var(--auth-text);
background-color: #fff;
border: 1px solid #e1e6eb;
border-radius: 0;
box-shadow: none;
transition: all 0.2s linear;
}
.auth-page .form-control:focus {
outline: 0;
box-shadow: none;
}
.auth-page .contact-bx .input-group {
display: block;
position: relative;
width: 100%;
}
.auth-page .contact-bx .input-group .form-control,
.auth-page .contact-bx .input-group label { width: 100%; }
.auth-page .contact-bx .input-group label {
font-size: 14px;
font-weight: 400;
color: var(--auth-label);
position: absolute;
top: 10px;
left: 0;
margin: 0;
pointer-events: none;
transition: all 0.5s;
}
.auth-page .contact-bx .focused .input-group label {
top: -8px;
font-size: 10px;
color: var(--auth-primary);
}
.auth-page .contact-bx .input-group .form-control {
border-width: 0 0 1px 0;
border-color: var(--auth-field-border);
background-color: transparent;
padding: 10px 0;
}
.auth-page .contact-bx .input-group .form-control:focus {
border-color: var(--auth-primary);
background-color: transparent;
outline: none;
box-shadow: none;
}
.auth-page .contact-bx .input-group textarea.form-control { height: 120px; }
/* =============================================================
6. CUSTOM CHECKBOX (Bootstrap 4 custom-control, distilled)
============================================================= */
.auth-page .custom-control {
position: relative;
display: inline-block;
min-height: 1.5rem;
padding-left: 30px; /* 20px box + 10px gap */
}
.auth-page .custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
.auth-page .custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: middle;
cursor: pointer;
}
.auth-page .custom-control-label::before,
.auth-page .custom-control-label::after {
position: absolute;
top: 2px;
left: -30px;
display: block;
width: 20px;
height: 20px;
content: "";
}
.auth-page .custom-control-label::before {
background-color: transparent;
border: 2px solid var(--auth-primary);
border-radius: 3px;
}
.auth-page .custom-control-label::after {
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
.auth-page .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--auth-primary);
}
.auth-page .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.auth-page .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px rgba(0, 153, 89, 0.25);
}
/* ---------- Remember me / Forgot password row ---------- */
.auth-page .account-container .form-forget {
display: flex;
align-items: center;
justify-content: space-between;
}
.auth-page .account-container .form-forget .custom-control-label {
font-weight: 400;
margin-bottom: 0;
}
/* =============================================================
7. BUTTONS
============================================================= */
.auth-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 48px;
padding: 0 24px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--auth-primary);
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.auth-page .btn:hover,
.auth-page .btn:focus,
.auth-page .btn:active {
background-color: var(--auth-primary-hover);
color: #fff;
outline: 0;
}
.auth-page .account-container .btn.button-md { padding: 0 40px; }
/* Social buttons: inline SVG icon with the white divider rule */
.auth-page .btn .btn-icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
fill: currentColor;
border-right: 1px solid #fff;
box-sizing: content-box;
padding-right: 10px;
margin-right: 10px;
}
/* =============================================================
8. RESPONSIVE — TABLET (max-width: 991px)
============================================================= */
@media (max-width: 991px) {
.auth-page .account-form { flex-direction: column; }
.auth-page .account-head {
position: relative;
width: 100%;
min-width: 100%;
height: auto;
padding: 40px 20px 30px;
top: auto;
left: auto;
}
.auth-page .account-head img { width: 100px; }
.auth-page .account-form-inner { width: 100%; padding: 30px 20px; }
.auth-page .account-container { max-width: 500px; padding: 20px 0; }
.auth-page .logo-bold-text { font-size: 22px; }
.auth-page .logo-small-text { font-size: 16px; }
.auth-page .heading-bx { margin-bottom: 28px; }
.auth-page .heading-bx h2 { font-size: 26px; }
}
/* =============================================================
9. RESPONSIVE — MOBILE (max-width: 576px)
============================================================= */
@media (max-width: 576px) {
.auth-page .account-head { padding: 30px 15px 20px; }
.auth-page .account-head img { width: 80px; }
.auth-page .account-form-inner { padding: 20px 15px; }
.auth-page .account-container { max-width: 100%; padding: 15px 0; }
.auth-page .logo-bold-text { font-size: 18px; }
.auth-page .logo-small-text { font-size: 14px; }
.auth-page .heading-bx { margin-bottom: 20px; }
.auth-page .heading-bx h2 { font-size: 22px; }
.auth-page .heading-bx p { font-size: 14px; }
.auth-page .btn { font-size: 14px; height: 44px; padding: 0 16px; }
.auth-page .account-container .btn.button-md { padding: 0 20px; }
.auth-page .contact-bx .input-group label { font-size: 13px; }
.auth-page .custom-control-label::before,
.auth-page .custom-control-label::after { width: 16px; height: 16px; }
}
/* =============================================================
IMPORTANT DATES PAGE — "Notices and Deadlines" mobile fixes
Scoped to .important-dates-page (see body_class block in
important-dates.html) so graduation-requirements.html, which
shares .wm-button-bg and .important-notice, is unaffected.
============================================================= */
.important-dates-page .wm-notices-hero-photo { display: none; }
.important-dates-page .wm-notices-card-link {
display: inline-block;
color: #076415;
font-weight: 700;
text-decoration: underline;
}
.important-dates-page .wm-notices-card-link:hover,
.important-dates-page .wm-notices-card-link:focus {
color: #054b10;
}
.important-dates-page .wm-notices-card-link:focus-visible {
outline: 3px solid #2675dc;
outline-offset: 3px;
}
/* Tablet + mobile (<992px): stack the hero into a readable text panel
above a cropped photo strip instead of overlaying text on the image. */
@media (max-width: 991px) {
.important-dates-page .wm-main-section.wm-button-bg {
background-image: none;
padding: 0;
}
.important-dates-page .wm-notices-hero-heading {
float: none;
width: 100%;
background-color: #f4f3f3;
border-bottom: 6px solid #e79800;
padding-top: 30px;
padding-bottom: 24px;
margin-bottom: 0;
}
.important-dates-page .wm-notices-hero-heading .wm-typo-title h2 {
margin: -8px 0 0;
font-size: 28px;
line-height: 1.3;
color: #076415;
word-wrap: break-word;
}
.important-dates-page .wm-notices-hero-photo {
display: block;
width: 100%;
aspect-ratio: 2 / 1;
background-image: url("../extra-images/notice-bg.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
}
/* Below ~340px, "Notices and Deadlines" no longer fits col-md-6's padded
width on one line at 28px. The heading band's height doesn't grow to
fit wrapped content (its floated child isn't contained by the band, a
pre-existing layout quirk), so a second line spills past the orange
border instead of the band growing to hold it. Dropping the font-size
just enough to keep it on one line avoids that without changing the
band's height or moving the orange line. */
@media (max-width: 340px) {
.important-dates-page .wm-notices-hero-heading .wm-typo-title h2 {
font-size: 26px;
}
}
@media (max-width: 767px) {
.important-dates-page .wm-typo-columns p {
font-size: 15px;
line-height: 1.75;
}
.important-dates-page .wm-notices-section-heading .wm-typo-title h3 {
font-size: 22px;
line-height: 1.3;
}
.important-dates-page .wm-notices-card {
margin-top: 18px;
}
.important-dates-page .wm-notices-card .wm-typo-title h5 {
font-size: 17px;
line-height: 1.4;
}
}
/* =============================================================
IMPORTANT DATES PAGE — mobile hierarchy, spacing, dates
accordion and application card fixes.
Desktop/tablet (>767px) are intentionally left untouched:
the page hero was promoted from h1->h2 and the "Requirements
and deadlines..." heading from h3->h1, and the four faculty
headings from h5->h2, so the page carries exactly one h1 and a
clean h1 -> h2 -> h3 (dates toggle) hierarchy. The base rules
below (outside any media query) restore each heading's ORIGINAL
desktop font-size/margin so retagging causes no visual change
above 767px; the max-width:767px block further reduces them for
mobile per design request.
============================================================= */
/* Scoped to min-width:992px (rather than left unconditional) because
the existing max-width:991px tablet override two rules above it in
this file sets the same selector to 28px — an unconditional rule
here would tie on specificity and win by source order at tablet
widths too, undoing that override. Gating it to desktop sidesteps
the ordering fight entirely instead of relying on rule order. */
@media (min-width: 992px) {
.important-dates-page .wm-notices-hero-heading .wm-typo-title h2 {
font-size: 45px;
margin: 0;
}
}
.important-dates-page .wm-notices-main-heading h1 {
font-size: 35px;
margin: 0;
}
.important-dates-page .wm-faculty-heading h2 {
font-size: 24px;
line-height: 30px;
margin: 0;
}
@media (max-width: 767px) {
/* --- Page spacing: give every bare (non col-md-12) block in the
main content the same 15px gutter used by the col-md-12 sections
above/below it, so nothing sits flush against the viewport edge
and every section shares one left/right boundary. --- */
.important-dates-page .wm-notices-main-heading,
.important-dates-page .wm-notices-intro,
.important-dates-page .wm-faculty-section {
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
/* --- Typography & hierarchy --- */
.important-dates-page .wm-notices-main-heading h1 {
font-size: 24px;
line-height: 1.3;
word-wrap: break-word;
}
.important-dates-page .wm-notices-intro {
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
}
.important-dates-page .wm-faculty-heading h2 {
font-size: 18px;
line-height: 1.4;
}
.important-dates-page .wm-faculty-section p {
font-size: 14px;
line-height: 1.7;
}
/* --- Faculty sections: consistent, clearly bounded blocks --- */
.important-dates-page .wm-faculty-section {
display: block;
float: none;
width: 100%;
padding-top: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #eaeaea;
}
.important-dates-page .wm-faculty-section:first-of-type {
padding-top: 8px;
}
.important-dates-page .wm-faculty-section .wm-faculty-heading {
margin-bottom: 8px;
}
.important-dates-page .wm-faculty-section .wm-typography-element {
margin-bottom: 24px;
}
/* --- Program lists: visible, aligned bullets with room to scan --- */
.important-dates-page .wm-list-wrap {
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
/* Native list markers (list-style-position: outside) only hang-indent
reliably for plain inline text. The previous display:inline-block
on made each degree name an atomic box, and once its text
needed to wrap, the whole box dropped to a new line below the
bullet instead of sitting beside it. A two-column grid with a
manual bullet sidesteps marker/inline-block layout entirely, so
wrapped lines always align under the degree name, not the bullet. */
.important-dates-page .wm-list-style {
list-style: none;
margin: 0;
padding: 0;
}
.important-dates-page .wm-list-style li {
display: grid;
grid-template-columns: 14px 1fr;
column-gap: 8px;
align-items: baseline;
margin: 0 0 10px;
padding: 0;
line-height: 1.5;
}
.important-dates-page .wm-list-style li:last-child {
margin-bottom: 0;
}
.important-dates-page .wm-list-style li::before {
content: "\2022";
color: #ea9c0b;
line-height: 1.5;
}
.important-dates-page .wm-list-style li strong {
display: block;
min-width: 0;
line-height: 1.5;
}
/* --- Dates accordion trigger: descriptive button, real touch target ---
.wm-dates-trigger still inherits `float: left` from the unscoped
desktop rule in style.css (".wm-accordion ... .panel-heading button").
display:flex does not cancel that: float only computes to none for
flex ITEMS, not for an element that is itself display:flex. On
desktop, generous padding on .panel-heading (17px/37px) happens to
keep it tall enough that the collapse isn't visible, but here padding
is reset to 0, so the floated trigger contributes no height to its
ancestors and .panel-heading collapses to ~0px. The very next
sibling (.panel-collapse) then renders starting at that same ~0
offset — right on top of the trigger — so once opened, .panel-body
(position:relative;z-index:1 from the unscoped rule earlier in this
file) paints above the trigger and swallows the second tap that
should close it. float:none plus an explicit stacking context fixes
both the containment and the paint order, independent of that. */
.important-dates-page .wm-accordion .panel-default > .panel-heading {
padding: 0;
background-color: #f9f9f9;
border: 1px solid #eaeaea;
display: flow-root;
position: relative;
z-index: 2;
}
.important-dates-page .wm-accordion .panel-default .wm-dates-trigger {
min-height: 44px;
display: flex;
align-items: center;
width: 100%;
padding: 12px 46px 12px 16px;
font-size: 13px;
letter-spacing: 0.02em;
box-sizing: border-box;
float: none;
}
.important-dates-page .wm-dates-trigger:focus-visible {
outline: 3px solid #2675dc;
outline-offset: -3px;
}
.important-dates-page .wm-accordion .panel-default .panel-heading .wm-dates-trigger:before {
right: 10px;
top: 50%;
margin-top: -11px;
}
.important-dates-page .wm-accordion .panel-body {
padding: 16px 15px;
border-top: 1px solid #eaeaea;
}
/* --- Dates table: stack Date / Application / Entry Requirements
into labelled card rows instead of a squeezed 3-column table --- */
.important-dates-page .wm-table .wm-table-head {
display: none;
}
.important-dates-page .wm-table .wm-table-content {
display: block;
border: none;
width: 100%;
}
.important-dates-page .wm-table .wm-table-content ul {
display: block;
border: 1px solid #eaeaea;
border-radius: 4px;
padding: 14px 16px;
margin-bottom: 12px;
}
.important-dates-page .wm-table .wm-table-content ul:last-child {
margin-bottom: 0;
}
.important-dates-page .wm-table-content ul li {
display: block;
width: 100%;
border: none;
padding: 6px 0;
font-size: 14px;
line-height: 1.6;
}
.important-dates-page .wm-table-content ul li:before {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #076415;
margin-bottom: 2px;
}
.important-dates-page .wm-table-content ul li:nth-child(1):before { content: "Date"; }
.important-dates-page .wm-table-content ul li:nth-child(2):before { content: "Application"; }
.important-dates-page .wm-table-content ul li:nth-child(3):before { content: "Entry Requirements"; }
/* --- Application card: align to the same content boundary,
trim the oversized desktop padding, reflow location list --- */
.important-dates-page .wm-app-card {
padding-left: 15px;
padding-right: 15px;
margin-top: 4px;
box-sizing: border-box;
}
.important-dates-page .wm-event-list-wrap {
padding: 0;
}
.important-dates-page .wm-event-list figure,
.important-dates-page .wm-event-list figure a,
.important-dates-page .wm-event-list figure img {
width: 100%;
}
.important-dates-page .wm-event-list figure ~ .wm-event-list-text {
margin-left: 0;
}
.important-dates-page .event-normal-list .wm-event-list-text {
padding: 20px 18px 22px;
}
.important-dates-page .wm-event-title {
font-size: 19px;
line-height: 1.3;
margin-bottom: 14px;
}
.important-dates-page .wm-event-list-text ul li {
padding-left: 0;
font-size: 14px;
line-height: 1.6;
}
.important-dates-page .wm-event-list-text ul li span {
position: static;
display: inline;
margin: 0 4px 0 0;
}
.important-dates-page .wm-event-list-text .wm-right-section {
text-align: left;
padding-top: 18px;
}
.important-dates-page .wm-event-info {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 15px;
margin-bottom: 4px;
}
.important-dates-page .wm-event-details {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
box-sizing: border-box;
padding: 12px 28px;
}
.important-dates-page .wm-event-title:focus-visible,
.important-dates-page .wm-event-info:focus-visible,
.important-dates-page .wm-event-details:focus-visible {
outline: 3px solid #2675dc;
outline-offset: 2px;
}
}
/* ------------------------------------------------------------------
Research degree application - "Contact the Research Office" CTA.
Scoped to .research-degree-application-page (see body_class block
in research-degree-application.html). Rebuilt off the legacy
wm-event-list-wrap markup: dropped the repeated DWU logo (the
global header already carries branding, and the logo's white
background made it look detached from the grey panel), replaced
the anchor-as-heading with a real , and moved from floats to
flexbox so the text group and button align on one row without
fixed widths or absolute positioning. The .wm-event-details flag
corner and .wm-bgcolor-four fill are kept as-is to preserve the
site's angled-button look and palette.
------------------------------------------------------------------ */
.research-degree-application-page .research-cta-section {
padding: 40px 0 60px;
}
.research-degree-application-page .research-cta-panel {
position: relative;
overflow: hidden;
background-color: #f2f2f2;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 44px 48px;
box-sizing: border-box;
}
.research-degree-application-page .research-cta-panel:before {
content: '';
position: absolute;
right: -10%;
top: 0;
width: 40%;
height: 100%;
background-color: #ececec;
transform: skewX(-34deg);
pointer-events: none;
z-index: 0;
}
.research-degree-application-page .research-cta-content,
.research-degree-application-page .research-cta-action {
position: relative;
z-index: 1;
}
.research-degree-application-page .research-cta-content {
flex: 1 1 420px;
min-width: 0;
}
.research-degree-application-page .research-cta-title {
display: block;
font-size: 26px;
line-height: 1.3;
font-weight: 700;
color: #262626;
text-transform: none;
margin: 0 0 12px;
overflow-wrap: break-word;
}
.research-degree-application-page .research-cta-desc {
margin: 0;
max-width: 640px;
font-size: 16px;
line-height: 1.6;
color: #4a4a4a;
overflow-wrap: break-word;
}
.research-degree-application-page .research-cta-action {
flex: 0 0 auto;
}
.research-degree-application-page .research-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
box-sizing: border-box;
padding: 14px 32px;
white-space: normal;
text-align: center;
overflow-wrap: break-word;
}
.research-degree-application-page .research-cta-title:focus-visible,
.research-degree-application-page .research-cta-btn:focus-visible {
outline: 3px solid #2675dc;
outline-offset: 2px;
}
@media (max-width: 767px) {
.research-degree-application-page .research-cta-panel {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 28px 24px;
gap: 20px;
}
/* flex-basis:420px (set for desktop row width) would otherwise
force a 420px-tall content block once flex-direction is column. */
.research-degree-application-page .research-cta-content {
flex-basis: auto;
}
/* The diagonal accent reads as a broken sliver once the panel is
this narrow, so it is dropped in favour of the flat grey fill;
the DWU palette and card background are unchanged. */
.research-degree-application-page .research-cta-panel:before {
display: none;
}
.research-degree-application-page .research-cta-title {
font-size: 21px;
}
.research-degree-application-page .research-cta-action {
width: 100%;
}
.research-degree-application-page .research-cta-btn {
width: auto;
}
}
/* ==================================
GRADUATION REQUIREMENTS PAGE - ASSISTANCE SECTION
Scoped to the "Need help with graduation requirements?" panel
(.grad-assist-*) in graduation-requirements.html only, so the shared
.wm-event-list-wrap/.wm-event-details component used elsewhere
(important-dates.html, admission-requirements.html,
research-degree-application.html) is untouched. The duplicated DWU
logo was dropped from the markup for this instance since the
global header already provides that branding.
===================================== */
.grad-assist-wrap {
padding: 44px 48px !important;
}
.grad-assist-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 28px 36px;
float: none !important;
width: 100% !important;
padding: 0 !important;
}
.grad-assist-info {
float: none !important;
width: auto;
min-width: 260px;
flex: 1 1 320px;
}
.grad-assist-info .wm-event-title {
text-transform: none;
font-size: 23px;
line-height: 1.3;
margin-bottom: 12px;
}
.grad-assist-desc {
max-width: 560px;
margin: 0 0 18px;
color: #555555;
font-size: 15px;
line-height: 1.65;
}
.grad-assist-emails {
display: flex !important;
width: 100%;
flex-wrap: wrap;
align-items: center;
gap: 8px 22px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.grad-assist-emails li {
margin: 0 !important;
padding: 0 !important;
font-size: 15px;
line-height: 1.5;
}
.grad-assist-emails-label {
flex: 1 0 100% !important;
}
.grad-assist-emails-label span {
font-weight: 600;
color: #303030;
}
.grad-assist-emails a {
display: inline-block;
max-width: 100%;
padding: 8px 2px;
color: #076415;
font-weight: 500;
overflow-wrap: anywhere;
word-break: break-word;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.grad-assist-emails a:hover,
.grad-assist-emails a:focus-visible {
color: #ea9c0b;
border-bottom-color: currentColor;
}
.grad-assist-emails a:focus-visible {
outline: 2px solid #ea9c0b;
outline-offset: 3px;
border-radius: 2px;
}
.grad-assist-cta {
float: none !important;
width: auto;
flex: 0 0 auto;
padding: 0 !important;
text-align: right;
}
.grad-assist-cta .wm-event-details {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
box-sizing: border-box;
white-space: nowrap;
}
.grad-assist-cta .wm-event-details:focus-visible {
outline: 3px solid #076415 !important;
outline-offset: 3px !important;
}
@media (max-width: 991px) {
.grad-assist-wrap {
padding: 34px 30px !important;
}
.grad-assist-desc {
max-width: none;
}
}
@media (max-width: 767px) {
.grad-assist-wrap {
padding: 28px 22px !important;
}
.grad-assist-content {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.grad-assist-info {
min-width: 0;
flex-basis: auto;
}
.grad-assist-info .wm-event-title {
font-size: 20px;
}
.grad-assist-cta {
width: 100%;
text-align: left;
}
.grad-assist-cta .wm-event-details {
width: 100%;
}
}
@media (max-width: 380px) {
.grad-assist-wrap {
padding: 22px 16px !important;
}
.grad-assist-emails {
gap: 10px 16px;
}
}
/* ==================================
GRADUATION REQUIREMENTS PAGE - CONTENT GUTTER FIX
Scoped to .graduation-requirements-page (see body_class block in
graduation-requirements.html). Both top-level .wm-typo-heading blocks
("Graduation Eligibility & Requirements" intro, and the large
"Confirm Your Graduation" ... assistance block) sit directly inside
.row without a .col-md-12 wrapper, so they inherit Bootstrap's -15px
row margins with no compensating gutter padding. Text renders flush
against the container edge, most visibly on narrow screens where
.container spans the full viewport width. Restoring the standard
15px col-md-12 gutter here (rather than restructuring the template)
matches col-md-12's own padding and leaves the already-fixed nested
.grad-assist-* card (which has its own col-md-12 wrapper) untouched.
===================================== */
.graduation-requirements-page .wm-typo-heading {
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 767px) {
/* Graduation info table: stack Date and Time / Amount / Details into
labelled card rows instead of a squeezed 3-column table, same
treatment as .important-dates-page's .wm-table fix above (same
shared component, this page just never received it). */
.graduation-requirements-page .wm-table .wm-table-head {
display: none;
}
.graduation-requirements-page .wm-table .wm-table-content {
display: block;
border: none;
width: 100%;
}
.graduation-requirements-page .wm-table .wm-table-content ul {
display: block;
border: 1px solid #eaeaea;
border-radius: 4px;
padding: 14px 16px;
margin-bottom: 12px;
}
.graduation-requirements-page .wm-table .wm-table-content ul:last-child {
margin-bottom: 0;
}
.graduation-requirements-page .wm-table-content ul li {
display: block;
width: 100%;
border: none;
padding: 6px 0;
font-size: 14px;
line-height: 1.6;
}
.graduation-requirements-page .wm-table-content ul li:before {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #076415;
margin-bottom: 2px;
}
.graduation-requirements-page .wm-table-content ul li:nth-child(1):before { content: "Date and Time"; }
.graduation-requirements-page .wm-table-content ul li:nth-child(2):before { content: "Amount"; }
.graduation-requirements-page .wm-table-content ul li:nth-child(3):before { content: "Details"; }
}
/* ==================================
GRADUATION FORM PAGE - CONTENT GUTTER FIX
Scoped to .graduation-form-page (see body_class block in
graduation-form.html; kept alongside .important-dates-page, which the
page still uses for its shared hero banner styling). Same root cause
as the .graduation-requirements-page fix above: the "Graduation
Eligibility" heading/intro/link sit directly inside .row with no
.col-md-12 wrapper, so Bootstrap's -15px row margins bleed through
and the text renders flush against the container edge on narrow
screens. Unlike that page, this .wm-typo-heading also contains real
.col-md-12 children (the classic heading + the form itself), which
already carry their own 15px gutter - so padding .wm-typo-heading
directly would double their inset. Restoring the gutter on
.wm-typo-heading and cancelling it back out on its .col-md-12
children (mirroring how .row/.col pair normally) fixes the
unwrapped text without shifting the already-correct form. */
.graduation-form-page .wm-main-content .wm-typo-heading {
padding-left: 15px;
padding-right: 15px;
}
.graduation-form-page .wm-main-content .wm-typo-heading > .col-md-12 {
margin-left: -15px;
margin-right: -15px;
}
/*
DEPARTMENT/DIVISION SERVICES CHECKLIST
Shared by admin-divisions.html and student-services.html - the "
Services" checklist (e.g. "Partnership Services"). Was
- , a Bootstrap float grid: unequal-height floated
items leave gaps and can strand the next item lower than intended, which
is what produced the irregular vertical rhythm and the isolated final
item. CSS multi-column layout replaces it - one
in DOM/reading
order (so screen readers and keyboard/tab order see the real order
regardless of the two visual columns), auto-balanced by the browser,
single column on mobile. The checkmark stays a CSS :before glyph (not
DOM text) so it isn't announced by assistive tech; scoped to this class
only so other .wm-rich-aditor lists elsewhere on the site are untouched.
*/
.wm-services-list {
list-style: none;
margin: 4px 0 0;
padding: 0;
column-count: 2;
column-gap: 50px;
}
.wm-services-list li {
position: relative;
break-inside: avoid;
-webkit-column-break-inside: avoid;
padding: 0 0 16px 26px;
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #424242;
}
.wm-services-list li:before {
content: "\e916";
font-family: 'icon';
position: absolute;
left: 0;
top: 4px;
font-size: 11px;
color: #ea9c0b;
}
.wm-services-list-empty {
padding-left: 0;
}
.wm-services-list-empty:before {
content: none;
}
@media (max-width: 767px) {
.wm-services-list {
column-count: 1;
}
}
/* "Banner Three" hero (used by the Research page, and any future page reusing
the same .wm-banner-three markup): responsive.css hides .wm-caption-three
below 991px, so on tablet/mobile only the bare ![]()
is left in normal
flow at its native aspect ratio - full viewport width but only as tall as
whatever the source photo's proportions happen to give, which reads as an
awkwardly short, wide strip. Give it a real hero band on small screens
instead, sized so it never goes short-and-wide on phones nor
disproportionately tall once it stretches across a tablet viewport;
object-fit keeps the crop centered without stretching the image. Desktop
(>=992px) keeps the original design untouched. */
@media (max-width: 991px) {
.wm-banner-three-layer {
width: 100%;
height: clamp(190px, 52vw, 240px);
overflow: hidden;
}
.wm-banner-three-layer img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}