MOBILE by vwlam

/* ==UserStyle==
@name         MOBILE
@version      20220328.20.55
@namespace    userstyles.world/user/vwlam
@description  condense for mobile
@author       vwlam
@license      No License
==/UserStyle== */

@-moz-document domain("rfa.org") {
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,700;0,900;1,700;1,900&family=Nunito:wght@200;300&display=swap');
:root {
	/*fonts*/
	--headline-font: 'Chivo', sans-serif;
	--text-font: 'Nunito', sans-serif;

	/*defining all fucking headlines*/
	--h1: 2.44em/1.14em 'Chivo';
	--h2: 1.94em/1.43em 'Chivo';
	--h3: 1.34em/1.79em 'Chivo';
	--h4: 1.28em/1.09em 'Chivo';
	--small: 300 0.752/1.3em 'Chivo';
	/*colors*/
	--green: #35837f;
	--bright-green: #25c196;
	--bcg-black: #171414;
	--black-black: #222224;
	--white: #f4f5f9;

	/*widths*/
	--wide: 1720px;

	/*dumb ass borders cuz hr totally doesn't exist*/
	--border: 0.2px solid #d5d5d569;
	--border-lite: .1px solid #ffffff21
}


/*unjankify mobile layout*/
@media screen and (max-width: 920px) {
/*actually define font shit and auto calc line height*/
html {
	font: 18px/1.3 var(--text-font);
}
body {
	background-color: var(--bcg-black) !important;
	font: 18px/1.3 var(--text-font);
}

p,
li,
h1,
#headerimg,
h2 {
	line-height: inherit !important;
}

h1,
h2,
h3,
h4,
h5,
.promoTitle.firstSidePromo,
.promoTitle,
.bigger_lead_top .service_widetop_two_featured .two_featured h2 {
	font-family: var(--headline-font)!important;
	font-weight: 900!important;
	letter-spacing: .5px!important;
	line-height: 1.15!important;
}
.most_read_only ul,
#frontsidebar .relatedstories ul,
p {
	font-family: var(--text-font)!important;
}


/*stop blinding my eyes*/
#pagewidth,
#header,
#portal-top,
.other_stories_three,
#header .header_top,
.mosaic-grid-row.newRFAbelow.bigger_lead_top.promo_slider_mobile,
.newRFAbelow {
	background-color: inherit;
}


body,
h2,
h2 a,
h3,
h4,
a,
p,
.sectiontitle,
.mosaic-tile-content p a,
.most_read_only a,
#footerlinks a,
.rfa_copyright,
div.nav-title a,
ul.nav-items a,
#zoomattribute,
.zoomattribute,
#storycontent h1,
.lead_image_caption,
#storytext figure,
#text,
strong,
.audiojs .time em,
#story_date {
	color: var(--white) !important;
}
a:hover {
	color: var(--bright-green) !important;
}

body {
	font: 16px/1.2 'Chivo';
}


/*nav bar*/
#header {
	padding: 30px 60px;
	max-width: var(--wide);
	margin: 0 auto;
}

header#portal-top {
	width: 100vw;
}
h3#portal-logo {
	max-width: var(--wide);
	padding: 0;
	height: 50%
}
#portal-logo img {
	filter: invert(61%) sepia(98%) saturate(383%) hue-rotate(111deg) brightness(90%) contrast(77%);
}
.icon-bar {
	background: var(--white);
}
.container {
	width: 100%;
	max-width: var(--wide);
	padding: 0;
	margin: 0;
	align-items: center;
}
.header_top .container #language-menu img {
	filter: invert(70%) brightness(150%)
}
#header .navigation {
	background-color: var(--bcg-black);
	height: 100vh;
	width: 25vw;
	right: 0;
	position: absolute;
	padding: 40px;
	font-size: 1em;
	font-family: var(--text-font);
	z-index: -10;
	box-shadow: -10px 0px 100px 20px #0b0b0b;
}
/*drop menu*/
#header .navigation {
	left: 0;
	top: 60px;
	right: initial;
	width: 75vw;
	overflow: scroll;
	padding: 1vw 4vw;
	height: calc(100vh - 60px);
	display: flex!important;
	flex-direction: column-reverse;
}
div.navcol {
	padding: 8px 0;
}
#language-menu {
	border-top: var(--border-lite);
	position: relative;
	bottom: 0;
	margin-top: 5vw;
	padding-top: 3vw;
}
#language-menu.rfa_mobile ul {
	padding: 0;
	margin: 0;
}
#language-menu.rfa_mobile img {
	filter: brightness(180%) invert(80%)
}
#language-menu ul {
	margin: 10px 0;
}
#language-menu li {
	margin-right: 0;
}

div.navcol {
	padding: 5px 0;
}
ul.nav-items {
	margin-top: .5em;
}
ul.nav-items li {
	margin-left: 1em;
}
div.navcol {
	margin-top: 0;
}

div#header_navigation.nav_shown {
	display: block;
	animation-name: inherit;
}
div#header_navigation.nav_shown,
div#header_navigation.nav_hidden {
	animation-duration: .3s;
	transition: ease-in-out;
}
#header .navigation .navrow {
	flex-direction: column;
	margin: 0;
	align-items: flex-start;
	margin-top: 1rem;
}

div.nav-title {
	border-bottom: 4px solid var(--bright-green);
	padding: 0;
	width: max-content;
	margin-bottom: -2px;
}


/*search bar*/
input[type="text"],
input[type="password"],
textarea,
select {
	background-color: #17141400;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	height: auto;
}
#header input.searchButton {
	background-color: #17141400;
	background-image: url("/++plone++rfa-resources/img/search-icon.svg");
	margin-top: 0;
	padding: 4px 10px
}

#headersearch {
	width: max-content;
}

