MediaWiki:Common.css - Revision history

TorturedCats at 22:45, 21 July 2026

2026-07-21T22:45:01Z

Show changes

TorturedCats: PremiumRepair2.0NoAnimations

2026-07-21T20:22:30Z

PremiumRepair2.0NoAnimations

Show changes

TorturedCats at 20:11, 21 July 2026

2026-07-21T20:11:37Z

Show changes

TorturedCats: PremiumFinishTest

2026-07-21T19:39:31Z

PremiumFinishTest

Show changes

TorturedCats at 16:49, 21 July 2026

2026-07-21T16:49:58Z

← Older revision		Revision as of 16:49, 21 July 2026
Line 1,304:		Line 1,304:

	/* Split desktop, tablets, landscape */		/* Split desktop, tablets, landscape */
	@media screen and (min-width: 721px) and (max-width: ~~980px~~) {		@media screen and (min-width: 721px) and (max-width: 860px) {

	.sf-main-page .sf-decision-grid,		.sf-main-page .sf-decision-grid,

TorturedCats at 16:38, 21 July 2026

2026-07-21T16:38:27Z

@@ Line 1,301: / Line 1,301: @@
-/* ---------- Main Page Mobile ---------- */
+/* ---------- Main Page Responsive Layout ---------- */
    .sf-main-page .sf-decision-grid,
    .sf-main-page .sf-grid-3,
@@ Line 1,311: / Line 1,344: @@
+   }
- .sf-main-page .sf-hero-main {
+  .sf-main-page .sf-hero-main h1 {
-  aspect-ratio: 16 / 9;
+    font-size: 2.1rem;
-  min-height: 0;
+}
-.sf-main-page .sf-hero-main h1 {
-  font-size: 2.35rem;
+/* Small phones */
 @media screen and (max-width: 520px) {
    .sf-main-page .sf-hero-main {
      padding: 18px 14px;

TorturedCats at 16:09, 21 July 2026

2026-07-21T16:09:17Z

← Older revision		Revision as of 16:09, 21 July 2026
Line 1,342:		Line 1,342:

	/* =========================================================		/* =========================================================
	COMMUNITY LINKS — DISCORD / PATREON		MAIN PAGE COMMUNITY LINKS — DISCORD / PATREON
	========================================================= */		========================================================= */

			.sf-main-page .community-link-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 8px;

	~~.community-link-grid {~~		width: 100%;
	~~display~~: ~~grid~~;		max-width: 100%;
	~~grid-template~~-~~columns: repeat(2, minmax(150px, 1fr));~~		margin: 8px 0 16px;
	~~gap: 8px;~~
	width: 100%;
	margin: 8px 0;
	}		}

			.sf-main-page .community-link {
			display: flex;
			align-items: center;
			justify-content: center;

	~~.community~~-~~link {~~		width: 100%;
	~~display~~: ~~flex~~;		min-width: 0;
	~~align-items~~: ~~center~~;		min-height: 58px;
	~~justify-content~~: ~~center~~;		padding: 8px 16px;
			overflow: hidden;

			border: 0;
			border-radius: 6px;
			box-sizing: border-box;
			}

	~~min~~-~~height: 48px;~~		/* Control MediaWiki-generated wrappers around file images. */
	~~box-sizing: border-box;~~
	~~padding: 0 16px;~~

			.sf-main-page .community-link > p,
			.sf-main-page .community-link > span,
			.sf-main-page .community-link > a,
			.sf-main-page .community-link .mw-file-description {
			display: flex;
			align-items: center;
			justify-content: center;

	~~overflow~~: ~~hidden~~;		width: 100%;
	~~border~~: 0;		min-width: 0;
	~~border-radius~~: ~~6px~~;		margin: 0;
			padding: 0;
	}		}

			.sf-main-page .community-link img,
			.sf-main-page .community-link .mw-file-element {
			display: block;

	~~.community-link img {~~		width: auto;
	~~display: block;~~		height: 30px;
	width: auto;		max-width: 82%;
	height: 30px;		margin: 0 auto;
	max-width: 82%;
	margin: 0 auto;


	~~object-fit: contain;~~
	~~transition: transform 250ms ease;~~
	}


	~~.community~~-~~link~~:~~hover img {~~		object-fit: contain;
	~~transform: scale(1.1)~~;
	}		}

			.sf-main-page .community-link--discord {
	.community-link--discord {		background-color: #5865f2;
	background-color: #~~5865F2~~;
	}		}

			.sf-main-page .community-link--patreon {
	.community-link--patreon {		background-color: #ff424d;
	background-color: #~~FF424D~~;
	}		}


	@media screen and (max-width: 520px) {		@media screen and (max-width: 520px) {
	.community-link-grid {		.sf-main-page .community-link-grid {
	grid-template-columns: 1fr;		grid-template-columns: minmax(0, 1fr);
	}		}
	}		}


	/* ============================================================		/* ============================================================
	MAIN PAGE — COLORED CARD SYSTEM		MAIN PAGE — COLORED CARD SYSTEM

TorturedCats: CinematicHeroFixMobileFix

2026-07-21T15:46:15Z

CinematicHeroFixMobileFix

← Older revision		Revision as of 15:46, 21 July 2026
Line 1,100:		Line 1,100:
	.sf-main-page .sf-hero-main {		.sf-main-page .sf-hero-main {
	position: relative;		position: relative;
			isolation: isolate;

	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 1,105:		Line 1,107:
	align-items: center;		align-items: center;

	min-height: ~~430px~~;		width: 100%;
			aspect-ratio: 16 / 9;
			min-height: 0;

	margin: 0 0 18px;		margin: 0 0 18px;
	padding: 64px 48px;		padding: 64px 48px;
Line 1,133:		Line 1,138:
	background: #0b0d11;		background: #0b0d11;
	}		}


	~~/* MediaWiki may wrap the image in an anchor or span. */~~

	.sf-main-page .sf-hero-art-slot > a,		.sf-main-page .sf-hero-art-slot > a,
Line 1,146:		Line 1,148:
	padding: 0;		padding: 0;
	}		}


	.sf-main-page .sf-hero-art-slot img {		.sf-main-page .sf-hero-art-slot img {
Line 1,157:		Line 1,158:

	object-fit: cover;		object-fit: cover;
	object-position: center ~~52%~~;		object-position: center center;
	}		}


	/* Flat dark overlay for text readability. */		/* Flat dark overlay for text readability. */
Line 1,312:		Line 1,312:


			.sf-main-page .sf-hero-main {
			aspect-ratio: 16 / 9;
			min-height: 0;
			padding: 32px 20px;
			}

			.sf-main-page .sf-hero-main h1 {
			font-size: 2.35rem;
			}
			@media screen and (max-width: 520px) {
	.sf-main-page .sf-hero-main {		.sf-main-page .sf-hero-main {
	~~min-height: 320px;~~		padding: 18px 14px;
	padding: ~~48px 24px~~;
	}		}

			.sf-main-page .sf-hero-main .sf-eyebrow {
			font-size: .66rem;
			}

	.sf-main-page .sf-hero-main h1 {		.sf-main-page .sf-hero-main h1 {
	font-size: 2.~~35rem~~;		margin-bottom: 4px;
			font-size: 1.85rem;
			}

			.sf-main-page .sf-hero-main p {
			margin-bottom: 7px;
			font-size: .9rem;
	}		}
	}		}

	/* =========================================================		/* =========================================================
	COMMUNITY LINKS — DISCORD / PATREON		COMMUNITY LINKS — DISCORD / PATREON

TorturedCats at 15:04, 21 July 2026

2026-07-21T15:04:52Z

← Older revision		Revision as of 15:04, 21 July 2026
Line 1,097:		Line 1,097:

	/* ---------- Cinematic Main Hero ---------- */		/* ---------- Cinematic Main Hero ---------- */


	.sf-main-page .sf-hero-main {		.sf-main-page .sf-hero-main {
	position: relative;		position: relative;
	~~overflow: hidden;~~


	~~min-height: 430px;~~
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 1,110:		Line 1,105:
	align-items: center;		align-items: center;

			min-height: 430px;
			margin: 0 0 18px;
			padding: 64px 48px;
			overflow: hidden;

	~~padding: 64px 48px;~~
	border-radius: 12px;		border-radius: 12px;
	background: #0b0d11;		background: #0b0d11;
			text-align: center;
			}


	~~text-align: center;~~
	}
	}
	/* ---------- Main Page Hero Artwork ---------- */		/* ---------- Main Page Hero Artwork ---------- */


	.sf-main-page .sf-hero-art-slot {		.sf-main-page .sf-hero-art-slot {
Line 1,126:		Line 1,122:
	inset: 0;		inset: 0;
	z-index: 0;		z-index: 0;


	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	margin: 0;		margin: 0;
			padding: 0;
			overflow: hidden;

	border: 0;		border: 0;
	border-radius: inherit;		border-radius: inherit;
			background: #0b0d11;
	}		}


	/* ~~Simple flat readability overlay — no blur~~ or ~~filter~~ */		/* MediaWiki may wrap the image in an anchor or span. */
	~~.sf-main-page .sf-hero-art-slot::after {~~
	~~content: "";~~
	~~position: absolute;~~
	~~inset: 0;~~


	~~background: rgba(5, 8, 12, .48);~~
	~~pointer-events: none;~~
	}


	~~/* Control the MediaWiki image and its wrapper */~~
	.sf-main-page .sf-hero-art-slot > a,		.sf-main-page .sf-hero-art-slot > a,
	.sf-main-page .sf-hero-art-slot > span {		.sf-main-page .sf-hero-art-slot > span,
			.sf-main-page .sf-hero-art-slot .mw-file-element {
	display: block;		display: block;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
			margin: 0;
			padding: 0;
	}		}

