inspire.css

/**
	Basic CSS so that the slideshow script functions as a slideshow
	@author Lea Verou
	@version 1.0
 */

:root {
	--transition-duration: .2s;
	--transition-properties: transform, opacity, left, top, right, bottom, background;
	--slide-base-font-size: calc(1rem + 1vw + 1vh);
}

/**
 * Styles
 */

html,
body {
	height: 100%;
}

body {
	margin: 0;
}

.slide {
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	font-size: var(--slide-base-font-size);
	transition: var(--transition-duration);
	transition-property: var(--transition-properties);
	contain: strict;

	/* So that people can override and do things like
	   .slide { display: flex; }
	   without having to specify :not(:target) all the bloody time
	*/
	@media screen {
		&:not(.show-all *):not(.previous):not(:target):not(.next) {
			display: none !important;
		}
	}

	&.previous,
	&.next {
		visibility: hidden;
		overflow: hidden;
	}

	&:is(.show-all *) {
		visibility: visible;
	}

	&:target {
		z-index: 100;
		opacity: 1;
		visibility: visible;
		overflow: auto;
	}

	/* If there's nothing selected, show the first */
	&:first-child {
		z-index: 2;
	}
}

/**
 * Slide numbers
 */
#indicator {
	position: absolute;
	top: .2em;
	right: .5em;
	z-index: 1010;
	font-size: 2vh;
	text-align: center;
	font-weight: bold;

	&:not(:empty)::after {
		counter-reset: total var(--total-slides);
		content: counter(total);
		display: block;
		border-top: 1px solid;
		line-height: 1.2;
		font-weight: 300;
	}
}

/**
 * On-screen navigation
 */
#onscreen-nav {
	z-index: 1010;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1em 1.4em;
	font-size: 150%;
	opacity: 1;
	transition: 1s opacity;

	/* Non-touchscreen styles */
	@media not all and (pointer: coarse) {
		&.hidden {
			display: none;
			opacity: 0;
		}

		&:hover {
			opacity: 1;
		}

		&:not(:hover) {
			button {
				margin-top: -1.5em;
				pointer-events: none;
			}
		}
	}
}

	button.onscreen-nav {
		padding: .2em .5em;
		border: 0;
		border-radius: .3em;
		background: rgba(0,0,0,.5);
		color: white;
		text-shadow: 0 -.05em .05em black;
		text-transform: uppercase;
		cursor: pointer;

		&:hover,
		&:active {
			background: black;
		}
	}



/* Delayed items that are shown incrementally after the slide is */
.delayed,
.delayed-children > * {
	@media screen {
		opacity: 0;
		transition-property: var(--transition-properties);

		&.displayed {
			&:where(.transient, .transient > *, .delayed-transient *) {
				opacity: .3;
			}
		}

		&.current,
		&.displayed {
			opacity: 1;
			transition-duration: var(--transition-duration);
		}
	}

	&.future,
	&.displayed {
		&:where(.collapse, .collapse > *, .delayed-collapse *) {
			display: none;
		}
	}
}

.slide[data-steps] {
	[data-step] {
		opacity: 0;
		transition-property: var(--transition-properties);
		transition-duration: var(--transition-duration);
	}

	&[data-step-all~="1"] [data-step="1"],
	&[data-step-all~="2"] [data-step="2"],
	&[data-step-all~="3"] [data-step="3"],
	&[data-step-all~="4"] [data-step="4"],
	&[data-step-all~="5"] [data-step="5"] {
		opacity: 1;
	}
}

@media print {
	@page {
		size: landscape;
		margin: 0;
	}

	.slide.slide {
		position: relative;
		transform: scale(1); /* for any internal position: fixed elements */
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
	}

	#onscreen-nav,
	#indicator {
		display: none;
	}
}

/* Hide slide content that is to only be shown after the first visit */
.slide[data-visit="1"] [data-visit]:not([data-visit~="1"]) {
	display: none;
}