/* ============================================================================= WASM I/O 2025 : https://wasm.io/ / www.jorgerigabert.com / ========================================================================== */ /* MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNdddddddddddddNMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` -NMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` /MMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` oMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` yMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` `dMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` .mMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` :NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMh` /MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMh` -yyyyydMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMh` /NMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMh` sMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMhhhhhy` .dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN: :NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN- sMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN- .dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMN. :NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMm. oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMm. +hhhhhmMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMm` `sMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMd` :mMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMN+///// .hMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM+ +NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMs -dMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMy `sMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMh /NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMd` .hMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMm` oMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMN. -mMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMM- `yMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMM/ /NMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMM+.hMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMsoMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMNmMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM */ /* ============================================================================= Resets ========================================================================== */ article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video, img{ display: block; } audio, canvas, video{ display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]){ display: none; } [hidden]{ display: none; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, section, nav, img{ margin: 0; padding: 0; } mark, rp, rt, ruby, summary, time{ display: inline; } html{} body{ background: hsla(var(--theme-background),1); color: hsla(var(--color-black),1); -webkit-backface-visibility: hidden; } input, textarea{ outline: none; resize: none; border: none; border: 0; } a{ text-decoration: none; outline: none; color: hsla(var(--color-blue),1);} a.active{ outline: none; } .none{ display: none; } .float-left{ float: left; } .float-right{ float: right; } .align-left{ text-align: left; } .align-center{ text-align: center; text-align-last: center;} .align-right{ text-align: right; } .no-border{ border: none; } table{ border-collapse: collapse; border-spacing: 0; font-size: inherit; font: 100%; } fieldset, img{ border: 0; } address, caption, cite, code, dfn, em, /*strong,*/ th, var, optgroup{ font-style:inherit; font-weight:inherit; } li{ list-style: none; } h1, h2, h3, h4, h5, h6{ font-size: 100%; } input, button, textarea, select, optgroup, option{ font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } select, input, button, textarea, button{ font: 100%; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0;} .clearfix:before, .clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } img{ width: 100%;} *,*:before,*:after{ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;} /* ============================ Animation ============================ */ @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes fadeOut{ 0%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes dash{ to{ stroke-dashoffset:0; } } @keyframes show-title{ 0%{ background-size: 0 100%; } 50%{ background-size: 50% 100%; } 100%{ background-size: 100% 100%; } } @keyframes switchOn_1{ 0%{ transform: translateX(0px) scale(1); transition-timing-function: ease; } 30%{ transform: translateX(16px) scale(0.4);transition-timing-function: ease; } 100%{ transform: translateX(26px) scale(0.3); transition-timing-function: ease; } } @keyframes switchOn_2{ 0%{ transform: translateX(16px) scale(0.3); transition-timing-function: ease; } 100%{ transform: translateX(36px) scale(1); transition-timing-function: ease; } } @keyframes switchOff_2{ 0%{ transform: translateX(36px) scale(1); transition-timing-function: ease; } 30%{ transform: translateX(20px) scale(0.4); transition-timing-function: ease; } 100%{ transform: translateX(10px) scale(0.3); transition-timing-function: ease; } } @keyframes switchOff_1{ 0%{ transform: translateX(36px) scale(0.3); transition-timing-function: ease; } 100%{ transform: translateX(0px) scale(1); transition-timing-function: ease; } } @keyframes switchOn_2_small{ 0%{ transform: translateX(14px) scale(0.3); transition-timing-function: ease; } 100%{ transform: translateX(36px) scale(1); transition-timing-function: ease; } } @keyframes switchOff_2_small{ 0%{ transform: translateX(36px) scale(1); transition-timing-function: ease; } 30%{ transform: translateX(20px) scale(0.4); transition-timing-function: ease; } 100%{ transform: translateX(10px) scale(0.3); transition-timing-function: ease; } } @keyframes expandBorder{ 0%{ clip-path: inset(0 50% 100% 50%); } 15%{ clip-path: inset(0 25% 75% 25%); } 30%{ clip-path: inset(0 0 70% 0); } 45%{ clip-path: inset(0 0 35% 0); } 75%{ clip-path: inset(0 0 15% 0); } 100%{ clip-path: inset(0 0 0 0); } } @keyframes load-arrow-btn{ 0%{ transform: translateX(0%); } 5%{ transform: translateX(-12%); } 7%{ transform: translateX(-12%); } 15%{ transform: translateX(48%); } 16%{ transform: translateX(46%); } 25%{ transform: translateX(0%); } 100%{ transform: translateX(0%); } } @keyframes load-io-1{ 0%{ transform: translateX(-2%); transition-timing-function: ease-in; } 50%{ transform: translateX(109%); transition-timing-function: ease; } 90%{ transform: translateX(109%); transition-timing-function: ease; } 100%{ transform: translateX(107%); transition-timing-function: ease; } } @keyframes load-io-1-small{ 0%{ transform: translateX(-2%); transition-timing-function: ease-in; } 50%{ transform: translateX(137%); transition-timing-function: ease; } 90%{ transform: translateX(137%); transition-timing-function: ease; } 100%{ transform: translateX(135%); transition-timing-function: ease; } } @keyframes load-io-2{ 0%{ transform: translateX(0%); transition-timing-function: ease; } 20%{ transform: translateX(0%); transition-timing-function: ease; } 30%{ transform: translateX(18%); transition-timing-function: ease; } 40%{ transform: translateX(18%); transition-timing-function: ease; } 60%{ transform: translateX(0%); transition-timing-function: ease; } 80%{ transform: translateX(18%); transition-timing-function: ease; } 90%{ transform: translateX(18%); transition-timing-function: ease; } 100%{ transform: translateX(0%); transition-timing-function: ease; } } @keyframes phi-heartbeat{ 0% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: 0.48; } 50% { opacity: 1; } 52% { opacity: 0.48; } 56% { opacity: 1; } 80% { opacity: 1; } 82% { opacity: 0.48; } 84% { opacity: 1; } 86% { opacity: 0.48; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes phi-border-1{ 0% { stroke-width: 0; } 15% { stroke-width: 0; } 20% { stroke-width: 24; } 60% { stroke-width: 24; } 65% { stroke-width: 0; } 100% { stroke-width: 0; } } @keyframes phi-border-2{ 0% { stroke-width: 0; } 15% { stroke-width: 0; } 20% { stroke-width: 24; } 30% { stroke-width: 0; } 65% { stroke-width: 0; } 100% { stroke-width: 0; } } @keyframes move-border{ 0%{ width: 0; } 100%{ width: 100%; } } @keyframes card-icon-repeat{ 0% { background-position: 0 center; } 100% { background-position: calc(var(--icon-info) * 6) center; } } @keyframes card-icon-scale{ 0% { background-size: var(--icon-info); } 35% { background-size: var(--icon-info); } 40% { background-size: calc(var(--icon-info) * 0.78); } 42% { background-size: calc(var(--icon-info) * 1.36); } 43% { background-size: calc(var(--icon-info) * 1.36); } 47% { background-size: var(--icon-info); } 51% { background-size: calc(var(--icon-info) * 1.12); } 56% { background-size: var(--icon-info); } 100% { background-size: var(--icon-info); } } @keyframes card-icon-move{ 0% { background-position: right var(--padding-content) bottom calc(var(--padding-content) * 1.5); } 50% { background-position: right var(--padding-content) bottom calc(var(--padding-content) * 1.5); } 52% { background-position: right calc(var(--padding-content) * 0.8) bottom calc(var(--padding-content) * 1.7); } 53% { background-position: right calc(var(--padding-content) * 0.8) bottom calc(var(--padding-content) * 1.7); } 58% { background-position: right calc(var(--padding-content) * 1.5) bottom var(--padding-content); } 59% { background-position: right calc(var(--padding-content) * 1.5) bottom var(--padding-content); } 64% { background-position: right var(--padding-content) bottom calc(var(--padding-content) * 1.5); } 100% { background-position: right var(--padding-content) bottom calc(var(--padding-content) * 1.5); } } @keyframes dash-arrow-ticket{ 0%{ stroke-dashoffset: 500; } 10%{ stroke-dashoffset: 500; } 25%{ stroke-dashoffset: 0; } 85%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 500; } } @keyframes loop{ 12.5%{ stroke-dasharray: 33.98873px, 242.77666px; stroke-dashoffset: -26.70543px; } 43.75% { stroke-dasharray: 84.97183px, 242.77666px; stroke-dashoffset: -84.97183px; } 100% { stroke-dasharray: 2.42777px, 242.77666px; stroke-dashoffset: -240.34889px; } } @keyframes typewriter{ 0% { width: 1.5px; } 100% { width: 100%; } } @keyframes move-iso-1{ 0%{ transform: rotate(30deg) translateX(-100%) translateY(100%); } 100%{ transform: rotate(30deg) translateX(0%) translateY(0%); } } @keyframes move-iso-2{ 0%{ transform: rotate(350deg) translateX(100%) translateY(-100%); } 100%{ transform: rotate(350deg) translateX(0%) translateY(0%); } } /* ============================ Common ============================ */ body, a, header, nav, img, h1, h2, h3, h4, h5, h6, p, .col, .border-animation, .logo-wasm-io, .logo-wasm-io svg, .header, .header::before, .header-content, .image-section, .a-speakers, .a-speakers::after, .a-speakers::before, .a-speakers p, .a-speakers a, .all-speakers, .all-speakers span::before, .all-speakers span::after, .iwio5, #hero, #info, #speakers, #tickets, #venue, #gallery, #sponsors, #sessions-list, #regular-content, .ticket, .ticket div, #tickets .ticket-top p, #tickets .ticket-bottom p, #tickets .ticket-title h4, #tickets .ticket p, #tickets .ticket-top p span, #tickets .ticket-bottom p span, #tickets .ticket-title h3, #tickets .ticket-cta h3, #tickets .ticket-detail-top::after, #tickets .ticket-detail-top::before, #tickets .ticket-detail-bottom::after, #tickets .ticket-detail-bottom::before, #timer div span, .toggle-color.dark-off .switch-icons-night .sw2, .toggle-color.dark-on .switch-icons-day .sw2, .anim-typewriter .anim-typewriter::before, .anim-typewriter::after, .title-download-detail, .title-download-detail::after, .pse, .title-logo-detail, .title-logo-detail svg{ transition: all 0.3s ease!important; } .bg-init, .animsition-overlay-slide{ background: hsla(var(--color-blue-tint-1),1); z-index: 3000; } .bg-init.dark, .dark .animsition-overlay-slide{ background: hsla(var(--color-darkest-blue),1); } .post{ position: relative; z-index: 2; opacity: 0; } .animated{ animation-duration:1s; animation-fill-mode:both; } .animated.fadeIn{ animation-name: fadeIn; } p a{ text-decoration: underline; font-weight: 700; color: hsla(var(--color-blue),1); opacity: 0.72; } p a:hover{ color: hsla(var(--color-dark-blue),1); opacity: 1; } .image-section{ position: relative; width: 90%; height: auto; max-width: 360px; } .image-section:last-of-type{ display: none; } .phi0, .phi1, .phi2, .phi3, .phi4, .phi5, .phi6, .phi7, .phi8, .phi9, .phi10, .phi11{ opacity: 0; } .phi0{ fill: hsla(var(--color-purple),1);} .phi1{ fill: hsla(var(--theme-card),1);} .phi2{ fill: hsla(var(--color-yellow),1);} .phi3{ fill: hsla(var(--color-red),1);} .phi4{ fill: hsla(var(--color-blue),1);} .phi5{ fill: hsla(var(--color-green),1);} .phi6{ fill: hsla(var(--color-dark-blue),1);} .phi7{ fill: hsla(var(--color-darkest-blue),1);} .phi8{ fill: hsla(var(--color-blue-tint-1),1);} .phi9{ fill: hsla(var(--color-blue-tint-2),1);} .phi10{ fill: hsla(var(--color-blue-tint-3),1);} .phi11{ fill: hsla(var(--color-blue-tint-4),1);} .phi12{ fill: none; stroke: hsla(var(--color-yellow),1); stroke-width: 0;} .phi14{ fill: none; stroke: hsla(var(--color-red),1); stroke-width: 0;} .init-page #hero .phi0{ animation: fadeIn 0.24s 0.6s ease-in forwards;} .init-page #hero .phi1{ animation: fadeIn 0.24s 0.36s ease-in forwards;} .init-page #hero .phi2{ animation: fadeIn 0.24s 0.48s ease-in forwards;} .init-page #hero .phi3{ animation: fadeIn 0.24s 0.24s ease-in forwards;} .init-page #hero .phi4{ animation: fadeIn 0.24s 0.72s ease-in forwards;} .init-page #hero .phi5{ animation: fadeIn 0.24s 0.84s ease-in forwards;} .init-page #hero .phi6{ animation: fadeIn 0.24s 0.96s ease-in forwards;} .init-page #hero .phi7{ animation: fadeIn 0.24s 1.08s ease-in forwards;} .init-page #hero .phi8{ animation: fadeIn 0.24s 1.14s ease forwards;} .init-page #hero .phi9{ animation: fadeIn 0.24s 1.2s ease forwards;} .init-page #hero .phi10{ animation: fadeIn 0.24s 1.26s ease forwards;} .init-page #hero .phi11{ animation: fadeIn 0.24s 1.32s ease-in-out forwards;} .section-images.visible .phi0{ animation: fadeIn 0.36s 0.24s ease-in forwards;} .section-images.visible .phi1{ animation: fadeIn 0.36s 0.36s ease-in forwards;} .section-images.visible .phi2{ animation: fadeIn 0.36s 0.48s ease-in forwards;} .section-images.visible .phi3{ animation: fadeIn 0.36s 0.6s ease-in forwards;} .section-images.visible .phi4{ animation: fadeIn 0.36s 0.72s ease-in forwards;} .section-images.visible .phi5{ animation: fadeIn 0.36s 0.84s ease-in forwards;} .section-images.visible .phi6{ animation: fadeIn 0.36s 0.96s ease-in forwards;} .section-images.visible .phi7{ animation: fadeIn 0.36s 1.08s ease-in forwards;} .section-images.visible .phi8{ animation: fadeIn 0.36s 1.2s ease-in forwards;} .section-images.visible .phi9{ animation: fadeIn 0.36s 1.32s ease-in forwards;} .section-images.visible .phi10{ animation: fadeIn 0.36s 1.44s ease-in forwards;} .section-images.visible .phi11{ animation: fadeIn 0.36s 1.56s ease-in forwards;} .init-page #hero .load-io-1{ opacity: 0; animation: fadeIn 0.36s 1.68s ease-in forwards; } .init-page #hero .load-io-1 .phi8, .init-page #hero .load-io-1 .phi9, .init-page #hero .load-io-1 .phi10, .init-page #hero .load-io-1 .phi11{ opacity: 1; animation: load-io-1 4.32s 2.56s ease infinite; } .init-page #hero .load-io-1-small{ opacity: 0; animation: fadeIn 0.36s 1.68s ease-in forwards; } .init-page #hero .load-io-1-small .phi8, .init-page #hero .load-io-1-small .phi9, .init-page #hero .load-io-1-small .phi10, .init-page #hero .load-io-1-small .phi11{ opacity: 1; animation: load-io-1-small 4.32s 2.56s ease infinite; } .init-page #hero .load-io-2{ opacity: 0; animation: fadeIn 0.36s 1.68s ease-in forwards; } .init-page #hero .load-io-2 .phi1, .init-page #hero .load-io-2 .phi9, .init-page #hero .load-io-2 .phi10{ opacity: 1; animation: load-io-2 10s 3.6s ease infinite; } .init-page #hero .load-io-3{ opacity: 1; animation: fadeOut 0.36s 2.68s ease-in forwards; } .init-page #hero .load-io-4{ opacity: 0; animation: fadeIn 0.36s 1.8s ease-in forwards; } .init-page #hero .load-io-4 .phi-heartbeat{ opacity: 1; animation: phi-heartbeat 9.6s 3.6s ease-out infinite; } .init-page #hero .load-io-4 .phi12{ opacity: 1; animation: phi-border-1 6.6s 2.6s ease-out infinite; } .init-page #hero .load-io-4 .phi12:last-child{ opacity: 1; animation: phi-border-2 6.6s 4.6s ease-out infinite; } .init-page #hero .load-io-4 .phi14{ opacity: 1; animation: phi-border-1 6.6s 4.6s ease-out infinite; } #info, #sessions, #speakers, #tickets, #venue, #regular-content, #gallery, #sponsors{ position: relative; } h2{ padding-bottom: 24px; } p{ padding-bottom: 24px; } #regular-content h2{ padding-bottom: 18px; } #regular-content .columns-2 h2{ padding-bottom: 6px; } #regular-content .columns-2 h3:first-of-type{ padding-bottom: 15px; } #regular-content h3{ padding-bottom: 12px; } #regular-content ul{ padding-bottom: 18px; } #regular-content ul a{ text-decoration: none; } #regular-content ul a:hover{ color: hsla(var(--theme-text-primary),1); } #title-isolated{ justify-content: center; } #title-isolated h1{ text-align: center; padding: 12px 0 0; } .title-button{ display: flex; gap: var(--padding-content); flex-direction: column; align-items: center; margin-bottom: calc(var(--padding-content) * 1.5); } .title-button h2{ padding: 0; } #hero h1{ max-width: 300px; margin: 12px auto 9px; } #hero h5{ color: hsla(var(--color-grey),1); margin-bottom: 9px; letter-spacing: 2px; } .hero-wrapper h2{ padding-bottom: 12px; } #info h2, #venue h2{ margin: 12px 0 -7px; } #gallery h2, .title-button h2{ margin: 12px 0 0; } .title-button h2{ text-align: center; } #newsletter h2{ margin: 12px 0 -12px; } #regular-content li{ position: relative; padding: 0 0 6px 18px; } #regular-content li p{ padding: 0; } #regular-content li::after{ position: absolute; content: ""; width: 9px; height: 9px; border-radius: 100%; top: 9px; left: 0; background: hsla(var(--color-blue),1); } .title-download{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 12px; } .title-download p{ max-width: 540px; } .title-download p:first-child{ padding-bottom: 6px; } .title-download p:last-of-type{ color: hsla(var(--theme-text-primary),0.72); } .title-download-detail{ position: absolute; width: calc(100% - 1px); height: calc(100% - 1px); top: 0.5px; left: 0.5px; border-radius: var(--border-radius); overflow: hidden; pointer-events: none; } .title-download-detail::after{ position: absolute; content: ""; width: 300px; height: 300px; top: auto; right: 0; bottom: -200px; left: 0; border-radius: 100%; opacity: 0; margin: 0 auto; background: hsla(var(--theme-card),0.24); } .visible.title-download-detail::after{ animation: fadeIn 0.84s 0.84s ease-in-out forwards; } .title-logo-detail{ position: absolute; width: calc(100% - 1px); height: calc(100% - 1px); top: 0.5px; left: 0.5px; border-radius: var(--border-radius); overflow: hidden; pointer-events: none; z-index: -1; } .title-logo-detail svg{ position: absolute; width: 240px; height: auto; margin: 0; opacity: 0; } .title-logo-detail svg:first-of-type{ bottom: -36px; left: -48px; transform: rotate(30deg) translateX(-100%) translateY(100%); } .visible.title-logo-detail svg:first-of-type{ animation: move-iso-1 0.96s 0.96s ease-in-out forwards; } .title-logo-detail svg:last-of-type{ top: -78px; right: -78px; transform: rotate(350deg) translateX(100%) translateY(-100%); } .visible.title-logo-detail svg:last-of-type{ animation: move-iso-2 0.96s 0.6s ease-in-out forwards; } .iso0{ fill: hsla(var(--color-purple),1); } .iso1{ fill: url(#gradient); } .iso2{ fill: hsla(var(--color-black),1); opacity: 0.2; } .iso3{ fill: hsla(var(--color-white),1); } .hr, hr{ width: 0; height: 1.5px; border-width: 0; color: hsla(var(--color-blue),1); background-color: hsla(var(--color-blue),1); opacity: 0.36; margin-bottom: 36px; } .hr.visible, hr.visible{ animation: move-border 0.84s ease forwards; } .video-responsive{ position: relative; height: 0; overflow: hidden; padding-bottom: 56%; border-radius: calc(var(--border-radius) / 1.5); opacity: 0.84; border: 1.5px solid hsla(var(--theme-border),0.36); } .video-responsive iframe, .video-responsive object, .video-responsive embed{ height: 100%; left: 0; position: absolute; top: 0; width: 100% } /* ============================ Grid ============================ */ .wrapper{ width: 94%; padding: var(--padding-block) 3%; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-3--2-1, .grid-3--1-2, .grid-5--1-3-1{ display: block; width: 100%; margin: 0 auto; text-align: left; max-width: 1440px; position: relative; } .wrapper.small .grid-1, .wrapper.small .grid-2, .wrapper.small .grid-3, .wrapper.small .grid-4, .wrapper.small .grid-3--2-1, .wrapper.small .grid-3--1-2, .wrapper.small .grid-5--1-3-1{ max-width: 860px; } .grid-1 .col, .grid-2 .col, .grid-3 .col, .grid-4 .col, .grid-3--2-1 .col, .grid-3--1-2 .col, .grid-5--1-3-1 .col{ width: 100%; position: relative; vertical-align: top; } .border-animation{ position: relative; padding: var(--padding-content); } .border-animation.np{ padding: 1.5px; } .visible.border-animation::before{ content: ""; position: absolute; top: -1.5px; left: -1.5px; right: -1.5px; bottom: -1.5px; border: 1.5px solid hsla(var(--theme-border),0.36); border-radius: var(--border-radius); animation: expandBorder 1.2s forwards linear; clip-path: inset(0 50% 100% 50%); z-index: -1; } .background-expand{ margin-top: var(--padding-block)!important; margin-bottom: var(--padding-block)!important; padding-top: calc(var(--padding-block) * 2)!important; padding-bottom: calc(var(--padding-block) * 2)!important; } /* ============================ Typography ============================ */ @font-face{ font-family: 'Graphik'; src: url('../fonts/Graphik-Regular.eot'); src: url('../fonts/Graphik-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Graphik-Regular.woff2') format('woff2'), url('../fonts/Graphik-Regular.woff') format('woff'), url('../fonts/Graphik-Regular.ttf') format('truetype'), url('../fonts/Graphik-Regular.svg#Graphik-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face{ font-family: 'Graphik'; src: url('../fonts/Graphik-Bold.eot'); src: url('../fonts/Graphik-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Graphik-Bold.woff2') format('woff2'), url('../fonts/Graphik-Bold.woff') format('woff'), url('../fonts/Graphik-Bold.ttf') format('truetype'), url('../fonts/Graphik-Bold.svg#Graphik-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face{ font-family: 'Graphik'; src: url('../fonts/Graphik-RegularItalic.eot'); src: url('../fonts/Graphik-RegularItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Graphik-RegularItalic.woff2') format('woff2'), url('../fonts/Graphik-RegularItalic.woff') format('woff'), url('../fonts/Graphik-RegularItalic.ttf') format('truetype'), url('../fonts/Graphik-RegularItalic.svg#Graphik-RegularItalic') format('svg'); font-weight: normal; font-style: italic; font-display: swap; } @font-face{ font-family: 'Neutra Text TF Alt'; src: url('../fonts/NeutraTextTF-BoldAlt.eot'); src: url('../fonts/NeutraTextTF-BoldAlt.eot?#iefix') format('embedded-opentype'), url('../fonts/NeutraTextTF-BoldAlt.woff2') format('woff2'), url('../fonts/NeutraTextTF-BoldAlt.woff') format('woff'), url('../fonts/NeutraTextTF-BoldAlt.ttf') format('truetype'), url('../fonts/NeutraTextTF-BoldAlt.svg#NeutraTextTF-BoldAlt') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } body, p, #regular-content li{ font-family: 'Graphik'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 30px; color: hsla(var(--theme-text-primary),1); } h1, h2, h3, h4, h5, h6, #sessions #tabs:first-of-type, /*table div p:first-child,*/ table td:first-child, #tickets .ticket #timer, #tickets .ticket p, #gallery a{ font-family: 'Neutra Text TF Alt'; font-weight: bold; text-transform: uppercase; color: hsla(var(--theme-text-primary),1); } h1{ font-size: 36px; line-height: 40px; } #hero-section h1{ font-size: var(--hero-section-h1); line-height: var(--hero-section-h1); } h2{ font-size: 36px; line-height: 40px; } #hero-section h2{ font-size: var(--hero-section-h2); line-height: var(--hero-section-h2); text-align: center; padding: 0; } h3{ font-size: 24px; line-height: 32px; } h4{ font-size: 30px; line-height: 34px; } h5{ font-size: 24px; line-height: 30px; } h6{ font-size: 24px; line-height: 32px; } .show-title{ display: flex; opacity: 1; background: linear-gradient(hsla(var(--theme-text-primary),1),hsla(var(--theme-text-primary),1)) no-repeat 0 0; background-size: 0 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: hsla(var(--theme-text-primary),0); } .show-title::before{ position: absolute; top: 0; left: 0; content: attr(data-descr); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: hsla(var(--theme-text-primary),0); -webkit-text-stroke: 1.5px hsla(var(--theme-text-primary),1); } .show-title.visible{ animation: show-title 0.6s 0.36s linear forwards; } .show-title.visible::before{ animation: fadeOut 0.36s 0.84s linear forwards; } .anim-typewriter{ position: relative; width: 100%; margin: 0 auto; font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; animation: typewriter 2s steps(44) 2s 1 normal both; } .anim-typewriter::before, .anim-typewriter::after{ position: absolute; content: ""; width: 1.5px; height: 100%; top: -18%; right: 0; } .anim-typewriter::before{ background: hsla(var(--theme-text-primary),1); animation: fadeOut 0.48s steps(44) infinite normal; } .anim-typewriter::after{ opacity: 0; background: hsla(var(--theme-background),1); animation: fadeIn 0.36s 2s ease forwards; } /* ============================ Buttons ============================ */ .button{ display: inline-flex; position: relative; cursor: pointer; width: fit-content; height: fit-content; } .button span{ font-size: 16px; font-weight: bold; letter-spacing: 0.5px; padding: 9px 24px; background: linear-gradient(hsla(var(--color-blue),0.24) 0%, hsla(var(--color-blue),0.24) 100%),linear-gradient(hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 100%); border-radius: calc(var(--border-radius) - 6px); z-index: 1; color: hsla(var(--theme-text-primary),1); border: 2px solid hsla(var(--color-blue),1); transition: all 0.3s ease-in-out; } .button:hover span{ padding-right: 36px; padding-left: 36px; box-shadow: inset 0 0 60px 60px hsla(var(--color-blue),0.18); } .button:active span{ box-shadow: inset 0 0 60px 60px hsla(var(--color-blue),0.68); } .button::before{ content: ""; position: absolute; opacity: 0.42; top: 2.5px; right: 2.5px; width: calc(100% + 1px); height: calc(100% + 1px); background: url('data:image/svg+xml,') no-repeat left bottom / 100%, linear-gradient(hsla(var(--color-blue),0.6) 0%, hsla(var(--color-blue),0.6) 100%), linear-gradient(hsla(var(--color-black),0.78) 0%, hsla(var(--color-black),0.78) 100%); z-index: 0; border-radius: calc(var(--border-radius) - 6px); transition: all 0.3s ease-in-out; } .button:hover::before{ top: 3.5px; right: 3.5px; opacity: 0.72; } .dark .button::before{ opacity: 0.84; } .dark .button:hover::before{ opacity: 1; } .button-cta{ position: relative; display: inline-flex; width: fit-content; cursor: pointer; height: var(--btn-cta-height); border-radius: var(--btn-cta-height); color: hsla(var(--color-white),1); font-size: 16px; font-weight: bold; letter-spacing: 0.5px; background: hsla(var(--color-dark-blue),1); overflow: hidden; justify-content: center; align-items: center; padding: 0 var(--btn-cta-padding); gap: calc(var(--btn-cta-padding) / 2); border: 2px solid hsla(var(--color-darkest-blue),1); } .dark .button-cta{ background: hsla(var(--color-blue-tint-1),1); border-color: hsla(var(--color-blue-tint-2),1); } .button-cta.xl{ font-size: 20px; height: var(--btn-cta-xl-height); border-radius: var(--btn-cta-xl-height); padding: 0 var(--btn-cta-xl-padding); gap: calc(var(--btn-cta-xl-padding) / 2); } .button-cta .text, .button-cta .icon-container{ position: relative; z-index: 2; } .button-cta .text strong, .button-cta .icon-container{ display: none; } .button-cta.xl .text strong, .button-cta.xl .icon-container{ display: inline-flex; } .button-cta .icon-container{ position: relative; width: var(--btn-cta-icon-size); height: var(--btn-cta-icon-size); transition: transform 500ms ease; } .button-cta .icon-container .icon{ position: absolute; left: 0; top: 0; width: var(--btn-cta-icon-size); height: var(--btn-cta-icon-size); transition: transform 500ms ease, opacity 250ms ease; } .button-cta .icon-container .icon--left{ transform: translateX(-200%); opacity: 0; } .button-cta .icon-container .icon--right{ animation: load-arrow-btn 4s 2.6s ease infinite; } .button-cta .icon-container .icon svg{ width: var(--btn-cta-icon-size); height: var(--btn-cta-icon-size); stroke: hsla(var(--color-white),1); stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-width: 1.5; } .button-cta.xl .icon-container, .button-cta.xl .icon-container .icon, .button-cta.xl .icon-container .icon svg{ width: var(--btn-cta-xl-icon-size); height: var(--btn-cta-xl-icon-size); } .button-cta::after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: hsla(var(--color-blue),1); border-radius: var(--btn-cta-height); z-index: 1; transition: transform 500ms ease; } .dark .button-cta::after{ background: hsla(var(--color-dark-blue),1); } .button-cta:hover::after{ transform: translateX(calc(100% - calc(var(--btn-cta-padding) * 2))); } .button-cta:hover .icon-container{ transform: translateX(calc(var(--btn-cta-icon-size) / 2)); } .button-cta.xl:hover::after{ transform: translateX(calc(100% - calc(var(--btn-cta-xl-padding) * 2))); } .button-cta.xl:hover .icon-container{ transform: translateX(calc(var(--btn-cta-xl-icon-size) / 2)); } .button-cta:hover .icon-container .icon--left{ transform: translateX(0); opacity: 1; } .button-cta:hover .icon-container .icon--right{ transform: translateX(200%); opacity: 0; } /* ============================ Header ============================ */ .header{ position: sticky; top: 0; width: 100%; height: var(--header-height); z-index: 1000; } .header::before{ position: absolute; content: ""; width: 100%; height: 100%; background: hsla(var(--theme-background),0.84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .next-year-info{ background: hsla(var(--color-purple),0.24); } .next-year-info p{ text-align: center; padding-bottom: 0; } .next-year-info .border-animation{ padding: var(--padding-block); } .header-content, .header-options{ display: flex; height: inherit; align-items: center; gap: 6px; } .logo-control{ flex: auto; display: flex; gap: 0; align-items: center; justify-content: flex-start; } .logo-wasm-io{ position: relative; width: 87px; height: 24px; margin-left: 12px; } .logo-wasm-io svg{ width: 100%; width: 87px; height: 24px; } .iwio0, .iwio1, .iwio2{ fill-rule: evenodd; clip-rule: evenodd; fill: hsla(var(--color-blue),1); } .iwio1, .iwio2{ opacity: 6.000000e-02; enable-background: new; fill: hsla(var(--color-black),1); } .iwio2{ opacity: .72; fill: url(#SVGID_1_); } .iwio3, .iwio4{ fill: hsla(var(--color-white),1); } .iwio4{ opacity: .96; enable-background: new; } .iwio5{ fill: hsla(var(--theme-text-primary),1); } .nav{ width: 100%; height: 100%; position: fixed; background: hsla(var(--theme-card),1); overflow: hidden; } .menu a{ display: block; text-align: center; padding: 24px; font-size: 28px; line-height: 42px; font-weight: 700; color: hsla(var(--theme-text-primary),1); } .menu a:hover{ background-color: hsla(var(--color-blue),0.24); } .menu a.active{ color: hsla(var(--theme-text-primary),1); background-color: hsla(var(--color-blue),1); } .nav{ top: 60px; max-height: 0; transition: max-height .5s ease-out; } .hamb{ position: relative; cursor: pointer; display: flex; justify-content: center; align-items: center; order: 1; width: 42px; height: 48px; padding-right: 6px; margin-right: 6px; border-radius: 100%; background: hsla(var(--color-grey), 0.24); box-shadow: inset 0 0 0 1px hsla(var(--theme-icon),0.24); } .hamb-line{ background: hsla(var(--theme-icon),1); display: block; height: 2px; position: relative; width: 12px; border-radius: 100px; transition: all .2s ease-out; } .hamb-line::before, .hamb-line::after{ background: hsla(var(--theme-icon),1); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 18px; border-radius: 100px; } .hamb-line::before{ top: 6px; } .hamb-line::after{ top: -6px; } .hamb:hover .hamb-line, .hamb:hover .hamb-line::before, .hamb:hover .hamb-line::after{ background: hsla(var(--theme-icon),1); } .side-menu{ display: none; } .side-menu:checked ~ nav{ max-height: 100%; background: hsla(var(--theme-background),0.84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .side-menu:checked ~ .hamb .hamb-line{ background: transparent; } .side-menu:checked ~ .hamb .hamb-line::before{ transform: rotate(-45deg); top:0; background: hsla(var(--color-red),1); } .side-menu:checked ~ .hamb .hamb-line::after{ transform: rotate(45deg); top:0; background: hsla(var(--color-red),1); } .switch-color{ position: relative; width: 36px; height: 36px; border-radius: 36px; background: hsla(var(--theme-card),0.36); border: 1px solid hsla(var(--color-blue-tint-2),0.48); } .dark .switch-color{ border-color: hsla(var(--color-dark-blue),0.48); background: hsla(var(--theme-card),1); } .toggle-color{ position: absolute; cursor: pointer; display: inline-flex; width: 36px; height: 36px; top: 18px; right: -18px; transform: translate(-50%, -50%); border-radius: 50px; transition: ease-in-out 0.48s; } .toggle-color::before{ border-radius: 100px; } .toggle-color .gooey_bg{ display: inline-block; position: absolute; width: 36px; height: 36px; left: 0; top: 0; padding: 0; border-radius: 100%; } .toggle-color svg{ width: 0; height: 0; } .toggle-color .switch-icons svg{ width: 18px; height: 18px; vertical-align: top; } .toggle-color .switch{ width: 100%; height: 100%; } .toggle-color .switch-icons-day, .toggle-color .switch-icons-night{ position: absolute; display: block; width: 18px; height: 18px; padding: 0; top: 9px; left: 9px; opacity: 1; transition: ease-in-out 0.48s; } .toggle-color .sw1, .toggle-color .sw2{ fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .toggle-color .sw1{ stroke-width: 2.25; } .toggle-color .sw1.sc{ stroke-width: 0; } .toggle-color .sw1.st{ stroke-width: 1; } .toggle-color.dark-off .switch-icons-day .sw1, .toggle-color.dark-on .switch-icons-night .sw1{ stroke: hsla(var(--color-blue-tint-2), 1); } .toggle-color.dark-off .switch-icons-night .sw1, .toggle-color.dark-on .switch-icons-day .sw1{ stroke: hsla(var(--color-blue-tint-2), 0); } .toggle-color.dark-off .switch-icons-day .sw2, .toggle-color.dark-on .switch-icons-night .sw2{ fill: hsla(var(--color-blue-tint-2), 1); } .toggle-color.dark-off .switch-icons-night .sw2, .toggle-color.dark-on .switch-icons-day .sw2{ fill: hsla(var(--color-blue-tint-2), 0); } .dark .toggle-color.dark-off .switch-icons-day .sw1, .dark .toggle-color.dark-on .switch-icons-night .sw1{ stroke: hsla(var(--color-dark-blue), 1); } .dark .toggle-color.dark-off .switch-icons-night .sw1, .dark .toggle-color.dark-on .switch-icons-day .sw1{ stroke: hsla(var(--color-dark-blue), 0); } .dark .toggle-color.dark-off .switch-icons-day .sw2, .dark .toggle-color.dark-on .switch-icons-night .sw2{ fill: hsla(var(--color-dark-blue), 1); } .dark .toggle-color.dark-off .switch-icons-night .sw2, .dark .toggle-color.dark-on .switch-icons-day .sw2{ fill: hsla(var(--color-dark-blue), 0); } .toggle-color.dark-on .switch .gooey_bg_1{ animation: fadeIn 300ms linear forwards; } .toggle-color.dark-on .switch .gooey_bg_2{ animation: fadeIn 300ms linear forwards; } .toggle-color.dark-off .switch .gooey_bg_1{ animation: fadeOut 300ms linear forwards; } .toggle-color.dark-off .switch .gooey_bg_2{ animation: fadeOut 300ms linear forwards; } /* ============================ Hero & Hero Section ============================ */ #hero{ background: hsla(var(--theme-background),0.84); margin-top: -7px; } #hero .col{ text-align: center; } .grid-2 .col:last-child{ padding-top: 30px; } .grid-2 .col:last-child::after{ position: absolute; content: ""; width: 0; height: 1.5px; top: 0; left: calc(0px - var(--padding-content)); background: hsla(var(--theme-border),0.36); transition: width 1.48s ease-in-out; } .grid-2 .col.visible:last-child::after{ width: calc(100% + calc(var(--padding-content) * 2)); } #hero h5{ color: hsla(var(--color-grey),1); letter-spacing: 2px; } #hero h5 span{ color: hsla(var(--color-blue),1); letter-spacing: 0; } .hero-buttons{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0 30px; gap: 18px; } #hero-section .show-title{ display: table; margin: 0 auto; } #hero-section .show-title::before{ opacity: 0; } #hero-section .show-title.visible{ animation: show-title 0.6s 0.36s linear forwards; } #hero-section .show-title.visible::before{ animation: fadeIn 0.48s linear forwards; } #hero-section .anim-typewriter{ animation: typewriter 2s steps(44) 2s 1 normal both; } #hero-section .anim-typewriter::after{ animation: fadeIn 0.36s 2s ease forwards; } .init-page #hero-section .show-title.visible{ animation: show-title 2.4s 0.76s cubic-bezier(0.175, 0.885, 0.18, 1.275) forwards; } .init-page #hero-section .show-title.visible::before{ animation: fadeIn 0.66s 0.56s linear forwards; } .init-page #hero-section .anim-typewriter{ animation: typewriter 1.36s steps(44) 2s 1 normal both; } .init-page #hero-section .anim-typewriter::after{ animation: fadeIn 0.36s 1.66s ease forwards; } /* ============================ Info ============================ */ #info .grid-2{ text-align: center; } #info .grid-2 .col:last-child{ padding-top: 0; } #info .grid-2 .col:first-child h2, #info .grid-2 .col:first-child p{ text-align: left; } #info .card-txt:nth-of-type(3) h2{ font-size: 34px; line-height: 38px; margin-top: 0; color: hsla(var(--color-blue),1); } #info .image-section{ margin: 6px auto 24px; } .info-cards{ display: grid; grid-template-columns: repeat(1, 1fr); } .card-txt{ position: relative; display: inline-grid; padding: 32px 0; margin: 1.5px 0 0; } .card-txt h4, .card-txt p{ color: hsla(var(--theme-text-primary),1); } .card-txt:nth-of-type(1) p, .card-txt:nth-of-type(2) p{ font-size: 18px; line-height: 30px; padding-bottom: 0; } .card-txt:nth-of-type(3){ text-align: left; padding-bottom: 12px; } .card-txt:nth-of-type(3) p{ padding-bottom: 18px; } .card-txt:nth-of-type(3) p{ font-size: 18px; } .card-txt:nth-of-type(3) p:last-of-type{ padding-bottom: 24px; } .card-txt::after{ position: absolute; content: ""; width: calc(100% + calc(var(--padding-content) * 2)); height: 100%; top: 0; left: calc(0px - var(--padding-content)); z-index: -1; border-bottom: 1.5px solid hsla(var(--theme-border),0.36); } .card-txt:nth-of-type(1)::after{ background: url("../images/img-shape-arrows-right.svg") repeat-x 0 center / var(--icon-info), linear-gradient(0deg, hsla(var(--color-blue),0.12) 0%, hsla(var(--color-blue),0.12) 0%), linear-gradient(0deg, hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 0%); background-blend-mode: color-burn, normal, normal; animation: card-icon-repeat 6s 0.84s ease infinite; } .card-txt:nth-of-type(2)::after{ background: url("../images/img-shape-flower.svg") no-repeat center / var(--icon-info), linear-gradient(0deg, hsla(var(--color-blue),0.15) 0%, hsla(var(--color-blue),0.15) 0%), linear-gradient(0deg, hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 0%); background-blend-mode: color-burn, normal, normal; animation: card-icon-scale 6s 0.84s ease infinite; } .card-txt:nth-of-type(3)::after{ border-radius: 0 0 var(--border-radius) var(--border-radius); height: calc(100% + var(--padding-content)); border-bottom: none; background: url("../images/img-shape-arrows-bottom-left.svg") no-repeat right var(--padding-content) bottom calc(var(--padding-content) * 1.5) / var(--icon-info), linear-gradient(0deg, hsla(var(--color-blue-tint-4),0.09) 0%, hsla(var(--color-blue-tint-4),0.09) 0%), linear-gradient(0deg, hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 0%); background-blend-mode: color-burn, normal, normal; animation: card-icon-move 6s 0.84s ease infinite; } /* ============================ Sessions ============================ */ #sessions .border-animation{ padding: 0 var(--padding-content) var(--padding-content); } #tabs.stick, #tabs{ display: flex; position: relative; overflow: hidden; width: 100%; margin: 0 auto!important; list-style: none; padding: var(--padding-content) 0; background: linear-gradient(0deg, hsla(var(--theme-card),0.36) 0%, hsla(var(--theme-card),0.36) 0%), linear-gradient(0deg, hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 0%); left: 0!important; right: 0!important; } #tabs div{ position: relative; display: flex; width: 100%; max-width: 396px; border: 2px solid hsla(var(--color-darkest-blue),1); border-radius: 12px; overflow: hidden; margin: 0 auto; } #tabs li{ display: inline-flex; width: calc(50% - 2px); height: 48px; } #tabs a{ display: flex; position: relative; width: 100%; font-size: 18px; line-height: 18px; align-items: center; justify-content: center; color: hsla(var(--theme-text-primary),0.6); } #tabs a#current{ color: hsla(var(--theme-text-primary),1); } #tabs div:has(> li:first-child)::before{ position: absolute; content: ""; width: 50%; height: 48px; top: 0; left: 50%; background: hsla(var(--color-blue),0.6); transition: all 0.3s ease; } #tabs div:has(> li:first-child #current)::before{ left: 0; } #tabs a:hover, #tabs a:focus{ color: hsla(var(--theme-text-primary),0.84); } table{ border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; } table tr{ display: block; border-bottom: 2px solid hsla(var(--theme-text-primary),0.18); padding: 4px 0 16px 0; } table tr:last-child{ border: none; } table thead.stick, table thead{ display: none!important; background: linear-gradient(0deg, hsla(var(--theme-card),0.36) 0%, hsla(var(--theme-card),0.36) 0%), linear-gradient(0deg, hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 0%); } table th, table td{ display: block; position: relative; width: 100%; padding-left: 18px; margin: 12px 0; box-sizing: border-box; } table th p{ color: hsla(var(--color-blue),1); } table th:nth-child(3) p, #tab2 table th:nth-child(4) p{ color: hsla(var(--color-purple),1); } table th:nth-child(4) p, #tab2 table th:nth-child(3) p{ color: hsla(var(--color-green),1); } table th:nth-child(5) p{ color: hsla(var(--color-yellow),1); } table th:nth-child(6) p{ color: hsla(var(--color-red),1); } table th::after, table td::after{ content: ""; position: absolute; top: 0; left: 0; width: 4px; height: calc(100% + 4px); border-radius: 100px; background: hsla(var(--color-blue),1); } table td.no-room::after{ background: hsla(var(--color-black),0.24); } table th:nth-child(3)::after, table td:nth-child(3)::after, #tab2 table th:nth-child(4)::after, #tab2 table td:nth-child(4)::after{ background: hsla(var(--color-purple),1); } table th:nth-child(4)::after, table td:nth-child(4)::after, #tab2 table th:nth-child(3)::after, #tab2 table td:nth-child(3)::after{ background: hsla(var(--color-green),1); } table th:nth-child(5)::after, table td:nth-child(5)::after{ background: hsla(var(--color-yellow),1); } table th:nth-child(6)::after, table td:nth-child(6)::after{ background: hsla(var(--color-red),1); } table td::before{ position: absolute; content: attr(data-label); left: 18px; top: 0; font-size: 18px; line-height: 38px; color: hsla(var(--color-blue),1); } table td:nth-child(3)::before, #tab2 table td:nth-child(4)::before{ color: hsla(var(--color-purple),1); } table td:nth-child(4)::before, #tab2 table td:nth-child(3)::before{ color: hsla(var(--color-green),1); } table td:nth-child(5)::before{ color: hsla(var(--color-yellow),1); } table td:nth-child(6)::before{ color: hsla(var(--color-red),1); } table td:first-child{ color: hsla(var(--theme-text-primary),0.48); padding-left: 0; padding-bottom: 3px; } table td:first-child::after{ display: none; } table p{ padding: 0; } table p a{ transition: all 0.3s ease!important; color: hsla(var(--theme-text-primary),1); text-decoration: none; opacity: 1; } table p:first-child{ font-weight: 700; line-height: 29px; padding-top: 33px; padding-bottom: 6px; } table td.no-room p:first-child{ padding: 6px 0 0; } table p:first-child i{ font-size: 20px; font-weight: 400; font-style: normal; color: hsla(var(--color-blue),1); } table td:nth-child(3) p:first-child i, #tab2 table td:nth-child(4) p:first-child i{ color: hsla(var(--color-purple),1); } table td:nth-child(4) p:first-child i, #tab2 table td:nth-child(3) p:first-child i{ color: hsla(var(--color-green),1); } table td:nth-child(5) p:first-child i{ color: hsla(var(--color-yellow),1); } table td:nth-child(6) p:first-child i{ color: hsla(var(--color-red),1); } table p:nth-child(2), table p:nth-child(2) a{ font-size: 18px; line-height: 28px; font-weight: 400; color: hsla(var(--theme-text-primary),0.6); } table p a:hover, table p a .color{ color: hsla(var(--color-blue),1); } table td:nth-child(3) a:hover, #tab2 table td:nth-child(4) a:hover, table td:nth-child(3) p a .color, #tab2 table td:nth-child(4) p a .color{ color: hsla(var(--color-purple),1); } table td:nth-child(4) a:hover, #tab2 table td:nth-child(3) a:hover, table td:nth-child(4) p a .color, #tab2 table td:nth-child(3) p a .color{ color: hsla(var(--color-green),1); } table td:nth-child(5) a:hover{ color: hsla(var(--color-yellow),1); } table td:nth-child(6) a:hover{ color: hsla(var(--color-red),1); } table .links-docs{ display: inline-block; margin-top: 11px; padding-top: 7px; padding-bottom: 5px; border-top: 1px dashed hsla(var(--color-purple),1); } table td:nth-child(3) .links-docs{ border-color: hsla(var(--color-red),1); } table td:nth-child(4) .links-docs{ border-color: hsla(var(--color-orange),1); } table td:nth-child(5) .links-docs{ border-color: hsla(var(--color-yellow),1); } table td:nth-child(6) .links-docs{ border-color: hsla(var(--color-green),1); } table .links-docs li{ display: inline-block; } table .links-docs li a{ display: inline-block; font-size: 16px; line-height: 16px; color: hsla(var(--color-black),1); padding: 4px 12px 4px 30px; opacity: 0.36; background: url(../images/ico-docs.svg) no-repeat 0 0 / 24px 96px; } table .links-docs li a:hover{ opacity: 1; } table .links-docs li a.slides{ background-position: 0 -48px; } /* ============================ Speakers ============================ */ .columns-2{ display: grid; grid-gap: var(--padding-content); grid-template-columns: repeat(1, 1fr); } .columns-4{ display: grid; grid-gap: calc(var(--padding-content) + 12px); grid-template-columns: repeat(1, 1fr); padding-left: 6px; padding-bottom: 6px; } .columns-4.np{ grid-gap: var(--padding-content); padding: 0; } .a-speakers{ display: block; position: relative; max-width: 280px; transition: all 0.3s ease; margin: 0 auto; border-radius: var(--border-radius); } .a-speakers::after{ content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 10; border-radius: var(--border-radius); box-shadow: 0 0 0 2px hsla(var(--color-purple),1); pointer-events: none; } .a-speakers::before{ content: ""; position: absolute; opacity: 0.42; top: 6px; right: 6px; width: calc(100% + 3px); height: calc(100% + 3px); background: url('data:image/svg+xml,') no-repeat left bottom / 100%, linear-gradient(hsla(var(--color-purple),0.6) 0%, hsla(var(--color-purple),0.6) 100%),linear-gradient(hsla(var(--color-black),0.78) 0%, hsla(var(--color-black),0.78) 100%); background-blend-mode: hard-light, color-dodge, color-dodge; z-index: 0; border-radius: calc(var(--border-radius) + 6px); transition: all 0.3s ease-in-out; } .a-speakers:hover{ border-radius: var(--border-radius); box-shadow: -8.5px 8.5px 0 0 hsla(var(--color-purple),0.36), -8.5px 8.5px 0 0 hsla(var(--theme-background),1), -9px 9px 0 1.5px hsla(var(--color-purple),1); } .a-speakers:hover::before{ top: 2px; right: 2px; border-radius: calc(var(--border-radius) + 1px); opacity: 0.72; } .dark .a-speakers::before{ opacity: 0.84; background: url('data:image/svg+xml,') no-repeat left bottom / 100%, linear-gradient(hsla(var(--color-purple),0.6) 0%, hsla(var(--color-purple),0.6) 100%),linear-gradient(hsla(var(--color-black),0.78) 0%, hsla(var(--color-black),0.78) 100%); background-blend-mode: overlay, normal, normal; } .dark .a-speakers:hover::before{ opacity: 1; } .a-speakers figure{ position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; background: hsla(var(--color-purple),1); overflow: hidden; border-radius: var(--border-radius); overflow: hidden; } .a-speakers img, .a-speakers svg{ width: 100%; height: 100%; position: relative; transform: scale(1); margin-bottom: -9px; overflow: hidden; border-radius: var(--border-radius); } .a-speakers:hover img:first-child{ transform: scale(1.12); opacity: 0.6; } .pse{ fill: hsla(var(--theme-background),1); } .a-speakers:hover .pse{ fill: hsla(var(--color-purple),1); } .a-speakers img:first-child{ position: absolute; top: 0; left: 0; filter: grayscale(100%) contrast(120%) brightness(120%); mix-blend-mode: luminosity; z-index: 1; opacity: 0.66; overflow: hidden; border-radius: var(--border-radius); } .dark .a-speakers img:first-child{ filter: grayscale(100%) contrast(120%) brightness(100%); } .a-speakers p{ position: absolute; display: flex; flex-direction: column; justify-content: end; width: 100%; height: 100%; bottom: 0; left: 0; padding: 18px; pointer-events: none; overflow: hidden; z-index: 1; transition: all 0.3s ease; box-sizing: border-box; background: linear-gradient(0deg, hsla(var(--color-dark),1) 0%, hsla(var(--color-dark),0.84) 12%, hsla(var(--color-dark),0.48) 42%, hsla(var(--color-dark),0.18) 56%, hsla(var(--color-dark),0) 84%, hsla(var(--color-dark),0) 100%); border-radius: 0 0 var(--border-radius) var(--border-radius); } .a-speakers:hover p{ background: linear-gradient(0deg, hsla(var(--color-dark),1) 0%, hsla(var(--color-dark),0.84) 12%, hsla(var(--color-darkest-purple),0.48) 42%, hsla(var(--color-darkest-purple),0.18) 56%, hsla(var(--color-darkest-purple),0) 84%, hsla(var(--color-darkest-purple),0) 100%); } .a-speakers p span{ display: block; color: hsla(var(--color-white),0.72); } .a-speakers p span:first-child{ font-size: 22px; line-height: 28px; font-weight: 700; color: hsla(var(--color-white),1); } .a-speakers p span:last-child{ font-size: 18px; line-height: 28px; } #regular-content .a-speakers{ margin-bottom: 36px; } #regular-content .panel div:last-of-type .a-speakers{ margin-bottom: 0; } #regular-content .social{ display: table; position: relative; width: 100%; vertical-align: top; text-align: left; } #regular-content .social ul{ padding-bottom: 6px; } #regular-content .social li{ display: flex; width: 100%; height: auto; font-size: 16px; line-height: 22px; padding: 12px 18px; box-sizing: border-box; vertical-align: top; border-top: 1px solid hsla(var(--theme-border),0.36); } #regular-content .social li:first-child{ border-top: 1.5px solid hsla(var(--theme-border),0.48); } #regular-content .social li:last-child{ border-bottom: 1.5px solid hsla(var(--theme-border),0.48); } #regular-content .social li::after, #regular-content .social li::before{ display: none; } #regular-content .social a{ display: block; width: 100%; height: auto; color: hsla(var(--theme-text-primary),1)!important; } #regular-content .social a:hover{ color: hsla(var(--color-purple),1)!important; } #regular-content.blue-white .a-speakers::after{ box-shadow: 0 0 0 2px hsla(var(--color-blue),1); } #regular-content.blue-white .a-speakers::before{ background: url('data:image/svg+xml,') no-repeat left bottom / 100%, linear-gradient(hsla(var(--color-blue),0.6) 0%, hsla(var(--color-blue),0.6) 100%),linear-gradient(hsla(var(--color-black),0.78) 0%, hsla(var(--color-black),0.78) 100%); } #regular-content.blue-white .a-speakers:hover{ box-shadow: -8.5px 8.5px 0 0 hsla(var(--color-blue),0.36), -8.5px 8.5px 0 0 hsla(var(--theme-background),1), -9px 9px 0 1.5px hsla(var(--color-blue),1); } #regular-content.blue-white .dark .a-speakers::before{ background: url('data:image/svg+xml,') no-repeat left bottom / 100%, linear-gradient(hsla(var(--color-blue),0.6) 0%, hsla(var(--color-blue),0.6) 100%),linear-gradient(hsla(var(--color-black),0.78) 0%, hsla(var(--color-black),0.78) 100%); } #regular-content.blue-white .a-speakers figure{ background: hsla(var(--color-blue),1); } #regular-content.blue-white .a-speakers:hover .pse{ fill: hsla(var(--color-blue),1); } #regular-content.blue-white .a-speakers:hover p{ background: linear-gradient(0deg, hsla(var(--color-dark),1) 0%, hsla(var(--color-dark),0.84) 12%, hsla(var(--color-darkest-blue),0.48) 42%, hsla(var(--color-darkest-blue),0.18) 56%, hsla(var(--color-darkest-blue),0) 84%, hsla(var(--color-darkest-blue),0) 100%); } /* ============================ Tickets ============================ */ #tickets h1{ position: relative; text-align: center; margin: 0; padding-top: calc(var(--header-height) - var(--padding-content)); padding-bottom: calc(var(--padding-content) / 2); } #tickets h1::before{ position: absolute; content: ""; top: calc(0px - var(--padding-content)); right: 0; left: 0; margin: 0 auto; width: calc(var(--ticket-circle) * 2); height: var(--ticket-circle); border-radius: 0 0 var(--ticket-circle) var(--ticket-circle); z-index: -1; } #tickets.align-center h2, #tickets.align-center p{ text-align: center; } #tickets .grid-4{ text-align: center; } #tickets h5{ padding-top: 42px; } #tickets ul{ display: flex; margin: 0; padding: 1.5px 0; overflow: hidden; list-style-type: none; flex-direction: column; box-shadow: inset 0 0 0 1.5px hsla(var(--theme-border),0.6); border-radius: calc(var(--border-radius) / 1.5); } #tickets li{ display: flex; align-items: stretch; cursor: pointer; flex-direction: column; max-height: 72px; overflow: hidden; transition: all 0.5s ease; border-bottom: 1.5px solid hsla(var(--theme-border),0.6); } #tickets li:last-child{ border-bottom: none; } #tickets li.active{ cursor: default; max-height: 1000px; } #tickets li.active:hover{ opacity: 1; } #tickets li.active .section-content{ opacity: 1; } #tickets li .section-title{ display: flex; align-items: center; margin: 0 1.5px; text-align: center; } #tickets li .section-title h2{ margin: 0; white-space: nowrap; } #tickets li .section-content{ display: flex; align-items: center; margin: 0 1.5px; opacity: 0; transition: all 0.25s 0.24s ease-in-out; } #tickets li:nth-child(1){ border-radius: calc(calc(var(--border-radius) / 1.5) + 1px) calc(calc(var(--border-radius) / 1.5) + 1px) 0 0; } #tickets li:nth-child(3){ border-radius: 0 0 calc(calc(var(--border-radius) / 1.5) + 1px) calc(calc(var(--border-radius) / 1.5) + 1px); } #tickets li:nth-child(1).active .ticket-top p, #tickets li:nth-child(2).active .ticket-top p, #tickets li:nth-child(3).active .ticket-top p, #tickets li:nth-child(4).active .ticket-top p, #tickets .ticket-bottom p{ color: hsla(var(--color-white),1); } #tickets li:nth-child(1).active .ticket-top p span, #tickets li:nth-child(2).active .ticket-top p span, #tickets li:nth-child(3).active .ticket-top p span, #tickets li:nth-child(4).active .ticket-top p span, #tickets .ticket-bottom p span{ color: hsla(var(--color-white),0.72); } #tickets .ticket{ display: flex; position: relative; width: 100%; margin: auto; flex-direction: column; justify-content: flex-end; align-items: flex-start; background: hsla(var(--theme-card),0.6) } #tickets .ticket-top, #tickets .ticket-title, #tickets .ticket-cta, #tickets .ticket-bottom, #tickets .ticket-venue-date{ display: flex; position: relative; height: 72px; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; text-align: center; } #tickets .ticket-detail-top, #tickets .ticket-detail-bottom{ position: absolute; width: 100%; height: 2px; top: -2.5px; left: 0; border-bottom: 1.5px dashed hsla(var(--theme-border),0.6); } #tickets .ticket-detail-bottom{ top: auto; bottom: -2px; } #tickets .ticket-detail-top::after, #tickets .ticket-detail-top::before, #tickets .ticket-detail-bottom::after, #tickets .ticket-detail-bottom::before{ position: absolute; content: ""; width: 36px; height: 36px; bottom: -18px; left: -18px; border-radius: 100px; background: linear-gradient(0deg, hsla(var(--theme-card),0.24) 0%, hsla(var(--theme-card),0.24) 0%), linear-gradient(0deg, hsla(var(--color-blue), 0.09) 0%, hsla(var(--color-blue), 0.09) 0%), linear-gradient(0deg, hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 0%); box-shadow: inset 0 0 0 1.5px hsla(var(--theme-border),0.6); z-index: 10; } #tickets .ticket-detail-top::before, #tickets .ticket-detail-bottom::before{ right: -18px; left: auto; z-index: 10; } #tickets .ticket-detail-top.only-line::after, #tickets .ticket-detail-top.only-line::before, #tickets .ticket-detail-bottom.only-line::after, #tickets .ticket-detail-bottom.only-line::before{ display: none; } #tickets li .ticket-top .ticket-detail-bottom{ opacity: 0; } #tickets li.active .ticket-top .ticket-detail-bottom{ opacity: 1; } #tickets .ticket-title, #tickets .ticket-cta{ height: auto; padding: 24px 0px; min-height: 144px; justify-content: space-around; } #tickets .cta-active .ticket-title{ padding: 36px 0px; min-height: 210px; } #tickets .cta-active .ticket-cta{ padding: 36px 0 24px; min-height: 210px; } #tickets .ticket-cta-content{ padding: 0 18px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-bottom: 18px; } .cta-detail .button-cta.xl{ font-size: 16px } .cta-detail .button-cta .text strong{ display: none; } #tickets .ticket p{ font-size: 16px; line-height: 24px; padding: 0; } #tickets .ticket-top p, #tickets .ticket-bottom p{ line-height: 20px; padding-top: 3px; } #tickets .ticket-top p span, #tickets .ticket-bottom p span{ font-size: 14px; } #tickets .ticket-title h3, #tickets .ticket-cta h3{ font-size: 30px; line-height: 38px; /*margin-bottom: 12px;*/ } #tickets .ticket-title h4{ font-size: 48px; line-height: 48px; /*padding-top: 9px;*/ } #tickets .ticket-title h4.sold-out{ color: hsla(var(--theme-text-primary),0.24); } #tickets .ticket-title h4.sold-out::after{ position: absolute; content: ""; width: 110%; height: 3px; border-radius: 3px; top: -8px; right: 0; bottom: 0; left: -5%; margin: auto; } #timer{ display: flex; font-size: 30px; line-height: 36px; /*margin-top: 24px;*/ } #timer div{ display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-width: 60px; } #timer div span{ font-size: 10px; line-height: 10px; } .cta-detail{ position: relative; } .cta-detail .inject-me{ visibility: hidden; position: absolute; width: calc(var(--btn-cta-xl-height) * 0.75); height: calc(var(--btn-cta-xl-height) * 0.75); top: 0; bottom: 0; left: calc(0px - calc(var(--btn-cta-xl-height) / 2.5)); margin: auto 0; } .pctd0{ fill: none; opacity: 1; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: 500; stroke-dashoffset: 500; animation: dash-arrow-ticket 9s 0.5s ease-in infinite; } .cta-detail .inject-me:nth-child(2){ transform: rotate(180deg); right: calc(0px - calc(var(--btn-cta-xl-height) / 2.5)); left: auto; } .cta-detail .inject-me:nth-child(2) .pctd0{ animation: dash-arrow-ticket 9s 1s ease-in infinite; } .init-page .cta-detail .inject-me .pctd0{ animation: dash-arrow-ticket 9s 0.5s ease-in infinite!important; } .init-page .cta-detail .inject-me:nth-child(2) .pctd0{ animation: dash-arrow-ticket 9s 1s ease-in infinite!important; } #tickets .ticket-venue-date{ height: auto; border: none; } #tickets .ticket-venue-date p{ width: 100%; /*padding: 12px 0 0;*/ } #tickets .ticket-venue-date p:last-child{ padding: 0; border-top: none; } #tickets .ticket-bottom{ border-bottom: none; } .ticket-logo{ display: none; } .vat-alt{ width: 95%; font-size: 13px; text-align: right; padding: 24px 0 0; opacity: 0.6; } /* ============================ Venue ============================ */ #venue .grid-2 .col:first-child{ padding-bottom: 30px; } #venue .grid-2 .col:last-child{ text-align: center; } .columns-3{ display: grid; grid-gap: var(--padding-content); grid-template-columns: repeat(2, 1fr); } .columns-3 div:last-child{ grid-column: span 2; } .columns-3 img{ opacity: 0.84; border: 1.5px solid hsla(var(--color-orange),0.36); border-radius: calc(var(--border-radius) / 1.5); } .card-txt-venue{ width: 100%; text-align: center; padding: 24px 24px 18px; box-sizing: border-box; border: 1.5px solid hsla(var(--color-orange),0.36); border-radius: calc(var(--border-radius) / 1.5); background: hsla(var(--theme-card),0.66); } .card-txt-venue h4{ font-size: 48px; line-height: 12px; padding: 12px 0 0 0; color: hsla(var(--color-yellow),1); } .card-txt-venue h5{ font-size: 24px; line-height: 32px; padding-bottom: 12px; } .card-txt-venue h5 a{ color: hsla(var(--theme-text-primary),1); } .card-txt-venue p{ font-size: 18px; line-height: 24px; color: hsla(var(--theme-text-primary),0.72); padding: 6px 0; } .card-txt-venue p a{ opacity: 0.72; color: hsla(var(--color-orange),1); } .card-txt-venue p a:hover{ opacity: 1; } /* ============================ Map ============================ */ #map{ width: 100%; height: 288px; opacity: 0.72!important; border-radius: calc(var(--border-radius) - 3px); overflow: hidden; } /* ============================ Sponsors ============================ */ .logos{ display: flex; flex-direction: column; margin-top: -12px; } .logos a{ display: flex; opacity: 0.72; } .logos a:hover{ opacity: 1; } .logos svg{ width: auto; height: 48px; } .pls0{ fill: hsla(var(--theme-icon),1); } .pls1{ fill: hsla(var(--theme-icon),1); fill-opacity: 0.65; } .pls2{ fill: hsla(var(--theme-icon),1); fill-opacity: 0.8; } .items{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; column-gap: 18px; } .items.sl1 svg{ height: 60px; } .items.sl2 svg{ height: 56px; } /* ============================ Sessions List ============================ */ #sessions-list ul{ padding: 12px 0 24px; } #sessions-list h4 span{ font-size: 24px; color: rgba(24,48,68,0.48); } #sessions-list ul li{ position: relative; padding: 0 0 12px 12px; color: rgba(24,48,68,0.48); } #sessions-list ul li::after{ position: absolute; content: ""; width: 6px; height: 2px; top: 12px; left: 0; background: rgba(0,176,154,1); } #sessions-list ul li a{ color: hsla(var(--color-black),1); } #sessions-list ul li a:hover{ text-decoration: underline; } .warning{ padding: 6px; margin: 0 0 36px; background: rgba(254,238,178,0.36); border-radius: 6px; } #sessions-list.diversity h4{ line-height: 36px; padding-bottom: 24px; } #sessions-list.diversity h5{ line-height: 24px; padding-bottom: 24px; } #sessions-list.diversity ul{ padding: 0 0 12px; } #sessions-list.diversity ul li{ color: hsla(var(--color-black),1); } #sessions-list.diversity ul li a{ text-decoration: underline; } #sessions-list.diversity .grid-3 img{ margin-bottom: 24px; } /* ============================ Newsletter ============================ */ #newsletter .grid-1{ text-align: center; } #newsletter p{ color: hsla(var(--theme-text-primary),1); padding-top: 18px; padding-bottom: 12px; } .loop{ display: flex; position: relative; width: 100%; height: 48px; } .loop svg{ width: 160px; height: auto; } .loop-outline{ fill: none; stroke: hsla(var(--color-red),1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: 2.42777px, 242.77666px; stroke-dashoffset: 0; animation: loop 4s linear infinite; } .loop-outline-bg{ fill: none; stroke: hsla(var(--color-purple),0.12); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .dark .loop-outline-bg{ stroke: hsla(var(--color-purple),0.24); } .content-subscription{ width: 100%; max-width: 396px; height: 60px; overflow: hidden; margin: auto; } .subscription{ position: relative; width: 100%; height: 100%; border-radius: calc(var(--border-radius) / 1.5); overflow: hidden; } .subscription .add-email{ position: absolute; top: 0px; left: 0; width: 100%; height: 100%; border: none; outline: none; padding: 0 18px 2px; font-size: 16px; font-weight: 700; color: hsla(var(--theme-text-primary),1); background: hsla(var(--theme-card),1); transition: all 0.3s ease; } .subscription .add-email::placeholder{ color: hsla(var(--theme-text-primary),0.6); font-weight: 400; transition: all 0.3s ease; } .subscription .add-email:focus::placeholder{ color: hsla(var(--theme-text-primary),0.12); transition: all 0.3s ease; } .subscription .submit-email{ position: absolute; width: 120px; height: calc(100% - 6px); top: 0; right: 0; border: none; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; outline: none; margin: 3px; cursor: pointer; background: hsla(var(--color-red),1); color: hsla(var(--color-white),1); border-radius: 12px; border-radius: calc(calc(var(--border-radius) / 1.5) - 3px); transition: width .35s ease-in-out, background .35s ease-in-out; } .subscription .submit-email:hover{ background: hsla(var(--color-blue),1); } .subscription.done .submit-email{ width: calc(100% - 6px); background: hsla(var(--color-green),1); } .subscription .submit-email .before-submit, .subscription .submit-email .after-submit{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 54px; transition: visibility .35s ease-in-out, opacity .35s ease-in-out; } .subscription.done .submit-email .before-submit, .subscription:not(.done) .submit-email .after-submit{ visibility: hidden; opacity: 0; } .subscription .submit-email .after-submit{ transition-delay: .35s; } .subscription:not(.done) .submit-email .before-submit, .subscription.done .submit-email .after-submit{ visibility: visible; opacity: 1; } /* ============================ Gallery ============================ */ .gallery{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; transition: all ease 1s; border-radius: calc(var(--border-radius) / 1.5); overflow: hidden; } .gallery figure{ padding: 0; margin: 0; } .gallery .item{ position: relative; transition: all 0.3s ease; overflow: hidden; } .gallery .item figcaption{ display: flex; position: absolute; justify-content: center; align-items: center; text-align: center; font-size: 16px; line-height: 20px; color: hsla(var(--color-white),1); width: 90%; height: 100%; padding: 0 5%; margin: 0; top: 0; left: 0; transition: all 0.3s ease; background: hsla(var(--color-green),1); } .gallery .item figcaption:hover{ opacity: 0.84; } .al0{ position: absolute; width: 12px; height: auto; top: 6px; right: 6px; fill: hsla(var(--color-white),0); stroke: hsla(var(--color-white),1); stroke-width: 4; stroke-miterlimit: 10; transition: all 0.3s ease; } .gallery .item:hover .al0{ width: 18px; fill: hsla(var(--color-white),1); } .gallery .item:nth-child(3), .gallery .item:nth-child(4), .gallery .item:nth-child(5), .gallery .item:nth-child(6), .gallery .item:nth-child(8), .gallery .item:nth-child(12), .gallery .item:nth-child(13){ display: none; } .video-container{ position: relative; width: 100%; height: auto; } .video-container img{ display: block; width: 100%; height: auto; } .background-video{ width: auto; height: 100%; position: absolute; left: -9%; right: 0; top: 0; bottom: 0; margin: auto; pointer-events: none; } .video-container img:nth-of-type(1), .video-container video{ display: none; } /* ============================ Footer ============================ */ footer.wrapper{ width: 94%; padding-bottom: calc(var(--padding-block) * 2); } footer p{ text-align: center; font-size: 14px; line-height: 24px; color: hsla(var(--theme-text-primary),0.66); margin-right: auto; margin-left: auto; padding: 0; } footer a{ color: hsla(var(--theme-text-primary),0.72); text-decoration: none; } footer a:hover{ color: hsla(var(--color-blue),1); } footer p:last-child{ padding-top: calc(var(--padding-content) - 6px); } footer p:last-child span{ opacity: 0.48; } /* ============================ Cookies ============================ */ .cookies-policy{ position: fixed; left: 0; bottom: 0; width: 100%; background: hsla(var(--theme-card),1); color: hsla(var(--color-black),1); z-index: 100; text-align: left; font-size: 13px; border-radius: 0 calc(var(--border-radius) / 2) 0 0; box-shadow: 0 0 12px 0 rgba(16,16,50,0.12); } .cookies-policy h2{ font-size: 18px; color: hsla(var(--theme-text-primary),1); text-align: left; padding: 0; margin: 9px 0 0 24px; } .cookies-policy p{ font-size: 14px; color: hsla(var(--theme-text-primary),1); line-height: 24px; margin: -2px 0 18px 24px; padding: 0 24px 0 0; } .cookies-policy a{ color: hsla(var(--color-blue),1); text-decoration: underline; } .cookies-policy a#cookie-policy-ok{ position: relative; text-decoration: none; float: right; z-index: 9999; font-size: 36px; color: hsla(var(--color-red),1); margin: 4px 14px 6px 10px; } .cookies-policy a#cookie-policy-ok:hover{ cursor: pointer; color: hsla(var(--color-red-tint-2),1); } /* ======================================================= MEDIA QUERIES ======================================================= */ /* ========================= 360 ========================= */ @media only screen and (min-width: 360px){ /* ============================ Common 360 ============================ */ .logo-wasm-io, .logo-wasm-io svg{ width: 130px; height: 36px; } /* ============================ Tickets 360 ============================ */ .cta-detail .button-cta.xl{ font-size: 18px } }/* ============================== End media 360 */ /* ========================= 375 ========================= */ @media only screen and (min-width: 375px){ /* ============================ Sponsors 375 ============================ */ .logos svg{ height: 56px; } .items.sl1 svg{ height: 66px; } .items.sl2 svg{ height: 62px; } }/* ============================== End media 375 */ /* ========================= 480 ========================= */ @media only screen and (min-width: 480px){ /* ============================ Header 480 ============================ */ .button-cta .text strong, .button-cta .icon-container{ display: inline-flex; } /* ============================ Hero 480 ============================ */ #hero h1{ max-width: 420px; } /* ============================ Gallery 480 ============================ */ .gallery{ grid-template-columns: repeat(3, 1fr); } .gallery .item:nth-child(3), .gallery .item:nth-child(4), .gallery .item:nth-child(5), .gallery .item:nth-child(6), .gallery .item:nth-child(8), .gallery .item:nth-child(8){ display: flex; } .gallery .item:nth-child(12), .gallery .item:nth-child(13){ display: none; } }/* ============================== End media 480 */ /* ========================= 768 ========================= */ @media only screen and (min-width: 768px){ /* ============================ Common 768 ============================ */ h2{ padding-bottom: 40px; } #regular-content h2{ padding-bottom: 24px; } #regular-content .columns-2 h3:first-of-type{ padding-bottom: 24px; } p{ padding-bottom: 30px; } /*#tabs.stick, #tabs{ padding: 24px 0; }*/ .title-button{ flex-direction: row; margin-bottom: var(--padding-content); justify-content: space-between; } .title-button h2{ text-align: left; margin: 9px 0 0; } .title-button .button span strong, #info h2 br:first-of-type{ display: none; } #info h2, #venue h2, #newsletter h2{ margin: 9px 0 -15px; } #gallery h2, .title-button h2{ margin: 9px 0 0; } .title-download p:last-child{ padding-bottom: 36px; } .title-download-detail::after{ width: 480px; height: 480px; bottom: -360px; } .anim-typewriter{ margin-bottom: 6px; } /* ============================ Grid 768 ============================ */ .wrapper{ font-size: 0; } .grid-1 .col, .grid-3 .col, .grid-4 .col, .grid-3--2-1 .col, .grid-3--1-2 .col, .grid-5--1-3-1 .col, #tickets .grid-4 .col{ display: inline-block; vertical-align: top; margin-left: 3%; } .grid-1 .col:nth-child(1n+1), .grid-3 .col:nth-child(3n+1), .grid-4 .col:nth-child(2n+1), .grid-3--2-1 .col:nth-child(2n+1), .grid-3--1-2 .col:nth-child(2n+1), .grid-5--1-3-1 .col:nth-child(3n+2), #tickets .grid-4 .col:nth-child(3n+1){ margin-left: 0; } .grid-4 .col{ width: 48.5%; } .grid-3 .col, .grid-3--2-1 .col, .grid-3--1-2 .col, #tickets .grid-4 .col{ width: 31.33%; } .grid-3--2-1 .col:first-child, .grid-3--1-2 .col:last-child{ width: 65.67%; } .grid-5--1-3-1 .col{ width: 31.33%; } .grid-5--1-3-1 .col:first-child, .grid-5--1-3-1 .col:last-child{ width: 100%; } .grid-5--1-3-1 .col:first-child{ margin-left: 0; } #tickets .grid-4 .col:last-child{ width: 50%; } /* ============================ Typography 768 ============================ */ #hero p{ font-size: 22px; line-height: 34px; } h1{ font-size: 66px; line-height: 68px; } h2{ font-size: 56px; line-height: 60px; } h3{ font-size: 28px; line-height: 36px; } h4{ font-size: 32px; line-height: 36px; } h5{ font-size: 25px; line-height: 32px; } h6{ font-size: 28px; line-height: 36px; } /* ============================ Buttons 768 ============================ */ .button span{ padding: 12px 36px; } .button:hover span{ padding-right: 48px; padding-left: 48px; } .button::before{ top: 3.5px; right: 3.5px; } .button:hover::before{ top: 4.5px; right: 4.5px; } /* ============================ Header 768 ============================ */ .header-content, .header-options{ gap: 9px; } .logo-wasm-io{ width: 152px; height: 42px; margin-left: 21px; } .logo-wasm-io svg{ width: 152px; height: 42px; } .menu a{ font-size: 40px; line-height: 50px; } .nav{ top: 84px; } .hamb{ margin-right: 21px; } .switch-color{ width: 72px; height: 36px; margin-right: 6px; border-color: hsla(var(--color-blue-tint-2),0.48); } .toggle-color{ top: 19px; left: 36px; width: 72px; height: 36px; } .toggle-color .gooey_bg{ width: 44px; height: 44px; left: -4px; top: -5px; background: linear-gradient(hsla(var(--color-blue-tint-2),0.48) 0%, hsla(var(--color-blue-tint-2),0.48) 100%),linear-gradient(hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 100%); } .toggle-color.dark-off .gooey_bg_1{ box-shadow: 2px 0 3px 0 hsla(var(--color-grey),0.24) } .toggle-color.dark-on .gooey_bg_2{ box-shadow: -2px 0 3px 0 hsla(var(--color-zero),0.48) } .dark .switch-color{ border-color: hsla(var(--color-dark-blue),0.48); } .dark .toggle-color .gooey_bg{ background: linear-gradient(hsla(var(--color-dark-blue),0.48) 0%, hsla(var(--color-dark-blue),0.48) 100%),linear-gradient(hsla(var(--theme-background),1) 0%, hsla(var(--theme-background),1) 100%); } .toggle-color .switch-icons svg, .toggle-color .switch-icons-day, .toggle-color .switch-icons-night{ width: 18px; height: 18px; } .toggle-color .switch-icons-day, .toggle-color .switch-icons-night{ opacity: 0.72; } .toggle-color.dark-off .switch-icons-day, .toggle-color.dark-on .switch-icons-night, .toggle-color:hover .switch-icons-day, .toggle-color:hover .switch-icons-night{ opacity: 1; } .toggle-color.dark-off:hover .switch-icons-night .sw2{ fill: hsla(var(--color-blue-tint-2),0.24); } .toggle-color.dark-on:hover .switch-icons-day .sw2{ fill: hsla(var(--color-dark-blue),0.36); } .toggle-color svg{ width: 0; height: 0; } .toggle-color .sw1, .toggle-color .sw1.sc, .toggle-color .sw1.st{ stroke-width: 1.5; } .toggle-color .switch-icons-day{ top: 8px; left: 9px; } .toggle-color .switch-icons-night{ top: 8px; right: 9px; left: auto; } .toggle-color.dark-off .switch-icons-day .sw1{ stroke-width: 2.25; stroke: hsla(var(--color-dark-blue), 1); } .toggle-color.dark-on .switch-icons-day .sw1{ stroke: hsla(var(--color-dark-blue), 1); } .toggle-color.dark-off .switch-icons-day .sw2, .toggle-color.dark-on .switch-icons-night .sw2{ fill: hsla(var(--color-dark-blue), 1); } .toggle-color.dark-off .switch-icons-day .sw1.sc{ stroke-width: 0; } .toggle-color.dark-off .switch-icons-night .sw1{ stroke: hsla(var(--color-blue-tint-2),1); } .dark .toggle-color.dark-off .switch-icons-night .sw1, .dark .toggle-color.dark-on .switch-icons-day .sw1{ stroke: hsla(var(--color-dark-blue),1); } .toggle-color.dark-on .switch-icons-night .sw1, .dark .toggle-color.dark-on .switch-icons-night .sw1{ stroke: hsla(var(--color-blue-tint-1),1); } .toggle-color.dark-on .switch-icons-night .sw1.sc{ stroke-width: 0; } .dark .toggle-color.dark-on .switch-icons-night .sw1{ fill: hsla(var(--color-blue-tint-1),1); } .toggle-color.dark-off .switch-icons-night .sw2, .toggle-color.dark-on .switch-icons-day .sw2{ fill: hsla(var(--theme-card),0); } .toggle-color.dark-on .switch .gooey_bg_1{ animation: switchOn_1 600ms linear forwards; } .toggle-color.dark-on .switch .gooey_bg_2{ animation: switchOn_2_small 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .toggle-color.dark-off .switch .gooey_bg_1{ animation: switchOff_1 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .toggle-color.dark-off .switch .gooey_bg_2{ animation: switchOff_2_small 600ms linear forwards; } /* ============================ Hero & Hero Section 768 ============================ */ #hero{ margin-top: -10px; } .grid-2 .col:last-child{ padding-top: 42px; } #hero h1{ max-width: 600px; margin: 12px auto; } #hero h5{ margin-bottom: 12px; } #hero p{ max-width: 504px; margin: auto; } .hero-buttons{ flex-direction: row; padding: 24px 0 48px; gap: 24px; } /* ============================ Info 768 ============================ */ #info .card-txt:nth-of-type(3) h2{ font-size: 38px; line-height: 44px; padding-bottom: 30px; } #info .grid-2 .col:first-child p{ max-width: 740px; } .info-cards{ grid-template-columns: repeat(2, 1fr); } .grid-2 .col.info-cards{ display: inline-grid; } .card-txt:last-child{ grid-column: span 2; } .card-txt:nth-of-type(1) h4, .card-txt:nth-of-type(1) p{ padding-right: var(--padding-content); } .card-txt:nth-of-type(1)::after{ width: calc(100% + var(--padding-content)); left: calc(0px - var(--padding-content)); box-shadow: inset -0.75px 0 0 0 hsla(var(--theme-border),0.36) } .blue-tint .card-txt:nth-of-type(1)::after{ box-shadow: inset -0.75px 0 0 0 hsla(var(--color-blue-tint-3),0.36); } .card-txt:nth-of-type(2) h4, .card-txt:nth-of-type(2) p{ padding-left: var(--padding-content); } .card-txt:nth-of-type(2)::after{ width: calc(100% + var(--padding-content)); left: 0; box-shadow: inset 0.75px 0 0 0 hsla(var(--theme-border),0.36) } .blue-tint .card-txt:nth-of-type(2)::after{ box-shadow: inset 0.75px 0 0 0 hsla(var(--color-blue-tint-3),0.36); } .card-txt:nth-of-type(3) p{ font-size: 19px; max-width: 680px; } .card-txt:nth-of-type(3) p:last-of-type{ padding-bottom: 30px; } /* ============================ Sessions 768 ============================ */ #tabs.stick, #tabs{ padding: 24px 0; } table td:first-child{ padding: 3px 0 0; } #tabs a{ font-size: 20px; } table tr{ padding: 24px 0 28px; } table td{ display: inline-block; width: 83%; margin: 12px 0 12px 17%; vertical-align: top; } table td.no-room{ margin-bottom: 0; } table td.no-room p:first-child{ padding: 6px 0 2px; } table td::before{ line-height: 42px; } table thead th:first-child, table td:first-child{ width: 14%; margin-left: 0; } table thead th:nth-child(2), table td:nth-child(2){ margin-left: 3%; } table td:first-child, #tabs{ font-size: 28px; line-height: 40px; } table p:first-child{ line-height: 32px; padding-top: 35px; padding-bottom: 6px; } table p:nth-child(2), table p:nth-child(2) a{ padding-bottom: 2px; } table .links-docs{ margin-top: 9px; padding-top: 14px; padding-bottom: 0; } /* ============================ Sessions List 768 ============================ */ #sessions-list.diversity h4{ font-size: 40px; line-height: 50px; } /* ============================ Speakers 768 ============================ */ .columns-2{ grid-gap: calc(var(--padding-content) - 6px); padding-left: 6px; grid-template-columns: repeat(4, 1fr); } .columns-2 div:last-child{ grid-column: span 3; } .columns-4{ grid-template-columns: repeat(2, 1fr); } .a-speakers img, .a-speakers svg{ margin-bottom: -18px; } /* ============================ Tickets 768 ============================ */ #tickets .section-content.cta-active .ticket{ display: grid; grid-template-columns: repeat(2, 1fr); } #tickets .section-content.cta-active .ticket .ticket-bottom{ grid-column: span 2; } #tickets .section-content.cta-active .ticket-cta .ticket-detail-top::after, #tickets .section-content.cta-active .ticket-title .ticket-detail-top::before{ visibility: hidden; } #tickets .section-content.cta-active .ticket-cta{ border-left: 1.5px dashed hsla(var(--theme-border),0.6); } #tickets h5{ padding-top: 36px; } #tickets .ticket-title h3{ font-size: 38px; line-height: 42px; } #tickets .cta-active .ticket-title, #tickets .cta-active .ticket-cta{ padding: 30px 0; min-height: 216px; } #tickets .cta-active .ticket-title{ gap: 30px; } #tickets .cta-active .ticket-cta{ padding: 30px 0px 24px; } #tickets .ticket-cta-content{ gap: 14px; } #tickets .ticket-cta-content{ display: grid; } /* ============================ Venue 768 ============================ */ #venue .grid-2 .col:first-child{ padding-bottom: 48px; } /* ============================ Map 768 ============================ */ #map{ height: 408px; } /* ============================ Sponsors 768 ============================ */ .items{ column-gap: 24px; } .logos svg{ height: 66px; } .items.sl1 svg{ height: 90px; } .items.sl2 svg{ height: 78px; } /* ============================ Newsletter 768 ============================ */ .loop{ margin-top: -24px; } .content-subscription{ margin-bottom: 6px; } /* ============================ Gallery 768 ============================ */ .gallery .item:nth-child(3), .gallery .item:nth-child(14), .gallery .item:nth-child(15){ display: none; } .gallery .item:nth-child(4){ grid-column: span 2 / span 2; grid-row: span 2 / span 2; grid-column-start: 2; grid-row-start: 1; } .gallery .item figcaption{ font-size: 20px; line-height: 26px; } .al0{ width: 24px; top: 9px; right: 9px; } .gallery .item:hover .al0{ width: 36px; } .video-container{ height: 100%; } .video-container img:nth-of-type(1), .video-container video{ display: block; } .video-container img:nth-of-type(2){ display: none; } /* ============================ Footer 768 ============================ */ footer.wrapper{ padding-bottom: calc(var(--padding-block) * 2); } footer .border-animation{ padding: calc(var(--padding-block) * 2.5); } footer p{ display: inline-block; vertical-align: top; max-width: none; margin: 0; padding: 0; line-height: 28px; } footer p:first-child{ width: 55%; text-align: left; } footer p:first-child br:first-of-type{ display: none; } footer p:last-child{ width: 45%; text-align: right; padding-top: 0; } }/* ============================== End media 768 */ /* ========================= 1024 ========================= */ @media only screen and (min-width: 1024px){ /* ============================ Common 1024 ============================ */ .image-section:first-of-type{ display: none; } .image-section:last-of-type{ display: flex; width: 100%; max-width: none; } .title-button .button span strong{ display: inline; } #info h2 br:first-of-type{ display: inline; } #regular-content ul{ padding-bottom: 24px; } #regular-content li::after{ top: 12px; } .title-download p:last-child{ padding-bottom: 48px; } .title-download-detail::after{ width: 560px; height: 560px; bottom: -420px; } .hr, hr{ margin-bottom: 42px; } .title-logo-detail svg{ opacity: 0.18; } /* ============================ Grid 1024 ============================ */ .wrapper{ width: 95%; padding: var(--padding-block) 2.5%; } .wrapper.small{ width: 86%; padding: var(--padding-block) 7%; } .grid-2{ display: flex; } .grid-2 .col{ width: calc(44% - var(--padding-content)); display: inline-flex; flex-direction: column; margin-left: var(--padding-content); } .grid-2 .col:first-child{ width: 56%; margin-left: 0; } /* ============================ Typography 1024 ============================ */ body, p, #regular-content li{ font-size: 22px; line-height: 34px; } /* ============================ Hero & Hero Section 1024 ============================ */ #hero .col{ text-align: left; height: 100%; justify-content: center; } .grid-2 .col:last-child{ padding-top: 0; padding-left: var(--padding-content); box-sizing: border-box; align-items: center; } .grid-2 .col:last-child::after{ width: 1.5px; height: 0; top: calc(0px - var(--padding-content)); left: 0; transition: height 1.48s ease-in-out; } .grid-2 .col.visible:last-child::after{ width: 1.5px; height: calc(100% + calc(var(--padding-content) * 2)); } #hero h1{ max-width: none; margin: 0 0 12px; } #hero h5{ margin-bottom: 18px; } #hero p{ margin: 0; } .hero-buttons{ justify-content: start; padding: 24px 0 0; } /* ============================ Info 1024 ============================ */ #info .grid-2 .col:last-child{ padding-left: calc(1.5px + var(--padding-content)); } #info .image-section{ width: 84%; max-width: 420px; margin: 0; } .info-cards{ grid-template-columns: repeat(1, 1fr); } .card-txt{ margin: 0; } .card-txt:last-child{ grid-column: auto; min-height: 596px; margin-bottom: 0; padding-bottom: 0; } .card-txt:nth-of-type(1){ margin-top: calc(0px - var(--padding-content)); } .card-txt:nth-of-type(1) h4, .card-txt:nth-of-type(1) p, .card-txt:nth-of-type(2) h4, .card-txt:nth-of-type(2) p{ padding-right: 0; padding-left: 0; } .card-txt:nth-of-type(1)::after, .card-txt:nth-of-type(2)::after{ width: calc(100% + calc(var(--padding-content) * 2)); left: calc(0px - var(--padding-content)); box-shadow: none!important; } .card-txt:nth-of-type(1)::after{ border-radius: 0 var(--border-radius) 0 0; } .card-txt:nth-of-type(3)::after{ border-radius: 0 0 var(--border-radius); } /* ============================ Sessions 1024 ============================ */ table tr{ display: flex; gap: 24px; } table thead.stick, table thead{ display: block!important; } table thead tr{ border-bottom: none; padding: 24px 0 0; } table thead.stick tr{ padding: 0 0 12px; margin-top: -6px; } table thead th, table td{ /*display: inline-block;*/ width: 100%; margin-left: 0; padding-left: 0; } table td:nth-child(2){ margin-left: 0; } /*table.day-2 thead th, table.day-2 td{ width: 15.6%; }*/ table thead th:first-child, table td:first-child{ width: auto; min-width: 120px; } table thead th:nth-child(2){ margin-left: 0; } table th::after{ top: auto; bottom: -9px; width: 100%; height: 6px; } table th:first-child::after, table td::after, table td::before{ display: none; } table thead th p:last-child{ font-size: 17px; line-height: 34px; } table p:first-child{ padding-top: 0; } table td p:first-child{ padding-top: 6px; } table td.no-room p.line-1, table p.line-1{ padding-top: 6px; } table .links-docs{ margin-top: 10px; padding-top: 14px; } /* ============================ Speakers 1024 ============================ */ .columns-4{ grid-template-columns: repeat(4, 1fr); } .a-speakers{ max-width: none; } /* ============================ Tickets 1024 ============================ */ .cta-detail .button-cta .text strong{ display: inline-flex; } #tickets .cta-active .ticket-title, #tickets .cta-active .ticket-cta{ padding: 30px 0; min-height: 200px; } #tickets .cta-active .ticket-title{ gap: 18px; } #tickets .cta-active .ticket-cta{ padding: 32px 0 26px; } #tickets .ticket-cta-content{ padding-bottom: 16px; } /* ============================ Sponsors 1024 ============================ */ .items{ column-gap: 60px; } .logos svg{ height: 72px; } .items.sl1 svg{ height: 96px; } .items.sl2 svg{ height: 84px; } /* ============================ Venue 1024 ============================ */ #venue .grid-2 .col:first-child{ padding-bottom: 6px; } #venue .grid-2 .col:last-child{ height: 100%; justify-content: center; } .columns-3{ grid-template-columns: repeat(3, 1fr); } .columns-3 div:last-child{ grid-column: span 1; } /* ============================ Gallery 1024 ============================ */ .gallery{ grid-template-columns: repeat(4, 1fr); /*grid-template-rows: repeat(5, 1fr);*/ } .gallery .item:nth-child(5), .gallery .item:nth-child(8){ display: none; } .gallery .item:nth-child(3), .gallery .item:nth-child(14), .gallery .item:nth-child(15){ display: flex; } .gallery .item:nth-child(4){ grid-column-start: 3; grid-row-start: 1; } /* ============================ Footer 1024 ============================ */ footer.wrapper{ width: 95%; } footer p{ font-size: 15px; line-height: 30px; } /* ============================ Cookies 1024 ============================ */ .cookies-policy{ width: 46%; } .cookies-policy h2{ line-height: 44px; } }/* ============================== End media 1024 */ /* ========================= 1280 ========================= */ @media only screen and (min-width: 1280px){ /* ============================ Common 1280 ============================ */ h2{ padding-bottom: 40px; } .hero-wrapper h2{ padding-bottom: 34px; } .image-section:last-of-type{ max-width: 432px; } .title-download{ flex-direction: row; text-align: left; justify-content: space-between; padding-bottom: 0; } .title-download p:last-of-type{ padding-bottom: 0; } .title-download-detail::after{ width: 680px; height: 680px; top: -360px; right: -272px; bottom: auto; left: auto; margin: 0; } .title-logo-detail svg{ width: 320px; } .title-logo-detail svg:first-of-type{ bottom: -48px; left: -66px; } .title-logo-detail svg:last-of-type{ top: -100px; right: -100px; } /* ============================ Grid 1280 ============================ */ .wrapper.small{ width: 80%; padding: var(--padding-block) 10%; } .wrapper.small .grid-1, .wrapper.small .grid-2, .wrapper.small .grid-3, .wrapper.small .grid-4, .wrapper.small .grid-3--2-1, .wrapper.small .grid-3--1-2, .wrapper.small .grid-5--1-3-1{ max-width: 1024px; } .grid-2 .col{ width: calc(46% - var(--padding-content)); } .grid-2 .col:first-child{ width: 54%; } .grid-4 .col, #tickets .grid-4 .col{ width: 22.75%; } .grid-4 .col:nth-child(4n+3), #tickets .grid-4 .col:nth-child(3n+1){ margin-left: 3%; } .grid-4 .col:nth-child(4n+1), #tickets .grid-4 .col:nth-child(4n+1){ margin-left: 0; } .grid-5--1-3-1 .col:nth-child(3n+2){ margin-left: 2.65%; } .grid-5--1-3-1 .col{ width: 14.3%; margin-left: 2.65%; } .grid-5--1-3-1 .col:first-child{ width: 22%; } .grid-5--1-3-1 .col:last-child{ width: 24.5%; } #tickets .grid-4 .col:last-child{ width: 22.75%; } .border-animation{ width: inherit; } .border-animation.auto{ width: auto; } .border-animation.auto.mw{ max-width: 1344px; margin: auto; } .card-txt:nth-of-type(3) p:last-of-type, #venue .grid-2 .col:first-child p:last-of-type{ padding-bottom: 36px; } /* ============================ Header 1280 ============================ */ .header-center .nav{ position: absolute; top: auto; left: 0; right: 0; margin: auto; } .header-content{ display: flex; max-width: 1440px; column-gap: 12px; margin: auto; padding: 0 2.5%; } .header-options{ flex: auto; gap: 12px; justify-content: right; } .logo-wasm-io{ width: 174px; height: 48px; margin: 0; } .logo-wasm-io svg{ width: 174px; height: 48px; } .nav{ position: relative; top: 0; left: 0; max-height: none; width: fit-content; height: fit-content; background-color: hsla(var(--theme-card),0.84); border-radius: var(--border-radius); overflow: hidden; border: 1.5px solid hsla(var(--color-blue),0.36); } .menu{ display: flex; list-style-type: none; padding: 6px; gap: 12px; } .menu a{ display: flex; padding: 14px 22px; font-size: 16px; line-height: 16px; letter-spacing: 0.5px; border-radius: calc( var(--border-radius) - 6px); overflow: hidden; color: hsla(var(--theme-text-primary), 0.84); } .menu .list-item.active a{ color: hsla(var(--color-white),1); } .menu a:hover{ background-color: transparent; color: hsla(var(--theme-text-primary), 1); } .list-item{ cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease; z-index: 1; position: relative; } .list-item::after{ position: absolute; content: ""; width: 1.5px; height: 9px; top: 0; right: -6.5px; bottom: 0; margin: auto 0; border-radius: calc( var(--border-radius) - 6px); background: hsla(var(--theme-icon),0.18); } .list-item:last-of-type::after{ display: none; } .list-item.active{ color: hsla(var(--theme-text-primary),1); background-color: hsla(var(--color-blue),0.84); border-radius: calc( var(--border-radius) - 6px); } .highlight{ position: absolute; display: flex; top: 6px; left: 0; height: 44px; background-color: hsla(var(--color-blue),0.15); border-radius: calc( var(--border-radius) - 6px); transition: 0.3s ease; opacity: 0; pointer-events: none; } .hamb{ display: none; } /* ============================ Hero & Hero Section 1280 ============================ */ #hero{ margin-top: -16px; } #hero .grid-2 .col:first-child{ height: 100%; } #hero .col{ height: fit-content; } #hero .col:last-child{ min-height: 556px; } #hero h1{ margin-right: 120px; } #hero p{ max-width: 616px; } #hero p br:last-of-type{ display: none; } .hero-buttons{ position: relative; gap: calc( var(--padding-block) * 1.5); margin-top: calc( var(--padding-block) * 1.5); padding-top: calc( var(--padding-block) * 1.5); } .hero-buttons::after{ position: absolute; content: ""; width: 0%; height: 1.5px; top: -0.75px; left: 0; background: hsla(var(--color-blue), 0.36); transition: width 1.48s ease-in-out; } .visible .hero-buttons::after{ animation: move-border 1.02s 0.36s ease-out forwards; } /* ============================ Info 1280 ============================ */ #info .card-txt:nth-of-type(3) h2{ font-size: 54px; line-height: 60px; } #info .grid-2 .col:first-child p{ max-width: 666px; } .info-cards{ grid-template-columns: repeat(2, 1fr); } .grid-2 .col.info-cards{ display: inline-grid; } .card-txt{ padding: 48px 0; } .card-txt:last-child{ grid-column: span 2; } .card-txt:nth-of-type(1), .card-txt:nth-of-type(2){ margin-top: calc(0px - var(--padding-content)); white-space: nowrap; padding: 56px 0; } .card-txt:nth-of-type(1){ white-space: nowrap; } .card-txt:nth-of-type(1) h4, .card-txt:nth-of-type(1) p{ padding-right: var(--padding-content); } .card-txt:nth-of-type(1)::after{ width: calc(100% + var(--padding-content)); left: calc(0px - var(--padding-content)); border-radius: 0; box-shadow: inset -0.75px 0 0 0px hsla(var(--theme-border),0.36) } .card-txt:nth-of-type(2) h4, .card-txt:nth-of-type(2) p{ padding-left: var(--padding-content); } .card-txt:nth-of-type(2)::after{ width: calc(100% + var(--padding-content)); left: 0; border-radius: 0 var(--border-radius) 0 0; box-shadow: inset 0.75px 0 0 0px hsla(var(--theme-border),0.36); border-left: 1.5px solid hsla(var(--color-blue-tint-3),0.36); } .card-txt:nth-of-type(3) p{ font-size: 20px; max-width: 470px; } /* ============================ Sessions 1280 ============================ */ table thead.stick tr{ padding: 12px 0 18px; margin-top: 0; } table thead th p:last-child{ font-size: 22px; line-height: 36px; } #tabs.stick, #tabs{ padding: 48px 0 24px; } /* ============================ Speakers 1280 ============================ */ .a-speakers p{ padding: 18px 21px; } #regular-content .social{ margin-top: 36px; } #regular-content .social li{ padding: 14px 18px; } /* ============================ Tickets 1280 ============================ */ .cta-detail .inject-me{ visibility: visible; } #tickets .ticket-cta-content{ display: flex; justify-content: space-around; padding: 14px 0 36px; } .cta-detail .button-cta.xl{ font-size: 20px; } #tickets .section-content.cta-active .ticket{ display: flex; } #tickets .section-content.cta-active .ticket-cta .ticket-detail-top::after, #tickets .section-content.cta-active .ticket-title .ticket-detail-top::before{ visibility: visible; } #tickets .section-content.cta-active .ticket-cta{ border-left: none; opacity: 0; visibility: hidden; } #tickets .active .section-content.cta-active .ticket-cta{ opacity: 1; visibility: visible; } #tickets ul{ flex-direction: row; height: 270px; padding: 0 1.5px; margin: auto; } #tickets li{ flex: 1; flex-direction: row; max-height: none; border-bottom: none; border-right: 1.5px solid hsla(var(--theme-border),0.6); } #tickets li:last-child{ border-right: none; } /*#tickets li:hover{ }*/ #tickets li.active{ flex: 15; max-height: none; } #tickets li .section-title{ margin: 1.5px 0; } #tickets li .section-content{ margin: 1.5px 0; } #tickets li.active .section-content{ flex: 15; opacity: 1; transform: scaleX(1); } #tickets li .section-title{ flex: 1; align-self: center; } #tickets li .section-content{ flex: 1; } #tickets li:nth-child(1){ border-radius: calc(calc(var(--border-radius) / 1.5) + 1px) 0 0 calc(calc(var(--border-radius) / 1.5) + 1px); } #tickets li:nth-child(3){ border-radius: 0 calc(calc(var(--border-radius) / 1.5) + 1px) calc(calc(var(--border-radius) / 1.5) + 1px) 0; } #tickets .cta-active .ticket-title, #tickets .cta-active .ticket-cta{ min-height: 208px; } #tickets .cta-active .ticket-title{ padding: 30px 0px 24px; gap: 26px; opacity: 0; visibility: hidden; } #tickets .active .cta-active .ticket-title{ opacity: 1; visibility: visible; } #tickets .cta-active .ticket-cta{ padding: 8px 0 0; min-height: 208px; } #tickets .ticket-cta-content{ gap: 6px; } #tickets .ticket{ width: 100%; height: 100%; flex-direction: row; justify-content: stretch; } #tickets .ticket-detail-top, #tickets .ticket-detail-bottom{ width: 2px; height: 100%; top: 0; left: -1.5px; border-bottom: none; border-left: 1.5px dashed hsla(var(--theme-border),0.36); } #tickets .cta-active .ticket-detail-top:last-of-type{ left: -0.75px; } #tickets .ticket-detail-top::after, #tickets .ticket-detail-top::before, #tickets .ticket-detail-bottom::after, #tickets .ticket-detail-bottom::before{ bottom: -18px; left: -18px; } #tickets .ticket-detail-top::before, #tickets .ticket-detail-bottom::before{ top: -18px; right: auto; bottom: auto; left: -18px; } #tickets .ticket-detail-top.only-line{ right: -2px; left: auto; } #tickets .ticket-top, #tickets .ticket-title, #tickets .ticket-cta, #tickets .ticket-bottom{ width: 72px; height: auto; padding: 0; border-bottom: none; } #tickets .ticket-title, #tickets .ticket-cta{ width: inherit; height: auto; } #tickets .ticket-top{ flex-direction: column; height: 267px; } #tickets .ticket-title{ max-width: 35%; padding: 36px 0; } #tickets .ticket-title, #tickets .ticket-cta{ padding: 56px 0 48px; opacity: 0; visibility: hidden; } #tickets .active .ticket-title, #tickets .active .ticket-cta{ opacity: 1; visibility: visible; } #tickets .ticket-cta{ justify-content: space-between; } #tickets .ticket-cta h3{ font-size: 34px; line-height: 40px } #tickets .ticket-venue-date{ flex-direction: row; align-items: center; /* margin-top: 24px;*/ border-top: 1px solid hsla(var(--theme-border),0.36); } #tickets .ticket-venue-date p, #tickets .ticket-venue-date p:last-child{ padding: 14px 0; } #tickets .ticket-venue-date p:last-child{ border-left: 1px solid hsla(var(--theme-border),0.36); } #tickets .ticket-top p, #tickets .ticket-bottom p{ position: absolute; text-align: center; width: 240px; margin: auto; padding: 0; transform: rotate(-90deg); } #tickets .ticket-bottom p{ transform: rotate(90deg); } #tickets .ticket-bottom{ border-right: none; padding: 0 14px; } #tickets .active .ticket-top p, #tickets .active .ticket-bottom p { padding-top: 3px; } .ticket-logo{ display: flex; height: 100%; width: 100%; justify-content: center; } .ticket-logo svg{ width: 240px; height: auto; opacity: 0.24; } .ptl0{ fill: hsla(var(--theme-icon),1); } /* ============================ Map 1280 ============================ */ #map{ height: 504px; } /* ============================ Sponsors 1280 ============================ */ .items{ column-gap: 72px; } .logos svg{ height: 84px; } .items.sl1 svg{ height: 120px; } .items.sl2 svg{ height: 96px; } /* ============================ Sessions List 1280 ============================ */ #sessions-list h4 span{ font-size: 36px; } #sessions-list ul li{ padding: 0 0 18px 18px; } #sessions-list ul li::after{ width: 10px; height: 3px; top: 17px; } .warning{ padding: 12px 18px; margin: 0 0 36px; } #sessions-list.diversity h4{ font-size: 60px; line-height: 72px; } #sessions-list.diversity h5{ line-height: 50px; } /* ============================ Newsletter 1280 ============================ */ .content-subscription{ max-width: 460px; height: 66px; margin-bottom: 12px; } .subscription .add-email{ padding: 0 18px; font-size: 18px; } .subscription .submit-email{ width: 144px; font-size: 18px; } .subscription .submit-email .before-submit, .subscription .submit-email .after-submit{ line-height: 58px; } .subscription .add-email{ margin-top: -2px; padding-bottom: 2px; } /* ============================ Gallery 1280 ============================ */ .gallery{ grid-template-columns: repeat(5, 1fr); } .gallery .item:nth-child(5), .gallery .item:nth-child(8), .gallery .item:nth-child(12), .gallery .item:nth-child(13){ display: flex; } .gallery .item:nth-child(4){ grid-column-start: 4; grid-row-start: 1; } /* ============================ Footer 1280 ============================ */ footer .border-animation{ padding: calc(var(--padding-block) * 1.5); } }/* ============================== End media 1280 */ /* ============================ Fix ============================ */ @media only screen and (min-width: 1340px){ #tickets li.active, #tickets li.active .section-content{ flex: 16; } .cta-detail .inject-me{ width: calc(var(--btn-cta-xl-height) * 0.84); height: calc(var(--btn-cta-xl-height) * 0.84); left: calc(0px - calc(var(--btn-cta-xl-height) / 1.75)); } .cta-detail .inject-me:nth-child(2){ right: calc(0px - calc(var(--btn-cta-xl-height) / 1.75)); } } @media only screen and (min-width: 1440px){ .wrapper{ width: 92%; padding: var(--padding-block) 4%; } .header-content{ padding: 0 4%; } .nav{ position: absolute; top: auto; left: 0; right: 0; margin: auto; } .image-section:last-of-type{ max-width: 444px; } .title-logo-detail svg{ width: 360px; } .title-logo-detail svg:first-of-type{ bottom: -60px; left: -72px; } .title-logo-detail svg:last-of-type{ top: -120px; right: -120px; } #hero{ margin-top: -22px; } #hero .col:last-child{ min-height: 572px; } #tickets .ticket-title{ max-width: 36%; } #tickets .ticket-venue-date p, #tickets .ticket-venue-date p:last-child{ padding: 16px 0 12px; } .cta-detail .inject-me{ left: calc(0px - calc(var(--btn-cta-xl-height) / 1.5)); } .cta-detail .inject-me:nth-child(2){ right: calc(0px - calc(var(--btn-cta-xl-height) / 1.5)); } footer.wrapper{ width: 92%; } footer .border-animation{ padding: calc(var(--padding-block) * 1.25); } } @media only screen and (min-width: 1500px){ #tickets li.active, #tickets li.active .section-content{ flex: 17; } } @media only screen and (min-width: 1560px){ .wrapper{ width: 90%; padding: var(--padding-block) 5%; } .grid-2 .col{ width: calc(47% - var(--padding-content)); } .grid-2 .col:first-child{ width: 53%; } .wrapper.small .grid-1, .wrapper.small .grid-2, .wrapper.small .grid-3, .wrapper.small .grid-4, .wrapper.small .grid-3--2-1, .wrapper.small .grid-3--1-2, .wrapper.small .grid-5--1-3-1{ max-width: 1140px; } .logo-wasm-io, .logo-wasm-io svg{ width: 181px; height: 50px; } #regular-content .columns-2 h3:first-of-type{ padding-bottom: 30px; } .title-logo-detail svg{ width: 400px; } .title-logo-detail svg:first-of-type{ bottom: -72px; left: -84px; } .title-logo-detail svg:last-of-type{ top: -132px; right: -132px; } #info h2, #venue h2, #newsletter h2{ margin: 0 0 -18px; } #gallery h2, .title-button h2{ margin: 0 0 -6px; } .title-download-detail::after{ width: 960px; height: 960px; top: -600px; right: -460px; } #venue .grid-2 .col:first-child p:last-of-type{ padding-bottom: 42px; } .anim-typewriter{ margin-bottom: 9px; } h1{ font-size: 78px; line-height: 78px; } h2{ font-size: 66px; line-height: 72px; } h3{ font-size: 36px; line-height: 42px; } h4{ font-size: 36px; line-height: 42px; } h5{ font-size: 30px; line-height: 34px; } h6{ font-size: 36px; line-height: 42px; } .button span{ font-size: 17px; padding: 15px 39px; } .button:hover span{ padding-right: 48px; padding-left: 48px; } .header-content{ padding: 0 5%; column-gap: 15px; } .header-options{ gap: 15px; } .menu{ gap: 16px; } .list-item::after{ right: -8.5px; } .menu a{ padding: 18px 24px; } .highlight{ height: 52px; } #hero .col:last-child{ min-height: 616px; } #hero h5{ margin-bottom: 18px; } .hero-buttons{ gap: calc( var(--padding-block) * 1.5); padding: 28px 0 0; margin-top: calc( var(--padding-block) * 1.5); padding-top: calc( var(--padding-block) * 1.5); } .image-section:last-of-type{ max-width: 460px; } #tickets ul{ height: 320px; } #tickets li.active, #tickets li.active .section-content{ flex: 17; } #tickets .ticket-title{ /*max-width: 39%;*/ } #tickets .ticket-top{ height: 317px; } #tickets .ticket-top, #tickets .ticket-bottom{ width: 78px; } #tickets .ticket-title h3{ font-size: 44px; line-height: 48px; } #tickets .ticket-cta h3{ font-size: 40px; line-height: 46px; } #tickets .ticket-cta-content{ padding: 10px 0 42px; } #tickets .cta-active .ticket-title, #tickets .cta-active .ticket-cta{ min-height: 256px; } #tickets .cta-active .ticket-title{ padding: 30px 0px 24px; } #tickets .cta-active .ticket-cta{ gap: 0; padding: 4px 0 0; } #tickets .ticket-cta h3{ margin-top: 6px; margin-bottom: 0; } #tickets .ticket-title h4{ font-size: 56px; line-height: 56px; } #tickets .ticket-title h4.sold-out::after{ top: -10px; } #tickets .ticket p{ font-size: 18px; } #tickets .ticket-venue-date p, #tickets .ticket-venue-date p:last-child{ padding: 18px 0 16px; } .cta-detail .inject-me{ left: calc(0px - calc(var(--btn-cta-xl-height) / 3.5)); } .cta-detail .inject-me:nth-child(2){ right: calc(0px - calc(var(--btn-cta-xl-height) / 3.5)); } #info .card-txt:nth-of-type(3) h2{ font-size: 60px; line-height: 68px; } #info .image-section{ max-width: 444px; } .card-txt:nth-of-type(1), .card-txt:nth-of-type(2){ padding: 60px 0; } .card-txt:nth-of-type(3) p{ font-size: 21px; max-width: 496px; } .card-txt:last-child{ min-height: 642px; } .card-txt-venue{ min-height: 322px; } .card-txt-venue h4{ font-size: 60px; line-height: 24px; padding: 18px 0 0 0; } .card-txt-venue h5{ font-size: 30px; line-height: 38px; padding-bottom: 15px; } .card-txt-venue p{ padding: 9px 0; } .gallery .item figcaption{ font-size: 24px; line-height: 30px; width: 80%; padding: 0 10%; } #regular-content .a-speakers{ margin-bottom: 42px; } #regular-content .social{ margin-top: 48px; } #regular-content .social li{ font-size: 18px; line-height: 24px; padding: 18px; } footer.wrapper{ width: 90%; } } @media only screen and (min-width: 1900px){ .grid-1, .grid-2, .grid-3, .grid-4, .grid-3--2-1, .grid-3--1-2, .grid-5--1-3-1, .header-content{ max-width: 1536px; } .wrapper.small .grid-1, .wrapper.small .grid-2, .wrapper.small .grid-3, .wrapper.small .grid-4, .wrapper.small .grid-3--2-1, .wrapper.small .grid-3--1-2, .wrapper.small .grid-5--1-3-1{ max-width: 1200px; } .grid-2 .col{ width: calc(47.5% - var(--padding-content)); } .grid-2 .col:first-child{ width: 52.5%; } .logo-wasm-io, .logo-wasm-io svg{ width: 203px; height: 56px; } #regular-content li::after{ top: 14px; } #regular-content .a-speakers{ margin-bottom: 48px; } #regular-content h2{ padding-bottom: 30px; } .title-download p{ max-width: 586px; } .title-download-detail::after{ top: -580px; right: -454px; } .hr, hr{ margin-top: 12px; } .title-logo-detail svg{ width: 420px; } body, p, #hero p, #regular-content li{ font-size: 24px; line-height: 38px; } h1{ font-size: 84px; line-height: 90px; } h2{ font-size: 72px; line-height: 78px; } h3{ font-size: 40px; line-height: 50px; } h4{ font-size: 40px; line-height: 50px; } h5{ font-size: 32px; line-height: 36px; } h6{ font-size: 40px; line-height: 50px; } .header-content{ column-gap: 18px; } #hero .col:last-child{ min-height: 670px; } #hero p{ max-width: 666px; } .image-section:last-of-type{ max-width: 496px; } #info .card-txt:nth-of-type(3) h2{ font-size: 66px; line-height: 76px; } #info .grid-2 .col:first-child p{ max-width: none; } .card-txt:nth-of-type(3) p{ font-size: 22px; max-width: 516px; } .card-txt:nth-of-type(1), .card-txt:nth-of-type(2){ padding: 72px 0; } .card-txt:last-child{ min-height: 656px; } .columns-4{ grid-gap: calc(var(--padding-content) + 8px); padding-left: 8px; padding-bottom: 8px; } .a-speakers::before{ top: 8px; right: 8px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: calc(var(--border-radius) + 8px); } .a-speakers:hover{ box-shadow: -11.5px 11.5px 0 0 hsla(var(--color-purple),0.36), -11.5px 11.5px 0 0 hsla(var(--theme-background),1), -12px 12px 0 1.5px hsla(var(--color-purple),1); } .a-speakers:hover::before{ top: 4px; right: 4px; } .a-speakers p{ padding: 21px 24px; } .a-speakers p span:first-child{ font-size: 24px; line-height: 32px; } #tickets ul{ height: 360px; } #tickets .ticket-top{ height: 357px; } #tickets .ticket-top, #tickets .ticket-bottom{ width: 84px; } #tickets .ticket-title h3{ font-size: 46px; line-height: 52px; } #tickets .ticket-cta-content{ padding: 14px 0 48px; } #tickets .cta-active .ticket-cta{ padding: 0; } #tickets .ticket-venue-date p, #tickets .ticket-venue-date p:last-child{ padding: 22px 0 20px; } #tickets .ticket-cta h3{ font-size: 42px; line-height: 48px; } #tickets .ticket-title h4{ font-size: 60px; line-height: 60px; } .cta-detail .inject-me{ width: var(--btn-cta-xl-height); height: var(--btn-cta-xl-height); left: calc(0px - calc(var(--btn-cta-xl-height) / 2.5)); } .cta-detail .inject-me:nth-child(2){ right: calc(0px - calc(var(--btn-cta-xl-height) / 2.5)); } #timer{ font-size: 36px; line-height: 42px; } #timer div{ min-width: 84px; } #timer div span{ font-size: 12px; line-height: 12px; } .items{ column-gap: 120px; } .logos svg{ height: 90px; } .items.sl1 svg{ height: 132px; } .items.sl2 svg{ height: 102px; } .img-venue{ width: 41%; } .txt-venue{ width: 32.6%; } .txt-venue br{ display: none; } .warning{ padding: 18px 24px; margin: 0 0 60px; } .border-animation.auto.mw{ max-width: 1440px; } table div p:first-child{ font-size: 26px; line-height: 36px; } #sessions-list.diversity h4{ font-size: 66px; line-height: 78px; } #sessions-list.diversity h5{ font-size: 36px; line-height: 56px; } #speaker ul li, .standard-list li{ font-size: 24px; line-height: 38px; } #speaker ul li::after, .standard-list li::after{ top: 16px; } .gallery .item figcaption{ font-size: 26px; line-height: 32px; width: 84%; padding: 0 8%; } .al0{ width: 30px; top: 12px; right: 12px; } .gallery .item:hover .al0{ width: 42px; } } @media only screen and (min-width: 2200px){ .grid-1, .grid-2, .grid-3, .grid-4, .grid-3--2-1, .grid-3--1-2, .grid-5--1-3-1, .header-content{ max-width: 1680px; } .wrapper.small .grid-1, .wrapper.small .grid-2, .wrapper.small .grid-3, .wrapper.small .grid-4, .wrapper.small .grid-3--2-1, .wrapper.small .grid-3--1-2, .wrapper.small .grid-5--1-3-1{ max-width: 1380px; } .grid-2 .col{ width: calc(47.5% - var(--padding-content)); } .grid-2 .col:first-child{ width: 52.5%; } .logo-wasm-io, .logo-wasm-io svg{ width: 217px; height: 60px; } #regular-content li{ padding-bottom: 9px; } #regular-content li::after{ top: 16px; } #regular-content .a-speakers{ margin-bottom: 60px; } .title-download p{ max-width: 636px; } .title-download-detail::after{ top: -572px; right: -394px; } .hr, hr{ margin-top: 18px; margin-bottom: 60px; } .title-logo-detail svg{ width: 480px; } .title-logo-detail svg:first-of-type{ bottom: -90px; left: -102px; } .title-logo-detail svg:last-of-type{ top: -156px; right: -156px; } .anim-typewriter{ margin-bottom: 12px; } body, p, #hero p, #regular-content li{ font-size: 26px; line-height: 40px; } h1{ font-size: 90px; line-height: 90px; } h2{ font-size: 80px; line-height: 84px; } h3{ font-size: 42px; line-height: 52px; } h4{ font-size: 42px; line-height: 52px; } h5{ font-size: 36px; line-height: 42px; } h6{ font-size: 42px; line-height: 52px; } p{ padding-bottom: 36px; } .button-cta, .menu a, .button span{ font-size: 18px; } .header-content{ padding: 0 5%; } .menu{ gap: 18px; } .list-item::after{ right: -9.5px; } .menu a{ padding: 21px 30px; } .highlight{ height: 58px; } #hero{ margin-top: -28px; } #hero .col:last-child{ min-height: 742px; } #hero h1{ margin-top: 12px; } #hero h5{ margin-bottom: 18px; } #hero p{ max-width: 720px; padding-bottom: 42px; } .hero-buttons{ gap: calc( var(--padding-block) * 1.5); padding: 30px 0 12px; margin-top: calc( var(--padding-block) * 1.5); padding-top: calc( var(--padding-block) * 1.5); } .image-section:last-of-type{ max-width: 560px; } #info .image-section{ max-width: 480px; } #info .card-txt:nth-of-type(3) h2{ font-size: 72px; line-height: 80px; } #info .grid-2 .col:first-child p{ max-width: 790px; } .card-txt:nth-of-type(3) p{ font-size: 24px; max-width: 566px; } .card-txt:nth-of-type(3) p:last-of-type{ padding-bottom: 48px; } .card-txt:nth-of-type(1), .card-txt:nth-of-type(2){ padding: 90px 0; } .card-txt:last-child{ min-height: 696px; } .a-speakers p span:first-child{ font-size: 26px; line-height: 34px; } .a-speakers p span:last-child{ font-size: 19px; line-height: 30px; } #tickets ul{ height: 380px; } #tickets .ticket-top{ height: 377px; } #tickets li.active, #tickets li.active .section-content{ flex: 16; } #tickets .ticket-top, #tickets .ticket-bottom{ width: 96px; } #tickets .ticket-title h3{ font-size: 50px; line-height: 56px; } #tickets .ticket-cta h3{ font-size: 46px; line-height: 52px; } #tickets .ticket p{ font-size: 20px; } #tickets .ticket-venue-date p, #tickets .ticket-venue-date p:last-child{ padding: 24px 0 22px; } #tickets .ticket-title h4{ font-size: 66px; line-height: 66px; } #tickets .ticket-title h4.sold-out::after{ top: -12px; } #tickets .ticket-title, #tickets .ticket-cta{ padding: 66px 0 56px; } .cta-detail .inject-me{ left: calc(0px - calc(var(--btn-cta-xl-height) / 3.5)); } .cta-detail .inject-me:nth-child(2){ right: calc(0px - calc(var(--btn-cta-xl-height) / 3.5)); } #timer{ font-size: 38px; line-height: 44px; } #timer div span{ font-size: 12px; line-height: 12px; } .items{ column-gap: 120px; } .logos svg{ height: 90px; } .items.sl1 svg{ height: 132px; } .items.sl2 svg{ height: 102px; } .border-animation.auto.mw{ max-width: 1560px; } table div p:first-child{ font-size: 28px; line-height: 38px; } /*table p:nth-child(2){ font-size: 24px; line-height: 30px; }*/ table div p:last-child a{ font-size: 20px; } #sessions-list.diversity h4{ font-size: 72px; line-height: 84px; } footer .border-animation{ padding: var(--padding-block); } }