/* Theme Name: Bullhorn Mobile App Theme URI: https://www.squarerchilli.co.uk Author: squarechilli Author URI: https://www.squarechilli.co.uk Description: Bullhorn Mobile App developed and maintained by squarechilli Version: 1 */ /*Global*/ :root { --title-font: 'nunito'; /* light - 300, regular - 400, bold - 700 */ --main-font: 'montserrat'; --color-dark: #313131; /*site background and text on lighter backgrounds*/ --color-orange: #f26144; /*orange*/ --color-cyan: #519E96; /*cyan*/ --color-grey: #f0f3ff; /*light grey, mostly background*/ --color-offwhite: #f8f8f8; /*off white, good for light backgrounds next to white backgound block*/ --color-black: #000; --color-white: #fff; } .nunito { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .montserrat { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } /*essentials*/ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body {position: relative; font: 20px var(--main-font), Arial, sans-serif; color: var(--color-dark); background-color: var(--color-grey); -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; margin:0px; padding: 0 } a {color: var(--color-main); text-decoration: underline; outline: none;-webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; transition: background-color 0.25s;} a:hover {text-decoration: underline;} h1 {font-size: 80px; margin: 10px 0px; color: var(--color-dark); font-family: var(--title-font), 'Helvetica Neue'; text-align: center;} h2 {position: relative;font-size: 30px;color: var(--color-dark);font-family: var(--title-font), 'Helvetica Neue';padding-bottom: 20px;margin: 0;} h3 {margin: 10px 0; color: var(--color-dark); font-family: var(--title-font), 'Helvetica Neue';} p {line-height: 180%} button:focus,input:focus,select:focus,textarea:focus {outline: none;} img {max-width: 100%;border: 0px;height: auto;width: auto\9; /* ie8 */} .alignleft {float: left; margin-right: 15px} .alignright {float: right; margin-left: 15px} .aligncenter {text-align: center;} .text-right {text-align: right !important} .center {margin: 0 auto; text-align: center} .noborder {border: 0px} .nomargin {margin: 0 !important} .clear {clear: both} .clear:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } section {position: relative; clear: both} .wrapper {position: relative;max-width: 1400px;margin: 0px auto;padding: 0;} .wrapper:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .narrow {max-width: 90%; margin: auto} .narrower {max-width: 80%; margin: auto} .narrowest {max-width: 70%;; margin: auto} .fullwidth {position: relative; width:auto;overflow:hidden; margin: 30px 0} strong {} input {font-family: var(--main-font); color: var(--color-dark); } .large {font-size: 1.2em} .larger {font-size: 1.6em} .largest {font-size: 2em} hr {background-image: url(images/hr.png); height: 23px; width: 560px; border: 0; margin: 20px auto} li {line-height: 200%} /*header*/ header {position: relative;margin-bottom: 60px;} header > .wrapper {display: grid; grid-template-columns: 330px 1fr; padding: 20px 0} .logo a {display: grid; grid-template-columns: 100px 1fr; align-items: center; text-decoration: none} .logo h1, .logo div {font-size: 22px;color: var(--color-cyan);text-align: left;padding: 0;margin: 0; font-weight: bold} .main-menu {text-align: right} .main-menu ul {list-style-type: none;margin: 17px 0 0 0;padding: 0} .main-menu ul li {position: relative; display: inline-block; padding: 5px} .main-menu ul li a {position: relative;text-decoration: none; color: var(--color-cyan); text-transform: uppercase; font-weight: bold; font-size: 16px} /*Responsive Menu*/ .hamb {display: none;} #side-menu {display: none;} /*Homepage*/ /*General*/ .has-colour-dark-background-color {background-color: var(--color-dark)} .has-colour-orange-background-color {background-color: var(--color-orange)} .has-colour-cyan-background-color {background-color: var(--color-cyan)} .has-colour-grey-background-color {background-color: var(--color-grey)} .has-colour-offwhite-background-color {background-color: var(--color-offwhite)} .has-colour-black-background-color {background-color: var(--color-black)} .has-colour-white-background-color {background-color: var(--color-white)} .has-colour-dark-color {color: var(--color-dark)} .has-colour-orange-color {color: var(--color-orange)} .has-colour-cyan-color {color: var(--color-cyan)} .has-colour-grey-color {color: var(--color-grey)} .has-colour-offwhite-color {color: var(--color-offwhite)} .has-colour-black-color {color: var(--color-black)} .has-colour-white-color {color: var(--color-white)} ::-webkit-input-placeholder {color: var(--color-white);} ::-moz-placeholder {color: var(--color-white);} :-ms-input-placeholder {color: var(--color-white);} :-moz-placeholder {color: var(--color-white);} .mobile-app-demo {box-shadow: 0 10px 20px rgba(30, 42, 90, 0.1), inset 4px 4px 6px rgba(0, 0, 0, 0.1), inset -3px -3px 10px rgba(176, 187, 230, 0.8); display: inline-block; padding: 40px 15px 15px 15px; border-radius: 36px; background: #fff; position: relative;} .mobile-app-demo:before {content: ""; height: 8px; width: 100px; position: absolute; left: 50%; top: 20px; background: #f0f2fa; margin-left: -50px; border-radius: 4px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);} .mobile-app-demo:after {content: ""; height: 8px; width: 8px; position: absolute; left: 50%; top: 20px; background: #f0f2fa; margin-left: 60px; border-radius: 4px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);} .mobile-app-demo iframe {border-color: #fff; box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.2); border-radius: 24px; overflow: hidden; border: 2px solid #e1e6f5; height: 725px; width: 375px;} .mobile-app-demo.dark {background: #202229;} .mobile-app-demo:before, .mobile-app-demo.dark:after {background: #111;} .mobile-app-demo.dark iframe {border-color: #3a3d4b;} .testimonials {position: relative; margin-top: 30px !important} .testimonials > div {box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05); padding: 30px} .testimonials > div > p:first-of-type:before {content: "“"; display: block; font-size: 50px; font-weight: bold; color: var(--color-cyan)} .testimonials > div > p:nth-of-type(2) {margin-bottom: 0} .testimonials > div > p:last-of-type {margin-top: 0} a.wp-block-button__link {text-decoration: none} h2.c-accordion__title {font-size: 20px} .c-accordion__title:after {color: var(--color-orange)} .c-accordion__content p {font-size: 18px; margin-top: 0} .process-table {position: relative; padding-bottom: 70px; margin-top: 1.75em;} .process-table p {margin: 0} .process-table h2 {font-size: 40px; font-weight: 100; margin: 0; padding: 0; color: var(--color-orange) } .process-table h3 {font-size: 32px; font-weight: 100; margin: 0; padding: 0; color: var(--color-cyan) } .process-table:after {content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 1px; height: 40px; background-color: var(--color-orange)} .process-table:last-of-type:after {display:none} #input_1_8, #input_1_9, #input_1_12 {flex-direction: row !important; flex-wrap: wrap !important} i.fas, i.fab {color: var(--color-orange)} /*Blog*/ .blog-archive {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; margin: 40px 0} .blog-archive > div {position: relative; height: 270px} .blog-archive > div:nth-child(even) {background-color: var(--color-orange); border: 2px solid var(--color-orange);} .blog-archive > div:nth-child(odd) {background-color: var(--color-cyan); border: 2px solid var(--color-cyan)} .blog-archive > div a {position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; text-decoration: none; color: var(--color-dark)} .blog-archive > div:nth-child(even) a { color: var(--color-white)} .blog-archive > div:nth-child(even) a h2 { color: var(--color-white)} .blog-archive > div:hover {border: 2px solid var(--color-dark)} .blog-archive h2 {font-size: 22px} .blog-archive p {font-size: 16px} /*Gutenberg fixes*/ .alignwide {margin-left : -80px;margin-right : -80px;} .alignfull {margin-left : calc( -100vw / 2 + 100% / 2 ) !important;margin-right : calc( -100vw / 2 + 100% / 2 ) !important;max-width : 100vw !important;display: block} .wp-block-group.alignfull {padding: 40px 15%} /*footer*/ footer {position: relative;background-color: var(--color-dark);color: var(--color-white);padding: 80px 0 20px 0;} footer h2 {max-width: 800px;margin: 0 auto 30px auto;text-align: center;font-size: 28px;color: var(--color-white)} footer h3 {max-width: 800px; margin: 0 auto; text-align: center; font-size: 24px; color: var(--color-cyan)} footer .contact {margin: 50px auto; text-align: center;} footer .contact > div {display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: 30px auto; text-align: center; font-size: 24px;} footer .contact > div div {margin: 20px 0} footer .contact a {color: var(--color-white); text-decoration: none} .footer-logo {margin: 0 auto 40px auto; text-align: center;} .suite {margin: 30px 0; text-align: center; font-family: var(--title-font); color: var(--color-cyan); font-size: 20px} .suite a {text-decoration: none} .suite a:hover {text-decoration: underline} .suite a:nth-of-type(2) {margin: 0 80px;} .footer-signoff {display: grid; grid-template-columns: 1fr 1fr; } .footer-signoff a {color: var(--color-white); text-decoration: none} .footer-signoff p:first-child {color: var(--color-white)} .footer-signoff p:last-child {text-align: right} .footer-signoff p:last-of-type img {vertical-align: middle; margin-left: 10px} /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (min-width: 1100px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 813px) and (max-width: 1099px) { .wrapper {width: 100%;padding: 0 1%;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (min-width: 481px) and (max-width: 812px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 480px) { .wrapper {padding: 0 1% !important} header > .wrapper {padding-top: 5px !important} .mobile-app-demo {width: 90%; margin: 0 auto} .mobile-app-demo iframe {width: 100%} .app-demo-cols .wp-block-column:first-of-type {order: 2} .wp-block-group.alignfull {padding: 40px 0} .hide-mobile {display: none} footer {font-size: 18px} footer h2 {font-size: 20px} footer h3 {font-size: 20px} .suite {font-size: 18px} .suite a {display:block} footer .contact > div {font-size: 16px} .footer-signoff {grid-column-gap: 20px; font-size: 14px} /* Nav menu on mobile */ .main-menu{z-index:99; width: 100%; height: 100%; position: fixed; left: 0;right: 0; background-color: var(--color-dark); overflow: hidden; top: 100px /*set to height of header*/} .main-menu ul li {display: block; text-align: left; margin-bottom: 10px} .menu a{display: block; padding: 0 20px; color: var(--color-white);} .menu a:hover{background-color: var(--color-main);} .main-menu{max-height: 0;transition: max-height .5s ease-out;} /* Menu Icon */ .hamb{display: block; position: fixed; right: 2%; top: 10px; border-radius: 5px; cursor: pointer; float: right; padding: 20px 20px; background-color: var(--color-black); z-index: 999} .hamb-line {background: var(--color-white); display: block; height: 2px; position: relative; width: 24px;} .hamb-line::before, .hamb-line::after{background: var(--color-white); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;} .hamb-line::before{top: 5px;} .hamb-line::after{top: -5px;} .side-menu {display: none;} /* Toggle menu icon */ .side-menu:checked ~ nav{max-height: 100%;} .side-menu:checked ~ .hamb .hamb-line {background: transparent;} .side-menu:checked ~ .hamb .hamb-line::before {transform: rotate(-45deg); top:0;} .side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0;} .main-menu {display: none} }