Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/****************
***** FONT ******
***************/
body {
font-family: proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
font-weight: 300;
line-height: 1.5;
color: #83ACD8 !important;
}
/****** DISPLAY BRANDING ******/
.site-branding {
display: none;
}
body.home .site-branding {
display: block;
}
/* Logo in nav no worky
body.home top-menu.menu, .menu-item--2859792540146751500 {
content: url(https://editingdynamics.com/wp-content/uploads/2020/03/edy_logo-02.svg);
display: block ;
height:35px;
position: relative;
top: 10px;
z-index: 100001;
} */
/* Highlight color */
::selection {
background-color: #00B2FF;
color: #fff;
opacity: 1.0 !important;
}
/* Header Styles */
h1, h2, h3, h4, h5, h6 {
font-family: futura-pt-bold, sans-serif, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
margin: 0em 0 0em;
}
/* Site title header */
.site-title,
.colors-dark .site-title {
font-size: 4rem;
text-transform: none;
letter-spacing: 0px;
font-family: futura-pt;
line-height: 1em;
}
/* Site title body */
.colors-dark .site-description {
color: #83ACD8;
font-size: 1.1rem;
}
/* Body header font */
.page .panel-content .entry-title,
.page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
color: #fff !important;
font-size: 2.5rem !important;
letter-spacing: 0 !important;
font-weight: 800;
text-transform: none;
font-family: futura-pt;
line-height: 1.1em;
vertical-align: top !important;
}
/* Content header align */
.colors-dark .page .panel-content .entry-title {
padding-top: 0;
}
/* Header background */
.colors-dark .site-header,
.colors-dark .single-featured-image-header {
background-color: #121C2B;
}
/* Top nav height */
.wrap {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* Top nav font */
.navigation-top {
border-bottom: none;
border-top: none;
font-size: 1rem;
}
/* Top nav color */
body.colors-dark,
.colors-dark .navigation-top, .colors-dark .main-navigation ul {
background-color: rgba(18, 28, 43, .8);
}
/* Individual nav element backgrounds */
.colors-dark .main-navigation > div > ul {
background-color: rgba(18, 28, 43, 0);
}
/* Top nav hover */
.main-navigation a:hover {
background-color: #83ACD8;
transition: .1s ease-in-out;
}
/* Top nav text hover */
.colors-dark .navigation-top a:hover {
color: #000;
font-family: futura-pt;
font-size: 1.2rem;
font-weight: 800;
transition: 2s ease-in-out;
}
/* Top Nav Font color */
.colors-dark .navigation-top a {
color: #fff200;
font-family: futura-pt;
font-size: 1.2rem;
font-weight: 800;
}
/* Body background color */
body.colors-dark,
.colors-dark .site-content-contain {
background: linear-gradient(0deg, rgba(27,42,65,1) 0%, rgba(18,28,43,1) 100%);
}
/* Kill yucky border on the footer */
.colors-dark .site-footer {
border-top: none;
}
/* Kill 'Proudly powered by wordpress' footer text */
.site-info {
display: none;
}
/* Footer text */
.site-footer {
font-size: 1rem;
margin-top: 0;
}
/* Mobile menu */
.colors-dark .menu-toggle {
background-color: rgba(18, 28, 43, .8);
color: #fff;
padding: 15px 30px 15px 30px;
border-radius: 0px;
}
/* Mobile menu hamburger stacc */
.icon {
display: inline-block;
fill: #fff200;
position: relative;
top: -0.0625em;
vertical-align: middle;
width: 1em;
}
/* Mobile menu text */
button {
color: #333;
font-family: futura-pt, helvetica, arial, sans-serif;
font-size: 1rem !important;
font-weight: 400;
line-height: 1.5;
}
/* Mobile menu hover */
.colors-dark :not(.mejs-button) > button:hover {
background: rgba(131, 172, 216, 0.3);
}
/* Mobile menu active */
.colors-dark :not( .mejs-button ) > button:focus {
background: rgba(131, 172, 216, 0.3);
border: none !important;
}
/* Mobile menu active bye-bye outline */
.menu-toggle:focus {
outline: none;
}
/* Contact form button */
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: #121C2B !important;
border: none !important;
color: #fff200 !important;
font-family: futura-pt;
font-weight: 700 !important;
font-size: 1em;
padding: 15px 25px !important;
}
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
background-color: #83ACD8 !important;
color: #121C2B !important;
font-weight: 700 !important;
transition: ease 0.5s;
}
/* Contact form headers */
div.wpforms-container-full .wpforms-form * {
color: #83ACD8;
font-weight: 400 !important;
}
/* Contact form text area */
div.wpforms-container-full .wpforms-form input[type=date],
div.wpforms-container-full .wpforms-form input[type=datetime],
div.wpforms-container-full .wpforms-form input[type=datetime-local],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=month],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=range],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=time],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=week],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
background-color: #121C2B !important;
box-sizing: border-box;
border-radius: 2px;
color: #fff !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: none !important;
padding: 0px;
height: 38px;
width: 100%;
line-height: 1.3;
}
/* Mobile - Tablets and smaller */
@media (max-width: 768px) {
/* Nav */
body > .site > header#masthead > .navigation-top {
background: rgba(0, 0, 0, 0); /* Dont you dare cover up lil lottie da! */
top: -662px; /* Move the nav outside of it's parent element to it's near the top of the page, will need to use JS to adjust as the width changes, more narrow screens require less pixels */
z-index: 100; /* Make sure the nav appears above the branding text */
}
/* Nav button */
.navigation-top > .wrap > nav#site-navigation > button.menu-toggle {
margin: 0;
}
/* Nav background */
.colors-dark .main-navigation > div > ul {
background-color: rgba(18, 28, 43, 0.8);
}
/* Mobile Nav - Add the logo to the menu and make sure the size is such that it fills the nav */
body > .site > header.site-header > .navigation-top > .wrap > nav#site-navigation > .menu-legit-menu-container > ul#top-menu > li.menu-item-home > a:before {
content: "Home"
}
}
/* Tablets and Larger */
@media (min-width: 768px) {
/* Top Nav - Make the nav span the entire window */
body > .site > header.site-header > .navigation-top > .wrap {
max-width: none;
padding: 0 .5rem 0 2rem;
}
/* Top Nav - Make the nav button container flex */
body > .site > header.site-header > .navigation-top > .wrap > nav#site-navigation > .menu-legit-menu-container > ul#top-menu {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* Top Nav - Make the home button take up all the extra space, pushing the other items to the right */
body > .site > header.site-header > .navigation-top > .wrap > nav#site-navigation > .menu-legit-menu-container > ul#top-menu > li.menu-item-home {
flex: 1;
}
/* Top Nav - Add the logo to the menu and make sure the size is such that it fills the nav */
body > .site > header.site-header > .navigation-top > .wrap > nav#site-navigation > .menu-legit-menu-container > ul#top-menu > li.menu-item-home > a {
background-image: url("https://editingdynamics.com/wp-content/uploads/2020/03/edy_logo-02.svg");
background-repeat: no-repeat;
margin: 0 auto 0 0;
width: 13rem;
height: 4rem;
content: ""; /* Clear Content that could have been added from mobile */
}
/* Top Nav - Make the nav fonts smaller so they can fit better on smaller windows */
body > .site > header.site-header > .navigation-top > .wrap > nav#site-navigation > .menu-legit-menu-container > ul#top-menu > li > a {
font-size: 1rem;
font-weight: 700;
padding: 1.3rem .5rem;
}
}
/* Landscape Tablets / Desktops and larger */
@media (min-width: 992px) {
/* Top Nav - Make the nav span the entire window */
body > .site > header.site-header > .navigation-top > .wrap {
padding: 0.75em 3.4166666666667em; /* This is overridden, but must come with the theme putting it back on larger window sizes */
}
/* Top Nav - Bump font size up now that the window width is larger */
body > .site > header.site-header > .navigation-top > .wrap > nav#site-navigation > .menu-legit-menu-container > ul#top-menu > li > a {
font-size: 1.2rem;
font-weight: 800;
padding: 1.2rem 1.5rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment