/* =================================== =================================== Styles for an individual page - Rename this file to match the page you are working on (e.g. home.css, about.css, etc.) - Create a new file for your page and link this file to it in the of your HTML document - Variables from global.css will work in this CSS file as well. Do not add any variables to this file. =================================== =================================== */ /* =================================== Page Component Styles (icon grid, team member card) =================================== */ .black-text .h3-styles, .black-text .h4-styles, .black-text p { color: var(--color-onyx); } h1 { text-align: center; } .button2 { min-width: var(--spacing185); min-height: 50px; padding: var(--spacing10) var(--spacing40); color: var(--color-white); border: none; border-radius: var(--border-radius10); background-color: var(--button2-color); font-family: var(--main-font); font-weight: var(--font-weight-bold); font-size: var(--font21); } .button2:hover { background-color: var(--color-white); color: var(--color-onyx); } .button3 a:hover { text-decoration: none; } /* =================================== Section Styles (background, padding, etc.) =================================== */ .wrapper { width: var(--mobile-wrapper-width); } .h5-styles { color: var(--color-white); } /* header section */ .header-picture { margin-bottom: var(--spacing80); } picture { width: 100%; } picture img { min-width: 100%; } .h3-styles { margin-top: 0px; margin-bottom: var(--spacing20); } .header-info { width: 90%; margin-bottom: 70px; } /* team card section */ .team-parent { display: flex; flex-direction: column-reverse; justify-content: space-between; width: 90%; margin: 0 auto; } .team-card { margin: var(--spacing20) 0; padding: 60px 26px; background: var(--color-teal); border: none; border-radius: var(--border-radius10); display: flex; flex-direction: column; justify-content: center; align-items: center; } .team-card .h4-styles { margin: 0; } .team-card .h5-styles { margin: var(--spacing10) 0px; } .team-card p { color: var(--color-white); font-size: var(--font16); } .team-card-info { max-width: 530px; } .team-card .text-container button { margin-top: var(--spacing65); } /* Current positions */ .current-positions { margin: 150px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 700px; width: 90%; } /* Margin for current positions and get involved text */ .current-positions .h4-styles, .get-involved .h4-styles { margin: 0px 0px var(--spacing20) 0px; } .current-positions p, .get-involved p { margin: 0px 0px var(--spacing40) 0px; } .current-positions p { text-align: center; } /* get involved section */ .get-involved { margin-bottom: 140px; } .get-involved-picture { margin-bottom: 60px; } .get-involved-text { width: 90%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .black-text .h3-styles, .black-text .h4-styles { text-align: center; } .team-card img, .get-involved img { border-radius: var(--border-radius10); } .team-card img { max-width: 240px; margin-bottom: var(--spacing20); } /* MODAL STYLES */ .hidden { display: none; } /* positioning for body to stop scroll when modal is open */ .fixed { overflow: hidden; } /* Modal Content */ .modal-overlay { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.406); } .team-modal .modal-content { border-radius: var(--border-radius10); background-color: var(--color-white); padding: var(--spacing20); width: 80%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1100px; max-height: 90vh; } .modal-btn-container { display: flex; justify-content: flex-end; } .modal-text-container, .modal-scroll-container { display: flex; flex-direction: column; gap: var(--spacing-sm); line-height: var(--line-height28); font-family: var(--body-font); } .modal-scroll-container { max-height: calc(90vh - 300px); overflow-y: scroll; padding-bottom: var(--spacing40); } .modal-scroll-container p { color: var(--color-onyx); margin-top: 0px; } .modal-text-container h4 { font-size: var(--font-size-title-lg); text-align: center; } .close-modal { background-color: transparent; border: transparent; padding: 0; } .close-modal svg { fill: var(--color-onyx); } .close-modal svg:hover { fill: var(--color-amaranth); } /* /* modal overlay */ .overlay-team { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); z-index: 1; } .natasha-modal, .marsha-modal { width: 90%; max-width: 1100px; max-height: 95vh; margin: 0 auto; /* was 26px and replaced with variable */ padding: 26px; position: fixed; left: 0; right: 0; top: 2vh; background-color: var(--body-background-color); color: var(--color-onyx); border: 1px solid var(--body-background-color); border-radius: 4px; z-index: 2; /* overflow: hidden; */ } .team-modal .modal-wrapper { position: relative; } .team-modal .modal-content { overflow: visible; } .team-modal .modal-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; } .modal-header .team-card-picture { max-width: 140px; border-radius: var(--border-radius10); } /* modal text content */ .natasha-modal .modal-scroll, .marsha-modal .modal-scroll { padding: 0px; } .natasha-modal p, .marsha-modal p { color: var(--color-onyx); } .team-card-info-modal { display: flex; flex-direction: column; } .team-card-info-modal .h4-styles, .team-card-info-modal .h5-styles { text-align: center; color: var(--color-onyx); margin: var(--spacing10) 0px; } .team-btn-close { position: absolute; right: var(--spacing20); top: var(--spacing20); } .team-btn-close button { border: none; background-color: transparent; } .team-btn-close svg { width: 32px; height: 32px; } /* End of modal styles */ /* =================================== Media Queries (overriding styles for different screen sizes) Note: Here we are using a mobile-first approach, so we start with the smallest screen size and work our way up. Start by writing styles for the mobile version of the design on the lines above. Anything that needs to change for larger screens should be added to the media queries below. Feel free to change the min/max-width values to whatever you need. Use variables. =================================== */ /* Tablet and Larger */ @media screen and (min-width: 768px) { /* Add styles that apply to table and desktop */ .wrapper { width: var(--desktop-wrapper-width); } picture img { min-width: 60%; } /* header section */ .header-section { width: 100%; height: 100vh; /* might need to put max height later */ /* max-height: 992px; */ background-image: url("/assets/images/pages/our-team/desktop/header-section-background.png"); background-size: cover; background-position: center; background-color: var(--color-yaleblue); display: flex; align-items: center; } .header-picture { margin-bottom: 0px; } .header-content { width: 85%; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10%; } .header-content > * { width: 50%; } .header-info { margin-bottom: 0px; } .header-info .h3-styles { font-weight: var(--font-weight-bold); line-height: var(--line-height58); color: var(--color-white); text-align: left; } .header-info p { color: var(--color-white); line-height: var(--line-height26); } /* team card section */ .team-parent { margin: var(--spacing164) auto; } .team-card { flex-direction: row; justify-content: left; gap: 30px; padding: 30px; } .team-card-picture { min-width: 240px; } .team-card img { margin-bottom: 0px; } .team-card .text-container button { margin-top: var(--spacing20); } /* current positions */ .current-positions { width: 50%; } /* get involved */ .get-involved { min-height: 70vh; margin-bottom: 0px; /* gradient is opposite- needs to be adjusted in global styles */ background: var(--color-bluepurple); display: flex; align-items: center; } .get-involved-wrapper { width: 70%; margin: 190px auto; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 10%; } .get-involved-text { display: flex; flex-direction: column; align-items: flex-start; } .get-involved .h4-styles { color: var(--color-white); } .get-involved p { color: var(--color-white); margin-bottom: var(--spacing20); } .get-involved-text .button3 { height: 50px; margin: 0 auto; margin-left: 0px; gap: 10px; flex-shrink: 0; border-radius: 10px; background: rgb(0, 0, 0, 0); color: var(--color-white); border: 3px solid var(--color-white); font-size: var(--font21); font-weight: var(--font-weight-bold); line-height: var(--line-height26); cursor: pointer; color: var(--color-white); } .get-involved-text .button3:hover, .get-involved-text .button3:focus { color: var(--color-onyx); background: var(--color-white) !important; } .get-involved-picture { margin-bottom: 0px; width: 435px; } /* Modal */ /* .modal-wrapper { margin: 50px; } */ /* .modal-header, */ .team-modal .modal-header { display: flex; flex-direction: row; gap: 5%; } .team-modal .modal-content { height: 55%; padding: var(--spacing65); } .modal-scroll-container { max-height: calc(60vh - 300px); } .modal-scroll-container p { line-height: var(--line-height28); } .team-modal .btn-close { right: -50px; top: -50px; } .team-card-info-modal .h4-styles, .team-card-info-modal .h5-styles { text-align: left; } .modal-header .team-card-picture { min-width: auto; } } /* Tablet Only */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* Add styles that only apply to tablet. These are usually fixes to get resposnivenes right */ .header-info .h3-styles, .header-info p { margin: 0px; } .header-content picture { max-width: 300px; } } /* Desktop Only */ @media screen and (min-width: 1024px) { /* Add styles that apply specifically to desktop */ .header-content .h3-styles { font-size: var(--font46); } .header-content img { max-width: 420px; } .header-info p { font-size: var(--font21); } .team-card-info { max-width: 100%; } .team-card p { /* adjust later */ margin-top: 8px; } .get-involved .h4-styles { font-size: var(--font46); font-weight: var(--font-weight-bold); line-height: var(--line-height50); color: var(--color-white); text-align: left; } /* current positions */ .current-positions { margin: var(--spacing213) auto; } .current-positions .h4-styles { font-size: var(--font46); line-height: var(--line-height50); } } /* for screen sizes 1300 and larger */ @media screen and (min-width: 1300px) { .header-content { max-width: var(--wrapper-width-max-sm); gap: initial; } .header-content .h3-styles { font-size: var(--font56); } .team-parent { display: flex; flex-direction: row-reverse; justify-content: space-evenly; align-items: center; width: 90%; } .team-card { width: 48%; padding: var(--spacing20); min-height: 375px; align-items: flex-start; } .team-card-picture { width: 200px; } .team-card-info { width: 50%; } } /* for screen sizes 1600 and larger */ @media screen and (min-width: 1600px) { .team-card-parent { width: 75%; } .team-card { min-height: auto; } .get-involved-text { width: 40%; } }