Template:Opening Quote/styles.css

/* ================================================
   Opening Quote — TemplateStyles
   Theming via Citizen skin CSS custom properties.
   Requires Extension:TemplateStylesExtender to use
   CSS variables from the Citizen skin.
   ================================================ */

.opening-quote {
	border-left: 4px solid var(--color-progressive, #36c);
	margin: 0 0 1em 0;
	padding: 0.75em 1em;
	background-color: var(--color-surface-1);
	color: var(--color-base);
	overflow: hidden;
}

.opening-quote .pull-quote__image {
	max-width: 120px;
	margin-right: 1em;
}

.opening-quote .pull-quote__image img {
	width: 100%;
	height: auto;
	display: block;
}

.opening-quote .pull-quote__text {
	font-size: 1.05em;
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 0.5em;
	color: var(--color-emphasized);
}

.opening-quote cite {
	font-size: 0.9em;
	font-style: normal;
	color: var(--color-subtle);
}

/* ================================================
   Dark mode overrides
   Citizen automatically adjusts its CSS variables
   per theme, so these blocks are only needed if you
   want to deviate from the skin's defaults.
   ================================================ */

/* Dark mode */
.skin-theme-clientpref-night .opening-quote {
	border-left-color: var(--color-progressive, #6da9ff);
}

/* Pure black mode */
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 .opening-quote {
	background-color: #000;
}

/* Automatic (follows OS preference) */
@media ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os .opening-quote {
		border-left-color: var(--color-progressive, #6da9ff);
	}
}