Line 1,163:		Line 1,152:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
			max-width: none;
			margin: 0;
			padding: 0;

	object-fit: cover;		object-fit: cover;
Line 1,170:		Line 1,161:


	/* Keep ~~all~~ text above the artwork */		/* Flat dark overlay for text readability. */

			.sf-main-page .sf-hero-art-slot::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;

			background: rgba(5, 8, 12, .48);
			pointer-events: none;
			}


			/* Keep hero text above the artwork and overlay. */

	.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {		.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
	position: relative;		position: relative;
	z-index: 1;		z-index: 2;
	}		}


	.sf-main-page .sf-hero-main h1 {		.sf-main-page .sf-hero-main h1 {
			margin: 0 0 6px;
			color: var(--sf-gold-bright);

			font-size: 3.15rem;
			line-height: 1.08;
			letter-spacing: .08em;
			text-transform: uppercase;

	text-shadow:		text-shadow:
	0 2px 3px rgba(0,0,0,.95),		0 2px 3px rgba(0,0,0,.95),
Line 1,187:		Line 1,200:
	.sf-main-page .sf-hero-main p {		.sf-main-page .sf-hero-main p {
	text-shadow: 0 2px 4px rgba(0,0,0,.95);		text-shadow: 0 2px 4px rgba(0,0,0,.95);
	}
	~~.sf-main-page .sf-hero-main h1 {~~
	~~font-size: 3.15rem;~~
	~~letter-spacing: .08em;~~
	~~text-transform: uppercase;~~
	}		}

Line 1,197:		Line 1,205:
	.sf-main-page .sf-hero-main p {		.sf-main-page .sf-hero-main p {
	max-width: 680px;		max-width: 680px;
			margin: 0 0 12px;
	font-size: 1.08rem;		font-size: 1.08rem;
	}		}
Line 1,248:		Line 1,257:
	margin: 0 0 10px;		margin: 0 0 10px;
	}		}

