764 lines
12 KiB
CSS
764 lines
12 KiB
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 */
|