@import url("https://cdn.videosync.fi/vs-assets/fonts/intrum_sans/stylesheet.css"); /* VARIABLES */ :root { /* Fonts */ --font-family: 'Intrum Sans'; --font-family-headings: 'Intrum Sans'; --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-xs: clamp(14px, calc(0.9 * var(--font-size-s)), 16px); --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: 300 var(--font-size-0) / 1.35 var(--font-family-text); --h1-font: 300 calc(var(--font-size-4) + 0.5rem) / 1 var(--font-family-headings); --h2-font: 300 var(--font-size-3) / 1.1 var(--font-family-headings); --h3-font: 300 calc(var(--font-size-0) + 0.25rem) / 1.2 var(--font-family-text); --h4-font: 300 calc(var(--font-size-0) + 0.15rem) / 1.1 var(--font-family-text); /* Spacing */ --spacing-horizontal: clamp(1.25rem, 4vw, 4rem); --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: 1400px; --transition: all 0.2s ease-in-out; --shadow: rgb(50 50 93 / 15%) 1px 3px 6px -2px, rgb(0 0 0 / 20%) 1px 2px 4px -2px; /* Background colors */ --base-color: white; --base-color-alt: white; /* Text colors */ --text-color: #fff; --text-color-alt: white; /* Highlight colors */ --brand-color: white; --brand-color-alt: white; /* Section specific colors */ --header-bg: var(--base-color); --header-text: black; --reg-bg: #29074a; --reg-text: var(--text-color); --reg-form-bg: transparent; --reg-form-text: white; --hidden-bg: var(--base-color); --hidden-text: white; --about-bg: #f5f4f2; --about-text: black; --chapters-bg: transparent; --chapters-text: var(--text-color); --speakers-bg: transparent; --speakers-text: var(--text-color); --presentation-bg: #29074a; --presentation-text: var(--text-color); --thumbnails-bg: #29074a; --msg-bg: #29074a; --msg-text: var(--text-color); /* Input variables */ --input-background: transparent; --input-background-hover: rgba(255, 255, 255, 0.296); --input-text: var(--reg-form-text); --input-text-hover: var(--input-text); --input-placeholder: var(--input-text); --input-border: 1px solid var(--brand-color); --input-border-color-hover: var(--brand-color); --input-radius: 0; /* Button variables */ --button-background: var(--brand-color); --button-background-hover: color-mix(in oklab, var(--brand-color) 80%, #fff); --button-text: var(--base-color); --button-text-hover: #fff; --button-border: unset; --button-border-color-hover: unset; --button-radius: 0; --button-alignment: right; --button-padding: 0.35em 1.5em 0.35em 2em; --button-font-weight: 300; /* Countdown variables */ --countdown-container-bg: transparent; --countdown-container-radius: 0; --counter-bg: #8750e5; --counter-text: white; --counter-radius: 0; --counter-shadow: unset; /* Messageboard post variables */ --post-bg: #fff9; --post-text: rgba(0, 0, 0, 0.754); --post-border: 1px solid var(--brand-color); --post-radius: .25rem; --post-shadow: var(--shadow); /* Videosync footer variables */ --footer-bg: #29074a; --footer-text: white; } /* GENERAL */ @supports (scrollbar-width: thin) { /* stylelint-disable plugin/no-unsupported-browser-features */ html { scrollbar-width: thin; } /* stylelint-enable plugin/no-unsupported-browser-features */ } body { background-size: 120px !important; } .mono { font-family: var(--font-family-alt); } .material-symbols-outlined { font-family: var(--symbol-family); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 32; } .vs-mainwrapper { display: grid; grid-template-columns: 1fr 1fr; font-family: var(--font-family-text); font-size: var(--font-size-0); } .vs-mainwrapper>* { grid-column: 1/-1; } .vs-mainwrapper :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-family-headings); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: balance; text-rendering: optimizelegibility; } .vs-mainwrapper :is(div, input, button, select, textarea, p, li) { font-family: inherit; } .vs-mainwrapper .section-heading { margin: 0 0 0.5em; padding: unset; font: var(--h2-font); color: var(--brand-color); text-align: left; } @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) { 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: 100% !important; } .vs-mainwrapper>*>*>.content { width: 100%; } body:not(.is-in-iframe) .vs-mainwrapper { min-height: calc(100vh - 70px); } @media (width <=650px) { body:not(.is-in-iframe) .vs-mainwrapper { min-height: calc(100vh - 180px); } } .brand-color { color: var(--brand-color) !important; } /* HEADER */ #vs-header { order:0; z-index: 10; align-items: center; min-height: unset; padding: 1.25rem var(--spacing-horizontal) 1.25rem !important; .header-content { display: grid; grid-template: 'logo subheader meta' auto / max-content 1fr max-content; gap: 10px 30px; align-items: center; padding: 0; } .logo { display: flex; grid-area: logo; align-items: center; max-width: 30vi; & img { padding: unset !important; } } .main-heading { display: none; } .subheader { grid-area: subheader; margin: 0.25rem 0 0; padding: unset; & p { margin: unset; font: var(--text-font); font-size: var(--font-size-0); line-height: 1.1; color: var(--header-text); text-align: center; text-wrap: balance; } } .meta { display: flex; grid-area: meta; flex-flow: row nowrap; gap: 1rem; align-items: end; justify-content: flex-end; min-width: 120px; margin: 0; padding: unset; & a { display: flex; gap: 0.5em; align-items: center; font-size: var(--font-size-s); line-height: 1; color: var(--header-text); text-decoration: none; transition: var(--transition); .link-text { transition: var(--transition); } .material-symbols-rounded { font-size: 1em; font-weight: 300; line-height: 1; color: inherit; display: flex !important; transition: inherit; } &:hover { .link-text { color: inherit; } .material-symbols-rounded { color: var(--brand-color); } } } } } body:is(.eventstate-public_live, .eventstate-public_ondemand) #vs-header .meta { min-width: min(160px, 30vi); } @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: 0.5rem 0 0; padding: 0; border: none; } #vs-header .subheader p { text-align: center; } } @media (width <=500px) { #vs-header { padding: 1rem var(--spacing-horizontal) 1rem !important; } #vs-header .meta { margin: 0; } } /* REGISTRATION */ #vs-registration { position: relative; background: #29074a; flex: 1; padding: 0; background-repeat: no-repeat; background-position: center; background-size: cover; & registration { grid-column: 1 / -1; } } /* Image as background */ #vs-registration .container:not(.separate-image-wrapper) { display: grid; grid-template-columns: 1fr; .content { display: grid; grid-template-columns: 1fr max-content; gap: var(--spacing-l) var(--spacing-horizontal); align-items: center; } } /* Image as separate element */ #vs-registration .container.separate-image-wrapper { display: grid; grid-template: 'image content' auto / 1.35fr 1fr; gap: 0 !important; align-items: stretch; justify-content: start; max-width: unset; padding: unset; .content { display: flex; grid-area: content; flex-direction: column; gap: 10px !important; place-items: stretch stretch; justify-items: stretch; max-width: calc(var(--max-container-width) / 2 + var(--spacing-horizontal)); margin: 0; padding: 30px var(--spacing-horizontal) 30px; } /* Hidden image */ .hidden-image { position: relative; display: flex; grid-area: image; align-items: stretch; justify-content: end; padding: 0; background-position: 60% 50%; background-size: cover; & img { height: 100%; max-width: unset; margin: unset; object-fit: cover; object-position: center; border-radius: 0; } } } /* Registration texts */ #vs-registration .register-text-container { width: 100%; max-width: calc(var(--max-container-width) / 2 + var(--spacing-horizontal)); margin: unset; padding: 0; >* { margin: unset; color: var(--reg-text); text-shadow: -1px -1px 4px #0001, 1px -1px 4px #0001, -1px 1px 4px #0001, 1px 1px 4px #0001; } & h1 { margin: 0 0 0.25em; font: var(--h1-font); font-size: 37px !important; } & h2 { margin: 0 0 0.25em; font: var(--h1-font); font-size: 37px !important; font-weight: 500 !important; } & h3 { margin: 0 0 0.5em; font: var(--h3-font); font-size: 19px !important; } & h4 { font: var(--h4-font); font-size: 27px !important; } } /* Registration form */ #vs-registration .register-form { --reg-label-font: 300 var(--font-size-xs) / 1.25 var(--font-family-text); --reg-textinput-font: 300 var(--font-size-xs) / 1 var(--font-family-text); --reg-button-font: 300 var(--font-size-s) / 1 var(--font-family-text); position: relative; width: 100%; max-width: unset !important; margin: 0; padding: 0 !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: 27px; 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(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-bottom: var(--input-border); border-radius: var(--input-radius) !important; 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-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: 100; } } .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); } } /* 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: white; border: var(--input-border); border-radius: min(var(--input-radius), 4px) !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: var(--input-border-color-hover) !important; } & input:checked+.checkbox-style::after { font-weight: 700; color: black; opacity: 1; } .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.35rem; align-items: center; justify-content: stretch; margin: 0; padding: unset !important; & h4 { margin: 10px; font: var(--text-font); font-size: 16px; } & select { max-width: 283px !important; height: 1.9em; 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; &>div { display: grid; grid-template-columns: max-content 1fr; 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: black; 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; } } /* Register form / submit button */ #vs-registration .register-form>div>.register-justify { display: flex; justify-content: left; & #submit-button { display: flex; gap: 1rem; align-items: center; justify-content: center; width: fit-content; margin: 0; padding: var(--button-padding); font: var(--reg-button-font); font-weight: var(--button-font-weight); color: black !important; background-color: var(--button-background) !important; border: var(--button-border) !important; border-radius: 6px !important; transition: var(--transition); &::after { content: 'arrow_right_alt'; display: block; font-family: var(--symbol-family); font-size: 1.5em; font-weight: 300; transition: var(--transition); } &:hover { color: white !important; background-color: #8750e5!important; border-color: var(--button-border-color-hover) !important; &::after { transform: translateX(0.15em); } } } } #vs-registration .register-form>div:last-of-type { display: flex; flex-direction: column; gap: 1.8rem; font-size: 16px; } /* THANK YOU */ #vs-registration .thankyou { margin: unset; padding: unset; >* { margin: unset; color: var(--reg-text); } & h1 { margin: 0 0 0.4em; font: var(--h1-font); .highlight { color: var(--brand-color); } } & h2 { margin: 0 0 0.25em; font: var(--h2-font); } & h3 { margin: 0 0 0.5em; font: var(--h3-font); } & h4 { margin: 0 0 0.5em; font: var(--h4-font); } } @media (width <=1200px) { #vs-registration .container:not(.separate-image-wrapper) { .content { grid-template-columns: 1fr 500px; } } #vs-registration .container.separate-image-wrapper { grid-template: 'image' auto 'content' auto / 1fr; justify-items: center; .hidden-image { align-items: center; justify-content: center; width: 100%; min-height: 40lvh; } .register-text-container>* { text-align: center; } } } @media (width <=1050px) { #vs-registration .container:not(.separate-image-wrapper) { .content { grid-template-columns: 1fr; } } #vs-registration .register-text-container { justify-self: center; >* { text-align: center; } } #vs-registration .register-form { justify-self: center; } } @media (width <=650px) { #vs-registration .register-item-type-radio>div { grid-template-columns: 1fr !important; } } @media (width <=550px) { #vs-registration .register-form .register-flex { display: flex; flex-direction: column; } } /* HIDDEN */ #vs-hidden { position: relative; flex: 1; min-height: min(600px, 100svh); padding: 0 !important; background-repeat: no-repeat; background-position: center; background-size: cover; &>* { grid-column: 1 / -1; width: 100%; } } /* Image as a background */ #vs-hidden .container:not(.separate-image-wrapper) { z-index: 1; display: grid; grid-template-columns: 1fr; width: 100%; .content { display: grid; grid-template-columns: 1fr max-content; gap: var(--spacing-l) var(--spacing-horizontal); align-items: center; padding: unset !important; } } /* Image as an element next to content */ #vs-hidden .container.separate-image-wrapper{ display: grid; grid-template: 'image content' auto / 1.35fr 1fr; gap: 0 !important; align-items: stretch; justify-content: start; max-width: unset; padding: unset; .content { display: flex; grid-area: content; flex-direction: column; gap: var(--spacing-s) var(--spacing-l) !important; place-items: stretch stretch; justify-items: stretch; max-width: calc(var(--max-container-width) / 2 + var(--spacing-horizontal)); margin: 0; padding: var(--spacing-l) var(--spacing-horizontal) var(--spacing-l) !important; } .hidden-image { position: relative; display: flex; grid-area: image; align-items: stretch; justify-content: end; padding: 0; background-position: center; background-size: cover; & img { display: none; max-width: unset; margin: unset; object-fit: cover; object-position: center; border-radius: 0; } @media (width <=1050px) { width: 100%; min-height: 40lvh; } } @media (width <=1050px) { grid-template: 'image' auto 'content' auto / 1fr; justify-content: center; justify-items: center; } } /* Hidden stage texts */ #vs-hidden .hidden-text { max-width: 800px; margin: unset; padding: 0; >span>* { margin: unset; color: var(--hidden-text); } & h1 { margin: 0.1em 0 0.25em; font: var(--h1-font); font-size: 56px !important; } & h2 { font: var(--h2-font); } & h3 { font: var(--h3-font); font-size: 28px !important; } & h4 { font: var(--h4-font); font-size: 28px !important; line-height: 40px; &.extra-margin-top { margin-top: var(--spacing-l); } } } /* COUNTDOWN */ .countdown-container { display: grid; grid-template-columns: auto auto auto auto; gap: var(--spacing-s); align-content: center; align-items: center; width: fit-content; margin: 0; padding: 0; background-color: var(--countdown-container-bg); border-radius: var(--countdown-container-radius); &::before { content: 'Live event will start in:'; content: unset; grid-column: 1 / -1; margin: 0 auto; font: var(--h4-font); font-weight: 300; color: var(--brand-color); text-align: center; } .counter { gap: 0.01em; align-items: center; justify-content: center; font-weight: 100; aspect-ratio: 1; width: max(1.65em, calc(var(--font-size-s) * 5)); min-width: unset; height: auto; min-height: unset; font-family: var(--font-family-headings); font-size: 70px; color: white; opacity: unset; background-color: var(--counter-bg); backdrop-filter: blur(20px); border: 0px solid #fff1; border-radius: 6px; box-shadow: var(--counter-shadow); } :is(.days, .hours, .minutes, .seconds) { font-size: inherit; font-weight: 300; line-height: 0.9; text-align: center; } .counter-text { margin: unset; font: var(--text-font); font-size: var(--font-size-s); color: white; & p { margin: unset; } } } @media (width <=900px) { #vs-hidden .container:not(.separate-image-wrapper)>.content { grid-template-columns: 1fr; align-content: center; justify-items: center; } .hidden-text>span>* { text-align: center; } .countdown-container { grid-template-columns: 1fr 1fr; margin: 0 auto; } } @media (width <=650px) { .countdown-container .counter { width: max(1.75em, calc(var(--font-size-xs) * 6)); } .countdown-container .counter .counter-text { font-size: var(--font-size-xs); } } @media (width <=500px) { .countdown-container { grid-template-columns: 1fr 1fr; } } /* PRESENTATION */ #vs-presentation { grid-template: '. container .' auto / auto minmax(50px, 2000px) auto; padding: var(--spacing-m) 0; order: 1; background: #29074a; } #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 { z-index: 20; gap: 2vi 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 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 <=450px) { #vs-presentation .container>div:is(.video-container, .slide-container) { font-size: 14px; } } /* THUMBNAILS */ #vs-thumbnails { margin: 0 auto; padding: var(--spacing-s) var(--spacing-horizontal); order: 1; } #vs-thumbnails .slidethumbnails--item { position: relative; padding: 4px; border-radius: 6px; } #vs-thumbnails .container .slidethumbnails--item button { position: relative; overflow: hidden; display: flex; border-radius: 4px; } #vs-thumbnails .container .slidethumbnails--item.active { outline: 1px 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.15em; font-size: 12px; background-color: #0009; backdrop-filter: blur(4px); border-radius: 9rem; box-shadow: var(--shadow); } #vs-thumbnails .container .slidethumbnails--item.browsed-slide { outline: 1px solid var(--brand-color-alt); } #vs-thumbnails .slidethumbnails>button { color: var(--text-color); } @media (width <=420px) { #vs-thumbnails .container .slidethumbnails--item.active button::before { font-size: 12px; } } /* About */ #vs-about-section { padding: 40px 40px; order: 5; display: grid; justify-content: stretch; align-items: stretch; } #vs-about-section .container { margin: 0 auto; width: 100%; } #vs-about-section .section-heading { text-align: center; color: black; font-weight: 500; padding: 0; font-size: 1.75em; } .intro, .intro p { margin: 0; } .info-agenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 900px; gap: 60px; } .info-agenda .text { font-size: 20px; padding: 0; } .info-agenda .text b { display: inline-block; font-size: 20px; font-weight: 100; color: black; margin-bottom: 8px; } .info-agenda .text b:last-of-type { margin-top: 1.5rem; } .info-agenda .text a { text-decoration: none; display: block; width: fit-content; margin-top: .75rem; padding: 0 0 2px; border-bottom: 1px solid #0000a0; min-width: 150px; transition: .2s ease; color: black; } @media (max-width: 950px) { #vs-about-section { padding: 40px 20px; } .info-agenda { gap: 20px; } } /* 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 auto; & .content { margin: 0; } } /* Chapters list */ & .chapter-list { display: flex; flex-flow: column nowrap; gap: 1rem; margin: 0; padding: unset; &::before { content: 'Please note that the times are shown in EET'; margin: 0 0 1em; font-size: var(--font-size-s); text-align: left; display: none !important; } /* Chapter item */ & .chapter-list--item { display: grid; grid-template-columns: min-content 1fr; flex-basis: unset; gap: 0 1.5rem; align-content: start; align-items: stretch; break-inside: avoid; margin: 0; padding: unset; font: var(--text-font); line-height: 1.2; & 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: 400; color: var(--chapters-text); } & :has(span:empty) { display: none; } } } } @media (width <=1050px) { grid-column: 1/-1; } } /*SPEAKER SECTION*/ #vs-speakers-section { order: 4; color: black; background-color: white; } #vs-speakers-section react-component>div { margin: auto; max-width: 1300px; } #vs-speakers-section .speakers-section-title { text-align: left; color: black; font-weight: 500; padding: 0; font-size: 40px; } #vs-speakers-section ul { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } #vs-speakers-section ul li { margin: 10px 0; } #vs-speakers-section ul li>div { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; } #vs-speakers-section ul li .speakers-section-speaker-item-text-content h3 { font-size: 25px; color: #29074a; font-weight: 400; margin: 0; } #vs-speakers-section ul li .speakers-section-speaker-item-text-content>div, #vs-speakers-section ul li .speakers-section-speaker-item-text-content h4 { font-size: 19px; color: #545250; font-weight: 400; padding: 0; } #vs-speakers-section ul li img { border-radius: 6px; max-width: 380px; } /* MESSAGEBOARD */ #vs-messageboard { order:2; background: #29074a; --input-background: white; --input-background-hover: #fff; --input-border: .5px solid rgba(0, 0, 0, 0.712); --input-border-color-hover: black; --input-radius: .25rem; --button-background-hover: var(--base-color-alt); --button-padding: 0.35em 1.25em 0.2em 1.75em; flex: 1; padding: var(--spacing-l) var(--spacing-horizontal) !important; } #vs-messageboard .container { width: 100%; max-width: 1000px !important; padding: 0; } #vs-messageboard .section-heading { margin: 0 0 0.75em; font: var(--text-font); font-size: calc(var(--font-size-0) * 1.15); color: white; text-align: center; } #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; 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: black; 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: 2.5lh; max-height: 300px; margin: 0; padding: 0 0.65em; font: var(--text-font); font-size: 16px; line-height: 1; color: black; background-color: white; border: transparent; border-radius: var(--input-radius) !important; outline: none; transition: var(--transition), height 0s; } #vs-messageboard .comment-form #comment-text { padding-top: 0.65em; line-height: 1.15; } #vs-messageboard .comment-form :is(#comment-name, #comment-text)::placeholder { color: grey; opacity: 0.85; } #vs-messageboard .comment-form :is(#comment-name, #comment-text):is(:hover, :focus) { color: black ; 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: 0.5rem; align-items: center; justify-content: space-between; min-height: 2.25lh; margin: 0; padding: var(--button-padding); font-family: var(--font-family-text); font-size: 14px; line-height: 1; color: black !important; background-color: white !important; border: var(--button-border) !important; border-radius: 6px !important; 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; text-transform: none; transition: var(--transition); } #vs-messageboard #submit-button:hover { color: white !important; background-color: #8750e5 !important; border-color: transparent!important; } #vs-messageboard #submit-button:hover::after { transform: translateX(0.25em); } #vs-messageboard .comment-form .add-emoji-container { color: grey; } #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: 0 !important; } /* '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: black; text-align: center; background: white; border: 1px solid #0001; 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 */ #chatboard-scroll:not(:has(.post)) { display: none; } #vs-messageboard #chatboard-comments { margin: var(--spacing-m) 0 0; } /* Message */ #vs-messageboard .post { padding: 0; color: var(--post-text); background-color: var(--post-bg); border: 1px solid rgba(0, 0, 0, 0.627); border-radius: var(--post-radius); box-shadow: var(--post-shadow) !important; } #vs-messageboard .post .comment-header { padding: .75rem .75rem 0.75rem; } #vs-messageboard .post .post-byline { display: flex; flex-direction: row; gap: 0.5rem; justify-content: start; font: var(--text-font); font-size: calc(var(--font-size-s) * .9); line-height: 1; } #vs-messageboard .post .post-byline * { font: inherit; } #vs-messageboard .post .post-byline .author a { font-weight: 400; } #vs-messageboard .post .post-byline .bullet { display: none; } #vs-messageboard .post .post-byline .time-ago { font-size: max(75%, 14px); opacity: 0.85; } #vs-messageboard .post .post-body-inner { padding: 0 .75rem 0.75rem; font: var(--text-font); font-size: clamp(13px, var(--font-size-s), 16px); line-height: 1.2; } #vs-messageboard .post .post-body-inner * { margin: unset; } /* Post reactions */ .comment-footer .post-reactions { gap: 12px; padding: 0 1rem .5rem; font-size: 16px; line-height: 1.1; &:not(:has(.toggle-reaction)) { display: none; } } .post-reactions .toggle-reaction { margin: 0; } .post-reactions .reaction-count { top: 0; right: -10px; left: unset; min-width: 12px; height: 12px; font-size: 10px; line-height: 12px; background-color: #fff6; border: none; box-shadow: 0 0 2px #0003; } /* Reply form */ #vs-messageboard .post .reply-form { padding: 0 .75rem 40px; } #vs-messageboard .post .reply-form .reply-user { margin-bottom: 0.5rem; } #vs-messageboard .post .reply-form :is(input, textarea) { resize: none; width: 100%; max-width: unset; height: 2.15em; max-height: 200px; margin: 0; padding: 0 0.5em; font-size: 14px; line-height: 1; color: var(--input-text); background-color: #fff; border: .5px solid #0002; border-radius: 4px !important; outline: none; transition: var(--transition), height 0s; &::placeholder { color: var(--input-placeholder); opacity: .8; } ; } .reply-form .add-emoji-container { display: none; } #vs-messageboard .post .reply-form textarea { padding-top: 0.5em !important; line-height: 1.2; } #vs-messageboard .post .reply-form :is(input, textarea):is(:hover, :focus) { background-color: #fff !important; border-color: #0003 !important; outline: none; } /* Reply buttons */ #vs-messageboard .post :is(.open-reply-form, .mobile-actions, .reply-actions):not(.fa-plus) { position: absolute; right: .5rem; bottom: 0.5rem; } #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: .15em 10px .1em !important; font: var(--text-font); font-size: 12px !important; font-weight: 400; color: var(--button-text); background: var(--button-background); border: var(--button-border); border-radius: .15rem; 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); opacity: 0.75; } #vs-messageboard .post .comment-footer button.fa-plus { width: 24px; height: 24px; font-family: fontawesome, sans-serif; font-size: 12px; color: var(--button-background); border: var(--button-border); border-radius: 50%; transition: 0.2s ease; &:hover { color: var(--button-background); } } .post .post-actions { top: .25rem; right: .25rem; aspect-ratio: 1; padding: .25em; font-size: var(--font-size-s); color: var(--button-text); background: var(--button-background); border: none; border-radius: .15rem; transition: var(--transition); & .show-reactions { padding: 0; line-height: 1; background: transparent !important; .fa { background: transparent !important; } .fa-plus { top: -2px; right: -2px; } } &:hover { opacity: .9; } } .eventstate-hidden_live #vs-messageboard { background-color: #29074a !important; padding: 0 !important; } .eventstate-hidden_live #vs-hidden #vs-messageboard .content { padding: 0 !important; } .eventstate-hidden_live #vs-messageboard .section-heading { text-align: start; font-size: 16px; color: #fff !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: 100%; border-bottom: 1px solid var(--brand-color-alt); padding: 0; resize: none; color: #fff; } .eventstate-hidden_live #vs-messageboard .comment-form :is(#comment-name) { display: none; } .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 .comment-form :is(#comment-name, #comment-text)::placeholder { color: #fff; } .eventstate-hidden_live #vs-messageboard #submit-button { background-color: var(--brand-color-alt) !important; color: #07006d !important; } .eventstate-hidden_live #vs-messageboard #comment-text-container { width: 100%; } .eventstate-hidden_live #vs-messageboard .comment-form form { flex-direction: column; display: flex; } /* About */ #vs-about-section { order:5; } #vs-about-section { padding: 0 0 0 0; background-color: #f4f5f2 !important; } #vs-about-section .container { max-width: 1600px; margin: 0 auto; } #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 1fr; align-items: end; gap: 80px; } .about-text { padding: 20px 0 50px 0; color: #000000; font-size: 1.5rem; line-height: 43px; gap: 100px; display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .about-text p { display: grid; grid-template-columns: 1fr 6fr; gap: 15px; } #vs-about-section h2 { font-weight: 500; font-size: 42px; } .about-image { align-self: stretch; margin: 0; padding-bottom: 100%; background: url(https://cdn.videosync.fi/events/intrum/696d32edbc9c3dd6994a2d1e/images/intrum_building_crop_1920x1286-7594815170426_crop_1287x1286.jpg) center center / cover no-repeat; } @media (max-width: 990px) { .about-text p{ font-size: 20px; } } @media (max-width: 930px) { .about-columns { grid-template-columns: 1fr; } .about-text{ gap: 50px; } .about-text p{ font-size: 20px; } } @media (max-width: 1760px) { #vs-about-section .container { max-width: unset; } .about-text { padding-left: 30px; } .about-columns{ gap: 50px; } } @media (max-width: 750px) { .about-columns { grid-template-columns: 1fr; } .about-text { padding: 50px; } .about-image { background-position: top center; padding-bottom: 0; height: 100vw; max-height: 35vh; margin-bottom: 50px; } } @media (max-width: 450px) { .about-text { padding: 20px; } } /* 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 var(--brand-color); } #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; } .wrapper { position: relative; z-index: 50; } @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-videosync-footer { filter: invert(1) !important; color: black; } #vs-videosync-footer { background-color: #d6f8b5; } #vs-footer { order:5; padding: 0; } #vs-footer .container { max-width: unset; } #vs-footer .footer-text { padding: 0; } .footer-text .lower { padding: 40px; } .footer-text .lower-content { max-width: 1200px; margin: 0 auto; display: center; grid-template-columns: 1fr 250px; } .footer-text .lower-content .socials { justify-content: center; display: flex; height: 100%; align-items: center; } .footer-text .lower-content .socials a { text-decoration: none; display: flex; border-radius: 30px; justify-content: center; align-items: center; background-color: #29074a; color: #fff; padding: 10px; width: 40px; height: 0px; border: 1px solid transparent; margin: 5px; } .footer-text .lower-content .socials a:hover{ background-color: rgb(228 242 255); border: 1px solid #29074a; color: #000; } .footer-text .lower-content .socials a:first-of-type{ padding: 0; } .footer-text .lower-content .socials a:first-of-type img { width: 100%; height: 100%; } .footer-text .lower-content .socials a:hover img { filter: invert(0); } .footer-text .lower-content .socials .x-icon img{ width: 20px; height: 20px; filter: invert(1); } .footer-text .links { display: flex; flex-flow: row wrap; gap: 10px 40px; } .footer-text .links .link { padding: 6px 4px 4px; border-bottom: 2px solid #29074a; min-width: 150px; transition: .2s ease; } .footer-text .links a { font-size: 18px; line-height: 1em; text-decoration: none; } .footer-text .links .link:hover { border-radius: 4px; background: #fff; } .footer-text .lower { padding: 30px 40px; background: #29074a; } .footer-text .lower-content { max-width: 1200px; margin: 0 auto; font-size: 14px; line-height: normal; color: rgb(255 243 238); } @media (max-width: 950px) { .footer-text .upper { padding: 30px 20px; overflow: hidden; } .footer-text .lower-content { grid-template-columns: 1fr; gap: 20px 20px; } .footer-text .links { flex-flow: column wrap; gap: 10px 40px; max-width: 160px; } .footer-text .lower { padding: 20px 20px; overflow: hidden; } }