/* Inter + Manrope are loaded via in each page's instead of @import here, so the font request doesn't block CSS parsing. */ :root { --prim-col: #3ab3b7; --prim-col-dark: #2d9296; --seco-col: #062637; --text-color: #060d2b; --muted-text: #566270; --surface: #ffffff; --surface-alt: #f2f8f9; --border-color: #e1e9eb; --radius: 12px; --shadow-sm: 0 2px 10px rgba(6, 38, 55, 0.07); --shadow-md: 0 10px 28px rgba(6, 38, 55, 0.12); --shadow-lg: 0 18px 44px rgba(6, 38, 55, 0.16); } /************************ Main layouting ******************************/ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: auto; min-height: 100%; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--text-color); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } ::selection { background: var(--prim-col); color: white; } .main-wrapper { min-height:100vh; display: flex; flex-direction: column; } body { display: flex; flex-direction: column; } header { --shrink: 0; --header-height-full: clamp(9em, 22vw, 12em); --header-height-shrunk: clamp(6.5em, 14vw, 7.5em); background-color: var(--seco-col); background-image: linear-gradient(180deg, rgba(6, 38, 55, 0.4) 0%, rgba(6, 38, 55, 0.7) 100%), url("images/banner.jpg"); background-size: cover; background-position: center; min-height: calc(var(--header-height-full) - (var(--header-height-full) - var(--header-height-shrunk)) * var(--shrink)); padding: 0 1.5em; color: white; z-index: 1000; position: sticky; top:0; display: flex; flex-direction: column; justify-content: flex-end; /* Push content to the bottom */ box-shadow: 0 12px 30px rgba(6, 38, 55, 0.18); } header a { text-decoration:none; color: white; } .header-content { margin: 0 auto; display: flex; align-items: center; width:100%; } .header-content h1 { color: white; --title-size-full: clamp(1.6em, 4.5vw, 2.8em); --title-size-shrunk: clamp(1.15em, 3vw, 1.6em); font-size: calc(var(--title-size-full) - (var(--title-size-full) - var(--title-size-shrunk)) * var(--shrink)); line-height: 1.15; letter-spacing: -0.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); } .header-content img { max-width: 500px; width: 100%; height: auto; margin: calc(1.5em - var(--shrink) * 0.7em) 0; } main { flex: 1; padding: 0; background-color: var(--surface); } .content { max-width: 1000px; margin: 0 auto; padding: 4em 2em; } footer { background-color: var(--seco-col); border-top: 3px solid var(--prim-col); padding: 2.5em 0 2em; width: 100%; /* Ensures footer background spans full width */ color: rgba(255, 255, 255, 0.7); } .footer-content { max-width: 800px; margin: 0 auto; padding: 0 1em; text-align: center; font-size: 0.9em; letter-spacing: 0.02em; } button { color:white; background-color: var(--seco-col); border:0; border-radius: 8px; padding:1em; font-weight:bold; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } /******************* Text formatting ******************************/ h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', 'Akkurat Pro', 'Lucida Sans', sans-serif; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--prim-col); } h1 { font-size: 2.15em; } h2 { font-size: 1.55em; } h3 { font-size: 1.2em; } a { font-weight: 600; color: var(--prim-col); transition: color 0.2s ease; } a:hover { color: var(--prim-col-dark); } h1, h2, h3 { margin: 20px 0 12px 0; } em { color: var(--seco-col); font-weight: bold; font-style: normal; } hr { margin: 2em 0; border: none; height: 1px; background: linear-gradient(to right, transparent, var(--border-color) 15%, var(--border-color) 85%, transparent); } /************** spanning image ****************************/ .spanning_img { width: 100%; max-height: 700px; overflow:hidden; } .spanning_img img { width: 100%; display: block; } /************************** main nav **************************/ #main_nav ul { margin:0; padding:0; list-style-type: none; } #main_nav il { list-style-type: none; } #main_nav li a, #main_nav li span { padding: calc(25px - var(--shrink) * 10px) 18px; display:block; text-decoration: none; color: inherit; transition: background-color 0.2s ease; } #main_nav li a:hover, #main_nav li span:hover { background-color: #FFF5; } #main_nav ul li.active a { background-color: #FFF9; } #main_nav ul li.active { color: var(--seco-col); } #main_nav li > span { cursor: pointer; } .burger_button button { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: white; font-size: 1.1em; line-height: 1; padding: 0.55em 0.8em; border-radius: 8px; } .burger_button button:hover { background: rgba(255, 255, 255, 0.24); } @media (max-width:999px) { .igem_vie_wrapper .igem_vie_header, .igem_vie_wrapper main { padding-left: 45px !important; padding-right: 45px !important; } #main_nav { display: none; } .burger_button { margin-left:auto; } #main_nav::-webkit-scrollbar { display:none; } #main_nav { background-color: var(--seco-col); height: calc(100vh - 100%); display: block; overflow-y: scroll; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; right:0; top:100%; width:300px; position:absolute; box-shadow: var(--shadow-lg); transition: width 0.3s ease-out; } #main_nav.nav_collapsed { width:0px; border:none; } #main_nav li { color: black; background-color: #ccc; } #main_nav ul { display:block; } #main_nav > ul ul li { max-height:0px; overflow: hidden; border:none; transition: max-height 0.3s ease-out; } .nav_expanded > ul > li { display:inherit !important; max-height: 100px !important; } .nav_expanded > span { background-color: #0D4060; } #main_nav > ul > li { background-color: var(--seco-col); color:white; } #main_nav > ul > li > ul li { background-color: #ebebeb; } #main_nav > ul > li > ul li a:hover { background-color: #ffa570 !important; } #main_nav > ul > li > ul li > a, #main_nav > ul > li > ul li > span { padding-left:2em; } .nav_expandable > a:after, .nav_expandable > span:after { content: ' ▼'; display:inline-block; transition: transform .3s; float:right; } .nav_expandable.nav_expanded > a:after, .nav_expandable.nav_expanded > span:after { transform: rotate(180deg); } .nav_expanded { border-bottom: none !important; } } @media (min-width:1000px) { #main_nav span, #main_nav a { position:relative; } #main_nav span::before, #main_nav a::before { bottom: 0; left: 0; height: 100%; width: 100%; transform-origin: center; content: ''; display:block; border-bottom: 3px solid var(--prim-col); transform: scale3d(0, 1, 1); position:absolute; } #main_nav span:hover::before, #main_nav a:hover::before, #main_nav ul li.active a::before { transform: scale3d(1, 1, 1); transition: transform 0.4s ease-out; } .burger_button { display: none; } #main_nav { margin-left:auto; margin-top:auto; } #main_nav li a, #main_nav li span { border-radius: 8px 8px 0 0; } #main_nav .igem_vie_expandable > a::after, #main_nav .igem_vie_expandable > span::after { content: ' ▼'; font-size:8pt } #main_nav li { float: left; } #main_nav ul.submenu { padding:0; padding-top: 8px; background-color: #062637; position: absolute; box-shadow: 0 9px 22px rgba(0,0,0,0.07); flex-direction: column; max-height:0px; overflow:hidden; } #main_nav li:not(:hover) .submenu { border:0; padding:0; } #main_nav li:hover .submenu { transition: max-height .5s ease-out; max-height:500px; display: flex; } #main_nav li a, #main_nav li span { text-align: center; } #igem_vie_logo { display: inline-block !important; } } .language-switcher { position: absolute; /* Position links in a fixed place relative to the header */ top: 1.4em; /* Adjust distance from the top */ right: 1.5em; /* Adjust distance from the right */ } .language-switcher p { display: flex; align-items: center; gap: 0.3em; margin: 0; color: rgba(255, 255, 255, 0.4); font-weight: 600; font-size: 0.9em; } .language-switcher .active { color: var(--prim-col); font-weight: 700; } .language-switcher a { background: none; color: rgba(255, 255, 255, 0.75); padding: 0.2em 0.3em; text-decoration: none; font-weight: 600; } .language-switcher a:hover, .language-switcher a:focus-visible { color: white; } /**************** posters *********************/ .poster_section { margin-top: 2.5em; } .poster_section > p { color: var(--muted-text); margin-top: 0.25em; } .poster_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25em; margin-top: 1.25em; } .poster_card { display: flex; gap: 1em; align-items: flex-start; padding: 1.5em; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius); text-decoration: none; color: inherit; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } a.poster_card:hover, a.poster_card:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--prim-col); outline: none; } .poster_card_icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px; background: rgba(58, 179, 183, 0.14); color: var(--prim-col); display: flex; align-items: center; justify-content: center; } .poster_card_icon svg { width: 24px; height: 24px; } .poster_card h3 { margin: 0.4em 0 0.25em 0; font-size: 1.02em; line-height: 1.35; color: var(--seco-col); } .poster_card .poster_meta { margin: 0; color: var(--muted-text); font-size: 0.88em; } .poster_card .poster_cta { display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.9em; font-weight: 700; color: var(--prim-col); font-size: 0.9em; } .poster_badge { display: inline-block; font-size: 0.68em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2em 0.6em; border-radius: 999px; background: rgba(58, 179, 183, 0.16); color: var(--prim-col-dark); } .poster_card.is_placeholder { border-style: dashed; opacity: 0.7; } .poster_card.is_placeholder .poster_card_icon { background: rgba(6, 38, 55, 0.06); color: var(--muted-text); } .poster_card.is_placeholder .poster_badge { background: rgba(6, 38, 55, 0.08); color: var(--muted-text); } /*********** Content *****************/ .content_img { max-width: 90%; padding: 1.5em 0; display: block; margin-left: auto; margin-right: auto; } /**************** news ***********************/ .news_block { border: 1px solid var(--border-color); background-color: var(--surface-alt); border-radius: var(--radius); padding: 1.75em; margin: 0; } .news_block + .news_block { margin-top: 1.5em; } .news_date { color: var(--muted-text); font-weight: bold; } .news_block h3 { margin-top:0; } /********** Headings *********************/ .image_heading { display: flex; align-items:center; gap: 1em; padding: 2em 0 1em 0; } .image_heading img { height: 3.5em; width: auto; padding: 0; border-radius: 6px; } .image_heading h2 { margin: 0; } /****************** Team ********************************/ .team_member { display: flex; align-items: flex-start; width: 100%; padding: 1.5em; border: 1px solid var(--border-color); background-color: var(--surface-alt); border-radius: var(--radius); transition: box-shadow 0.25s ease, transform 0.25s ease; } .team_member:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .team_member .image { min-width: 150px; width: 150px; max-width: 150px; height: 150px; object-fit: cover; border-radius: calc(var(--radius) - 2px); background-color: #e4eef0; border: 1px solid var(--border-color); } .team_member .text { flex: 1; padding-left: 20px; } .team_member + .team_member { margin-top: 1.5em; } @media (max-width: 520px) { .team_member { flex-direction: column; } .team_member .text { padding-left: 0; padding-top: 1.25em; } } /************ Projects ******************/ .projects_triple { display: flex; justify-content: space-between; align-items: center; padding: 1em; gap: 0.3em; flex-wrap: wrap; } .projects_box { max-width: 50%; } .projects_box img { max-width: 100%; border-radius: 8px; } .image_grid { display: flex; padding: 2em 1em; flex-wrap: wrap; gap: 1em; justify-content: space-between; } /* Image Styling */ .image_grid img { flex: 1 1 calc(33.333% - 1em); max-width: calc(33.333% - 1em); height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; } .image_grid img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } @media (max-width: 800px) { .image_grid img { flex: 1 1 100%; /* Full width for stacked layout */ max-width: 100%; /* Ensure images do not exceed full width */ } } /**************** lightbox *********************/ .lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(6, 38, 55, 0.92); padding: 2em; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .lightbox.is_open { opacity: 1; visibility: visible; } .lightbox_figure { max-width: min(90vw, 1100px); margin: 0; display: flex; flex-direction: column; align-items: center; } .lightbox_img { display: block; max-width: 100%; max-height: 78vh; border-radius: 8px; box-shadow: var(--shadow-lg); } .lightbox_caption { margin-top: 1em; color: white; opacity: 0.85; font-size: 0.95em; text-align: center; } .lightbox_close, .lightbox_prev, .lightbox_next { position: fixed; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: white; cursor: pointer; transition: background-color 0.2s ease; } .lightbox_close:hover, .lightbox_prev:hover, .lightbox_next:hover, .lightbox_close:focus-visible, .lightbox_prev:focus-visible, .lightbox_next:focus-visible { background: rgba(255, 255, 255, 0.22); outline: none; } .lightbox_close { top: 1.25em; right: 1.25em; width: 44px; height: 44px; font-size: 1.4em; } .lightbox_prev, .lightbox_next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.3em; } .lightbox_prev { left: 1.25em; } .lightbox_next { right: 1.25em; } body.lightbox_open { overflow: hidden; } @media (max-width: 600px) { .lightbox { padding: 1em; } .lightbox_close { top: 0.75em; right: 0.75em; width: 38px; height: 38px; font-size: 1.2em; } .lightbox_prev, .lightbox_next { width: 42px; height: 42px; font-size: 1.1em; } .lightbox_prev { left: 0.5em; } .lightbox_next { right: 0.5em; } }