/* Theme Name: jakewoods.io Template: generatepress Theme URI: https://jakewoods.io Author: Jake Woods Author URI: https://jakewoods.io Description: A custom theme for jakewoods.io Version: 1.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gpc */ /* * CONTENTS: * 1 GLOBALS & DEFAULTS ---------------- * 1.1 - Custom Properties * 1.2 - Overrides & Global Styles * 1.2.1 - - Overrides * 1.2.2 - - Global Styles * 1.3 - Typography * 1.3.1 - - Main Typography * 1.3.2 - - Typography Helper Classes * 1.4 - Helper Classes * 1.5 - Sections & Container * 1.5.1 - - Sections * 1.5.2 - - Grids * 1.5.3 - - Containers * 2 HEADER & NAVIGATION --------------- * 2.1 - Mobile Header * 2.2 - Desktop Header * 2.3 - Mobile Header Navigation * 2.4 - Desktop Header Navigation * 3 FOOTER ---------------------------- * 4 COMPONENTS ------------------------ * 4.1 - Links & Buttons * 4.1.1 - - Links * 4.1.2 - - Buttons * 4.2 - Forms * 4.2.1 - - Modal Contact Form * 4.3 - Backgrounds * 4.3.1 - - Swirling Backgrounds * 4.3.2 - - Logomark Overlay * 4.4 - Modals * 4.4.1 - - Start Conversation Modal * 5 TEMPLATE PARTS & PARTIALS ---------- * 5.1 - Template Parts * 5.2 - Partials * 5.3 - Shortcodes * 5.4 - GB Elements (Block Builder) * 5.5 - Reusable Blocks (Block Builder) * 6 PAGE TEMPLATES -------------------- * 6.1 - 404 Page * 6.2 - Holding Page * 6.2.1 - - Holiding Footer * 7 WIDGETS --------------------------- * 8 SIDEBARS --------------------------- * 9 PLUGINS --------------------------- * 9.1 - Cookieyes - Cookies Consent * 10 PAGE SPECIFIC STYLES / OVERRIDES -- * 11 ANIMATIONS ------------------------ * 12 OTHER ----------------------------- */ /* * =========================================== * * 1 - GLOBALS & DEFAULTS * =========================================== * */ /* * NOTE: Colours set in theme customiser * Base --base #FBFBFB * Base 2 --base-2 #f4f4f5 * Base 3 --base-3 #edf2ff * Contrast --contrast #1F202E * Contrast 2 --contrast-2 #38383c * Contrast 3 --contrast-3 #38383c * Accent --accent #1556ff * Light Accent --light-accent #3c72ff * Dark Accent --dark-accent #0042ed * Accent 2 --accent-2 #88ADDD * Accent 3 --accent-3 #686A9A * Success --color-success #3f9582 * Warning --color-warning #bc854a * Danger --color-danger #f44336 */ @font-face { font-family: 'TWKLausanne-200'; src: url('/fonts/TWKLausanne-200.woff2') format('woff2'), url('/fonts/TWKLausanne-200.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: 'TWKLausanne-200Italic'; src: url('/fonts/TWKLausanne-200Italic.woff2') format('woff2'), url('/fonts/TWKLausanne-200Italic.woff') format('woff'); font-weight: 200; font-style: italic; } @font-face { font-family: 'TWKLausanne-400'; src: url('/fonts/TWKLausanne-400.woff2') format('woff2'), url('/fonts/TWKLausanne-400.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'TWKLausanne-400Italic'; src: url('/fonts/TWKLausanne-400Italic.woff2') format('woff2'), url('/fonts/TWKLausanne-400Italic.woff') format('woff'); font-weight: 400; font-style: italic; } /* ------------------------------------------- * 1.1 - - Custom Properties * ---------------------------------------- */ :root { --heading-font: 'TWKLausanne-400', system-ui, sans-serif; --heading-font-weight: 400; --heading-font-line-height: ; --heading-font-letter-spacing: ; --body-font: 'TWKLausanne-200', system-ui, sans-serif; --body-font-weight: 200; --body-font-line-height: ; --body-font-letter-spacing: ; --section-side-padding: 16px; --section-vertical-padding: 64px; --section-vertical-half-padding: 32px; --section-main-width: 1160px; } @media(min-width: 768px) { :root { --section-side-padding: 24px; --section-vertical-padding: 96px; --section-vertical-half-padding: 48px; } } @media(min-width: 1024px) { :root { --section-side-padding: 32px; --section-vertical-padding: 128px; --section-vertical-half-padding: 64px; } } /* ------------------------------------------- * 1.2 - - Overrides & Global Styles * ---------------------------------------- */ /* 1.2.1 - - - Overrides * ---------------------------------------- */ /* Removes strange whitespace at top of Blog Single Posts */ body.single main#main { margin-top: -2rem; } /* Forces content to be 100% wide */ #page.grid-container { max-width: 100%; padding: 0; } /* Removes default theme styling */ .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header { background-color: transparent; } /* Removes Site content padding on devices <768px */ @media (max-width: 768px) { #content { padding: 0; } } /* --- fixes potential theme css conflict --- */ .acf-map img { max-width: inherit !important; } /* --- responsive embed --- */ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- breadcrumbs --- */ .breadcrumbs { font-size: 14px; margin-bottom: 10px; } /* 1.2.2 - - - Global Styles * ---------------------------------------- */ /* ------------------------------------------- * 1.3 - - Typography * ---------------------------------------- */ /* 1.3.1 - - - Main Typography * ---------------------------------------- */ h1, h2, h3, h4, h5, h6, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6 { font-family: var(--heading-font); } p, span, .gb-headline-p, .gb-headline-bigger-p, .gb-headline-smaller-p, .gb-button { font-family: var(--body-font); } p:last-child { margin-bottom: 0; } /* * 1.3.2 - - - Typography Classes * Used to apply the styling of various * typographical elements to other type * elements. * ---------------------------------------- */ .h1, .gb-headline-h1 { } .h2, .gb-headline-h2 { } .h3, .gb-headline-h3 { } .h4, .gb-headline-h4 { } .h5, .gb-headline-h5 { } .h6, .gb-headline-h6 { } .p { } .smaller-p { font-size: 0.85rem; } .bigger-p { font-size: 1.2rem; } @media(min-width:768px) { .h1 { } .h2 { } .h3 { } .h4 { } .h5 { } } /* ------------------------------------------- * 1.4 - - Helper Classes * ---------------------------------------- */ /* Used to remove elements visually while preserving them in the DOM for SEO */ .hide-me { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; } /* ------------------------------------------- * 1.5 - - Sections & Containers * ---------------------------------------- */ /* 1.5.1 - - - Sections * ---------------------------------------- */ /* Main Section */ section.gb-container-main > .gb-inside-container { padding: var(--section-vertical-padding) var(--section-side-padding); } /* 1.5.2 - - - Grids * ---------------------------------------- */ .gb-grid-wrapper-main .gb-grid-column-main-grid-container { margin-bottom: var(--section-vertical-padding); } .gb-grid-wrapper-main .gb-grid-column-main-grid-container:last-child { margin-bottom: 0; } /* 1.5.3 - - - Containers * ---------------------------------------- */ /* * =========================================== * * 2 - HEADER & NAVIGATION * =========================================== * */ .site-header .inside-header { padding: calc( var(--section-side-padding) / 2 ) var(--section-side-padding); } /* ------------------------------------------- * 2.1 - - Header * ---------------------------------------- */ /* 2.1.1 - - - Mobile Header * ---------------------------------------- */ /* 2.1.2 - - - Desktop Header * ---------------------------------------- */ /* ------------------------------------------- * 2.2 - - Navigation * ---------------------------------------- */ /* 2.2.1 - - - Mobile Navigation * ---------------------------------------- */ /* 2.1.2 - - - Desktop Navigation * ---------------------------------------- */ #primary-menu .menu li.current-menu-item a { font-weight: 500; } /* * =========================================== * * 3 - FOOTER * =========================================== * */ /* * =========================================== * * 4 - COMPONENTS * =========================================== * */ /* ------------------------------------------- * 4.1 - - Links & Buttons * ---------------------------------------- */ /* 4.1.1 - - - Links * ---------------------------------------- */ a, p a, .inside-article a, .paging-navigation a, .comments-area a, .page-header a { } a:hover, p a:hover, .inside-article a:hover, .paging-navigation a:hover, .comments-area a:hover, .page-header a:hover { } /* 4.1.2 - - - Buttons * ---------------------------------------- */ /* a.gb-button { padding: 1rem 2rem; } a.gb-button:first-child { margin-top: 0; } a.gb-button.gb-button-tertiary { padding: 1rem 0; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } a.gb-button.gb-button-tertiary:hover { text-decoration: underline; text-underline-offset: 0.2rem; text-decoration-thickness: 2px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } @media (min-width: 768px) { a.gb-button:last-child { margin-right: 0; } } */ /* Holding Page - Primary Button */ button.jw--holding--primary-btn { background-color: transparent; border-top: 0; border-right: 0; border-left: none; padding: 0; padding-bottom: 8px; } /* ------------------------------------------- * 4.2 - - Forms * ---------------------------------------- */ /* 4.2.1 - - - Modal Contact Form * ---------------------------------------- */ #fluentform_1 { margin: 0 auto; max-width: 600px; } #fluentform_1 .ff-el-group { margin-bottom: 0; } /* Inputs */ #fluentform_1 input { background-color: var(--accent); border: 1px solid var(--base); border-radius: 0; color: var(--base-3); font-size: 20px; font-weight: 400; margin-bottom: 16px; padding: 16px; text-align: center; transition: all .2s; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } #fluentform_1 input::placeholder { color: var(--base-3); } #fluentform_1 input:focus { background-color: var(--dark-accent); border-color: var(--base-3); transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } /* Labels */ /* Details "Label" - actually a

with a custom class */ #fluentform_1 p.jw--modal-form--header { color: var(--base-3); display: block; font-size: 28.43px; font-weight: 600; margin-bottom: 8px; text-align: center; width: 100%; } /* Service Wrap Label - not the checkbox label */ #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--label.ff-el-is-required.asterisk-right { width: 100%; } #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--label.ff-el-is-required.asterisk-right label { color: var(--base-3); display: block; font-size: 28.43px; margin-bottom: 16px; text-align: center; width: 100%; } /* Asterisk styles */ .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after { color: var(--base)!important; content: "Feel free to choose as many, or as few, options as you need."!important; display: block; font-size: 13px; font-weight: 400; margin-bottom: 16px; text-align: center; } /* Services Checkbox labels */ #fluentform_1 .jw--overlay-form--service-wrap { margin-bottom: 48px; } #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--content .ff-el-form-check { flex-grow: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--content .ff-el-form-check label { background-color: var(--accent); border: 1px solid var(--base); color: var(--base-3); display: block; font-size: 20px; font-weight: 500; margin-bottom: 0; padding: 12px 24px; text-align: center; width: 100%; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--content .ff-el-form-check label:hover { border-color: var(--base-3); color: var(--base-3); transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } #fluentform_1 .jw--overlay-form--service-wrap .ff-el-input--content .ff-el-form-check.ff_item_selected label { background-color: var(--base-3); border-color: var(--base-3); color: var(--accent); transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } /* Checkboxes */ #fluentform_1 input[type="checkbox"] { display: none; } /* Explainer Text */ #fluentform_1 .jw--modal-form--explainer-text-wrap { margin-bottom: 48px; } #fluentform_1 .jw--modal-form--explainer-text { color: var(--base); font-size: 13px; font-weight: 400; text-align: center; } #fluentform_1 .jw--modal-form--explainer-text a { color: var(--base); text-decoration: underline; } /* Submit Button */ #fluentform_1 button.ff-btn-submit { background-color: transparent; border: 0; border-bottom: 2px solid var(--base-3); border-radius: 0; color: var(--base-3); display: flex; font-size: 22.4px; font-weight: 500; margin: 0 auto; padding: 0 0 8px; transition: all 0.3s ease; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } #fluentform_1 button.ff-btn-submit:hover { background-color: transparent; border: 2px solid transparent; border-bottom: 2px solid var(--base-3); opacity: 1; /* transform: scale(1.1) perspective(1000px); */ } #fluentform_1 button.ff-btn-submit:after { background-image: url('./img/icons/paper-plane-right-fill.svg'); background-position: center center; background-repeat: no-repeat; background-size: contain; content: " "; display: inline-block; height: 33.59px; margin-left: 8px; width: 33.59px; } /* Error Messages */ #fluentform_1 .error.text-danger { color: #ffb8cc; font-size: 14px; text-align: center; width: 100%; } /* Success MEssage */ div#fluentform_1_success { border: 0!important; box-shadow: none; color: var(--base-3)!important; font-size: 24px; margin: 0 auto; max-width: 1160px; text-align: center; } div#fluentform_1_success a { color: var(--base-3); } @media (max-width: 767px) { #fluentform_1 p.jw--modal-form--header { margin-bottom: 16px; } #fluentform_1 .jw--overlay-form--service-wrap { margin-bottom: 32px; } } /* ------------------------------------------- * 4.3 - - Backgrounds * ---------------------------------------- */ /* 4.3.1 - - - Swirling Background * ---------------------------------------- */ /* -- Day Mode -- */ .jw--swirling-gradient { background: linear-gradient(-45deg,#1556FF, #003AD2, #4915ff ); background-size: 400% 400%; animation: swirling-gradient 8s ease infinite; -webkit-animation: swirling-gradient 8s ease infinite; } /* -- Night Mode -- */ .dark .jw--swirling-gradient { background: linear-gradient(-45deg, #2f3045, #1F202E, #171822 ); background-size: 400% 400%; animation: swirling-gradient 7.5 ease infinite; -webkit-animation: swirling-gradient 7.5 ease infinite; } /* 4.3.2 - - - Logomark Overlay * ---------------------------------------- */ .jw--logomark-overlay::after { background-image: url('./img/bg-overlay/logomark--bg-overlay.svg'); background-position: center left; background-repeat: no-repeat; background-size: 150% 175%; content: ""; opacity: 0.03; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; z-index: 5; } @media (min-width: 1025px) { .jw--logomark-overlay::after { background-size: 135% 160%; width: 60%; } } /* ------------------------------------------- * 4.4 - - Modals * ---------------------------------------- */ /* 4.4.1 - - - Start Conversation Modal * ---------------------------------------- */ /* Close Icon */ .jw--modal-close { cursor: pointer; display: inline-block; position: absolute; top: 4px; right: 4px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } /* Hides the shadow button in an attempt to improve accessibility scores */ .hystmodal__shadow { display: none; } /* Styles backghround overlay */ .hystmodal__wrap { background-color: rgba( 0, 0, 0, 0.7 ); } /* * =========================================== * * 5 - TEMPLATE PARTS & PARTIALS * =========================================== * */ /* ------------------------------------------- * 5.1 - - Template Parts * ---------------------------------------- */ /* ------------------------------------------- * 5.2 - - Partials * ---------------------------------------- */ /* ------------------------------------------- * 5.3 - - Shortcodes * ---------------------------------------- */ /* ------------------------------------------- * 5.4 - - GB Elements & Blocks This is content that is built with the block editor. Usually GB or Getwid. * ---------------------------------------- */ /* ------------------------------------------- * 5.3 - - Reusable Blocks Block-built Elements are usually found in the section before, but there may be rare instances where I have built a reusable block with a shortcode You will find the styles for these here. * ---------------------------------------- */ /* * =========================================== * * 6 - PAGE TEMPLATES These are styles for specific Page templates. * =========================================== * */ /* ------------------------------------------- * 6.1 - - 404 Page * ---------------------------------------- */ /* ------------------------------------------- * 6.2 - - Holding Page * ---------------------------------------- */ /* 6.2.1 - - - Holding Footer * ---------------------------------------- */ #holding-footer { position: absolute; right: 0; bottom: 0; left: 0; } /* * =========================================== * * 7 - WIDGETS * =========================================== * */ /* * =========================================== * * 8 - SIDEBARS * =========================================== * */ /* * =========================================== * * 9 - PLUGINS * =========================================== * */ /* ------------------------------------------- * 9.1 - - Cookieyes - Cookie Consent * ---------------------------------------- */ #cookie-law-info-bar { background-color: var(--contrast); } #cookie-law-info-bar h5 { color: var(--base-3); font-size: 1.618rem!important; font-weight: bold; } #cookie-law-info-bar .cli-bar-message { color: var(--base-2); font-size: 1rem; } #cookie-law-info-bar .cli-bar-btn_container a { background-color: var(--contrast)!important; border: 2px solid var(--base-3); color: var(--base-3)!important; font-size: 1rem; margin-right: .5rem; padding: 0.75rem 1rem; } #cookie-law-info-bar .cli-bar-btn_container a#wt-cli-accept-all-btn { background-color: var(--accent)!important; border-color: var(--accent); font-weight: bold; } /* * =========================================== * * 10 - PAGE SPECIFIC STYLES Sometimes you may need to override certain styles on a particular page - this is where to do that. * =========================================== * */ /* * =========================================== * * 11 - ANIMATIONS * =========================================== * */ /* --- do all the preload stuff --- */ @media (min-width: 768px) { .preload * { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; } .has-js .prep-animation, .has-js .prep-scroll-animation { visibility: hidden; } .has-js .do-animation, .has-js .do-scroll-animation { visibility: visible; } } /* ---------------------------------- * * SWIRLING BACKGROUND COLOR GRADIENT * * ---------------------------------- */ @keyframes swirling-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ---------------------------------------------- * Generated by Animista * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @media (min-width: 768px) { .fade-in-left { animation: fade-in-left 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; -webkit-animation: fade-in-left 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .fade-in { animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; -webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .fade-in-bottom { animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; -webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .fade-in-right { animation: fade-in-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; -webkit-animation: fade-in-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } } /* --- animation fade-in-left --- */ @-webkit-keyframes fade-in-left { 0% { -webkit-transform: translateX(-75px); transform: translateX(-75px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } } @keyframes fade-in-left { 0% { -webkit-transform: translateX(-75px); transform: translateX(-75px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /* --- animation fade-in --- */ @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* --- animation fade-in-bottom --- */ @-webkit-keyframes fade-in-bottom { 0% { -webkit-transform: translateY(75px); transform: translateY(75px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(75px); transform: translateY(75px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* --- animation fade-in-right --- */ @-webkit-keyframes fade-in-right { 0% { -webkit-transform: translateX(75px); transform: translateX(75px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right { 0% { -webkit-transform: translateX(75px); transform: translateX(75px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /* --- delay classes --- */ .delay-250 { -webkit-animation-delay: 250ms; animation-delay: 250ms; } .delay-500 { -webkit-animation-delay: 500ms; animation-delay: 500ms; } .delay-750 { -webkit-animation-delay: 750ms; animation-delay: 750ms; } .delay-1000 { -webkit-animation-delay: 1000ms; animation-delay: 1000ms; } .delay-1250 { -webkit-animation-delay: 1250ms; animation-delay: 1250ms; } .delay-1500 { -webkit-animation-delay: 1500ms; animation-delay: 1500ms; } /* * =========================================== * * 12 - OTHER * =========================================== * */