/* Theme Name: theme.dokfilm.2025 Theme URI: Author: eric lacaze | lacaze-carnier.com / iuno.co Author URI: Description: Theme für DOKFilm Requires at least: 6.0 Tested up to: 6.8.3 Requires PHP: 8.1 Version: 2025.10 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: theme-dokfilm-2025 Tags: */ @font-face { font-display: swap; font-family: 'jost'; font-style: normal; font-weight: 300; src: url('assets/fonts/jost/jost-v20-latin-300.woff2') format('woff2'), url('assets/fonts/jost/jost-v20-latin-300.woff') format('woff'); } @font-face { font-display: swap; font-family: 'jost'; font-style: normal; font-weight: 400; src: url('assets/fonts/jost/jost-v20-latin-regular.woff2') format('woff2'), url('assets/fonts/jost/jost-v20-latin-regular.woff') format('woff'); } @font-face { font-display: swap; font-family: 'jost'; font-style: normal; font-weight: 600; src: url('assets/fonts/jost/jost-v20-latin-600.woff2') format('woff2'), url('assets/fonts/jost/jost-v20-latin-600.woff') format('woff'); } @font-face { font-display: swap; font-family: 'social'; font-style: normal; font-weight: 400; src: url('assets/fonts/social/dok-social.woff2') format('woff2'); } :root { color-scheme: light; /* color-scheme: light dark; */ --content-width : 992px; --wide-width : 1392px; --ntz-a11y--contrast-min: var(--ntz-a11y--contrast-min-customizer, var(--ntz-a11y--contrast-min-default)); --ntz-a11y--contrast-max: var(--ntz-a11y--contrast-max-customizer, var(--ntz-a11y--contrast-max-default)); --ntz-a11y--contrast-step: var(--ntz-a11y--contrast-step-customizer, var(--ntz-a11y--contrast-step-default)); --headerHeight: 4.5rem; } @media (min-width: 1200px) { html[data-scroll='top'] { --headerHeight: 5.5rem; } } /* html:not(.is-dark-mode) */ html { --iuno-always-black: #000000; --wp--preset--color--iuno-black: #000000; --iuno-black: #000000; --iuno-always-white: #ffffff; --wp--preset--color--iuno-white: #ffffff; --iuno-white: #ffffff; --wp--preset--color--iuno-grey: #bdbcbc; --iuno-grey: var(--wp--preset--color--iuno-grey); --wp--preset--color--iuno-dark-grey: #767676; --iuno-dark-grey: var(--wp--preset--color--iuno-dark-grey); --wp--preset--color--iuno-transparent: rgba(0,0,0,0); --iuno-transparent: var(--wp--preset--color--iuno-transparent); } /* html.is-dark-mode { --iuno-always-black: #000000; --wp--preset--color--iuno-black: #ffffff; --iuno-black: #ffffff; --iuno-always-white: #ffffff; --wp--preset--color--iuno-white: #000000; --iuno-white: #000000; --wp--preset--color--iuno-grey: #bdbcbc; --iuno-grey: var(--wp--preset--color--iuno-grey); --wp--preset--color--iuno-dark-grey: #767676; --iuno-dark-grey: var(--wp--preset--color--iuno-dark-grey); --wp--preset--color--iuno-transparent: rgba(0,0,0,0); --iuno-transparent: var(--wp--preset--color--iuno-transparent); } */ /* structure */ * { font-family: 'jost'; } body { position: relative; background-color: var(--iuno-white); color: var(--iuno-black); width: 100%; z-index: +10; max-width: 100vw; margin: 0; padding: 0; overflow-x: hidden; } header { position: fixed; margin: 0; padding: 0; height: auto; width: 100vw; z-index: 100; } header nav { margin-top: 0.2rem; z-index: 1000 } header nav a { text-transform: uppercase; font-weight: 600; letter-spacing: 1.5px; font-size: 0.9375rem; line-height: 1; } header nav a { color: var(--iuno-black); } header nav .current-menu-item a { color: var(--iuno-dark-grey) !important; } header nav a:hover, header nav a:active { color: var(--iuno-grey) !important; } header nav li.wp-block-navigation-item { padding: 0 0.75rem; } header nav li.wp-block-navigation-item.is-style-iuno-facebook { margin-left: calc((100vw - 143px - 635px - 3.5rem) / 2); } header nav li.wp-block-navigation-item.is-style-iuno-facebook, header nav li.wp-block-navigation-item.is-style-iuno-instagram, header nav li.wp-block-navigation-item.is-style-iuno-linkedin { width: 1.8rem; position: relative; margin-top: -0.25rem; padding: 0; } header nav li.wp-block-navigation-item.is-style-iuno-facebook .wp-block-navigation-item__label, header nav li.wp-block-navigation-item.is-style-iuno-instagram .wp-block-navigation-item__label, header nav li.wp-block-navigation-item.is-style-iuno-linkedin .wp-block-navigation-item__label { font-family: 'social'; text-transform: lowercase; font-size: 1.75rem; font-weight: 400; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open { padding: 1.5rem 1rem; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-close, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-dialog, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-container-content { height: 100%; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__container.is-responsive.wp-block-navigation { width: 100%; align-items: center; justify-content: center } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li a { padding: 0.5rem 0.75rem !important; font-size: 1.15rem; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.is-style-iuno-facebook { margin-left: 0; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.is-style-iuno-facebook, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.is-style-iuno-instagram, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li.wp-block-navigation-item.is-style-iuno-linkedin { width: auto !important; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul { display: grid !important; grid-column-gap: 0; grid-row-gap: 1rem; padding: 5rem 0; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(1), header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(2), header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(3), header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(4) { grid-column-start: 1; grid-column-end: 4; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(4) { margin-bottom: 2rem; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(5) { grid-column-start: 1; grid-column-end: 2; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(6) { grid-column-start: 2; grid-column-end: 3; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li:nth-child(7) { grid-column-start: 3; grid-column-end: 4; } header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li:not(.is-style-iuno-facebook) a.wp-block-navigation-item__content, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li:not(.is-style-iuno-instagram) a.wp-block-navigation-item__content, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open li:not(.is-style-iuno-linkedin) a.wp-block-navigation-item__content, header nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open a.wp-block-navigation-item__content { width: 100%; text-align: center; } /* custom logo */ .is-style-iuno-logo { z-index: 1100; } .is-style-iuno-logo img { margin-left: 0rem; width: auto !important; height: 1.5rem !important; aspect-ratio: auto; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } @media (min-width: 1200px) { html[data-scroll='top'] { .is-style-iuno-logo img { height: 2.5rem !important; } } } main { position: relative; z-index: 10; padding: var(--headerHeight) 0 0 0; transition: padding 0.25s ease-in-out } footer { position: relative; z-index: 20; } footer nav li { height: calc(1rem - 1px); } footer nav a { text-transform: uppercase; font-weight: 600; letter-spacing: 1.5px; font-size: 0.875rem; line-height: 1; } footer nav a:hover, footer nav a:focus { text-decoration: underline; } /* accessibility */ html.no-transitions *::after, html.no-transitions *::before, html.no-transitions * { transition: none !important; scroll-behavior: auto; } html.is-max-contrast *, html.no-transparency * { opacity: 1 !important; } html.has-iuno-access body { color-scheme: light dark; } html.has-iuno-access-scaled-contrast { -webkit-filter: !important; filter: contrast(calc(var(--iuno-access--scale-contrast) * 1%)) saturate(calc(var(--iuno-access--scale-contrast) * 1%)) !important; } html.has-iuno-access-scaled-contrast body * { -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } html:not(.has-iuno-access-reading-mask) #iuno-access-mask-upper, html:not(.has-iuno-access-reading-mask) #iuno-access-mask-lower { display: none !important; visibility: hidden; height: 0 !important; border: none !important; } html.has-iuno-access-reading-mask #iuno-access-mask-upper, html.has-iuno-access-reading-mask #iuno-access-mask-lower { position: fixed !important; width: 100% !important; background: var(--iuno-red); opacity: 0.75; z-index: 9998; } html.has-iuno-access-reading-mask #iuno-access-mask-upper { top: 0px; height: 0px; border-bottom: 0.25rem var(--iuno-red) solid; } html.has-iuno-access-reading-mask #iuno-access-mask-lower { bottom: 0px; height: 0px; border-top: 0.25rem var(--iuno-red) solid; } html.switch-transitions:not(.no-transitions) * { transition: color 300ms ease, background-color 300ms ease, background 300ms ease, text-decoration-color 300ms ease, border-color 300ms ease, outline-color 300ms ease, caret-color 300ms ease, column-rule-color 300ms ease, box-shadow 300ms ease, text-shadow 300ms ease, opacity 300ms ease, filter 300ms ease !important; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (min-width: 600px) { .wp-block-navigation__responsive-container-open { display: block !important; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: block !important! } } @media (min-width: 992px) { .wp-block-navigation__responsive-container-open { display: none !important; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block !important; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none !important; } } /* main menu */ /* header nav .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content, header nav .wp-block-navigation-item__content, header nav .wp-block-navigation-item__label { position: relative; transition: color 0.2s ease-in-out; } .single-kindergaerten header nav .kindergaerten .wp-block-navigation-item__label::before, .single-post header nav .aktuelles .wp-block-navigation-item__label::before, .archive.category header nav .aktuelles .wp-block-navigation-item__label::before, header nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content[aria-current=page] .wp-block-navigation-item__label::before, header nav .wp-block-navigation-submenu .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content[aria-current=page] .wp-block-navigation-item__label::before, header nav .wp-block-navigation-submenu .current-menu-ancestor::before { content: ""; position: absolute; display: block; bottom: -0.25rem; left: 0; width: 100%; height: 3px; border-radius: 0; background-color: var(--iuno-red); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } header nav .wp-block-navigation-submenu.current-menu-item .wp-block-navigation-item__content[aria-current=page]::after, header nav .wp-block-navigation-item.current-menu-item ul:not(.wp-block-navigation-submenu) .wp-block-navigation-item__content::after, header nav .wp-block-navigation-submenu.current-menu-item .wp-block-navigation-item__label::after {} header nav a.current-menu-ancestor:hover::after, .single-kindergaerten header nav .kindergaerten:hover .wp-block-navigation-item__label::after, .single-post header nav .aktuelles:hover .wp-block-navigation-item__label::after, .archive.category header nav .aktuelles:hover .wp-block-navigation-item__label::after, header nav .current-menu-item:hover .wp-block-navigation-item__label::after { } header nav .wp-block-navigation-item ul { left: 0; right: auto; margin: 0 0 0 -1rem; padding: 0 0 0.5rem 0; } header nav .wp-block-navigation-item .wp-block-navigation-item { margin: 0; } header nav .has-modal-open.is-menu-open .wp-block-navigation-item .wp-block-navigation-item { padding: 0.25rem 0; } header nav .show-in-modal { display: none !important; } header nav .has-modal-open.is-menu-open .show-in-modal { display: block !important; } header nav .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container { color: var(--iuno-black); } header nav .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: var(--iuno-white); border: 1px solid var(--iuno-grey); } #menu { z-index: 5; } @media (max-width: 992px) { #menu { width: 100%; z-index: 9999; top: 0; } } #menu .wp-block-navigation li a { color: var(--iuno-black) !important; } #menu .wp-block-navigation li a:hover { color: var(--iuno-red) !important; } #menu .has-modal-open.is-menu-open .wp-block-navigation li.current-menu-item{ color: var(--iuno-red) !important; } #menu .has-modal-open.is-menu-open .wp-block-navigation li { margin: 0 0 0 0; } #menu .has-modal-open.is-menu-open .wp-block-navigation li li { padding: 0 0 0 1rem; margin: 0 0 0.3rem 0; } #menu .wp-block-navigation li.karriere a { color: var(--iuno-dark-blue); } #menu .wp-block-navigation li.karriere a:hover { color: var(--iuno-red); } #menu .wp-block-navigation li.karriere li a { color: var(--iuno-black); } #menu .wp-block-navigation li.karriere li a:hover { color: var(--iuno-red); } #menu .has-modal-open.is-menu-open .wp-block-navigation ul { padding: 0.5rem 1rem 1rem 1rem; } #menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.karriere a { color: var(--iuno-dark-blue); } #menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.karriere ul a { color: var(--iuno-black); } #menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { padding: 0.5rem 1rem 0 1rem; } #menu .wp-block-navigation__responsive-container-open, #menu .wp-block-navigation__responsive-container-close { padding: 0.5rem; background-color: var(--iuno-red); border-radius: 0; color: var(--iuno-always-white); } @media (min-width: 600px) { #menu .wp-block-navigation__responsive-container-close { margin-right: 0.5rem; } } @media (min-width: 992px) { #menu .wp-block-navigation__responsive-container-close { margin-right: 0.1rem; } } #menu .has-modal-open.is-menu-open .wp-block-navigation__container { row-gap: 1rem; padding: 10rem 0rem 2rem 0rem; width: 100%; overflow: visible; list-style: none outside none; --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; } #menu .has-modal-open.is-menu-open { overflow: scroll; z-index: 999; top: 0rem; left: 0; right: 0; bottom: 0; width: 100%; height: auto; animation: none !important; background-color: var(--iuno-grey); } #menu .has-modal-open.is-menu-open .wp-block-navigation__responsive-dialog { margin: 0rem 1rem 1rem 1rem; row-gap: 1rem; } #menu .has-modal-open.is-menu-open .wp-block-navigation__responsive-container-content::after { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 11.5rem; z-index: 5; background-color: var(--iuno-white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0% 100%); } #menu .has-modal-open.is-menu-open .wp-block-navigation__responsive-container-close { top: calc(2.65rem + ((5rem - (24px + 1rem)) / 2)); position: fixed; right: 1rem; display: block; z-index: 10; } @media (min-width: 600px) { #menu .has-modal-open.is-menu-open .wp-block-navigation__responsive-container-close { top: calc(2.65rem + ((6rem - (24px + 1rem)) / 2)); position: fixed; right: 1rem; display: block; z-index: 10; } } @media (max-width: 920px) { #menu .wp-block-navigation__responsive-dialog { margin: 1rem 1rem 1rem 1rem; row-gap: 1rem; } #menu .wp-block-navigation__responsive-container-close { } #menu .wp-block-navigation__responsive-container-content { } #menu .wp-block-navigation__container { row-gap: 1rem; padding: 1rem 2rem; width: 100%; overflow: visible; --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; } } #menu .has-modal-open.is-menu-open ul.wp-block-navigation__container li { font-weight: 700; font-style: normal; position: relative; padding: 0.25rem 1rem; width: 100%; text-transform: none; } #menu .has-modal-open.is-menu-open ul.wp-block-navigation__container li.has-child { } #menu .has-modal-open.is-menu-open ul.wp-block-navigation__container li a span::after { content: '❯'; color: inherit; display: inline-block; font-size: 0.75rem; font-weight: 400; padding-left: 0.5rem; } #menu .has-modal-open.is-menu-open ul.wp-block-navigation__container li.wp-block-navigation-submenu ul a.wp-block-navigation-item__content::after { display: none; } #menu .has-modal-open.is-menu-open a { color: inherit; text-decoration: none; } #menu .has-modal-open.is-menu-open a:hover, #menu .has-modal-open.is-menu-open a:active, #menu .has-modal-open.is-menu-open a:focus { color: var(--iuno-red); } .is-style-iuno-search { position: relative; width: 1.5rem; height: 1.5rem; } .is-style-iuno-search .wp-block-navigation-item__label { width: 0; height: 0; overflow: hidden; display: block; } .is-style-iuno-search a { display: block; width: 1.5rem; height: 1.5rem; } .is-style-iuno-search a::before { content: ''; position: absolute; display: block; top: 0.15rem; left: 0.15rem; width: 0.95rem; height: 0.95rem; border: 0.15rem var(--iuno-black) solid; border-radius: 100%; transition: all 0.2s ease-in-out; } .is-style-iuno-search a:hover::before, .is-style-iuno-search a:active::before, .is-style-iuno-search a:focus::before { border-color: var(--iuno-accent-red); } .is-style-iuno-search a::after { content: ''; position: absolute; display: block; bottom: 0.25rem; right: 0.15rem; width: 0.5rem; height: 0.2rem; background-color: var(--iuno-black); transform: rotate(45deg); transition: all 0.2s ease-in-out; } .is-style-iuno-search a:hover::after, .is-style-iuno-search a:active::after, .is-style-iuno-search a:focus::after { background-color: var(--iuno-accent-red); } */ .is-layout-constrained.alignwide > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--wide-size); } .is-layout-constrained.alignwide > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--wide-size); } #team .is-layout-constrained.alignwide > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 1030px; } /* .has-iuno-dark-grey-background-color * { color: var(--iuno-always-white); } .has-iuno-grey-background-color * { color: var(--iuno-always-black); } .has-iuno-black-background-color * { color: var(--iuno-always-white); } .has-iuno-white-background-color * { color: var(--iuno-always-black); } */ .has-text-color.has-iuno-dark-grey-color { color: var(--iuno-dark-grey) !important; } .has-text-color.has-iuno-grey-color { color: var(--iuno-grey) !important; } .has-text-color.has-iuno-black-color { color: var(--iuno-black) !important; } .has-text-color.has-iuno-white-color { color: var(--iuno-white) !important; } @charset "UTF-8"; :root { --tobii-base-font-size: 1rem; --tobii-transition-duration: 0; --tobii-transition-timing-function: linear; --tobii-zoom-icon-background: #192938f0; --tobii-zoom-icon-color: #fff; --tobii-lightbox-background: #000000d9; --tobii-lightbox-z-index: 1337; --tobii-caption-background: #000c; --tobii-caption-color: #eee; --tobii-counter-background: #0000; --tobii-counter-color: #fff; --tobii-button-background: #0000; --tobii-button-navigation-background: #0000; --tobii-button-color: #fff; --tobii-loader-color: #fff; --tobii-slide-max-height: calc(100vh - 3.125em); --tobii-slide-max-width: 100vw } .tobii-zoom { border: 0; box-shadow: none; display: inline-block; position: relative; text-decoration: none; } .tobii-zoom img { display: block; } .tobii-zoom__icon { align-items: center; background-color: var(--tobii-zoom-icon-background); color: var(--tobii-zoom-icon-color); display: flex; height: 1.78em; justify-content: center; line-height: 1; position: absolute; right: .5em; top: .5em; width: 1.78em; } .tobii-zoom__icon svg { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; stroke: currentColor; height: 1.5em; pointer-events: none; width: 1.5em; } body.tobii-is-open { overflow-y: hidden; } .tobii-image, .tobii-is-open { touch-action: none; } .tobii { background-color: var(--tobii-lightbox-background); bottom: 0; box-sizing: border-box; contain: strict; font-size: var(--tobii-base-font-size); left: 0; line-height: 1.5; overflow: hidden; position: fixed; right: 0; top: 0; z-index: var(--tobii-lightbox-z-index); } .tobii[aria-hidden=true] { display: none; } .tobii *, .tobii :after, .tobii :before { box-sizing: inherit; } .tobii__slider { bottom: 0; left: 0; position: absolute; right: 0; top: 3.125em; will-change: transform; } .tobii__slider[aria-hidden=true] { display: none; } @media screen and (prefers-reduced-motion:no-preference) { .tobii__slider--animate:not(.tobii__slider--is-dragging) { transition-duration: var(--tobii-transition-duration); transition-property: transform; transition-timing-function: var(--tobii-transition-timing-function); } } .tobii__slider--is-draggable [data-type] { cursor: grab; } .tobii__slider--is-dragging [data-type] { cursor: grabbing; } .tobii__slider--is-moving [data-type] { cursor: move; } .tobii__slide { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .tobii__slide:not(.tobii__slide--is-active) { visibility: hidden; } @media screen and (prefers-reduced-motion:no-preference) { .tobii__slide:not(.tobii__slide--is-active) { transition-duration: var(--tobii-transition-duration); transition-property: visibility; transition-timing-function: var(--tobii-transition-timing-function); } } .tobii__slide [data-type] { max-height: 100%; max-width: var(--tobii-slide-max-width); /*overflow: hidden; */ overscroll-behavior: contain; } .tobii__slide iframe, .tobii__slide video { display: block !important; } .tobii__slide figure { margin: 0; position: relative; } .tobii__slide figure>img { display: block; height: auto; max-height: var(--tobii-slide-max-height); max-width: var(--tobii-slide-max-width); width: auto; } .tobii__slide figure>figcaption { background-color: var(--tobii-caption-background); top: 100%; color: var(--tobii-caption-color); font-size: 1.125em; padding: .25rem .5rem; position: absolute; transition: background-color .3s ease-in-out, color .3s ease-in-out; white-space: pre-wrap; width: 100%; } .tobii__slide figure>figcaption:has(button.caption-toggle[aria-expanded=false]) { background-color: initial; color: #0000; } .tobii__slide figure>figcaption:has(button.caption-toggle[aria-expanded=false])>button.caption-toggle:after { opacity: .6; } .tobii__slide figure>figcaption:has(button.caption-toggle[aria-expanded=false])>button.caption-toggle:hover:after { opacity: 1; } .tobii__slide figure>figcaption>button.caption-toggle { background: #0000; border: none; color: #0000; cursor: pointer; height: 100%; left: 0; margin: 0; padding: 0 3em 0 0; position: absolute; top: 0; width: 100%; z-index: 2; } .tobii__slide figure>figcaption>button.caption-toggle:after { align-items: center; background-color: var(--tobii-caption-background); border-radius: 50%; bottom: .25em; color: var(--tobii-caption-color); content: "ⓘ"; display: flex; font-size: medium; font-weight: 700; height: 1.75em; justify-content: center; line-height: 1; opacity: 0; pointer-events: none; position: absolute; right: .25em; transition: opacity .3s ease-in-out; width: 1.75em; } .tobii__slide [data-type=html] { overflow-y: auto; } .tobii__slide [data-type=html] video { cursor: auto; max-height: var(--tobii-slide-max-height); max-width: var(--tobii-slide-max-width); } .tobii__slide [data-type=html] audio { max-width: 100%; } .tobii__slide [data-type=iframe] { -webkit-overflow-scrolling: touch; transform: translate(0); } .tobii__slide [data-type=iframe] iframe { height: var(--tobii-slide-max-height); width: var(--tobii-slide-max-width); } .tobii__btn { appearance: none; background-color: var(--tobii-button-background); border: 1px solid #0000; color: var(--tobii-button-color); cursor: pointer; font: inherit; line-height: 1; margin: 0; opacity: .8; padding: 0; position: absolute; touch-action: manipulation; will-change: opacity; z-index: 1; } .tobii__btn:hover { opacity: 1; } @media screen and (prefers-reduced-motion:no-preference) { .tobii__btn { transition-duration: var(--tobii-transition-duration); transition-property: opacity, transform; transition-timing-function: var(--tobii-transition-timing-function); will-change: opacity, transform; } } .tobii__btn svg { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1; stroke: currentColor; height: 3.75em; pointer-events: none; width: 3.75em; } .tobii__btn--next, .tobii__btn--previous { background-color: var(--tobii-button-navigation-background); border-radius: 0; top: 50%; transform: translateY(-50%); } .tobii__btn--previous { left: 0; } .tobii__btn--next { right: 0; } .tobii__btn--close { height: 2rem; opacity: .8; right: 1rem; top: 1rem; width: 2rem; } .tobii__btn--close svg { height: 100%; transform: scale(1.4); width: 100% } .tobii__btn:disabled, .tobii__btn[aria-hidden=true] { cursor: default; visibility: hidden; } .tobii__counter { background-color: var(--tobii-counter-background); color: var(--tobii-counter-color); font-size: 1rem; left: 1rem; line-height: 1; opacity: 1; position: absolute; top: 1rem; z-index: 1; } .tobii__counter[aria-hidden=true] { display: none; } .tobii__counter p { display: inline; } .tobii__loader { display: inline-block; height: 3rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3rem; } .tobii__loader:before { animation: spin 1s infinite; border: 2px solid #949ba3; border-radius: 100%; border-top: 2px solid var(--tobii-loader-color); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } .tobii__slide .tobii-html { background: #fff; font-size: 1.125em; max-width: 800px; padding: 2rem; } @keyframes spin { to { transform: rotate(1turn) } }