You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
681 lines
13 KiB
681 lines
13 KiB
:root {
|
|
|
|
--typography-h1: 4rem;
|
|
--typography-h2: 3rem;
|
|
--typography-h4: 1.75rem;
|
|
--typography-p : 1.25em;
|
|
--typography-s : .8125rem;
|
|
|
|
--typography-h1-leading: 1.2;
|
|
--typography-h2-leading: 1.2;
|
|
--typography-h4-leading: 1.25;
|
|
--typography-p-leading : 1.5;
|
|
|
|
--typography-margin-heading: 1.75rem;
|
|
--typography-margin-body : 1.125rem;
|
|
|
|
--layout-container: 1.25rem;
|
|
--layout-grid : 3.625rem;
|
|
--layout-gutter : 1rem;
|
|
|
|
--gap-cta: .75rem;
|
|
--gap-hero : 2rem;
|
|
--gap-feature: 2rem;
|
|
--gap-card : 1.25rem;
|
|
|
|
--radius-button: 2rem;
|
|
--radius-card: 2em;
|
|
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
|
|
@font-face { font-family: 'Ubuntu Mono'; src: url('UbuntuMono.ttf') format('truetype') }
|
|
|
|
/* ------- Header ------- */
|
|
.sidebar-menu-container{
|
|
position: fixed;
|
|
right: 0em;
|
|
z-index: 10;
|
|
}
|
|
|
|
.nav-menu-icon{
|
|
display: block;
|
|
margin-right: 6em;
|
|
margin-top: 3.5em;
|
|
width: 2em;
|
|
}
|
|
|
|
.nav-btn{
|
|
opacity: 100%;
|
|
transform-origin: 1em 1em;
|
|
transform: rotate(0deg);
|
|
transition: all 100ms ease-in-out;
|
|
}
|
|
|
|
#nav-check{
|
|
display: none;
|
|
}
|
|
|
|
#nav-check:checked ~ .nav > .mobile-sidebar{
|
|
right: 0em;
|
|
}
|
|
|
|
#nav-check:checked ~ .nav > .sidebar-menu-container > .nav-btn{
|
|
transform: rotate(90deg);
|
|
opacity: 50%;
|
|
}
|
|
|
|
|
|
.mobile-sidebar{
|
|
|
|
position:fixed;
|
|
z-index: 4;
|
|
right: -20em;
|
|
height: 100em;
|
|
width: 14em;
|
|
background-color: rgb(16, 23, 34);
|
|
transition: all 300ms ease-in-out;
|
|
box-shadow:1px 0px 0px 0px rgb(123, 123, 123) inset;
|
|
}
|
|
|
|
.mobile-nav-container{
|
|
display: grid;
|
|
grid-template-rows: auto auto;
|
|
gap: 2em;
|
|
margin: 0em;
|
|
margin-top: 8em;
|
|
padding: 2em;
|
|
}
|
|
|
|
.component-button-mobile{
|
|
margin: 0em 0em;
|
|
padding: .7rem 1rem;
|
|
font-family:'Ubuntu Mono';
|
|
font-weight: 300;
|
|
font-size: 1.25em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
border-radius: var(--radius-card);
|
|
background: rgb(35, 40, 52);
|
|
}
|
|
|
|
.component-button-mobile:hover{
|
|
font-weight: 600;
|
|
box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 1) inset;
|
|
background: rgba(145, 164, 184, 0.341);
|
|
}
|
|
|
|
.header-nav{
|
|
background-color: rgb(16, 23, 34);
|
|
width: auto;
|
|
}
|
|
|
|
.header-nav.mobile{
|
|
position:fixed;
|
|
z-index: 4;
|
|
width: 100%;
|
|
box-shadow: 0px 1em 2em 1em rgb(16, 23, 34);
|
|
}
|
|
|
|
|
|
.section-header{
|
|
display:flex;
|
|
align-items:center;
|
|
white-space: nowrap;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 2.5em 20%;
|
|
background-color: rgb(16, 23, 34);
|
|
width: auto;
|
|
}
|
|
|
|
.section-header.mobile{
|
|
padding: 2em 10%;
|
|
margin-left: .5em;
|
|
padding-bottom: 0em;
|
|
}
|
|
|
|
.header-logo{
|
|
margin-right: auto;
|
|
}
|
|
|
|
.header-logo.mobile{
|
|
|
|
}
|
|
|
|
.header-logo:hover > path{
|
|
fill:rgb(72, 85, 99);
|
|
stroke-width: 1px;
|
|
stroke:white;
|
|
|
|
}
|
|
|
|
.nav-buttons{
|
|
margin: .5em .5em;
|
|
padding-bottom: 1.5em;
|
|
|
|
padding-right: 0em;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.component-button {
|
|
margin: 0em 0em;
|
|
padding: .7rem 1rem;
|
|
font-family:'Ubuntu Mono';
|
|
font-weight: 300;
|
|
font-size: 1.25em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: white;
|
|
border-radius: var(0);
|
|
background: rgb(72, 85, 99, .5)
|
|
}
|
|
|
|
.component-button:hover{
|
|
font-weight: 600;
|
|
box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 1) inset;
|
|
background: rgba(72, 85, 99, 0.898)
|
|
}
|
|
|
|
/* ------- Hero Section ------- */
|
|
|
|
|
|
.hero-download{
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 20%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 3em;
|
|
padding: 1.5em 1em;
|
|
}
|
|
|
|
.hero-download.mobile{
|
|
width: 60%;
|
|
padding: 1.5em 1em;
|
|
border-radius: 0em;
|
|
font-size: 1.4em;
|
|
margin-top: 5em;
|
|
}
|
|
|
|
.hero-small{
|
|
display: flex;
|
|
justify-content: center;
|
|
color: rgb(145, 164, 184);
|
|
font-size: 1em;
|
|
text-align: center;
|
|
font-family:'Ubuntu Mono';
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.hero-small.mobile{
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.hero-background{
|
|
background-repeat: repeat-x;
|
|
background-position-x: center;
|
|
background-size: 2500px;
|
|
height: 500px;
|
|
background-image:url("img/graphic_hero_background_gradient.png");
|
|
background-color: rgb(35, 40, 52);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-background.mobile{
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
overflow: hidden;
|
|
background-size: 80em;
|
|
height: initial;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.hero-image{
|
|
display: block;
|
|
height: 350px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
left: 50%;
|
|
margin-left: -400px;
|
|
overflow: hidden;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.hero-image-mobile{
|
|
display: block;
|
|
width: 80%;
|
|
margin-top: 4em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: fit-content;
|
|
overflow: visible;
|
|
|
|
}
|
|
|
|
/* ------- Page & Content Sizing------- */
|
|
|
|
body{
|
|
margin: 0em;
|
|
padding: 0em;
|
|
background-color: rgb(35, 40, 52);
|
|
}
|
|
|
|
.page-content{
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 4em;
|
|
width: 1200px;
|
|
|
|
|
|
}
|
|
|
|
.page-content.mobile{
|
|
display: flexbox;
|
|
width: 100%;
|
|
margin-bottom: 0em;
|
|
|
|
}
|
|
|
|
/* ------- Grids ------- */
|
|
|
|
.grid-container-3x2{
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: auto auto;
|
|
gap: 2em;
|
|
padding: -1em 2em;
|
|
padding-top: 4em;
|
|
}
|
|
|
|
.grid-container-3x2.mobile{
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
gap: 2em;
|
|
padding: 8em 4em;
|
|
padding-top: 4em;
|
|
}
|
|
|
|
.grid-item-3x2{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
color: aliceblue;
|
|
text-align: center;
|
|
padding: 0em 0em;
|
|
}
|
|
|
|
.grid-item-3x2.mobile{
|
|
|
|
}
|
|
|
|
.grid-container-2x1{
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: auto auto;
|
|
gap: 4em;
|
|
padding: -1em 2em;
|
|
}
|
|
|
|
.grid-container-2x1.mobile{
|
|
grid-template-columns: auto;
|
|
gap: 2em;
|
|
padding: 0em 4em;
|
|
padding-bottom: 0em;
|
|
}
|
|
|
|
.grid-item-desc-2x1{
|
|
padding: 0em 0em;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.grid-item-desc.mobile{
|
|
margin: 0em -3em;
|
|
}
|
|
|
|
|
|
.grid-item-desc.mobile > p {
|
|
margin: 0em 3em;
|
|
}
|
|
|
|
|
|
|
|
.grid-item-icon{
|
|
display: inline-block;
|
|
padding-top: 1em;
|
|
max-width: 35%;
|
|
}
|
|
|
|
.grid-item-button{
|
|
position: relative;
|
|
z-index: 0;
|
|
margin-top: -3em;
|
|
padding: 1em 0em;
|
|
border-radius: 0em;
|
|
background-color: rgb(72, 85, 99);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.grid-item-button:hover{
|
|
font-weight: 600;
|
|
box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 1) inset;
|
|
background-color: rgb(72, 85, 99);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.grid-item-button-text{
|
|
padding-top: 1em;
|
|
margin-bottom: 0em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.grid-sub-item{
|
|
padding: 2em;
|
|
position: relative;
|
|
z-index: 1;
|
|
border-radius: 0em;
|
|
background-color: rgb(16, 23, 34)
|
|
}
|
|
|
|
.grid-item-screenshot{
|
|
display: inline-block;
|
|
padding-right: 8em;
|
|
padding-top: 4em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.grid-item-screenshot.mobile{
|
|
display: inline-block;
|
|
padding-right: 0em;
|
|
padding-top: 0em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ------- Dividers ------- */
|
|
|
|
.divider{
|
|
background-image: url(img/graphic_divider_dragonx.png);
|
|
background-repeat: repeat-x;
|
|
background-position-x: center;
|
|
background-position-y: center;
|
|
background-size: 1200px;
|
|
height: 100px;
|
|
background-color: rgb(26, 26, 26);
|
|
}
|
|
|
|
.divider.mobile{
|
|
background-size: 900px;
|
|
height: 80px;
|
|
}
|
|
|
|
|
|
/* ------- Buy HUSH Section ------- */
|
|
|
|
.buttons-single-row{
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
margin-top: 0em;
|
|
|
|
}
|
|
|
|
.buttons-single-row.mobile{
|
|
display: grid;
|
|
margin-bottom: 4em;
|
|
margin-top: 2em;
|
|
|
|
}
|
|
|
|
.buttons-single-row > a{
|
|
|
|
display: block;
|
|
margin: 1em;
|
|
|
|
}
|
|
|
|
|
|
.button-single-column{
|
|
display: block;
|
|
width: 50%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.download-small{
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #878787;
|
|
font-size: .9em;
|
|
text-align: center;
|
|
font-family:'Ubuntu Mono';
|
|
padding-top: 0em;
|
|
margin-top: -2em;
|
|
}
|
|
|
|
.download-small.mobile{
|
|
margin-top: -7.5em;
|
|
margin-bottom: 6em;
|
|
}
|
|
|
|
.button-single-column.mobile{
|
|
display: flexbox;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 1em 1em;
|
|
width: 80%;
|
|
}
|
|
|
|
.button-single-column.mobile.grid-1x2{
|
|
|
|
padding: 1.5em 1em;
|
|
margin-bottom: 6em;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ------- HTML Tag Properties ------- */
|
|
|
|
h1{
|
|
font-family:'Ubuntu Mono';
|
|
text-align: center;
|
|
font-size: var(--typography-h1);
|
|
color: white;
|
|
}
|
|
|
|
h2{
|
|
|
|
font-family:'Ubuntu Mono';
|
|
text-align: center;
|
|
font-size: var(--typography-h2);
|
|
color: white;
|
|
}
|
|
|
|
h2.grid-item-heading-2x2{
|
|
margin: 0%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 2.5em;
|
|
}
|
|
|
|
h2.grid-item-heading-2x2.mobile{
|
|
margin: 0%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 2em;
|
|
padding-bottom: 0em;
|
|
}
|
|
|
|
h2.home-heading{
|
|
margin: 0%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 0em;
|
|
padding-top: 5em;
|
|
}
|
|
|
|
h2.home-heading.mobile{
|
|
padding-top: 4em;
|
|
}
|
|
|
|
h4{
|
|
font-family:'Ubuntu Mono';
|
|
text-align: center;
|
|
font-size: var(--typography-h4);
|
|
color: white;
|
|
}
|
|
|
|
h4.grid-item-title{
|
|
text-align: left;
|
|
}
|
|
|
|
h4.footer-CTA{
|
|
margin: 0em 0em;
|
|
}
|
|
|
|
p{
|
|
font-family:'Ubuntu Mono';
|
|
font-size: var(--typography-p);
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
p.grid-item-desc{
|
|
text-align: left;
|
|
color: rgb(145, 164, 184);
|
|
}
|
|
|
|
p.grid-item-button-text{
|
|
text-align: center;
|
|
color: rgb(248, 255, 255);
|
|
text-decoration: none;
|
|
}
|
|
|
|
p.footer-tagline{
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
p.p-desc.mobile{
|
|
margin: 0em .5em;
|
|
}
|
|
|
|
small.mobile{
|
|
font-size: 1.75m;
|
|
}
|
|
|
|
/* ------- Footer ------- */
|
|
|
|
.section-footer{
|
|
margin-top: 0em;
|
|
}
|
|
|
|
.section-footer.mobile{
|
|
margin: 0em 2em;
|
|
}
|
|
|
|
.footer-copywrite{
|
|
padding: 2em .5rem;
|
|
text-align: center;
|
|
color: white;
|
|
font-family:'Ubuntu Mono';
|
|
}
|
|
|
|
.container-footer-icons{
|
|
padding: .75rem .5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-footer-icons.mobile{
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
|
|
}
|
|
|
|
.footer-icons{
|
|
padding: 1rem .75rem;
|
|
width: 2.75em;
|
|
}
|
|
|
|
.footer-icons:hover{
|
|
filter: invert(100%);
|
|
background-color: rgb(0, 0, 0);
|
|
border-radius: var(--radius-card);
|
|
|
|
}
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
border-bottom: 1px dotted black;
|
|
}
|
|
|
|
.tooltip {
|
|
font-family:'Ubuntu Mono';
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
text-align: center;
|
|
border-radius: var(--radius-card);
|
|
padding: 5px 0;
|
|
/* Position the tooltip */
|
|
position: absolute;
|
|
z-index: 1;
|
|
margin-left: -5.5rem;
|
|
margin-top: -2.75rem;
|
|
|
|
}
|
|
.footer-icons:hover + .tooltip {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ------- Media Queries ------- */
|
|
|
|
|
|
@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 21/9){
|
|
.nav{
|
|
display: none;
|
|
}
|
|
.mobile-nav{
|
|
display: none;
|
|
}
|
|
.mobile{
|
|
display: none;
|
|
}
|
|
.hero-image-mobile{
|
|
display: none;
|
|
}
|
|
.filler{
|
|
display: none;
|
|
}
|
|
.hero-background.mobile{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-aspect-ratio: 4/3){
|
|
|
|
.desktop{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (hover: none) and (pointer: coarse){
|
|
|
|
}
|