@import url('https://cdn.videosync.fi/vs-assets/fonts/inter/stylesheet.css'); /* VARIABLES */ :root { /* Fonts */ --font-family: 'Inter'; --font-family-headings: 'Inter'; --font-family-text: var(--font-family); --font-family-alt: var(--font-family); --symbol-family: "Material Symbols Rounded"; /* Text */ --text-font: 400 1rem / 1.35 var(--font-family-text); --h1-font: 400 clamp(2.25rem, 4vw + 1rem, 4.5rem) / 1 var(--font-family-headings); --h2-font: 400 clamp(2rem, 3vw + 1rem, 3.5rem) / 1.2 var(--font-family-headings); --h3-font: 400 clamp(1.15rem, 2vw + 0.75rem, 1.5rem) / 1.2 var(--font-family-text); --h4-font: 700 clamp(1.25rem, 2vw + 0.5rem, 1.25rem) / 1.2 var(--font-family-headings); /* Spacing */ --spacing-horizontal: clamp(1rem, 5vw, 4rem); --spacing-s: calc(var(--spacing-m) / 2); --spacing-m: 2rem; --spacing-l: 3rem; --spacing-xl: clamp(3rem, 2rem + 4vmin, 6rem); --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: black; ; --base-color-alt: white; /* Text colors */ --text-color: white; --text-color-alt: black; /* Highlight colors */ --brand-color: #00ffc2; --brand-color-alt: #cfd7d6; /* Input variables */ --input-background: white; --input-text: black; --input-placeholder: rgba(0, 0, 0, 0.78); --input-border: 1.3px solid #00ffc2; --input-background-hover: white; --input-border-color-hover: #00ffc2; --input-radius: 0; /* Button variables */ --button-background: var(--brand-color); --button-text: black; --button-radius: 10px; --button-border: 1px solid var(--brand-color); --button-background-hover: black; --button-border-color-hover: white; --button-text-hover: white; --button-alignment: center; /* Countdown variables */ --countdown-background: #00ffc2; --countdown-text: black; --countdown-radius: .25rem; /* Videosync footer variables */ --footer-background: black; --footer-text: #fff; } /* GENERAL */ html { font-family: var(--font-family-text); font-size: clamp(16px, 1.5vw + 8px, 18px); } body { background-size: cover !important; } :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-family-headings); text-wrap: balance; } :is(div, input, button, select, textarea, p, li) { font-family: var(--font-family-text); } p, h1, h2, h3, h4, h5, h6 { hyphens: auto; overflow-wrap: break-word; } .section-heading:is(.section-heading) { margin: 0 0 1em; padding: unset; font: var(--h2-font); color: var(--text-color); text-align: left; } .section-heading:is(.speakers-section-title) { margin: 0 0 1em; padding: unset; font-family: 'Inter'; color: var(--text-color); text-align: left; } @media (width <=750px) { .section-heading { text-align: center; } } /* STRUCTURE */ .vs-mainwrapper { display: flex; flex-direction: column; align-items: flex-start; } .vs-mainwrapper> :is(header, footer) { order: 0; margin: unset; padding: unset; } .vs-mainwrapper> :is(section, footer)::before, .vs-mainwrapper> :is(section, footer)::after { content: unset; } .vs-mainwrapper> :is(section, header, footer)> :is(div.container, .main-header, registration, react-component)>.content { width: 100%; } body:not(.is-in-iframe) .vs-mainwrapper { min-height: calc(100vh - 60px); } .brand-color { color: var(--brand-color); } /* HEADER */ #vs-header { z-index: 10; align-items: center; min-height: 80px; padding: 1rem var(--spacing-horizontal) 0.75rem !important; display: flex; justify-content: center; border-bottom: 0.5px solid rgba(255, 255, 255, 0.28); } .on-registration-page #vs-header, .eventstate-hidden_live #vs-header, .eventstate-paused_live #vs-header, .eventstate-hidden_ondemand #vs-header { position: absolute; } #vs-header .main-header { max-width: 1980px; margin: auto; width: 100%; } #vs-header .header-content { gap: 15px var(--spacing-horizontal); 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 .header-content .subheader { display: none; } #vs-header .header-content .subheader { grid-area: subheader; margin: unset; padding: unset; } #vs-header .header-content .subheader p { margin: unset; font-family: 'Inter'; font-size: 1.15rem; font-weight: 500; color: white; text-align: center; } #vs-header .brand-color { font-weight: 400; } #vs-header .header-content .meta { display: flex; grid-area: meta; flex-flow: row nowrap; gap: 1rem; align-items: end; justify-content: flex-end; margin: 0; padding: unset; } #vs-header .header-content .meta a { display: flex; gap: 0.5em; align-items: center; font: var(--text-font); color: white; text-decoration: none; transition: var(--transition); } #vs-header .header-content .meta a .link-text { transition: var(--transition); } #vs-header .header-content .meta a .material-symbols-rounded { font-size: 1.2em; font-weight: 300; color: white; transition: inherit; } .eventstate-public_live #vs-header .header-content .meta a, .eventstate-public_live #vs-header .header-content .meta a .material-symbols-rounded, .eventstate-public_ondemand #vs-header .header-content .meta a .material-symbols-rounded, .eventstate-public_ondemand #vs-header .header-content .meta a { color: white; } #vs-header .header-content .meta a:hover { color: var(--brand-color); } #vs-header .header-content .meta a:hover .link-text { color: var(--brand-color); text-decoration: underline; } #vs-header .header-content .meta a:hover .material-symbols-rounded { color: var(--brand-color); } #vs-header .meta img { width: 20px; transition: 0.2s ease; } #vs-header .meta a:hover img { transform: scale(1.15); } .languages { flex: 1; display: flex; color: #fff; justify-content: flex-end; font-size: 1rem; } @media (width <=900px) { :is(.eventstate-public_live, .eventstate-public_ondemand) #vs-header .header-content { grid-template: "logo meta" auto "subheader subheader" auto / 1fr max-content; } } /*REGISTER PAGE*/ #vs-registration { flex: 1; background-size: cover; background-position: top center; background-repeat: no-repeat; color: white !important; font-weight: 200 !important; padding: 100px 0px 0px; } #vs-registration registration .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 100%; flex-direction: row-reverse; align-items: stretch; padding: 0; gap: 2rem; } /*Register page image*/ #vs-ir-img-container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } #vs-ir-img-container img { max-width: 613px; border-radius: 36px; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } #vs-registration registration .container .content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 0 !important; } #vs-registration .separate-image-wrapper .hidden-image { display: flex; align-items: stretch; width: 100% !important; } #vs-registration .separate-image-wrapper .hidden-image img { height: 100% !important; width: 100% !important; object-position: left !important; object-fit: cover !important; margin: 0 !important; max-width: 100% !important; } #vs-registration .register-text-container h1 { font-weight: 400 !important; line-height: 25px; padding-left: var(--spacing-horizontal) !important; } #vs-registration .register-text-container h2 { font-size: 39px; line-height: 39px; font-weight: 400 !important; font-family: 'Inter'; padding-left: var(--spacing-horizontal) !important; } #vs-registration .register-text-container h3 { font-weight: 400 !important; line-height: 10px; padding-bottom: 15px; padding-left: var(--spacing-horizontal) !important; } #vs-registration .register-text-container h4 { font-weight: 400 !important; line-height: 25px; padding-left: var(--spacing-horizontal) !important; } /* Registration form */ #vs-registration .register-form { --reg-label-font: 400 var(--font-size-xs) / 1.25 var(--font-family-text); --reg-textinput-font: 400 var(--font-size-xs) / 1 var(--font-family-text); --reg-button-font: 400 var(--font-size-s) / 1 var(--font-family-text); position: left !important; width: 100%; max-width: 700px !important; margin: 0; padding: 0 !important; padding-left: var(--spacing-horizontal) !important; & h3 { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: end; justify-content: space-between; margin: 0 0 1.25em; font: var(--h4-font); font-size: 19px; line-height: 1.1; & p { margin: unset; font: inherit; } } .register-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; .register-item { grid-column: span 1; &:is(.register-item-type-text, .register-item-type-email, .register-item-type-tel, .register-item-type-select) { grid-column: span 1; } } } .register-item { color: var(--reg-form-text); :is(textarea) { grid-column: span 2 !important; } :is(input, textarea) { resize: none; max-width: unset !important; height: 2.25em; margin: unset; padding: 0 0.5em; color: var(--input-text) !important; background-color: var(--input-background) !important; border: none; border-radius: 8px; transition: var(--transition); &.ng-invalid.ng-touched { border-color: #a94442 !important; &+.required { color: #a94442 !important; &::after { content: '\e000'; font-size: 1.1rem; font-weight: 400; } } } &:is(:hover, :focus) { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover) !important; outline: none; } } .register-item ::placeholder{ color: var(--brand-color); } .register-label { padding: unset; font: var(--reg-label-font); text-wrap: pretty; } .required-label-asterisk { display: none; } .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; text-align: center; &::after { content: 'emergency'; display: block; font-family: var(--symbol-family); font-size: 0.8rem; font-weight: 400; } } .field-error { grid-column: 1/-1; } /* Register form / input */ &:is(.register-item-type-text, .register-item-type-email, .register-item-type-tel) { display: grid; grid-template-columns: 1fr 2em; gap: .2em 0; align-items: center; & input { grid-column: 1/3; grid-row: 2/3; margin: unset; font: var(--reg-textinput-font); height: 100%; min-height: 36px; } } /* Register form / textarea */ &.register-item-type-textarea { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.25rem; grid-column: span 2 !important; & textarea { height: 3em; min-height: 3em; padding: 0.5rem; font: var(--reg-textinput-font); line-height: 1.1; background-color: var(--input-background) !important; border-bottom: var(--input-border); border-radius: var(--input-radius) !important; outline: none !important; &:is(:hover, :focus) { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover) !important; outline: none; } } } /* Register form / checkbox */ &.register-item-type-checkbox { grid-column: span 2 !important; margin: unset; &.privacyread { margin: 0.5rem 0 0; } .checkbox-style { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--text-color) !important; background-color: transparent; border: 1px solid white; border-radius: 7px !important; transition: var(--transition); &::after { content: '\e5ca'; font-family: var(--symbol-family); font-size: 1.15rem; color: var(--text-color-alt); opacity: 0.1; transition: var(--transition); } } &:hover .checkbox-style { background-color: var(--input-background-hover); border-color: white !important; } & input:checked+.checkbox-style::after { font-weight: 700; color: black; background-color: var(--input-background-hover); opacity: 1; border-radius: 7px !important; } .register-label { cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 0.75em; margin: unset; padding: unset; } .register-choice { padding: unset; & p { margin: unset; font: var(--reg-label-font); .material-symbols-rounded { font-size: inherit; font-weight: 100; } } } & input { display: none; } } /* Register form / select */ &.register-item-type-select>div.ng-scope { display: grid; grid-template-columns: 1fr; gap: 0.25rem; align-items: center; justify-content: stretch; margin: 0; padding: unset !important; & h4 { margin: 0; font: var(--text-font); font-size: 16px; } & select { max-width: 283px !important; height: 2.25em; margin: 0; padding: 0.25rem 0; font-size: 16px; color: var(--reg-form-text) !important; background-color: var(--input-background) !important; border-bottom: var(--input-border); border-radius: 0 !important; outline: none !important; transition: var(--transition); &:hover { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover); } & option { color: #000; background-color: #fff; &:first-of-type { color: #0006; background-color: lightgrey; } } } } /* Register form / select */ &.register-item-type-country>div.ng-scope { display: grid; grid-template-columns: 1fr; gap: 0.25rem; align-items: center; justify-content: stretch; margin: 0; padding: unset !important; & h4 { margin: 0; font: var(--text-font); font-size: 16px; } & select { max-width: 283px !important; height: 2.25em; margin: 0; padding: 0.25rem; font-size: 16px; color: var(--reg-form-text) !important; background-color: var(--input-background) !important; border-bottom: var(--input-border); border-radius: 0 !important; outline: none !important; transition: var(--transition); &:hover { background-color: var(--input-background-hover) !important; border-color: var(--input-border-color-hover); } & option { color: #000; background-color: #fff; &:first-of-type { color: #0006; background-color: lightgrey; } } } } /* Register form / radio buttons */ &.register-item-type-radio { margin: 0.75rem 0; grid-column: span 2 !important; &>div { display: grid; gap: 0.75rem 1.5rem; align-items: center; padding: 0 !important; .register-label { cursor: pointer; } & h4 { grid-column: 1/-1; margin: 0; font: var(--reg-label-font); } & .radio-style { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; color: var(--text-color-alt); background-color: var(--input-background); border: var(--input-border); border-radius: 50%; transition: var(--transition); &::after { content: ''; display: block; width: 0.65em; height: 0.65em; opacity: 0.1; background-color: var(--input-text); border-radius: 50%; transition: var(--transition); } } & p { user-select: none; margin: 0; font-weight: 400; } & input { display: none; &:checked+.radio-style::after { opacity: 1; } } } } } #privacyread_error { margin-top: 0.5rem; margin-bottom: -0.5rem; } } #vs-registration #submit-button { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px 17px; border-radius: 26px !important; } #vs-registration #submit-button::after { content: "\f1df"; display: block; font-family: var(--symbol-family); font-size: 1.5rem; font-weight: 400; transition: var(--transition); } #vs-registration #submit-button:disabled { opacity: 0.5; } #vs-registration #submit-button:hover { background-color: var(--button-background-hover) !important; box-shadow: var(--shadow); color: white !important; border: 1px solid white; } #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% !important; height: 100% !important; margin: unset; object-fit: contain; object-position: bottom right !important; border-radius: unset; } #vs-registration .register-text-container { margin-left: 0; padding: 0 !important; max-width: 600px !important; } .register-text-container p { margin: 0; } .register-text-container h3 { font-size: 18px; font-weight: 300; margin-bottom: 0; } .register-text-container h2 { line-height: normal; margin: 0; font-size: 53px; } @media (max-width: 1170px) { #vs-registration registration .container{ flex-direction: column-reverse; } } @media (width <=1050px) { #vs-registration .container .content { grid-template-columns: 1fr; } #vs-registration .register-text-container { margin-left: auto; } #vs-registration .register-form { order: 3; justify-self: left; padding: 0 1rem !important; } .register-text-container { justify-self: left; } .register-text-container>* { text-align: left; } } @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: 80%; max-width: 600px; height: 80%; margin: unset; object-fit: contain; object-position: bottom right; border-radius: unset; } } /*HIDDEN*/ #vs-hidden .content { width: 100%; max-width: 750px; margin-left: 0; padding: 90px 0px 100px !important; padding-left: 60px; } .hidden-text { text-align: left; } #vs-hidden .container { flex-direction: row-reverse; align-items: stretch; padding: 0; gap: 0; } #vs-hidden .container .content p { margin: 0; } #vs-hidden .container .content h3 { font-weight: 400 !important; line-height: 10px; padding-left: var(--spacing-horizontal) !important; } #vs-hidden .container .content h1 { font-family: 'Inter'; font-size: 40px; line-height: 40px; font-weight: 400 !important; margin-bottom: 0 !important; margin-top: 0 !important; padding-left: var(--spacing-horizontal) !important; } #vs-hidden .container .content h4 { font-weight: 400 !important; line-height: 25px; padding-left: var(--spacing-horizontal) !important; } .eventstate-hidden_ondemand #vs-hidden .container .content, .eventstate-paused_live #vs-hidden .container .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .eventstate-hidden_ondemand #vs-hidden .container .content .hidden-text p, .eventstate-paused_live #vs-hidden .container .content .hidden-text p { font-size: 30px; } #vs-hidden { flex: 1; background-size: cover; background-position: center; display: flex; justify-content: left; align-items: left; padding: 0; } #vs-hidden>.container { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 100%; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } #vs-hidden .container .content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #vs-hidden .container .content h2 { font-size: 45px; font-weight: 300; } #vs-hidden .container .content h3 { font-size: 1rem; line-height: 28px; font-weight: 300; text-align: left !important; } #vs-hidden .container .content h4 { font-size: 1rem; line-height: 28px; font-weight: 300; text-align: left !important; } #vs-hidden .container .content .hidden-text p { text-align: left !important; font-size: min(calc(1rem + 2vw), 18px) !important; font-weight: 300; line-height: 1.2em; } #vs-hidden .separate-image-wrapper .hidden-image { display: flex; align-items: stretch; width: 100% !important; } #vs-hidden .separate-image-wrapper .hidden-image img { height: 100% !important; width: 100% !important; object-position: left !important; object-fit: cover !important; margin: 0 !important; max-width: 100% !important; padding-top: 50px; } @media (max-width: 1170px) { #vs-hidden .container{ flex-direction: column-reverse; } } @media (width <=1050px) { #vs-hidden .container .content { grid-template-columns: 1fr; } #vs-hidden .container .content { margin: auto; } #vs-hidden .container .content { justify-self: center; } .container .content { justify-self: center; } .container .content >* { text-align: center; } } @media (max-width: 710px) { #vs-hidden .container .content{ flex: none; } } /* Countdown */ .countdown-container { padding-top: 40px; justify-content: start; padding-left: var(--spacing-horizontal) !important; } .countdown-container .counter { background-color: #00ffc2 !important; padding-bottom: 10px; padding-top: 15px; opacity: 1; justify-content: left; border-radius: 7px; min-width: 120px; min-height: 120px; color: black; } .counter-text { font-size: 1rem; font-weight: 400; margin-top: 4px; margin-bottom: 0; } .counter-text p { margin: 0; } .days, .hours, .minutes, .seconds { margin-top: 0px; font-family: 'Inter'; font-weight: 600; font-size: 4.6rem; line-height: .9em; padding-bottom: 10px; } .countdown-container .counter { background-color: transparent; } .countdown-container .counter:has(.days) { background-color: transparent; } /* PRESENTATION */ #vs-presentation { grid-template: ". container ." auto / auto minmax(50px, 2000px) auto; background: var(--brand-color); } .eventstate-public_ondemand #vs-presentation { grid-template: ". container ." auto / auto minmax(50px, 1200px) auto; } @media (width <=766px) { #vs-presentation { background-position: calc(0% - 80vw) center; } #vs-presentation .container { gap: min(var(--spacing-m), 2vw); padding: unset; } } /* THUMBNAILS */ #vs-thumbnails { max-width: var(--max-container-width); margin: 0 auto; border-right: 1px solid #eee; border-left: 1px solid #eee; } .eventstate-public_ondemand #vs-thumbnails { flex: 1; } #vs-thumbnails .container { margin: 1rem var(--spacing-horizontal) var(--spacing-l) !important; padding: 0; } #vs-thumbnails .container .slidethumbnails--item.active { outline: 2px solid var(--brand-color); } #vs-thumbnails .container .slidethumbnails--item.browsed-slide { outline: 1px solid var(--brand-color); } #vs-thumbnails .container .slidethumbnails--item button { display: flex; } /* About */ #vs-about-section { padding: 50px 0 0 0; background-color: #F1EADD !important; } #vs-about-section .container { max-width: var(--max-elem-width); margin: 0 auto; padding-left: 30px; padding-right: 30px; } #vs-about-section .content > .section-heading { display: none; } #vs-about-section .intro, #vs-about-section .intro > p { margin: 0; } .about-columns { display: grid; grid-template-columns: 1fr 2fr; align-items: left; gap: 40px; } .about-text { padding: 10px; color: black; font-size: 0.9rem; line-height: 26px !important; } .about-image { padding-left: 30px !important; align-self: contain !important; margin: 10px; padding-bottom: 100%; background: url(https://cdn.videosync.fi/events/lumenradio/common/images/comp_photo_sanna-01_854x802.png) center center / contain no-repeat; } @media (max-width: 1760px) { #vs-about-section .container { max-width: unset; } } @media (max-width: 750px) { .about-columns { grid-template-columns: 1fr; gap: 20px; } .about-text { padding: 30px; } .about-image { background-position: top center; padding-bottom: 0; height: 100vw; max-height: 35vh; margin-bottom: 50px; } } /* CHAPTERS */ #vs-chapters { grid-column: 1/2; order: 1; padding: var(--spacing-xl) var(--spacing-horizontal) var(--spacing-xxl) !important; & .container { width: 100%; max-width: calc(var(--max-container-width) / 2 - var(--spacing-horizontal)) !important; margin: 0 0 0 0; & .content { margin: 0; } } /* Chapters list */ & .chapter-list { display: flex; flex-flow: column nowrap; gap: 0.5rem; margin: 0; padding: unset; &::before { content: 'Please note that the times are shown in CET'; margin: 0 0 1em; font-size: var(--font-size-s); text-align: left; display: none !important; } /* Chapter item */ & .chapter-list--item { display: flex; justify-content: flex-start; align-items: center; /*grid-template-columns: min-content 1fr;*/ flex-basis: unset; gap: 0 1.5rem; align-content: start; break-inside: avoid; margin: 7px; padding: unset; font: var(--text-font); line-height: 26px; & p{ margin: 0; } & h4 { margin: 0; font: inherit; font-weight: 400; &.time { min-width: 3.25em; color: var(--brand-color); text-align: center; background-color: var(--base-color-alt); border-radius: 0.25rem; &:empty { background-color: transparent; } } } & .text { grid-column: -2/-1; font-weight: 300; color: color-mix(in oklab, var(--chapters-text) 85%, transparent); & b { font-weight: 500; color: var(--chapters-text); } & :has(span:empty) { display: none; } } } } @media (width <=1050px) { grid-column: 1/-1; } } #vs-chapters .section-heading { padding-left: 80px !important; font-family: 'Inter';} /* SPEAKERS */ body #vs-speakers-section { padding: 30px !important; } #vs-speakers-section { display: flex; flex-direction: row-reverse; gap: 24px; } #vs-speakers-section > * { flex: 1; } .eventstate-public_live #vs-speakers-section{ grid-column: span 1 / span 1 !important; } .eventstate-public_live #vs-speakers-section > react-component > div{ display: flex; flex-direction: column; } #vs-speakers-section { position: relative; order: 2; padding: var(--spacing-xl) var(--spacing-horizontal) var(--spacing-xxl) !important; background-color: black; .section-heading { text-align: center; display: relative; color: white !important; font-size: 30px; font-weight: 400 } &>* { width: 100%; /*max-width: calc(var(--max-container-width) / 2 - var(--spacing-horizontal)) !important;*/ margin: 0 auto 0 0; &>div { display: grid; } @media (width <=1050px) { margin: 0 auto; } } /* Speakers list */ & ul { gap: var(--spacing-l) min(var(--spacing-l), 4vi); justify-content: center; justify-items: center; width: 100%; max-width: 880px; margin: var(--spacing-m) auto 0; padding: unset; /* stylelint-disable plugin/no-unsupported-browser-features */ /* @supports (x: attr(x type(*))) { &[data-speakers-count] { grid-template-columns: repeat(attr(data-speakers-count type(), 4), 1fr); } }*/ /* @supports not (x: attr(x type(*))) { & { grid-template-columns: 1fr 1fr 1fr; } } */ /* stylelint-enable plugin/no-unsupported-browser-features */ } /* Speaker item */ & .speakers-section-speaker-item { container-name: speaker-item; container-type: inline-size; display: grid; width: 100%; max-width: clamp(150px, 40vi, 300px); margin: 0; padding: 0; color: white; background-color: black; border-radius: 0; &>div { display: flex; flex-direction: column; gap: 1rem; margin: unset; /* Speaker image */ &>div:first-of-type { position: relative; display: flex; align-items: stretch; justify-content: stretch; width: 100%; min-width: 120px; margin: 0 auto; border-radius: 7px; >img { z-index: 1; border-radius: 7px; width: 100%; margin: 0 auto; background-color: black; } } /* Speaker texts */ & .speakers-section-speaker-item-text-content { display: flex; flex: 1; flex-direction: column; gap: 0.5em; padding: 0; font: var(--text-font); font-size: var(--font-size-s); line-height: 1.2em; text-align: center; &>div { display: flex; flex: unset; flex-direction: column; gap: .25em; justify-content: flex-start; padding: 0; font: inherit; text-align: inherit; & h3 { margin: 0; font: inherit; font-size: 110%; font-weight: 500; color: white; text-align: inherit; } & h4 { margin: 0; font: inherit; font-weight: 300; text-align: inherit; } &:nth-of-type(2) span { margin: 0; font: inherit; font-size: 90%; text-align: inherit; text-wrap: balance; } } } } } @media (width <= 1050px) { flex-direction: column-reverse; } } @media (width <=450px) { #vs-speakers-section ul { display: grid; grid-template-columns: 1fr !important; } } .eventstate-public_live #vs-speakers-section { display: none; } /* MESSAGEBOARD */ #vs-messageboard { --input-background: white; --input-radius: 0.35rem; --input-text: #000; --input-placeholder: #0007; --input-background-hover: var(--base-color-alt); --button-background: --brand-color; --button-text: black; background: black; } #vs-messageboard .container { margin-top: 2rem !important; padding: 0; } #vs-messageboard .section-heading { color: white; font-weight: 400; font-size: 20px; text-align: center; } #vs-messageboard .wide>div>div { display: grid; grid-template-columns: 1fr; gap: 0 var(--spacing-m); max-width: 800px !important; margin: 0 auto; } /* Comment form */ #vs-messageboard .comment-feed-header { position: relative; width: 100%; margin: unset; padding: unset; border: unset; } #vs-messageboard .comment-feed-header h3 { margin: 0 0 0.75em; font: var(--h4-font); font-weight: 400 !important; color: #fff; text-align: center; } #vs-messageboard .comment-form { display: flex; flex-direction: column; height: 100%; 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) { margin: 0; padding: 0 0.75em; height: 2.2rem; font: var(--text-font); color: black; background-color: rgb(255, 255, 255); border: 0px solid white; border-radius: 7px; } #vs-messageboard .comment-form #comment-text { padding-top: 0.4em; } #vs-messageboard .comment-form :is(#comment-name, #comment-text)::placeholder { color: black; } #vs-messageboard .comment-form :is(input, textarea):is(:hover, :focus) { background-color: rgb(255, 255, 255) !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: 2.2rem !important; margin: 0; padding: 0 1em; font-family: var(--font-family-headings); color: var(--button-text) !important; background-color: var(--brand-color)!important; border: var(--button-border) !important; border-radius: 26px !important; transition: var(--transition); } #vs-messageboard #submit-button::after { content: "\e163"; display: block; font-family: var(--symbol-family); font-size: 1.5rem; font-weight: 300; transition: var(--transition); } #vs-messageboard #submit-button:disabled { opacity: 0.5; } #vs-messageboard #submit-button:hover { color: var(--button-text-hover) !important; background-color: var(--button-background-hover) !important; border: 1px solid white; 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-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: 600px; height: fit-content; padding: 20px; color: var(--text-color-alt); text-align: center; background: var(--base-color-alt); border: var(--input-border); border-radius: 0; box-shadow: var(--shadow); } #vs-messageboard .moderation-status h3 { margin: unset; font-weight: 500; } /* Message list */ #vs-messageboard #chatboard-comments { margin: 0; } /* Message */ #vs-messageboard .post { margin: 0 0 1rem; padding: 0; border: var(--input-border); border-radius: var(--input-radius); } #vs-messageboard .post:first-of-type { margin-top: 40px; } #vs-messageboard .post:last-of-type { margin-bottom: 0; } #vs-messageboard .post .comment-header { padding: 0.75rem 1rem 0.5rem; border-radius: var(--other-radius) var(--other-radius) 0 0; } #vs-messageboard .post .post-byline { display: flex; flex-direction: row; gap: 0.5rem; justify-content: start; } #vs-messageboard .post .post-byline * { font: var(--text-font); } #vs-messageboard .post .post-byline .author a { font-weight: 600; } #vs-messageboard .post .post-byline .bullet { display: none; } #vs-messageboard .post .post-byline .time-ago { font-size: 0.75em; opacity: 0.75; } #vs-messageboard .post .post-body-inner { padding: 0 1rem 0.75rem; } #vs-messageboard .post .post-body-inner * { margin: unset; } /* Reply form */ #vs-messageboard .post .reply-form { padding: 0 1rem 44px; } #vs-messageboard .post .reply-form .reply-user { margin-bottom: 0.75rem; } #vs-messageboard .post .reply-form :is(input, textarea) { resize: vertical; width: 100%; max-width: unset; height: 2em; max-height: 200px; margin: 0; padding: 0 0.75em; color: var(--input-text); background-color: var(--base-color-alt); border: var(--input-border); border-radius: var(--input-radius) !important; outline: none; transition: var(--transition), height 0s; } #vs-messageboard .post .reply-form textarea { padding-top: 0.5em !important; } #vs-messageboard .post .reply-form :is(input, textarea):is(:hover, :focus) { background-color: var(--input-background-hover) !important; border-color: white !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: 2px 10px !important; font: var(--text-font); font-size: 12px !important; font-weight: 500; color: var(--button-color); background: #fff; 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; } #vs-messageboard .post .post-responses { margin: 0 0 0 1rem; padding-bottom: 0.5rem; } #vs-messageboard .post .post-response { padding: unset; border-left: 2px solid var(--brand-color); } #vs-messageboard .post .post-response .comment-header { padding-top: 0; padding-bottom: 0; } #vs-messageboard .post .post-response .post-body-inner { padding-bottom: 0; } @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; } } .eventstate-hidden_live #vs-messageboard { background-color: transparent !important; background: transparent; padding: 0 !important; } .eventstate-hidden_live #vs-messageboard .comment-form .add-emoji { display: none !important; } .eventstate-hidden_live #vs-messageboard .comment-form :is(#comment-name) { display: none; } .eventstate-hidden_live #vs-hidden #vs-messageboard .content { padding: 0 !important; } .eventstate-hidden_live #vs-messageboard .section-heading { text-align: start; font-size: 15px !important; } .eventstate-hidden_live #vs-messageboard .container { display: flex; } .eventstate-hidden_live #vs-messageboard .comment-form :is(#comment-name, #comment-text) { background-color: transparent; border: 0; border-radius: 0 !important; width: 80%; border-bottom: 1px solid var(--brand-color); padding: 0; resize: none; font-size: 15px; height: 3em; } .eventstate-hidden_live #vs-messageboard .comment-form .comment-user { width: 100%; } .eventstate-hidden_live #vs-messageboard .comment-form :is(#comment-name, #comment-text):is(:hover, :focus){ background-color: transparent !important; border-color: var(--brand-color-alt) !important; } .eventstate-hidden_live #vs-messageboard #submit-button { background-color: var(--brand-color-alt) !important; color: white !important; } .eventstate-hidden_live #vs-messageboard #submit-button:hover { color: black !important; background-color: white !important; border: 1px solid (--brand-color); } .eventstate-hidden_live #vs-messageboard #comment-text-container { width: 100%; } .eventstate-hidden_live #vs-messageboard .comment-form form { flex-direction: column; display: flex; gap: 1rem; } /* FOOTER */ #vs-footer { order: 3; padding: 20px var(--spacing-horizontal) 20px !important; } #vs-footer .container 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; gap: 30px; align-items: center; width: 100%; justify-content: center; 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: grid; display: none; grid-template: ". container ." auto / auto minmax(50px, var(--max-container-width)) auto; height: auto; min-height: 60px; margin: 0 auto; padding: unset; color: var(--footer-text); background-color: #003924; } #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 :is(span, .videosyncLogo).videosyncLogo { filter: invert(0) !important; } #vs-videosync-footer .divider { display: none; } #vs-videosync-footer>p { grid-area: container; gap: 0.25rem 0.75rem; margin: var(--spacing-s) var(--spacing-horizontal); padding: unset; } #vs-videosync-footer>p>a { display: flex; align-items: center; min-height: 2em; padding: 0 1em; border-radius: 1000px; transition: var(--transition); } #vs-videosync-footer>p>a>span { color: inherit; } #vs-videosync-footer>p>a:last-of-type { padding-right: 0; } #vs-videosync-footer>p>a:hover { background-color: color-mix(in srgb, var(--footer-background) 60%, #000); }

Please register for the teleconference

The event starts on 06 May 2026 at 11:00 EEST