go-http-skeleton/web/static/css/site.screen.css

:root {

	--flowColor:#024;
	--flowBg:#FFF;
	--flowAltBg:#CDF;
	--flowAltBorder:0.0625rem solid #04F;
	--flowAnchorNormal:#04F;
	--flowAnchorVisited:#000;
	--flowAnchorHover:#069;
	--flowMarker:#080;
	
	--flyoutColor:#36C;
	--flyoutBgColor:#ACE;
	
	--chromeColor:#000;
	--chromeBg:var(--flowBg);
	--chromeAnchorNormal:var(--chromeColor);
	--chromeAnchorVisited:var(--chromeColor);
	--chromeAnchorHover:#369;
	
	--mainHeadingColor:#356;
	
	--modalOuterBg:#ACEC;
	--modalOuterShadow:inset 0 0 16em #68A;
	--modalInnerBg:#DEF;
	--modalInputBg:#FFF;
	--modalInputBorder:0.125rem solid #048;
	--modalHeadingBg:#ACE;
	--modalButtonColor:#FFF;
	--modalButtonBg:#048;
	--modalShadow:0.5rem 0.5rem 2rem #0247;
	
	--actionColor:#039;
	--actionBg:#FFF;
	--actionBorder:0.125rem solid var(--actionColor);
	--actionHoverColor:#FFF;
	--actionHoverBg:#05A;
	
	--heroColor:#FFF;
	--heroBgColor:#05A;
	--heroBg:linear-gradient(20deg, #05A, #012);
	--heroTextShadow:
		0 0 2rem #000,
		0.25rem 0.25rem 1rem #000;
	
	--heroActionColor:#FFF;
	--heroActionBg:transparent;
	--heroActionHoverColor:#036;
	--heroActionHoverBg:#8CF;

	--borderColor:#048;
	--standardBorder:0.125rem solid var(--borderColor);
	
	
	--horzPad:clamp(0.5rem, 4vw, 2rem);
	--vertPad:clamp(1rem, min(8vw, 10vh), 4rem);
	--standardPad:var(--vertPad) var(--horzPad);
	--chromePad:1rem var(--horzPad);
	--heroPad:clamp(1rem, 3vh, 6rem) var(--horzPad);
	
}

html,body,div,p,h1,h2,h3,h4,h5,h6,figure,
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
table,tr,td,th,address,blockquote,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

blockquote, q {
	quotes:none;
}

body *, *:after, *:before {
	box-sizing:border-box;
}

legend {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display:block;
}

button, label, summary {
	cursor:pointer;
}

html, body {
	height:100%;
}

body, button, input, table, textarea, select {
	font-size:1rem;
	line-height:1.75;
	font-family:flowtext,sans-serif;
	color:var(--flowColor);
	background:var(--flowBg);
}

a {
	color:var(--flowAnchorNormal);
	transition:color 0.3s, background 0.3s, scale 0.3s;
}

a:visited {
	color:var(--flowAnchorVisited);
}

a:active,
a:focus,
a:hover {
	color:var(--flowAnchorHover);
}

input,
select,
textarea {
	padding:0.25rem 0.5rem;
}

#fauxBody, 
.modal,
.modal > .modalClose {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
	scroll-behavior:smooth;
}

.modal,
#top,
.cards, 
.hasPlate,
#fauxBody > footer {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}

.modalClose span,
.mainMenuOpen span,
#fauxBody > footer h2.optional {
	position:fixed;
	right:999em;
	top:0;
	opacity:0;
}

.modal {
	left:-200vw;
	background:var(--modalOuterBg);
	box-shadow:var(--modalOuterShadow);
	opacity:0;
	transition:left 0s 0.5s, opacity 0.5s;
}

.modal:target {
	left:0;
	opacity:1;
	transition:opacity 0.5s;
}