TorturedCats at 14:49, 21 July 2026

2026-07-21T14:49:48Z

← Older revision		Revision as of 14:49, 21 July 2026
Line 1,097:		Line 1,097:

	/* ---------- Cinematic Main Hero ---------- */		/* ---------- Cinematic Main Hero ---------- */


	.sf-main-page .sf-hero-main {		.sf-main-page .sf-hero-main {
	position: relative;		position: relative;
			overflow: hidden;


			min-height: 430px;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 1,105:		Line 1,110:
	align-items: center;		align-items: center;

	~~min-height: 430px;~~
	~~margin: 0 0 18px;~~
	padding: 64px 48px;		padding: 64px 48px;
	~~overflow: hidden;~~

	border-radius: 12px;		border-radius: 12px;
	background: #0b0d11;		background: #0b0d11;


	text-align: center;		text-align: center;
	}		}
			}
			/* ---------- Main Page Hero Artwork ---------- */


	~~/* ---------- Main Page Hero Artwork ---------- */~~

	.sf-main-page .sf-hero-art-slot {		.sf-main-page .sf-hero-art-slot {
Line 1,122:		Line 1,126:
	inset: 0;		inset: 0;
	z-index: 0;		z-index: 0;


	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	margin: 0;		margin: 0;
	~~padding: 0;~~
	~~overflow: hidden;~~

	border: 0;		border: 0;
	border-radius: inherit;		border-radius: inherit;
	~~background: #0b0d11;~~
	}		}


	/* ~~MediaWiki may wrap the image in an anchor~~ or ~~span.~~ */		/* Simple flat readability overlay — no blur or filter */
			.sf-main-page .sf-hero-art-slot::after {
			content: "";
			position: absolute;
			inset: 0;


			background: rgba(5, 8, 12, .48);
			pointer-events: none;
			}


			/* Control the MediaWiki image and its wrapper */
	.sf-main-page .sf-hero-art-slot > a,		.sf-main-page .sf-hero-art-slot > a,
	.sf-main-page .sf-hero-art-slot > span,		.sf-main-page .sf-hero-art-slot > span {
	~~.sf-main-page .sf-hero-art-slot .mw-file-element~~ {
	display: block;		display: block;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	~~margin: 0;~~
	~~padding: 0;~~
	}		}

