Dark Financial Times ft.com [papo] by papo

/* ==UserStyle==
@name           Dark Financial Times ft.com [papo]
@namespace      github.com/paponius/userstyles
@version        1.2.0
@description    Updated: 2025-04 [m] Notes and feedback: https://github.com/paponius/userstyles/
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   uso
@advanced color color-primary "Text Primary" white
@advanced color color-secondary "Text Secondary" #ccc
@advanced color color-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1
@advanced color color-link-visited "Visited link color" violet
# up to 24-04: #B62EF0
@advanced dropdown background-base "Background" {
  dft "Tiles" <<<EOT #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  dc  "Dark charcoal" <<<EOT #333 EOT;
  cst "Custom" <<<EOT var(--p-background-base-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-base-custom "Custom Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@advanced dropdown bg-options "Background image type" {
  Tiled "Tiled" <<<EOT
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: left top !important; EOT;
  Fit "Fit Window" <<<EOT
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important; EOT;
}
@advanced dropdown bg-attachment "Background image attachment" {
  s   "Scroll" <<<EOT  EOT;
  f   "Fixed" <<<EOT fixed EOT;
}
@advanced dropdown background "Text Background" {
  dft "Stripes" <<<EOT #000 url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  cst "Custom" <<<EOT var(--p-background-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-custom "Custom Text Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@var range    p-size-primary-text  "Text Primary size"         [18, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [1.6, 0.8, 2, 0.1, ""]
# --- END: common block ---

@advanced dropdown prop-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background: rgba(0, 0, 0, .3) !important; EOT;
  r "Reddish" <<<EOT background-color: rgba(64, 17, 17, .3); !important; EOT;
  a "Transparent" <<<EOT background: unset !important; EOT;
  b "Black" <<<EOT background: black !important; EOT;
  c "as Custom Text Background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}

==/UserStyle== */

/* Do NOT edit this file.
   It will disable updates, instead create another style to override desired rules. Or CSS variables.
   I don't use !important where not required to allow that. You need to check injection order in Stylus.

   Used background-base and bg-options from: https://github.com/StylishThemes
   This preprocessor header and global variables are common part used in most of my styles. Version: 1.4.2 2024-04
 */