.modal > div {
	/*
		depth sort over outer .modalClose
	*/
	position:relative;
	/*
		if you don't auto margin, scrolling at small screen heights is messed.
	*/
	margin:auto 1rem;
	overflow:hidden;
	background:var(--modalInnerBg);
	color:var(--flowColor);
	box-shadow:var(--modalShadow);
	border:var(--standardBorder);
	border-radius:1rem;
	scale:0;
	transition:scale 0.5s;
}
	
.modal:target > div {
	scale:1;
}

.modal .modalClose,
#mainMenu .modalClose {
	position:absolute;
	text-decoration:none;
}

.modal:target .modalClose {
	display:block;
}

.modal > * > .modalClose,
#mainMenu > * > .modalClose {
	top:0.5rem;
	right:1rem;
	font-size:2rem;
	line-height:1;
	color:var(--flowColor);
}

.modal > * > .modalClose:focus,
.modal > * > .modalClose:hover {
	scale:1.2;
}

.modal h2 {
	font-size:1.25rem;
	padding:0.5rem 4rem 0.5rem 1rem;
	margin-bottom:1rem;
	background:var(--modalHeadingBg);
	border-bottom:var(--standardBorder);
}

.modal h2 ~ * {
	margin:1rem;
}

#top,
#fauxBody > footer {
	max-width:72rem;
	margin:0 auto;
	padding:var(--chromePad);
	background:var(--chromeBgColor);
	color:var(--chromeColor);
}

#fauxBody > footer {
	z-index:800;
}

#fauxBody > footer p span {
	display:inline-block;
}

#top {
	justify-content:space-between;
	gap:2rem;
	z-index:900;
}

#top a,
#fauxBody > footer a {
	color:var(--chromeAnchorNormal);
	text-decoration:none;
}

#top > a:first-child {
	display:block;
	overflow:hidden;
	flex-grow:0;
	font-size:0.875rem;
	line-height:1.1;
}

h1 {
	font-size:2rem;
	text-transform:uppercase;
	transform-origin:center left;
	letter-spacing:0.125rem;
	scale:1.15 1;
	color:var(--mainHeadingColor);
}

#mainMenu {
	flex-grow:1;
	text-align:right;
}

#mainMenu li {
	list-style:none;
	display:inline;
	margin-right:1.5rem;
}

#mainMenu li a {
	display:inline-block;
	font-size:1.125rem;
}

#mainMenu li a:focus,
#mainMenu li a:hover,
.socialMenu a:focus,
.socialMenu a:hover,
.mainMenuOpen:focus,
.mainMenuOpen:hover {
	color:var(--chromeAnchorHover);
	scale:1.2;
}

#fauxBody > footer > section:first-child {
	width:1%;
	flex-grow:1;
}

.socialMenu {
	list-style:none;
	display:flex;
	gap:1.5rem;
}

.socialMenu a {
	position:relative;
	display:block;
}

.socialMenu a:before {
	font-size:2.5rem;
	transition:color 0.3s, scale 0.3s;
}

.socialMenu a:focus:before,
.socialMenu a:hover:before {
	scale:1.375;
}

.socialMenu a span,
#backToTop span {
	position:absolute;
	font-size:0.875rem;
	color:var(--flyoutColor);
	background:var(--flyoutBgColor);
	border:0.125rem solid var(--flyoutColor);
}

.socialMenu a span {
	bottom:3.5rem;
	right:999em;
	padding:0.25rem 0.75rem;
	white-space:nowrap;
	border-radius:1rem;
	transition:right 0s 0.3s, opacity 0.3s;
	opacity:0;
}

.socialMenu a span:after {
	content:"";
	position:absolute;
	bottom:-0.5625rem;
	right:1rem;
	width:1rem;
	height:1rem;
	background:var(--flyoutBgColor);
	border:solid var(--flyoutColor);
	border-width:0 0.125rem 0.125rem 0;
	rotate:45deg;
}

.socialMenu a:focus span,
.socialMenu a:hover span {
	right:-0.5rem;
	opacity:1;
	transition:opacity 0.3s;
}