Line 1,152:		Line 1,163:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	~~max-width: none;~~
	~~margin: 0;~~
	~~padding: 0;~~

	object-fit: cover;		object-fit: cover;
Line 1,161:		Line 1,170:


	~~/* Flat dark overlay for text readability. */~~		/* Keep all text above the artwork */

	~~.sf-main-page .sf-hero-art-slot::after {~~
	~~content: "";~~
	~~position: absolute;~~
	~~inset: 0;~~
	~~z-index: 1;~~

	~~background: rgba(5, 8, 12, .48);~~
	~~pointer-events: none;~~
	}


	/* Keep ~~hero~~ text above the artwork ~~and overlay.~~ */

	.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {		.sf-main-page .sf-hero-main > :not(.sf-hero-art-slot) {
	position: relative;		position: relative;
	z-index: 2;		z-index: 1;
	}		}


	.sf-main-page .sf-hero-main h1 {		.sf-main-page .sf-hero-main h1 {
	~~margin: 0 0 6px;~~
	~~color: var(--sf-gold-bright);~~

	~~font-size: 3.15rem;~~
	~~line-height: 1.08;~~
	~~letter-spacing: .08em;~~
	~~text-transform: uppercase;~~

	text-shadow:		text-shadow:
	0 2px 3px rgba(0,0,0,.95),		0 2px 3px rgba(0,0,0,.95),
Line 1,200:		Line 1,187:
	.sf-main-page .sf-hero-main p {		.sf-main-page .sf-hero-main p {
	text-shadow: 0 2px 4px rgba(0,0,0,.95);		text-shadow: 0 2px 4px rgba(0,0,0,.95);
			}
			.sf-main-page .sf-hero-main h1 {
			font-size: 3.15rem;
			letter-spacing: .08em;
			text-transform: uppercase;
	}		}

Line 1,205:		Line 1,197:
	.sf-main-page .sf-hero-main p {		.sf-main-page .sf-hero-main p {
	max-width: 680px;		max-width: 680px;
	~~margin: 0 0 12px;~~
	font-size: 1.08rem;		font-size: 1.08rem;
	}		}
Line 1,257:		Line 1,248:
	margin: 0 0 10px;		margin: 0 0 10px;
	}		}