/* VARIABLES */ :root { /* Fonts */ --font-family: calibri, "Open Sans", arial, sans-serif; --font-family-headings: "Open Sans", sans-serif; --font-family-text: var(--font-family); --font-family-alt: var(--font-family); --symbol-family: "Material Symbols Rounded"; /* Responsive font size steps, see: https://utopia.fyi/type/calculator?c=360,16,1.2,1500,20,1.333,6,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --font-size-s: clamp(1rem, 0.9211rem + 0.3509vw, 18px); --font-size-0: clamp(1rem, 0.9211rem + 0.3509vw, 1.25rem); --font-size-1: clamp(1.2rem, 1.0528rem + 0.6544vw, 1.6663rem); --font-size-2: clamp(1.44rem, 1.1933rem + 1.0963vw, 2.2211rem); --font-size-3: clamp(1.728rem, 1.3387rem + 1.7302vw, 2.9607rem); --font-size-4: clamp(2.0736rem, 1.4821rem + 2.6289vw, 3.9467rem); --font-size-5: clamp(2.4883rem, 1.6128rem + 3.8914vw, 5.2609rem); --font-size-6: clamp(2.986rem, 1.7144rem + 5.6517vw, 7.0128rem); /* Text */ --text-font: 400 var(--font-size-0) / 1.35 var(--font-family-text); --h1-font: 600 calc(var(--font-size-4) * 1.15) / 1.1 var(--font-family-headings); --h2-font: 600 var(--font-size-2) / 1.2 var(--font-family-headings); --h3-font: 400 var(--font-size-2) / 1.2 var(--font-family-headings); --h4-font: 400 var(--font-size-1) / 1.4 var(--font-family-headings); /* Spacing */ --spacing-horizontal: clamp(1.25rem, 4vw, 3rem); --spacing-s: 1rem; --spacing-m: 2rem; --spacing-l: 3rem; --spacing-xl: clamp(3rem, 2rem + 4vmin, 6rem); --spacing-xxl: clamp(4rem, 3rem + 6vmin, 10rem); --max-container-width: 1600px; --transition: 0.2s ease; --shadow: /* Inner glow: inset 0 0 0.5px 1px hsl(0deg 0% 100% / 7.5%), */ /* Shadow ring: */ 0 0 0 1px hsl(0deg 0% 0% / 5%), /* Multiple soft shadows: */ 0 0.3px 0.4px hsl(0deg 0% 0% / 2%), 0 0.9px 1.5px hsl(0deg 0% 0% / 4.5%), 0 3.5px 6px hsl(0deg 0% 0% / 9%); /* Background colors */ --base-color: transparent; --base-color-alt: #fff; /* Text colors */ --text-color: #fff; --text-color-alt: #2a2d2d; /* Highlight colors */ --brand-color: #6b5f97; --brand-color-alt: #fff; /* Input variables */ --input-background: transparent; --input-text: var(--text-color-alt); --input-text-hover: var(--text-color-alt); --input-placeholder: var(--text-color-alt); --input-border: 2px solid var(--brand-color); --input-background-hover: #fff3; --input-border-color-hover: #fff; --input-radius: 0; /* Button variables */ --button-background: var(--brand-color); --button-text: var(--text-color); --button-radius: 99rem; --button-border: 1px solid var(--button-color); --button-background-hover: var(--button-text); --button-border-color-hover: #fff; --button-text-hover: var(--button-background); --button-alignment: center; /* Countdown variables */ --countdown-background: transparent; --countdown-text: var(--text-color); --countdown-radius: 0; /* Videosync footer variables */ --footer-background: #fff; --footer-text: #000; } /* GENERAL */ body { background-size: cover; background-position: center top !important; } body:not(.eventstate-public_ondemand, .eventstate-public_live) { background-size: cover !important; background-position: center bottom !important; } @media (width >= 1400px) { body:is(.eventstate-public_ondemand, .eventstate-public_live) { background-size: 100% auto !important; } } .vs-mainwrapper { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-family-text); font-size: var(--font-size-0); } .vs-mainwrapper :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-family-headings); text-wrap: balance; } .vs-mainwrapper :is(div, input, button, select, textarea, p, li) { font-family: inherit; } .section-heading { margin: 0 0 1em; padding: unset; font: var(--h2-font); color: var(--text-color-alt); text-align: center; } @media (width <= 750px) { .section-heading { text-align: center; } } @media (width <= 500px) { p, h1, h2, h3, h4, h5, h6 { hyphens: auto; overflow-wrap: break-word; } } .vs-mainwrapper > :is(section, header, footer) { display: grid; grid-template: ". container ." auto / auto minmax(50px, var(--max-container-width)) auto; order: 0; } .vs-mainwrapper > *:is(section, header, footer)::before, .vs-mainwrapper > *:is(section, header, footer)::after { content: unset; } .vs-mainwrapper > * > :is(div.container, .main-header, registration, react-component) { grid-area: container; justify-self: stretch; width: unset; max-width: unset !important; } .vs-mainwrapper > * > * > .content { width: 100%; } body:not(.is-in-iframe) .vs-mainwrapper { min-height: calc(100vh - 60px); } @media (width <= 500px) { body:not(.is-in-iframe) .vs-mainwrapper { min-height: calc(100vh - 85px); } } .brand-color { color: var(--brand-color); } /* HEADER */ #vs-header { z-index: 10; align-items: center; min-height: unset; padding: .75rem var(--spacing-horizontal) !important; /* box-shadow: var(--shadow); */ } #vs-header .header-content { display: grid; grid-template: "logo subheader meta" auto / max-content 1fr max-content; gap: 15px 30px; align-items: center; padding: 0; } #vs-header .header-content .logo { display: flex; grid-area: logo; align-items: center; max-width: 35vw; } #vs-header .header-content .logo img { padding: unset !important; } #vs-header .header-content .main-heading { display: none; } body:not(.eventstate-public_live, .eventstate-public_ondemand) #vs-header .subheader { display: none; } #vs-header .subheader { grid-area: subheader; margin: unset; padding: unset; } #vs-header .subheader p { margin: unset; font: var(--h4-font); font-size: max(var(--font-size-0), 20px); font-weight: 600; color: var(--text-color); text-align: center; text-wrap: balance; } #vs-header .brand-color { font-weight: 400; } #vs-header .meta { display: flex; grid-area: meta; flex-flow: row nowrap; gap: 1rem; align-items: end; justify-content: flex-end; min-width: 140px; margin: 0; margin-top: 0.35rem; padding: unset; } #vs-header .meta a { display: flex; gap: 0.5em; align-items: center; font: var(--text-font); font-size: var(--font-size-s); color: var(--text-color); text-decoration: none; } #vs-header .meta a .link-text { line-height: 1; transition: var(--transition); } #vs-header .meta a .material-symbols-rounded { font-size: 1.25em; font-weight: 300; line-height: 1; color: var(--text-color); transition: var(--transition); } #vs-header .meta a:hover { color: var(--brand-color); } #vs-header .meta a:hover .link-text { color: var(--brand-color); text-decoration: underline; } #vs-header .meta a:hover .material-symbols-rounded { color: var(--brand-color); } @media (width <= 650px) { :is(.eventstate-public_live, .eventstate-public_ondemand) #vs-header .header-content { grid-template: "logo meta" auto "subheader subheader" auto / 1fr max-content; } #vs-header .subheader { margin: .5rem 0 0; padding: 0; border: none; } #vs-header .subheader p { text-align: center; } } @media (width <= 500px) { #vs-header .header-content { grid-template: "logo" auto "meta" auto / 1fr; justify-content: center; justify-items: center; } :is(.eventstate-public_live, .eventstate-public_ondemand) #vs-header .header-content { grid-template: "logo" auto "subheader" auto "meta" auto / 1fr; } #vs-header .meta { justify-content: center; margin: 0; } } /* REGISTRATION */ #vs-registration { flex: 1; margin: 0 auto; padding: var(--spacing-l) var(--spacing-horizontal) !important; background-repeat: no-repeat; background-position: center; background-size: contain !important; } #vs-registration registration { display: flex; width: 100%; } #vs-registration .container:not(.separate-image-wrapper) { display: flex; flex-direction: row; gap: max(var(--spacing-m), 40px) !important; align-items: center; justify-content: flex-end; max-width: unset; padding: unset; } #vs-registration .container.separate-image-wrapper { display: grid; grid-template: "content image" auto / 600px auto; gap: max(var(--spacing-m), 40px) !important; align-items: stretch; justify-content: space-between; max-width: unset; padding: unset; } #vs-registration .content { display: grid; grid-template-columns: 1fr max-content; gap: var(--spacing-l) var(--spacing-l) !important; place-items: stretch stretch; justify-items: stretch; } #vs-registration .register-text-container { display: flex; flex-direction: column; justify-content: start; max-width: 650px; margin: unset; padding: unset; } .register-text-container > * { margin: unset; color: var(--text-color); text-shadow: 2px 2px 6px #0003; } .register-text-container h1 { margin: 0.15em 0; font: var(--h1-font); } .register-text-container h3 { margin-left: 0; font: var(--h3-font); } .register-text-container h4 { font: var(--h4-font); } .register-text-container b { font-weight: 600; } /* REG FORM */ #vs-registration .register-form { --text-color: var(--text-color-alt); position: relative; justify-self: end; width: 100%; max-width: 500px !important; margin: unset; padding: 1.5rem !important; background-color: #fffa !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 0 !important; box-shadow: var(--shadow); } .register-form h3.register-text { margin: 0 0 0.5em; font: var(--h4-font); font-size: var(--font-size-1); color: var(--text-color); text-align: left; } .register-form h3.register-text p { margin: unset; font: inherit; text-align: inherit; } #vs-registration .register-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } #vs-registration .register-item { grid-column: span 2; } #vs-registration .register-item:is(:nth-of-type(1), :nth-of-type(2)) { grid-column: span 1; } #vs-registration .register-label { padding: unset; font-size: 15px; line-height: 1.25em !important; color: var(--text-color); text-wrap: pretty; } #vs-registration .required-label-asterisk { display: none; } #vs-registration .register-item .required { z-index: unset; float: unset; display: flex; grid-column: 2/3; grid-row: 2/3; place-self: stretch stretch; align-items: center; justify-content: center; width: unset; margin: unset; font-size: 0; line-height: 1em; color: var(--input-placeholder); text-align: center; } #vs-registration .register-item .required::after { content: "emergency"; display: block; font-family: var(--symbol-family); font-size: 0.8rem; font-weight: 100; } #vs-registration :is(input, textarea) { resize: none; max-width: unset !important; height: 2em; margin: unset; padding: .25em 0 0; font-size: 16px; line-height: 1; color: var(--input-text) !important; background-color: var(--input-background) !important; border-bottom: var(--input-border); border-radius: var(--input-radius) !important; transition: var(--transition); } #vs-registration .register-item input.ng-invalid.ng-touched { background-color: var(--input-background) !important; border-color: #a94442 !important; } #vs-registration .register-item input.ng-invalid.ng-touched + .required { color: #a94442 !important; } #vs-registration input.ng-invalid.ng-touched + .required::after { content: "\e000"; font-size: 1.1rem; font-weight: 400; } #vs-registration .register-item input.ng-scope:is(:hover, :focus) { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover) !important; outline: none; } #vs-registration .register-item:is(.register-item-type-text, .register-item-type-email) { display: grid; grid-template-columns: 1fr 2em; gap: 4px 0; align-items: center; } #vs-registration .register-item:is(.register-item-type-text, .register-item-type-email) input { grid-column: 1/3; grid-row: 1/2; margin: unset; } /* Register form / textarea */ #vs-registration .register-item-type-textarea { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.75rem; } #vs-registration .register-item-type-textarea textarea { padding: 0.5rem; line-height: 1em; background-color: var(--input-background) !important; border: var(--input-border); border-radius: var(--input-radius) !important; outline: none !important; } #vs-registration .register-item textarea.ng-scope:is(:hover, :focus) { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover) !important; outline: none; } /* Register form / checkbox */ #vs-registration .register-item-type-checkbox { margin: unset; } #vs-registration .register-item-type-checkbox.privacyread { margin: 0.5rem 0 0; } #vs-registration .register-item-type-checkbox .register-label { display: grid; grid-template-columns: auto 1fr; gap: 0.75em; margin: unset; padding: unset; } #vs-registration .register-item-type-checkbox .register-choice { padding: unset; } #vs-registration .register-item-type-checkbox .register-choice p { margin: unset; font: var(--text-font); font-size: 15px; color: var(--text-color); } #vs-registration .register-item-type-checkbox .register-choice p .material-symbols-rounded { font-size: inherit; font-weight: 100; } #vs-registration .register-item-type-checkbox .register-label input { display: none; } #vs-registration .register-item-type-checkbox .checkbox-style { display: flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; color: var(--text-color) !important; background-color: var(--input-background); border: var(--input-border); border-radius: var(--input-radius) !important; transition: var(--transition); } #vs-registration .register-item-type-checkbox .checkbox-style::after { content: "\e5ca"; font-family: var(--symbol-family); font-size: 1.15rem; color: var(--text-color-alt); opacity: 0.1; transition: var(--transition); } #vs-registration .register-item-type-checkbox .register-label:hover > .checkbox-style { background-color: var(--input-background-hover); border-color: var(--input-border-color-hover) !important; } #vs-registration .register-item-type-checkbox .register-label input:checked + .checkbox-style::after { font-weight: 700; color: var(--input-text-alt); opacity: 1; } /* Register form / select */ #vs-registration .register-item-type-select > div.ng-scope { display: grid; grid-template-columns: max-content 1fr; gap: 1rem; align-items: center; justify-content: stretch; margin: 0.25rem 0 0.5rem; padding: unset !important; } #vs-registration .register-item-type-select h4 { margin: 0; font: var(--text-font); font-size: 15px; color: var(--text-color); } #vs-registration .register-item-type-select select { max-width: unset !important; height: 2.25em; margin: 0; padding: 0.25rem; font-size: 16px; color: var(--text-color-alt) !important; background-color: color-mix( in srgb, var(--brand-color), transparent 30% ) !important; border: none; border-radius: 6px !important; } /* Register form / radio buttons */ #vs-registration .register-item-type-radio { margin-top: 0.75rem; } #vs-registration .register-item-type-radio > div { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 4rem; align-items: center; padding: 0 !important; } #vs-registration .register-item-type-radio h4 { grid-column: span 2; margin: 0; font: var(--text-font); font-size: 15px; color: var(--text-color); } #vs-registration .register-item-type-radio .register-label { cursor: pointer; } #vs-registration .register-item-type-radio input { display: none; } #vs-registration .register-item-type-radio p { margin: 0; } #vs-registration .register-item-type-radio .radio-style { display: flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; color: var(--text-color-alt); background-color: #fff9; border: 1px solid transparent; border-radius: 50%; transition: var(--transition); } #vs-registration .register-item-type-radio .radio-style::after { content: ""; display: block; width: 0.65em; height: 0.65em; opacity: 0.05; background-color: var(--brand-color); border-radius: 50%; transition: var(--transition); } #vs-registration .register-item-type-radio input:checked + .radio-style::after { opacity: 1; } /* Register form / submit button */ #vs-registration .register-form > div > .register-justify { display: flex; justify-content: var(--button-alignment); } #vs-registration #submit-button { display: flex; gap: 2rem; align-items: center; justify-content: space-between; width: fit-content; min-height: 2em; margin: 0; padding: .1em 1em 0; font: var(--text-font); line-height: 1; color: var(--button-text) !important; background-color: var(--button-background) !important; border: var(--button-border) !important; border-radius: var(--button-radius) !important; transition: var(--transition); } #vs-registration #submit-button::after { content: "arrow_right_alt"; display: block; font-family: var(--symbol-family); font-size: 1.5em; font-weight: 300; transition: var(--transition); } #vs-registration #submit-button:disabled { opacity: 0.5; } #vs-registration #submit-button:hover { color: var(--button-text-hover) !important; background-color: var(--button-background-hover) !important; border-color: var(--button-border-color-hover) !important; box-shadow: var(--shadow); } #vs-registration #submit-button:hover::after { transform: translateX(0.25em); } #vs-registration .register-form > div:last-of-type { display: flex; flex-direction: column; gap: 1rem; } #vs-registration .requiredfieldsinfo { display: none; } #vs-registration .container .hidden-image { position: relative; grid-area: image; } #vs-registration .container .hidden-image img { width: 100%; max-width: 600px; height: 100%; margin: unset; object-fit: contain; object-position: bottom right; border-radius: unset; } @media (width <= 1050px) { #vs-registration .container .content { grid-template-columns: 1fr; } #vs-registration .register-form { justify-self: center; } #vs-registration .register-text-container { justify-self: center; } #vs-registration .register-text-container > * { text-align: center; } } @media (width <= 500px) { #vs-registration .container.separate-image-wrapper { grid-template: "content" auto "image" auto / 1fr; } #vs-registration .container.separate-image-wrapper .hidden-image img { width: 90%; max-width: 600px; height: 90%; margin: unset; object-fit: contain; object-position: bottom right; border-radius: unset; } } /* HIDDEN */ #vs-hidden { flex: 1; align-items: center; justify-content: stretch; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-horizontal) var(--spacing-xxl) !important; background-repeat: no-repeat; background-position: calc(50% + 100px) center; background-size: cover !important; } #vs-hidden .container { display: flex; flex-direction: row !important; align-items: stretch; justify-content: stretch; width: 100%; margin: 0 !important; } #vs-hidden .container.separate-image-wrapper { container-type: inline-size; display: flex; grid-template: "content image" auto / 1fr 1fr; gap: var(--spacing-m); align-items: flex-start; max-width: unset; padding: unset; } #vs-hidden .content { position: relative; display: flex; grid-area: content; flex-direction: column; gap: var(--spacing-m); align-items: center; justify-content: center; width: 100%; padding: unset !important; } :is(.eventstate-paused_live, .eventstate-hidden_ondemand) #vs-hidden .content { gap: 0; } #vs-hidden .hidden-text { width: 100%; margin: 0; } #vs-hidden .hidden-text > span { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .hidden-text > span > * { margin: 0; text-align: center; text-shadow: 2px 2px 6px #0003; } .hidden-text > span > p { display: none; } .hidden-text h1 { max-width: 700px; margin: 0 0 0.35em; font: var(--h1-font); } .hidden-text h3 { font: var(--h3-font); } .hidden-text h4 { max-width: 700px; font: var(--h4-font); } .hidden-text b { font-weight: 600; } #vs-hidden .container .hidden-image { position: relative; display: none; grid-area: image; } #vs-hidden .container .hidden-image img { max-width: unset; margin: unset; object-fit: cover; border-radius: unset; } /* COUNTDOWN */ .countdown-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.75rem; place-content: center center; align-items: center; width: fit-content; margin: unset; } .countdown-container .counter { gap: 0; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: max(1.75em, 80px); min-width: unset; height: auto; min-height: unset; padding: 0.15em 0.15em 0.05em; font-size: var(--font-size-4); color: var(--countdown-text); opacity: unset; background-color: var(--countdown-background); border: 2px solid #fff; border-radius: var(--countdown-radius); box-shadow: var(--shadow); } .countdown-container :is(.days, .hours, .minutes, .seconds) { order: 2; min-width: 1.35em; font: var(--text-font); font-size: inherit; line-height: 1; text-align: center; text-shadow: 2px 2px 6px #0009; } .countdown-container .counter-text { margin: unset; font: var(--text-font); font-size: var(--font-size-0); font-weight: 400; color: var(--countdown-text); text-shadow: 2px 2px 6px #0009; } .countdown-container .counter-text p { margin: unset; color: var(--countdown-text); } @media (aspect-ratio >= 1/1) and (width <= 1000px) { #vs-hidden { background-position: center center; } } @media (width <= 850px) { #vs-hidden .container .content { grid-template-columns: 1fr; } #vs-hidden .countdown-wrapper { max-width: 400px; margin: 0 auto; } #vs-hidden .container .countdown-container { grid-template-columns: 1fr 1fr 1fr 1fr; align-content: center; justify-self: center; } #vs-hidden .container .countdown-container .counter > div:is(.days, .hours, .minutes, .seconds) { font: var(--h1-font); font-size: 2.75rem; } } @media (width <= 650px) { #vs-hidden { background-position: calc(50% - 30vh) center; } #vs-hidden .container .content { grid-template-columns: 1fr; } #vs-hidden .hidden-text { margin: 0 auto; } #vs-hidden .container .countdown-container { grid-template-columns: 1fr 1fr 1fr 1fr; justify-self: center; } #vs-hidden .container .countdown-container .counter .counter-text { font-size: 14px; } } @media (width <= 450px) { #vs-hidden .container .countdown-container { grid-template-columns: 1fr 1fr; } } /* PRESENTATION */ #vs-presentation { grid-template: ". container ." auto / auto minmax(50px, 2000px) auto; padding: var(--spacing-m) 0; } #vs-presentation:has(> .container-no-slides) { grid-template: ". container ." auto / auto minmax(50px, 1200px) auto; } .vs-mainwrapper:has(> #vs-messageboard) #vs-presentation { padding-bottom: 0; } #vs-presentation .container { gap: 20px 0; align-items: start; justify-content: center; margin: 0; padding: 0; } #vs-presentation .container > div:is(.video-container, .slide-container) { min-height: unset; padding: 0; font-size: 16px; } #contentBelowVideo { padding: 1rem var(--spacing-s) 0; font-size: 15px; color: var(--text-color); } #contentBelowVideo p { margin: 0; margin: 0 0 .5em; line-height: 1.2; } @media (width >= 2040px) { #contentBelowVideo { padding: 1rem 1rem 0 0; } } @media (width >= 1200px) { #vs-presentation:has(> .container-no-slides) #contentBelowVideo { padding: 1rem 1rem 0 0; } } @media (width <= 766px) { #vs-presentation .container { gap: min(var(--spacing-m), 2vw); padding: unset; } } @media (width <= 450px) { #vs-presentation .container > div:is(.video-container, .slide-container) { font-size: 14px; } } /* THUMBNAILS */ #vs-thumbnails { max-width: var(--max-container-width); margin: 0 auto; } .eventstate-public_ondemand #vs-thumbnails { flex: 1; } #vs-thumbnails .container { margin: 0 !important; padding: 0; } #vs-thumbnails .container .slidethumbnails--item { position: relative; padding: 4px; border-radius: 6px; } #vs-thumbnails .container .slidethumbnails--item button { position: relative; overflow: hidden; display: flex; } #vs-thumbnails .container .slidethumbnails--item.active { outline: 2px solid var(--brand-color); } #vs-thumbnails .container .slidethumbnails--item.active button::before { content: "Current slide"; position: absolute; top: 4px; left: 4px; padding: 0.1em 0.5em 0.25em; font-size: 14px; background-color: #0009; backdrop-filter: blur(4px); border-radius: 9rem; box-shadow: var(--shadow); } #vs-thumbnails .container .slidethumbnails--item.browsed-slide { outline: 2px solid color-mix(in srgb, var(--brand-color) 30%, transparent); } @media (width <= 420px) { #vs-thumbnails .container .slidethumbnails--item.active button::before { font-size: 12px; } } /* CHAPTERS */ #vs-chapters { order: 1; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-horizontal) var(--spacing-xl) !important; } body:not(.eventstate-public_live, .eventstate-public_ondemand) #vs-chapters { display: none; } #vs-chapters .container { width: 100%; max-width: 1000px !important; margin: 0 auto !important; } #vs-chapters .content { display: grid; } #vs-chapters .chapter-list { display: flex; flex-flow: column nowrap; gap: 0.75rem; max-width: 500px; margin: 0 auto; padding: unset; } #vs-chapters .chapter-list .chapter-list--item { display: grid; grid-template-columns: 3em 1fr; flex-basis: unset; gap: 0 1.75rem; align-content: start; align-items: stretch; break-inside: avoid; margin: 0; padding: unset; font: var(--text-font); font-size: var(--font-size-0); } #vs-chapters .chapter-list--item h4:not(.time, .title, .subtitle), #vs-chapters .chapter-list--item .text, #vs-chapters .chapter-list--item .text * { grid-column: span 2; margin: 0; font: inherit; } #vs-chapters .chapter-list--item :is(.time, .title, .subtitle) { margin: 0; font: inherit; } #vs-chapters .chapter-list--item .time { order: 0; padding: 0; font-weight: 700; text-align: right; } #vs-chapters .chapter-list--item .title { order: 1; } #vs-chapters .chapter-list--item .subtitle { grid-column: 2; order: 2; opacity: 0.75; } @media (width <= 750px) { #vs-chapters .chapter-list { columns: 1 auto; max-width: 450px; margin: 0 auto; } } /* SPEAKERS */ #vs-speakers-section { order: 1; padding: var(--spacing-xl) var(--spacing-horizontal) var(--spacing-xxl); background: no-repeat center / cover url("https://cdn.videosync.fi/events/bioarctic/67a31e25efddfbd45a7072b0/images/bioarctic-speakers-background.webp"); } #vs-speakers-section > * { width: 100%; max-width: 1000px !important; margin: 0 auto !important; } #vs-speakers-section > * > div { display: grid; } #vs-speakers-section .section-heading { color: #fff; text-shadow: 2px 2px 6px #0006; } #vs-speakers-section ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: min(1.75rem, 6vw) min(1.5rem, 4vw); justify-content: center; margin: unset; padding: unset; } #vs-speakers-section ul .speakers-section-speaker-item { overflow: hidden; width: 100%; max-width: 300px; margin: 0; padding: 0; color: #fff; background-color: transparent; border: 2px solid #fff; border-radius: 0; box-shadow: var(--shadow); } #vs-speakers-section ul .speakers-section-speaker-item > div { display: flex; flex-direction: column; gap: 0; height: 100%; margin: unset; } #vs-speakers-section .speakers-section-speaker-item > div > div:first-of-type { overflow: hidden; display: flex; align-items: stretch; justify-content: stretch; border-radius: 0; } #vs-speakers-section .speakers-section-speaker-item-text-content { display: flex; flex: 1; flex-direction: column; padding: .75rem 1rem; background: transparent; border-top: 2px solid #fff; } #vs-speakers-section .speakers-section-speaker-item-text-content > div { display: flex; flex-direction: column; gap: 0.25rem; justify-content: flex-start; } #vs-speakers-section .speakers-section-speaker-item-text-content h3 { margin: unset; font: var(--text-font); font-size: calc(var(--font-size-0) * 1.2); font-weight: 700; line-height: 1.1; text-shadow: 2px 2px 6px #0009; } #vs-speakers-section .speakers-section-speaker-item-text-content h4 { margin: unset; font: var(--text-font); font-size: var(--font-size-0); line-height: 1.1; text-shadow: 2px 2px 6px #0009; } @media (width <= 800px) { #vs-speakers-section ul { grid-template-columns: 1fr 1fr; justify-self: center; } } /* MESSAGEBOARD */ #vs-messageboard { --input-background: #fdfdfd; --input-text: var(--text-color-alt); --input-text-hover: var(--text-color-alt); --input-placeholder: var(--text-color-alt); --input-border: 1px solid #fff; --input-background-hover: #fdfdfd; --input-border-color-hover: #fff; --input-radius: 0; flex: 1; padding: var(--spacing-l) var(--spacing-horizontal) var(--spacing-xl) !important; } #vs-messageboard .container { width: 100%; max-width: 800px !important; padding: 0; } #vs-messageboard .section-heading { margin: 0 0 0.75em; font: var(--h4-font); font-size: var(--font-size-1); font-weight: 400; color: var(--text-color); text-align: center; text-shadow: 2px 2px 6px #0009; text-transform: none; } .eventstate-public_ondemand #vs-messageboard .section-heading { display: none; } #vs-messageboard .wide > div > div { display: grid; grid-template-columns: 1fr; gap: 0 var(--spacing-m); width: 100%; margin: 0 auto; } /* Comment form */ #vs-messageboard .comment-feed-header { position: relative; width: 100%; max-width: 800px; margin: 0 auto var(--spacing-m); padding: unset; border: unset; } .eventstate-public_ondemand #vs-messageboard .comment-feed-header { display: none; } #vs-messageboard .comment-feed-header h3 { display: none; margin: 0 0 0.75em; font: var(--h4-font); font-weight: 400; color: var(--text-color); text-align: center; } #vs-messageboard .comment-form { display: flex; flex-direction: column; margin: unset; padding: unset; border: none; border-radius: unset; } #vs-messageboard .comment-form form { display: grid; grid-template-columns: 1fr 2fr min-content; gap: 0.5rem 1rem; align-items: start; justify-content: space-between; } /* Name and comment fields */ #vs-messageboard .comment-form :is(#comment-name, #comment-text) { resize: vertical; width: 100%; max-width: unset; height: calc(2.15 * var(--font-size-s)); max-height: 200px; margin: 0; padding: .1em 0.6em 0; font: var(--text-font); font-size: var(--font-size-s); line-height: 1.1; color: var(--input-text); background-color: var(--input-background); border: var(--input-border); border-radius: var(--input-radius) !important; outline: none; box-shadow: var(--shadow); transition: var(--transition), height 0s; } #vs-messageboard .comment-form #comment-text { padding-top: 0.6em; } #vs-messageboard .comment-form :is(#comment-name, #comment-text)::placeholder { color: var(--input-placeholder); opacity: 0.75; } #vs-messageboard .comment-form :is(#comment-name, #comment-text):is(:hover, :focus) { color: var(--input-text-hover) !important; background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover) !important; outline: none; } /* Comment button */ #vs-messageboard #submit-button { display: flex; gap: 1rem; align-items: center; justify-content: space-between; min-height: calc(2.15 * var(--font-size-s)); margin: 0; padding: 0 1em; font-family: var(--font-family-headings); font-size: var(--font-size-s); color: var(--button-text) !important; background-color: var(--button-background) !important; border: var(--button-border) !important; border-radius: var(--button-radius) !important; box-shadow: var(--shadow); transition: var(--transition); } #vs-messageboard #submit-button::after { content: "play_arrow"; display: block; font-family: var(--symbol-family); font-size: 1.35em; font-weight: 300 !important; transition: var(--transition); } #vs-messageboard #submit-button:hover { color: var(--button-text-hover) !important; background-color: var(--button-background-hover) !important; border-color: var(--button-background-hover) !important; box-shadow: var(--shadow); } #vs-messageboard #submit-button:hover::after { transform: translateX(0.25em); } #vs-messageboard .comment-form .add-emoji-container { color: var(--input-text); } #vs-messageboard #comment-text-container:hover .add-emoji-container { color: var(--input-text-hover); } #vs-messageboard .comment-form .add-emoji { top: 10px; right: 10px; margin: unset; } /* 'Message submitted to moderation'-element */ #vs-messageboard .moderation-status { position: absolute; z-index: 100; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 400px; height: fit-content; padding: 20px; color: var(--text-color-alt); text-align: center; background: #fff; border: var(--input-border); border-radius: var(--input-radius); box-shadow: var(--shadow); } #vs-messageboard .moderation-status h3 { margin: unset; font: var(--h4-font) !important; font-size: var(--font-size-0) !important; } /* Message list */ #vs-messageboard #chatboard-comments { margin: 0; } /* Message */ #vs-messageboard .post { padding: 0; backdrop-filter: blur(6px); border-radius: 0; box-shadow: var(--shadow) !important; } #vs-messageboard .post .comment-header { padding: 1.15rem 1rem 0.75rem; } #vs-messageboard .post .post-byline { display: flex; flex-direction: row; gap: 0.5rem; justify-content: start; } #vs-messageboard .post .post-byline * { font-family: var(--font-family-headings); font-size: var(--font-size-s); font-weight: 400; line-height: 1; } #vs-messageboard .post .post-byline .author a { font-weight: 500; } #vs-messageboard .post .post-byline .bullet { display: none; } #vs-messageboard .post .post-byline .time-ago { font-size: 0.85em; opacity: 0.75; } #vs-messageboard .post .post-body-inner { padding: 0 1rem 0.75rem; font-size: 15px; line-height: 1.2; } #vs-messageboard .post .post-body-inner * { margin: unset; } /* Post reactions */ .comment-footer .post-reactions { gap: 12px; padding: 0 1rem; font-size: 16px; line-height: 1.1; } .post-reactions .toggle-reaction { margin: 0; } .post-reactions .reaction-count { top: 0; right: -10px; left: unset; min-width: 14px; height: 14px; background-color: #fff6; border: none; box-shadow: 0 0 2px #0003; } /* Reply form */ #vs-messageboard .post .reply-form { padding: 0 1rem 44px; } #vs-messageboard .post .reply-form .reply-user { margin-bottom: 0.5rem; } #vs-messageboard .post .reply-form :is(input, textarea) { resize: vertical; width: 100%; max-width: unset; height: 2.2em; max-height: 200px; margin: 0; padding: 0 0.5em; font-size: 15px; line-height: 1; color: var(--input-text); background-color: var(--input-background); border: 1px solid #fff1; border-radius: var(--input-radius) !important; outline: none; transition: var(--transition), height 0s; } #vs-messageboard .post .reply-form textarea { padding-top: 0.45em !important; } #vs-messageboard .post .reply-form :is(input, textarea):is(:hover, :focus) { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover) !important; outline: none; } /* Reply buttons */ #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not(.fa-plus) { position: absolute; right: 1rem; bottom: 0.75rem; } #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not( .fa-plus ).reply-actions { gap: 0.75rem; } #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not(.fa-plus):is( button ), #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not(.fa-plus) > button:not(.fa-plus) { width: auto !important; margin: 0 !important; padding: 3px 10px 1px !important; font: var(--text-font); font-size: 12px !important; font-weight: 600; color: var(--button-text); background: var(--button-background); border: var(--button-border); border-radius: var(--button-radius); transition: var(--transition); } #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not(.fa-plus):is( button ):hover, #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not(.fa-plus) > button:hover { color: var(--button-text-hover); background-color: var(--button-background-hover); } #vs-messageboard .post .comment-footer button.fa-plus { width: 24px; height: 24px; font-size: 12px; color: var(--button-text-color); border: 1px solid var(--button-border-color); border-radius: 50%; transition: 0.2s ease; } /* Post response */ #vs-messageboard .post .post-responses { margin: 0.5rem 0 0 1.5rem; padding-bottom: 0.25rem; } #vs-messageboard .post .post-response { padding: unset; border-left: 2px solid #fff6; } #vs-messageboard .post .post-response .comment-header { padding: 0 0.75rem 0.5rem; } #vs-messageboard .post .post-response .post-body-inner { padding: 0 0.75rem; } #vs-messageboard .post .post-response .comment-footer { padding-top: 0.25rem; } @media (width <= 950px) { #vs-messageboard .comment-form form { grid-template-columns: 1fr 2fr; } #vs-messageboard #submit-button { grid-column: 2/3; justify-self: end; width: fit-content; } } @media (width <= 650px) { #vs-messageboard .comment-form form { grid-template-columns: 1fr; } #vs-messageboard #submit-button { grid-column: unset; justify-self: start; } } /* FOOTER */ #vs-footer { order: 3; padding: 20px var(--spacing-horizontal) 20px !important; } #vs-footer .container { margin: 0 !important; } #vs-footer .register-heading { display: none; } #vs-footer .footer-text { display: flex; align-items: stretch; justify-content: stretch; padding: 0; } #vs-footer .footer-text > span { display: flex; align-items: start; justify-content: center; width: 100%; } .custom-footer { display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: start; width: 100%; font-size: min(14px, 0.8rem); font-weight: 300; } .custom-footer .footer-privacy { display: flex; gap: 0.5rem; align-items: center; justify-content: end; margin-right: -0.75rem; } .custom-footer .footer-privacy a { display: flex; align-items: center; min-height: 1.75em; padding: 0 0.75em; font-size: min(14px, 0.8rem); text-decoration: none; text-transform: uppercase; border-radius: 1000px; transition: var(--transition); } .custom-footer .footer-privacy a:hover { background-color: color-mix(in srgb, var(--footer-background) 60%, #000); } .custom-footer .footer-inderes { display: flex; gap: 0.75rem; align-items: center; align-self: end; justify-content: flex-end; } .custom-footer .footer-inderes .inderes-logo { width: 100%; max-width: 80px; transition: var(--transition); } .custom-footer .footer-inderes .inderes-logo:hover { transform: scale(1.1); opacity: 0.75; } /* VIDEOSYNC FOOTER */ #vs-videosync-footer { display: flex; align-items: center; justify-content: center; height: auto; min-height: 60px; margin: 0 auto; padding: 10px var(--spacing-horizontal); color: var(--footer-text); background-color: var(--footer-background); } #vs-videosync-footer::before, #vs-videosync-footer::after { content: unset; } #vs-videosync-footer :is(span, .videosyncLogo) { font: var(--text-font); font-size: 12px; line-height: 1em; mix-blend-mode: normal; } #vs-videosync-footer .videosyncLogo { filter: invert(1) !important; } #vs-videosync-footer .divider { display: none; } #vs-videosync-footer > p { grid-area: container; gap: 0.25rem 0.75rem; margin: unset; padding: unset; } #vs-videosync-footer > p > a { display: flex; align-items: center; min-height: 1.75em; padding: 0 1em; text-decoration: none !important; text-transform: uppercase; border-radius: 1000px; transition: var(--transition); } #vs-videosync-footer > p > a > span { color: inherit; text-decoration: none; } #vs-videosync-footer > p > a:last-of-type { padding: 0.25em 0 0.25em 1em; } #vs-videosync-footer > p > a:hover { background-color: color-mix(in srgb, var(--footer-background) 60%, #000); } #vs-videosync-footer a[href='https://flik.videosync.fi/official-demo-livestream'] { display: none; } @media (width <= 500px) { #vs-videosync-footer { min-height: 85px; } #vs-videosync-footer > p > a:last-of-type { flex-basis: 100%; } }

Please register for the teleconference

The event starts on 20 May 2026 at 07:30 UTC

Please register for the teleconference

The event starts on 20 May 2026 at 07:30 UTC