Course compare page (degrees/courses/course-compare)
*/
.after-hero {
position: relative; /* assists pseudo elements below hero */
}
/*
Sometimes priority banner or countdown timer are injected above the regular Why ECU banner
Use this class to assist layout
*/
.after-hero-increase-z-index {
z-index: 1; /* sit above succeding sections that contain `after-hero` */
}
.after-hero::before {
content: "";
display: block;
position: absolute;
background-color: var(--component-background-color);
block-size: var(--hero-leaf);
inline-size: 100%;
top: calc(-1 * var(--hero-leaf));
left: 0;
z-index: 0;
}
@media (min-width: 64.0625em) {
.after-hero::before {
display: none;
}
}
.alert-inline {
-webkit-border-start: var(--alert-inline-border-width, 0) solid var(--alert-inline-border-color, transparent);
border-inline-start: var(--alert-inline-border-width, 0) solid var(--alert-inline-border-color, transparent);
background-color: var(--alert-inline-background-color, var(--color-ecru));
color: var(--alert-inline-text-color, currentColor);
padding: var(--padding-xs);
text-align: start;
inline-size: min(100%, var(--container-inline-size));
}
.alert-inline .heading-xs {
color: var(--alert-inline-heading-color, var(--alert-inline-text-color));
}
.alert-inline svg {
color: var(--alert-inline-icon-color, var(--alert-inline-heading-color, var(--alert-inline-text-color)));
}
.background-ecru .alert-inline {
--alert-inline-background-color: var(--color-white);
}
/* Variable maps for inline alert styles
@type list
Variables
- alert name
- text colour
- background colour
- heading colour
- icon colour
- update border
- add text shadow to heading
*/
.alert-inline.important {
--alert-inline-heading-color: var(--color-orange-700);
}
.alert-inline.error {
--alert-inline-text-color: var(--color-white);
--alert-inline-background-color: var(--color-black);
--alert-inline-icon-color: var(--color-orange-500);
}
.alert-inline.success {
--alert-inline-text-color: var(--color-white);
--alert-inline-background-color: var(--color-black);
--alert-inline-icon-color: var(--color-current-student-green-100);
}
.alert-inline.tip {
--alert-inline-icon-color: var(--color-current-student-green-100);
--alert-inline-border-width: 0.5rem;
--alert-inline-border-color: var(--alert-inline-icon-color);
}
.alert-inline.recognition {
--alert-inline-icon-color: var(--color-primary);
--alert-inline-border-width: 0.5rem;
--alert-inline-border-color: var(--alert-inline-icon-color);
}
/** Helper class used in Content Container Templates
* In Page - Image Gallery #898913
* In Page - Image #936146
* In Page - Infographics #933075
* In Page - Video #932928
*/
.article-media {
max-inline-size: var(--container-inline-size); /* ensures article images/ videos/ image galleries are not much wider than surrounding content */
}
.article-media * {
max-inline-size: 100%;
}
.articles-grid {
display: grid;
gap: var(--grid-layout-gap);
grid-template-columns: 100%;
}
@media (min-width: 37.5em) {
.articles-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 65em) {
.articles-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/**
Three column grid
used for injectable Saleforce content placed on campaign and course pages
also used on newsroom
*/
.articles-grid-3-col {
--grid-layout-gap: var(--grid-layout-gap-xl);
}
@media (min-width: 65em) {
.articles-grid-3-col {
grid-template-columns: repeat(3, 1fr);
}
}
/* Two column grid, used on newsroom */
.articles-grid-l {
--grid-layout-gap: var(--grid-layout-gap-xxl);
}
@media (min-width: 65em) {
.articles-grid-l {
grid-template-columns: repeat(2, 1fr);
}
}
.aside {
position: sticky;
display: grid;
grid-template-areas: "nav" "buttons";
gap: 0 clamp(var(--space), 10vw, 3.75rem);
justify-items: center;
background-color: var(--color-black-100);
top: 0;
left: 0;
z-index: 1;
max-inline-size: 100vw;
padding-inline: var(--section-inline);
-webkit-transition: top var(--transition-time) var(--cubic-bezier);
transition: top var(--transition-time) var(--cubic-bezier);
}
.aside * {
max-inline-size: 100vw;
}
.aside nav {
--component-background-color: var(--color-black-050);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-area: nav;
background-color: var(--component-background-color);
inline-size: 100vw;
margin-inline: calc(var(--space-l) * -1);
}
.aside nav::before,
.aside nav::after {
content: "";
display: block;
position: absolute;
inline-size: var(--inline-scroll-element);
block-size: 100%;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(85%, var(--component-background-color)));
background-image: linear-gradient(to left, transparent, var(--component-background-color) 85%);
}
.aside nav::after {
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(85%, var(--component-background-color)));
background-image: linear-gradient(to right, transparent, var(--component-background-color) 85%);
right: 0;
left: unset;
}
.aside .button {
inline-size: 100%;
}
.aside .button-outline {
display: none;
}
.scroll-up .aside {
top: -100%;
}
.scroll-down .aside {
top: 0;
}
.aside ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--space-s);
margin-block: 0;
margin-inline: auto;
padding-inline: var(--section-inline);
padding-block: var(--space);
overflow-x: auto;
white-space: nowrap;
}
.aside ul a {
display: block;
border: 0.125rem solid var(--color-black-100);
border-radius: 2rem;
padding-block: var(--space-s);
padding-inline: var(--space);
text-decoration: none;
}
.aside .active {
font-weight: 500;
}
.aside-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-area: buttons;
inline-size: min(100%, 19.5rem);
padding-block: var(--space-s);
}
.aside .addToCompare {
grid-area: compare;
justify-self: start;
}
.aside-with-compare {
grid-template-areas: "nav nav" "compare buttons";
}
.aside-with-compare .aside-buttons {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.aside-with-compare .button {
inline-size: auto;
}
@media (min-width: 65em) {
.aside {
top: var(--section-block);
grid-area: content;
align-self: self-start;
grid-template-areas: "nav" "buttons";
grid-template-columns: 100%;
gap: var(--padding);
inline-size: calc(25vw - var(--space));
max-inline-size: 20rem;
margin-inline: var(--section-inline) auto;
margin-block: var(--section-block);
-webkit-border-after: 0;
border-block-end: 0;
background-color: var(--color-black-050);
padding-block: var(--padding);
padding-inline: var(--padding);
}
.scroll-up .aside {
top: 7.5rem;
}
.scroll-down .aside {
top: var(--section-block);
}
.wrapper-aside-inline-end .aside {
margin-inline: auto var(--section-inline);
}
.aside .addToCompare {
-webkit-margin-before: calc(var(--padding) * -1);
margin-block-start: calc(var(--padding) * -1);
margin-inline: calc(var(--padding) * -1);
background-color: var(--color-black-100);
padding-block: var(--space);
padding-inline: var(--padding);
inline-size: calc(100% + var(--padding) * 2);
}
.aside nav {
inline-size: 100%;
margin-block: calc(var(--space-s) * -1);
margin-inline: 0;
background-color: transparent;
}
.aside nav::before,
.aside nav::after {
display: none;
}
.aside ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0;
-webkit-margin-start: calc(var(--space) * -1);
margin-inline-start: calc(var(--space) * -1);
padding-inline: 0;
padding-block: 0;
white-space: normal; /* allow wrapping */
}
.aside ul a {
border-width: 0 !important;
border-radius: 0 !important;
}
.aside ul a:focus-visible {
outline-offset: -0.25rem;
}
.aside-buttons,
.aside-with-compare .aside-buttons {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--space);
padding-block: 0;
}
.aside .button-outline {
display: block;
}
/* Aside with compare layout */
.aside-with-compare {
grid-template-areas: "compare" "nav" "buttons";
}
.aside-with-compare .aside-buttons {
inline-size: 100%;
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
.atsi-recognition {
z-index: 1;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0 var(--padding-clamp-m);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-padding-before: var(--padding-clamp-l);
padding-block-start: var(--padding-clamp-l);
padding-inline: var(--padding-clamp-l);
}
.atsi-recognition img {
inline-size: clamp(7.5rem, 1.7311rem + 22.2951vw, 16rem);
}
.atsi-recognition > div {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-inline-size: 28.5rem;
padding-block: var(--padding-clamp-l);
color: var(--color-white);
text-shadow: var(--drop-shadow-text);
}
@media (min-width: 50em) {
.atsi-recognition {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-padding-before: 0;
padding-block-start: 0;
}
}
.atsi-recognition::after, .atsi-recognition::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: -1;
}
.atsi-recognition::after {
background: var(--color-teal-800);
mix-blend-mode: hard-light;
}
.atsi-recognition::before {
-webkit-filter: grayscale(1);
filter: grayscale(1);
background-image: url("https://www.ecu.edu.au/__data/assets/image/0003/1030089/atsi-banner-bg.jpg");
}
/*
Badge - rectangle with rounded corners
Used in Funnelback Course/ Unitset templates
Built in webCMS objects:
- ECU City courses - course overview badge #1084321
- ECU City courses - majors badge #1099012
Similar to `card-badge`
@example html
Coming to ECU City 2026
*/
.badge {
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content; /* truncate width inside stack component */
border-radius: var(--border-radius-xs);
padding: 0.25rem var(--space-s);
text-decoration: none; /* prevent underline when used as a link */
-webkit-box-decoration-break: clone;
box-decoration-break: clone; /* improve styling if badge has a line break when used inside a 3 or 4 card layout https://css-tricks.com/almanac/properties/b/box-decoration-break/ */
}
.blockquote {
position: relative;
-webkit-margin-start: 3.5rem;
margin-inline-start: 3.5rem;
font-weight: 500;
-webkit-margin-before: var(--space-xl);
margin-block-start: var(--space-xl);
-webkit-margin-after: var(--space-l);
margin-block-end: var(--space-l);
}
.blockquote::before {
content: "";
display: block;
position: absolute;
left: -3.5rem;
top: 0.125em;
inline-size: 2rem;
block-size: 2rem;
background-image: url("data:image/svg+xml,
");
background-size: contain;
}
.blockquote cite {
display: block;
-webkit-border-before: 0.125rem solid var(--color-black-050);
border-block-start: 0.125rem solid var(--color-black-050);
-webkit-padding-before: var(--space-s);
padding-block-start: var(--space-s);
font-weight: 400;
font-style: unset;
}
/*
Breadcrumbs located in hero banner,
element markup is located in the following places:
- webCMS helper file `Head - Asset Lineage` #1034843
- webCMS helper file `Body - Search - Error Results` #1058516
- src/modules/CareerFinderModule.js
- ecu-dmt/funnelback/ecu-fs-courses/incl-archived.ftl
- ecu-dmt/funnelback/ecu-fs-courses/overview.ftl
- ecu-dmt/funnelback/ecu-fs-unitsets/unitset.ftl
- ecu-dmt/openday-ct/src/components/Header.vue
@example html
*/
.breadcrumbs {
max-inline-size: var(--measure); /* override `nav` */
position: absolute;
padding-inline: var(--section-inline);
top: var(--space-s);
/* experimented with using `white-space: break-spaces`, this worked on local host, did not work on QA */
}
.hero .breadcrumbs {
text-shadow: var(--drop-shadow-text);
}
.breadcrumbs ul {
margin-block: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style-type: none;
}
.breadcrumbs li {
position: relative;
display: inline;
}
.breadcrumbs li + li {
-webkit-margin-start: var(--space);
margin-inline-start: var(--space);
}
.breadcrumbs li + li::before {
content: "";
display: block;
position: absolute;
block-size: 0.8em;
left: calc(var(--space) * -1);
top: 0.25rem;
margin-inline: var(--icon-space);
-webkit-border-end: 0.0625rem solid currentcolor;
border-inline-end: 0.0625rem solid currentcolor;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
@media (min-width: 64.0625em) {
.breadcrumbs {
position: relative;
top: unset;
padding-inline: 0;
}
}
.section .breadcrumbs {
position: relative;
top: unset;
padding-inline: 0;
}
.button {
display: inline-block;
position: relative;
padding-block: var(--space-s);
padding-inline: var(--space);
vertical-align: middle;
text-align: center;
text-decoration: none;
font-weight: 500;
border: 0.125rem solid var(--component-background-color, transparent);
inline-size: 100%;
}
@media (min-width: 37.5em) {
.button {
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
}
}
.button-center {
margin-inline: auto; /* center buttons where using the `.center` parent class would affect button width */
}
.button-outline {
border-color: currentcolor;
}
.button-outline-highlight {
border-color: var(--color-accent);
}
.button-text-only {
border: 0;
padding: 0;
text-decoration: underline;
cursor: pointer;
}
.button[type=submit] {
border-color: var(--color-primary);
}
.button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: var(--space);
inline-size: 100%; /* match `search-form` on landing pages */
max-inline-size: var(--measure);
}
.center .button-group {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Card examples
@usage html - Base card, text no image
@usage html - Base card with image and text, append class `card-contained` wrap text in `card__text`
@usage html - Open card with image, append class `card-open`
@usage html - image modal Matterport 3D (used on World Ready Facilities), creates modal using `js/modules/ModalModule`
{caption}
@usage html - image modal (used on Article pages), creates modal using `js/modules/ModalModule`
{caption}
@usage html Pixelcase (used on World Ready Facilities), opens Pixelcase in seperate tab
{caption}
href="{url:pixelcase}" target="_blank">{link}
*/
.card {
position: relative;
margin-inline: 0; /* overwrite browser div styles, margin-block is controlled via `stack` */
padding: var(--padding);
}
.card-contained {
padding: 0; /* required to set text alignment, use on cards with images, content padding added using `card-text` component */
}
.card-s {
padding: var(--padding-xs);
}
.card-m {
padding: var(--padding-clamp-m);
}
.card:not(.center) {
text-align: start; /* override `center` parent class to force text-align: start, unless `center` is also placed on card element */
}
.card-modal-trigger {
position: relative;
cursor: pointer;
}
/* Card icon, overlaid on images that trigger modals and Pixelcase */
.card-icon {
position: absolute; /* Override `li .svg-inline--fa` */
inset-block-start: var(--space-s); /* Override `li .svg-inline--fa` */
inset-inline-start: var(--space-s);
z-index: 1;
color: var(--color-white);
-webkit-filter: var(--drop-shadow-svg);
filter: var(--drop-shadow-svg);
}
/*
Badge, Coming to ECU City, New in {year})
- ECU City courses Search badge #1079684, linked from Funnelback search template
- Salesforce trending courses article cards
*/
.card-badge {
border-radius: var(--border-radius-xs);
padding: 0.25rem var(--space-s);
-webkit-box-decoration-break: clone;
box-decoration-break: clone; /* improve styling if badge has a line break https://css-tricks.com/almanac/properties/b/box-decoration-break/ */
}
/**
Card with background header, found in `degrees/choose`, Open Day planner
Note: school colours are no longer in use, so card-{studyarea} class is redundant
@example html
*/
.card-header {
margin-block: 0;
padding-block: var(--space-s);
padding-inline: var(--padding);
}
.card-header-open-day {
inline-size: calc(100% + 2 * var(--padding)); /* required for Open Day "suggested for you" */
-webkit-margin-before: calc(-1 * var(--padding));
margin-block-start: calc(-1 * var(--padding));
}
.card-header :focus-visible {
display: inherit;
outline-color: currentcolor;
}
.card-text {
padding: var(--padding);
text-align: start; /* override `center` parent class */
}
.card-text-m {
padding: var(--padding-clamp-m);
}
.card-text-l {
padding: var(--padding-clamp-l);
}
/* Course / Unitset template
@example html for Unit Set with mutliple semesters
Request for update in heading hierarchy, Oct 2025
Proposed H4 set to the same size as `.table caption`
Details
Upon successful completion of this unit, students will be able to:
Year 1 - Semester 1
{{table caption}}
{{table}}
*/
.caps-structure h3 {
font-size: var(--font-heading-xs);
line-height: var(--font-heading-xs-line-height);
}
.caps-structure h4 {
font-size: var(--font-heading-xxs);
line-height: var(--font-heading-xxs-line-height);
}
.learning-outcome-list {
list-style-type: none;
}
.learning-outcome-list li {
position: relative;
}
.learning-outcome-list > * {
margin-block: 0;
}
.learning-outcome-list > * + * {
-webkit-margin-before: var(--space-s);
margin-block-start: var(--space-s);
}
.learning-outcome-list li::before {
content: "";
display: block;
position: absolute;
top: 0.3125em;
left: -1.4em;
height: 0.9em;
width: 0.9em;
background-image: url("data:image/svg+xml,
");
}
.content-panel {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-inline-size: 100%;
text-align: start;
}
.content-panel-section {
margin-inline: var(--section-inline);
}
.content-panel > * {
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: calc((40rem - 100%) * 999);
flex-basis: calc((40rem - 100%) * 999);
padding-block: var(--padding);
padding-inline: var(--padding);
}
.content-panel:not(.content-panel-wide) > :nth-last-child(n+4),
.content-panel:not(.content-panel-wide) > :nth-last-child(n+4) ~ * {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
/* stylelint-disable */
.content-panel-wide > * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: calc((60rem - 100%) * 999);
flex-basis: calc((60rem - 100%) * 999);
max-inline-size: unset;
}
/* stylelint-enable */
/* stylelint-disable */
.content-panel-signposts {
gap: 0.125rem;
}
.content-panel-signposts > * {
padding-block: var(--padding) var(--padding-clamp-m);
}
/* stylelint-enable */
/* stylelint-disable */
.content-panel-text-and-icon {
gap: var(--space-l);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-block: var(--padding);
padding-inline: var(--padding);
}
.content-panel-text-and-icon > * {
padding: 0;
}
/* stylelint-enable */
.content-panel-icon {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 7.5rem;
flex-basis: 7.5rem;
block-size: 7.5rem;
max-inline-size: 7.5rem;
-ms-flex-item-align: center;
align-self: center;
}
.content-panel-logo {
max-block-size: 10rem;
}
.columns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: var(--space) var(--space-l);
}
.columns-l {
row-gap: var(--space-l);
}
.columns-xl {
gap: var(--space-l) var(--grid-layout-gap-xl);
}
.columns-xxl {
gap: var(--space-l) var(--grid-layout-gap-xxl);
}
.column {
inline-size: clamp(400px, 33.3333% - var(--space-xxl), 50%);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.column-s {
inline-size: clamp(10rem, 50% - var(--space-xxl), 100%);
}
.column-m {
inline-size: clamp(400px, 50% - var(--space-xxl), 100%);
}
.column-l {
inline-size: 100%;
}
.compare-course-button {
position: absolute;
right: var(--space-l);
top: var(--space-l);
}
.compare-course-button .fa-heart {
color: var(--addtocompare-heart-color);
}
.compare-course-button .fa-circle {
color: var(--color-white);
}
/*
used on conjunction with `section section-xxs`
preview link https://www.ecu.edu.au/?evergageTestMessages=wzW8D
*/
.countdown-section {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 50em) {
.countdown-section {
padding-block: var(--space-s);
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-column-gap: 0.5rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
}
@media (min-width: 50em) {
.countdown-cta {
-webkit-margin-before: 0;
margin-block-start: 0;
}
}
.countdown-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
}
@media (min-width: 50em) {
.countdown-wrap {
gap: unset;
}
}
@media (min-width: 50em) {
.countdown-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
}
}
.countdown-number {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-weight: 500;
font-size: var(--font-heading-xs);
}
.countdown-title {
font-size: var(--font-s);
font-weight: 500;
-webkit-padding-end: 0.5rem;
padding-inline-end: 0.5rem;
-webkit-margin-before: -0.25rem;
margin-block-start: -0.25rem;
}
@media (min-width: 50em) {
.countdown-title {
-webkit-margin-before: 0;
margin-block-start: 0;
}
}
.countdown-title:last-of-type {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
.countdown-top,
.countdown-bottom,
.top-flip,
.bottom-flip {
block-size: 0.75em;
line-height: 1;
padding-block: 0.25em;
inline-size: 1.5em;
-ms-flex-item-align: center;
align-self: center;
overflow: hidden;
}
.countdown-bottom,
.bottom-flip {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.top-flip,
.bottom-flip {
position: absolute;
background-color: var(--component-background-color);
inline-size: 100%;
-webkit-animation: flip-top 250ms ease-in;
animation: flip-top 250ms ease-in;
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
@-webkit-keyframes flip-top {
100% {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
@keyframes flip-top {
100% {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
.bottom-flip {
bottom: 0;
-webkit-animation: flip-bottom 250ms ease-out 250ms;
animation: flip-bottom 250ms ease-out 250ms;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
@-webkit-keyframes flip-bottom {
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@keyframes flip-bottom {
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
[data-compare-courses] {
position: relative;
}
.course-compare-wrapper {
position: relative;
overflow: auto visible;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.course-compare-arrows {
position: inherit;
top: 5.625rem;
z-index: 5;
padding-inline: inherit;
-webkit-transition: top 0.5s var(--cubic-bezier);
transition: top 0.5s var(--cubic-bezier);
}
.course-compare-arrow {
position: absolute;
}
.course-compare-arrow .fa-circle {
color: var(--color-white);
}
.course-compare-arrow-start {
left: 0;
}
.course-compare-arrow-end {
right: 1rem;
}
.course-compare {
border-collapse: separate;
border-spacing: var(--space-l) 0;
text-align: start;
table-layout: fixed;
}
.course-compare-border-row:nth-child(2) {
height: var(--padding);
}
.course-compare-border-row > td {
-webkit-border-after: 0.125rem solid var(--color-primary);
border-block-end: 0.125rem solid var(--color-primary);
padding: 0;
}
.course-compare-heading-row {
display: none;
}
@media (min-width: 65em) {
.course-compare-heading-row {
display: table-row;
}
}
.course-compare-heading-row th {
padding-block: var(--space-s);
text-align: start;
}
.course-compare > tbody > tr > th[scope=row],
.course-compare > tbody > tr > th[scope=rowgroup] {
position: sticky;
left: -1px;
z-index: 2;
inline-size: 1rem;
background-color: var(--component-background-color);
}
@media (min-width: 65em) {
.course-compare > tbody > tr > th[scope=row],
.course-compare > tbody > tr > th[scope=rowgroup] {
inline-size: 13.75rem;
left: 0;
}
}
.course-compare-row-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--space-s);
margin-block: var(--space);
font-weight: 400;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: start;
}
.course-compare-row-title span {
display: none;
}
@media (min-width: 65em) {
.course-compare-row-title span {
display: inline;
}
}
.course-compare > tbody > tr > th[scope=col] {
position: sticky;
top: -1px;
z-index: 1;
inline-size: clamp(19.5rem, 16.6066rem + 11.1821vw, 23.875rem);
}
.course-compare-title {
position: relative;
vertical-align: bottom;
text-align: start;
block-size: 26.25rem;
-webkit-transition: block-size 0.5s var(--cubic-bezier);
transition: block-size 0.5s var(--cubic-bezier);
}
.course-compare-title .card-text {
block-size: 15.25rem;
}
.course-compare-title img {
-o-object-fit: cover;
object-fit: cover;
block-size: 11rem;
inline-size: 100%;
}
.course-compare-title .button {
-webkit-margin-before: auto;
margin-block-start: auto;
}
.course-compare-content {
padding-block: var(--space-l);
padding-inline: var(--padding);
vertical-align: top;
text-align: start;
}
.course-compare-content > * {
margin-block: 0;
}
.course-compare-content > * + * {
-webkit-margin-before: var(--space);
margin-block-start: var(--space);
}
.course-compare-add-more {
inline-size: min(23.875rem, 100%);
border: 0.125rem solid var(--color-black-050);
}
.course-compare-add-more a {
padding-block: var(--padding-l);
padding-inline: var(--padding);
text-decoration: none;
}
.courselist {
position: relative;
}
.courselist::after {
content: "* For selected courses/majors only. See the course webpage for further details.";
display: block;
position: relative;
margin-top: 1rem;
}
.developer-switcher-button {
position: fixed;
top: var(--space);
left: var(--space);
background-color: var(--color-teal-200);
color: var(--color-tertiary);
padding: var(--padding-xs);
border-radius: 50%;
z-index: 11; /* Sit above `header` (10) and `site-overlay` (9) */
}
.ecu-city-campaign {
padding: 0;
-webkit-padding-before: var(--padding-xs);
padding-block-start: var(--padding-xs);
padding-inline: var(--padding-xs);
background-size: auto;
background-color: var(--color-black);
background-position: top left;
}
@media (min-width: 64.0625em) {
.ecu-city-campaign {
-webkit-padding-before: 0;
padding-block-start: 0;
}
}
.ecu-city-campaign-wrapper {
display: grid;
margin-inline: auto;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-template-areas: "image" "content";
gap: 0 var(--padding-clamp-m);
}
@media (min-width: 64.0625em) {
.ecu-city-campaign-wrapper {
grid-template-columns: auto auto;
grid-template-rows: 1fr;
grid-template-areas: "content image";
}
}
@supports (-moz-appearance: none) {
@media (min-width: 64.0625em) {
.ecu-city-campaign-wrapper {
grid-template-columns: 1fr 1fr;
}
}
}
.ecu-city-campaign-content {
grid-area: content;
max-inline-size: 28.5rem;
padding-block: var(--padding-s);
justify-self: center;
text-shadow: var(--drop-shadow-text);
}
@media (min-width: 64.0625em) {
.ecu-city-campaign-content {
padding-block: var(--padding-m);
justify-self: end;
}
}
.ecu-city-campaign-image {
grid-area: image;
width: 100%;
max-inline-size: 28.5rem;
aspect-ratio: 1/1;
background-size: contain;
justify-self: center;
}
@media (min-width: 64.0625em) {
.ecu-city-campaign-image {
max-inline-size: unset;
height: 100%;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
-ms-flex-line-pack: end;
align-content: end;
justify-self: start;
}
}
/*
Events listing used homepage + throughout future students
Updated for Creative Thinkers, now runs through Super Content
@example html - Usage
*/
.event {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
block-size: 100%;
inline-size: 100%;
margin-inline: auto;
text-align: start;
}
.event-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 80%;
flex: 1 1 80%;
padding: var(--padding-xs);
}
@media (min-width: 64.0625em) {
.event-container {
padding: var(--padding);
}
}
.event-calendar {
padding-block: var(--space-s);
padding-inline: var(--padding-xs);
max-inline-size: 100%;
text-transform: uppercase;
font-weight: 500;
font-size: var(--font-heading-xs-mobile);
}
@media (min-width: 64.0625em) {
.event-calendar {
padding-block: var(--space);
padding-inline: var(--padding);
}
}
.event-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* prevent text from spilling underneath icon */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; /* center icon (prevent browser discrepancies) */
}
/*
Different layout for events slider, this applies to every page outside
of `/future-students/events`
*/
.event:not(.filtered-results-wrapper-events .event) {
max-inline-size: var(--measure);
}
@media (min-width: 64.0625em) {
.event:not(.filtered-results-wrapper-events .event) {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.event-calendar:not(.filtered-results-wrapper-events .event-calendar) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 6.375rem;
flex-basis: 6.375rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: var(--space-s);
text-align: center;
line-height: 1;
}
.event-day:not(.filtered-results-wrapper-events .event-day) {
font-size: 1rem;
font-weight: 400;
}
.event-date:not(.filtered-results-wrapper-events .event-date) {
font-size: var(--font-heading-s);
}
.event-month:not(.filtered-results-wrapper-events .event-month) {
font-size: var(--font-heading-xs);
}
}
.feature-text {
position: relative;
-webkit-border-start: var(--space-s) solid var(--color-black-050);
border-inline-start: var(--space-s) solid var(--color-black-050);
-webkit-padding-start: var(--space-l);
padding-inline-start: var(--space-l);
font-weight: 500;
-webkit-margin-before: var(--space-xl);
margin-block-start: var(--space-xl);
-webkit-margin-after: var(--space-l);
margin-block-end: var(--space-l);
}
.feature-panel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-inline-size), var(--grid-item-max-inline-size)), 1fr));
inline-size: 100%;
max-inline-size: 100%;
text-align: start;
}
.feature-panel picture {
max-inline-size: 100%;
}
.feature-panel picture img {
-o-object-fit: cover;
object-fit: cover;
block-size: 100%;
inline-size: 100%;
}
@media only screen and (width >= 47em) {
.feature-panel-reverse > picture {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; /* switches at default var(--grid-item-min-inline-size) */
}
}
.feature-panel .card-text {
-ms-flex-item-align: center;
align-self: center; /* centers text vertically, used on `offer` and `research-feature` on homepage + `/degrees/year-12-pathways` */
}
.leadGen__confirmation {
position: relative;
inline-size: 100%;
max-inline-size: none;
}
.leadGen__form,
.form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--space-l);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-inline-size: none;
}
@media (min-width: 37.5em) {
.leadGen__form,
.form {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
}
.form-close {
position: absolute;
top: calc(var(--section-block) * -1 + var(--padding));
right: 0;
z-index: 1;
margin: 0;
}
.header {
position: sticky;
z-index: 10; /* sits above `site-overlay`, nav/search and other items with higher z-index */
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-inline: var(--section-inline);
padding-block: var(--space);
-webkit-border-after: 0.125rem solid transparent;
border-block-end: 0.125rem solid transparent; /* add border to not change dom size on scroll */
-webkit-transition: top var(--transition-time) var(--cubic-bezier), border-color var(--transition-time) var(--cubic-bezier);
transition: top var(--transition-time) var(--cubic-bezier), border-color var(--transition-time) var(--cubic-bezier);
}
.header .button {
margin-inline: calc(var(--space) - 0.125rem); /* add extra space around primary button and account for button border */
}
@media (prefers-reduced-motion) {
.header {
position: relative;
}
}
.article-page .header {
border-block-end-color: var(--color-black-050);
}
.scroll-up .header, .overlay-open .header {
top: 0;
border-block-end-color: var(--color-black-050); /* differentiate on light bg */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top var(--transition-time) var(--cubic-bezier), border-color var(--transition-time) var(--cubic-bezier);
transition: top var(--transition-time) var(--cubic-bezier), border-color var(--transition-time) var(--cubic-bezier);
}
.scroll-down .header {
top: -100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.scroll-up .header, .scroll-down .header, .overlay-open .header {
padding-block: var(--space-s);
}
/* Show and hide items on mobile/ desktop */
.header-medium {
display: none;
}
@media (min-width: 50em) {
.header-medium {
display: block;
}
}
.header-large {
display: none;
}
@media (min-width: 65em) {
.header-large {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
/* Header logo
The inline-size affects the offset of `site-overlay`
*/
.header-logo {
-ms-flex-item-align: center;
align-self: center; /* needed for scroll */
inline-size: 5.6875rem; /* 91px */
-webkit-transition: inline-size var(--transition-time) ease-in-out;
transition: inline-size var(--transition-time) ease-in-out;
}
.header-logo img {
inline-size: 100%;
}
.scroll-up .header-logo, .scroll-down .header-logo, .overlay-open .header-logo {
inline-size: 4.375rem; /* shrink to 70px */
}
/* Site navigation, includes `header-menu`, compare apply, enquire, search and menu buttons. */
.header-nav {
gap: clamp(var(--space), 0.4153rem + 2.2599vw, var(--space-l)); /* generated using https://clamp.font-size.app/ 1rem @414px -> 1.5rem @768px */
-webkit-margin-before: var(--space);
margin-block-start: var(--space);
}
.scroll-up .header-nav, .scroll-down .header-nav, .overlay-open .header-nav {
-webkit-margin-before: 0;
margin-block-start: 0;
}
/* Menu that appears inside `header-nav` */
.header-menu {
gap: 3.5rem;
margin-block: 0.625rem; /* create space for tap target (0.625rem + 1.5rem + 0.625rem = 2.75rem/ 44px) */
-webkit-padding-start: 0;
padding-inline-start: 0;
font-weight: 500;
}
.header-menu a {
position: relative;
padding-block: 1rem;
text-decoration: none;
}
.header-menu a::after {
content: "";
display: block;
position: absolute;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
width: 0;
height: 0.25rem; /* 4px in Figma design */
-webkit-margin-before: var(--space-s);
margin-block-start: var(--space-s);
background-color: var(--color-primary);
}
.header-menu a.active::after {
width: 100%;
}
.header-menu-hidden {
display: none;
}
/* Hamburger menu */
.header-hamburger {
-webkit-transition-property: display;
transition-property: display;
-webkit-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.height-limited p {
display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
line-clamp: 5;
box-orient: vertical; /* stylelint-disable-line property-no-unknown */
overflow: hidden;
-ms-hyphens: auto;
hyphens: auto;
}
.height-limited input {
opacity: 0;
position: absolute;
pointer-events: none;
}
.height-limited input:checked + p {
line-clamp: unset;
}
.height-limited input:checked ~ label,
.height-limited p:not(.truncated) ~ label {
display: none;
}
/*
Hero banner, running across the top of a page, with a background image and content overlay.
- The hero is used on Campaign, Study, Newsroom, Extra and Courses pages.
- most instances are powered from Super Content CT, some are hardcoded in webCMS paint layouts
@example html
*/
.hero {
z-index: 2; /* sit above succeding sections that contain `after-hero` */
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-bottom-right-radius: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
padding-top: 54.55%; /* Campaign and Study use a standard 1920px x 1080px (16:9) ratio. Newsroom and Extra use a custom 1080px x 1980px ratio. Setting padding to 54.55% prevents display issues on Newsroom and Extra */
color: var(--component-text-color, var(--color-white));
}
.hero > * {
z-index: 1;
}
@media (min-width: 64.0625em) {
.hero {
border-bottom-right-radius: 0;
background-size: cover;
padding-block: var(--space) 4.25rem;
padding-inline: var(--section-inline);
background-position: center;
min-block-size: var(--component-inline-size-s);
}
}
.hero-courses {
-webkit-padding-before: 52.5%;
padding-block-start: 52.5%; /* Courses link directly to the Open Graph 1200px x 630px (1:1.9 ratio), using Squiz Var globals_frontend_asset_metadata_og-image */
}
@media (min-width: 64.0625em) {
.hero-courses {
-webkit-padding-before: var(--space);
padding-block-start: var(--space);
}
}
/* Hero inner */
.hero-content {
position: relative;
border-bottom-right-radius: 50px;
padding-block: var(--padding-xs) var(--hero-leaf); /* to align with figma */
padding-inline: var(--section-inline);
z-index: 1;
}
@media (min-width: 64.0625em) {
.hero-content {
max-inline-size: var(--hero-content-inline-size);
-webkit-margin-before: var(--space-s);
margin-block-start: var(--space-s);
padding-inline: var(--padding-s);
-webkit-padding-before: 2rem;
padding-block-start: 2rem; /* to align with figma */
}
}
/* Leaf element */
.hero-content::after {
content: "";
display: block;
position: absolute;
block-size: calc(1.0865 * var(--hero-leaf)); /* 81px & 88px */
inline-size: var(--hero-leaf);
bottom: 0;
right: 0;
z-index: 1;
background-image: url("data:image/svg+xml,
"); /* svgbackgrounds.com/tools/svg-to-css */
}
.hero-course-code {
font-size: var(--font-article);
}
.hero-campaign-text {
display: none;
}
@media (min-width: 64.0625em) {
.hero-campaign-text {
display: block;
position: absolute;
inline-size: 6.2986rem;
block-size: 3.5rem;
right: var(--section-inline);
bottom: 3rem;
background-image: url("data:image/svg+xml,
"); /* generated using svgbackgrounds.com/tools/svg-to-css */
-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
}
}
/* Used in site wide page header, create buttons for compare, enquire, search, menu */
.icon-button {
position: relative;
block-size: 2.75rem;
inline-size: 2.75rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none; /* Remove underline for anchor links */
}
.icon-inline-start {
-webkit-margin-end: var(--icon-space);
margin-inline-end: var(--icon-space);
}
.icon-inline-end {
-webkit-margin-start: var(--icon-space);
margin-inline-start: var(--icon-space);
}
/*
Use in conjunction with `list-style-none` to remove default list styles,
creates a flex container for the list items, and aligns them vertically.
Used in Footer (webCMS) and `src/js/modules/CourseCompareModule.js`
*/
.icon-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.ident-hero {
max-inline-size: none;
}
/*
Output course information inside accordion
Used on future student landing pages, study area and discipline templates
Powered with /src/js/modules/CourselistingModule.js
@example html
*/
.info-card-wrapper {
display: grid;
gap: var(--space);
grid-auto-rows: auto;
grid-template-columns: 100%;
}
@media (min-width: 50em) {
.info-card-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
.info-card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; /* ensures headings have succeeding content */
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
-webkit-border-start: var(--space-s) solid var(--color-primary);
border-inline-start: var(--space-s) solid var(--color-primary);
background-color: var(--color-ecru);
-webkit-transition: var(--transition);
transition: var(--transition);
}
.info-card a {
padding-block: 0.75rem var(--space); /* add extra block end padding to account for underlined text */
padding-inline: var(--space);
}
.background-ecru .info-card {
background-color: var(--color-white);
}
.info-card-tabs {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-border-after: 2px solid var(--color-black-050);
border-block-end: 2px solid var(--color-black-050);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.info-card-tabs small {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.3125rem var(--space) 0.25rem;
}
.info-card-tabs small:not(:first-of-type) {
-webkit-border-start: 2px solid var(--color-black-050);
border-inline-start: 2px solid var(--color-black-050);
}
/* ECU City flag
@example html
*/
.info-card-city {
padding: var(--space-s) var(--space);
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
-webkit-margin-before: auto;
margin-block-start: auto; /* push to bottom of info card */
max-inline-size: 100%; /* width extends over default var(--measure) prior to breakpoint */
}
.info-table {
--table-border-color: var(--color-primary);
border: 0;
inline-size: 100%;
}
.info-table tr {
-webkit-border-after: 0.125rem solid var(--table-border-color);
border-block-end: 0.125rem solid var(--table-border-color);
}
.info-table tr:last-of-type {
--table-border-color: transparent;
}
.info-table th,
.info-table td {
padding-inline: 0.375rem;
padding-block: 0.625rem;
}
.info-table th[scope=row] {
-webkit-padding-start: 0;
padding-inline-start: 0;
font-weight: 400;
text-align: start;
}
.info-table-availability {
font-size: var(--font-s);
font-weight: 500;
text-align: center;
inline-size: min(100%, 20rem);
}
.info-table-availability th[scope=row] {
-webkit-padding-start: 0;
padding-inline-start: 0;
font-weight: 500;
}
.info-table-availability th[scope=col] {
padding-block: 0 var(--space-s);
font-weight: 400;
inline-size: 33.3333333333%;
min-inline-size: 12ex;
}
.info-table-availability .info-table-location-heading {
-webkit-padding-start: 0;
padding-inline-start: 0;
text-align: start;
}
.info-table-study-method {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--space-s);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Generic component, used in conjunction with `background-*` classes */
.inline-rule {
inline-size: 100%; /* overrides default browser `hr` */
max-inline-size: 100%;
block-size: 0.125rem;
border: 0;
background-color: var(--component-background-color);
}
@media (min-width: 64.0625em) {
.inline-rule-desktop {
inline-size: 100%;
max-inline-size: 100%;
block-size: 0.125rem;
border: 0;
background-color: var(--component-background-color);
}
}
/*
inline menu wrapper
this is used on main menu (quicklinks on mobile) and newsroom/ category pages
@example html
*/
.inline-scroll-wrapper {
position: relative;
margin-inline: 0;
}
.inline-scroll-wrapper::before, .inline-scroll-wrapper::after {
content: "";
display: block;
position: absolute;
inline-size: var(--padding-xs);
block-size: 100%;
top: 0;
left: calc(var(--inline-scroll-element) * -1);
background-image: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(85%, var(--component-background-color)));
background-image: linear-gradient(to left, transparent, var(--component-background-color) 85%);
}
.inline-scroll-wrapper::after {
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(85%, var(--component-background-color)));
background-image: linear-gradient(to right, transparent, var(--component-background-color) 85%);
right: calc(var(--inline-scroll-element) * -1);
left: unset;
}
.inline-scroll {
inline-size: calc(100% + var(--inline-scroll-element) * 2);
margin-inline: calc(var(--inline-scroll-element) * -1);
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-scroll-snap-type: inline;
scroll-snap-type: inline;
white-space: nowrap;
}
/* Adjust pill-list when used inside an inline-scroll element */
.inline-scroll .pill-list {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: unset;
-ms-flex-pack: unset;
justify-content: unset;
margin-block: 0;
margin-inline: var(--inline-scroll-element);
max-inline-size: unset;
}
.loader {
-webkit-margin-before: 20vh;
margin-block-start: 20vh;
}
/*
Notification banner
@example html - Usage
*/
.notification {
position: relative;
display: grid;
grid-template-columns: 1fr -webkit-min-content;
grid-template-columns: 1fr min-content;
padding-inline: var(--section-inline);
padding-block: 0.75rem;
text-align: start;
z-index: 5;
}
.notification-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-self: center;
}
.notification-close {
--notifcation-close-spacing: 0.875rem;
justify-self: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: 0;
right: var(--section-inline);
margin-block: -1rem;
-webkit-margin-end: calc(var(--notifcation-close-spacing) * -1);
margin-inline-end: calc(var(--notifcation-close-spacing) * -1);
padding-block: 1.25rem;
padding-inline: var(--notifcation-close-spacing);
}
.notification-close:focus-visible {
outline-offset: -0.25rem;
}
.overlayContainer {
width: 100%;
max-width: var(--component-inline-size);
margin-right: auto;
margin-left: auto;
background-color: var(--color-black-600);
}
.overlayContainer iframe {
width: 100%;
}
.overlayContainer .button {
width: 100%;
border: 0;
margin: 0 0 1.5rem;
}
.overview-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--space) var(--padding-clamp-m);
}
.overview-wrapper > * {
-ms-flex-preferred-size: clamp(300px, 40% - var(--padding-clamp-m) / 2, 40% - var(--padding-clamp-m) / 2);
flex-basis: clamp(300px, 40% - var(--padding-clamp-m) / 2, 40% - var(--padding-clamp-m) / 2);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.overview {
display: block;
-webkit-column-width: 18rem;
-moz-column-width: 18rem;
column-width: 18rem;
-webkit-column-gap: var(--space);
-moz-column-gap: var(--space);
column-gap: var(--space);
-ms-flex-preferred-size: clamp(300px, 60% - var(--padding-clamp-m) / 2, 60% - var(--padding-clamp-m) / 2);
flex-basis: clamp(300px, 60% - var(--padding-clamp-m) / 2, 60% - var(--padding-clamp-m) / 2);
}
.overview-item {
-webkit-border-start: 0.5rem solid var(--color-primary);
border-inline-start: 0.5rem solid var(--color-primary);
padding-block: var(--padding-xs);
padding-inline: var(--padding-xs);
/* https://caniuse.com/mdn-css_properties_break-inside_multicol_context */
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid; /* > Firefox v65 */
break-inside: avoid-column; /* avoid content breaking between columns, > Firefox v92, not respected in Safari 3.1-17.2 */
}
/* Layout for course, unitset and CRICOS codes
@example html
*/
.overview-item-code {
margin-block: 0;
display: inline;
}
/* used on `src/js/modules/PersonaModalModule.js` to set residence status */
.persona-columns h3 {
margin-block: 0;
}
.persona-columns .button {
margin-inline: auto;
}
.persona-columns .column {
inline-size: clamp(314px, 50% - var(--space-xxl), 100%);
}
.persona-icon {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 0.25rem var(--space-s);
}
@media (min-width: 50em) {
.persona-icon {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.persona-icon svg {
font-size: 2rem;
}
@media (min-width: 50em) {
.persona-icon svg {
font-size: 3.25rem;
}
}
.preheader {
font-size: var(--font-s);
line-height: 1rem;
opacity: 1;
visibility: visible;
-webkit-transition: var(--transition-time) visibility ease-in-out, var(--transition-time) block-size ease-in-out, var(--transition-time) opacity ease-in-out;
transition: var(--transition-time) visibility ease-in-out, var(--transition-time) block-size ease-in-out, var(--transition-time) opacity ease-in-out;
}
.scroll-down .preheader, .scroll-up .preheader, .overlay-open .preheader {
opacity: 0;
visibility: hidden;
block-size: 0;
}
.preheader ul {
gap: var(--space-l);
margin-block: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.preheader a {
padding-block: var(--space);
text-decoration: none;
}
/* Main search form
Located in webCMS home [ecu.edua.au], Funnelback and search overlay
- webCMS `Landing page - Search Panel #1028865`
- Funnelback file `ecu-web/Profile-main/project.ftl`
- search overlay built using `src/js/modules/SearchEnquireModule.js`
*/
.search-form {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
inline-size: calc(100% + var(--section-inline) * 2);
max-inline-size: calc(100% + var(--section-inline) * 2);
margin-inline: calc(var(--section-inline) * -1);
}
@media (min-width: 50em) {
.search-form {
--component-background-color: var(--color-white);
inline-size: 100%;
max-inline-size: var(--component-inline-size-s);
margin-inline: auto;
}
}
.search-form-courses,
.search-form-courses + .search-suggestions-wrapper {
--component-inline-size-s: var(--component-inline-size); /* Figma is 680px, this is set to nearest existing value */
inline-size: 100%;
max-inline-size: var(--component-inline-size-s);
margin-inline: auto;
}
.search-form input:focus-visible,
.search-submit:focus-visible {
outline-offset: -0.125rem;
}
@media (min-width: 50em) {
.search-form input:focus-visible,
.search-submit:focus-visible {
outline-offset: 0.125rem;
}
}
.search-submit {
z-index: 1;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-ms-flex-preferred-size: 3.5rem;
flex-basis: 3.5rem;
-ms-flex-negative: 1;
flex-shrink: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.search-submit svg {
padding-inline: var(--space) var(--space-l);
}
/* matches style on .autocomplete__menu */
.search-suggestions-wrapper {
position: relative; /* matches `.autocomplete__menu--overlay` */
z-index: 1; /* sit above subsequent sections */
inline-size: calc(100% + var(--section-inline) * 2);
max-inline-size: calc(100% + var(--section-inline) * 2);
-webkit-margin-before: 0;
margin-block-start: 0; /* override any `stack` classes */
margin-inline: calc(var(--section-inline) * -1);
}
@media (min-width: 50em) {
.search-suggestions-wrapper {
inline-size: 100%;
max-inline-size: var(--component-inline-size-s);
margin-inline: auto;
}
}
.search-suggestions {
position: absolute; /* prevent distortions, matches `.autocomplete__menu--overlay` */
overflow-x: hidden;
max-block-size: 342px; /* matches `.autocomplete__menu` */
inline-size: 100%;
-webkit-box-shadow: var(--drop-shadow);
box-shadow: var(--drop-shadow);
-webkit-padding-before: var(--space);
padding-block-start: var(--space);
text-align: start;
}
.search-suggestions small {
margin-inline: var(--space-l);
}
.search-suggestions ul {
position: relative; /* needed to prevent screen issues, other styles on .autocomplete__menu */
inline-size: 100%;
margin-block: 0; /* override browser default `ul` */
-webkit-padding-start: 0;
padding-inline-start: 0; /* override browser default `ul` */
}
@media (min-width: 50em) {
.search-suggestions {
inset-block-start: var(--space-s);
}
}
.search-suggestions-option a {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.search-suggestions-option a,
.search-suggestions-option button {
padding-block: 0.75rem;
z-index: 1; /* allows focus state to sit above pseudo elements */
text-decoration: none;
}
.set-audience {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-block: 0;
padding-inline: 0;
list-style: none;
max-inline-size: 100%;
}
.set-audience li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
max-inline-size: 20rem;
}
@media (min-width: 37.5em) {
.set-audience {
padding-inline: var(--section-inline);
}
}
.set-audience input {
border: 0;
clip-path: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.set-audience label {
--set-audience-rectangle: 0.375rem;
--set-audience-triange: 0.625rem;
position: relative;
padding-block: var(--space);
padding-inline: var(--space-s);
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
inline-size: 100%;
-webkit-transition: background-color var(--transition-time) var(--cubic-bezier), font-weight var(--transition-time) var(--cubic-bezier);
transition: background-color var(--transition-time) var(--cubic-bezier), font-weight var(--transition-time) var(--cubic-bezier);
}
@media (min-width: 37.5em) {
.set-audience label {
padding: var(--padding-xs);
}
}
.set-audience label::before, .set-audience label::after {
content: "";
display: block;
position: absolute;
z-index: 4;
inline-size: 100%;
}
.set-audience label::before {
background-color: transparent;
bottom: 0;
left: 0;
height: var(--set-audience-rectangle);
-webkit-transition: background-color var(--transition-time) var(--cubic-bezier);
transition: background-color var(--transition-time) var(--cubic-bezier);
}
.set-audience label::after {
bottom: var(--set-audience-rectangle);
left: calc(50% - var(--set-audience-triange));
block-size: var(--set-audience-triange);
inline-size: calc(2 * var(--set-audience-triange));
background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 20 10%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M0 10H20L10 0L0 10Z%27 fill=%27%2326b298%27/%3E%3C/svg%3E");
visibility: hidden;
opacity: 0;
-webkit-transition: opacity var(--transition-time) var(--cubic-bezier);
transition: opacity var(--transition-time) var(--cubic-bezier);
}
.set-audience input:checked + label {
background-color: var(--color-tertiary);
font-weight: 500;
}
.set-audience input:checked + label::before {
background-color: var(--color-accent);
}
.set-audience input:checked + label::after {
visibility: visible;
opacity: 1;
}
.set-audience input:focus-visible + label {
outline: var(--space-xs) solid var(--color-focus-visible);
outline-offset: -0.25rem;
}
.set-audience-icon {
-webkit-margin-before: 0;
margin-block-start: 0;
font-size: 2.5rem;
-webkit-transition: color var(--transition-time) var(--cubic-bezier);
transition: color var(--transition-time) var(--cubic-bezier);
color: var(--color-teal-700);
}
.set-audience input:checked + label .set-audience-icon {
color: var(--color-accent);
}
/* Dynamic Viewport Units
Use dvh for the browser to adapt to the mobile device's hidden tabs while scrolling.
It works the similar way for width with dvw, lvw and svw units.
Google explanation video: https://youtu.be/Xy9ZXRRgpLk?t=982 */
.site-overlay {
position: fixed; /* prevents screen from scrolling beyound `site-overlay` */
inset: 4.5rem 0 0;
inline-size: 100vw;
min-block-size: calc(100dvh - 4.5rem); /* adapt to the mobile device's hidden tabs */
-webkit-transition: top 0.5s var(--cubic-bezier);
transition: top 0.5s var(--cubic-bezier);
z-index: 9;
}
@media (min-width: 64.0625em) {
.site-overlay:not(.site-overlay-search) {
inset-block-start: max(20vh, 4.5rem);
block-size: min(80vh, 100vh - 4.5rem);
}
}
/* Warning! Test any changes directly on your device
Test the quick links menu and opening/ closing menu tabs
local testing is available at https://{ip.address}:{port} (example https://10.200.46.14:8080)
*/
.site-overlay-inner {
block-size: 100%;
inline-size: 100vw;
overflow-y: auto;
}
/* Adjust layout on global menu, mobile view */
.site-overlay .inline-scroll-wrapper,
.site-overlay .inline-scroll,
.site-overlay .pill-list {
--inline-scroll-element: 0.75rem;
}
.site-overlay .inline-scroll-wrapper {
margin-inline: var(--inline-scroll-element);
}
.site-overlay .pill-list {
padding-block: var(--space-xl) var(--space);
}
/* Shown behind `site-overlay` */
.site-overlay-background {
position: fixed;
inset: 0; /* logical property for top, right, bottom, left */
block-size: 100dvh; /* dynamic view height */
z-index: 4;
}
.skipLinks {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -1;
}
.skipLinks:focus-visible, .skipLinks:active {
color: var(--color-white);
background-color: var(--color-black-800);
left: 50%;
top: 1rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 18rem;
height: auto;
overflow: auto;
padding: 0.5rem;
text-align: center;
z-index: 6;
}
.sticky-course-compare {
position: fixed;
z-index: 8;
bottom: var(--space-s);
left: var(--space-s);
padding-block: var(--space);
padding-inline: var(--space-s);
inline-size: auto;
max-inline-size: 5.5rem;
}
.sticky-course-compare span {
font-weight: 500;
font-size: var(--font-s);
line-height: 1rem;
}
.sticky-course-compare svg {
color: var(--addtocompare-heart-color);
}
@media (min-width: 37.5em) {
.sticky-course-compare {
inset: 25vh 0 auto auto;
}
}
/*
Used on home page
Content container template: In Page - Explore Study Areas #tbc
@example html
*/
.study-area-list {
display: grid;
gap: 0 var(--space-l);
grid-template-columns: 100%;
max-inline-size: 100%;
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style: none;
}
.study-area-list a {
position: relative;
inline-size: 100%;
max-inline-size: 100%;
padding-block: var(--space-s);
-webkit-padding-end: var(--space-l);
padding-inline-end: var(--space-l);
}
.study-area-list svg {
position: absolute;
inset-block-start: calc(50% - 0.5em);
inset-inline-end: 0;
}
@media (min-width: 37.5em) {
.study-area-list {
grid-template-columns: repeat(2, 1fr);
max-inline-size: 58.5rem;
margin-inline: auto;
}
}
@media (min-width: 64.0625em) {
.study-area-list {
grid-template-columns: repeat(3, 1fr);
}
}
.study-area-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
block-size: 4rem;
inline-size: 100%;
max-inline-size: 100%;
}
.study-area-list li:not(:last-of-type) {
-webkit-border-after: 0.125rem solid var(--color-black-050);
border-block-end: 0.125rem solid var(--color-black-050);
}
@media (min-width: 64.0625em) {
.study-area-list li:nth-last-of-type(2), .study-area-list li:nth-last-of-type(3) {
-webkit-border-after: 0;
border-block-end: 0;
}
}
.table-responsive {
inline-size: 100%;
overflow-x: auto;
}
.table {
inline-size: 100%;
max-inline-size: var(--container-inline-size);
/* table caption not output on all tables */
}
.table caption {
margin-block: 0 var(--space-s);
font-size: var(--font-heading-xxs); /* used as a de facto H4 element on Course and Unit Set pages */
font-weight: 500;
text-align: start;
}
.table th {
vertical-align: middle;
text-align: start;
}
.table td {
vertical-align: top;
}
.table .table__col {
min-inline-size: 10rem;
}
.table .unit,
.table .table__colNarrow {
min-inline-size: 7.3125em;
}
.table .points {
min-inline-size: 8.125em;
}
.table .unit,
.table .points {
inline-size: 20%;
}
.table .description {
inline-size: 60%;
min-inline-size: 16em;
}
.table-bordered th,
.table-bordered td {
border: 0.125rem solid var(--color-tertiary);
padding-block: 0.5625rem;
padding-inline: clamp(var(--space-s), 0.1693rem + 1.278vw, var(--space));
overflow-wrap: normal;
}
.table-bordered th {
background-color: var(--color-black-100);
}
.table-col-dates {
inline-size: 30%;
min-inline-size: 12.5rem;
}
.table-sort {
inline-size: 100%;
max-inline-size: var(--measure);
overflow-x: auto;
}
.table-sort th {
position: relative;
cursor: pointer;
}
.table-sort th::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0.5rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-width: 0 0.5rem 0.5rem;
border-style: solid;
border-color: var(--color-tertiary) transparent;
opacity: 0.4;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.table-sort th[aria-sort=ascending]::after {
border-bottom: 0;
border-width: 0.5rem 0.5rem 0;
border-color: var(--color-tertiary) transparent;
opacity: 1;
}
.table-sort th[aria-sort=descending]::after {
border-color: var(--color-tertiary) transparent;
opacity: 1;
}
.table-sort-title {
width: 60%;
min-width: 16em;
}
.table-sort-col {
width: 20%;
min-width: 20ex;
}
.tabs {
display: grid;
grid-template-areas: "tablist" "tabcontent";
grid-template-columns: 100%;
grid-template-rows: -webkit-min-content 1fr;
grid-template-rows: min-content 1fr;
block-size: 100%;
}
.tabs-navigation {
grid-template-areas: "tablist tablist" "tabcontent quicklinks";
grid-template-columns: 1fr calc(27ex + var(--section-inline) + var(--section-block-s));
block-size: 100%;
}
.tabs [role=tablist] {
grid-area: tablist;
background-color: var(--color-white);
-webkit-padding-start: var(--section-inline);
padding-inline-start: var(--section-inline);
margin: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0.25rem;
}
.tabs [role=tab] {
display: block;
-webkit-margin-after: 0;
margin-block-end: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
padding: 1rem var(--section-block-s);
text-decoration: none;
}
.tabs [role=tab][aria-selected=true] {
background-color: var(--color-ecru);
position: relative;
}
.tabs [role=tab]:focus-visible {
outline-offset: -0.5rem;
}
.tabs [role=tab][aria-selected=true]::after {
content: "";
background-color: var(--color-primary);
block-size: 0.25rem;
inline-size: calc(100% - 5rem);
position: absolute;
bottom: 0.25rem;
left: 2.5rem;
}
.tabs-navigation [role=tabpanel] {
padding-inline: calc(var(--section-inline) + var(--section-block-s)) var(--section-block-s);
}
.tabs [role=tabpanel] {
grid-area: tabcontent;
padding-block: var(--section-block-s);
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
grid-auto-rows: -webkit-min-content;
grid-auto-rows: min-content;
gap: var(--section-block-s);
overflow-y: scroll;
}
.tabs [role=tabpanel]:focus-visible {
outline-offset: -0.25rem;
}
.tabs-list ul {
list-style-type: none;
-webkit-padding-start: 0;
padding-inline-start: 0;
min-inline-size: 8rem;
}
.tab-quick-links {
grid-area: quicklinks;
position: relative;
padding-inline: var(--section-block-s) var(--section-inline);
padding-block: var(--section-block-s);
}
.tab-quick-links ul {
list-style-type: none;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.tab-quick-links li a {
display: block;
}
.tab-quick-links::before, .tab-quick-links::after {
display: none;
}
.tab-accordion {
inline-size: 100vw;
max-inline-size: 100vw;
margin: 0;
}
.tab-accordion .accordion-body-open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: auto;
padding: 1.5rem;
-webkit-transition: all 0.2s ease-in, padding 0s;
transition: all 0.2s ease-in, padding 0s;
gap: var(--section-block-s);
}
.tab-accordion .accordion-item {
max-inline-size: 100%;
}
.tab-accordion .accordion-title {
padding-inline: var(--space);
max-inline-size: 100%;
}
.tab-accordion .accordion-title::before {
right: 0.9rem;
}
.tab-accordion .accordion-title::after {
right: 1.25rem;
}
/* Student stories (testimonials), used throughout future students */
.testimonial {
display: grid;
gap: var(--space);
text-align: start; /* override `center` class on section */
padding-inline: 0.125rem; /* remove vertical line rendering issue */
}
@media (min-width: 37.5em) {
.testimonial {
grid-template-columns: repeat(2, 1fr);
gap: var(--padding-clamp-m);
}
}
.toolTip {
font-size: 1rem;
}
.toolTip svg {
color: var(--color-black-400);
}
.wrapper-aside {
position: relative;
}
@media (min-width: 65em) {
.wrapper-aside {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "content";
}
}
.wrapper-aside-inline-start .section {
-webkit-padding-start: var(--section-inline-with-panel);
padding-inline-start: var(--section-inline-with-panel);
}
.wrapper-aside-inline-end .section {
-webkit-padding-end: var(--section-inline-with-panel);
padding-inline-end: var(--section-inline-with-panel);
}
@media (min-width: 65em) {
.wrapper-content-sections {
grid-area: content;
}
}
.study-area-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--padding) var(--space-l);
}
@media (min-width: 50em) {
.study-area-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.video-grid {
--grid-item-min-inline-size: min(100%, 10rem);
display: grid;
gap: var(--grid-layout-gap);
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-inline-size), var(--grid-item-max-inline-size)), 1fr));
inline-size: 100%; /* set min 100% as used inside `center` parent */
}
/* Responsive YouTube videos (ratio 16:9)
Uses SVG play button in var(--color-primary)
*/
.videoResponsive {
position: relative;
inline-size: 100%; /* needed for `.center` parent, do not update without testing in modal! */
max-inline-size: 100%; /* override default var(--measure), required for Super Content URL loader */
overflow: hidden;
background: var(--color-black);
aspect-ratio: 16/9;
}
.videoResponsive iframe {
position: absolute;
inset: 0;
block-size: 100%;
max-inline-size: 100%; /* override default var(--measure), required for Super Content URL loader */
inline-size: 100%;
background: transparent;
}
.videoResponsive img {
-o-object-fit: cover;
object-fit: cover;
inset: 0;
margin: auto !important;
max-inline-size: 100%; /* override default var(--measure), required for Super Content URL loader */
inline-size: 100%; /* required where thumbnail is smaller than video area */
position: absolute;
border: 0;
cursor: pointer;
-webkit-transition: 0.4s all;
transition: 0.4s all;
}
.videoResponsive img:hover {
-webkit-filter: brightness(75%);
filter: brightness(75%);
}
.videoResponsive .play {
block-size: 4.5rem;
inline-size: 4.5rem;
inset-inline-start: 50%;
inset-block-start: 50%;
-webkit-margin-start: -2.25rem;
margin-inline-start: -2.25rem;
-webkit-margin-before: -2.25rem;
margin-block-start: -2.25rem;
position: absolute;
background-image: url("data:image/svg+xml,
");
cursor: pointer;
pointer-events: none; /* Prevent .play:hover affecting img:hover */
}
/* Responsive YouTube shorts (ratio 9:16)
Extends .videoResponsive
*/
.videoResponsive.video-vertical {
aspect-ratio: 9/16;
inline-size: 100%;
}
.videoResponsive.video-vertical img {
aspect-ratio: 9/16;
block-size: 100%; /* Required for Firefox else poster shown at 16/9 */
}
.video-vertical-wrapper {
position: relative;
inline-size: 100%;
max-inline-size: 400px; /* Required for Safari - do not use inline-size min() */
}
.video-vertical-caption {
position: absolute;
inset-block-end: var(--space);
inset-inline: var(--space);
padding: var(--space);
pointer-events: none;
margin-block: 0;
}
.gdprBanner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
color: var(--color-white);
padding: var(--padding) var(--section-inline);
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* Used in CareerFinderModule, NavigationModule and in webCMS
@example html
*/
.pill {
display: inline-block;
border: 0.125rem solid var(--component-background-color); /* set a default border */
border-radius: var(--space-l);
padding-block: 0.375rem; /* border + padding = creates a pill with tap targer of 40px */
padding-inline: 0.875rem;
white-space: nowrap;
text-decoration: none;
font-weight: 500;
}
.pill-border {
border-color: var(--component-text-color); /* change border colour */
}
.pill-s {
padding-block: 0.125rem;
padding-inline: 0.5rem;
font-size: var(--font-s);
}
.pill[disabled] {
--component-text-color: var(--component-disabled-text-color);
}
.pill-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: var(--space-s);
margin-block: var(--space-s);
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style-type: none;
}
@media (min-width: 65em) {
.section .pill-list-wide {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (min-width: 37.5em) {
.section .pill-list:not(.pill-list-wide) {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.feature-grid {
display: grid;
gap: var(--space-l);
grid-template-columns: 100%;
grid-template-rows: repeat(3, -webkit-min-content);
grid-template-rows: repeat(3, min-content);
inline-size: 100%;
text-align: start;
}
.apply {
grid-area: apply;
}
.offer {
grid-area: offer;
}
.scholarship {
grid-area: scholarship;
}
.research-introduction {
grid-area: research-introduction;
}
.research-feature {
grid-area: research-feature;
}
.feature-grid-apply {
grid-template-areas: "apply" "offer" "scholarship";
}
@media (min-width: 50em) {
.feature-grid-apply {
grid-template-areas: "apply offer" "scholarship scholarship";
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, -webkit-min-content);
grid-template-rows: repeat(2, min-content);
}
}
@media (min-width: 65em) {
.feature-grid-apply {
grid-template-areas: "apply offer" "apply scholarship";
gap: var(--padding-s);
}
}
.feature-grid-research {
grid-template-areas: "research-introduction" "research-feature" ".";
}
@media screen and (width >= 1220px) {
.feature-grid-research-corporate {
grid-template-areas: "research-introduction research-feature" "research-introduction .";
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(20rem, -webkit-min-content);
grid-template-rows: minmax(20rem, min-content);
gap: var(--padding-s);
}
}
.apply {
--grid-item-min-inline-size: min(100%, 24rem);
}
.offer {
--grid-item-min-inline-size: min(100%, 17.5rem);
}
.offer .card-text {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media (min-width: 50em) {
.offer .card-text {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
}
@media (min-width: 65em) {
.offer .card-text {
padding: var(--padding-s);
}
}
.scholarship {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 65em) {
.scholarship {
padding: var(--padding-s);
}
}
.research-feature {
--grid-item-min-inline-size: min(100%, 17.25rem);
}
.research-feature .card-text {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media (min-width: 37.5em) {
.research-feature .card-text {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
}
.research-secondary {
--grid-item-min-inline-size: min(100%, 14rem);
display: grid;
gap: var(--grid-layout-gap);
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-inline-size), var(--grid-item-max-inline-size)), 1fr));
}
.research-secondary img {
-o-object-fit: cover;
object-fit: cover;
inline-size: 100%;
}
@media (min-width: 37.5em) {
.research-secondary img {
block-size: 100%;
max-block-size: 8.25rem;
}
}
.apply .card-text,
.research-introduction .card-text {
-ms-flex-item-align: self-start;
align-self: self-start; /* override `.feature-panel .card-text` */
}
.signpost ul {
list-style: none;
-webkit-padding-start: 0;
padding-inline-start: 0;
text-align: start;
}
.content-panel-pathway {
z-index: 0;
}
.content-panel-pathway ul {
font-size: var(--font-s);
text-align: start;
}
.content-panel-pathway > div {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: center;
}
.content-panel-pathway > div:not(:first-of-type)::before, .content-panel-pathway > div:not(:last-of-type)::after {
content: "";
display: block;
position: absolute;
top: -1rem;
right: 0;
width: 100%;
height: 2rem;
background-color: var(--component-background-color);
}
.content-panel-pathway > div:not(:last-of-type)::after {
z-index: 1;
top: unset;
bottom: -0.9375rem;
clip-path: polygon(100% 0, 100% 15%, 50% 100%, 0 15%, 0 0);
}
@media (min-width: 50em) {
.content-panel-pathway > div {
-ms-flex-preferred-size: 33.3333333333%;
flex-basis: 33.3333333333%;
}
.content-panel-pathway > div:not(:first-of-type)::before, .content-panel-pathway > div:not(:last-of-type)::after {
height: 100%;
width: 2.0625rem;
bottom: 0;
top: 0;
}
.content-panel-pathway > div:not(:first-of-type)::before {
right: unset;
left: -1.0375rem;
}
.content-panel-pathway > div:not(:last-of-type)::after {
right: -1.0125rem;
clip-path: polygon(5% 0, 100% 50%, 5% 100%, 0 100%, 0 0);
}
}
/* Form styles for ECU Forms, very different to our development method, but this is temporary */
.ecu-forms fieldset {
margin: 0;
border: 0;
padding: 0;
}
.ecu-forms legend {
display: none;
}
.ecu-forms .form-group {
margin: 0;
inline-size: 100%;
}
.ecu-forms .control-label {
display: block;
font-size: 1.125rem;
-webkit-margin-before: var(--space);
margin-block-start: var(--space);
}
.ecu-forms .control-label.xSubmit {
border: 0;
clip-path: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
.ecu-forms .control-label.xSubmit:active, .ecu-forms .control-label.xSubmit:focus-visible {
clip-path: auto; /* 2 */
height: auto;
margin: 0;
overflow: visible;
position: static; /* 2 */
width: auto;
white-space: inherit;
}
.ecu-forms input[type=text], .ecu-forms input[type=email], .ecu-forms input[type=tel], .ecu-forms textarea {
display: inherit;
inline-size: 100%;
margin-inline: 0; /* Stack will set block margins */
border: 0;
padding-block: var(--space);
padding-inline: var(--padding-xs);
background-color: var(--color-white);
color: var(--color-black);
}
.ecu-forms select[multiple=multiple] {
display: inherit;
inline-size: 100%;
margin-inline: 0; /* Stack will set block margins */
border: 0;
padding-block: var(--space);
padding-inline: var(--padding-xs);
background-color: var(--color-white);
color: var(--color-black);
padding: 0;
}
.ecu-forms select[multiple=multiple] option {
padding: 1em;
}
.ecu-forms input[type=submit] {
display: inline-block;
position: relative;
-webkit-margin-before: var(--space);
margin-block-start: var(--space);
border: 0.125rem solid var(--color-primary);
padding-block: var(--space-s);
padding-inline: var(--space);
vertical-align: middle;
text-align: center;
text-decoration: none;
font-weight: 500;
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
}
.ecu-forms input[type=submit]:visited {
color: currentcolor;
}
.ecu-forms .pristine-error, .ecu-forms .form-error {
color: var(--color-error);
padding: 1rem 0;
font-size: 1.25rem;
}
.ecu-forms .pristine-error {
bottom: auto;
top: 0;
padding-top: 0;
right: 1rem;
width: 40%;
font-size: 0.9rem;
text-align: right;
}
.ecu-forms .has-danger input, .ecu-forms .has-danger textarea, .ecu-forms .has-danger select[multiple=multiple] {
border: 0.0625rem solid var(--color-error);
}
.ecu-forms label.radio {
display: block;
margin: var(--space-s) 0 0;
}
.ecu-forms label.radio.inline {
display: inline-block;
margin-right: 1rem;
}
.ecu-forms label.radio input {
margin-right: var(--space-s);
}
.ecu-forms .fa-star {
-webkit-margin-start: var(--icon-space);
margin-inline-start: var(--icon-space);
}
.securityNotification {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem 0;
border-top: 1px solid currentcolor;
border-bottom: 1px solid currentcolor;
}
.securityNotification__lock {
height: 3rem;
width: auto !important;
margin-right: 1rem;
}
.securityNotification ~ p {
margin-top: var(--space);
}
.fs-form-background {
margin: var(--space) 0 0;
}
@media (min-width: 65em) {
.fs-form-background {
max-width: 75vw;
}
}
@media (min-width: 90em) {
.fs-form-background {
max-width: 50vw;
}
}
.remove-from-view {
border: 0;
clip-path: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
.remove-from-view:active, .remove-from-view:focus-visible {
clip-path: auto; /* 2 */
height: auto;
margin: 0;
overflow: visible;
position: static; /* 2 */
width: auto;
white-space: inherit;
}
.formSubmission {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.formSubmission .span7 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
@media (min-width: 65em) {
.formSubmission .span7 {
-ms-flex-preferred-size: 55%;
flex-basis: 55%;
}
}
.formSubmission .span5 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
@media (min-width: 65em) {
.formSubmission .span5 {
-ms-flex-preferred-size: 45%;
flex-basis: 45%;
}
}
.formSubmission .custom-shares {
margin: 1rem 0;
}
.formSubmission .custom-shares ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.formSubmission .custom-shares li {
margin: 0 0.5em;
}
.formSubmission .open-day-facebook {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.formSubmission .open-day-facebook h3 {
width: 100%;
}
.formSubmission .open-day-facebook svg {
margin-right: 1rem;
}
.formSubmission .open-day-info ul {
list-style: none;
padding: 0;
}
.ecu-forms .form-half-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (min-width: 37.5em) {
.ecu-forms .form-group-half {
width: calc(50% - 1rem);
}
}
.ecu-forms .radioWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 1rem;
}
.ecu-forms .radioWrapper label {
margin-left: 1rem;
}
.ecu-forms .eventType {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.ecu-forms .eventType label {
margin-right: 1rem;
}
.ecu-forms .noSessionWarning strong {
font-size: 1.125rem;
}
.ecu-forms .checkbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: var(--space) 0 0;
}
.ecu-forms .checkbox input[type=checkbox] {
opacity: 1;
width: auto;
height: auto;
margin: 0.25rem 0.5rem 0 0;
}
.ecu-forms .checkbox label {
position: relative;
display: inline-block;
padding-left: 2rem;
}
.ecu-forms .checkbox input[type=checkbox]:focus-visible ~ label {
outline: 0.25rem solid var(--color-focus-visible);
outline-offset: 0.25rem;
}
.link-tree {
-webkit-padding-after: var(--padding-clamp-m);
padding-block-end: var(--padding-clamp-m);
min-height: 100vh;
}
.link-tree main {
inline-size: 70vw;
max-inline-size: var(--measure);
}
.link-tree .links {
list-style: none;
inline-size: 100%;
max-inline-size: 100%;
padding: 0;
}
.link-tree .button {
inline-size: 100%;
}
.link-tree-logo {
inline-size: 7rem;
}
.link-tree-social-icons {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--space);
-webkit-padding-start: 0;
padding-inline-start: 0;
font-size: 1.5rem;
}
/* Search hero banner */
.section-search-banner {
-webkit-padding-after: 0;
padding-block-end: 0;
}
@media (min-width: 50em) {
.section-search-banner {
--component-background-color: var(--color-black);
--component-text-color: var(--color-white);
-webkit-font-smoothing: antialiased; /* WebKit (caniuse.com/font-smooth) */
-moz-osx-font-smoothing: grayscale; /* Firefox (caniuse.com/font-smooth) */
-webkit-padding-after: var(--section-block-s);
padding-block-end: var(--section-block-s);
}
}
.section-search-banner h1 {
border: 0;
clip-path: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
line-height: 0;
}
.section-search-banner h1:active, .section-search-banner h1:focus-visible {
clip-path: auto; /* 2 */
height: auto;
margin: 0;
overflow: visible;
position: static; /* 2 */
width: auto;
white-space: inherit;
}
@media (min-width: 50em) {
.section-search-banner h1 {
display: block;
clip-path: rect(0 0 0 0);
height: unset;
margin: unset;
overflow: hidden;
position: relative;
width: unset;
white-space: inherit;
line-height: var(--font-heading-l-line-height);
}
}
.section-search-banner .search-form {
margin-inline: calc(var(--section-inline) * -1);
inline-size: unset;
max-inline-size: calc(100% + var(--section-inline) * 2);
}
@media (min-width: 50em) {
.section-search-banner .search-form {
--component-background-color: var(--color-white);
inline-size: 100%;
max-inline-size: var(--component-inline-size-s);
-webkit-margin-before: var(--space-l);
margin-block-start: var(--space-l);
margin-inline: auto;
}
}
.section-search-banner input:focus-visible,
.section-search-banner .search-submit:focus-visible {
outline-offset: -0.125rem;
}
@media (min-width: 50em) {
.section-search-banner input:focus-visible,
.section-search-banner .search-submit:focus-visible {
outline-offset: 0.125rem;
}
}
.section-search-banner .search-suggestions-wrapper {
inline-size: calc(100% + var(--section-inline) * 2);
margin-inline: calc(var(--section-inline) * -1);
}
@media (min-width: 50em) {
.section-search-banner .search-suggestions-wrapper {
inline-size: 100%;
margin-inline: auto;
}
}
/* Search body section
Add overlay when search is open, applied in `js/modules/AutocompleteModule` */
.section-search-body {
padding-block: 0 var(--padding-clamp-l); /* no padding on top */
}
.section-search-body::after,
.site-footer::after {
-webkit-transition: background-color 400ms var(--cubic-bezier);
transition: background-color 400ms var(--cubic-bezier); /* slow transition out of search-page-active */
}
.search-page-active .section-search-body::after,
.search-page-active .site-footer::after {
content: "";
display: block;
position: absolute;
inset: 0;
background-color: var(--color-ecru);
-webkit-transform: background-color 400ms var(--cubic-bezier);
transform: background-color 400ms var(--cubic-bezier);
}
@media (min-width: 50em) {
.search-page-active .section-search-body::after,
.search-page-active .site-footer::after {
background-color: var(--color-black);
opacity: 0.8;
}
}
/* Career Finder hero */
.career-finder-hero {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (min-width: 64.0625em) {
.career-finder-hero {
padding-block: var(--space) 4.25rem;
padding-inline: var(--section-inline);
min-block-size: var(--component-inline-size-s);
}
}
.career-finder-hero-image {
position: relative;
-webkit-margin-before: var(--padding);
margin-block-start: var(--padding);
background-size: contain;
background-position: bottom;
block-size: var(--hero-banner-block-size); /* 1080/1980 = 54.55% */
}
@media (min-width: 64.0625em) {
.career-finder-hero-image {
position: absolute;
block-size: calc(100% - 2rem);
inline-size: min(80%, 30rem);
inset-inline-start: var(--hero-banner-block-size);
-webkit-margin-before: 0;
margin-block-start: 0;
}
}
.career-finder-hero::before {
content: "";
display: block;
position: absolute;
background-image: url("data:image/svg+xml,
");
background-position: bottom center;
background-size: contain;
inset-block-start: var(--padding);
inset-inline-end: 0;
inline-size: 100vw;
block-size: var(--hero-banner-block-size); /* 1080/1980 = 54.55% */
}
@media (min-width: 64.0625em) {
.career-finder-hero::before {
block-size: 75%;
inset-block-start: unset;
inset-block-end: 0;
}
}
.career-finder-content {
margin-block: auto;
background-color: var(--color-ecru);
padding-inline: var(--section-inline);
padding-block: var(--padding-s);
z-index: 1;
}
@media (min-width: 64.0625em) {
.career-finder-content {
background-color: transparent;
padding-inline: 0;
max-inline-size: var(--hero-content-inline-size);
}
}
.career-finder-results {
display: grid;
gap: var(--padding);
grid-template-columns: 100%;
}
.career-finder-results > div {
block-size: -webkit-fit-content;
block-size: -moz-fit-content;
block-size: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (min-width: 65em) {
.career-finder-results {
grid-template-columns: repeat(auto-fit, minmax(17.25rem, 1fr));
-webkit-margin-before: var(--space);
margin-block-start: var(--space);
}
}
@media (min-width: 65em) {
.career-finder-results > div:nth-of-type(1) {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-margin-before: -1rem;
margin-block-start: -1rem;
}
}
@media (min-width: 65em) {
.career-finder-results > div:nth-of-type(2) {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
@media (min-width: 65em) {
.career-finder-results > div:nth-of-type(3) {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
}
.career-finder-matches {
position: relative;
margin-inline: auto;
-webkit-margin-after: var(--space-l);
margin-block-end: var(--space-l);
padding-block: var(--padding);
padding-inline: var(--space-l);
text-align: center;
max-inline-size: min(100% - 2 * var(--space-l), 63.75rem);
}
.career-finder-matches::after {
content: "";
position: absolute;
bottom: calc(var(--space-l) * -1 + 1px);
left: 50%;
inline-size: calc(var(--space-l) * 2);
block-size: var(--space-l);
margin-left: calc(var(--space) * -1);
background-color: var(--component-background-color);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.career-finder-highlight {
padding-block: var(--space);
padding-inline: var(--padding);
}
.career-finder-best-match .career-finder-highlight svg {
color: var(--color-web-yellow);
}
.career-finder-featured {
margin-inline: var(--padding);
}
.career-finder-featured hr {
border-color: var(--color-black-700);
border-style: solid;
inline-size: 100%;
max-inline-size: 100%;
}
.career-finder-featured-job {
font-size: var(--font-s);
}
.career-finder-course-details li:not(:last-of-type) {
-webkit-padding-after: var(--space);
padding-block-end: var(--space);
-webkit-border-after: 0.125rem solid var(--color-black-700);
border-block-end: 0.125rem solid var(--color-black-700);
}
.career-finder-footnotes {
text-align: start;
}
.career-finder-wrapper {
background-image: url("https://www.ecu.edu.au/__data/assets/image/0007/1037599/career-finder-bg-patten.png"), -webkit-gradient(linear, left top, left bottom, from(var(--color-tertiary)), to(var(--color-tertiary)));
background-image: url("https://www.ecu.edu.au/__data/assets/image/0007/1037599/career-finder-bg-patten.png"), linear-gradient(var(--color-tertiary), var(--color-tertiary));
background-repeat: no-repeat, repeat;
block-size: 100vh;
}
.career-finder-wrapper iframe {
max-inline-size: unset;
}
/* Event landing page
Event data is coupled to Try Booking API
*/
.card-try-booking {
display: grid;
gap: var(--space);
grid-template-columns: 100%;
}
.card-try-booking [disabled] {
color: var(--color-black-200);
}
@media (min-width: 37.5em) {
.card-try-booking {
grid-template-columns: 1fr auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.try-booking-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: var(--space);
grid-template-columns: 1fr auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.try-booking-details > * {
margin-block: 0; /* apply margins using gap */
}
@media (min-width: 37.5em) {
.try-booking-details {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.choose-form {
inline-size: var(--measure);
max-inline-size: calc(100vw - var(--padding-xs) * 2);
margin-inline: auto;
/* Updates to Auto Complete results */
}
.choose-form > div {
inline-size: 100%;
}
.choose-form label {
text-align: center;
}
.choose-form input {
block-size: 3.5rem; /* force height for autocomplete input */
background-color: var(--color-ecru);
}
.choose-form .disabled {
color: var(--component-disabled-text-color);
}
.choose-form .autocomplete__menu {
inline-size: 100%; /* override `autocomplete__menu` set in main theme, this input does not have a search button */
}
.choose-form .autocomplete-category {
inline-size: 14ch; /* widen to account for longer phrases (Study Area, Study Interest */
text-align: end;
}
.course-selector-card-list {
display: grid;
gap: var(--space-l);
}
@media (min-width: 37.5em) {
.course-selector-card-list {
grid-template-columns: 1fr 1fr;
}
}
.course-selector-card-list .info-table-availability th[scope=row] {
min-inline-size: 11ch;
}
.course-selector-card-list .info-table {
--table-border-color: var(--color-black-200);
}
@media (min-width: 37.5em) {
.course-selector-card-list-span {
grid-column: 1/3;
}
}
.article-feature-image {
max-inline-size: var(--article-inline-size);
margin-block: 0;
margin-inline: var(--section-inline-corporate);
}
.article-feature-image small {
text-align: start;
max-inline-size: unset;
}
.article-header {
max-inline-size: var(--container-inline-size);
}
.article-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0 var(--space-l);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.article-meta p {
margin-block: 0;
}
/*
Article social media links + share count
@example html
*/
.article-social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--space);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.article-social ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--space-l);
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style: none;
}
.article-read-time {
position: relative;
-webkit-margin-start: 0.75rem;
margin-inline-start: 0.75rem;
}
.article-read-time::before {
content: "";
display: block;
position: absolute;
background-image: url("data:image/svg+xml,
");
block-size: 0.25rem;
inline-size: 0.25rem;
left: -0.625rem;
top: 0.5rem;
}
/* Aricle Columns
Displays small article excerpts on Newsroom Category page
the articles inside `article-columns` use a pseudo element for a top border
and use transform to reposition the themselves in the correct position
based on https://medium.com/@mandy.michael/you-dont-need-a-media-query-for-that-1-inline-content-separators-a9c562a597a6
The column layout is built using Macy.js, controlled in `/src/js/modules/MacyModule.js`
*/
.article-columns {
overflow-y: hidden;
/*
create a pseudo border element and use transform to reposition
in the correct place
based on https://medium.com/@mandy.michael/you-dont-need-a-media-query-for-that-1-inline-content-separators-a9c562a597a6
*/
}
.article-columns > article {
-webkit-transform: translateY(calc(var(--space-l) * -1));
transform: translateY(calc(var(--space-l) * -1));
-webkit-padding-before: var(--space-l);
padding-block-start: var(--space-l);
}
.article-columns > article::before {
content: "";
display: block;
position: relative;
top: calc(var(--space-l) * -1);
block-size: 0.125rem;
background-color: var(--color-black-050);
}
/* styling for articles that are added in using the "more articles" button */
.article-additional {
-webkit-transition: var(--transition-s);
transition: var(--transition-s);
padding-block: var(--space-l); /* required for Chrome and Firefox */
}
/* Generic classes so that web editors can write directly inside webCMS WYSIWYG */
.article-content {
font-size: var(--font-article);
/** Increase spacing for content container elements
Content Container Templates
* In Page - Image Gallery #898913
* In Page - Image #936146
* In Page - Infographics #933075
* In Page - Video #932928
@example html
{media}
{caption}
*/
/* Replicate heading styles for WYSIWYG H2, H3, and H4 elements */
}
.article-content .alert-inline,
.article-content .button-group,
.article-content .content-panel {
font-size: 1rem;
font-weight: 400;
}
.article-content > * + .alert-inline,
.article-content > * + .article-media,
.article-content > * + .button-group,
.article-content > * + .content-panel,
.article-content > * + h2,
.article-content > * + h3,
.article-content > * + h4 {
-webkit-margin-before: var(--space-l);
margin-block-start: var(--space-l);
}
.article-content .article-media {
-webkit-margin-after: var(--space-s);
margin-block-end: var(--space-s);
}
.article-content h2 {
font-size: var(--font-heading-m);
line-height: var(--font-heading-m-line-height);
}
.article-content h3 {
font-size: var(--font-heading-s);
line-height: var(--font-heading-s-line-height);
}
.article-content h4 {
font-size: var(--font-heading-xs);
line-height: var(--font-heading-xs-line-height);
}
/* Stack spacing for content hub layouts,
newsroomCategory #1050968
*/
@media (min-width: 37.5em) {
.stack-category > * + * {
--stack: var(--space-xxl); /* pairs with `stack stack-xl` used on Newsroom category and Extra pillar */
}
}
/*
Add padding and border on select cards to replicate `.inline-rule`
Variation that displays until tablet
*/
@media (max-width: 37.5em) {
.child-has-inline-rule-s-category > article,
.child-has-inline-rule-s > article:not(:last-of-type) {
-webkit-padding-after: var(--space-l);
padding-block-end: var(--space-l);
-webkit-border-after: 0.125rem solid var(--color-black-050);
border-block-end: 0.125rem solid var(--color-black-050);
}
}
.articles-grid-content-hub {
display: grid;
gap: var(--grid-layout-gap);
grid-template-columns: 100%;
}
@media (min-width: 65em) {
.articles-grid-content-hub-featured {
grid-template-columns: 1fr 0.125rem 1fr;
grid-template-rows: 100%;
}
}
@media (min-width: 50em) {
.articles-grid-content-hub-1 {
grid-template-columns: 1fr 0.125rem max(var(--component-inline-size-xs), 40%);
grid-template-rows: 100%;
}
}
@media (min-width: 50em) {
.articles-grid-content-hub-2 {
grid-template-columns: max(var(--component-inline-size-xs), 25%) 0.125rem 1fr;
grid-template-rows: 100%;
}
}
@media (min-width: 50em) {
.articles-grid-content-hub-3 {
grid-template-columns: 1fr 0.125rem max(var(--component-inline-size-xs), 40%);
grid-template-rows: 100%;
}
}
@media (min-width: 65em) {
.articles-grid-content-hub-4 {
grid-template-columns: 1fr 0.125rem 1fr;
grid-template-rows: 100%;
}
}
@media (min-width: 50em) {
.articles-grid-content-hub-5 {
grid-template-columns: 1fr 0.125rem min(var(--component-inline-size-xs), 25%);
grid-template-rows: 100%;
}
}
@media (min-width: 37.5em) {
.articles-grid-content-hub-s {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 100%;
}
}
.articles-grid-span {
inline-size: 100%;
max-inline-size: 100%;
block-size: 0.125rem;
border: 0;
background-color: var(--component-background-color);
}
@media (min-width: 50em) {
.articles-grid-span-s {
inline-size: 0.125rem;
block-size: 100%;
}
}
@media (min-width: 65em) {
.articles-grid-span-l {
inline-size: 0.125rem;
block-size: 100%;
}
}
.card-feature-grid-supplementary {
--grid-item-min-inline-size: min(100%, 12rem);
display: grid;
gap: var(--grid-layout-gap);
/* stylelint-disable max-nesting-depth */
/* stylelint-enable max-nesting-depth */
}
@media (min-width: 37.5em) {
.card-feature-grid-supplementary {
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-inline-size), var(--grid-item-max-inline-size)), 1fr));
}
}
@media (min-width: 90em) {
.card-feature-grid-supplementary img {
aspect-ratio: 4/3;
-o-object-fit: cover;
object-fit: cover;
}
}
/* Used on Extra Pillar and Themes when there is only one article */
.card-extra-single-article {
display: grid;
gap: var(--grid-layout-gap-xl); /* match gap used in extra articles grid */
}
@media (min-width: 37.5em) {
.card-extra-single-article {
grid-template-columns: repeat(2, 1fr);
}
}
.card-inline {
display: grid;
gap: var(--grid-layout-gap);
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-inline-size), var(--grid-item-max-inline-size)), 1fr));
}
@media (min-width: 37.5em) {
.card-inline {
grid-template-columns: min(35%, var(--component-inline-size-xs)) 1fr;
}
}
.card-floated-image > img {
inline-size: clamp(7.0625rem, 35%, 10rem);
float: right;
-webkit-margin-start: var(--space);
margin-inline-start: var(--space);
-webkit-margin-after: var(--space-s);
margin-block-end: var(--space-s);
}
.card-floated-image > * {
margin-block: 0;
}
.card-floated-image > p {
-webkit-margin-before: var(--space);
margin-block-start: var(--space);
}
.card-floated-image > small {
display: block;
-webkit-margin-after: var(--space-s);
margin-block-end: var(--space-s);
}
@media (min-width: 37.5em) {
.card-floated-image-s {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.card-floated-image-s > img {
inline-size: 100%;
float: none;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-after: var(--space);
margin-block-end: var(--space);
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
@media (max-width: 37.5em) {
.card-floated-image-l {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.card-floated-image-l > img {
inline-size: 100%;
float: none;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-after: var(--space);
margin-block-end: var(--space);
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.card-article-authors {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--grid-layout-gap);
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.card-article-authors img {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-inline-size: 6.25rem;
}
/* Generic layout for extra articles grid, changes at mobile size
This layout is designed to adapt the grid structure for different screen sizes,
ensuring optimal presentation of articles in the content hub.
Used as a base class for specific article counts.
*/
.extra-articles-grid {
display: grid;
gap: var(--grid-layout-gap-xl); /* default gap, overwritten for 4, 5 & 6 article layouts */
grid-template-columns: 100%;
}
@media (min-width: 37.5em) {
.extra-articles-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Category with 3 articles */
.extra-3-articles-grid {
/* stylelint-disable max-nesting-depth */
/* stylelint-enable max-nesting-depth */
}
@media (min-width: 37.5em) {
.extra-3-articles-grid {
grid-template-areas: "article-1 article-1" "article-2 article-3";
}
.extra-3-articles-grid > :first-child {
grid-area: article-1;
}
.extra-3-articles-grid > :nth-child(2) {
grid-area: article-2;
}
.extra-3-articles-grid > :nth-child(3) {
grid-area: article-3;
}
}
@media (min-width: 65em) {
.extra-3-articles-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "article-1 article-2 article-3";
}
}
/* Category with 4 articles */
.extra-4-articles-grid {
gap: var(--grid-layout-gap); /* reduce gap for 4 article layout to match Figma */
}
@media (min-width: 65em) {
.extra-4-articles-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Category with 5 articles */
.extra-5-articles-grid {
gap: var(--grid-layout-gap); /* reduce gap for 5 article layout to match Figma */
/* stylelint-disable max-nesting-depth */
/* stylelint-enable max-nesting-depth */
}
@media (min-width: 37.5em) {
.extra-5-articles-grid {
grid-template-areas: "article-1 article-1" "article-2 article-3" "article-4 article-5";
}
.extra-5-articles-grid > :first-child {
grid-area: article-1;
}
.extra-5-articles-grid > :nth-child(2) {
grid-area: article-2;
}
.extra-5-articles-grid > :nth-child(3) {
grid-area: article-3;
}
.extra-5-articles-grid > :nth-child(4) {
grid-area: article-4;
}
.extra-5-articles-grid > :nth-child(5) {
grid-area: article-5;
}
}
@media (min-width: 65em) {
.extra-5-articles-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: "article-1 article-1 article-1 article-2 article-2 article-2" "article-3 article-3 article-4 article-4 article-5 article-5";
}
}
/* Category with 6 articles */
.extra-6-articles-grid {
gap: var(--grid-layout-gap); /* reduce gap for 6 article layout to match Figma */
}
@media (min-width: 65em) {
.extra-6-articles-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.key-points h2 {
font-size: var(--font-article);
}
.key-points ul {
list-style-type: square;
}
.block-end {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.avatar {
inline-size: 3rem;
block-size: 3rem;
border-radius: 100%;
text-align: center;
background-color: var(--color-black-700);
color: var(--component-text-color);
overflow: hidden;
border: var(--space-xs) solid var(--color-black-700);
}
.avatar-icon {
block-size: var(--space-xl);
-webkit-padding-before: var(--space-s);
padding-block-start: var(--space-s);
}
.avatar-icon.fa-user {
-webkit-padding-before: var(--space-s);
padding-block-start: var(--space-s);
}
.avatar span {
line-height: var(--space-xl);
}
/*
* .button-open-day-plan used on Open Day dashboard for 'Edit my plan', and 'Create a plan' buttons.
* Also used on suggested plans - last item 'Create a plan' button
*/
.button-open-day-plan {
border: 0.125rem dashed var(--color-black-050);
padding-block: var(--space-m);
padding-inline: var(--space-l);
inline-size: auto;
-webkit-transition: 0.2s all ease-in-out;
transition: 0.2s all ease-in-out;
}
@media (hover) {
.button-open-day-plan:hover {
border-color: var(--color-black-100);
border-style: solid;
background-color: var(--color-black-800);
}
}
/*
* This additional margin allows the 'Create a plan' button to be in line with the 'Edit my plan' button
* These buttons are placed in cards using .block-end which justify-content: space-between;
* 'Edit my plan' button has an additional text link below, hence the need for the additonal margin
*/
@media (min-width: 50em) {
.button-create-plan {
-webkit-margin-after: 2.4rem;
margin-block-end: 2.4rem;
}
}
.card-full-width {
grid-column-start: 1;
grid-column-end: -1;
max-inline-size: none;
}
.dashboard-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--space-xl);
}
@media (min-width: 50em) {
.dashboard-panel {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /* center display when there is only one event */
}
}
@media (min-width: 50em) {
.dashboard-panel .card {
-webkit-box-flex: 1;
-ms-flex: 1 1 33%;
flex: 1 1 33%; /* improve display when there are two, rather than three events */
}
}
.filtered-plans-panel {
-webkit-margin-before: var(--space-m);
margin-block-start: var(--space-m);
}
@media (min-width: 64.0625em) {
.filtered-plans-panel {
-webkit-margin-before: var(--space-s);
margin-block-start: var(--space-s);
}
}
.filtered-results-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
row-gap: 1rem;
}
@media (min-width: 50em) {
.filtered-results-nav {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: var(--padding);
}
}
/* override default `button` media query */
.filtered-results-nav .button {
inline-size: 100%;
}
@media (min-width: 50em) {
.filtered-results-nav .button {
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
}
}
@media (min-width: 64.0625em) {
.filter-open-day-button {
display: none;
}
}
.loading-state {
position: fixed;
top: 0;
left: 0;
inline-size: 100%;
block-size: 100%;
background-color: hsla(207, 100%, 8%, 0.8);
z-index: 9999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--color-white);
}
.loading {
inline-size: var(--space-xxl);
block-size: var(--space-xxl);
border-radius: 50%;
border: 10px solid var(--color-white);
border-top-color: var(--color-primary);
-webkit-animation: loading 1s linear infinite;
animation: loading 1s linear infinite;
}
@-webkit-keyframes loading {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.open-day-header {
display: grid;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
grid-template-columns: 0 auto var(--padding-l) 0;
grid-template-rows: auto;
grid-template-areas: ". steps steps ." ". title avatar ." ". text avatar .";
row-gap: var(--space-m);
}
@media (min-width: 37.5em) {
.open-day-header {
grid-template-columns: var(--padding-m) auto auto var(--padding-m);
grid-template-areas: ". steps steps avatar" ". title title avatar" ". text text .";
}
}
.open-day-header-steps {
grid-area: steps;
}
.open-day-header-title {
grid-area: title;
}
.open-day-header-text {
grid-area: text;
}
.open-day-header-avatar {
grid-area: avatar;
}
@media (min-width: 37.5em) {
.open-day-header-title,
.open-day-header-text {
text-align: center;
margin-inline: auto;
max-width: 46rem;
}
}
.open-day-header-text p {
max-inline-size: none;
}
.open-day-header-avatar {
justify-self: end;
}
.open-day-header-avatar button {
-webkit-border-after: 1px solid var(--component-text-color);
border-block-end: 1px solid var(--component-text-color);
}
.open-day-header-avatar button:hover {
border-block-end-color: var(--component-background-color);
}
.open-day-header-title-no-avatar,
.open-day-header-text-no-avatar {
text-align: center;
margin-inline: auto;
}
.open-day-header-title-no-avatar {
grid-column: 1/5;
grid-row: 2/3;
}
@media (min-width: 37.5em) {
.open-day-header-title-no-avatar {
grid-area: title;
}
}
.open-day-header-text-no-avatar {
grid-column: 1/5;
grid-row: 3/4;
}
@media (min-width: 37.5em) {
.open-day-header-text-no-avatar {
grid-area: text;
}
}
.section .pill-list.pill-check-list {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.pill-check-list input[type=checkbox] {
position: absolute;
opacity: 0;
}
.pill-check-list label {
white-space: unset;
}
.pill-check-list label:hover {
border-color: var(--color-primary);
background-color: var(--component-text-color);
color: var(--component-background-color);
}
.pill-check-list li:has(:focus-visible) {
outline: var(--space-xs) solid var(--color-focus-visible);
outline-offset: -0.25rem;
border-radius: var(--space-l);
}
.pill-check-list input:checked + label {
background-color: var(--component-text-color);
color: var(--component-background-color);
}
.pill-check-toggle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-margin-after: var(--space-l);
margin-block-end: var(--space-l);
-webkit-padding-after: var(--space-l);
padding-block-end: var(--space-l);
border-bottom: 0.125rem solid var(--color-black-700);
}
.pill-check-toggle h3 {
margin: 0;
}
.pill-check-reset-group {
inline-size: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.pill-check-reset-group .button-text-only {
margin-block: var(--space-xs);
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
}
.selected-plans {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-l);
-webkit-margin-before: var(--space-m);
margin-block-start: var(--space-m);
}
.selected-plan-notice {
background-color: var(--color-teal-100);
padding-block: var(--padding-xs);
padding-inline: var(--padding-xs);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.selected-plan-notice > svg {
-webkit-margin-before: var(--space-xs);
margin-block-start: var(--space-xs);
}
.selected-plan-content {
padding-block: var(--padding);
padding-inline: var(--padding);
}
.selected-plan-content .small {
font-weight: 500;
}
.selected-plan-content .button-text-only {
text-align: start;
}
.selected-plan-sessions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style-type: none;
}
.selected-plan-sessions input[type=checkbox] {
position: absolute;
display: none;
}
.selected-plan-sessions time {
-webkit-margin-end: 1em;
margin-inline-end: 1em;
}
/* Used to display progress steps with default, active, and complete
@example html
Register
Plan
Finalise
*/
.step-progress {
counter-reset: step;
list-style-type: none;
-webkit-padding-start: 0;
padding-inline-start: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 1rem;
}
.step-progress-wrapper {
width: 100%;
max-width: 22rem;
margin-inline: auto;
z-index: 0;
}
.step-progress li {
list-style-type: none;
display: inline-block;
width: 33%;
position: relative;
text-align: center;
font-weight: 600; /* matches Figma */
}
.step-progress li::before {
content: counter(step);
counter-increment: step;
width: 2rem;
height: 2rem;
line-height: 1.7rem;
border: 2px solid var(--color-white);
border-radius: 100%;
color: var(--color-white);
font-weight: 700; /* matches Figma */
font-size: var(--font-heading-xxs);
display: block;
margin: 0 auto 10px;
background-color: var(--color-black);
}
.step-progress li::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: var(--color-white);
top: 1rem;
left: -50%;
z-index: -1;
}
.step-progress li:first-child::after {
content: none;
}
.step-progress li.active,
.step-progress li.complete {
color: var(--color-primary);
}
.step-progress-icon {
-webkit-padding-start: 0.25rem;
padding-inline-start: 0.25rem;
display: none;
}
.step-progress li.complete .step-progress-icon {
display: inline-block;
}
.step-progress li.active::before {
border-color: var(--color-primary);
color: var(--color-primary);
}
.step-progress li.active::after,
.step-progress li.complete::after {
background-color: var(--color-primary);
}
.step-progress li.complete::before {
color: var(--color-black);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.suggested-plans {
--suggested-plans-grid-min-size: 15rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--suggested-plans-grid-min-size), 1fr));
gap: var(--space-l);
}
/* always show first on mobile */
.suggested-plan-highlight {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
@media (width >= 552px) {
.suggested-plan-highlight {
-webkit-box-ordinal-group: unset;
-ms-flex-order: unset;
order: unset;
}
}
/*
`suggested-plan-message`, used with `stack` utility class
@example html
{image}
{cardtext}
*/
.suggested-plan-message {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-line-pack: center;
align-content: center;
gap: var(--space-l);
}
.suggested-plan-message img {
display: none;
}
@media (min-width: 37.5em) {
.suggested-plan-message img {
display: block;
max-inline-size: 4rem;
}
}
.toggle {
position: relative;
inline-size: 7rem;
display: grid;
}
.toggle:has(:focus-visible) {
outline: var(--space-xs) solid var(--color-focus-visible);
outline-offset: var(--space-xs);
}
.toggle-label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
inline-size: 100%;
}
@media (min-width: 37.5em) {
.toggle-label {
inline-size: auto;
}
}
.toggle-disabled-msg {
display: none;
}
.toggle-disabled-msg::before {
content: attr(data-unchecked);
font-style: italic;
opacity: 0.8;
}
.toggle-switch {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
inline-size: 50px;
block-size: 30px;
border-radius: 1rem;
-webkit-transition: background 0.1s, border-color 0.1s;
transition: background 0.1s, border-color 0.1s;
background-color: var(--color-black);
}
.toggle-switch::after {
content: "";
display: block;
position: absolute;
left: 5px;
border-radius: 100%;
background-color: var(--color-white);
inline-size: 20px;
block-size: 20px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
[class^=toggle-] {
position: relative;
font-size: 1.1rem;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.toggle-left {
font-weight: 600;
inline-size: 1.5rem;
}
.toggle-right {
text-align: end;
inline-size: 1.5rem;
}
.toggle-input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.toggle-input[disabled] ~ label .toggle-switch,
.toggle-input[disabled] ~ label [class^=toggle-] {
display: none;
}
.toggle-input[disabled] ~ label .toggle-disabled-msg {
display: block;
}
.toggle-input:checked ~ label .toggle-switch::after {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.toggle-input:checked ~ label .toggle-disabled-msg::before {
content: attr(data-checked);
}
.toggle-input:checked ~ label .toggle-left {
font-weight: 400;
}
.toggle-input:checked ~ label .toggle-right {
font-weight: 600;
}
.filtered-results-wrapper {
--filter-inline-size: 20rem;
display: grid;
gap: var(--space-l);
}
@media (min-width: 64.0625em) {
.filtered-results-wrapper {
grid-template-columns: var(--filter-inline-size) 1fr; /* match Figma search results */
-webkit-column-gap: var(--padding);
-moz-column-gap: var(--padding);
column-gap: var(--padding);
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
}
}
.filtered-results-wrapper-events {
--filter-inline-size: clamp(20rem, 35%, 31.5rem);
}
.filtered-results-wrapper-open-day {
--filter-inline-size: clamp(20rem, 35%, 31.5rem);
}
@media (min-width: 64.0625em) {
.filtered-results-wrapper.stack {
grid-template-columns: 100%;
}
}
.breadcrumbs-filter-page {
-webkit-padding-start: clamp(0rem, -5.2459rem + 8.1967vw, var(--padding));
padding-inline-start: clamp(0rem, -5.2459rem + 8.1967vw, var(--padding));
}
.filtered-search-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.125rem;
}
.filtered-search-results {
display: grid;
grid-template-columns: 1fr 8ch;
margin-inline: calc(var(--section-inline) * -1);
border-block: 0.125rem solid var(--color-black-050);
padding-inline: var(--section-inline);
}
@media (min-width: 64.0625em) {
.filtered-search-results {
grid-template-columns: 1fr;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
}
.filtered-search-results p {
margin-block: 0; /* remove browser default */
max-inline-size: 100%;
-webkit-border-end: 0.125rem solid var(--color-black-050);
border-inline-end: 0.125rem solid var(--color-black-050);
padding-block: var(--space-s);
}
@media (min-width: 64.0625em) {
.filtered-search-results p {
border: 0;
}
}
.filtered-search-results button {
-webkit-margin-start: var(--space);
margin-inline-start: var(--space);
}
@media (min-width: 64.0625em) {
.filtered-search-results button {
display: none;
}
}
.filter-button {
inline-size: 100%;
max-inline-size: 100%;
}
@media (min-width: 64.0625em) {
.filter-button {
display: none;
}
}
.filters {
padding-inline: var(--padding);
padding-block: var(--padding) var(--padding-l);
position: fixed;
z-index: 10;
left: -100vw;
top: 0;
inline-size: 100vw;
block-size: 100vh;
-webkit-transition: var(--transition-time) left var(--cubic-bezier);
transition: var(--transition-time) left var(--cubic-bezier);
overflow-y: scroll;
}
@media (min-width: 64.0625em) {
.filters {
position: relative;
top: auto;
left: auto;
overflow-y: auto;
z-index: auto;
padding-block: var(--padding);
padding-inline: 0;
inline-size: unset;
block-size: -webkit-fit-content;
block-size: -moz-fit-content;
block-size: fit-content;
}
}
@media (min-width: 64.0625em) {
.filters-open-day {
-webkit-padding-before: 0;
padding-block-start: 0;
padding-inline: var(--space-xs);
}
}
.filter-close-button {
position: absolute;
top: var(--padding);
right: var(--padding);
-webkit-margin-before: 0;
margin-block-start: 0;
}
@media (min-width: 64.0625em) {
.filter-close-button {
display: none;
}
}
.filter-close-button-open-day {
top: var(--space-m);
}
.filters-show-on-mobile {
left: 0;
-webkit-transition: var(--transition-time) left var(--cubic-bezier);
transition: var(--transition-time) left var(--cubic-bezier);
}
@media (min-width: 64.0625em) {
.filters-show-on-mobile {
left: auto;
}
}
/*
Reset button for filtered events and search results
Events filtering only provides
*/
.filter-reset {
position: absolute;
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
-webkit-margin-before: 0;
margin-block-start: 0;
inset-inline-end: 0;
inset-block-end: unset; /* sit inline with first filter heading */
}
.filter-reset-events {
inset-block-end: 0;
inline-size: 100%;
max-inline-size: 100%;
border-inline: var(--padding) solid var(--color-ecru);
border-block: var(--space-l) solid var(--color-ecru);
background-color: var(--component-text-color);
color: var(--component-background-color);
}
@media (min-width: 64.0625em) {
.filter-reset-events {
inline-size: -webkit-fit-content;
inline-size: -moz-fit-content;
inline-size: fit-content;
inset-block-end: unset; /* sit inline with first filter heading */
border: 0;
padding: 0;
background-color: transparent;
color: var(--component-text-color);
font-weight: 400;
text-decoration: underline;
}
}
.filter-section {
position: relative; /* assists `.filter-reset` placement */
-webkit-padding-after: var(--space-l);
padding-block-end: var(--space-l);
}
.filter-section:not(:last-of-type) {
-webkit-border-after: 0.125rem solid var(--color-black-050);
border-block-end: 0.125rem solid var(--color-black-050);
}
.filter-section ul {
list-style: none;
-webkit-padding-start: var(--space-s);
padding-inline-start: var(--space-s); /* create space for focus-visible state */
}
.filter-section li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--icon-space);
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.filter-section input[type=checkbox] {
-webkit-margin-before: 0.375rem;
margin-block-start: 0.375rem;
}
.info-table-search-results {
--table-border-color: var(--color-black-050);
}
.info-table-search-results th[scope=row] {
inline-size: 12ch;
}
.info-table-search-results td {
font-weight: 500;
}
.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: var(--space);
max-inline-size: 100%;
margin-block: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style-type: none;
}
/* change pill size on layout change
markup stored in Funnelback main/tabs.ftl */
.pill-search-page {
padding-block: 0.125rem;
padding-inline: 0.375rem;
font-size: var(--font-s);
line-height: 1rem;
}
@media (min-width: 50em) {
.pill-search-page {
padding-block: 0.375rem;
padding-inline: 0.875rem;
font-size: 1rem;
line-height: 1.5rem;
}
}
.search-results {
margin-block: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
list-style-type: none;
max-inline-size: 100%;
}
/* use `.search-results li` to capture all children elements */
.search-results li {
margin-inline: calc(var(--section-inline) * -1);
max-inline-size: unset; /* ensure full width prior to tableLarge breakpoint */
}
@media (min-width: 50em) {
.search-results li {
margin-inline: auto;
inline-size: 100%;
}
}
.search-results-full-width {
display: block;
-ms-flex-item-align: center;
align-self: center;
}
@media (min-width: 64.0625em) {
.search-results-full-width {
grid-column: 1/3;
}
}
@media (min-width: 37.5em) {
.search-result-with-image {
display: grid;
grid-template-columns: max(35%, 15rem, 20%) 1fr;
}
}
.search-result-with-image img {
aspect-ratio: 16/9;
-o-object-fit: cover;
object-fit: cover;
inline-size: 100%;
}
@media (min-width: 37.5em) {
.search-result-with-image img {
aspect-ratio: 4/3;
block-size: 100%;
}
}
/*
The idea of shame.scss is that you have a filereserved just for your hacky code.
The code you have to write to get the release out on time, but the code that makes you ashamed.
*/
/*
Additional top margin required for injectable_zone_two content found on
study and disciple pages. Examples found on:
study area page - /degrees/study-areas/arts-and-humanities
discipline page - /degrees/study-areas/arts-and-humanities/creative-humanities
*/
.injected-block-start-l {
-webkit-margin-before: var(--space-l);
margin-block-start: var(--space-l);
}