/*
- Description Styling
- Inline with Page styling
- Buttons
- Facts
- Header
- Paragraph
- List Styling
- Capped length
- scrolling
- expanding? how to handle clicking in the map showing up in the list? or do nothing?
-
*/
/* !!!!!! Text wrap balance */
/* ----------------------------------
General Styling
------------------------------------*/
html {
scroll-behavior: smooth;
}
body {
margin: unset;
* {
box-sizing: border-box;
font-family: "National";
color: var(--color_text);
margin:0;
}
}
h1, h2, h3, h4, h5, a, p, span, li {
max-width: 66ch;
}
h1{
margin-top: calc(5*var(--gap_XL));
font-size: var(--font_3XL);
line-height: var(--line-height_3XL);
margin-bottom: var(--gap_M);
grid-column: 2/-2 !important;
text-align: center;
color: var(--color_default_dark);
}
h2{
font-size: var(--font_XL);
line-height: var(--line-height_XL);
margin-bottom: var(--gap_XL);
color: var(--section_accent_color)
}
h3{
font-size: var(--font_L);
line-height: var(--line-height_M);
margin-bottom: var(--gap_L);
color: var(--section_accent_color);
}
h4{
font-size: var(--font_L);
line-height: var(--line-height_M);
font-weight: 100;
font-style: italic;
color: var(--color_default_dark);
color: var(--section_accent_color);
margin-bottom: var(--gap_L)
}
p {
font-size: var(--font_M);
line-height: var(--line-height_L);
text-align: left;
margin-bottom: var(--gap_M)
}
figure {
margin: 0;
}
a{
text-decoration: underline;
color: var(--color_default_dark);
color: var(--section_text_color);
&:hover, &:focus {
color: var(--color_default_light);
color: var(--section_accent_color);
}
}
ul {
font-size: var(--font_M);
}
/* Navigation----------- */
#preview {
position: fixed;
background-color: red;
height: 5rem;
text-align: center;
font-size: 3rem;
color: white;
}
nav.main-nav {
position:fixed;
z-index: 7;
background-color: var(--color_default_primary);
height: var(--gap_XL);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
.nav-arc {
pointer-events: none;
position: absolute;
/* background-color: yellow; */
/* height: 20rem; */
top: 100%;
width: 100%;
transform-origin: top;
transition: transform 0.5s ease;
transition-delay: 0s;
will-change: transform;
svg {
width: 100%;
height: 100%;
path {
height: 1px;
fill: var(--color_default_primary);
/* fill: violet; */
/* filter: var(--dropshadow_L); */
}
}
}
.nav-links {
position: relative;
margin-right: var(--gap_L);
align-self: center;
justify-self: end;
display: flex;
gap: var(--gap_S);
* {
color:var(--color_base_light);
font-size: var(--font_M);
background: unset;
border: unset;
cursor: pointer;
}
}
.nav-brand {
--n_unit: calc(0.7*var(--line-height_S));
position:relative;
margin-bottom: calc(-2*var(--gap_XL));
padding: calc(1*var(--n_unit));
justify-self: center;
align-self: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-items: center;
filter: var(--dropshadow_M);
text-decoration: none !important;
svg {
grid-row: 1;
height: calc(5*var(--n_unit));
margin-bottom: var(--n_unit);
}
span {
max-height: calc(2*var(--n_unit)); ;
font-size: var(--n_unit);
line-height: var(--n_unit);
text-align: center;
grid-row: 2;
font-weight: bold;
color: var(--color_base_light);
}
}
.nav-icons {
pointer-events: none;
display: flex;
justify-content: space-between;
padding-left: 20%;
padding-right: 20%;
gap: var(--gap_L);
margin-bottom: calc(-2*var(--gap_XL));
a {
transform: scale(1);
pointer-events: all;
position:relative;
height: min-content;
border-radius: 50%;
transition: 0.2s ease;
&:hover, &:focus {
transform: scale(1.2);
svg{
filter: var(--dropshadow_S);
}
}
span {
pointer-events: none;
visibility: hidden;
position: absolute;
top:calc(100% + var(--gap_S));
left: 20%;
font-size: var(--font_S);
background-color: var(--color_base_white);
padding: var(--gap_M);
border-radius: var(--corner_M);
border: var(--gap_XS) solid var(--color_base);
opacity: 0 ;
transition: opacity .3s;
}
svg {
height: 8rem;
inset: 0;
object-fit: contain;
filter: var(--dropshadow_M)
}
Nav_Volunteer_Icon {
top: 12%;
&:focus, &:hover {
span {
visibility: visible;
opacity: 1;
}
}
}
Nav_Study_Abroad_Icon {
top: 25%;
&:focus, &:hover {
span {
visibility: visible;
opacity: 1;
}
}
}
Nav_Host_A_Student_Icon {
top: 35%;
&:focus, &:hover {
span {
visibility: visible;
opacity: 1;
}
}
}
}
}
&.shrink {
.nav-arc {
/* transform: scaleY(0); */
}
.nav-brand{
padding:0;
flex-direction: row;
align-items: center;
margin:0;
.org-name {
font-size: var(--font_S);
}
svg{
height: var(--gap_XL);
padding: var(--gap_S);
margin-bottom: 0;
}
.org-tagline {
display:none;
}
}
.nav-icons{
justify-content: start;
padding-inline: var(--gap_L);
a {
top: 0 !important;
svg{
height:calc(1.0*var(--gap_XL));
margin-top: var(--gap_S)
}
}
}
}
}
nav.pages-nav {
position: fixed;
z-index: 6;
margin-top: var(--gap_XL);
height: var(--gap_XL);
width: 100%;
background-color: var(--color_default_dark);
.nav-pages-arc{
container-type: size;
z-index: 3;
top:100%;
position:absolute;
/* margin-top:-10rem; */
margin-top: calc(-1/3cqh);
width: 100%;
fill: var(--color_default_dark);
pointer-events: none;
svg {
width: 100%;
height: 100%;
use {
fill: var(--color_default_dark);
/* fill: violet; */
/* filter: var(--dropshadow_L) */
}
}
}
#nav_pages_size_reference {
font-size: var(--font_M)
}
svg.nav-pages-text {
z-index: 4;
margin-top: calc(-0.5*var(--gap_XL));
position: absolute;
top: 100%;
margin-top: calc(-1/3 * 100vw * (45 / 200) - var(--gap_XL)*0.5);
width: 100%;
transform-origin: top;
transition: transform 0.5s ease;
will-change: transform;
pointer-events:none;
path {
fill:none;
filter: none;
}
text {
z-index: 10;
fill: var(--color_base_white);
.nav_pages_arrow {
pointer-events: all;
transform: scale(1.2);
font-size: 130%;
a {
text-decoration: none !important;
}
}
#nav_current_page {
text-decoration: underline;
font-weight: bold;
}
textPath {
pointer-events: all;
fill: var(--color_base_white);
z-index: 10;
a {
color: var(--color_base_white);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
/* --------------------------------------------------- */
/* Keyframes for flying out and back in */
@keyframes flyUpDown {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20rem);
}
100% {
transform: translateY(0);
}
}
/* These apply the animation */
.animate-fly {
animation: flyUpDown 1s ease forwards;
}
/* Sections----------*/
body {
background-color: green;
}
#homepage_hero {
position: relative;
grid-column: 1/-1;
display: grid;
grid-template-columns: 1fr;
height: 90vh;
margin-bottom: -10vh;
overflow: hidden;
img{
aspect-ratio: 1.7;
position: relative;
inset: 0;
object-fit:cover;
z-index: 1;
mask-image: linear-gradient(black 80%, transparent);
height: 100%;
}
#homepage_overlay {
position: absolute;
inset: 0;
z-index: 2;
background-color: var(--color_YFU_primary);
}
#homepage_graphic {
margin-top: 15vh;
z-index: 2;
--n_unit: calc(1.2* var(--gap_XL));
position:absolute;
padding: calc(2*var(--n_unit));
justify-self: center;
align-self: center;
display: flex;
flex-direction: row;
justify-items: center;
align-items: center;
svg {
grid-row: 1;
height: calc(5*var(--n_unit));
margin-right: var(--n_unit);
}
#homepage_text {
display: flex;
flex-direction: column;
font-size: var(--n_unit);
font-weight: bold;
span {color: var(--color_base_white);}
}
}
}
/* Section Specific Styling */
section {
scroll-margin-block-start: calc(2*var(--gap_XL)) ;
position: relative;
font-size: var(--font_M);
padding-top: calc(2*var(--gap_XL));
padding-bottom: var(--gap_XL);
display: grid;
grid-template-columns: 8% 1fr 66ch 1fr 8%;
hero_section {
padding-top:0rem;
}
#hero_image, .section-arc {
grid-column: 1/ -1;
}
&>*{
grid-column: 3;
}
&.section-color_base {
--section_color_light: var(--color_default_light);
--section_color_primary: var(--color_default_primary);
--section_color_dark: var(--color_default_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_default_dark);
background-color: var(--color_base_light);
}
&.section-color_primary {
--section_color_light: var(--color_default_light);
--section_color_primary: var(--color_default_primary);
--section_color_dark: var(--color_default_dark);
--section_text_color: var(--color_default_text);
--section_accent_color: var(--color_default_accent);
background-color: var(--color_default_light);
}
&.section-color_yfu {
--section_color_light: var(--color_YFU_light);
--section_color_primary: var(--color_YFU_primary);
--section_color_dark: var(--color_YFU_dark);
--section_text_color: var(--color_base);
--section_accent_color: var(--color_base_light);
background-color: var(--color_YFU_light);
}
&.section-color_study_abroad {
--section_color_light: var(--color_Study_Abroad_light);
--section_color_primary: var(--color_Study_Abroad_primary);
--section_color_dark: var(--color_Study_Abroad_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_Study_Abroad_dark);
background-color: var(--color_Study_Abroad_light);
}
&.section-color_host_a_student {
--section_color_light: var(--color_Host_A_Student_light);
--section_color_primary: var(--color_Host_A_Student_primary);
--section_color_dark: var(--color_Host_A_Student_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_text);
background-color: var(--color_Host_A_Student_light);
}
&.section-color_volunteer {
--section_color_light: var(--color_Volunteer_light);
--section_color_primary: var(--color_Volunteer_primary);
--section_color_dark: var(--color_Volunteer_dark);
--section_text_color: var(--color_base);
--section_accent_color: var(--color_text);
background-color: var(--color_Volunteer_light);
}
&.section-color_educators {
--section_color_light: var(--color_Educators_light);
--section_color_primary: var(--color_Educators_primary);
--section_color_dark: var(--color_Educators_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_base);
background-color: var(--color_Educators_light);
}
&.section-color_alumni {
--section_color_light: var(--color_Alumni_light);
--section_color_primary: var(--color_Alumni_primary);
--section_color_dark: var(--color_Alumni_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_Alumni_dark);
background-color: var(--color_Alumni_light);
}
&.section-color_donors {
--section_color_light: var(--color_Donors_light);
--section_color_primary: var(--color_Donors_primary);
--section_color_dark: var(--color_Donors_dark);
--section_text_color: var(--color_base);
--section_accent_color: var(--color_Donors_dark);
background-color: var(--color_Donors_light);
}
.section-arc {
grid-column: 1/-1;
position: absolute;
z-index: 2;
top: 100%;
width: 100%;
height: 10rem;
fill: var(--section_color_light);
&.section-color_base {
fill: var(--color_base_light);
}
}
}
.table-of-contents-description {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: var(--gap_XL);
/* grid-column: 2/-2 !important; */
margin-top: var(--gap_L);
gap: calc(1* var(--gap_XL));
nav.table-of-contents {
flex-direction: column;
gap: 0;
}
div {
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
display: flex;
align-content: center;
p {
position: relative;
align-self: center;
margin-inline: auto;
font-size: var(--font_M);
line-height: var(--line-height_M);
}
}
}
nav.table-of-contents {
padding: var(--gap_XS);
padding-left: none;
margin-right: var(--gap_XL);
display: flex;
gap: var(--gap_M);
ol {
border-left: var(--gap_XS) solid var(--color_default_primary);
border-radius: calc(2*var(--gap_XS));
display: flex;
margin-left: var(--gap_XS);
list-style: decimal;
height: 100%;
flex-direction: column;
justify-content: space-around;
li {
margin-left: var(--gap_S);
text-decoration: underline;
margin-block: var(--gap_S);
&:hover,
&:focus {
color: var(--color_default_light);
&::marker {
color: var(--color_default_light);
}
}
&::marker {
color: var(--color_default_dark);
}
a {
margin-left: var(--gap_S);
color: var(--color_default_primary);
&:hover,
&:focus {
color: var(--color_default_light) !important;
}
}
}
}
}
#progress-rail {
z-index: 10;
--rail_width: 0.5rem;
position:fixed;
top: calc(3*var(--gap_XL));
bottom: var(--gap_XL);
left: var(--gap_L);
width: var(--rail_width);
background-color: var(--color_default_dark);
/* border-radius: var(--rail_width); */
filter: var(--dropshadow_M);
#progress-fill {
min-height: calc(5*var(--rail_width));
transform: translateX(calc(-2*var(--rail_width)));
position:absolute;
width: calc(5*var(--rail_width));
border-radius: calc(5*var(--rail_width));
background-color: var(--color_default_dark);
}
&::before {
content: "";
position: absolute;
top: calc(-1*var(--corner_M));
right:0;
width: calc(var(--rail_width) + var(--gap_L));
height: var(--corner_M);
border: var(--rail_width) solid var(--color_default_dark);
border-bottom: none ;
border-top-right-radius:var(--corner_M);
}
&::after {
content: "";
position: absolute;
bottom: calc(-1*var(--corner_M));
right:0;
width: calc(var(--rail_width) + var(--gap_L));
height: var(--corner_M);
border: var(--rail_width) solid var(--color_default_dark);
border-top: none ;
border-bottom-right-radius:var(--corner_M);
}
.rail-dot {
position:absolute;
display: flex;
align-items: center;
width: calc(3*var(--rail_width));
background-color: transparent;
border: var(--rail_width) solid transparent;
transform: translate(calc(-2*var(--rail_width)), calc(-5*var(--rail_width)));
aspect-ratio: 1;
border-radius: 50%;
justify-content: center;
box-sizing: content-box;
&::after {
content: "";
position:absolute;
justify-self: center;
align-self: center;
height: calc(3*var(--rail_width));
width: calc(3*var(--rail_width));
background-color: var(--color_base_light);
border: var(--rail_width) solid var(--color_default_dark);
border-radius: 50%;
}
span {
position: absolute;
left: calc(-1 *var(--rail_width) + -1* var(--gap_S));
border-radius: calc(2*var(--gap_S));
width: max-content;
color: var(--color_base_white);
font-size: var(--font_S);
background-color: var(--color_default_dark);
padding: var(--gap_S);
padding-left: calc(100% + var(--rail_width) + 2* var(--gap_S));
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
&:hover span, &:focus span {
pointer-events: all;
opacity: 1;
}
}
}
footer {
padding-top: calc(2 * var(--gap_XL));
padding-bottom: var(--gap_XL);
section {
all: unset;
}
background-color: var(--color_default_primary);
div, a {
color: var(--color_base);
.title {
font-size: var(--font_L);
font-weight: bold;
}
}
.legal-seat-and-contact-information {
grid-column: 2/-2 !important;
display: flex;
justify-content: space-between;
}
.container {
display: grid;
font-size: var(--font_M);
margin-bottom: var(--gap_L);
>* {grid-column: 2/-2;}
/* .row.credits {
} */
}
}
/* ---------
Elements
------------------- */
.button {
--button_body_color: var(--section_color_primary);
--button_shadow_color: var(--section_color_dark);
position: relative;
background-color: var(--button_body_color);
padding: var(--gap_M);
border-radius: var(--corner_M);
color: var(--color_base_white);
width: fit-content;
text-align: center;
font-weight: bold;
justify-self: center;
text-decoration: none;
transform: var(--unpressed);
min-width: calc(3*var(--gap_XL));
/* box-shadow: 0 var(--gap_S) var(--button_shadow_color); */
filter: drop-shadow(0 var(--gap_S) var(--button_shadow_color));
&:hover, &:focus {
transform: var(--pressed);
/* box-shadow: none; */
filter: none;
color: var(--color_base_white);
}
}
.svg-flag {
object-fit: cover;
aspect-ratio: 1.5;
height: 100%;
}
.Label_Container {
overflow: hidden;
position:absolute;
bottom:100%;
right: 10%;
pointer-events: none;
display: grid;
grid-template-columns: auto auto auto;
align-items: end;
padding-top: calc(2*var(--gap_XS));
padding-bottom:0;
/* &::after {
position: absolute;
content: "";
width: 100%;
bottom: 0;
left: 0;
height: 0.3rem;
background: linear-gradient(to top, hsla(0, 0%, 0%, 0.111), transparent) ;
} */
svg {
z-index: 2;
grid-column: 1;
bottom: 0;
right: 90%;
height: var(--corner_M);
&.right {
transform: rotate(90deg);
grid-column: 3;
}
use {
fill: var(--color_Host_A_Student_primary);
height:100%;
}
}
.label {
grid-column: 2;
pointer-events: auto;
font-size: var(--font_S);
text-align: right;
margin-block: 0;
background: inherit;
padding-block: 0.5rem;
padding-inline: 2rem;
border-radius: var(--corner_M) var(--corner_M) 0 0 ;
box-shadow: 0 calc(-1*var(--gap_XS)/2) var(--gap_XS) hsla(0, 0%, 0%, 0.057);
background-color: var(--color_Host_A_Student_primary);
color: var(--color_base_light);
}
}
.Quick_Fact_Container .label {
display: none;
transform: translateXD(110%);
transition: translateX, 0.5s;
transition-delay: 0.5s;
}
.Quick_Fact_Container .label.animate {
transform: translateX(0);
transition-delay: 0.2s;
}
img {
border-radius: var(--gap_S);
border: var(--gap_XS) solid var(--color_base);
filter: var(--dropshadow_S);
}
/* -----------Hero------------ */
#hero_image {
margin-top: calc(1*var(--gap_XL));
margin-bottom: calc(-3*var(--gap_XL));
img {
border: none;
filter: none;
aspect-ratio: 3;
object-fit: cover;
width: 100%;
mask-image: linear-gradient(black 80%, rgba(0, 0, 0, 0.897),rgba(0, 0, 0, 0.801),rgba(0, 0, 0, 0.479), transparent);
}
&:not([src]) {
display: none;
}
}
/* ---------
Widgets
--------------- */
.widget {
margin-bottom: var(--gap_XXL)
}
.static_rich_text{
font-size: var(--font_M);
justify-self: center;
max-width: 66ch;
display: grid;
h3, h4 {
grid-column: 1/-1;
}
p {
color: var(--section_text_color);
}
}
.list {
margin-top: calc(-1* var(--gap_XXL));
line-height: var(--line-height_L);
margin-bottom: calc(var(--gap_XXL) + var(--gap_M));
li {
color: var(--section_text_color);
}
}
.static_image_and_table {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--gap_L);
height: min-content;
img {
grid-area: 1/2;
border-radius: var(--gap_M);
height: 100%;
width: 100%;
object-fit: cover;
}
.text-content {
filter: var(--dropshadow_S);
grid-area: 1/1;
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);}
table {
position: relative;
width: 100%;
}
&.text-top {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
img {
grid-area: 2/1;
}
}
&.text-bottom {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
.text-content {
grid-area: 2/1;
}
img {
grid-area: 1/1;
}
}
&.text-right {
grid-template-columns: 1fr 2fr;
img {
grid-area: 1/1;
}
.text-content {
grid-area: 1/2;
}
}
&.shape-circle {
grid-template-rows: auto;
img {
border-radius: 50%;
aspect-ratio: 1;
height: fit-content;
}
.text-content {
height: fit-content;
}
}
}
.static_standard_form {
display: none;
}
.program_related_faq {
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
grid-column: 2/ -2;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: var(--gap_M);
details {
position: relative;
border-radius: var(--corner_M);
background-color: var(--color_base_light);
height: fit-content;
filter: var(--dropshadow_S);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--section_color_light);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
}
summary {
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: var(--line-height_L) auto;
align-items: center;
gap: var(--gap_M);
position: relative;
padding: var(--gap_M);
span {
color: var(--color_text) !important;
position: relative;
font-weight: bold;
grid-column: 2;
text-align: left;
font-size: var(--font_M);
line-height: var(--line-height_L);
}
svg {
aspect-ratio: 1;
height: var(--line-height_L);
grid-column: 1;
transition: transform 0.3s ease;
transform-origin: center;
}
}
summary::-webkit-details-marker {
display: none;
}
.collapsible-content {
margin-inline: var(--gap_M);
text-align: left;
padding-inline: var(--gap_S);
margin-bottom: var(--gap_L);
p {
color: var(--color_text) !important;
}
}
&[open] summary svg {
transform: rotate(45deg);
}
}
}
.program_related_programs_table {
margin-bottom: 0;
grid-column: 2/-2;
position: relative;
.filters-container {
filter: var(--dropshadow_M);
display: flex;
flex-wrap: wrap;
/* flex-direction: column; */
background: var(--color_base);
justify-content: space-between;
padding: var(--gap_M);
border-radius: var(--gap_M);
margin-bottom: var(--gap_XL);
gap: var(--gap_S);
.checkbox-group {
position: relative;
summary {
background-color: var(--color_base_white);
border-radius: var(--gap_S);
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: var(--line-height_S) auto;
align-items: center;
gap: var(--gap_S);
position: relative;
padding: var(--gap_S);
&:-webkit-details-marker {
display: none;
}
span {
color: var(--color_text)t;
position: relative;
font-weight: bold;
grid-column: 2;
text-align: left;
font-size: var(--font_S);
line-height: var(--line-height_M);
}
svg {
aspect-ratio: 1;
height: var(--line-height_S);
grid-column: 1;
transition: transform 0.3s ease;
transform-origin: center;
}
}
div {
font-size: var(--font_S);
padding-inline: var(--gap_S);
padding-block: var(--gap_XS);
display: grid;
grid-template-columns: min-content auto;
input {
margin-right: var(--gap_XS);
aspect-ratio: 1;
width: var(--gap_M);
}
label {
align-self: center;
word-break: break-word;
}
}
&[open] {
background-color: var(--color_base_light);
border-radius: var(--gap_S);
summary svg {
transform: rotate(45deg);
}
}
}
>input {
height: calc(var(--line-height_M) + 2 * var(--gap_S));
border-radius:var(--gap_S);
padding: var(--gap_S);
border: none;
font-size: var(--font_S);
width: 10ch;
}
button {
background-color: var(--color_base_white);
border-radius: var(--gap_S);
height: calc(var(--line-height_M) + 2 * var(--gap_S));
border: none;
cursor: pointer;
padding: var(--gap_S);
font-size: var(--font_S);
font-weight: bold;
}
}
.desktop {
filter: var(--dropshadow_M);
background: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
margin-bottom: var(--gap_XXL);
a {
color: var(--section_color_primary);
&:hover {
color: var(--section_color_light)
}
}
table {
width: 100%;
height: 100%;
thead {
position:relative;
text-align: left;
&::before {
content: "";
position: absolute;
inset:calc(-1* var(--gap_S));
bottom: calc(var(--gap_M) - var(--gap_S));
background-color: var(--section_color_primary);
border-radius: var(--gap_S);
}
th {
position: relative;
color: var(--color_base_white);
border:0;
padding-bottom: var(--gap_M);
}
}
tbody td {
padding-block: var(--gap_XS);
padding-inline: var(--gap_S);
}
tr.group td {
display: none;
background-color: var(--section_color_light);
height: 2px;
border-radius: 0.3rem;
padding: 0.15rem; }
}
}
.mobile.container {
filter: var(--dropshadow_S);
display: none;
details {
background-color: var(--color_base);
border-radius: var(--gap_M);
margin-bottom: var(--gap_L);
padding: var(--gap_S);
summary {
padding: var(--gap_S);
background-color: var(--color_default_primary);
background-color: var(--section_color_primary);
color: var(--color_base);
border-radius: var(--gap_S);
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: var(--line-height_M) auto;
align-items: center;
gap: var(--gap_S);
position: relative;
span {
color: var(--color_base);
position: relative;
font-weight: bold;
grid-column: 2;
text-align: left;
font-size: var(--font_M);
line-height: var(--line-height_L);
}
svg {
aspect-ratio: 1;
height: var(--line-height_M);
grid-column: 1;
transition: transform 0.3s ease;
transform-origin: center;
line {
color: var(--color_base);
}
}
}
summary::-webkit-details-marker {
display: none;
}
&[open] summary svg {
transform: rotate(45deg);
}
&:last-child {
margin-bottom: var(--gap_XXL);
}
table {
margin-top: var(--gap_XS);
width: 100%;
position:relative;
th, td {
padding-block: var(--gap_S);
}
th {
width: 50%;
text-align: left;
padding-right: var(--gap_S);
td {
padding-left: var(--gap_S);
}
}
}
}
}
.see-all-button {
position: absolute;
bottom: 0;
cursor:pointer;
width: calc( 2* var(--gap_S) + 100%);
height: calc(2*var(--gap_XXL));
display: grid;
filter: unset;
border: none;
background: linear-gradient(to top, var(--color_base_light) 20%, transparent);
margin: calc(-1* var(--gap_S));
margin-bottom: calc(var(--gap_XXL) - var(--gap_S));
p {
align-self: end;
justify-self: center;
font-size: var(--font_L);
font-weight: bold;
filter: var(--dropshadow_M);
}
}
}
.program_related_featured_countries_and_programs {
grid-column: 2/-2 ;
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
display: grid;
grid-auto-flow: column;
gap: var(--gap_M);
filter: var(--dropshadow_M);
padding-bottom: var(--gap_XL);
.program {
text-decoration: none;
background-color: var(--color_base_light);
padding: var(--gap_M);
border-radius: var(--gap_M);
transform: scale(1);
transition: all 0.3s ease;
filter: var(--dropshadow_M);
position: relative;
padding-bottom: var(--gap_XL);
display: grid;
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_default_primary);
border: var(--gap_XS) solid var(--section_color_primary);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S)
}
&:hover, &:focus {
transform: scale(1.05) !important;
}
h3 {
font-size: var(--font_XL);
text-align: center;
padding: var(--gap_S);
margin-bottom: var(--gap_XS);
}
img {
border-radius: var(--gap_S);
border: var(--gap_XS) solid var(--color_base_white);
filter: var(--dropshadow_S);
margin-bottom: var(--gap_M);
}
table {
td {
vertical-align: top;
&.label {
width: 50%;
color: var(--color_default_primary);
color: var(--section_color_primary);
font-weight: bold;
padding-bottom: 0;
border: 0;
}
}
}
a.button {
z-index: 2;
justify-self: center;
position:absolute;
object-position: center;
margin-bottom: calc(-1* var(--gap_L));
bottom: 0;
}
}
}
.static_picture {
grid-column: 2/-2 !important;
margin-bottom: calc(2*var(--gap_XL));
img {border-radius: var(--gap_L);}
}
.static_citation {
background-color: var(--color_base);
border-radius: var(--gap_M);
filter: var(--dropshadow_M);
width: 100%;
p {
position:relative;
margin: var(--gap_L);
font-size: var(--font_XL);
line-height: var(--line-height_XL);
font-weight:bold;
text-align: center;
padding-inline: var(--gap_M);
padding-bottom: var(--gap_XL);
color: var(--text) !important;
&:before {
content: '“';
font-family: "National";
position: relative;
left: -0.2ch;
top: calc(0.6* var(--line-height_XL));
font-size: calc(3*var(--font_XL));
color: var(--section_color_dark);
filter: var(--dropshadow_S)
}
}
&:nth-child(9n+1) p {
font-family: "Grape Nuts", cursive;
font-size: 130%;
line-height: 100%;
}
&:nth-child(9n+2) p {
font-family: "Caveat", cursive;
font-size: 135%;
line-height: 100%;
}
&:nth-child(9n+3) p {
font-family: "Gloria Hallelujah", cursive;
font-size: 110%;
line-height: 100%;
}
&:nth-child(9n+4) p {
font-family: "Reenie Beanie", cursive;
font-size: 140%;
line-height: 100%;
}
&:nth-child(9n+5) p {
font-family: "Cedarville Cursive", cursive;
font-size: 125%;
line-height: 90%;
}
&:nth-child(9n+6) p {
font-family: "Over the Rainbow", cursive;
font-size: 120%;
line-height: 100%;
}
&:nth-child(9n+7) p {
font-family: "The Girl Next Door", cursive;
font-size: 115%;
line-height: 100%;
}
&:nth-child(9n+8) p {
font-family: "Mynerve", cursive;
font-size: 125%;
line-height: 100%;
}
&:nth-child(9n+9) p {
font-family: "Calligraffitti", cursive;
font-size: 120%;
line-height: 120%;
}
}
img {
max-width: 100%;
}
.static_image_and_text{
position:relative;
p {
color: var(--section_text_color);
}
img {
position:relative;
border-radius: var(--gap_M);
object-fit:cover;
}
&.text-top {
display: grid;
gap: var(--gap_L);
img {
grid-row: 2;
margin:0;
padding:0;
width: 100%;
}
}
&.text-bottom {
img {
margin:0;
padding:0;
width: 100%;
margin-top:var(--gap_L);
}
}
&.text-left {
img {
float: right;
width: 50%;
margin-left: calc(0.5*var(--gap_L));
margin-bottom: calc(0.5*var(--gap_L));
}
}
&.text-right {
img {
float: left;
width: 50%;
margin-right: calc(0.5*var(--gap_L));
margin-bottom: calc(0.5*var(--gap_L));
}
}
&.shape-circle img{
border-radius: 50%;
aspect-ratio: 1;
}
}
.static_link_buttons, .static_major_touchpoint_buttons{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
a {
padding: var(--gap_M);
border-radius: var(--gap_M);
text-decoration: none;
transform: var(--unpressed);
min-width: calc(3*var(--gap_XL));
text-align: center;
filter: none;
&:hover, &:focus {
transform: var(--pressed);
}
span {
color: var(--color_base_light);
font-weight: bold;
}
&.about {
background-color: var(--color_YFU_primary);
box-shadow: 0 var(--gap_S) var(--color_YFU_dark);
&:hover,
&:focus {
box-shadow: none !important; }
}
&.study_abroad {
background-color: var(--color_Study_Abroad_primary);
box-shadow: 0 var(--gap_S) var(--color_Study_Abroad_dark);
&:hover,
&:focus {
box-shadow: none ; }
}
&.host_a_student {
background-color: var(--color_Host_A_Student_primary);
box-shadow: 0 var(--gap_S) var(--color_Host_A_Student_dark);
&:hover,
&:focus {
box-shadow: none;
}
}
&.volunteer {background-color: var(--color_Volunteer_primary);
box-shadow: 0 var(--gap_S) var(--color_Volunteer_dark);
&:hover,
&:focus {
box-shadow: none;
}
}
&.educators {background-color: var(--color_Educators_primary);
box-shadow: 0 var(--gap_S) var(--color_Educators_dark);
&:hover,
&:focus {
box-shadow: none;
}
}
&.alumni {background-color: var(--color_Alumni_primary);
box-shadow: 0 var(--gap_S) var(--color_Alumni_dark);
&:hover,
&:focus {
box-shadow: none;
}
}
&.donors {background-color: var(--color_Donors_primary);
box-shadow: 0 var(--gap_S) var(--color_Donors_dark);
&:hover,
&:focus {
box-shadow: none;
}
}
}
}
.program_related_document_album {
background: var(--color_base);
display: grid;
border-radius: var(--gap_M);
padding: var(--gap_M);
padding-left: 0;
gap: var(--gap_M);
margin-left: calc(var(--gap_S) + var(--gap_L));
grid-template-columns: calc(2*var(--gap_L)) auto;
filter: var(--dropshadow_S);
svg {
grid-column: 1;
align-self: center;
transform: translateX(-50%);
width: 200%;
}
.info {
grid-column: 2;
h3 {
color: var(--section_color_dark)
}
p {
color: var(--color_text)
}
a {
color: var(--section_color_primary)
}
}
}
.static_youtube_video {
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: calc(2*var(--gap_M));
filter: var(--dropshadow_S);
iframe{
border-radius: var(--gap_M);
width: 100%;
aspect-ratio: 16/9;
border: none;
filter: var(--dropshadow_M);
}
}
.static_form {
grid-column: 2/ -2 !important;
form{
background-color: var(--section_color_dark);
padding: var(--gap_L);
border-radius: var(--gap_L);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--gap_L);
.form {
margin:0;
height: min-content;
font-size: var(--font_S);
* {color: var(--color_base)
}
h3 {
color:var(--color_base) !important;
}
.checkbox {
display: grid;
grid-template-columns: min-content auto;
input {
margin: var(--gap_S);
aspect-ratio: 1;
width: var(--gap_M);
}
label {
align-self: center;
}
}
textarea {
min-width: 100%;
resize:vertical;
min-height: calc(4*var(--gap_XL));
font-size: var(--font_S);
}
select {
font-size: var(--font_S);
}
option {
font-size: var(--font_S);
color: var(--color_text);
}
.field {
display: grid;
margin-block: var(--gap_L);
label {
font-size: var(--font_M);
line-height: var(--line-height_M);
}
}
input, select {
font-size: var(--font_S);
background-color: transparent;
border:none;
border-bottom: 0.2rem solid var(--color_base);
}
&.error >* {
color: red;
border: 0.3rem solid red;
}
}
.submit {
input {
border:none;
font-size: var(--font_M);
position: relative;
padding: var(--gap_M);
border-radius: var(--corner_M);
color: var(--section_accent_color);
width: fit-content;
min-width: calc(3*var(--gap_XL));
text-align: center;
justify-self: center;
background-color: var(--color_base);
box-shadow: 0 var(--gap_S) var(--section_color_light);
&:hover,
&:focus {
box-shadow: none;
}
}
}
.submit, .errors{
grid-column: 1/-1;
justify-self: center;
}
.loading.button {
display: none;
}
.errors {
visibility: hidden;
&.visible {
visibility: visible;
}
}
}
}
.static_picture_gallery {
grid-column: 1/-1;
.carousel-scroll-container {
display: flex;
font-size: var(--font_M);
gap: var(--gap_L);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: calc((100% - 66ch) / 2);
padding-inline: calc((100% - 66ch) / 2);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
.carousel-slide {
flex: 0 0 calc(66ch);
scroll-snap-align: start;
position: relative;
text-align: center;
width: fit-content;
padding: var(--gap_S);
background-color: var(--color_base_light);
border-radius: var(--gap_M);
img {
aspect-ratio: 2.8444444444;
display: block;
border: none;
filter: none;
object-fit: cover;
}
figcaption {
padding: var(--gap_S);
width:fit-content;
}
&:nth-child(9n+1) figcaption {
font-family: "Grape Nuts", cursive;
font-size: 130%;
line-height: 100%;
}
&:nth-child(9n+2) figcaption {
font-family: "Caveat", cursive;
font-size: 135%;
line-height: 100%;
}
&:nth-child(9n+3) figcaption {
font-family: "Gloria Hallelujah", cursive;
font-size: 110%;
line-height: 100%;
}
&:nth-child(9n+4) figcaption {
font-family: "Reenie Beanie", cursive;
font-size: 140%;
line-height: 100%;
}
&:nth-child(9n+5) figcaption {
font-family: "Cedarville Cursive", cursive;
font-size: 125%;
line-height: 90%;
}
&:nth-child(9n+6) figcaption {
font-family: "Over the Rainbow", cursive;
font-size: 120%;
line-height: 100%;
}
&:nth-child(9n+7) figcaption {
font-family: "The Girl Next Door", cursive;
font-size: 115%;
line-height: 100%;
}
&:nth-child(9n+8) figcaption {
font-family: "Mynerve", cursive;
font-size: 125%;
line-height: 100%;
}
&:nth-child(9n+9) figcaption {
font-family: "Calligraffitti", cursive;
font-size: 120%;
line-height: 120%;
}
}
}
}
.static_collapsible_text{
position: relative;
border-radius: var(--corner_M);
background-color: var(--color_base_light);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--section_color_light);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
}
summary {
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: var(--line-height_L) auto;
align-items: center;
gap: var(--gap_M);
position: relative;
padding: var(--gap_M);
span {
color: var(--color_text) !important;
position: relative;
font-weight: bold;
grid-column: 2;
text-align: left;
font-size: var(--font_L);
line-height: var(--line-height_L);
}
svg {
aspect-ratio: 1;
height: var(--line-height_L);
grid-column: 1;
transition: transform 0.3s ease;
transform-origin: center;
}
}
summary::-webkit-details-marker {
display: none;
}
.collapsible-content{
margin-inline: var(--gap_M);
text-align: left;
padding-inline: var(--gap_S);
margin-bottom: var(--gap_L);
p {color: var(--color_text) !important;}
}
details[open] summary svg {
transform: rotate(45deg);
}
}
.introduction.widget {
grid-column: 2/-2 !important;
display: grid;
grid-template-columns: auto auto;
gap: var(--gap_L);
min-height: calc(12*var(--gap_XL));
margin-top: calc(-4* var(--gap_L));
margin-bottom: calc(-4* var(--gap_L));
z-index: 4;
.intro_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
filter: var(--dropshadow_S);
h3 {
font-size: var(--font_3XL);
line-height: var(--line-height_XL);
color: var(--section_accent_color);
word-break: break-word;
overflow-wrap: anywhere;
}
h4 {
color: var(--section_accent_color);
}
p {
color: var(--section_accent_color);
text-align: center;
}
.button {
align-self: center;
}
}
.intro_images {
aspect-ratio: 1;
position:relative;
&.images-left {
grid-column: 1;
grid-row:1;
transform: scaleX(-1);
>* {
transform: scaleX(-1);
}
}
> * {
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
position: absolute;
}
.intro_image_1 {
width: 50%;
top: 0;
right: 0;
border: var(--gap_XS) solid var(--section_color_primary);
filter: var(--dropshadow_M);
}
.intro_image_2 {
width: 60%;
bottom: 0;
right: 10%;
border: var(--gap_XS) solid var(--section_color_primary);
filter: var(--dropshadow_M);
}
svg {
width: 30%;
top: 20%;
right: 40%;
filter: var(--dropshadow_L);
}
}
/* Introduction Layout */
&.layout-1 {
.intro_image_1 {
width: 50%;
inset:unset;
bottom: 5%;
right: 0;
}
.intro_image_2 {
width: 70%;
inset:unset;
top:0;
right: 20%;
}
svg {
width: 25%;
inset:unset;
top: 60%;
right: 40%;
}
}
}
.static_call_to_action_button{
position: fixed;
grid-column: 4;
top: 25%;
font-size: var(--font_M);
width: calc((100vw - 66ch)*0.5 - 2* var(--gap_L));
margin-left: calc(1* var(--gap_L) + var(--gap_M));
z-index: 4;
display: flex;
justify-content: flex-end;
a {
max-width: 100%;
cursor: pointer;
border-radius: var(--gap_M) 0 0 var(--gap_M);
background-color: var(--section_color_dark);
display: flex;
flex-direction: row;
min-height: var(--gap_XL);
position: relative;
align-items: center;
filter: var(--dropshadow_M);
text-decoration-color: var(--color_base_light) !important;
img {
height: calc( 2* var(--gap_L));
position: relative;
border-radius: 50%;
filter: none;
border: none;
margin-left: calc(-1* var(--gap_L));
background: var(--section_color_primary);
/* opacity: 0.3; */
filter: var(--dropshadow_S)
}
span {
padding: var(--gap_M);
height: min-content;
color: var(--color_base_light);
line-break: auto;
text-wrap: balance;
}
}
}
/* aside */
aside {
z-index: 5;
background-color: var(--color_base);
border-radius: var(--gap_M);
height: fit-content;
margin-left: var(--gap_M);
padding: var(--gap_M);
margin-bottom: var(--gap_L);
position: absolute;
grid-column-start: 4;
grid-column-end: 5;
/* width: calc(100% - var(--gap_M)); */
display: grid;
grid-row: 1;
/* margin-right: calc(-1* var(--gap_XL)); */
svg {
width: calc(2 *var(--gap_L));
aspect-ratio: 1;
margin-top: calc(-1 * var(--gap_L) - var(--gap_M));
margin-bottom: var(--gap_XS);
justify-self: center;
}
h5 {
font-size: var(--font_M);
margin-bottom: var(--gap_XS);
text-align: center;
}
p {
font-size: var(--font_S);
line-height: var(--line-height_S);
margin-bottom: var(--gap_XS)
}
ul, ol {
font-size: var(--font_S);
margin-bottom: var(--gap_S)
}
.button {
position: relative;
height: fit-content;
padding: var(--gap_S) !important;
border-radius: calc( (var(--gap_M) - var(--gap_S))) !important;
margin: calc(-1* (var(--gap_M) - var(--gap_S))) !important;
margin-top: var(--gap_S)!important;
width: 100%;
text-align:center;
--button_body_color: var(--color_base_light);
--button_shadow_color: var(--section_color_light);
transform: var(--unpressed);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_default_light);
border: var(--gap_XS) solid var(--section_color_light);
border-radius: calc(var(--gap_M) - var(--gap_S) - var(--gap_XS));
pointer-events: none;
}
&:hover, &:focus {
transform: var(--pressed);
}
a {
color: var(--section_color_dark) !important;
font-size: var(--font_S);
text-decoration: none ;
}
}
}
&:nth-last-child(1) {
margin-bottom: 0;
}
nav.arrow-menu{
grid-column: 2/-2 !important;
ol{
padding: 0;
margin-bottom: var(--gap_XL);
display: flex;
position: relative;
flex-wrap:wrap;
justify-content: center;
li {
position: relative;
list-style: none;
min-height: calc(2* var(--gap_XL));
margin-bottom: var(--gap_L);
a, &>span{
position: relative;
display: flex;
flex-wrap: nowrap;
text-decoration: none;
position: relative;
align-items: center;
justify-content: left;
height: 100%;
background-color: var(--section_color_primary);
margin-inline: var(--gap_XL);
box-shadow: 0 var(--gap_S) var(--section_color_dark);
svg {
position: absolute;
height:100%;
display: block;
fill: var(--section_color_primary);
filter: drop-shadow(0 var(--gap_S) var(--section_color_dark));
&.arrow-head {
inset: 0;
left: 100%;
}
&.arrow-tail {
right: 99%;
}
}
span {
align-self: center;
padding: var(--gap_S);
height: min-content;
font-weight: bold;
color: var(--color_base_white);
font-size: var(--font_L);
text-align: center;
padding-inline: auto;
}
}
&:first-child::before {
content: "";
position: absolute;
height: 100%;
width: var(--gap_XL);
background-color:var(--section_color_primary);
border-radius: var(--gap_S) 0 0 var(--gap_S);
&:hover {
transform: var(--pressed);
}
}
&:first-child:has(a)::before {
filter: drop-shadow(0 var(--gap_S) var(--section_color_dark));
transform: var(--unpressed);
}
a {
transform: var(--unpressed);
}
&:hover, &:focus {
a, &::before {
transform: var(--pressed);
}
color: var(--color_base_white);
&:first-child::before, svg, a {
filter: none;
box-shadow: none !important;
transform: var(--pressed);
}
}
&>span {
box-shadow: none;
transform: var(--pressed);
&:first-child::before, svg, a {
filter: none;
box-shadow: none !important;
}
}
}
}
}
.postcard {
display: block;
position: relative;
grid-column: 2/-2 !important;
height: 60vh;
filter: var(--dropshadow_M);
.card-text {
/* opacity: 0.2; */
grid-column: 1;
position: absolute;
display: grid;
height: 100%;
aspect-ratio: 1.5;
left: 0;
z-index: 2;
.testimonial-text {
filter: var(--dropshadow_M);
position: absolute;
/* width: 100%; */
left: 0;
transform: rotate(-1deg);
aspect-ratio: 1.5;
display: grid;
font-size: var(--font_XL);
grid-template-columns: 66.7% auto;
grid-template-rows: auto ;
border-radius: var(--gap_S);
background-color: var(--color_base);
padding: var(--gap_M);
line-height: var(--font_S);
gap: var(--gap_M);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
inset: 0;
background: linear-gradient(31deg, rgba(255, 255, 255, 0.261) 10%, rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0.152) 60%, rgba(255, 255, 255, 0.138) 70%, rgba(255, 255, 255, 0.27) 80%, transparent 90%);
/* background: rgba(102, 0, 255, 0.56); */
pointer-events: none;
border-radius: var(--gap_S);
}
.card_left {
display: flex;
flex-direction: column;
h3 {
line-height: var(--line-height_XL);
color: var(--section_color_dark);
margin-bottom: var(--gap_S);
}
blockquote {
font-size: var(--font_M);
margin-bottom: 0;
p {
position: relative;
line-height: var(--line-height_M);
text-align: left;
/* font-style: italic; */
color: var(--color_text);
padding-bottom: var(--gap_L);
margin:0;
}
}
.link_container {
font-size: var(--font_L);
grid-column: 1;
a {
font-weight: bold;
color: var(--section_color_dark);
text-decoration: none;
}
}
}
.card_right {
align-self: end;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
padding-left: var(--gap_M);
.flag_container {
transform: rotate(1deg);
align-self: flex-end;
justify-self: end;
height: fit-content;
padding: var(--gap_S);
position: relative;
background-color: var(--color_base_white);
margin-bottom: var(--gap_L);
&::after {
content: "";
border: var(--gap_S) dotted var(--color_base);
position: absolute;
inset: calc(-1* var(--gap_XS));
z-index: 0;
}
img.svg-flag {
height: var(--gap_XXL);
border-radius: 0;
border: none;
filter: none;
z-index: 2;
}
}
ul.facts {
margin-top: auto;
list-style: none;
grid-row:2;
padding: 0;
margin-bottom: var(--gap_M);
hyphens: auto;
}
ul.address {
grid-row:3;
justify-self: flex-end;
list-style: none;
padding:0;
margin-bottom: var(--gap_L);
li {
border-bottom: 2px solid var(--color_text);
line-height: var(--line-height_M);
font-size: var(--font_M);
}
}
}
.seperator_line {
position:absolute;
grid-column: 2;
inset: 0;
margin-block: var(--gap_M);
border-left: 2px solid var(--color_text);
}
}
}
.testimonial_image {
height: 100%;
right: 0;
position: absolute;
aspect-ratio: 1.5;
filter: var(--dropshadow_M);
transform: rotate(3deg);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
inset: 0;
background: linear-gradient(27deg, rgba(255, 255, 255, 0.685) 10%, rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0.152) 60%, rgba(255, 255, 255, 0.59) 70%, rgba(255, 255, 255, 0.483) 75%, rgba(255, 255, 255, 0.219) 80%, transparent 90%);
/* background: rgba(102, 0, 255, 0.56); */
border-radius: var(--gap_S);
pointer-events: none;
}
img {
aspect-ratio: 1.5;
object-fit: cover;
}
}
&.layout-1 {
.card-text {
left: unset !important;
right: 0 !important;
}
.testimonial_image {
right: unset !important;
left: 0 !important;
}
}
&:nth-child(9n+1) {
h3, p, li, a {
font-family: "Grape Nuts", cursive;
font-size: 130%;
line-height: 100%;
}
}
&:nth-child(9n+2) {
h3, p, li, a {
font-family: "Caveat", cursive;
font-size: 135%;
line-height: 100%;
}
}
&:nth-child(9n+3) {
h3, p, li, a {
font-family: "Gloria Hallelujah", cursive;
font-size: 110%;
line-height: 100%;
}
}
&:nth-child(9n+4) {
h3, p, li, a {
font-family: "Reenie Beanie", cursive;
font-size: 140%;
line-height: 100%;
}
}
&:nth-child(9n+5) {
h3, p, li, a {
font-family: "Cedarville Cursive", cursive;
font-size: 125%;
line-height: 90%;
}
}
&:nth-child(9n+6) {
h3, p, li, a {
font-family: "Over the Rainbow", cursive;
font-size: 120%;
line-height: 100%;
}
}
&:nth-child(9n+7) {
h3, p, li, a {
font-family: "The Girl Next Door", cursive;
font-size: 115%;
line-height: 100%;
}
}
&:nth-child(9n+8) {
h3, p, li, a {
font-family: "Mynerve", cursive;
font-size: 125%;
line-height: 100%;
}
}
&:nth-child(9n+9) {
h3, p, li, a {
font-family: "Calligraffitti", cursive;
font-size: 120%;
line-height: 120%;
}
}}
.program_related_news_filter {
grid-column: 2/-2 ;
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
column-count: 3;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--gap_M);
row-gap: var(--gap_XL);
filter: var(--dropshadow_M);
padding-bottom: var(--gap_XL);
.news_item {
text-decoration: none;
background-color: var(--color_base_light);
padding: var(--gap_M);
border-radius: var(--gap_M);
transform: scale(1);
break-inside: avoid;
display: grid;
transition: all 0.3s ease;
filter: var(--dropshadow_M);
position: relative;
padding-bottom: var(--gap_XL);
margin-bottom: var(--gap_XL);
grid-template-rows: auto 1fr auto 0%;
height: fit-content;
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_default_primary);
border: var(--gap_XS) solid var(--section_color_primary);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S)
}
&:hover,
&:focus {
transform: scale(1.05) !important;
}
h3 {
font-size: var(--font_L);
text-align: center;
padding: var(--gap_S);
margin-bottom: var(--gap_XS);
color: var(--section_color_dark);
}
img {
border-radius: var(--gap_S);
border: var(--gap_XS) solid var(--color_base_white);
filter: var(--dropshadow_S);
margin-bottom: var(--gap_M);
}
/* .expander {
margin:auto;
} */
.teaser {
margin-top: auto;
font-size: var(--font_S);
line-height: var(--font_S);
margin-bottom:0;
}
.date {
font-size: var(--font_S);
text-align: center;
margin-bottom:0;
height: min-content;
}
a.button {
z-index: 2;
justify-self: center;
position: relative;
object-position: center;
transform: translateY(100%);
bottom: 0;
}
}
}
.program_related_student_gallery {
grid-column: 2/-2 ;
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
grid-template-columns: repeat(3, 1fr);
column-gap: var(--gap_M);
row-gap: var(--gap_XL);
filter: var(--dropshadow_M);
padding-bottom: var(--gap_XL);
column-count: 3;
.student {
text-decoration: none;
background-color: var(--color_base_light);
padding: var(--gap_M);
border-radius: var(--gap_M);
transform: scale(1);
display: grid;
transition: all 0.3s ease;
filter: var(--dropshadow_M);
position: relative;
padding-bottom: var(--gap_XL);
grid-template-rows: auto 1fr auto auto;
height: fit-content;
margin-bottom: var(--gap_XL);
break-inside: avoid;
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_default_primary);
border: var(--gap_XS) solid var(--section_color_primary);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S)
}
&:hover,
&:focus {
transform: scale(1.02) !important;
}
h3 {
font-size: var(--font_L);
text-align: center;
padding: var(--gap_S);
margin-bottom: var(--gap_XS);
color: var(--section_color_dark);
}
.image_head {
border-radius: var(--gap_S);
background: var(--color_base_white);
filter: var(--dropshadow_S);
margin-bottom: var(--gap_S);
img {
border: none;
filter:none;
padding: var(--gap_XS);
aspect-ratio: 1;
object-fit: cover;
}
.info {
display: flex;
flex-wrap: wrap;
margin: var(--gap_S);
margin-top: 0;
gap: var(--gap_XS);
span {
padding: var(--gap_XS);
border-radius: var(--gap_S);
background-color: var(--color_base_white);
filter: var(--dropshadow_S);
}
}
}
.interests {
display: flex;
flex-wrap: wrap;
gap: var(--gap_XS);
margin-bottom: var(--gap_M);
span {
padding: var(--gap_XS);
background: var(--section_color_dark);
color: var(--color_base_white);
border-radius: var(--gap_S);
}
}
.summary p {
font-size: var(--font_S);
line-height: var(--line-height_S);
}
a.button {
z-index: 2;
justify-self: center;
object-position: center;
position: relative;
bottom: 0;
margin-top: calc( -1* 20%);
transform: translateY(100%);
}
}
}
.program_related_event_filter {
grid-column: 2/-2 !important;
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--gap_M);
row-gap: var(--gap_XL);
filter: var(--dropshadow_M);
padding-bottom: var(--gap_XL);
.event {
text-decoration: none;
background-color: var(--color_base_light);
padding: var(--gap_M);
border-radius: var(--gap_M);
transform: scale(1);
display: grid;
transition: all 0.3s ease;
filter: var(--dropshadow_M);
position: relative;
padding-bottom: var(--gap_XL);
grid-template-rows: auto 1fr auto auto;
height: fit-content;
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_default_primary);
border: var(--gap_XS) solid var(--section_color_primary);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S)
}
&:hover,
&:focus {
transform: scale(1.05) !important;
}
.icon_container {
display:grid;
aspect-ratio: 1;
height: calc(3*var(--gap_L));
position: relative;
align-items: center;
justify-items: center;
justify-self: center;
z-index: 2;
margin-top: calc(-1.5* var(--gap_L) - var(--gap_S));
svg {
grid-area: 1/1;
inset: 0;
width:100%;
}
span {
grid-area: 1/1;
color: white;
transform: rotate(-4deg);
transform: translateX(calc(var(--gap_L)*0.05));
font-size: var(--gap_L);
}
}
h3 {
font-size: var(--font_L);
padding: var(--gap_S);
margin-bottom: var(--gap_XS);
color: var(--section_color_dark);
}
.teaser {
margin-top: auto;
font-size: var(--font_S);
line-height: var(--font_S);
margin-bottom: var(--gap_S);
text-align: center;
}
a.button {
z-index: 2;
justify-self: center;
position: absolute;
object-position: center;
margin-bottom: calc(-1* var(--gap_L));
bottom: 0;
}
}
}
.featured-boxes {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: var(--gap_L);
.option-1,
.option-2 {
background-color: var(--section_color_dark);
border-radius: var(--gap_L);
display: grid;
filter: var(--dropshadow_M);
height: fit-content;
align-self: center;
div.content {
position:relative;
grid-row: 1;
margin: var(--gap_M);
* {
color: var(--color_base_white) !important;
}
h3 {
margin-top: var(--gap_S);
margin-bottom: var(--gap_M);
}
p,
ul,
ol {
line-height: var(--line-height_M);
margin-bottom: var(--gap_S);
}
>:nth-last-child(2) {
margin-bottom: var(--gap_L);
}
}
.button {
--button_body_color: var(--section_color_primary);
--button_shadow_color: var(--section_color_dark);
width: 100%;
a {
color: var(--section)
}
}
svg {
align-self: center;
width: calc(3* var(--gap_L));
filter: var(--dropshadow_M);
grid-row:1;
aspect-ratio: 1;
}
&.option-1 {
grid-template-columns: calc(3* var(--gap_L) /2) auto;
svg {
margin-left: calc(-3* var(--gap_L) /2);
}
}
&.option-2 {
grid-template-columns: auto calc(3* var(--gap_L) /2);
svg {
grid-column: 2;
margin-right: calc(-3* var(--gap_L) /2);
}
}
&.section-color_base {
--section_color_light: var(--color_default_light);
--section_color_primary: var(--color_default_primary);
--section_color_dark: var(--color_default_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_default_dark);
background-color: var(--color_base_light);
}
&.section-color_primary {
--section_color_light: var(--color_default_light);
--section_color_primary: var(--color_default_primary);
--section_color_dark: var(--color_default_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_default_dark);
background-color: var(--color_default_light);
}
&.section-color_yfu {
--section_color_light: var(--color_YFU_light);
--section_color_primary: var(--color_YFU_primary);
--section_color_dark: var(--color_YFU_dark);
--section_text_color: var(--color_base);
--section_accent_color: var(--color_base_light);
background-color: var(--color_YFU_light);
}
&.section-color_study_abroad {
--section_color_light: var(--color_Study_Abroad_light);
--section_color_primary: var(--color_Study_Abroad_primary);
--section_color_dark: var(--color_Study_Abroad_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_Study_Abroad_dark);
background-color: var(--color_Study_Abroad_light);
}
&.section-color_host_a_student {
--section_color_light: var(--color_Host_A_Student_light);
--section_color_primary: var(--color_Host_A_Student_primary);
--section_color_dark: var(--color_Host_A_Student_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_text);
background-color: var(--color_Host_A_Student_light);
}
&.section-color_volunteer {
--section_color_light: var(--color_Volunteer_light);
--section_color_primary: var(--color_Volunteer_primary);
--section_color_dark: var(--color_Volunteer_dark);
--section_text_color: var(--color_base);
--section_accent_color: var(--color_text);
background-color: var(--color_Volunteer_light);
}
&.section-color_educators {
--section_color_light: var(--color_Educators_light);
--section_color_primary: var(--color_Educators_primary);
--section_color_dark: var(--color_Educators_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_base);
background-color: var(--color_Educators_light);
}
&.section-color_alumni {
--section_color_light: var(--color_Alumni_light);
--section_color_primary: var(--color_Alumni_primary);
--section_color_dark: var(--color_Alumni_dark);
--section_text_color: var(--color_text);
--section_accent_color: var(--color_Alumni_dark);
background-color: var(--color_Alumni_light);
}
&.section-color_donors {
--section_color_light: var(--color_Donors_light);
--section_color_primary: var(--color_Donors_primary);
--section_color_dark: var(--color_Donors_dark);
--section_text_color: var(--color_base);
--section_accent_color: var(--color_Donors_dark);
background-color: var(--color_Donors_light); }
}
}
/* Menu */
#menu {
position: fixed;
inset: 0;
display: none;
background: var(--color_default_light);
z-index: 100;
grid-template-columns: 20% auto;
gap: var(--gap_M);
padding-block: var(--gap_M);
#Menu_Themes {
display: flex;
flex-direction: column;
background-color: var(--color_default_primary);
padding: var(--gap_XL);
padding-left: 0;
border-radius: 0 var(--gap_XL) var(--gap_XL) 0;
gap: var(--gap_S);
filter: var(--dropshadow_S);
a {
box-sizing: content-box;
background-color: var(--color_base_light);
font-size: var(--font_L);
padding: var(--gap_S);
border-radius: 0 var(--gap_M) var(--gap_M) 0;
padding-left: var(--gap_M);
text-decoration: none;
transition: all 0.3s ease;
filter: var(--dropshadow_S);
&:hover {
padding-left: calc(var(--gap_M) + var(--gap_S));
filter: var(--dropshadow_M);
color: var(--color_default_dark)
}
&.active {
transform: scale(1.1);
padding-left: calc(var(--gap_M) + var(--gap_XS));
margin-right: calc(-1* var(--gap_S));
position: relative;
&::after {
content: "";
position: absolute;
border: var(--color_default_primary) solid var(--gap_XS);
inset: var(--gap_XS);
left: calc(-1* var(--gap_M));
border-radius: calc(var(--gap_M) - var(--gap_XS));
}
}
}
}
#Menu_Pages {
background-color: var(--color_base_light);
padding: var(--gap_XL);
border-radius: var(--gap_XL) 0 0 var(--gap_XL);
filter: var(--dropshadow_S);
overflow-y: scroll;
list-style-type: none;
&>ul {
column-count: 3;
column-gap: var(--gap_M);
filter: var(--dropshadow_S);
min-height: var(--gap_L);
&>li {
break-inside: avoid;
background-color: var(--color_base);
padding: var(--gap_M);
border-radius: var(--gap_M);
height: fit-content;
margin-bottom: var(--gap_M);
}
}
ul {
list-style: none;
padding: 0;
li {
padding: 0;
}
}
a {
display: grid;
grid-auto-flow: column;
text-decoration: none;
padding: var(--gap_XS);
justify-content: start;
gap: var(--gap_XS);
&::before{
content: "⟶";
text-decoration: none;
}
}
details {
background-color: var(--color_base);
border-radius: var(--gap_M);
filter: var(--dropshadow_S);
margin-bottom: var(--gap_L);
summary {
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: var(--line-height_M) auto;
align-items: center;
gap: var(--gap_S);
position: relative;
padding: var(--gap_S);
span {
color: var(--color_text) !important;
position: relative;
font-weight: bold;
grid-column: 2;
text-align: left;
font-size: var(--font_M);
line-height: var(--line-height_M);
}
svg {
aspect-ratio: 1;
height: var(--line-height_M);
grid-column: 1;
transition: transform 0.3s ease;
transform-origin: center;
}
}
summary::-webkit-details-marker {
display: none;
}
.collapsible-content {
margin-inline: var(--gap_S);
text-align: left;
padding-inline: var(--gap_XS);
p {
color: var(--color_text) !important;
}
}
&[open]{
padding-bottom: var(--gap_XS);
&>summary svg {
transform: rotate(45deg);
}
}
}
}
#Menu_Close {
z-index: 2;
background: var(--color_base);
padding: var(--gap_M);
cursor: pointer;
padding: 0;
border:unset;
font-size: var(--font_XL);
position: absolute;
top: 0;
right: 0;
width: var(--gap_XXL);
aspect-ratio: 1;
border-bottom-left-radius: var(--gap_XL);
display: grid;
align-items: center;
justify-items: center;
filter: var(--dropshadow_S);
svg {
height: var(--gap_XL);
aspect-ratio: 1;
transform: rotate(45deg);
}
}
}
/* Map */
.interactive-map {
grid-column: 2/-2;
#map_scroll_wrapper {
background-color: var(--color_base);
position: relative;
padding: var(--gap_L);
border-radius: var(--gap_L);
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap_L);
container-type: inline-size;
#Map {
background-color: var(--color_base_light);
border-radius: var(--corner_M);
padding: var(--gap_M);
filter: var(--dropshadow_S);
grid-area: 1/1;
width: 100%;
position: relative;
aspect-ratio: 1;
overflow-y: hidden;
display: flex;
svg#Interactive_Map_Wrapper {
width: 100%;
align-self: center;
fill: var(--color_base_dark);
stroke-width: 0.5px;
filter: var(--dropshadow_S);
.YFU_Destinations {
fill: var(--color_Study_Abroad_primary);
stroke: var(--color_base_white);
stroke-width: 0.5px;
}
/* .visited-country {
fill: var(--color_YFU_primary);
stroke: var(--color_base_white);
} */
.selected-country {
fill: var(--color_YFU_primary);
}
}
button#Back_To_Globe_Button {
position: absolute;
display: none;
border-radius: 50%;
border: none;
padding: 0;
background: unset;
margin: var(--gap_S);
bottom: 0;
left: 0;
aspect-ratio: 1;
min-width: unset;
width: calc(2*var(--gap_L));
cursor: pointer;
box-shadow: unset;
transform: translateY(calc(-1* var(--gap_XS)));
filter: drop-shadow(0 var(--gap_XS) var(--color_Study_Abroad_dark));
&:hover, &:focus {
filter: none;
transform: none;
}
svg {
position: absolute;
inset: 0;
}
}
button#Show_Help {
position: absolute;
width: var(--gap_L);
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--color_base_white);
border: none;
filter: var(--dropshadow_S);
pointer-events: all;
}
}
#Map_Description {
height: 100%;
aspect-ratio: 1;
display: grid;
grid-template-rows: calc(2*var(--gap_L)) calc(2*var(--gap_L)) 1fr;
position: relative;
#First_Message {
position: absolute;
display: none;
inset: 0;
background-color: var(--color_base_light);
z-index: 5;
border-radius: var(--gap_M);
filter: var(--dropshadow_S);
padding: var(--gap_M);
p {
color: var(--color_Study_Abroad_dark);
font-size: var(--font_L);
}
}
#Description_Top {
grid-row: 1;
display: flex;
justify-content: space-between;
h3 {
align-self: center;
margin-bottom: 0;
font-size: var(--font_XL);
}
#Description_Flag {
position: relative;
top: 0;
right: 0;
filter: var(--dropshadow_S);
img {
border-radius: var(--gap_S);
height: 100%;
align-self: center;
object-fit: cover;
aspect-ratio: 1.5;
}
}
#Top_Globe_Icon {
position: relative;
top: 0;
right: 0;
filter: var(--dropshadow_S);
aspect-ratio: 1;
}
}
#Description_Tabs {
grid-row: 2;
display: flex;
margin-inline: var(--gap_L);
justify-content: space-between;
position:relative;
z-index: 4;
button {
border: none;
background: none;
position: relative;
inset:unset;
.label {cursor: pointer;}
font-weight: bold;
Tab_Story {
white-space: nowrap;
p { background: var(--color_Alumni_light)}
svg use {fill: var(--color_Alumni_light)}
}
Tab_Info {
white-space: nowrap;
p {
background: var(--color_Study_Abroad_light);
color: var(--color_text);
}
svg use {fill: var(--color_Study_Abroad_light)}
}
Tab_List {
white-space: nowrap;
p { background: var(--color_Study_Abroad_dark);}
svg use {fill: var(--color_Study_Abroad_dark)}
}
}
}
#Description_Body {
background-color: var(--color_base_light);
border-radius: var(--corner_M);
padding: var(--gap_M);
filter: var(--dropshadow_S);
height: 100%;
/* overflow: hidden; */
display: grid;
/* border: 3px solid gold; */
grid-row: 3;
&.show-story {
background-color: var(--color_Alumni_light);
#Description_Story {display: grid}
#Description_Info {display: none}
#Description_List {display: none}
}
&.show-info {
background-color: var(--color_Study_Abroad_light);
#Description_Story {display: none}
#Description_Info {display: grid}
#Description_List {display: none}
}
&.show-list {
background-color: var(--color_Study_Abroad_dark);
#Description_Story {display: none}
#Description_Info {display: none}
#Description_List {display: grid}
}
#Description_Story {
position: relative;
height: 100%;
grid-template-columns: calc((3.5 / 5.2) * 80%) auto;
&::before {
content: "";
position: absolute;
inset: 0;
margin: var(--gap_S);
height: 95%;
aspect-ratio: calc(3.5 / 5.2);
z-index: -1; /* Now this stays behind the parent’s content */
transform: rotate(-2deg);
background-color: var(--color_base_light);
border-radius: var(--gap_XS);
filter: var(--dropshadow_M);
}
#Description_Polariod {
position: relative; /* Necessary to anchor ::before */
z-index: 0; /* Create a stacking context */
transform: rotate(2deg);
aspect-ratio: calc(3.5 / 5.2);
margin: var(--gap_S);
height: 95%;
background-color: var(--color_base_light);
display: block;
border-radius: var(--gap_XS);
filter: var(--dropshadow_M);
font-size: var(--font_S);
font-size: 60%;
line-height: var(--line-height_XS);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
inset: 0;
background: linear-gradient(31deg, rgba(255, 255, 255, 0.655) 10%, rgba(255, 255, 255, 0.19) 40%, rgba(255, 255, 255, 0.152) 60%, rgba(255, 255, 255, 0.357) 70%, rgba(255, 255, 255, 0.478) 80%, transparent 90%);
/* background: rgba(102, 0, 255, 0.56); */
pointer-events: none;
border-radius: var(--gap_S); }
img {
padding: 5%;
padding-bottom: 0;
grid-row:1;
aspect-ratio: 1;
object-fit: cover;
filter: saturate(60%);
border: none;
}
.Quote_Container {
padding: var(--gap_S);
p {
height: min-content;
font-weight: bold;
font-family: "Nothing You Could Do", cursive;
margin-bottom: 0;
font-size: 115%;
line-break: normal;
line-height: 100%;
margin-bottom: var(--gap_XS);
Description_Testimonial_Source_Name_Container {
text-align: end;
&::before {
content:"Groetjes, ";
}
}
}
&.font-1 p {font-family: "Grape Nuts", cursive; font-size: 130%;
line-height: 100%;}
&.font-2 p {font-family: "Caveat", cursive;
font-size: 135%;
line-height: 100%;}
&.font-3 p {font-family: "Gloria Hallelujah", cursive;
font-size: 110%;
line-height: 100%;}
&.font-4 p {font-family: "Reenie Beanie", cursive;
font-size: 140%;
line-height: 100%;}
&.font-5 p {font-family: "Cedarville Cursive", cursive; font-size: 125%;
line-height: 90%;}
&.font-6 p {font-family: "Over the Rainbow", cursive;
font-size: 120%;
line-height: 100%;}
&.font-7 p {font-family: "The Girl Next Door", cursive;
font-size: 115%;
line-height: 100%;}
&.font-8 p {font-family: "Mynerve", cursive;
font-size: 125%;
line-height: 100%;}
&.font-9 p {font-family: "Calligraffitti", cursive;
font-size: 120%;
line-height: 120%;}
}
}
#Description_Story_Context {
grid-column: 2;
display: grid;
grid-template-rows: auto auto;
align-items: center;
justify-items: center;
height: 100%;
div {
margin-left: var(--gap_M);
background-color: var(--color_base);
padding-inline: var(--gap_S);
padding-top: var(--gap_M);
border-radius: var(--gap_M);
position: relative;
display: grid;
padding-bottom: calc(1.5*var(--gap_L) + var(--gap_M));
margin-bottom: calc(1*var(--gap_L));
filter: var(--dropshadow_S);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_Alumni_light);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S) }
p {
color: var(--color_text);
margin: 0;
font-size: var(--font_S);
line-height: var(--line-height_S);
text-align: center;
span {
white-space: nowrap;
font-weight: bold;
}
}
a {
position: absolute;
z-index: 2;
justify-self: center;
bottom: 0%;
margin: var(--gap_M);
margin-bottom: calc(-1.5*var(--gap_L));
background-color: var(--color_base_light);
aspect-ratio: 1;
border-radius: 50%;
display: grid;
width: calc(3*var(--gap_L));
justify-content: center;
align-content: center;
padding: var(--gap_M);
text-decoration: none;
font-weight: bold;
filter: drop-shadow(0 var(--gap_S) var(--color_Alumni_light));
transform: var(--unpressed);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_Alumni_light);
border-radius: 50%;
pointer-events: none;
filter: var(--dropshadow_S) }
&:hover, &:focus {
transform: var(--pressed);
filter: drop-shadow(0 0 transparent);
}
span {
width: min-content;
text-align: center;
}
}
}
}
}
#Description_Info {
display: grid;
gap: var(--gap_M);
grid-template-rows: 66.7% 1fr;
.Quick_Facts {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
gap: 0.5rem;
height: 100%;
&>div {
container-type: size;
background: var(--color_base_white);
border-radius: 0.5rem;
filter: var(--dropshadow_S);
position: relative;
padding-left: 10%;
border-radius: 5cqb var(--corner_M) var(--corner_M) 5cqh;
display: flex;
p.info {
word-break: break-word;
hyphens: auto;
font-size: var(--font_S);
margin-block: 0;
/* margin-inline: var(--gap_M); */
text-align: left;
align-self: center;
}
svg {
position:absolute;
opacity: 1;
background-color: var(--color_Study_Abroad_primary);
aspect-ratio: 1;
border-radius: 50%;
height: 100%;
top:0;
left: 0;
path, circle {
fill:none;
stroke-width:1.7;
stroke: white;
}
}
}
}
#Description_Link_Country_Container {
background-color: var(--color_base_white);
padding-inline: var(--gap_M);
padding-top: var(--gap_M);
border-radius: var(--gap_M);
position: relative;
display: grid;
height: fit-content;
/* margin-bottom: calc(1*var(--gap_L)); */
padding-bottom: calc( 1*var(--gap_L));
filter: var(--dropshadow_S);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_Study_Abroad_light);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S)
}
p {
color: var(--color_text);
font-size: var(--font_S);
line-height: var(--line-height_S);
span {
white-space: nowrap;
font-weight: bold;
}
}
a {
position: absolute;
z-index: 2;
justify-self: center;
bottom: 0%;
height: calc(2* var(--gap_L));
margin: var(--gap_M);
margin-bottom: calc(-1*var(--gap_M));
background-color: var(--color_base_white);
display: grid;
border-radius: var(--gap_M);
padding: var(--gap_M);
text-decoration: none;
font-weight: bold;
box-shadow: 0 var(--gap_S) var(--color_Study_Abroad_light);
filter: var(--dropshadow_S);
transform: var(--unpressed);
&::after {
content: "";
position: absolute;
inset: var(--gap_XS);
border: var(--gap_XS) solid var(--color_Study_Abroad_light);
border-radius: calc(var(--corner_M) - var(--gap_XS));
pointer-events: none;
filter: var(--dropshadow_S);
}
&:hover,
&:focus {
transform: var(--pressed);
box-shadow: none;
}
}
}
}
#Description_List{
--line-height_list_li: var(--line-height_S);
--font-size_list_li: var(--font_S);
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--gap_L);
justify-content: space-between;
align-items: end;
h3 {
font-size: var(--font_M);
text-align: center;
cursor: pointer;
margin-top: 0;
margin-bottom: var(--gap_S);
color: var(--color_base_white) !important;
button {
all: unset;
&:focus {
outline: 2px solid #007acc;
outline: -webkit-focus-ring-color auto 5px;
outline-offset: 2px;
border-radius: 4px;
}
}
}
.ul_Container {
position: relative;
border-radius: var(--corner_M);
background-color: var(--color_base_white);
padding-inline: var(--font-size_list_li);
overflow-y: hidden;
&::after {
content: '';
position: absolute;
z-index: 2;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 calc(0.5*var(--line-height_list_li)) 1rem var(--color_base_white),
inset 0 calc(-0.5*var(--line-height_list_li)) 1rem var(--color_base_white);
}
}
ul {
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
height: calc(5 * var(--line-height_list_li) + 2 * var(--line-height_list_li));
overflow-wrap: break-word;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding-block: var(--line-height_list_li);
position: relative;
&::-webkit-scrollbar {
display: none; /* Hide scrollbar in Chrome, Safari, and Brave */
}
li:first-of-type::before {
content:"";
height: var(--line-height_list_li);
display: block;
}
li:last-child::after {
content:"";
height: var(--line-height_list_li);
display: block;
}
}
li {
list-style: none;
/* padding-left: 2rem; */
scroll-snap-align: start;
font-size: var(--font-size_list_li);
line-height: var(--line-height_list_li);
button {
all: unset;
&:focus {
outline: 2px solid #007acc;
outline: -webkit-focus-ring-color auto 5px;
outline-offset: 2px;
border-radius: 4px;
}
}
}
.List_Scroll_Up, .List_Scroll_Down {
--gradient-end: var(--color_Study_Abroad_dark);
--gradient-middle: transparent;
--gradient-switch-point: 40%;
--gradient-opacity: 30%;
position: absolute;
z-index: 20;
width: 100%;
height: var(--line-height_list_li);
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
&::before {
content: "";
position: absolute;
background: linear-gradient(to bottom, var(--gradient-end) var(--gradient-switch-point), var(--gradient-middle));
inset: 0;
opacity: var(--gradient-opacity);
}
z-index: 3;
background: transparent;
border: none;
svg {
padding-block: 0.5rem;
height: 100%;
aspect-ratio: 1;
rotate: 180deg;
width: 100%;
bottom: 0;
stroke-linecap:round;
stroke-miterlimit:2.1;
path{
stroke: var(--color_Study_Abroad_dark);
/* stroke: var(--color_text); */
fill: none;
stroke-width: 1rem;
filter: drop-shadow(0 0 1rem var(--color_base_white));
}
}
}
.List_Scroll_Down.visible, .List_Scroll_Up.visible {
opacity: 1;
pointer-events: auto;
}
.List_Scroll_Down {
top: unset;
bottom: 0;
svg {
rotate: 0deg;
}
&::before {
background: linear-gradient(to top, var(--gradient-end) var(--gradient-switch-point), var(--gradient-middle));
}
}
}
}
}
}
}
.fa-facebook:before {
content: ""
}
.fa-facebook-f:before {
content: ""
}
.fa-facebook-messenger:before {
content: ""
}
.fa-facebook-square:before {
content: "\f082"
}
.fa-twitter:before {
content: ""
}
.fa-twitter-square:before {
content: ""
}
.fa-instagram:before {
content: ""
}
.fa-instagram-square:before {
content: ""
}
.fa-youtube:before {
content: ""
}
.fa-youtube-square:before {
content: ""
}
.fa-snapchat:before {
content: ""
}
.fa-snapchat-ghost:before {
content: ""
}
.fa-snapchat-square:before {
content: ""
}
.fa-pinterest:before {
content: ""
}
.fa-pinterest-p:before {
content: ""
}
.fa-pinterest-square:before {
content: ""
}
.fa-vimeo:before {
content: ""
}
.fa-vimeo-square:before {
content: ""
}
.fa-vimeo-v:before {
content: ""
}
.fa-whatsapp:before {
content: ""
}
.fa-whatsapp-square:before {
content: ""
}
.fa-linkedin:before {
content: ""
}
.fa-linkedin-in:before {
content: ""
}
/*
font-awesome
*/
/*!
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fa/fa-brands-400-e4299464e7b012968eed63ac2db1c9509f56bca409ef9f71f2926a8c3c80b2a9.eot);
src: url(/assets/fa/fa-brands-400-e4299464e7b012968eed63ac2db1c9509f56bca409ef9f71f2926a8c3c80b2a9.eot?#iefix) format("embedded-opentype"), url(/assets/fa/fa-brands-400-8ea8791754915a898a3100e63e32978a6d1763be6df8e73a39d3a90d691cdeef.woff2) format("woff2"), url(/assets/fa/fa-brands-400-f9217f66874b0c01cd8c10b6a295dbc4f609acb6f5adc41c37da46641b57eb02.woff) format("woff"), url(/assets/fa/fa-brands-400-cda59d6efffa685830fd95b55f64ae9cb51279cd34b2410b69f84c7ec30157d9.ttf) format("truetype"), url(/assets/fa/fa-brands-400-a3b9817780214caf01e8aec20bcdc2305a1ff34a15fae81ecd0923df9cd5cd0a.svg#fontawesome) format("svg")
}
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400
}
/*!
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(/assets/fa/fa-solid-900-373c04fd2418f5c77eea49d514731058f1907a94ff3b4e5d7c3e5767e8b53d8b.eot);
src: url(/assets/fa/fa-solid-900-373c04fd2418f5c77eea49d514731058f1907a94ff3b4e5d7c3e5767e8b53d8b.eot?#iefix) format("embedded-opentype"), url(/assets/fa/fa-solid-900-9834b82ad26e2a37583d22676a12dd2eb0fe7c80356a2114d0db1aa8b3899537.woff2) format("woff2"), url(/assets/fa/fa-solid-900-3f6d3488cf65374f6f676c315340b0ac2be832bd55240c809448e36ef9b96326.woff) format("woff"), url(/assets/fa/fa-solid-900-af6397503fcefbd613976c21ad5c1e37298c18bbe07d096db03ccd3af6e05ba8.ttf) format("truetype"), url(/assets/fa/fa-solid-900-9674eb1bd5504717903837093a67668ea88f2ed006d91367d0d4b7aa1f9211fc.svg#fontawesome) format("svg")
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900
}
/*!
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1
}
.fa-lg {
font-size: 1.3333333333em;
line-height: 0.75em;
vertical-align: -.0667em
}
.fa-xs {
font-size: .75em
}
.fa-sm {
font-size: .875em
}
.fa-1x {
font-size: 1em
}
.fa-2x {
font-size: 2em
}
.fa-3x {
font-size: 3em
}
.fa-4x {
font-size: 4em
}
.fa-5x {
font-size: 5em
}
.fa-6x {
font-size: 6em
}
.fa-7x {
font-size: 7em
}
.fa-8x {
font-size: 8em
}
.fa-9x {
font-size: 9em
}
.fa-10x {
font-size: 10em
}
.fa-fw {
text-align: center;
width: 1.25em
}
.fa-ul {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0
}
.fa-ul>li {
position: relative
}
.fa-li {
left: -2em;
position: absolute;
text-align: center;
width: 2em;
line-height: inherit
}
.fa-border {
border: solid 0.08em #eee;
border-radius: .1em;
padding: .2em .25em .15em
}
.fa-pull-left {
float: left
}
.fa-pull-right {
float: right
}
.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
margin-right: .3em
}
.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
margin-left: .3em
}
.fa-spin {
animation: fa-spin 2s infinite linear
}
.fa-pulse {
animation: fa-spin 1s infinite steps(8)
}
@keyframes fa-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.fa-rotate-90 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
transform: rotate(90deg)
}
.fa-rotate-180 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: rotate(180deg)
}
.fa-rotate-270 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
transform: rotate(270deg)
}
.fa-flip-horizontal {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
transform: scale(-1, 1)
}
.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
transform: scale(1, -1)
}
.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
transform: scale(-1, -1)
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
filter: none
}
.fa-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2.5em
}
.fa-stack-1x,
.fa-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%
}
.fa-stack-1x {
line-height: inherit
}
.fa-stack-2x {
font-size: 2em
}
.fa-inverse {
color: #fff
}
YOUTH FOR UNDERSTANDING
België
YOUTH FOR UNDERSTANDING
België
Internships with YFU Flanders
Join our organisation and get the opportunity to develop your intercultural compass
Urgent Call!
We are currently accepting new applications from participants that don't need a visa. Contact us as soon as possible. To start this september.
Are you passionate about shaping the futures of young minds? Do you thrive in diverse environments and believe in the power of cultural exchange? If so, we invite you to explore an exciting opportunity to contribute to our mission in Mechelen, Flanders. Each year, we welcome two dedicated volunteers (F/M/X) to our organization, providing vital support to our initiatives and office operations. Beginning September 2025, we're launching two impactful projects:
CULTURAL GAMES
Focused on developing and managing cultural games and workshops for children (4-12) across Flanders, this project aims to foster intercultural understanding and enrich young lives with diverse experiences. This project conatins a good balance between traveling the country and facilitating these play based learning experiences and planning the sessions and training the jobstudents in our office.
COLOURED GLASSES
An immersive workshop for young people (14-18), Coloured Glasses promotes non-formal education and addresses societal issues, encouraging empathy and dialogue among participants. This project alternates between facilitating workshops and building a network of reliable facilitators and clients.
Supported by the European Solidarity Corps (ESC), these projects offer a unique opportunity for personal growth and making a positive impact. Open to individuals aged 18-30 from: - EU member states - non-EU participating countries (Iceland, Rep. of North Macedonia, Liechtenstein) - EFTA country Norway - neighboring partner countries (such as Albania, Bosnia and Herzegovina, Serbia, Montenegro, Ukraine...)
To learn more and apply, visit our website. Please note that applications must be submitted through our online questionnaire to be considered.Join us in Mechelen, Flanders, and embark on a journey of cultural exchange, education, and collaboration. These positions provide a once-in-a-lifetime opportunity to learn and contribute. Apply now and be part of something extraordinary with the European Solidarity Corps and our organization!
Supported by the European Solidarity Corps (ESC), these projects offer a unique opportunity for personal growth and making a positive impact. Open to individuals aged 18-30 from:
- EU member states - non-EU participating countries (Iceland, Rep. of North Macedonia, Liechtenstein) - EFTA country Norway - neighboring partner countries (such as Albania, Bosnia and Herzegovina, Serbia, Montenegro, Ukraine...) To learn more and apply, read carefully our website. Please note that applications must be submitted through our online questionnaire to be considered.Join us in Mechelen, Flanders, and embark on a journey of cultural exchange, education, and collaboration. These positions provide a once-in-a-lifetime opportunity to learn and contribute. Apply now and be part of something extraordinary with the European Solidarity Corps and our organization!
©
2025
Youth For Understanding. All rights reserved.
Youth For Understanding is een non-profit organisatie.