@-moz-document domain("ft.com") {
:root {
	--p-color-primary: /*[[color-primary]]*/;
	--p-color-secondary: /*[[color-secondary]]*/;
	--p-color-dark: #6e6e6e;
	--p-color-headline: /*[[color-headline]]*/;
	--p-color-heading: /*[[color-heading]]*/;
	--p-color-deck: #ffdede;
	--p-color-lead: #ffdede;
	--p-color-breadcrumb: hsl(140, 40%, 75%);
	--p-color-byline: #C56E6E;
/* 	--p-color-link: #00ADEE; */
	--p-color-link: #82C1FF;
	--p-color-link-visited: /*[[color-link-visited]]*/;
	--p-color-link-hover: hsl(210, 100%, 85%);
	--p-background-base: /*[[background-base]]*/ /*[[bg-attachment]]*/;
	--p-background: /*[[background]]*/;
	--p-background-base-custom: /*[[background-base-custom]]*/;
	--p-background-custom: /*[[background-custom]]*/;
	--p-size-primary-text: /*[[p-size-primary-text]]*/;
	--p-size-primary-line: /*[[p-size-primary-line]]*/;
}
/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */

/* using site's variables */
/* :root {
	--something: var(--p-background-base);
} */


/* --- masthead --- */
.o-header {
	color: var(--p-color-primary);
	/* --was-color: #33302e; */
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background-color: #fff1e5; */
}
.o-header__row {
/* 	border-bottom: 1px solid #ccc1b7; */
}
.o-header__top-icon-link::before
, .ft-header__top-link--myaccount::before
{
	filter: invert(1);
}
.o-header__top-logo path {
	/* --was-fill="#231F20" */
	fill: var(--p-color-primary);
}
.o-header__drawer-button, .o-header__nav-button, .o-header__top-button {
	background-color: #ccc;
	/* --was-background-color: #262a33; */
	color: black;
	/* --was-color: #fff; */
	/* --was-border: 1px solid transparent; */
}
/* [m] "logo" - text, but only the sticky copy */
.o-header__top-logo.o-header__hide--L {
	filter: invert(.9);
}
/* icon */
.o-header__top-myaccount::before {
	filter: invert(.9);
}



/* - sub-menu - */
.o-header__mega {
	/* --was-box-shadow: 0 1px 2px rgba(77,72,69,.25),0 4px 6px rgba(77,72,69,.1); */
	/* --was-border-top: 1px solid #ccc1b7; */
	background-color: black;
	/* --was-background-color: #fff9f5; */
}

/* - sub-nav: 3rd header, only somewhere - */
.o-header__subnav-link {
	color: var(--p-color-secondary);
	/* --was-color: #33302e; */
}
.o-header__subnav {
	background-color: black;
	/* --was-background-color: #fff9f5; */
	border-bottom: 1px solid #ccc1b7;
}

/* - sub-menu HP - */
.o-header__nav-link {
	color: var(--p-color-secondary);
}
.o-header__nav-link:hover {
	color: var(--p-color-secondary);
	filter: brightness(120%);
	/* --was-color: #33302e; */
}


/* -- hero section -- */
/* - breadcrumb - */
.o-topper--color-paper .o-topper__topic {
	color: var(--p-color-breadcrumb);
	/* --was-color: #000; */
}

/* - headline - */
/* todo this is the orig selector, probably will have to break this apart  */
/* .o-topper--color-paper .o-topper__brand, .o-topper--color-paper .o-topper__columnist-name, .o-topper--color-paper .o-topper__headline,  .o-topper--color-paper .o-topper__summary, .o-topper--color-paper .o-topper__tags { */
.o-topper--color-paper .o-topper__brand, .o-topper--color-paper .o-topper__columnist-name, .o-topper--color-paper .o-topper__headline, .o-topper--color-paper .o-topper__tags {
	color: var(--p-color-headline);
	/* --was-color: #000; */
}
.o-topper--color-paper .o-topper__content {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	padding-left: 5px;
	padding-right: 5px;
	/* --was-background-color: #fff1e5; */
}
.o-topper--color-paper .o-topper__background {
	background-color: unset;
	/* --was-background-color: #fff1e5; */
}

/* - deck - dek - */
.o-topper--color-paper .o-topper__summary {
	color: var(--p-color-deck);
}
/* - lead - lede - perex - */
.o-topper--color-paper .o-topper__standfirst {
	color: var(--p-color-lead);
	/* --was-color: #000; */
}

/* - byline - */
.n-content-tag--author {
	color: var(--p-color-byline);
	/* --was-color: #33302e; */
}
.article-info__timestamp {
	color: var(--p-color-byline);
	/* --was-color: #66605c; */
}

/* -- hero: opinion -- */
/* https://www.ft.com/content/f313eea9-bd4f-4866-8123-a850938163be#:~:text=A%20trade%20system%20where%20we%20face%20higher%20tariffs%2C%20steeper%20non%2Dtariff%20barriers%20and%20no%20viable%20path%20to%20resolution%20is%20nothing%20more%20than%20an%20%E2%80%9Chonour%20system%E2%80%9D%20in%20a%20world%20with%20no%20honour%20among%20cheaters.%20That%E2%80%99s%20why%20America%20must%20%E2%80%94%20and%20now%20is%20%E2%80%94%20defending%20itself */
.o-topper--color-sky {
	/* orig: parent and child - double: .o-topper--color-sky .o-topper__background, .o-topper--color-sky .o-topper__content { */
	.o-topper__background {
	  background-color: #cce6ff;
	  background-color: hsla(209, 100%, 10%, .2);
	}
	.o-topper__content {
		background: unset;
	}
	/* - headline - */
	/* orig: .o-topper--color-sky .o-topper__brand, .o-topper--color-sky .o-topper__columnist-name, .o-topper--color-sky .o-topper__headline, .o-topper--color-sky .o-topper__standfirst, .o-topper--color-sky .o-topper__summary, .o-topper--color-sky .o-topper__tags, .o-topper--color-sky .o-topper__topic { */
	.o-topper__headline {
		color: var(--p-color-headline);
	}
	.o-topper__standfirst {
		color: var(--p-color-lead);
	}
	.o-topper__columnist-name {
		color: var(--p-color-byline);
		&:hover {
			color: var(--p-color-byline);
			filter: brightness(120%);
		}
	}
	.o-topper__tags , .o-topper__topic {
		color: var(--p-color-breadcrumb);
		
	}
	.o-topper__topic:hover {
		color: var(--p-color-breadcrumb);
		filter: brightness(120%);
	}
}


/* -- article -- */
.n-content-body {
	color: var(--p-color-primary);
	/* --was-color: var(--_o-editorial-typography-body-color,#33302e); */
	font-size: var(--p-size-primary-text);
	/* --was-font-size: 18px; */
	line-height: var(--p-size-primary-line);
	/* --was-line-height: 1.6; */
	/* orig 20px for web, 18 for mobile, here will leave one common */
/* 	@media (min-width: 76.25em) { */
		> .n-content-blockquote, > p {
			font-size: var(--p-size-primary-text);
			line-height: var(--p-size-primary-line);
			/* --was-font-...