kgpz_web/views/transform/site.css

@import "tailwindcss";

@theme {
	--font-script: Rancho, ui-serif;
	--font-sans: "Source Sans 3", "Merriweather Sans", ui-sans-serif;
	--font-serif: "Merriweather", ui-serif;

	/* Custom Black Colors */
	--color-abyss: #0b1215;
	--color-shadow: #0f171f;
	--color-eclipse: #0b0b0b;
	--color-storm: #020c1a;
	--color-deep: #011122;
	--color-obsidian: #161616;
}
/* Alternative approach using pseudo-element for better browser support */
body::before {
	content: "";
	position: fixed;
	/* Extend beyond viewport to ensure full coverage after transformations */
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	z-index: -1;

	/* Your WebP pattern */
	background-image: url("skyscraper.webp");
	background-size: 100px 100px;
	background-repeat: repeat;
	background-position: center;

	/* Apply transformations here */
	transform: rotate(15deg) skew(25deg) scale(4);
	opacity: 0.4;
}

/* Page-specific backdrop variations */
body.page-akteure::before {
	transform: rotate(-35deg) skew(-40deg) scale(4.2);
}

body.page-ausgabe::before {
	transform: rotate(40deg) skew(15deg) scale(4.5);
}

body.page-search::before {
	transform: rotate(0deg) skew(45deg) scale(3.8);
}

body.page-ort::before {
	transform: rotate(60deg) skew(-30deg) scale(4.8);
}

body.page-kategorie::before {
	transform: rotate(-25deg) skew(50deg) scale(4.1);
}

body.page-piece::before {
	transform: rotate(45deg) skew(-25deg) scale(4.3);
}

body.page-edition::before {
	transform: rotate(-50deg) skew(35deg) scale(3.9);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}
}

@utility font-variant-small-caps {
	font-variant-caps: small-caps;
}

@layer components {
	html {
		font-size: 18px;
	}

	body {
		@apply bg-slate-50;
	}

	h1,
	h2,
	h3,
	h4 {
		@apply font-serif font-bold;
	}

	a {
		@apply hyphens-none underline decoration-dotted hover:decoration-solid text-slate-700 hover:text-slate-900;
	}

	ul {
		@apply my-2;
	}

	li {
		@apply ml-14 list-disc;
	}

	a[aria-current="page"] {
		@apply text-red-500!;
	}

	main {
		@apply grow shrink-0;
	}

	/* =============================
	   NEWSPAPER LAYOUT STYLES
	   ============================= */

	/* Essential styles that cannot be represented in Tailwind */
	.newspaper-page-container {
		margin-bottom: 2rem;
	}

	/* Page header backdrop blur */
	.newspaper-page-container .absolute .page-indicator {
		pointer-events: auto;
		backdrop-filter: blur(2px);
	}

	/* Responsive header scaling */
	@media (max-width: 768px) {
		.newspaper-page-container .absolute {
			transform: scale(0.9);
		}
	}

	/* Image size constraints with Tailwind utilities */
	.single-page {
		display: flex;
		justify-content: center;
	}

	.single-page .newspaper-page-image {
		max-width: min(400px, 100%);
		width: 100%;
		height: auto;
	}

	/* Larger screens */
	@media (min-width: 1280px) {
		.single-page .newspaper-page-image {
			max-width: min(600px, 100%);
		}
	}

	/* Very wide screens */
	@media (min-width: 1536px) {
		.single-page .newspaper-page-image {
			max-width: min(700px, 100%);
		}
	}

	/* Mobile constraints */
	@media (max-width: 640px) {
		.single-page .newspaper-page-image {
			max-width: 100%;
		}
	}

	/* Navigation button hover styles */
	button#prevPageBtn:hover:not([style*="display: none"]),
	button#nextPageBtn:hover,
	button#beilageBtn:hover {
		background-color: rgb(209 213 219) !important; /* gray-300 */
		color: rgb(55 65 81) !important; /* gray-700 */
	}

	button#beilageBtn:hover {
		background-color: rgb(254 215 170) !important; /* amber-200 */
		color: rgb(146 64 14) !important; /* amber-800 */
	}

	/* Scrollspy hover effect - only when not active */
	.scrollspy-hover:hover:not(.font-medium) {
		background-color: rgb(254 242 242); /* red-50 */
	}
}