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;

	&:is(.has-items *)::before {
		--size: .5em;
		--on-size: 60%;
		--off-size: 40%;
		--on-color: canvastext;
		--off-color: color-mix(in oklab, canvas, canvastext);
		--circles: radial-gradient(circle closest-side, canvastext 40%, transparent 0) top / var(--size) var(--size) repeat-y;
		content: "";
		position: absolute;
		top: calc(100% + .3em);
		left: calc(50% - var(--size) / 2);
		aspect-ratio: 1 / var(--total-items);
		width: var(--size);
		background:
			linear-gradient(var(--on-color) calc(100% * var(--items-done) / var(--total-items)), transparent 0),
			radial-gradient(circle closest-side, var(--off-color) var(--off-size), transparent 0) top / var(--size) var(--size) repeat-y;
		-webkit-mask: radial-gradient(circle closest-side, white var(--on-size), transparent 0) top / var(--size) var(--size) repeat-y;
	}

	&: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 {
		&:where(.collapse, .collapse > *, .delayed-collapse *) {
			display: none;
		}
	}

	&:not(.current) {
		&:where(.collapse-notcurrent, .collapse-notcurrent > *, .delayed-collapse-notcurrent *) {
			display: none;
		}
	}
}

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

	&[data-step-all$="0"] [data-step="0"],
	&[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"],
	&[data-step-all~="0"] [data-step-from="0"],
	&[data-step-all~="1"] [data-step-from="1"],
	&[data-step-all~="2"] [data-step-from="2"],
	&[data-step-all~="3"] [data-step-from="3"],
	&[data-step-all~="4"] [data-step-from="4"],
	&[data-step-all~="5"] [data-step-from="5"] {
		opacity: 1;
		--step-active: 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;
}