body, html, h1, h2, h3, h4, h5, p { margin: 0; padding: 0; } body { background-color: var(--color-body-bg); } body, html { scroll-behavior: smooth; } figure { margin: 0; } a { margin: 0; padding: 0; text-decoration: none; color: inherit; cursor: pointer; } a:visited { color: inherit; } ul { margin: 0; padding-left: 0; } li { list-style: none; } img { width: 100%; height: 100%; } picture { width: 100%; } picture { display: block; } button { all: unset; cursor: pointer; } button[disabled] { cursor: not-allowed; opacity: 0.3; } input { background-color: transparent; border-radius: 0; border: none; outline: none; } ::placeholder { color: #000; opacity: 1; /* Firefox */ transition: all 0.2s ease-in-out; } ::-ms-input-placeholder { /* Edge 12 -18 */ color: #000; transition: color 0.2s ease-in-out; } :focus::placeholder { opacity: 0.5; /* Firefox */ } ::-ms-input-placeholder { /* Edge 12 -18 */ color: rgba(0, 0, 0, 125); } :root { --border: 1px solid #000; --font-size-s: 1rem; --font-size-m: 1.25rem; --font-size-h5: 1.5625rem; --font-size-h4: 1.5625rem; --font-size-h3: 1.5625rem; --font-size-h2: 1.875rem; --font-size-h1: 2.8125rem; --font-size-xl: 3.75rem; --font-size-xxl: 4.5rem; --shift-large: 7vw; --shift-medium: calc(var(--shift-large) / 2); --shift-small: calc(var(--shift-medium) / 2); --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955); --curve-quick: cubic-bezier(0.23, 1, 0.32, 1); --padding-vertical: 2rem; --space-m: 4vw; --color-brown: #a59478; --color-beige: #eae7d8; --color-beige-light: #f7f6ed; --color-blue: #009eff; --color-blue-light: #9ef; --color-kaki: #6f8337; --color-green: #03ab7e; --color-mint: #91ffe1; --color-purple: #9e00ff; --color-pink: #f20298; --color-salmon: #ff6647; --color-pink-light: #ffa199; --color-gold: #ffc73b; --color-yellow-fluo: #d6ff00; --color-yellow: #faff82; --color-black: #000; --color-grey: #c4c9cc; --color-white: #fff; --scale-up: 1.035; --transition-image-opacity: opacity 0.3s ease-in-out; } @media screen and (max-width: 800px) { :root { --font-size-xl: 2.5rem; --font-size-h1: 1.875rem; --font-size-h2: 1.5625rem; --font-size-h3: 1.25rem; --font-size-h4: 1.25rem; --font-size-h5: 1.25rem; --font-size-m: 0.9375rem; --font-size-s: 0.8125rem; --padding-vertical: 1rem; } } @font-face { font-family: "Joker"; src: url("/assets/fonts/Jokker-Medium.woff") format("woff"); font-weight: normal; } @font-face { font-family: "Joker"; src: url("/assets/fonts/Jokker-Semibold.woff") format("woff"); font-weight: bold; } body { font-family: "Joker", sans-serif; font-size: var(--font-size-m); line-height: 1.25; } h1, .h1 { font-size: var(--font-size-h1); font-weight: normal; } h2, .h2 { font-size: var(--font-size-h2); font-weight: normal; } h3, .h3 { font-size: var(--font-size-h3); font-weight: normal; } h4, .h4 { font-size: var(--font-size-h4); font-weight: 500; } h5, .h5 { font-size: var(--font-size-h5); font-weight: 600; } input { font-family: "Joker", sans-serif; font-size: inherit; color: #000 !important; } .sr-only { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } @keyframes loading { from, to { opacity: 1; } 50% { opacity: 0; } } /* .calendar-strip__days.progress { cursor: progress !important; } .calendar-strip__days.progress > li { animation: loading 0.75s alternate infinite; } .calendar-strip__days.progress button { cursor: progress !important; } */ .grid { --column-gap: calc(var(--space-m) * 1.1); --row-gap: calc(var(--space-m) / 2); --row-length: calc(12 / var(--span)); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--column-gap); row-gap: var(--row-gap); } .grid__item { grid-column: span var(--span); } .grid__item picture { --column-gap-nbr: var(--row-length) - 1; --white-space: calc( (var(--column-gap) * var(--column-gap-nbr)) + var(--space-m) * 2 ); --width: calc((100vw - var(--white-space)) / var(--row-length)); height: calc(var(--width) / 1.2); } .grid__item picture img { object-fit: cover; } .logo { font-weight: normal; font-size: var(--font-size-h2); transition: font-size 0.1s var(--curve-quick); line-height: 1; } .logo > * { display: block; } .logo > *:not(:first-child) { margin-left: 2.27ch; transition: margin 0.1s var(--curve-quick); } .social-icons { display: flex; column-gap: 1.15rem; } .social-icons a svg { transform: scale(1); transition: transform 0.2s ease-in-out; } .social-icons a:hover svg { transform: scale(1.15); } .close-btn { position: relative; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; justify-self: end; } .close-btn__line, .close-btn__line::before { content: ""; width: 100%; height: 3px; background-color: #000; position: absolute; } .close-btn__line { transform: rotate(-45deg); } .close-btn__line::before { transform: rotate(90deg); } .arrow-right { font-size: 2rem; transform: rotate(0deg); transition: transform 0.3s var(--curve-quick); } .arrow-right.open { transform: rotate(90deg); } .ticket-link { position: relative; display: flex; align-items: center; z-index: 1; } .ticket-link > figure { margin-right: 1rem; } .yellow { background-color: var(--color-yellow); } /* .session:first-child > a { border-top: var(--border) !important; } */ .session:not(:last-child) { border-bottom: var(--border); } .session:hover { background-color: var(--color); } .session__info { width: 100%; } .session__info--slot { padding-right: 3vw; } .session__info > p:not(:last-child) { margin-bottom: 1rem; } .strong { font-weight: bolder; } .no-padding { padding: 0 !important; } .no-margin { margin: 0 !important; } .no-border { border: none !important; } .shift-large { margin-left: var(--shift-large); } .shift-medium { margin-left: var(--shift-medium); } .shift-small { margin-left: var(--shift-small); } .image-wrapper { position: relative; } .image-wrapper .image-cover { position: absolute; z-index: 2; opacity: 1; transition: opacity 0.2s ease-in-out; } .event-card:hover .image-cover { opacity: 0; } .loader { position: absolute; width: 40px; aspect-ratio: 1.154; --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #0000); background: var(--_g) 50% 0, var(--_g) 0 100%, var(--_g) 100% 100%; background-size: 35% calc(35% * 1.154); animation: l16 1s infinite; } @keyframes l16 { 50%, 100% { background-position: 100% 100%, 50% 0, 0 100%; } } img { opacity: 0; transition: var(--transition-image-opacity); } img.show { opacity: 1; } .mobile-group { display: contents; } /* Link hover scale up */ /* Logo hover */ #expanded-nav a, .main-nav a, .main-nav .burger-btn, .main-nav .close-btn, .collapsable__content a:not(.ticket-link) { display: block; scale: 1; transition: scale 0.5s var(--curve-quick); width: fit-content; } .filters button, .main-footer a, .anchors-strip a { display: inline-block; scale: 1; transition: scale 0.5s var(--curve-quick); } #expanded-nav a:hover, .filters button:hover, .main-nav a:hover, .main-nav .burger-btn:hover, .main-nav .close-btn:hover, .main-footer a:hover, .collapsable__content a:not(.ticket-link):hover, .anchors-strip a:hover { scale: var(--scale-up); } @media screen and (max-width: 800px) { .mobile-group { display: block; } .desktop { display: none; } .logo { font-size: 6vw; } .shift-large, .shift-medium, .shift-large { margin-left: 0; } } * { scroll-behavior: smooth; } section:not(.collapsable), footer { box-sizing: border-box; padding: var(--padding-vertical) var(--space-m); } section:not(:last-child, .collapsable, .collapsable-sections) { border-bottom: var(--border); } picture { background-color: var(--color); display: flex !important; justify-content: center !important; align-items: center !important; } picture img { z-index: 1; } picture svg { position: absolute; opacity: 1; transition: var(--transition-image-opacity); z-index: 0; } a[disabled] { cursor: not-allowed; } a:focus-visible, button:focus-visible { outline: 4px solid var(--color-season); } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(0px - ((100% / 3) - var(--space-m) / 1.6))); } } .main-nav a[aria-current] { font-weight: bold; } .info-banner { overflow: hidden; white-space: nowrap; border-bottom: var(--border); background-color: var(--color); } .info-banner ul { box-sizing: border-box; padding: 1rem var(--space-m); display: inline-block; animation: scroll-left 12s linear infinite; } .info-banner li { display: inline-block; padding-right: 6vw; font-size: var(--font-size-s); } .main-header { position: sticky; top: 0; background-color: #fff; z-index: 10; } /* Nav */ /* Expanded nav */ #expanded-nav { position: fixed; width: 100%; box-sizing: border-box; top: -50rem; z-index: 11; background-color: var(--color-beige); display: grid; grid-template-columns: 2fr 8fr 1fr; padding: 3rem var(--space-m) 3rem 1rem; border-bottom: var(--border); } #expanded-nav.open { top: 0rem; } .expanded-nav__logo-link { height: fit-content; } .expanded-nav__columns { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 6rem; } .expanded-nav__category { margin-bottom: 1rem; } .expanded-nav__category .toggle { display: none; } .expanded-nav__subcategory { font-size: var(--font-size-s); } .expanded-nav__ticketing a { display: flex; align-items: center; } .expanded-nav__links { display: flex; flex-direction: column; justify-content: space-between; } .expanded-nav__links .social-icons { margin-top: 1rem; } /* Header */ .main-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border); padding: 1rem; padding-right: var(--space-m); } .main-nav__right { display: flex; align-items: center; } .main-nav__featured-pages { display: flex; } .main-nav__right > *:not(:last-child), .main-nav__featured-pages li:not(:last-child) { margin-right: 2.69rem; } .main-nav__search { transform: translateY(1px); } .main-nav .burger-btn { position: relative; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; } .main-nav .burger-btn__line, .main-nav .burger-btn__line::before, .main-nav .burger-btn__line::after { content: ""; width: 100%; height: 3px; background-color: #000; position: absolute; } .main-nav .burger-btn__line::before { transform: translateY(-0.5rem); } .main-nav .burger-btn__line::after { transform: translateY(0.5rem); } /* Main nav small */ .main-nav--small .logo { font-size: var(--font-size-m); } .main-nav .logo > * { height: 1.8ch; max-width: 10rem; overflow: hidden; transition: all 0.5s var(--curve-quick); } .main-nav--small .logo > *:not(:first-child) { margin-left: 1.25ch; } .main-nav--small .logo > * { max-width: 1ch; } .main-nav--small .logo > *:nth-child(2) { max-width: 0.9ch; } @media screen and (max-width: 800px) { .main-nav__featured-pages { display: none; } .main-nav__right > :not(:last-child), .main-nav__featured-pages li:not(:last-child) { margin-right: 7vw; } .main-nav svg { height: 5.2vw; } #expanded-nav { width: 100vw; height: 100vh; top: -100vh; display: block; overflow: scroll; } #expanded-nav .close-btn { position: absolute !important; top: 3rem; right: var(--space-m); } .expanded-nav__columns { display: block; margin-top: 3rem; } .expanded-nav__category .toggle { display: block; transform: rotate(0deg); transition: transform 0.2s ease-in-out; } .expanded-nav__category .toggle.open { transform: rotate(90deg); } .expanded-nav__subcategories { padding-left: 2.8ch; max-height: 0; overflow: hidden; transition: max-height 0.5s var(--curve-quick-slow); } .expanded-nav__subcategories.open { max-height: 13rem; } .expanded-nav__subcategories > li:last-child { margin-bottom: 1rem; } .expanded-nav__columns > li:not(.expanded-nav__links) { border-bottom: var(--border); margin-bottom: 1rem; } .expanded-nav__ticketing { font-size: var(--font-size-h4); padding-bottom: 1rem; border-bottom: var(--border); } .expanded-nav__category { width: 100%; display: flex; justify-content: space-between; } .expanded-nav__socials { margin-top: 3rem; } } .hero { --empty-space: 11.9rem; background-color: var(--color-beige-light); --padding-vertical: calc(var(--space-m) / 1.5); display: grid; grid-template-columns: 1.6fr 3fr; column-gap: calc(var(--space-m) / 1.5); height: calc(100vh - var(--empty-space)); } .hero__text { position: relative; } .hero__text h2 { font-size: var(--font-size-xl); width: 100%; margin-bottom: var(--padding-vertical); } .hero__text h2.big { font-size: var(--font-size-xxl); } .hero__text h3 { /* color: var(--color-season); */ font-size: var(--font-size-h2); } .hero__text h3:nth-child(odd) { text-align: end; } .hero__text p:not(:last-of-type) { margin-bottom: 1rem; } .hero__text p:first-of-type { margin-top: var(--padding-vertical); } .hero__link { position: absolute; bottom: 0; font-weight: bold; } .hero__link::before { display: inline-block; content: "→"; margin-right: 1rem; transform: translateX(0rem); transition: all 0.3s var(--curve-quick-slow); } .hero__link:hover:before { margin-right: 2rem; } .hero .image-wrapper { height: 100%; } .hero__image { height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical)); } .hero__image picture { height: 100%; } .hero__image img { object-fit: cover; } .hero__image:hover .image-cover { opacity: 0; } @media screen and (max-width: 800px) { .hero__text h2 { text-align: center; } .hero__text h2.big { font-size: calc(var(--font-size-xxl) / 1.2); text-align: left; } .hero__text p:first-of-type { margin-top: 1rem; } .hero__link { position: relative; display: block; margin: 1rem 0; } .hero { padding: calc(var(--padding-vertical) / 1.2) var(--space-m) 2rem var(--space-m) !important; border-bottom: none !important; height: auto; } .hero__image { height: 60vw; } } .calendar-strip { --padding-vertical: calc(var(--space-m) / 2); position: relative; background-color: var(--color-yellow); width: 100%; display: flex; align-items: center; z-index: 6; } .calendar-strip__selector { flex-shrink: 0; display: flex; justify-content: space-between; width: 10rem; } .calendar-strip__days, .calendar-strip__days .week > ul { display: flex; justify-content: space-evenly; width: 100%; } .calendar-strip__change-week { display: none; } .calendar-strip__days .week, .calendar-strip__days .week > ul { display: contents; } .calendar-strip__day { font-size: var(--font-size-s); transition: opacity 0.2s ease-in-out; } .calendar-strip__day button { text-align: center; } .calendar-strip__day button.today { color: var(--color-season); opacity: 1 !important; } .calendar-strip__day button span { display: block; } .calendar-strip__day span:nth-child(1) { margin-bottom: 0.2rem; } .calendar-strip__day.active span:nth-child(3) { text-decoration: underline; } .calendar-strip__calendar-btn { border: var(--border); padding: 0.2rem 0.5rem; } .calendar-strip__date { position: absolute; box-sizing: border-box; overflow: hidden; left: 0; top: 100%; width: 100%; background-color: #fff; z-index: 0; border-bottom: var(--border); box-sizing: border-box; display: grid; grid-template-rows: 0fr; /* transition: all 0.5s ease-in-out; */ } .calendar-strip__date > * { overflow: hidden; } .calendar-strip__date.open { grid-template-rows: 1fr; border-top: var(--border); } .calendar-strip .session { position: relative; display: grid; grid-template-columns: 0.7fr 1.4fr 0.8fr 1.2fr 1.6fr; column-gap: 2vw; padding: var(--padding-vertical) var(--space-m); } .calendar-strip .session__event-link { position: absolute; inset: 0; z-index: 1; } .calendar-strip .session__info--duration p { margin-bottom: 0; } .calendar-strip .session__info--book .ticket-link { width: fit-content; } .calendar-strip .session__info--book { text-align: right; text-align: -moz-right; text-align: -webkit-right; } @media screen and (max-width: 800px) { .calendar-strip { --padding-vertical: 1rem; border-top: var(--border); } .calendar-strip__selector { width: 6.8rem; } .calendar-strip__selector span { margin: auto; } .calendar-strip__change-week { font-size: 1.3rem; display: block; } .calendar-strip__calendar-btn { display: none; } .calendar-strip .prev-month, .calendar-strip .next-month { display: none; } .calendar-strip__days .week, .calendar-strip__days .week > ul { display: inherit; } .calendar-strip__days .week:not(.current) { display: none; } .calendar-strip__days .week, .calendar-strip__days .week > ul { width: 100%; } .calendar-strip .session { grid-template-columns: 1.2fr 2fr 0.4fr; column-gap: 3vw; } .calendar-strip .session .ticket-link > figure { margin-right: 0; } .calendar-strip .session .ticket-link svg { width: 2rem; } .session__info--book-sold-out, .session__info--book-free { display: none; } } @keyframes vibrate { 0%, 100% { scale: 1; transform: rotate(0deg); } 20%, 40%, 60%, 80% { transform: rotate(5deg); } 20% { scale: 0.95; } 50% { scale: 1.05; } 80% { scale: 0.95; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); } } .ticket, .ticket-link { display: inline-flex !important; } a:not([disabled]):hover > .ticket svg, .ticket:not(a[disabled] .ticket):hover svg { animation: vibrate 0.5s forwards; } .ticket:not(a[disabled] .ticket, .to-blank .ticket):hover svg path:not(.dot), a:not([disabled]):hover > .ticket svg path:not(.dot) { fill: var(--color-season); stroke: var(--color-season); } a.to-blank:hover > .ticket svg path:not(.dot) { fill: #fff; stroke: #fff; } .ticket:not(a[disabled] .ticket, .to-blank .ticket):hover svg path.dot, a:not([disabled]):hover > .ticket svg path.dot { fill: #fff; } a.to-blank:hover > .ticket svg path.dot { fill: var(--color-season); } .events-grid { --padding-vertical: calc(var(--space-m) / 2); } .collapsable-sections + .events-grid { border-top: none; } .events-grid h4 { margin-bottom: calc(var(--space-m) / 2); } .event-card { position: relative; } .event-card:hover .event-card__infos { color: var(--color); } .event-card picture { height: calc(((100vw - 9 * var(--space-m)) / 12) * var(--span)); margin-bottom: calc(var(--space-m) / 2); } .event-card__infos { position: relative; } .event-card__infos > div a { max-width: 85%; } .event-card__infos .ticket { position: absolute; z-index: 5; margin-top: 0.3rem; padding: 0.5rem; right: -0.5rem; top: -0.5rem; } .event-card__infos > div { display: flex; justify-content: space-between; align-items: flex-end; column-gap: 2vw; } .event-card__infos > div:first-child { align-items: start; margin-bottom: calc(var(--space-m) / 2); } .event-card__link { position: absolute; inset: 0; z-index: 3; } .hero__image { position: relative; } .hero__image a { position: absolute; display: block; inset: 0; z-index: 3; } @media screen and (max-width: 800px) { .events-grid { --padding-vertical: 10vw; } .events-grid h4 { margin-bottom: 1.2rem; } .event-card { margin-bottom: 1rem; } .event-card picture { height: 70vw; } .event-card svg { width: 2rem; } } section.callout { --padding-vertical: var(--space-m); background-color: var(--color); display: flex; flex-direction: column; align-items: center; text-align: center; } section.callout .ticket-link { margin-top: calc(var(--padding-vertical) / 2); } section.callout a { display: flex; align-items: center; } @media screen and (max-width: 800px) { section.callout { padding: 2.25rem 2rem; } section.callout h4 { font-size: var(--font-size-m); } section.callout h4 { margin-bottom: 1rem; } section.callout svg { width: 1.5rem; } } section.newsletter { --padding-vertical: var(--space-m); background-color: var(--color-beige); } section.newsletter h2 { margin-bottom: calc(var(--space-m) / 2); } section.newsletter { --space-vertical: 0.4rem; } section.newsletter form { display: grid; grid-template-columns: 2fr 1fr; } section.newsletter form > *:last-child { justify-self: end; } section.newsletter form input { border-bottom: var(--border); padding-bottom: var(--space-vertical); width: 100%; } section.newsletter form button[type="submit"] { margin-top: var(--space-vertical); } section.newsletter form button[type="submit"]::before { content: "→"; position: absolute; transform: translateX(-1.5rem); transition: transform 0.35s ease-in-out; } section.newsletter form button[type="submit"]:hover::before { transform: translateX(-2.5rem); } section.key-infos { width: 100%; } section.key-infos ul { display: flex; justify-content: space-between; width: 100%; } section.key-infos p { display: inline; } section.key-infos .key-infos__key { color: var(--color-event); } section.key-infos .key-infos__key:not(:last-child) { margin-right: 3rem; } @media screen and (max-width: 800px) { section.key-infos ul { display: grid; grid-template-columns: 1fr 1fr; row-gap: 0.3rem; } section.key-infos li:nth-child(even) { justify-self: flex-end; } section.key-infos .key-infos__key:not(:last-child) { margin-right: 0.2rem; } } .presentation { display: grid; grid-template-columns: 1.5fr 1fr; column-gap: 1rem; } .presentation__title { margin-bottom: calc(var(--space-m) / 2); } .presentation__authors { color: var(--color-event); } .presentation__chapo { margin: var(--space-m) 0; } .presentation__description { font-size: var(--font-size-s); } @media screen and (max-width: 800px) { .presentation { grid-template-columns: 1fr; row-gap: 1rem; } } #swiper { position: sticky !important; top: 7rem !important; /* https://github.com/nolimits4web/swiper/issues/3599 */ width: 100%; max-width: 100%; max-height: 65vh; min-height: 0; min-width: 0; /* Custom */ overflow: hidden; position: relative; } .swiper-slide { display: flex !important; align-items: center; } /* nav buttons */ .swiper-button { width: 50% !important; height: 100% !important; top: 0 !important; z-index: 3 !important; margin-top: 0 !important; color: #fff !important; font-size: 3rem !important; } .swiper-button-next:after, .swiper-button-prev:after { content: "" !important; } .swiper-button-prev { justify-content: flex-start !important; } .swiper-button-next { justify-content: flex-end !important; } .swiper-button img { width: 2.5rem; } @media screen and (max-width: 800px) { #swiper { position: static !important; } #swiper picture { height: 100%; } #swiper picture img { object-fit: contain; } .swiper-button { display: none !important; } } .collapsable-sections { background-color: var(--color-yellow); --row-padding: var(--padding-vertical) var(--space-m); padding: 0 !important; } .collapsable > button.toggle, .collapsable__item--padding { padding: var(--row-padding); box-sizing: border-box; width: 100%; border-bottom: var(--border); } .collapsable button.toggle { display: flex; justify-content: space-between; align-items: center; } .collapsable button.toggle.open svg { transform: rotate(180deg); } .collapsable__content { background-color: #fff; font-size: var(--font-size-s); border-bottom: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease-in-out; } .collapsable__content > * { overflow: hidden; } .collapsable__content.open { grid-template-rows: 1fr; } .collapsable__content .session { position: relative; font-size: var(--font-size-m); grid-template-columns: 2fr 1fr 1fr 2fr; } .collapsable.sessions .session { grid-template-columns: 1fr 2fr 1fr 2fr; } .sessions--detailed .session { grid-template-columns: 1.5fr 2fr 1fr 1fr 2.5fr !important; } .collapsable__content .production p:not(:last-child) { margin-bottom: 2rem; } .collapsable .resource > * { display: inline-block; } .collapsable .resource > p { margin-right: 2rem; } .collapsable .resource > a { font-weight: bold; } .collapsable .event-link { position: absolute; inset: 0; width: auto !important; } @media screen and (min-width: 800px) { .session .left-column, .session .right-column { display: contents; } } @media screen and (max-width: 800px) { .collapsable__content .session { grid-template-columns: 1fr 1fr !important; column-gap: 9vw; font-size: 1rem; } .collapsable__content .session .ticket-link, .collapsable__content .session .ticket { display: block; } .collapsable__content .session .ticket-link { font-size: 0.8rem; text-align: right; } .collapsable__content .session .ticket-link figure { margin: 0; margin-bottom: 0.6rem; } .collapsable__content .session svg { width: 1.8rem; } [data-template="program"] .collapsable__content .session__info--ticket { order: -1; } [data-template="program"] .collapsable__content .right-column { font-size: var(--font-size-s); text-align: right; } .session .right-column { justify-self: end; display: flex; flex-direction: column; justify-content: space-between; } } .filters > button:not(:last-child) { margin-right: 4vw; } @media screen and (max-width: 800px) { .filters { display: none; } } .anchors-strip { padding: calc(var(--padding-vertical) / 1.6) var(--space-m) !important; } .anchors-strip ul { display: flex; } .anchors-strip li { margin-right: 5vw; } [data-template="sectioned"] section { scroll-margin-top: 8rem; background-color: var(--color); } [data-template="sectioned"] .section__row { margin-bottom: 1rem; } [data-template="sectioned"] main p:not(:last-child) { font-size: var(--font-size-s); margin-bottom: 1rem; } [data-template="sectioned"] main p { font-size: var(--font-size-s); } [data-template="sectioned"] main .big p { font-size: var(--font-size-m); } [data-template="sectioned"] main h2 { font-weight: bold; } [data-template="sectioned"] main h2, [data-template="sectioned"] main h3 { margin-bottom: calc(var(--padding-vertical) / 1.5); } [data-template="sectioned"] .blocks > *:not(:last-child) { margin-bottom: 1rem; } /* Links list */ [data-template="sectioned"] .links-list li { position: relative; display: grid; grid-template-columns: 3fr 3fr 0.5fr; border-bottom: 1px solid #000; margin-bottom: 0.6rem; padding-bottom: 0.6rem; font-size: var(--font-size-s); } [data-template="sectioned"] .links-list li p { margin-bottom: 0; } [data-template="sectioned"] .links-list li a { justify-self: end; } [data-template="sectioned"] .links-list li a::after { content: ""; position: absolute; inset: 0; } [data-template="sectioned"] .links-list li a::before { content: "→"; display: inline-block; transform: rotate(-45deg); } .section__row.fixed-img-height img { max-height: var(--height); object-fit: contain; } @media screen and (max-width: 800px) { .anchors-strip { display: none; } .section__row.fixed-img-height img { max-height: calc(var(--height) * 3); object-fit: contain; } } .search { background-color: var(--color-pink-light); width: 100vw; height: 75vh; padding-top: 20vh !important; } .search-form { position: relative; width: fit-content; margin: auto; } .search-input { border-bottom: var(--border); width: max(16rem, 40vw); margin-right: 2rem; padding: 0.3rem 0.5rem; font-size: var(--font-size-h2); } .search-input::-webkit-search-cancel-button { display: none; } .search-submit { width: 2rem; height: 2rem; } .main-footer { --padding-vertical: var(--space-m); background-color: var(--color-brown); display: grid; grid-template-columns: 0.9fr 1fr 1fr 0.9fr; column-gap: calc(var(--space-m)); border-top: var(--border); margin-top: -1px; font-size: 1rem; } .main-footer .first-column { display: flex; flex-direction: column; justify-content: space-between; } .main-footer p { margin-bottom: 1rem; } .main-footer .social-icons { margin-bottom: 2rem; } .main-footer form { position: relative; } .main-footer form p { font-weight: bold; } .main-footer form input { width: 100%; border-bottom: var(--border); padding-bottom: 0.3rem; } .main-footer form button { position: absolute; right: 0; top: 0; } @media screen and (max-width: 800px) { .main-footer { grid-template-columns: 1fr; row-gap: 1rem; } .main-footer .logo { margin-bottom: 3rem; } .main-footer form { width: 12rem; } .main-footer .social-icons { margin-bottom: 1rem; } } @media screen and (max-width: 800px) { .grid, .hero { grid-template-columns: 1fr; row-gap: var(--padding-vertical); } }