main > section:not(.hero),
.hero > div,
.hasCards > header,
.hasPlate {
	max-width:56rem;
	margin:0 auto;
}

main > section:not(.hero),
.hero > div,
.hasPlate {
	padding:var(--standardPad);
}

.hasPlate {
	padding-top:0;
}

main > section:not(.hero) {
	border-bottom:var(--flowAltBorder);
}

main > section > header:not(.hasPlate) {
	text-align:center;
}

main > section:not(.hero):nth-child(odd) {
	background:var(--flowAltBg);
}

main h2 {
	font-size:clamp(1.75rem, 5vw, 2.5rem);
	font-weight:normal;
}

main h2 span {
	display:inline-block; /* soft keep-together */
}

main h3 {
	font-size:clamp(1.25rem, 3vw, 2rem);
	font-weight:normal;
}

main p {
	max-width:40em;
	margin:1em 0;
}

main section > header p {
	font-size:1.125rem;
}

main > section > header:not(.hasPlate) p {
	margin:1em auto;
}

main > section.hasCards {
	max-width:100%;
}

.cards, 
.hasPlate {
	gap:2rem;
}

.cards {
	margin:2rem auto 0;
	align-items:stretch;
	gap:2rem 4rem;
}

#whatIDo .cards {
	max-width:68em;
}

.cards > * {
	flex-grow:1;
	width:1%;
	min-width:min(20rem, 100%);
	max-width:24rem;
}

#whatIDo .cards > * {
	min-width:min(24rem, 100%);
	max-width:40rem;
}

.cards h3[class*="icon_"]:before {
	font-size:4rem;
	margin-right:1rem;
}

.cards li {
	list-style:none;
	position:Relative;
	margin-bottom:0.5rem;
	padding-left:2rem;
}

.cards li:before {
	content:"\F058";
	position:absolute;
	top:0;
	left:0.5rem;
	color:var(--flowMarker);
	font-family:interface;
}

.hasPlate > div {
	flex-grow:1;
	width:1%;
	min-width:min(20rem, 100%);
}

.hasPlate.trailing > figure,
.hasPlate.trailing > picture {
	position:relative;
	flex-grow:0;
	width:30%;
	max-width:16rem;
	text-align:center;
}

figure img,
figure picture {
	width:100%;
	height:auto;
	border-radius:1rem;
}

.note {
	text-align:center;
}

.action {
	display:inline-block;
	position:relative;
	overflow:hidden;
	margin-top:1rem;
	z-index:1;
	text-decoration:none;
	padding:0.75rem 1.5rem;
	color:var(--actionColor);
	background:var(--actionBg);
	border:var(--actionBorder);
	border-radius:0.5em;
	transition:color 0.3s, text-shadow 0.3s;
}

.action:focus,
.action:hover {
	color:var(--actionHoverColor);
	text-shadow:none;
}

.action:after {
	content:"";
	position:absolute;
	z-index:-1;
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	border-radius:0.5rem;
	translate:-50% -50%;
	scale:0;
	opacity:0;
	background:var(--actionHoverBg);
	transition:scale 0.3s, opacity 0.3s;
}

.action:focus:after,
.action:hover:after {
	scale:1.1;
	opacity:1;
}

.hero {
	padding:var(--heroPad);
	background-color:var(--heroBgColor);
	color:var(--heroColor);
	text-shadow:var(--heroTextShadow);
}

.hero .action {
	color:var(--heroActionColor);
	background:var(--heroActionBg);
	border-color:var(--heroActionColor);
}

.hero .action:focus,
.hero .action:hover {
	color:var(--heroActionHoverColor);
}

.hero .action:after {
	background:var(--heroActionHoverBg);
}

.hero header {
	margin-bottom:1.5rem;
	line-height:1.2;
}

.hero header p {
	margin:0.25rem 0 1.5rem;
	font-size:1.5rem;
}

