@charset "UTF-8"; :root { --primary: #c03e24; --primary-txt: #fff; --accent: grey; --accent-txt: #fff; --base: #FFF; --base-text: #424242; --base-secondary-text: #636363; --link-secondary-text: #424242; --darken-1: rgba(0, 0, 0, .125); --darken-2: rgba(0, 0, 0, .25); --darken-3: rgba(0, 0, 0, .5); --lighten-1: hsla(0, 100%, 100%, .125); --lighten-2: hsla(0, 100%, 100%, .25); --lighten-3: hsla(0, 100%, 100%, .5); --color-hero: ghostwhite; --color-main-sponsors: #73737a; --color-sponsors: #b7935b; --color-error: firebrick; --space-1: .125rem; --space-2: .25rem; --space-3: .5rem; --space-4: 1rem; --theJdrSize: 1100px; --block-text-max-width: 60rem; --breakpoint-sm: 34.375rem; --breakpoint-md: 45rem; --breakpoint-lg: 60rem; --breakpoint-xl: 71.25rem; --container-margin: 10vw; --container-margin-mobile: 3vw; --toolbar-height: 3.25rem; --font-family: 'Roboto', sans-serif; /* Tags */ /*from https://github.com/d3/d3-scale-chromatic#schemePastel2*/ --tag1: #b3e2cd; --tag2: #fdcdac; --tag3: #cbd5e8; --tag4: #f4cae4; --tag5: #e6f5c9; --tag6: #fff2ae; --tag7: #f1e2cc; --tag8: #cccccc; --native-mobile-apps: var(--tag2); --web: var(--tag6); --method-tools: var(--tag5); --big-data-ml-ai: var(--tag3); --iot: var(--tag8); --cloud: var(--tag4); --languages: var(--tag1); --wtf: var(--tag7); --general: var(--tag8); --office-hours: floralwhite; --keynote: paleturquoise; /* Jumbo section */ --jumbo-logo-width: 400px; --jumbo-overlay-opacity: 0.6; --jumbo-overlay-transition: 0.5s; /* Partners */ --partner-support-height: 60px; --partner-organisation-height: calc(var(--partner-support-height) * 2); --partner-partner-height: calc(var(--partner-support-height)*1.5); --partner-main-sponsors-height: calc(var(--partner-support-height) * 3); --partner-sponsors-height: calc(var(--partner-support-height) * 2); --animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --extruded-dark: 1px 0 0 var(--darken-3); --extruded-light: 1px 0 0 var(--lighten-3); --box-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.15); --box-shadow-2: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12); /* Mark */ --fg-mark-a: white; --bg-mark-a: #fb2c17; --fg-mark-b: black; --bg-mark-b: #ffcc00; --fg-mark-t2: white; --bg-mark-t2: #11a7e0; /* Schedule */ --base-grid-height: 4.5em; } html { box-sizing: border-box; font-family: var(--font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--darken-2); } *, *:before, *:after { box-sizing: inherit; } *:focus { outline: thin dotted var(--darken-3); outline-offset: var(--space-1); } body { background: var(--base); color: var(--base-text); margin: var(--toolbar-height) 0 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--toolbar-height)); } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; } hr { border-color: var(--darken-1); opacity: .25; } p { line-height: 1.25; } a, a:visited { color: inherit; text-decoration: none; } .content a, .content a:visited { color: var(--primary); } .language.english::before { content: '🇬🇧'; } .language.english::before { content: '🇹🇷'; } .visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } body > main > section.container, body > header.container, body > footer.container { padding: 4rem var(--container-margin); } body > header { position: fixed; top: 0; z-index: 100; width: 100vw; box-shadow: 0 var(--space-1) var(--primary), 0 var(--space-2) var(--space-1) var(--darken-3); background: var(--primary); color: var(--primary-txt); } body > header .top-content { max-width: var(--theJdrSize); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } body > header .logo img { height: calc(var(--toolbar-height) - (2 * var(--space-2))); max-width: 180px; } body > header label { display: none; opacity: .5; padding: .1em; border: var(--space-2) solid transparent; outline-offset: var(--space-2); } body > header label .icon { --size: 1.5rem; height: var(--size, 1.5rem); width: var(--size, 1.5rem); } body > header label .icon-menu { display: block; } body > header label .icon-close { display: none; } body > header label:hover, body > header label:focus { opacity: 1; outline: thin dotted currentColor; } body > header input[type=checkbox]:checked ~ label .icon-menu { display: none; } body > header input[type=checkbox]:checked ~ label .icon-close { display: block; } body > header nav { display: flex; align-items: center; } body > header nav ul { margin: 0; padding: 0; display: flex; list-style: none; } body > header nav li { opacity: .6; transition: all var(--animation); border-bottom: thin solid transparent; border-radius: 5%; } body > header nav li.active { opacity: 1; border-bottom-color: currentColor; } body > header nav a { display: block; text-transform: uppercase; padding: 0 var(--space-3); text-decoration: none; line-height: calc(var(--toolbar-height) - (4 * var(--space-2))); color: inherit; font-weight: 200; } body > header nav a svg { max-width: 3ch; } body > header nav nav a:focus, body > header nav nav a:hover { text-shadow: var(--extruded-dark); opacity: .75; } body > header nav .languages a.lang { color: transparent; max-width: 2em; height: 2em; overflow: hidden; } body > header nav .languages a.lang::before { color: initial; } body > header nav .languages a.lang.lang-tr::before { content: '🇹🇷'; } body > header nav .languages a.lang.lang-gb::before { content: '🇬🇧'; } body > header nav .languages a.active { display: none; } @media (max-width: 71.24em) { body > header { flex-wrap: wrap; } body > header label { display: block; } body > header nav { display: none; width: 100%; padding: 0 1em; background: var(--primary); flex-direction: column; justify-content: flex-start; } body > header nav ul { flex-direction: column; } body > header nav a { padding: var(--space-2) 0; width: 100%; } body > header nav a.active { border-bottom-width: thin; border-bottom-color: var(--lighten-2); } body > header nav a:focus, body > header nav a:hover { background: var(--darken-1); } body > header input[type=checkbox]:checked ~ nav { display: block; } } body > main { flex-grow: 1; } body > main > section { margin: 2rem var(--container-margin); padding-left: 0; padding-right: 0; } @media (max-width: 44.99em) { body > main > section { margin: 1rem; } } body > main > section.primary { background-color: var(--primary); color: var(--primary-txt); } body > main > section.accent { background-color: var(--accent); color: var(--accent-txt); } body > footer { background-color: var(--darken-1); color: var(--base-secondary-text); font-weight: 200; padding: .5em 1em; } body > footer .bottom-content { max-width: var(--theJdrSize); margin: 0 auto; } body > footer a:hover { text-decoration: underline; } body > footer .footer-header { display: flex; justify-content: space-between; font-weight: 500; flex-wrap: wrap; text-transform: uppercase; } body > footer .footer-header header { margin-right: var(--space-2); } body > footer .footer-header > div { display: flex; align-items: center; margin-bottom: 1rem; } body > footer .footer-header > div ul.social-list { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; } body > footer .footer-header > div ul.social-list li { display: inline-block; padding: var(--space-2); } body > footer .footer-header .follow a.social { opacity: .75; filter: grayscale(1); transition: filter var(--animation); } body > footer .footer-header .follow a.social:hover, body > footer .footer-header .follow a.social:focus { opacity: 1; filter: grayscale(0); } body > footer .footer-header .blog a { text-decoration: underline; } body > footer .footer-header .email a { display: flex; align-items: center; } body > footer .footer-header .email a .icon { width: 1em; height: 1em; } body > footer .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-4); } body > footer .footer-content .subscribe a.btn { color: var(--link-secondary-text); } body > footer .footer-content section { margin: var(--space-2) var(--space-4); } @media (max-width: 44.99em) { body > footer .footer-content section { margin: var(--space-2) 0; } } body > footer .footer-content section:first-child { margin-left: 0; } body > footer .footer-content section:last-child { margin-right: 0; } body > footer .footer-content section header { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-2); } body > footer .footer-content section ul { display: flex; flex-direction: column; list-style: none; padding: 0; margin: var(--space-3) 0; font-weight: 100; font-size: 0.9rem; } body > footer .footer-content section ul li { margin: var(--space-1) 0; } body > footer .footer-footer { display: flex; flex-direction: row; justify-content: space-between; margin-top: var(--space-4); } @media (max-width: 44.99em) { body > footer .footer-footer { flex-direction: column; align-items: start; } body > footer .footer-footer > * { margin: var(--space-2) 0; } } body > footer .footer-footer img { height: 2rem; width: auto; } button, a.btn, span.btn, input[type=button], input[type=reset], input[type=submit] { display: inline-flex; align-items: center; border: thin solid var(--darken-3); background: var(--darken-1); padding: var(--space-3); color: inherit; text-transform: uppercase; text-decoration: none; font-size: .875rem; font-weight: 100; cursor: pointer; text-shadow: var(--extruded-light); --focus-color: var(--darken-1); --active-color: var(--darken-1); } button.btn-lg, a.btn.btn-lg, span.btn.btn-lg, input[type=button].btn-lg, input[type=reset].btn-lg, input[type=submit].btn-lg { padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; } button.primary, a.btn.primary, span.btn.primary, input[type=button].primary, input[type=reset].primary, input[type=submit].primary { background-color: var(--primary); color: var(--primary-txt); text-shadow: var(--extruded-dark); --focus-color: var(--lighten-1); --active-color: var(--lighten-1); } button.btn-icon-only, a.btn.btn-icon-only, span.btn.btn-icon-only, input[type=button].btn-icon-only, input[type=reset].btn-icon-only, input[type=submit].btn-icon-only { display: flex; align-items: center; justify-content: center; background: var(--lighten-1); border-radius: 50%; margin-left: 1ch; padding: var(--space-2); border-color: transparent; } button.btn-icon-only .icon, a.btn.btn-icon-only .icon, span.btn.btn-icon-only .icon, input[type=button].btn-icon-only .icon, input[type=reset].btn-icon-only .icon, input[type=submit].btn-icon-only .icon { margin: var(--space-2); --size: 1.5rem; width: var(--size, 1.5rem); height: var(--size, 1.5rem); display: inline-block; content: ''; background-repeat: no-repeat; } button:hover, button:focus, a.btn:hover, a.btn:focus, span.btn:hover, span.btn:focus, input[type=button]:hover, input[type=button]:focus, input[type=reset]:hover, input[type=reset]:focus, input[type=submit]:hover, input[type=submit]:focus { background-image: linear-gradient(to right, var(--focus-color), var(--focus-color) 100%); text-decoration: none; } button .icon, a.btn .icon, span.btn .icon, input[type=button] .icon, input[type=reset] .icon, input[type=submit] .icon { --size: 1rem; width: var(--size, 1rem); height: var(--size, 1rem); } form:invalid button, button[aria-disabled], a.btn[aria-disabled], span.btn[aria-disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(100%); } a.goto-top { position: fixed; display: flex; bottom: 2em; right: 2em; width: 1em; height: 1em; justify-content: center; border: 0.75em solid var(--primary); align-items: center; font-size: 200%; background-color: var(--primary); color: var(--primary-txt); border-radius: 50%; } a.social { display: inline-flex; margin: var(--space-1); background-size: contain; background-position: center center; background-repeat: no-repeat; align-items: center; text-decoration: none; width: 1em; overflow: hidden; } a.social:focus, a.social:hover { text-decoration: underline; } .jumbo { position: relative; height: calc(100vh - var(--toolbar-height)); max-width: 100%; display: flex; justify-content: center; align-items: center; } .jumbo img.jumbo-logo { max-width: 100%; width: var(--jumbo-logo-width, 400px); height: auto; filter: drop-shadow(0px 1px 1px var(--darken-3)); } .jumbo p { margin: var(--space-2) 0; font-size: 2rem; } .jumbo .jumbo-cover { background-size: cover; background-attachment: fixed; background-position: center center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .jumbo #jumbo-img { display: none; } .jumbo #jumbo-overlay { transition: opacity var(--jumbo-overlay-transition, 0.4s); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } .jumbo #jumbo-overlay.show { opacity: var(--jumbo-overlay-opacity, 0.6); } .jumbo .inner-wrapper { max-width: 75vw; } .jumbo .inner-wrapper .inner { padding: var(--space-4); color: var(--primary-txt); position: relative; overflow: hidden; text-align: center; display: flex; flex-direction: column; } .jumbo .inner-wrapper .inner h2 { font-size: 2rem; margin: var(--space-3) 0; font-weight: bold; } .jumbo .inner-wrapper .inner h3 { font-size: 1.8rem; margin: var(--space-3) 0; } .jumbo .inner-wrapper .inner a { align-self: center; margin: .5em; } .jumbo .scroll-down { position: absolute; bottom: 2rem; left: 0; transform: translateX(50vw); transform-origin: center center; color: var(--base, white); } .jumbo .scroll-down .icon { height: 2.5em; width: 1.5em; } .jumbo .scroll-down .icon .scroller { animation: scrollDownMove .8s ease-in-out alternate infinite; } @keyframes scrollDownMove { from { transform: translateY(-0.15em); } to { transform: translateY(0.65em); } } @media (max-width: 59.99em) { .jumbo .inner { max-width: 80vw; padding: 0; } .jumbo .inner h1 { font-size: 1.5rem; } .jumbo .inner h1 img { max-width: 100%; } } .hero h1 { padding: 2rem var(--container-margin); } .hero .description { padding: 2rem var(--container-margin); background: var(--color-hero); border-top: thin solid var(--darken-1); border-bottom: thin solid var(--darken-1); } #TableOfContents ul { padding-left: 1em; list-style: none; } #TableOfContents ul li { font-size: 1rem; margin: var(--space-1) 0; padding: var(--space-1) 0; } #TableOfContents ul li a { color: var(--primary); text-decoration: none; } #TableOfContents ul li a:focus, #TableOfContents ul li a:hover { text-decoration: underline; } #TableOfContents > ul > li > ul > li > a { font-weight: bold; } .speakers ul li .speaker { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; } .speakers ul li .speaker .info { display: flex; flex-direction: column; align-items: center; } .speakers ul li .speaker .speaker-img { --size: 8rem; height: var(--size, 8rem); min-width: var(--size, 8rem); border-radius: 100%; background-size: cover; margin: var(--space-2); } .speakers ul li .speaker .speaker-company img { max-height: 2rem; margin: var(--space-1); } .speakers ul li .speaker .speaker-company figcaption { display: none; } .speakers ul li .speaker .speaker-name { font-weight: 600; margin: var(--space-1); } .speakers ul li .speaker .speaker-company { font-weight: 200; opacity: .8; margin: var(--space-1); } .tickets ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding-left: 0; } .tickets ul li { flex-basis: 15rem; } .tickets ul li .ticket { margin: var(--space-4); padding: 2rem var(--space-3); border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; } .tickets ul li .ticket[aria-disabled] { opacity: .5; filter: grayscale(1); cursor: not-allowed; } .tickets ul li .ticket .ticket-name { font-size: 1rem; } .tickets ul li .ticket .ticket-price { font-size: 3.5rem; color: var(--primary); font-weight: 200; } .tickets ul li .ticket .ticket-date, .tickets ul li .ticket .ticket-info { font-size: .75rem; color: var(--darken-3); } .tickets ul li .ticket .btn { margin: var(--space-4); } .partners-group h3 { text-align: center; margin: var(--space-4) 0; } .partners-group ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; padding: 0; } .partners-group ul li { flex-basis: 160px; margin: var(--space-3); height: var(--partner-support-height); } .partners-group .partner { padding: var(--space-3); display: block; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; background-origin: content-box; box-shadow: var(--box-shadow-1); transition: box-shadow var(--animation); cursor: pointer; color: transparent; } .partners-group .partner:hover, .partners-group .partner:focus { box-shadow: var(--box-shadow-2); } .partners-group.partner-organisation ul li { height: var(--partner-organisation-height); flex-basis: 320px; } .partners-group.partner-partners ul li { height: var(--partner-partner-height); flex-basis: 320px; } .partners-group.partner-main-sponsors ul li { height: var(--partner-main-sponsors-height); flex-basis: 320px; } .partners-group.partner-sponsors ul li, .partners-group.partner-startup ul li { height: var(--partner-sponsors-height); flex-basis: 200px; } /* Partner fancy name */ .partners-group .fancy { line-height: 0.5; text-align: center; color: var(--base-secondary-text); } .partners-group .fancy span { display: inline-block; position: relative; text-transform: capitalize; } .partners-group .fancy span:before, .partners-group .fancy span:after { top: 40%; content: ""; position: absolute; height: 5px; width: 140%; max-width: 25vw; } .partners-group .fancy span:before { right: 100%; margin-right: 15px; } .partners-group .fancy span:after { left: 100%; margin-left: 15px; } .partners-group.partner-organisation .fancy { font-size: 1.8em; color: var(--color-organisation); } .partners-group.partner-organisation .fancy span:before, .partners-group.partner-organisation .fancy span:after { border-bottom: 3px solid currentColor; } .partners-group.partner-partners .fancy { font-size: 1.6em; color: var(--color-partners); } .partners-group.partner-partners .fancy span:before, .partners-group.partner-partners .fancy span:after { border-bottom: 2px solid currentColor; } .partners-group.partner-main-sponsors .fancy { font-size: 1.5em; color: var(--color-main-sponsors); } .partners-group.partner-main-sponsors .fancy span:before, .partners-group.partner-main-sponsors .fancy span:after { border-bottom: 1px solid currentColor; border-top: 1px solid currentColor; } .partners-group.partner-sponsors .fancy { font-size: 1.33em; color: var(--color-sponsors); } .partners-group.partner-sponsors .fancy span:before, .partners-group.partner-sponsors .fancy span:after { top: 20%; border-bottom: 1px solid currentColor; } .tag-method-tools { background-color: var(--method-tools); } .tag-native-mobile-apps { background-color: var(--native-mobile-apps); } .tag-web { background-color: var(--web); } .tag-big-data-ml-ai { background-color: var(--big-data-ml-ai); } .tag-iot { background-color: var(--iot); } .tag-cloud-infra { background-color: var(--cloud); } .tag-languages { background-color: var(--languages); } .tag-wtf { background-color: var(--wtf); } .tag-keynote { background-color: var(--keynote); } .tag-office-hours { background-color: var(--office-hours); } .tag-general { background-color: var(--general); } section .tags { padding: var(--space-1); border-radius: var(--space-2); background: var(--darken-1); border: thin solid var(--darken-2); text-shadow: var(--extruded-light); } .tag-open { background-image: url("/images/backgrounds/open.jpg"); } .tag-pause { background-image: url("/images/backgrounds/pause.jpg"); } .tag-lunch { background-image: url("/images/backgrounds/lunch.jpg"); } .tag-party { background-image: url("/images/backgrounds/party.jpg"); } .icon { --size: 1em; height: var(--size, 1em); min-width: var(--size, 1em); display: inline-block; background-repeat: no-repeat; margin-right: var(--space-1); } a .icon.icon-subscribe, a .icon.icon-email, a .icon.icon-calendar, a .icon.icon-pdf { margin-right: var(--space-3); } a .icon.icon-right { margin-left: var(--space-3); } .type-conference { --duration: '40'; } .type-quickie { --duration: '15'; } .type-keynote { --duration: '30'; } .type-office-hours { --duration: '30'; } form { display: flex; flex-direction: column; } form button, form input[type=button], form input[type=reset], form input[type=submit] { align-self: flex-end; } form input { background: transparent; border: none; border-bottom: var(--space-1) solid var(--darken-2); transition: border var(--animation); margin: var(--space-3) 0; outline: thin dotted transparent; font-size: 1rem; line-height: 1.5rem; padding: var(--space-2); border-radius: var(--space-1); color: var(--base-text); } form input::placeholder { color: var(--darken-3); } form input:focus { border-bottom-color: var(--primary); } form input:invalid { border-bottom-color: var(--color-error); } .album { padding: var(--space-2); } .album .img { background-size: cover; background-position: center center; } .album .inner { padding: var(--space-4); background-color: var(--primary); color: var(--primary-txt); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } @supports (grid-template-columns: repeat(5, 1fr)) { .album { padding: var(--space-2); display: grid; grid-gap: var(--space-2); grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 30vh); grid-auto-flow: dense; } .album .img { background-size: cover; background-position: center center; } .album .img:first-child, .album .img:nth-child(2), .album .img:nth-child(6), .album .img:nth-child(8), .album .inner { grid-column: span 2; } .album .img:nth-child(3) { grid-column: 5; grid-row: 1 / 3; } .album .inner { grid-column: 3 / 5; grid-row: 2; } @media (max-width: 59.99em) { .album { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 20vh); } .album .img:first-child, .album .img:nth-child(7), .album .img:nth-child(8) { grid-column: span 1; } .album .img:nth-child(2), .album .img:nth-child(4), .album .img:nth-child(6), .album .inner { grid-column: span 2; } .album .img:nth-child(3) { grid-column: 3; grid-row: 2 / 4; } .album .inner { grid-column: span 3; grid-row: span 5; } } } .home main > section { margin: 0; padding: 4rem; } .home main > section h2 { margin-bottom: 1.5rem; padding: 0; font-size: 2rem; line-height: 1.875rem; font-weight: 300; } .home main .info { display: flex; flex-wrap: wrap; } .home main .info .wrapper { max-width: var(--theJdrSize); margin: 0 auto; display: flex; } @media (max-width: 44.99em) { .home main .info { text-align: center; } } .home main .info .inner { flex: 1 1 auto; max-width: 33vw; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 71.24em) { .home main .info .inner { max-width: 100%; } } .home main .info .numbers { flex: 1 0 33vw; margin: 0 2rem; min-width: 33vw; display: flex; justify-content: space-between; width: 100%; } @media (max-width: 44.99em) { .home main .info .numbers { margin: 0; } } .home main .info .number strong { font-size: 3.5rem; font-weight: 100; } .home main .info .number strong::after { content: ''; display: block; height: .125rem; width: 2rem; background-color: var(--primary); } .home main .info .number div { margin: var(--space-1) 0; } .home main .speakers .inner { max-width: var(--theJdrSize); margin: 0 auto; } .home main .speakers ul { max-width: var(--theJdrSize); margin: 0 auto; padding-left: 0; list-style: none; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; } .home main .speakers ul li { margin: var(--space-4); } .home main .speakers ul li:nth-child(n+5) { display: none; } .home main .subscribe { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .home main .youtube-section { text-align: center; } .home main .youtube-section .inner { max-width: var(--theJdrSize); margin: 0 auto; padding: var(--space-4); border-radius: var(--space-3); position: relative; overflow: hidden; text-shadow: 0 1px 1px var(--darken-3); text-align: center; } .home main .youtube-section .inner .youtube-player { border: 4px solid white; background-color: black; } @media (max-width: 59.99em) { .home main .youtube-section .inner { padding: 0; max-width: 80vw; } } .home main .tickets { display: flex; flex-direction: column; align-items: center; } .home main .tickets p { font-size: 80%; } .home main .location { padding: 0; position: relative; background: var(--darken-1); font-weight: 300; } .home main .location .map { display: block; height: 664px; background-position: center center; background-size: cover; } .home main .location .description { display: inline-block; padding: var(--space-4); width: 400px; position: absolute; bottom: 2rem; right: 2rem; background-color: var(--primary); color: var(--primary-txt); } .home main .location .description .direction { display: flex; align-items: center; } .home main .partners .inner h2 { text-align: center; } @supports (grid-template-columns: repeat(auto-fit, minmax(25vmin, 1fr))) { .home main .info .numbers { justify-content: center; display: grid; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 59.99em) { .home main > section { padding: 2rem; } .home main .location .description { position: relative; top: unset; bottom: unset; left: 0; right: unset; width: 100%; } } .section.sessions ul.talks, .taxonomy.tags ul.talks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .section.sessions ul.talks li.talk, .taxonomy.tags ul.talks li.talk { margin: 1rem; flex: 1 0 320px; } .section.sessions ul.talks a, .taxonomy.tags ul.talks a { border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); transition: box-shadow var(--animation); border-radius: var(--space-2); display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } .section.sessions ul.talks a:hover, .section.sessions ul.talks a:focus, .taxonomy.tags ul.talks a:hover, .taxonomy.tags ul.talks a:focus { box-shadow: var(--space-2) var(--space-2) var(--space-2) var(--darken-3); } .section.sessions ul.talks a h2, .section.sessions ul.talks a .info, .taxonomy.tags ul.talks a h2, .taxonomy.tags ul.talks a .info { padding: var(--space-4); } .section.sessions ul.talks a h2, .taxonomy.tags ul.talks a h2 { display: flex; justify-content: space-between; align-items: center; } .section.sessions ul.talks a hr, .taxonomy.tags ul.talks a hr { width: calc(100% - var(--space-3)); margin: 0 auto; } .section.sessions ul.talks a .info, .taxonomy.tags ul.talks a .info { flex-grow: 1; } .section.sessions ul.talks a .info .tags, .taxonomy.tags ul.talks a .info .tags { float: right; } .section.sessions ul.talks a .info .presentation svg, .section.sessions ul.talks a .info .video svg, .taxonomy.tags ul.talks a .info .presentation svg, .taxonomy.tags ul.talks a .info .video svg { min-height: 1.25em; max-width: 3ch; } .section.sessions ul.talks a .speakers, .taxonomy.tags ul.talks a .speakers { border: thin solid transparent; border-radius: var(--space-2); background: var(--base); padding-left: 0; } .section.sessions ul.talks a .speaker + .speaker, .taxonomy.tags ul.talks a .speaker + .speaker { border-top: thin solid var(--darken-1); } @supports (grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))) { .section.sessions ul.talks, .taxonomy.tags ul.talks { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } .talk { margin: 2rem auto 0; max-width: var(--block-text-max-width); } .talk .complexity::before { content: 'Niveau : '; } .talk .type::before { content: 'Type : '; } .talk .type::after { font-weight: 100; content: " (" var(--duration, "") " min.)"; } .talk .speakers .speaker { display: flex; align-items: center; padding: var(--space-1) var(--space-3); background-color: var(--base); --img-size: 2rem; } .talk .speakers .speaker .speaker-img { --img-size: 3rem; height: var(--img-size, 3rem); min-width: var(--img-size, 3rem); border-radius: 100%; background-size: cover; margin-right: var(--space-4); } .talk .speakers .speaker .info { display: flex; flex-direction: column; } .talk .speakers .speaker .speaker-company { flex-grow: 1; text-align: right; margin-left: var(--space-3); } .talk .speakers .speaker p { max-width: 320px; } .page.sessions .talk header { border-radius: var(--space-2); padding: var(--space-2); display: flex; align-items: center; } .page.sessions .talk header h1 { flex-grow: 1; } .page.sessions .talk header .tags { margin-right: 1ch; white-space: nowrap; } .page.sessions .talk .detail { margin: var(--space-2) 0; padding: var(--space-2) 0; border-top: thin solid var(--darken-1); border-bottom: thin solid var(--darken-1); } .page.sessions .talk .content { margin: var(--space-4) 0; flex: 1 1 auto; } .page.sessions .talk .content p { line-height: 1.5; font-size: 110%; } .page.sessions .talk .content blockquote.twitter-tweet { border: thin solid var(--darken-2); border-radius: .5em; padding: .75em; } .page.sessions .talk .content blockquote.twitter-tweet p { margin: 0; } .page.sessions .talk .speakers .speaker { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto; } .page.sessions .talk .speakers .speaker .speaker-img { grid-row: 1 / -1; align-self: center; --img-size: 6rem; height: var(--img-size, 3rem); min-width: var(--img-size, 3rem); border-radius: 100%; background-size: cover; margin-right: var(--space-4); } .page.sessions .talk .speakers .speaker .speaker-company { text-align: left; margin-left: 0; } .page.sessions .talk .speakers { float: right; margin: var(--space-1) var(--space-3); list-style: none; padding: 0; align-self: start; border-radius: var(--space-2); } .page.sessions .talk .speakers .speaker { padding: var(--space-3); margin: var(--space-4) 0; border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); transition: box-shadow var(--animation); border-radius: var(--space-2); text-decoration: none; color: inherit; } .page.sessions .talk .speakers .speaker:hover, .page.sessions .talk .speakers .speaker:focus { box-shadow: var(--space-2) var(--space-2) var(--space-2) var(--darken-3); } .page.sessions .talk .media { grid-column: 1 / -1; } .page.sessions .talk .media a { padding: var(--space-3) 0; font-size: 1rem; } .page.sessions .talk .media .social-slides { width: auto; margin-top: 1em; background: var(--primary); color: var(--primary-txt); font-size: 1.25em; padding: .125em .75em; border-radius: 1em; } .page.sessions .talk .media .social-slides:focus, .page.sessions .talk .media .social-slides:active, .page.sessions .talk .media .social-slides:hover { box-shadow: 0.0625em 0.0625em 0.125em var(--darken-3); } .page.sessions .talk .media .social-slides svg { max-width: 2ch; } @media (max-width: 59.99em) { .page.talks .talk { grid-template-columns: 1fr; } .page.sessions .talk .speakers { float: unset; } } .page.partners .content img { width: 50vw; } .page.partners .header { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo title" "logo website"; align-items: center; } .page.partners .header .card { grid-area: logo; height: 8em; width: 12em; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center center; background-origin: content-box; padding: .25em; margin-right: 1em; box-shadow: 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.5); } .page.partners .header h1 { grid-area: title; align-self: end; font-size: 2.5em; } .page.partners .header a { grid-area: website; align-self: start; } .page.partners .socials ul { margin: 0; list-style: none; padding-left: 0; display: flex; align-items: center; font-size: 2em; } .page.partners .socials ul li { margin: .25em; } .page.partners .jobs ul { margin: 0; display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding-left: 0; } .page.partners .jobs ul .job { padding: .5em; margin: .5em; box-shadow: 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .page.partners .jobs ul .job header { font-size: 1.1em; font-weight: bold; font-style: italic; margin: .5em 0; } .page.partners .jobs ul .job .city, .page.partners .jobs ul .job .contact { display: flex; justify-content: flex-start; align-items: center; color: #666; margin: .25em 0; } .page.partners .jobs ul .job .city .icon, .page.partners .jobs ul .job .contact .icon { width: 2ch; } .section.schedule .hero .description { display: flex; } .section.schedule .hero .description p + p { margin-left: 1em; } .section.schedule nav.day-tabs { font-size: 2em; display: flex; flex-wrap: wrap; justify-content: space-between; align-self: center; padding: var(--space-3) var(--container-margin); } .section.schedule nav.day-tabs a { flex-grow: 1; margin: var(--space-2) var(--space-4); border-radius: var(--space-3); text-align: center; color: var(--primary); background-color: var(--primary-txt); } .section.schedule nav.day-tabs a.active { background-color: var(--primary); color: var(--primary-txt); } .section.schedule main > section.schedule { margin: 1rem 2rem 2rem; padding: var(--space-3) var(--container-margin); } .section.schedule main > section.schedule .day { display: none; } .section.schedule main > section.schedule .day:target { display: block; } .section.schedule h2 { display: none; } .section.schedule .room { display: flex; justify-content: center; align-items: flex-start; color: var(--primary); background-color: var(--primary-txt); margin: .125em; } .section.schedule .room h3 { border: medium solid currentColor; border-radius: var(--space-3); background-color: var(--primary-txt); font-size: 1.25em; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: var(--space-3); height: 3em; font-weight: bold; } .section.schedule .room h3 small { font-size: .75em; font-weight: normal; } .section.schedule .start, .section.schedule .slot { font-size: 2em; color: var(--base-secondary-text); } .section.schedule .start .mm, .section.schedule .slot .mm { font-size: 50%; } .section.schedule .start { position: absolute; top: 0; left: -3.5ch; } .section.schedule .slot { display: none; } .section.schedule .session { position: relative; margin: 1rem 1rem 1rem 5ch; border-radius: var(--space-2); } .section.schedule .session.tag-open, .section.schedule .session.tag-pause, .section.schedule .session.tag-lunch, .section.schedule .session.tag-party { background-position: center center; background-size: cover; pointer-events: none; } .section.schedule .session.tag-open > a, .section.schedule .session.tag-pause > a, .section.schedule .session.tag-lunch > a, .section.schedule .session.tag-party > a { box-shadow: none; } .section.schedule .session.tag-open h4, .section.schedule .session.tag-pause h4, .section.schedule .session.tag-lunch h4, .section.schedule .session.tag-party h4 { color: white; text-shadow: 2px 1px 1px black; } .section.schedule .session.tag-open .tags, .section.schedule .session.tag-pause .tags, .section.schedule .session.tag-lunch .tags, .section.schedule .session.tag-party .tags, .section.schedule .session.tag-office-hours .tags { display: none; } .section.schedule .session .slot { display: none; } .section.schedule .session > a { border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); transition: box-shadow var(--animation); border-radius: var(--space-2); display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } .section.schedule .session > a:hover, .section.schedule .session > a:focus { box-shadow: var(--space-2) var(--space-2) var(--space-2) var(--darken-3); } .section.schedule .session > a h4, .section.schedule .session > a .info { padding: var(--space-2); } .section.schedule .session > a h4 { text-shadow: 2px 1px 1px white; display: flex; justify-content: space-between; align-items: center; } .section.schedule .session > a hr { width: calc(100% - var(--space-3)); margin: 0 auto; } .section.schedule .session > a .info { flex-grow: 1; } .section.schedule .session > a .info .complexity, .section.schedule .session > a .info .video, .section.schedule .session > a .info .presentation { float: left; clear: left; display: inline; max-height: 1.5em; } .section.schedule .session > a .info .complexity svg, .section.schedule .session > a .info .video svg, .section.schedule .session > a .info .presentation svg { height: 1.5em; max-width: 1.5em; } .section.schedule .session > a .info .tags { float: right; } .section.schedule .session > a .speakers { border: thin solid transparent; border-top: thin solid var(--darken-1); border-radius: var(--space-2); background: var(--base); padding: 0; margin: 0; list-style: none; } .section.schedule .session > a .speaker { display: flex; align-items: center; padding: var(--space-1) var(--space-3); } .section.schedule .session > a .speaker .speaker-img { --img-size: 2rem; height: var(--img-size, 3rem); min-width: var(--img-size, 3rem); border-radius: 100%; background-size: cover; margin-right: var(--space-4); } .section.schedule .session > a .speaker .info { display: flex; flex-direction: column; } .section.schedule .session > a .speaker .speaker-company { flex-grow: 1; text-align: right; margin-left: var(--space-3); } .section.schedule .session > a .speaker p { max-width: 320px; } @supports (grid-template-columns: repeat(calc(var(--rooms) + 1), 1fr)) { .section.schedule main > section.schedule .day { grid-template-columns: auto repeat(var(--rooms), 1fr); --dayStart: 60 * var(--dayStartH) + var(--dayStartM); --dayEnd: 60 * var(--dayEndH) + var(--dayEndM); grid-template-rows: 4em repeat(calc(var(--end) - 1), var(--base-grid-height, 6em)); grid-gap: .125em .25em; } .section.schedule main > section.schedule .day:target { display: grid; } .section.schedule main > section.schedule .day .slot { display: block; grid-column: 1 / 2; --start: calc(1 + var(--row-start)); --end: calc(1 + var(--row-end)); grid-row: var(--start)/var(--end); background-color: var(--color-hero); } .section.schedule main > section.schedule .day .room { grid-column: calc(var(--room) + 2); grid-row: 1 / -1; } .section.schedule main > section.schedule .day .room.even { background-color: var(--color-hero); } .section.schedule main > section.schedule .day .session { margin: .125em; z-index: 2; --start: calc(1 + var(--row-start)); --end: calc(1 + var(--row-end)); grid-column: calc(var(--room) + 2); grid-row: var(--start)/var(--end); } .section.schedule main > section.schedule .day .session.tag-pause { z-index: 0; grid-column: 2 / -1; } .section.schedule main > section.schedule .day .session.tag-open h4, .section.schedule main > section.schedule .day .session.tag-lunch h4, .section.schedule main > section.schedule .day .session.tag-party h4 { font-size: 2em; } .section.schedule main > section.schedule .day .session.tag-open, .section.schedule main > section.schedule .day .session.tag-lunch, .section.schedule main > section.schedule .day .session.tag-party { grid-column: 2 / -1; z-index: 1; } .section.schedule main > section.schedule .day .session.tag-office-hours { margin: var(--space-3); } .section.schedule main > section.schedule .day .session.tag-office-hours .speakers.multi { padding-top: .125em; flex-wrap: wrap; } .section.schedule main > section.schedule .day .session .start { display: none; } .section.schedule main > section.schedule .day .session .speakers.multi { display: flex; justify-content: space-evenly; } .section.schedule main > section.schedule .day .session .speakers.multi .speaker { position: relative; border-top: none; } .section.schedule main > section.schedule .day .session .speakers.multi .speaker .speaker-img { margin-right: var(--space-1); } .section.schedule main > section.schedule .day .session .speakers.multi .speaker .speaker-name { background: var(--base); z-index: 100; border-radius: var(--space-2); border: thin solid var(--darken-1); box-shadow: 1px 1px var(--space-1) var(--darken-1); padding: var(--space-1); position: absolute; top: 0; right: 0; transform: translateX(50%) translateY(-75%); display: none; } .section.schedule main > section.schedule .day .session .speakers.multi .speaker:focus .speaker-name, .section.schedule main > section.schedule .day .session .speakers.multi .speaker:hover .speaker-name { display: block; } .section.schedule main > section.schedule.horizontal .day { overflow: auto; grid-template-rows: auto repeat(var(--rooms), 1fr); --dayStart: 60 * var(--dayStartH) + var(--dayStartM); --dayEnd: 60 * var(--dayEndH) + var(--dayEndM); grid-template-columns: 7em repeat(calc(var(--end) - 1), var(--base-grid-height, 6em)); grid-auto-flow: dense; } .section.schedule main > section.schedule.horizontal .day .slot { display: block; grid-row: 1 / 2; --start: calc(1 + var(--row-start)); --end: calc(1 + var(--row-end)); grid-column: var(--start)/var(--end); background-color: var(--color-hero); } .section.schedule main > section.schedule.horizontal .day .room { grid-row: calc(var(--room) + 2); grid-column: 1 / -1; justify-content: flex-start; } .section.schedule main > section.schedule.horizontal .day .room h3 { padding: .25em; height: 100%; width: 5.5em; max-width: 5.5em; text-align: center; text-orientation: upright; } .section.schedule main > section.schedule.horizontal .day .session { --start: calc(1 + var(--row-start)); --end: calc(1 + var(--row-end)); grid-row: calc(var(--room) + 2); grid-column: var(--start)/var(--end); } .section.schedule main > section.schedule.horizontal .day .session.tag-open, .section.schedule main > section.schedule.horizontal .day .session.tag-pause, .section.schedule main > section.schedule.horizontal .day .session.tag-lunch, .section.schedule main > section.schedule.horizontal .day .session.tag-party { grid-row: 2 / -1; } .section.schedule main > section.schedule.horizontal .day .session h4 { overflow: hidden; } } @media (max-width: 79.99em) { .section.schedule main > section.schedule { --container-margin: 0em; } } @media (max-width: 59.99em) { .section.schedule main > section.schedule .day .session { --container-margin: 0em; margin: 1rem .5rem 2rem 2.25em; } .section.schedule main > section.schedule .day .session .start { display: block; } @supports (grid-template-columns: repeat(calc(var(--rooms) + 1), 1fr)) { .section.schedule main > section.schedule .day:target { display: flex; flex-direction: column; } .section.schedule main > section.schedule .day .slot { display: none; } .section.schedule main > section.schedule .day .room { align-items: flex-start; margin-top: 1em; } } } @media print { .section.schedule main section.schedule .session { font-size: 24px; } .section.schedule main section.schedule .session.format-quickie { font-size: 18px; } .section.schedule main section.schedule .session a, .section.schedule main section.schedule .session h4 { background: inherit; text-shadow: none; box-shadow: none; } .section.schedule main > section.schedule .day .session .speakers.multi { display: block; } .section.schedule main > section.schedule .day .session .speakers.multi .speaker .speaker-name { position: relative; transform: none; border: none; display: block; box-shadow: none; } } .section.speakers .hero h1 { padding: 2rem var(--container-margin); } .section.speakers ul.speakers { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .section.speakers ul.speakers > li { margin: 1rem; flex: 1 0 300px; max-width: 450px; } .section.speakers a.speaker { padding: var(--space-4); border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); transition: box-shadow var(--animation); border-radius: var(--space-2); display: flex; flex-direction: row; height: 100%; } .section.speakers a.speaker .speaker-img { margin-right: var(--space-4); } .section.speakers a.speaker .speaker-company { margin-top: var(--space-3); text-align: center; } .section.speakers a.speaker .speaker-company img { max-width: 100%; } .section.speakers a.speaker .speaker-company figcaption { display: block; max-width: 200px; } .section.speakers a.speaker:hover, .section.speakers a.speaker:focus { box-shadow: var(--space-2) var(--space-2) var(--space-2) var(--darken-3); } .page.speakers main { display: flex; flex-direction: column; } .page.speakers .hero { display: flex; flex-direction: column; } .page.speakers .hero header, .page.speakers .hero .description { padding: var(--space-4) var(--container-margin); } .page.speakers .hero header { align-self: center; padding-left: 0; display: flex; align-items: center; } .page.speakers .hero header .speaker-img { --size: 6rem; height: var(--size, 6rem); min-width: var(--size, 6rem); border-radius: 100%; background-size: cover; box-shadow: 0 0 var(--space-3) var(--darken-3); margin-right: var(--space-4); } .page.speakers .hero header h1 { margin: 0; padding: 0; } .page.speakers .hero header ul.socials { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 1.25em; justify-content: flex-start; } .page.speakers .hero header ul.socials li { flex: 0 1 auto; padding-right: var(--space-4); } .page.speakers .hero header ul.socials li a.social { width: auto; color: inherit; } .page.speakers .hero header ul.socials li a.social .icon { width: 1em; } .page.speakers .hero .description .talks { margin: 1rem auto; max-width: var(--block-text-max-width); padding-left: 0; list-style: none; } .page.speakers .hero .description .talks .talk { margin-top: 1rem; border: thin solid var(--darken-1); display: inline-flex; padding: var(--space-2); border-radius: var(--space-1); } .page.speakers .hero .description .talks .talk .tags, .page.speakers .hero .description .talks .talk .language { margin-right: 1ch; } .page.speakers .hero .description .talks .talk .tags { white-space: nowrap; align-self: center; } .page.speakers .hero .description .talks .talk.tag- { display: none; } .page.speakers section.speaker { align-self: center; margin: 1rem auto; max-width: var(--block-text-max-width); } .page.speakers section.speaker header { display: flex; align-items: center; justify-content: space-between; } .page.speakers section.speaker .speaker-company { margin: var(--space-3) 0; display: flex; align-items: center; } .page.speakers section.speaker p { line-height: 1.5; font-size: 110%; } @media (max-width: var(--breakpoint-lg)) { .section.blog main > section { margin: 2rem var(--container-margin-mobile); } } .section.blog main h1, .section.blog main .blogs { max-width: var(--theJdrSize); margin: 0 auto; } .section.blog .blogs a.blog-links { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .section.blog .blogs a.blog { text-decoration: none; padding: var(--space-4); border-radius: var(--space-3); display: flex; color: inherit; border-bottom: thin solid var(--darken-1); } @media (max-width: 44.99em) { .section.blog .blogs a.blog { padding: var(--space-2); } } .section.blog .blogs a.blog .img { display: inline-block; background-position: center center; background-size: cover; --size: 16rem; flex: 0 0 var(--size, 16rem); height: var(--size, 16rem); width: var(--size, 16rem); border-radius: var(--space-2); } .section.blog .blogs a.blog .info { flex: 1 1 auto; margin-left: var(--space-4); justify-content: center; } .section.blog .blogs a.blog .info h2 { margin: var(--space-3) 0; } .section.blog .blogs a.blog .info .reading { align-self: flex-end; } .section.blog .blogs a.blog .info .reading::after { content: ' min.'; } .section.blog .blogs a.blog .info .date { align-self: flex-start; color: var(--base-secondary-text); } .section.blog .blogs a.blog .info p { line-height: 1.75; } @media (max-width: 59.99em) { .section.blog .blogs a { grid-template-rows: auto 1fr; grid-template-columns: auto; } .section.blog .blogs a .img { width: 100%; } } @media (max-width: 33.74em) { .section.blog .blogs a.blog { display: block; } .section.blog .blogs a.blog .img { display: none; } } @media (max-width: 59.99em) { .section.blog .blogs a.blog { display: block; } .section.blog .blogs a.blog .img { --size: 8rem; float: left; margin-right: .5em; } } .page.blog .hero .img { padding: var(--container-margin); background-repeat: no-repeat; background-size: cover; background-position: center center; text-shadow: 1px 0 0 var(--lighten-3); min-height: 45vmin; } .page.blog .hero h1 { color: var(--primary); padding-left: 0; padding-right: 0; } .page.blog .hero h1 small { display: block; } .page.blog main h1, .page.blog main .content { max-width: var(--theJdrSize); margin: 0 auto; } .page.blog .content { padding-left: 0; padding-right: 0; margin: 2rem var(--container-margin); } @media (max-width: 44.99em) { .page.blog .content { margin: 1rem; } } .page.blog .content img { max-width: 100%; } .page.blog .content .centered-img { text-align: center; margin: var(--space-3) 0; } .page.blog .content h1, .page.blog .content h2, .page.blog .content h3, .page.blog .content h4, .page.blog .content h5, .page.blog .content h6 { color: var(--primary); font-style: normal; font-weight: 400; } .page.blog .content h1, .page.blog .content h2, .page.blog .content h3 { margin-top: 1.25rem; margin-bottom: 0.625rem; } .page.blog .content h4, .page.blog .content h5, .page.blog .content h6 { margin-top: 0.625rem; margin-bottom: 0.625rem; } .page.blog .content p { text-align: justify; margin-bottom: 1.5rem; line-height: 1.7rem; } .page.blog .content ul { margin-left: 1rem; } .page.blog .content ul li { line-height: 1.7rem; } main > .kids .hero { position: relative; } main > .kids .hero .img { background-repeat: no-repeat; background-size: cover; background-position: center center; text-shadow: 1px 0 0 var(--lighten-3); min-height: 45vmin; } main > .kids .hero h1 { position: absolute; bottom: 0; max-width: var(--theJdrSize); margin: 0 auto; color: var(--primary-txt); padding-left: 0; padding-right: 0; margin: 0; font-size: 3rem; } main > .kids .hero h1 small { display: block; font-size: 0.6em; } @media (max-width: 44.99em) { main > .kids .hero h1 { font-size: 2rem; } } @media (max-width: 33.74em) { main > .kids .hero h1 { font-size: 1.5rem; } } main > .kids .img-container { display: flex; flex-direction: row; } @media (max-width: 44.99em) { main > .kids .img-container { flex-direction: column; align-items: center; } } main > .kids .img-container img { margin: 10px; } main > .kids h1, main > .kids .content { max-width: var(--theJdrSize); margin: 0 auto; } main > .kids .content { padding-left: 0; padding-right: 0; } @media (max-width: 44.99em) { main > .kids .content { margin: 1rem; } } main > .kids .content img { max-width: 100%; } main > .kids .content .centered-img { text-align: center; margin: var(--space-3) 0; } main > .kids .content h2, main > .kids .content h3, main > .kids .content h4, main > .kids .content h5, main > .kids .content h6 { color: var(--primary); font-style: normal; font-weight: 400; } main > .kids .content h2, main > .kids .content h3 { margin-top: 1.25rem; margin-bottom: 0.625rem; } main > .kids .content h4, main > .kids .content h5, main > .kids .content h6 { margin-top: 0.625rem; margin-bottom: 0.625rem; } main > .kids .content p { text-align: justify; margin-bottom: 1.5rem; line-height: 1.7rem; } main > .kids .content ul { margin-left: 1rem; } main > .kids .content ul li { line-height: 1.7rem; } .section.team h2 { margin: var(--space-4) 0; } .section.team ul.members { padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .section.team ul.members > li { flex: 1 1 300px; margin: 2rem; display: flex; } .section.team ul.members > li .photo { --size: 6rem; box-shadow: 0 0 0 var(--space-2) var(--darken-2); min-width: var(--size, 6rem); height: var(--size, 6rem); border-radius: 100%; background-size: cover; margin: var(--space-2); } .section.team ul.members > li .label { display: flex; margin-left: var(--space-3); flex-direction: column; justify-content: center; } .section.team ul.members > li ul.socials { list-style: none; margin: 0; padding: 0; font-size: 1.5em; } .section.team ul.members > li ul.socials li { display: inline-block; opacity: .5; filter: grayscale(1); transition: filter var(--animation); } .section.team ul.members > li ul.socials li:hover, .section.team ul.members > li ul.socials li:focus { opacity: 1; filter: grayscale(0); } .section.team .partners-group ul li { flex-basis: 260px; margin: var(--space-3); height: var(--partner-gold-height); } /* FAQ */ @media (max-width: 44.99em) { .page.faq .hero .description, .page.fr-faq .hero .description { padding: 0; } } .page.faq main h1, .page.faq #TableOfContents, .page.faq main .content, .page.fr-faq main h1, .page.fr-faq #TableOfContents, .page.fr-faq main .content { max-width: var(--theJdrSize); margin: 0 auto; } .page.faq .content h1, .page.faq .content h2, .page.faq .content h3, .page.faq .content h4, .page.faq .content h5, .page.faq .content h6, .page.fr-faq .content h1, .page.fr-faq .content h2, .page.fr-faq .content h3, .page.fr-faq .content h4, .page.fr-faq .content h5, .page.fr-faq .content h6 { color: var(--primary); } .page.faq .content h3, .page.faq .content h4, .page.faq .content h5, .page.faq .content h6, .page.faq .content > ul, .page.faq .content > ol, .page.faq .content > p, .page.fr-faq .content h3, .page.fr-faq .content h4, .page.fr-faq .content h5, .page.fr-faq .content h6, .page.fr-faq .content > ul, .page.fr-faq .content > ol, .page.fr-faq .content > p { margin-left: calc(var(--container-margin) - 2rem); } .page.faq .content li, .page.fr-faq .content li { line-height: 1.5; } @media (max-width: 44.99em) { .page.faq .content ul, .page.fr-faq .content ul { padding-left: 2ch; } } .page.faq .content mark, .page.fr-faq .content mark { font-weight: bold; border-radius: .25em; padding: .125em; } .page.faq .content mark.a, .page.fr-faq .content mark.a { color: var(--fg-mark-a); background-color: var(--bg-mark-a); } .page.faq .content mark.b, .page.fr-faq .content mark.b { color: var(--fg-mark-b); background-color: var(--bg-mark-b); } .page.faq .content mark.t2, .page.fr-faq .content mark.t2 { color: var(--fg-mark-t2); background-color: var(--bg-mark-t2); } @media (max-width: 71.24em) { .page.faq .content, .page.fr-faq .content { padding: 0 .5em; } } .page.code-of-conduct main h1, .page.code-of-conduct #TableOfContents, .page.code-of-conduct main .content { max-width: var(--theJdrSize); margin: 0 auto; } .page.code-of-conduct .content p { margin-left: var(--space-4); text-align: justify; } .page.code-of-conduct .content p::first-letter { margin-left: var(--space-4); } .page.code-of-conduct .content ul { margin-left: 2rem; } .page.code-of-conduct .content ul li { line-height: 1.25; } @media (max-width: 71.24em) { .page.code-of-conduct .content { padding: 0 .5em; } }