source ⟩ hypertext ⟩ public ⟩ ratings ⟩ ratings.css

:root {
	--background: #090111;
	--text: #fffbf0;
	--accent: #fffbf0;
}

body {
	font-family: var(--sans-serif);
}

h1 {
	margin-block-end: 0;
	font-size: 2.25rem;
}

#header-subtitle {
	margin-block-end: 1rem;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}

.glowy-asterisk, a {
	animation-name: asterisk-glow;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

ul#rating-list {
	display: block;

	padding-inline-start: 0;
}

li.rating {
	--accent: #7c00cf;
	display: grid;
	grid-template-areas: "number name" "number description";
	grid-template-columns: 5rem 1fr;

	border: 1px solid var(--accent);
	border-radius: 1ch;

	&:not(:last-child) {
		margin-block-end: 1rem;
	}

	& h2.rating-number {
		grid-area: number;
		
		margin-block: 0;
		padding: 0.5rem;

		border-inline-end: 1px dotted var(--accent);

		& .rating-bullet {
			display: flex;
			align-items: center;
			justify-content: center;

			inline-size: 100%;
			aspect-ratio: 1 / 1;

			color: var(--text);
			font-size: 2.5rem;

			background-color: var(--accent);
			border-radius: 50%;
		}
	}

	& .rating-name {
		padding-block: 0.25ch;
		padding-inline: 1ch;

		color: var(--text);
		font-weight: bold;
		letter-spacing: var(--caps-spacing);
		text-transform: uppercase;

		background-color: var(--accent);
		border-start-end-radius: calc(1ch - 1px);
	}

	& .rating-description {
		padding-inline: 1ch;

		background-color: color-mix(in srgb, var(--accent) 12.5%, transparent);

		& b {
			color: oklch(from var(--accent) calc(l + 0.2) c h)
		}
	}
}

#eleven-ott { --accent: #cf00be; }
#ten-ott { --accent: #7c00cf; }
#nine-ott { --accent: #3b00df; }
#eight-ott { --accent: #00849b; }
#seven-ott { --accent: #007a2f; }
#six-ott { --accent: #55a000; }
#five-ott { --accent: #aa8b00; }
#four-ott { --accent: #cf7c00; }
#three-ott { --accent: #cf4200; }
#two-ott { --accent: #db0700; }
#one-ott { --accent: #790014; }
#zero-ott { --accent: #130002; background-color: black; }

#alephnull-ott {
	--accent: #888;
	background-color: black;

	position: relative;
	z-index: 3;

	&::after {
		position: absolute;
		inset-block-start: -1px;
		inset-inline-start: -1px;
		inline-size: calc(100% + 2px);
		block-size: calc(100% + 2px);
		z-index: 4;

		background-image: linear-gradient(to right, #0004, #0004), url("/ratings/alephnullbg.png");
		background-size: cover;
		mix-blend-mode: overlay;
		content: " ";
		border-radius: 1ch;
	}
}

@keyframes asterisk-glow {
	0% {
		color: oklch(0.75 0.18 0);
	}
	25% {
		color: oklch(0.75 0.18 90);
	}
	50% {
		color: oklch(0.75 0.18 180);
	}
	75% {
		color: oklch(0.75 0.18 270);
	}
	100% {
		color: oklch(0.75 0.18 360);
	}
  }