.searchPage {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}


/*layout*/
/*clean*/
.big_other .featured_image img,
.halfbelow .single_column_teaser .teaserimg,
.bigger_lead_top .single_column_teaser,
.other_stories_three .middle_others .middle_column_noteaser .teaserimg,
.below_other_stories,
.mosaic-width-full,
.below_other_stories .featured_image {
	float: none;
}
#footerlinks,
.header_top,
div#header_search.search_init,
#header .header_top,
.podcasticons,
.podbyline h5,
#searchGadget_form #searchGadget,
div#header_navigation,
.storytoptoolbutton img,
#viewlet-below-content,
.slick-next.slick-arrow,
.slick-cloned,
.slick-dots,
br {
	display: none!important;
}
.small_lead_top .service_widetop_two_featured .two_featured p {
	display: block;
	margin-top: 4px;
}

.other_stories_three .small_others,
.bigger_lead_top .service_widetop_two_featured .two_featured:first-child,
.other_stories_three .below_other_stories.big_other,
.small_others .small_column_noteaser,
.most_read_only ul,
.bigger_lead_top .service_widetop_two_featured,
.halfbelow.bigger_lead_top .other_stories_three .single_column_teaser.below_other_stories #more_news_single_column,
.other_stories_three,
.header_top .container .search_container,
.bigger_lead_top #more_news_single_column,
p,
#headerimg,
#storytoptools,
#topstorywidefull p,
#topstorywidefull .sectiontitle,
.small_lead_top .mosaic-width-quarter #more_news_single_column,
.small_lead_top .service_widetop_two_featured,
.bigger_lead_top .service_widetop_two_featured,
.small_lead_top.halfbelow .single_column_teaser:first-child,
.mosaic-width-third .mosaic-tile:not(:first-child),
#frontchannel,
.promoTitle.mainPromo, .promoTitle.firstSidePromo, .promoTitle {
	margin: 0!important;
}
#frontsidebar,
#frontsidebar .relatedstories,
#storytext .image-inline,
#storytext .image-responsive,
.mosaic-width-third,
.other_stories_three,
.small_lead_top .single_column_teaser:first-child,
.single_column_teaser .sectiontitle {
	margin: 0!important;
	padding: 0!important;
}

.small_others .small_column_noteaser,
.other_stories_three .below_other_stories.big_other,
.other_stories_three .middle_others .middle_column_noteaser,
.other_stories_three .middle_others .middle_column_noteaser:last-child,
.other_stories_three .middle_others .middle_other_stories,
.small_others .small_column_noteaser:last-child,
.small_lead_top .service_widetop_two_featured .two_featured:first-child,
.mosaic-width-half,
.two_featured,
#frontsidebar .relatedstories li,
.slick-slide,
.other_stories_three .single_column_teaser.below_other_stories #more_news_single_column .single_column_teaser,
div.mosaic-tile-content div#more_news_single_column.clear div.single_column_teaser,
.mosaic-grid-cell.mosaic-width-quarter.mosaic-position-leftmost.newRFAbelow p.promo,
#frontchannel {
	border-bottom: var(--border-lite)
}

#more_news_single_column.small_lead_top .single_column_teaser:first-child,
.other_stories_three .middle_others .middle_other_stories,
.mosaic-width-half,
.other_stories_three .below_other_stories.big_other,
.small_others .small_column_noteaser,
.bigger_lead_top .service_widetop_two_featured .two_featured,
.slick-slide,
.other_stories_three .single_column_teaser.below_other_stories #more_news_single_column .single_column_teaser,
.mosaic-tile.mosaic-rfasite\.basetheme\.tiles\.other_stories_parted\/partone-tile.mosaic-read-only-tile .mosaic-tile-content #more_news_single_column .single_column_teaser,
div.mosaic-tile-content div#more_news_single_column.clear div.single_column_teaser {
	padding: 2em 0!important;

}

.mobilecontainer {
	margin: .7em;
}

.mosaic-grid-row.small_lead_top.small_display {
	display: block;
}
.small_lead_top .single_column_teaser,
.small_others .small_column_noteaser,
.other_stories_three .middle_others .middle_other_stories,
.other_stories_three .below_other_stories.big_other,
.other_stories_three .middle_others .middle_column_noteaser {
	display: flex;
	flex-wrap: wrap;
}
.mosaic-grid-row.small_lead_top.small_display {
	flex-direction: row;
}

.mosaic-width-quarter.newRFAbelow {
	width: 100%;
	padding: 0;
	flex: inherit;
}
.mosaic-width-quarter {
	order: 2;
}
.mosaic-grid-row.small_lead_top.small_display {
	max-height: 100%;
}


.bigger_lead_top #more_news_single_column {
	flex-direction: column;
}

.other_stories_three .middle_others .middle_column_noteaser {
	flex-direction: row!important;
}
.halfbelow.bigger_lead_top .other_stories_three .single_column_teaser.below_other_stories #more_news_single_column .single_column_teaser {
	display: flex;
	flex-wrap: nowrap;
}
.other_stories_three .middle_others .middle_column_noteaser .teaserimg,
.below_other_stories .featured_image {
	width: 24%;
}

.big_other .featured_image img {
	margin-right: 0!important;
	margin-left: 0!important;
}

.big_other .featured_image a img .middle_column_noteaser .teaserimg a img,
.big_other .featured_image img,
.small_others .single_column_noteaser below_other_stories .small_column_noteaser .featured_image a img,
.middle_column_noteaser .teaserimg a img,
.small_others .single_column_noteaser.below_other_stories .small_column_noteaser .featured_image a img {
	float: none;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	height: 100%!important;
	border-radius: 6px !important;
	margin-bottom: 0 !important;
	min-height: 86px;
}

.other_stories_three .big_other.below_other_...