/****************************************************************** Theme Name: Simpsons Creative Grid 2022 Description: A responsive theme for WordPress, developed by Simpsons Creative, allowing for development of responsive websites - through the use of a dynamic grid system. Author: Simpsons Creative Version: 2022.09.26 Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support ******************************************************************/ /* Fonts - Need to be at top of style.css to load correctly */ /*@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,500;0,600;0,700;0,900;1,100;1,400;1,500;1,600;1,700;1,900&display=swap');*/ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); /* font-family: 'Lato', sans-serif; - BODY COPY font-family: 'Roboto', sans-serif; - HEADINGS */ :root { /* Set up CSS variables how to use: var(--red) */ /*theme colours*/ --primary: #0079A1; --secondary: #FBBA00; --blue: #0079A1; --blueTrans: rgba(0, 121, 161, 0.8); --yellow: #FBBA00; --pink: #D60B52; --white: #FFFFFF; --whiteTrans: rgba(255, 255, 255, 0.9); --black: #333333; --blackTrans: rgba(55, 58, 54, 0.75); /*Theme font sizes how to use: var(--fs-h1) ==clamp (min value, ideal, max value) */ --fs-h1: clamp(40px, 3vw, 45px); /*var(--fs-h1)*/ --fs-h2: clamp(35px, 3vw, 40px); /*var(--fs-h2)*/ --fs-h3: clamp(20px, 3vw, 28px); /*var(--fs-h3)*/ --fs-h4: clamp(18px, 3vw, 26px); /*var(--fs-h4)*/ --fs-h5: clamp(16px, 3vw, 24px); /*var(--fs-h5)*/ --fs-h6: clamp(14px, 3vw, 22px); /*var(--fs-h6)*/ --fs-normal: clamp(12px, 3vw, 18px); /*default var(--fs-normal)*/ --fs-small: clamp(12px, 3vw, 14px); /*default var(--fs-small)*/ --fs-button: clamp(18px, 3vw, 30px); /*default var(--fs-button)*/ } /*Theme font sizes responsive*/ @media (max-width: 1280px) { :root { /*--fs-h1: 20px;*/ /* can overwrite clamp values with media queries here, if needed*/ } } /* Site Structure */ html { font-size:62.5%; /**** 1rem now = 10px;/****/ } body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: calc(12px + 0.5vw); /* Responsive base font size */ } /* Website Maximum Width - Default: 1920px */ .site-width { max-width: 1920px; } /*Website Inner Width - Default: 1280px*/ .inner-width { max-width: 1280px; } /*Tablet Width */ .tablet-width { max-width: 1029px; margin-left: auto; margin-right: auto; } /*Post Width - Default: 960px*/ .post-width, .single-post article.post { max-width: 960px; margin-left: auto; margin-right: auto; } /*Mobile Width */ .mobile-width { max-width: 767px; margin-left: auto; margin-right: auto; } /*Header*/ /*Footer*/ #footer { background-color: pink; } .inner-footer { background-color: purple; } .right { float: right; } /*==================== Standards ====================*/ /* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc. */ * { font-family: 'Open Sans', Arial, Helvetica, sans-serif; } /*Text*/ h1, h2, h3, h4, h5, h6, p { margin: 0 0 5px 0; color: var(--black); } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-style: normal; } h1, h2, h3 { font-weight: bold; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--secondary); text-decoration: none; } a:visited { color: var(--blue); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); padding-bottom: 0.25em; } h3 { font-size: var(--fs-h3); padding-bottom: 0.25em; } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } h6 { font-size: var(--fs-h6); } p, #content li { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: var(--fs-normal); line-height: 1.4em; padding-bottom: 1em; } p.small { font-size: var(--fs-small); } em { font-style: italic; } #content { clear: both; } /* Lists */ #content ul, #content ol { margin-left: 0; margin-bottom: 0; } #content li { margin-left: 1em; padding-bottom: 1em; margin-bottom: 5px; } #content li::marker { float: left; } #content li ul li:last-child { padding-bottom: 0; margin-bottom: 0 } ul.twoColumns, ol.twoColumns { column-count: 2; } ul.threeColumns, ol.threeColumns { column-count: 3; } ul.twoColumns li, ol.twoColumns li, ul.threeColumns li, ol.threeColumns li { clear: both; } /*Bullet Points/Numbered Lists*/ .entry-content ul > li { list-style-type: disc; padding-bottom: 5px; } .entry-content ol > li { list-style-type: decimal; padding-bottom: 5px; } .entry-content ul li ul { padding-top: 1em; margin-top: 5px; } /*Gallery Fix*/ #content ul.blocks-gallery-grid { margin-left: unset; } #content .blocks-gallery-grid li.blocks-gallery-item { margin-bottom: 1em; } #content .wp-block-gallery li { margin-left: unset; padding-bottom: unset; } /*Gallery Caption*/ .wp-caption-text, .gallery-caption { text-align: center; } .wp-block-gallery figcaption { line-height: normal; text-align: center; } /*Gutenberg Images & Gallery*/ .wp-block-image { padding-bottom: 1em; margin-bottom: 5px; } .wp-block-image:last-child { padding-bottom: 0; margin-bottom: 0; } .wp-block-gallery { padding-bottom: 1em; margin-bottom: 5px; } .wp-block-gallery:last-child { padding-bottom: 0; margin-bottom: 0; } .wp-block-gallery .wp-block-image { padding-bottom: unset; margin-bottom: unset; } /*==================== Header ====================*/ #header { position: relative; padding: 25px 5%; z-index: unset; } #header::before { background-color: var(--blue); mix-blend-mode: multiply; content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; } body.featuredAreaFixed #header { position: absolute; position: absolute; top: 0; left: 0; } .inner-header { float: unset; display: flex; justify-content: space-between; width: 100%; align-items: center; position: relative; z-index: 999; } .logoArea {} .logoArea a { float: left; } .logoArea img { width: 60vw; height: auto; max-width: 300px; } .navArea {} /* Featured Area - ACF */ .featuredArea { align-items: center; background-position: 50%; box-sizing: border-box; display: flex; justify-content: center; min-height: 430px; overflow: hidden; overflow: clip; padding: 1em; position: relative } .featuredArea .overlay { bottom: 0; left: 0; opacity: 0.5; position: absolute; right: 0; top: 0 } .featuredArea video.video-background { border: none; bottom: 0; box-shadow: none; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; object-fit: cover; outline: none; padding: 0; position: absolute; right: 0; top: 0; width: 100% } .featuredArea .featuredArea-inner-container { z-index: 1; } .featuredArea { justify-content: flex-start; padding-left: 5%; padding-right: 5%; margin-bottom: 40px; z-index: 0; } .featuredArea .featuredImage { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .featuredArea.fixed { border-bottom: 0; margin-bottom: 0; } .featuredArea.fixed .featuredImage { position: fixed; z-index: -1; } .featuredArea.fixed video { position: fixed !important; z-index: -1; } body.featuredAreaFixed #content, body.featuredAreaFixed #footer { position: relative; } body.featuredAreaFixed #content .panel { margin-bottom: 0; } body.featuredAreaFixed .entry-content .contentBlock:first-child { padding-top: 30px; padding-bottom: 60px; } /* Featured Box */ .featuredArea .featuredBox { text-align: center; justify-content: center; max-width: 500px; position: relative; padding: 30px; } .featuredArea .featuredBox::before { background-color: var(--blue); mix-blend-mode: multiply; content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; } .featuredArea .featuredBox .featuredBoxContent { z-index: 1; } .featuredArea .featuredBox h1, .featuredArea .featuredBox h2 { color: #fff; font-size: var(--fs-h1); font-weight: bold; text-align: center; padding-bottom: 0.25em; } .featuredArea .featuredBox h1:last-child { padding-bottom: 0; margin-bottom: 0; } .featuredArea .featuredBox p { color: #fff; } .featuredArea .featuredBox .buttons { justify-content: center; gap: 1em; } /* Support Shape */ .featuredArea .support { width: 80%; position: absolute; bottom: 0; right: 0; } .featuredArea .support img { float: left; mix-blend-mode: multiply; } .featuredArea .support p { color: #fff; font-size: var(--fs-h2); font-weight: bold; line-height: normal; text-align: right; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); padding-right: 5%; padding-bottom: 0; margin-bottom: 0; } /*==================== Nav ====================*/ .nav { float: right; background: none; } .nav ul { background: none; display: flex; align-items: center; } .nav li a { color: #fff; } .nav li a:hover, .nav li a:focus { color: var(--secondary); text-decoration: none; } .nav li:last-of-type a { padding-right: 0px; } .nav li ul.sub-menu, .nav li ul.children { flex-direction: column; border: none; right: 0; } .nav li ul.sub-menu li, .nav li ul.children li { width: 100%; } .nav li ul.sub-menu li a, .nav li ul.children li a { background-color: var(--blueTrans); width: 100%; white-space: nowrap; padding-left: 0.75em; padding-right: 0.75em; } /* Responsive Menu - !!! REPLACE 444 WITH NEWLY CREATED MENU ID (ALSO IN HEADER.PHP) !!! */ #rmp_menu_trigger-11 { background: none; position: static; float: right; margin-left: 20px; } #rmp_menu_trigger-11.is-active { background: none; } #rmp_menu_trigger-11:hover, #rmp_menu_trigger-11:focus { background: none; } #rmp-container-11 { background-color: var(--primary); min-width: unset; } .rmp-menu-open { -webkit-box-shadow: 1px 1px 10px -2px #000; box-shadow: 1px 1px 10px -2px #000; } #rmp-menu-wrap-11 .rmp-menu-item-link { background-color: transparent !important; font-size: 18px; border-color: transparent !important; } #rmp-menu-wrap-11 .rmp-submenu .rmp-menu-item-link { font-size: 16px; font-weight: normal; } /* Current Menu Item */ #rmp-menu-wrap-11 .rmp-menu-current-item > a.rmp-menu-item-link { color: var(--secondary); font-weight: bold; } #rmp-menu-wrap-11 .rmp-menu-item-current-ancestor > a.rmp-menu-item-link { color: var(--secondary); font-weight: bold; } #rmp-menu-wrap-11 .rmp-submenu .rmp-menu-current-item .rmp-menu-item-link { color: var(--secondary); font-weight: bold; } /* Menu Item Hover */ #rmp-menu-wrap-11 .rmp-menu-item-current-ancestor > a.rmp-menu-item-link:hover { color: #fff; } #rmp-menu-wrap-11 .rmp-menu-item-link:hover { background-color: var(--secondary) !important; text-decoration: none; } #rmp-menu-wrap-11 .rmp-menu-current-item > a.rmp-menu-item-link:hover { color: #fff !important; } /* Additional Content */ .rmp-menu-additional-content { float: left; } .rmp-menu-additional-content .social-icons { width: 100%; float: left; padding: 20px 0px; } .rmp-menu-additional-content .social-icons a { color: #fff; font-size: 30px; margin-right: 15px; } .rmp-menu-additional-content .social-icons a:hover { color: var(--secondary); } /* Hide/Show Main Menu & Responsive Menu */ #rmp_menu_trigger-11 { display: none; } @media(max-width: 1029px) { #rmp_menu_trigger-11 { display: block; } #menu-main-menu { display: none; } } /*==================== Body ====================*/ .wp-block-image figcaption { color: #888888; margin-bottom: 30px; } .wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; } .article-header { padding-top: 30px; } .article-header h1 { padding-bottom: 0.25em; } .article-header img { padding-bottom: 1.5em; } .wp-block-columns { margin-bottom: 1.75em; } h1.page-title { text-align: center; } .entry-content h3.has-text-align-center { padding-bottom: 0.5em; } p + h3 { padding-top: 30px; } /* Element Padding */ .pad-top { padding-top: 5%; } .pad-bottom { padding-bottom: 5%; } .pad-top-bottom { padding-top: 5%; padding-bottom: 5%; } .pad-left { padding-left: 5%; } .pad-right { padding-right: 5%; } .pad-left-right, .pad-default { padding-left: 5%; padding-right: 5%; } .pad-all { padding: 5%; } /* Backgrounds */ .whiteBG { background-color: #fff; } .whiteTransBG { background-color: var(--whiteTrans); } /* Colour Overlays */ .blackOverlay { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; } .blueOverlay { background-color: var(--blue); mix-blend-mode: multiply; content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; } /* Buttons */ a.button, #content a.button, a.wp-block-button__link, a.button.primary, #content a.button.primary, .wp-block-button.primary a.wp-block-button__link { background-color: var(--primary); color: #fff; font-size: var(--fs-normal); border-color: var(--primary); } a.button.secondary, #content a.button.secondary, .wp-block-button.secondary a.wp-block-button__link { background-color: var(--secondary); color: #000; border-color: var(--secondary); } a.button.black, #content a.button.black, .wp-block-button.black a.wp-block-button__link { background-color: var(--black); color: #fff; border-color: var(--black); } a.button.white, #content a.button.white, .wp-block-button.white a.wp-block-button__link { background-color: #fff; color: #000; border-color: #fff; } a.button.transparent, #content a.button.transparent, .wp-block-button.transparent a.wp-block-button__link { background-color: transparent; color: #fff; border-color: #fff; } a.button.outline, #content a.button.outline, .wp-block-button.outline a.wp-block-button__link { background-color: transparent; color: var(--primary); border-color: var(--primary); } a.button.large, #content a.button.large, .wp-block-button.large a.wp-block-button__link { font-size: var(--fs-button); font-weight: normal; padding: 15px 40px; } /*Buttons Hover*/ a.button:hover, #content a.button:hover, a.wp-block-button__link:hover, a.button.primary:hover, #content a.button.primary:hover, .wp-block-button.primary a.wp-block-button__link:hover { background-color: transparent; color: var(--primary); text-decoration: none; border-color: var(--primary); opacity: 1; } a.button.secondary:hover, #content a.button.secondary:hover, .wp-block-button.secondary a.wp-block-button__link:hover { background-color: transparent; color: var(--secondary); text-decoration: none; border-color: var(--secondary); opacity: 1; } a.button.black:hover, #content a.button.black:hover, .wp-block-button.black a.wp-block-button__link:hover { background-color: transparent; color: var(--black); border-color: var(--black); opacity: 1; } a.button.white:hover, #content a.button.white:hover, .wp-block-button.white a.wp-block-button__link:hover { background-color: transparent; color: #fff; border-color: #fff; opacity: 1; } a.button.transparent:hover, #content a.button.transparent:hover, .wp-block-button.transparent a.wp-block-button__link:hover { background-color: transparent; color: #fff; border-color: #fff; opacity: 0.4; } a.button.outline:hover, #content a.button.outline:hover, .wp-block-button.outline a.wp-block-button__link:hover { opacity: 0.4; } /*==================== Blocks ====================*/ /* ----- Panel Block ----- */ .panel.blue { background-color: var(--blue); } .panel.yellow { background-color: var(--yellow); } .panel.blueTrans { background-color: transparent; position: relative; } .panel.blueTrans::before { background-color: var(--blue); mix-blend-mode: multiply; content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; } .panel.blueTrans * { position: relative; z-index: 1; } .panel h2:nth-child(1) { line-height: 1; padding-bottom: 0.125em; } .panel h2 + h3, .panel h2 + h4 { font-size: var(--fs-h6); font-weight: normal; text-transform: uppercase; padding-bottom: 0.25em; } /* Panel Blockquotes */ .panel blockquote.wp-block-quote { text-align: center; } .panel blockquote.wp-block-quote p { color: #fff; font-size: var(--fs-h3); font-weight: bold; } .panel blockquote.wp-block-quote cite { font-size: var(--fs-small); line-height: normal; } .panel blockquote.wp-block-quote cite strong { font-size: var(--fs-h4); text-transform: none; } .panel .wp-block-image figcaption { color: #fff; } /* ----- Accordion Block ----- */ .c-accordion__title, .inner-content .c-accordion__title { background-color: var(--secondary); color: var(--black); font-size: var(--fs-normal); font-weight: bold; } /* ----- Content Block ----- */ .contentBlock.pink { background-color: var(--pink); } .contentBlock.blueTrans { background-color: transparent; position: relative; } .contentBlock.blueTrans::before { background-color: var(--blue); mix-blend-mode: multiply; content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; } .contentBlock.blueTrans * { position: relative; z-index: 1; } .contentBlock .wp-block-columns:last-of-type { margin-bottom: 0; } /* ----- Curved Block ----- */ .curvedBlock { background-color: transparent !important; position: relative; overflow: hidden; padding: 0; margin-left: unset !important; margin-right: unset !important; } .curvedBlock .inner-container { padding: 20px; } .curvedBlock h3 { font-size: var(--fs-h6); font-weight: 600; } .curvedBlock p:last-of-type { padding-bottom: 0; margin-bottom: 0; } .curvedBlock.leftAlign { align-self: flex-start; } .curvedBlock.leftAlign .inner-container { flex-flow: column; align-items: flex-start; } .curvedBlock .curve, .curvedBlock.leftAlign .curve { background-color: var(--blue); width: 100%; height: calc(100% + 40px); position: absolute; bottom: -40px; z-index: 1; border-top-right-radius: 100% 100%; } .curvedBlock.rightAlign { align-self: flex-end; } .curvedBlock.rightAlign .inner-container { flex-flow: column; align-items: flex-end; } .curvedBlock.rightAlign .curve { right: 0; border-top-left-radius: 100% 100%; border-top-right-radius: unset; } /* Content Block - Width */ .curvedBlock.full-width { margin: unset; width: 100%; } .curvedBlock.site-width { margin: unset; } .curvedBlock.inner-width { margin: unset; } .curvedBlock.post-width { margin: unset; } .curvedBlock.mobile-width { margin: unset; } /* Curved Block - Background Colour */ .curvedBlock.primary .curve { background-color: var(--primary); } .curvedBlock.secondary .curve { background-color: var(--secondary); } .curvedBlock.pink .curve { background-color: var(--pink); } .curvedBlock.white .curve { background-color: #fff; } .curvedBlock.black .curve { background-color: #000; } .curvedBlock.whiteTrans .curve { background-color: var(--whiteTrans); } .curvedBlock.blackTrans .curve { background-color: var(--blackTrans); } .curvedBlock.blackTrans .curve { background-color: var(--blueTrans); } /* Curved Block - Link/CTA */ a.curvedBlockLink { display: block; width: 100%; height: 100%; } a.curvedBlockLink:hover .curve { background-color: var(--secondary) !important; } /* ----- CTA Block ----- */ .ctaBlock { background-color: #fff; height: 100%; } /* CTA Block - Image */ .ctaBlock .ctaImage { width: 100%; display: flex; flex-flow: column; justify-content: flex-end; } .ctaWrap { display: flex; flex-direction: column; } .ctaImage { position: relative; padding-top: 66.66%; } .doubleWidth .ctaImage { padding-top: 33.33%; } .ctaImage div.image-container { position: absolute; height: 100%; width: 100%; line-height: 0; top: 0; left: 0; } .ctaImage img, #main .ctaImage img { width: 100%; height: 100%; object-fit: cover; } .ctaBlock .ctaContent { display: flex; flex-direction: column; flex-grow: 1; width: 100%; padding: 20px; border: 1px solid var(--blue); border-top: none; } .ctaBlock .line { background-color: var(--blueTrans); width: 25%; min-width: 100px; height: 12px; margin-bottom: 20px; } /* Lists - Bullet Points*/ .ctaBlock ul li, #content .ctaBlock ul li { list-style-type: none; position: relative; clear: both; margin-left: 30px; } .ctaBlock ul li::marker { content: ''; display: none; visibility: hidden; } .ctaBlock ul li::before { content: url(https://launchpadstortford.co.uk/wp-content/themes/SCGrid/library/images/blue-dash.svg); width: 10%; min-width: 10px; height: auto; max-width: 14px; display: block; position: absolute; top: -1px; left: -30px; } .ctaBlock ul li ul li::before { max-width: 12px; } .ctaBlock.pink ul li::before { content: url(https://launchpadstortford.co.uk/wp-content/themes/SCGrid/library/images/pink-dash.svg); } /* Buttons */ .ctaBlock .wp-block-buttons { justify-content: center; flex-grow: 1; align-items: flex-end; margin-top: 20px; margin-bottom: 20px; } /* CTA Block - Border Colour */ .ctaBlock.default .ctaContent { border-color: #fff; } .ctaBlock.primary .ctaContent { border-color: var(--primary); } .ctaBlock.secondary .ctaContent { border-color: var(--secondary); } .ctaBlock.pink .ctaContent { border-color: var(--pink); } .ctaBlock.white .ctaContent { border-color: var(--white); } .ctaBlock.black .ctaContent { border-color: var(--black); } /* CTA Block - Line & Button Colour */ .ctaContent.primary .line { background-color: var(--primary); } .ctaContent.secondary .line { background-color: var(--secondary); } .ctaContent.pink .line { background-color: var(--pink); } .ctaContent.white .line { background-color: #fff; } .ctaContent.black .line { background-color: #000; } .ctaContent a.button, #content .ctaContent a.button, .ctaContent a.wp-block-button__link { background-color: transparent; color: var(--primary); border-color: var(--primary); } .ctaContent a.button:hover, #content .ctaContent a.button:hover, .ctaContent a.wp-block-button__link:hover { opacity: 0.4; } .ctaContent.secondary a.button, #content .ctaContent.secondary a.button, .ctaContent.secondary a.wp-block-button__link { color: var(--secondary); border-color: var(--secondary); } .ctaContent.pink a.button, #content .ctaContent.pink a.button, .ctaContent.pink a.wp-block-button__link { color: var(--pink); border-color: var(--pink); } .ctaContent.white a.button, #content .ctaContent.white a.button, .ctaContent.white a.wp-block-button__link { color: var(--white); border-color: var(--white); } .ctaContent.black a.button, #content .ctaContent.black a.button, .ctaContent.black a.wp-block-button__link { color: var(--black); border-color: var(--black); } /* ----- Columns Block ----- */ .columnsBlock { gap: 30px; } .columnsBlock + * { margin-top: 1.75em; } .columnsBlock > div { margin-bottom: 0; } .columns-1 > div { width: 100%; flex-basis: 100%; } .columns-2 > div { width: calc(50% - 15px); flex-basis: calc(50% - 15px); } .columns-3 > div { width: calc(33.3333333333% - 20px); flex-basis: calc(33.3333333333% - 20px); } .columns-4 > div { width: calc(25% - 22.5px); flex-basis: calc(25% - 22.5px); } .columns-5 > div { width: calc(20% - 24px); flex-basis: calc(20% - 24px); } .columns-6 > div { width: calc(16.6666666667% - 25px); flex-basis: calc(16.6666666667% - 25px); } .columns-7 > div { width: calc(14.2857% - 25.71428571428571px); flex-basis: calc(14.2857% - 25.71428571428571px); } .columns-8 > div { width: calc(12.5% - 26.25px); flex-basis: calc(12.5% - 26.25px); } .columns-9 > div { width: calc(11.1111% - 26.66666666666667px); flex-basis: calc(11.1111% - 26.66666666666667px); } .columns-10 > div { width: calc(10% - 27px); flex-basis: calc(10% - 27px); } .columns-11 > div { width: calc(9.0909% - 27.27272727272727px); flex-basis: calc(9.0909% - 27.27272727272727px); } .columns-12 > div { width: calc(8.33333333333% - 27.5px); flex-basis: calc(8.33333333333% - 27.5px); } .columnsBlock div { height: unset; } @media (max-width: 1280px) { .columnsBlock .ctaBlock { width: calc(50% - 15px); flex-basis: calc(50% - 15px); } .columns-3 .ctaBlock { width: calc(33.3333333333% - 20px); flex-basis: calc(33.3333333333% - 20px); } } @media (max-width: 1029px) { /*Tablet*/ .columns-6 > div, .columns-9 > div, .columns-12 > div { width: calc(33.3333333333% - 20px); flex-basis: calc(33.3333333333% - 20px); } .columns-8 > div { width: calc(25% - 22.5px); flex-basis: calc(25% - 22.5px); } .columns-4 > div { width: calc(50% - 15px); flex-basis: calc(50% - 15px); } .columns-3 { justify-content: center; } .columns-3 .ctaBlock { width: calc(50% - 15px); flex-basis: calc(50% - 15px); } } @media (max-width: 781px) { /*Wordpress Tablet*/ .columns-6 > div, .columns-8 > div, .columns-10 > div, .columns-12 > div { width: calc(50% - 15px); flex-basis: calc(50% - 15px); } .columnsBlock .ctaBlock { width: 100%; flex-basis: 100%; } } @media (max-width: 600px) { /*WordPress Mobile*/ .columnsBlock > div, .columnsBlock .ctaBlock { width: 100%; flex-basis: 100%; } } /*==================== Home Page ====================*/ /* Home Featured Area */ .home .featuredArea { min-height: 100vh !important; border-bottom: 0; margin-bottom: 0; } @media (max-height: 600px) { .home .featuredArea { min-height: 600px !important; } } /* Solutions - CTA Blocks */ body.home .ctaBlock .ctaContent h3 { font-size: var(--fs-h6); font-weight: 600; padding-bottom: 0.25em; } /* Locations */ #locations .contentBlock.ThirtyTwo-to-Nine { min-height: 400px; } /*==================== Locations (Bishop's Stortford/Ware) Pages ====================*/ .panel.services .wp-block-columns .wp-block-column { text-align: center; display: flex; justify-content: center; } /*==================== Testimonials Page ====================*/ body.page-id-443 .ti-widget.ti-goog .ti-col-4 .ti-review-item { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } body.page-id-443 .ti-reviews-container-wrapper div.ti-review-item:nth-child(10) { display: none !important; } /*==================== Contact Us Page ====================*/ /* Ninja Form */ .nf-before-form-content { display: none; } .ninja-forms-req-symbol { display: none; } .nf-form-content .listselect-wrap .nf-field-element div, .nf-form-content .ninja-forms-field { font-size: 16px; margin: 0; padding: 12px; } .nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea { background: #f7f7f7; border: 1px solid #c4c4c4; border-radius: 0; box-shadow: none; color: #787878; transition: all .5s; } .nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] { background-color: var(--primary); color: #fff; font-size: 18px; font-weight: bold; width: fit-content; min-width: 210px; padding: 15px 20px; border: 1px solid var(--primary); border-radius: 3px; transition: all .5s; } .nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover { background: transparent; color: var(--primary); border: 1px solid var(--primary); transition: all .5s; } /* Form 1 - Footer */ #nf-form-1-cont { max-width: 80%; } #nf-form-1-cont nf-field:nth-of-type(1), #nf-form-1-cont nf-field:nth-of-type(2), #nf-form-1-cont nf-field:nth-of-type(3) { width: calc(33.3333333333% - 10px); float: left; } #nf-form-1-cont nf-field:nth-of-type(4), #nf-form-1-cont nf-field:nth-of-type(5) { width: calc(50% - 7.5px); float: left; } #nf-form-1-cont nf-field:nth-of-type(1) { margin-right: 10px; } #nf-form-1-cont nf-field:nth-of-type(2) { margin-left: 5px; margin-right: 5px; } #nf-form-1-cont nf-field:nth-of-type(3) { margin-left: 10px; } #nf-form-1-cont nf-field:nth-of-type(4) { margin-right: 7.5px; } #nf-form-1-cont nf-field:nth-of-type(5) { margin-left: 7.5px; } #nf-form-1-cont nf-field:nth-of-type(6) { width: 100%; float: left; } #nf-form-1-cont nf-field:nth-of-type(7) { width: 70%; float: left; } #nf-form-1-cont nf-field:nth-of-type(8) { width: 30%; float: left; } #nf-form-1-cont .nf-field-element textarea { height: 58px; line-height: 29px; } #nf-form-1-cont #nf-field-8-container .nf-field-label label { color: #fff; font-size: var(--fs-normal); font-weight: normal; } #nf-form-1-cont .field-wrap>div input[type=checkbox], #nf-form-1-cont .field-wrap button, #nf-form-1-cont .field-wrap input[type=button], #nf-form-1-cont .field-wrap input[type=submit] { font-size: 1em; font-weight: normal; text-align: left; width: 100%; height: 58px; min-width: unset; border-radius: 0px; } #nf-form-1-cont .nf-error-msg, #nf-form-1-cont .ninja-forms-req-symbol { color: var(--yellow); } #nf-form-1-cont .nf-error-required-error { font-size: 14px; position: absolute; } #nf-form-1-cont .nf-form-content .list-select-wrap .nf-field-element>div, #nf-form-1-cont .nf-form-content input:not([type=button]), #nf-form-1-cont .nf-form-content textarea, #nf-form-1-cont select { background: rgba(255,255,255,0.2); color: #fff !important; height: 58px; border-color: transparent; } #nf-form-1-cont .nf-form-content textarea { height: 116px; } #nf-form-1-cont .nf-form-content .list-select-wrap .nf-field-element>div::placeholder, .nf-form-content input:not([type=button])::placeholder, .nf-form-content textarea::placeholder { color: #fff !important; font-size: 1em; font-weight: normal; } #nf-form-1-cont select option { color: var(--black); } #nf-form-1-cont .nf-after-form-content { clear: both; float: right; } #nf-form-1-cont .nf-form-content button, #nf-form-1-cont .nf-form-content input[type=button], #nf-form-1-cont .nf-form-content input[type=submit] { background-color: transparent; color: #fff; width: auto; float: right; border: 1px solid #fff; border-radius: 3px; } #nf-form-1-cont .nf-form-content button:hover, #nf-form-1-cont .nf-form-content input[type=button]:hover, #nf-form-1-cont .nf-form-content input[type=submit]:hover { color: #fff; opacity: 0.4; } #nf-form-1-cont .nf-field-description { margin-right: 0; } #nf-form-1-cont .nf-field-description p, #nf-form-1-cont .nf-field-description a { font-size: var(--fs-small); } #nf-form-1-cont label#nf-label-field-8 { display: none; } /*==================== Footer ====================*/ #footer { background-color: transparent; position: relative; overflow: hidden; padding-top: 30px; } body.featuredAreaFixed #footer { background-color: var(--blackTrans); } body.featuredAreaFixed #footer.transparent_footer { background-color: transparent; } .footer-curve { background-color: var(--blue); width: 120%; height: 100%; position: absolute; z-index: 1; border-top-right-radius: 150% 100%; } .inner-footer { background-color: transparent; position: relative; z-index: 1; row-gap: 1.75em; padding: 75px 5% 25px 5%; } #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer p, #footer a { color: #fff; } #footer h6 { font-weight: 500; text-transform: uppercase; } #footer p, #footer a { font-size: var(--fs-normal); line-height: normal; } #footer .logoArea { width: 100%; gap: 1em; } #footer .logoArea img#east-herts { height: 80px; width: auto; } #footer #contact { -webkit-flex-flow: row; flex-wrap: nowrap; gap: 2em; } #footer .copy { max-width: 300px; display: flex; flex-direction: column; gap: 1.5em; } #footer .copy h2 { padding-bottom: 0; } #footer #details #stortford { padding-bottom: 0.5em; } #footer #details #ware { padding-bottom: 1.5em; } #footer #social { min-width: 300px; flex-direction: column; } #footer #social ul { gap: 15px; } #footer #social ul li a { color: #fff; font-size: 50px; } #footer #social ul li a:hover { opacity: 0.7; } #footer #legal { color: #fff; font-size: var(--fs-small); line-height: normal; width: 100%; justify-content: center; } #footer #legal a { font-size: var(--fs-small); } #footer .footer-logos { flex-grow: 1; align-items: center; justify-content: flex-end; align-self: flex-end; gap: 1em; } #footer .footer-logos img#erdf { height: 65px; width: auto; } #footer .footer-logos img#east-herts { height: 80px; width: auto; } a#booking { background-color: var(--yellow); color: var(--black); font-size: var(--fs-normal); font-weight: bold; text-align: center; width: 100%; display: block; clear: both; position: relative; padding: 15px 5%; } a#booking:hover { background-color: var(--black); color: #fff; } /*==================== Media Queries ====================*/ @media (max-width: 1439px) { /*.contentBlock .inner-width { padding-left: 0; padding-right: 0; }*/ } @media (max-width: 1280px) { /*Small Desktop*/ .ctaBlock.default .ctaContent { margin-top: -30px; } } @media (max-width: 1029px) { /*Tablet*/ .featuredArea .support p { font-size: var(--fs-h3); } #footer #contact { flex-direction: column; } .footer-curve { border-top-right-radius: 150% 25%; } #nf-form-1-cont { max-width: 1000px; } } @media (max-width: 960px) { /*Single Post Width*/ } @media (max-width: 781px) { .ctaBlock.default .ctaContent { margin-top: -40px; } } @media (max-width: 767px) { /*Mobile*/ .curvedBlock { max-width: 100% !important; min-width: 100% !important; } .curvedBlock .curve, .curvedBlock.leftAlign .curve, .curvedBlock.rightAlign .curve, .ctaBlock .ctaImage .curvedBlock .curve { width: 150%; } #footer .copy { max-width: 75%; } #footer .form { max-width: 100%; } } @media (max-width: 600px) { .featuredArea .support p { font-size: var(--fs-normal); } .curvedBlock h3 { font-size: var(--fs-h4); } .curvedBlock p { font-size: var(--fs-small); } .ctaBlock.default .ctaContent h3 { font-size: var(--fs-h3); } #footer .form { max-width: 100%; } ul.threeColumns, ol.threeColumns { column-count: 2; } } @media (max-width: 480px) { /*Small Mobile*/ .home .featuredArea { min-height: 600px !important; } .featuredArea .support { width: 100%; } .featuredArea .support p { font-size: var(--fs-small); } .ctaBlock.default .ctaContent { margin-top: -30px; } #nf-form-1-cont nf-field:nth-of-type(1), #nf-form-1-cont nf-field:nth-of-type(2), #nf-form-1-cont nf-field:nth-of-type(3), #nf-form-1-cont nf-field:nth-of-type(7), #nf-form-1-cont nf-field:nth-of-type(8) { width: 100%; margin-left: 0; margin-right: 0; } #nf-form-1-cont .nf-form-content button, #nf-form-1-cont .nf-form-content input[type=button], #nf-form-1-cont .nf-form-content input[type=submit] { width: 100%; text-align: center; } } @media (max-width: 330px) { ul.twoColumns, ol.twoColumns, ul.threeColumns, ol.threeColumns { column-count: 1; } }