#semanticEasy {
	background-image:url(images/heroBg.avif), var(--heroBg);
	background-position:center;
	background-size:cover;
}

section:not(.hero) h2,
section:not(.hero) h3 {
	color:var(--mainHeadingColor);
}

#testimonials > header {
	margin-bottom:var(--vertPad);
}

#testimonials > .cards {
	max-width:76rem;
	margin:0 auto;
}

#testimonials figcaption {
	font-size:1.25rem;
	font-style:italic;
}

#testimonials figcaption img {
	display:inline-block;
	vertical-align:middle;
	width:4rem;
	height:4rem;
	margin-right:0.5rem;
	border-radius:50%;
}

#backToTop {
	display:block;
	position:sticky;
	z-index:600;
	bottom:0;
	width:2.5rem;
	height:3.5rem;
	padding-bottom:1rem;
	margin:-3.5rem 1rem 0 auto;
	opacity:0.6;
	transition:opacity 0.3s;
}

#backToTop.hide {
	opacity:0;
}

#backToTop:not(.hide):focus,
#backToTop:not(.hide):hover {
	opacity:1;
}

#backToTop span {
	right:1.5rem;
	top:0.25rem;
	padding:0.125rem 2rem 0.125rem 1rem;
	white-space:nowrap;
	border-radius:1.5rem 0 0 1.5rem;
	transform-origin:center right;
	transition:scale 0.3s;
	scale:0 1;
}

#backToTop:focus span,
#backToTop:hover span {
	scale:1;
}

#backToTop:after {
	content:"\F102";
	position:relative;
	display:block;
	width:2.5rem;
	height:2.5rem;
	text-align:center;
	font-family:interface;
	font-size:1.5rem;
	line-height:2rem;
	border:0.25rem solid var(--flyoutColor);
	border-radius:50%;
	background:var(--heroBgColor);
	color:var(--heroColor);
}

@media (max-width:56rem) {

	/*
		It sucks to have to repeat all this,
		one of the few cases where native mixins
		would be a godsend.
	*/

	#mainMenu,
	#mainMenu > .modalClose {
		top:0;
		left:0;
		width:100%;
		height:100%;
		overflow:auto;
		scroll-behavior:smooth;
	}

	#mainMenu {
		position:fixed;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
		left:-200vw;
		background:var(--modalOuterBg);
		box-shadow:var(--modalOuterShadow);
		opacity:0;
		transition:left 0s 0.5s, opacity 0.5s;
	}

	#mainMenu:target {
		left:0;
		opacity:1;
		transition:opacity 0.5s;
	}

	#mainMenu > div {
		position:relative;
		margin:auto 1rem;
		overflow:hidden;
		background:var(--modalInnerBg);
		color:var(--flowColor);
		box-shadow:var(--modalShadow);
		border:var(--standardBorder);
		border-radius:1rem;
		scale:0;
		transition:scale 0.5s;
	}
		
	#mainMenu:target > div {
		scale:1;
	}

	#mainMenu:target .modalClose {
		display:block;
	}

	#mainMenu > * > .modalClose:focus,
	#mainMenu > * > .modalClose:hover {
		scale:1.2;
	}

	#mainMenu > div:before {
		content:attr(data-modalTitle);
		display:block;
		font-size:1.25rem;
		padding:0.5rem 4rem 0.5rem 1rem;
		margin-bottom:1rem;
		background:var(--modalHeadingBg);
		border-bottom:var(--standardBorder);
	}

	#mainMenu ul {
		margin:1rem;
	}
	
	#mainMenu li {
		display:block;
		text-align:center;
		margin:0.5rem 0;
	}
	
	.mainMenuOpen {
		display:block;
		width:2.5rem;
		height:2rem;
		background:linear-gradient(
			#000 20%,
			transparent 20% 40%,
			#000 40% 60%,
			transparent 60% 80%,
			#000 80%
		);
	}
	
} /* max-width:56rem */