/* Theme Name: The Brilliant Clean Team Author: Orqa Design Author URI: https://orqadesign.com/ Description: 2025 Custom built theme fo The Brilliant Clean Team Version: 1.0 License: For use by The Brilliant Clean Team Only /* /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ========================================================================== FONTS & ICONS ========================================================================== */ /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ .fas, .fab, .fab-brands { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .bullet-icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .fa-classic, .fa-regular, .fa-solid, .far, .fas { font-family: 'FontAwesome' !important; } .fa.fa-handshake-o { font-family: 'FontAwesome' !important; } .fontawesome { font-family: 'FontAwesome'; } /* ========================================================================== ADMIN / EDITOR ========================================================================== */ body#tinymce { font-family: 'Poppins', sans-serif; } * { -webkit-font-smoothing: antialiased; } /* ========================================================================== BASE / GLOBAL ========================================================================== */ html { scroll-behavior: smooth; overflow-x: hidden; } body { -webkit-font-smoothing: antialiased; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 18px; line-height: 28px; color: #fff; overflow-x: hidden; } div { box-sizing: border-box; } a { color: #ffffff; text-decoration: underline; font-weight: 700; } p { margin-bottom: 20px; } b { font-weight: 700; } strong { font-weight: 700; } em { font-style: italic; } .copy { font-size: 10px; line-height: 12px; text-transform: uppercase; letter-spacing: 2px; text-align: center; } footer { } #header { } /* ========================================================================== TYPOGRAPHY ========================================================================== */ .home h1, .home h2 { font-weight: 100; font-size: 50px; letter-spacing: -2px; } .home h3 { font-size: 24px; line-height: 50px; } h1 { font-size: 60px; line-height: 70px; font-weight: 100; padding-bottom: 20px; } .hero h2 { font-size: 30px!important; line-height: 30px; font-weight: 200!important; padding-top: 5px; } h3 { font-weight: 700; font-size: 18px; color: #78988b; padding-bottom: 10px; text-align: left; } .basic-page h2 { padding-bottom: 20px; font-size: 30px; } /* ========================================================================== LAYOUT HELPERS ========================================================================== */ .wrapper { width: 1680px; margin: 0 auto; } .inner-wrapper { width: 1300px; margin: 0 auto; } .left { float: left; } .right { float: right; } .clear { clear: both; float: none!important; } .tbct-icon { width: 70px; float: left; margin: 20px; } /* ========================================================================== HEADER / NAV ========================================================================== */ .cleaning header, .academy header, .cleaners header { width: 100%; float: left; z-index: 2; position: relative; } header a { opacity: 1; transition: opacity 0.4s ease; } header a:hover { opacity: 0.5; } .menu-icon img { width: 29px; height: 29px; } .show-mob { display: none; } .menu-main-menu-container, .subbrand-menu { float: left; padding-top: 30px; } .menu-main-menu-container a, .subbrand-menu a { text-transform: uppercase; text-decoration: none; } .menu-main-menu-container ul, .subbrand-menu ul { list-style: none; } .menu-main-menu-container li, .subbrand-menu li { padding: 10px; float: left; } #menu-icon { position: relative; color: #fff; display: none; font-family: "FontAwesome"; float: right; z-index: 200; font-size: 42px; margin-top: -55px; line-height: 40px; } #menu-icon a { color: #fff; } li#menu-item-44 { padding-left: 50px; padding-right: 100px; margin-top: -8px; } /* sparkle icon on the right of just this item */ #menu-item-44 > a { position: relative; display: inline-block; line-height: 44px; min-height: 44px; padding-right: 48px; background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle.png') no-repeat right 8px center; background-size: 38px 40px; background-origin: padding-box; } #menu-item-44 > a:hover, #menu-item-44 > a:focus, #menu-item-44 > a:active { background-image: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle.png'); } /* ========================================================================== FOOTER ========================================================================== */ footer { clear: both; padding-top: 10px; padding-bottom: 20px; } footer a { opacity: 1; transition: opacity 0.4s ease; } footer a:hover { opacity: 0.5; } .footer-left { float: left; } .footer-right { float: right; text-align: right; } footer .center { text-align: center; width: 100%; float: left; margin-top: -30px; font-size: 30px; } .home footer .left { margin: 0px; } .subpages footer { background-color: #fff; color: #78988b; } .subpages footer a { color: #78988b; text-decoration: none; font-weight: 400; } .subpages footer { text-align: center; padding-top: 100px; padding-bottom: 50px; } .subpages footer i { font-size: 36px; margin: 7px; padding-top: 100px; } .subpages .copy { font-weight: 400; padding-top: 30px; } .hook {padding-bottom: 20px; font-size: 22px; font-weight: 400;} /* ========================================================================== BUTTONS & LINKS ========================================================================== */ a.button { text-decoration: none; border: solid 3px #fff; display: inline-block; padding: 30px 20px 20px 20px; border-radius: 20px; transition: background-color .3s ease; } a.button.cleaning:hover { background-color: #fff; color: #78988b!important; } a.button.cleaners:hover { background-color: #fff; color: #e7b5a7!important; } a.button.academy:hover { background-color: #fff; color: #6d7e88!important; } a.button.cleaning h3:hover { color: #78988b!important; } a.button.cleaners h3:hover { color: #e7b5a7!important; } a.button.academy h3:hover { color: #6d7e88!important; } a.button.cleaning:hover h3 { color: #78988b!important; } a.button.cleaners:hover h3 { color: #e7b5a7!important; } a.button.academy:hover h3 { color: #6d7e88!important; } a.whitebg { border-radius: 40px; padding: 5px 50px 3px 20px; text-transform: uppercase; margin: 7px; margin-top: 7px; font-weight: 700; background-color: #fff; color: #78988b; text-decoration: navajowhite; margin-top: 30px; } a.whitebg:hover { opacity: 0.5; } a.whitebg { opacity: 1; transition: opacity 0.4s ease; } a.button.greenborder { border: solid 3px; border-radius: 40px; padding: 5px 50px 3px 20px; text-transform: uppercase; margin: 7px; font-weight: 700; } a.button.greenborder.question { padding: 5px 40px 5px 20px; } a.sparkle { position: relative; display: inline-block; padding-right: 52px; line-height: 44px; } a.sparkle::after { content: ""; position: absolute; top: 50%; right: 8px; width: 30px; height: 30px; transform: translateY(-50%); background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle-green.png') no-repeat center; background-size: contain; pointer-events: none; } a.question { position: relative; display: inline-block; padding-right: 32px; line-height: 44px; } a.question::after { content: ""; position: absolute; top: 50%; right: 8px; width: 38px; height: 40px; transform: translateY(-50%); background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/question.png') no-repeat center; background-size: contain; pointer-events: none; width: 17px; } .my-account .basic-page ul li:before { content: none; } /* Hide Price column in Bookly customer schedule (DataTables) */ .woocommerce-account table.bookly-appointments-list th[data-dt-column="5"], .woocommerce-account table.bookly-appointments-list td:nth-child(6) { display: none !important; } /* Keyframes */ @keyframes jiggle { 0% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-2px) rotate(-2deg); } 30% { transform: translateX(2px) rotate(2deg); } 45% { transform: translateX(-1.5px) rotate(-1.5deg); } 60% { transform: translateX(1.5px) rotate(1.5deg); } 75% { transform: translateX(-1px) rotate(-1deg); } 100% { transform: translateX(0) rotate(0); } } a.sparkle.jiggle-once, a.hands.jiggle-once { animation: jiggle 600ms ease-out 150ms 1 both; will-change: transform; } @media (prefers-reduced-motion: reduce) { a.sparkle.jiggle-once, a.hands.jiggle-once { animation: none; } } /* Invisible sentinel, just a 1px hook */ .sparkle-sentinel { width:1px; height:1px; pointer-events:none; } .bookly-form .text-bookly span { color: #000 ! Important;} .bookly-form .bookly-calendar-dates-mark .bg-bookly {background: #78988b!important;} /* 1) Keyframes for the icon jiggle */ @keyframes sparkle-jiggle { 0% { transform: translateY(-50%) translateX(0) rotate(0) scale(1); } 15% { transform: translateY(-50%) translateX(-2px) rotate(-8deg) scale(1.02); } 30% { transform: translateY(-50%) translateX(2px) rotate(8deg) scale(1.02); } 45% { transform: translateY(-50%) translateX(-1.5px) rotate(-6deg) scale(1.01); } 60% { transform: translateY(-50%) translateX(1.5px) rotate(6deg) scale(1.01); } 75% { transform: translateY(-50%) translateX(-1px) rotate(-4deg) scale(1); } 100% { transform: translateY(-50%) translateX(0) rotate(0) scale(1); } } .checkout .basic-page ul li:before {content: ''} #menu-item-44 > a::after { content: ""; position: absolute; top: 50%; right: 8px; width: 38px; height: 40px; transform: translateY(-50%); /* baseline */ background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle.png') no-repeat center / contain; pointer-events: none; /* plays once on page load */ animation: sparkle-jiggle 600ms ease-out 200ms 1 both; } .ti-footer-filter-text {display: none!important;} #menu-item-64 > a::after { content: ""; position: absolute; top: 50%; right: 8px; width: 38px; height: 40px; transform: translateY(-50%); /* baseline */ background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/hands.png') no-repeat center / contain; pointer-events: none; /* plays once on page load */ animation: sparkle-jiggle 600ms ease-out 200ms 1 both; } .hero__content a.sparkle::after { content: ""; position: absolute; top: 50%; right: 8px; width: 38px; height: 40px; transform: translateY(-50%); /* baseline */ background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle-green.png') no-repeat center / contain; pointer-events: none; /* plays once on page load */ animation: sparkle-jiggle 600ms ease-out 200ms 1 both; } .hero__content a.hands::after { content: ""; position: absolute; top: 50%; right: 8px; width: 38px; height: 40px; transform: translateY(-50%); /* baseline */ background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/hands-pink.png') no-repeat center / contain; pointer-events: none; /* plays once on page load */ animation: sparkle-jiggle 600ms ease-out 200ms 1 both; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #menu-item-44 > a::after { animation: none; } } .hero__content a.sparkle {} /* ========================================================================== BASIC PAGE CONTENT ========================================================================== */ .basic-page { color:#78988b; width: 100%; border-bottom: 2px solid; float: left; padding-top: 50px; padding-bottom: 50px; } .basic-page a { color: #78988b; } .basic-page ul { padding-left: 40px; list-style: none; padding-bottom:20px; } .basic-page ul li { margin-bottom: 8px; line-height: 24px; } .basic-page ul li:before { font-family: 'FontAwesome'; content: '\f05d'; margin: 0 20px 0 -39px; color: #78988b; font-size: 20px; } .basic-page ol { padding-left: 50px; padding-bottom: 20px; } .basic-page ol li { padding-left: 10px; } .basic-page ol li::marker { color: #78988b; font-weight: 800; font-family: 'Poppins', sans-serif; letter-spacing: -1px; } /* ========================================================================== HOME PAGE ========================================================================== */ .home .left { margin-left: 2%; margin-top: 150px; } .home .right { margin-right: 2%; margin-top: -135px; } body.home { background: linear-gradient( to right, #e7b5a7 0%, #e7b5a7 33.333%, #78988b 33.333%, #78988b 66.666%, #6d7e88 66.666%, #6d7e88 100% ); } img.logo { opacity: 0; transform: translateY(-100px); animation: fadeDown 2.5s ease-out forwards; animation-delay: 0.5s; } .home-logo { text-align: center; height: 90vh; padding-top: 100px; } .logowrapper { width: 100%; float: left; } .cleanersbutton { opacity: 0; animation: fadeIn1 1s ease forwards; animation-delay: 4s; } .cleaningbutton { opacity: 0; animation: fadeIn1 1s ease forwards; animation-delay: 3s; } .academybutton { opacity: 0; animation: fadeIn1 1s ease forwards; animation-delay: 5s; } .home-temp .left { margin-left: 2%; margin-top: 150px; } .home-temp .right { margin-right: 2%; margin-top: -154px; } body.home-temp { background: linear-gradient( to right, #e7b5a7 0%, #e7b5a7 33.333%, #78988b 33.333%, #78988b 66.666%, #6d7e88 66.666%, #6d7e88 100% ); } img.logo { opacity: 0; transform: translateY(-100px); animation: fadeDown 2.5s ease-out forwards; animation-delay: 0.5s; } .home-logo { text-align: center; height: 90vh; padding-top: 100px; } .home-temp h1, .home-temp h2,.homeh1, .home h2 {font-size: 50px; font-weight: 100; line-height: 50px; letter-spacing: -1px; padding-bottom: 0px;} .home-temp h3, .home h3 {font-weight: 700; font-size: 24px; color: #fff; text-align: center; padding-bottom: 20px; } .home footer .left {margin-top: 50px;} .home-temp footer .left {margin-top: 50px;} /* ========================================================================== CLEANING TEMPLATE ========================================================================== */ body.cleaning { color: #78988b; } .cleaning-template h3 { font-size: 60px; line-height: 60px; font-weight: 100; } .cleaning-template h2 { font-weight: 700; text-align: center; font-size: 24px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; padding-top: 50px; } .cleaning-template h4 { font-size: 24px; padding-top: 7px; padding-bottom: 5px; } .cleaning-template h5 { font-size: 18px; font-weight: 700; line-height: 20px; padding-top: 3px; } .grid3 div { padding-bottom: 70px; } .rule { --rule-rgb: 126 161 154; --rule-thickness: 2px; --rule-gap: clamp(8px, 2vw, 24px); display: flex; align-items: center; justify-content: center; gap: var(--rule-gap); font-weight: 300; margin: 5px; } .rule::before, .rule::after { content: ""; flex: 1 1 auto; height: var(--rule-thickness); background: linear-gradient(to right, rgba(var(--rule-rgb), 0), rgba(var(--rule-rgb), .35) 20%, rgba(var(--rule-rgb), .35) 80%, rgba(var(--rule-rgb), 0) ); transform: translateZ(0); background-color: #f5f8f7; height: 3px; } .rule::before { background: linear-gradient(to left, rgba(var(--rule-rgb), 0), rgba(var(--rule-rgb), .35) 20%, rgba(var(--rule-rgb), .35) 80%, rgba(var(--rule-rgb), 0) ); background-color: #f5f8f7; height: 3px; } .rule > span { display: inline-block; white-space: nowrap; line-height: 1.2; } /* Cleaning hero */ .hero--cleaning { position: relative; isolation: isolate; padding-top: 100px; margin-top: -110px; } .hero--cleaning { background-size: 110% 110%; background-position: center center; animation: shrink 5s infinite alternate; height: 800px; background-image: url(/wp-content/themes/thebrilliantcleanteam-theme/images/cleaning-duotone.jpg); } .hero--cleaning::after, .hero--cleaning::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, transparent); } .hero__content, .hero__content { position: absolute; z-index: 2; color: #fff; top: 150px; left: 0; right: 0; margin-inline: auto; width: fit-content; text-align: center; } /* ========================================================================== ACADEMNY TEMPLATE ========================================================================== */ .academy .hero--cleaning { background-size: 110% 110%; background-position: center center; animation: shrink 5s infinite alternate; height: 800px; background-image: url(/wp-content/themes/thebrilliantcleanteam-theme/images/academy-duotone.jpg); } .menu-academy li#menu-item-58 {padding-right: 100px;} .academy a.whitebg {display: inline-block; padding: 10px 30px 10px 30px; color: #677983;} .academy-template footer {color: #677983;} .academy-template footer a {color: #677983;} a.button.blueborder { border: solid 3px; border-radius: 40px; text-transform: uppercase; margin: 7px; font-weight: 700; display: inline-block; padding: 13px 30px 13px 30px; } a.button.blueborder.question { padding: 5px 40px 5px 20px; } .academy-template a.question:after { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/question-blue.png') no-repeat center;} /* ========================================================================== CLEANERS TEMPLATE ========================================================================== */ .cleaners-template .hero--cleaning { background-size: 110% 110%; background-position: center center; animation: shrink 5s infinite alternate; height: 800px; background-image: url(/wp-content/themes/thebrilliantcleanteam-theme/images/cleaners-duotone.jpg); } #menu-item-64 > a { position: relative; display: inline-block; line-height: 41px; min-height: 43px; padding-right: 48px; background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/hands.png') no-repeat right 8px center; background-size: 38px 40px; background-origin: padding-box; } #menu-item-64 > a:hover, #menu-item-64 > a:focus, #menu-item-64 > a:active { background-image: url('/wp-content/themes/thebrilliantcleanteam-theme/images/hands.png'); } a.hands { position: relative; display: inline-block; padding-right: 52px; line-height: 44px; } a.hands::after { content: ""; position: absolute; top: 50%; right: 8px; width: 31px; height: 33px; transform: translateY(-50%); background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/hands-pink.png') no-repeat center; background-size: contain; pointer-events: none; } #menu-item-64{ padding-left: 50px; padding-right: 100px; margin-top: -8px; } .cleaners-template footer {color: #dea59a;} .cleaners-template footer a {color: #dea59a;} a.hands {color: #dea59a;} .cleaners-template a.question:after { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/question-pink.png') no-repeat center;} .cleaners-template {color: #dea59a} .cleaners-template .story { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/bubbles-pink.png') no-repeat; background-size: 438px 438px; text-align: center; font-size: 24px; line-height: 36px; padding-top: 100px; padding-bottom: 220px; background-position: right 40px top 190px; } .cleaners-template .process { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/bubbles-pink.png') no-repeat; background-size: 438px 438px; text-align: center; background-position: right -130px top 0px; font-size: 24px; line-height: 36px; } .cleaners-template .otherbubbles { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/bubbles-pink2.png') no-repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: 438px 438px; text-align: center; background-position: left -190px top 0px; height: 500px; margin-top: -400px; } .cleaners-template h3 {color: #dea59a} .cleaners-template .rule-fullwidth {background-color: #f9edea;} .cleaners-template .rule { --rule-rgb: 126 161 154; --rule-thickness: 2px; --rule-gap: clamp(8px, 2vw, 24px); display: flex; align-items: center; justify-content: center; gap: var(--rule-gap); margin: 5px; } .cleaners-template .rule::before, .cleaners-template .rule::after { content: ""; flex: 1 1 auto; height: var(--rule-thickness); background: linear-gradient(to right, rgba(var(--rule-rgb), 0), rgba(var(--rule-rgb), .35) 20%, rgba(var(--rule-rgb), .35) 80%, rgba(var(--rule-rgb), 0) ); transform: translateZ(0); background-color: #f9edea; height: 3px; } .cleaners-template .rule::before { background: linear-gradient(to left, rgba(var(--rule-rgb), 0), rgba(var(--rule-rgb), .35) 20%, rgba(var(--rule-rgb), .35) 80%, rgba(var(--rule-rgb), 0) ); background-color: #f9edea; height: 3px; } .terms .solutions-wrap .left, .terms .solutions-wrap .right { background: none; background-color: #f9edea; } .terms .solution-bubble { background: #dea59a;} .terms ul.home-cleaning-services li:nth-child(2) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/cleaners-1.png'); } .terms ul.home-cleaning-services li:nth-child(3) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/cleaners-2.png'); } .terms ul.commerical-cleaning-services li:nth-child(2) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/cleaners-3.png'); } .terms ul.commerical-cleaning-services li:nth-child(3) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/cleaners-4.png'); } .terms ul.commerical-cleaning-services h2 { margin-top: 0px; text-align: right; } .terms ul.commerical-cleaning-services {width: 85%} .terms .solution-bubble { top: 200px; } .terms .solutions-wrap .left, .terms .solutions-wrap .right { min-height: 450px; } .cleaners-template .process p {width: 70%; margin: auto;} .cleaners-template .bubble { background: #f9edea; color: #dea59a; } .cleaners-template .carousel__btn { color: #dea59a; } .cleaners-template .hassel-free-process h2 {font-size: 43px; line-height: 50px;} .cleaners-template .hassel-free-process { background-color: #dea59a; font-weight: 100; } .cleaners-template .subpages footer {padding-top: 0px;} .from-cleaners .entry-content { color: #0ea5e9; } /* example colour */ .from-academy .entry-content { color: #8b5cf6; } /* ========================================================================== SECTIONS / CONTENT BLOCKS ========================================================================== */ .story { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/bubbles.png') no-repeat; background-size: 438px 438px; text-align: center; font-size: 24px; line-height: 36px; padding-top: 100px; padding-bottom: 220px; background-position: right 40px top 190px; } .cleaning-template h1 { font-size: 44px; line-height: 48px; letter-spacing: -1px; font-weight: 700; padding-top: 80px; padding-bottom: 0px; } .centre.cleaningbutton { text-align: center; width: 360px; margin: auto; margin-top: auto; margin-top: 150px; } .process { text-align: center; padding-top: 80px; padding-bottom: 80px; } .process h3 { text-align: center; padding-bottom: 30px; } .hassel-free-process a.whitebg { font-size: 18px; } .hassel-free-process { background-color: #78988b; color: #fff; padding-top: 80px; padding-bottom: 80px; } .hassel-free-process h2 { font-size: 48px; font-weight: 400; padding-bottom: 40px; } .process { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/bubbles.png') no-repeat; background-size: 438px 438px; text-align: center; background-position: right -130px top 0px; font-size: 24px; line-height: 36px; } .otherbubbles { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/bubbles2.png') no-repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: 438px 438px; text-align: center; background-position: left -190px top 0px; height: 500px; margin-top: -400px; } .proof { padding-bottom: 50px; } .local { font-size: 14px; font-weight: 400; letter-spacing: 1px; } .tagline { font-size: 72px; font-weight: 100; line-height: 72px; padding-top: 60px; padding-bottom: 30px; } /* ========================================================================== SOLUTIONS / BUBBLE / CAROUSEL ========================================================================== */ .solutions-wrap { position: relative; } .solutions-wrap .left, .solutions-wrap .right { width: 50%; padding-top: 40px; padding-bottom: 40px; } .solutions-wrap .left { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-solutions-bg.jpg') center / cover no-repeat; } .solutions-wrap .right { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-solutions-bg.jpg') center / cover no-repeat; } .solution-bubble { position: absolute; left: 50%; top: 350px; transform: translate(-50%, -50%); z-index: 10; padding: 10px; aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; background: #78988b; color: #fff; font-weight: 700; font-size: 24px; pointer-events: none; } .rule-fullwidth { background-color: #f5f8f7; height: 3px; width: 100%; margin-bottom: 20px; margin-top: 20px; } /* Carousel */ .carousel { --spv: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; max-width: 1440px; margin: 2rem auto; } .carousel__viewport { overflow: hidden; width: 100%; } .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / var(--spv)); transition: transform .35s ease; will-change: transform; margin: 0; padding: 0; list-style: none; } .carousel__slide { display: grid; place-items: center; padding: clamp(16px, 3vw, 28px); } .bubble { width: clamp(420px, 24vmin, 200px); aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; gap: .35rem; text-align: center; background: #f5f8f7; color: #78988b; padding: 1rem; } .bubble__num { font-weight: 700; font-size: 100px; padding-top: 70px; } .bubble__text { width: 80%; margin-top: -100px; font-size: 18px; line-height: 22px; } .carousel__btn { appearance: none; border: 0; background: none; color: #78988b; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 90px; } .carousel__btn:disabled { opacity:.4; cursor: default; } @media (hover:hover){ .carousel__btn:hover{ transform: scale(1.06); } } /* ========================================================================== LISTS WITH ICON BULLETS ========================================================================== */ /* Base list reset + spacing */ ul.home-cleaning-services, ul.commerical-cleaning-services { list-style: none; margin: 0; padding: 0; padding-left: 40px; float: left; padding: 5% 20%; width: 100%; box-sizing: border-box; } ul.home-cleaning-services h2, ul.commerical-cleaning-services h2 { text-align: left; font-size: 45px; line-height: 45px; letter-spacing: -2px; margin-left: -30px; padding-bottom: 20px; } ul.commerical-cleaning-services h2 {margin-top: -45px;} ul.home-cleaning-services li, ul.commerical-cleaning-services li { position: relative; margin: 20px 0; padding-left: 2.5rem; line-height: 22px; } ul.home-cleaning-services li::before { content: ""; position: absolute; left: -30px; top: 0.15rem; width: 47px; height: 47px; background: no-repeat center / contain var(--icon); } ul.commerical-cleaning-services li::before { content: ""; position: absolute; left: -30px; top: 0.15rem; width: 47px; height: 47px; background: no-repeat center / contain var(--icon); } /* Assign a different icon per item using :nth-child() */ ul.home-cleaning-services li:nth-child(2) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-1.png'); } ul.home-cleaning-services li:nth-child(3) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-2.png'); } ul.home-cleaning-services li:nth-child(4) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-3.png'); } ul.home-cleaning-services li:nth-child(5) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-4.png'); } ul.home-cleaning-services li:nth-child(6) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-5.png'); } ul.home-cleaning-services li:nth-child(7) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-6.png'); } ul.home-cleaning-services li:nth-child(8) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-7.png'); } ul.home-cleaning-services li:nth-child(9) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/home-8.png'); } ul.commerical-cleaning-services li:nth-child(2) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-1.png'); } ul.commerical-cleaning-services li:nth-child(3) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-2.png'); } ul.commerical-cleaning-services li:nth-child(4) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-3.png'); } ul.commerical-cleaning-services li:nth-child(5) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-4.png'); } ul.commerical-cleaning-services li:nth-child(6) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-5.png'); } ul.commerical-cleaning-services li:nth-child(7) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-6.png'); } ul.commerical-cleaning-services li:nth-child(8) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-7.png'); } ul.commerical-cleaning-services li:nth-child(9) { --icon: url('/wp-content/themes/thebrilliantcleanteam-theme/images/office-8.png'); } .cleaning .subpages footer {padding-top: 0px;} /* ========================================================================== SOCIAL ICON FIXES ========================================================================== .fa-facebook::before { content: "\f39e"!important; }*/ /* ========================================================================== TEMP/HIDE FOR SPECIFIC PAGES (REMOVE WHEN LIVE) ========================================================================== */ .refer-a-friend-offer-terms header .menu-main-menu-container, .refer-a-friend-offer-terms header .menu-cleaning-menu-container { display: none; } .privacy-policy header .menu-main-menu-container, .privacy-policy header .menu-cleaning-menu-container { display: none; } .terms-and-conditions header .menu-main-menu-container, .terms-and-conditions header .menu-cleaning-menu-container { display: none; } .refer-a-friend-offer-terms footer a.button, .privacy-policy footer a.button { display: none; } .terms-and-conditions footer a.button { display: none; } .terms-and-conditions header, .refer-a-friend-offer-terms header, .privacy-policy header, .site-map header, .page-not-found header, .refund_returns header, .end-of-tenancy header, .end-of-tenancy-cleaning-terms-conditions header {background: #78988b; width: 100%; float: left;} .site-map header .menu-main-menu-container, .site-map header .menu-cleaning-menu-container { display: none; } .site-map footer a.button { display: none; } /* ========================================================================== THEME - FROM CLEANERS/ACADEMT ========================================================================== */ .my-account.from-cleaners header, .terms-and-conditions.from-cleaners header, .refer-a-friend-offer-terms.from-cleaners header, .privacy-policy.from-cleaners header, .site-map.from-cleaners header {background:#dea59a;} .my-account.from-cleaners .basic-page, .terms-and-conditions.from-cleaners .basic-page, .refer-a-friend-offer-terms.from-cleaners .basic-page, .privacy-policy.from-cleaners .basic-page, .site-map.from-cleaners .basic-page {color: #dea59a;} .my-account.from-cleaners .subpages footer, .terms-and-conditions.from-cleaners .subpages footer, .refer-a-friend-offer-terms.from-cleaners .subpages footer, .privacy-policy.from-cleaners .subpages footer, .site-map.from-cleaners .subpages footer {color: #dea59a;} .my-account.from-cleaners h3, .terms-and-conditions.from-cleaners h3, .refer-a-friend-offer-terms.from-cleaners h3, .privacy-policy.from-cleaners h3, .site-map.from-cleaners h3 {color: #dea59a;} .terms-and-conditions.from-cleaners .basic-page ul li:before {color: #dea59a;} .refer-a-friend-offer-terms.from-cleaners .basic-page ul li:before {color: #dea59a;} .privacy-policy.from-cleaners .basic-page ul li:before {color: #dea59a;} .site-map.from-cleaners .basic-page ul li:before {color: #dea59a;} .my-account.from-cleaners .socials a, .terms-and-conditions.from-cleaners .socials a, .refer-a-friend-offer-terms.from-cleaners .socials a, .privacy-policy.from-cleaners .socials a, .site-map.from-cleaners .socials a {color: #dea59a!important;} .terms-and-conditions.from-cleaners footer img {filter: brightness(0) saturate(100%) invert(99%) sepia(36%) saturate(4560%) hue-rotate(293deg) brightness(101%) contrast(74%);} .refer-a-friend-offer-terms.from-cleaners footer img {filter: brightness(0) saturate(100%) invert(99%) sepia(36%) saturate(4560%) hue-rotate(293deg) brightness(101%) contrast(74%);} .site-map.from-cleaners footer img {filter: brightness(0) saturate(100%) invert(99%) sepia(36%) saturate(4560%) hue-rotate(293deg) brightness(101%) contrast(74%);} .privacy-policy.from-cleaners footer img {filter: brightness(0) saturate(100%) invert(99%) sepia(36%) saturate(4560%) hue-rotate(293deg) brightness(101%) contrast(74%);} .terms-and-conditions.from-cleaners .subpages footer a, .refer-a-friend-offer-terms.from-cleaners .subpages footer a, .privacy-policy.from-cleaners .subpages footer a, .site-map.from-cleaners .subpages footer a { color: #dea59a;} .site-map.from-cleaners a {color: #dea59a;} .site-map.from-academy a {color: #677983;} .woocommerce header {background: transparent!important;} .my-account.from-cleaners .woocommerce form .form-row .input-text, .my-account.from-cleaners .woocommerce form .form-row select { border: solid #dea59a !important; color: #dea59a !important; } .my-account.from-cleaners .woocommerce .woocommerce-form-login .woocommerce-form-login__submit { border: solid 3px; border-radius: 10px; padding: 10px 20px 10px 20px; text-transform: uppercase; font-weight: 700; color: #fff; background: #dea59a; } .my-account.from-cleaners .basic-page a, .my-account.from-cleaners .copy a, .my-account.from-cleaners .copy { color: #dea59a; } .cleaners .copy {color: #dea59a!Important;} .my-account.from-cleaners a.sparkle, .my-account.from-cleaners a.question {display: none;} .my-account.from-cleaners footer img { filter: brightness(0) saturate(100%) invert(99%) sepia(36%) saturate(4560%) hue-rotate(293deg) brightness(101%) contrast(74%); } .my-account.is-cleaner header {background:#dea59a;} .woocommerce-account.cleaner-account, .woocommerce-account.cleaner-account a {color: #dea59a} .my-account.is-cleaner footer, .my-account.is-cleaner footer a, .my-account.is-cleaner footer .copy, .my-account.is-cleaner footer .copy a {color: #dea59a; } .my-account.is-cleaner footer a.button { color: #dea59a; border: solid 3px #dea59a;} .my-account.is-cleaner a.question:after { background: url(/wp-content/themes/thebrilliantcleanteam-theme/images/question-pink.png) no-repeat center; } .my-account.is-cleaner .woocommerce form .form-row .input-text, .my-account.is-cleaner .woocommerce form .form-row select { border: initial; color: initial; } .my-account.is-cleaner h3.bookly-js-staff-name {color:#dea59a } .bookly-staff-cabinet {font-family: 'Poppins', sans-serif!important; font-size: 18px!important; font-weight: 400!important; color:#dea59a!important; } .bookly-staff-cabinet-appointments { font-size: 16px !important; line-height: 16px !important; } .my-account.is-cleaner .woocommerce form .form-row .input-text, .my-account.is-cleaner .woocommerce form .form-row select { border: solid #dea59a !important; color: #dea59a !important; } .woocommerce-account.cleaner-account {padding-top: 50px; padding-bottom: 50px;} .my-account em { font-size: 12px; } #bookly-tbs .text-muted { color: #dea59a !important; } .woocommerce-account.cleaner-account #bookly-tbs .form-control {color: #dea59a !important;} #bookly-tbs .btn-success, #bookly-tbs .daterangepicker.show-calendar .drp-buttons .btn-primary { color: #fff; background-color: #dea59a; border-color: #dea59a; font-family: 'Poppins', sans-serif!important; } header.woocommerce-Address-title.title {background: transparent!important;} .terms-and-conditions.from-academy header, .refer-a-friend-offer-terms.from-academy header, .privacy-policy.from-academy header, .site-map.from-academy header {background:#677983;} .terms-and-conditions.from-academy .basic-page, .refer-a-friend-offer-terms.from-academy .basic-page, .privacy-policy.from-academy .basic-page, .site-map.from-academy .basic-page {color: #677983;} .terms-and-conditions.from-academy .subpages footer, .refer-a-friend-offer-terms.from-academy .subpages footer, .privacy-policy.from-academy .subpages footer, .site-map.from-academy .subpages footer {color: #677983;} .terms-and-conditions.from-academy h3, .refer-a-friend-offer-terms.from-academy h3, .privacy-policy.from-academy h3, .site-map.from-academy h3 {color: #677983;} .terms-and-conditions.from-academy .basic-page ul li:before {color: #677983;} .refer-a-friend-offer-terms.from-academy .basic-page ul li:before {color: #677983;} .privacy-policy.from-academy .basic-page ul li:before {color: #677983;} .site-map.from-academy .basic-page ul li:before {color: #677983;} .terms-and-conditions.from-academy .socials a, .refer-a-friend-offer-terms.from-academy .socials a, .privacy-policy.from-academy .socials a, .site-map.from-academy .socials a {color: #677983!important;} .terms-and-conditions.from-academy footer img {filter: brightness(0) saturate(100%) invert(54%) sepia(28%) saturate(242%) hue-rotate(157deg) brightness(80%) contrast(87%);} .refer-a-friend-offer-terms.from-academy footer img {filter: brightness(0) saturate(100%) invert(54%) sepia(28%) saturate(242%) hue-rotate(157deg) brightness(80%) contrast(87%);} .site-map.from-academy footer img {filter: brightness(0) saturate(100%) invert(54%) sepia(28%) saturate(242%) hue-rotate(157deg) brightness(80%) contrast(87%);} .privacy-policy.from-academy footer img {filter: brightness(0) saturate(100%) invert(54%) sepia(28%) saturate(242%) hue-rotate(157deg) brightness(80%) contrast(87%);} .terms-and-conditions.from-academy .subpages footer a, .refer-a-friend-offer-terms.from-academy .subpages footer a, .privacy-policy.from-academy .subpages footer a, .site-map.from-academy .subpages footer a { color: #677983;} /* Bank panel wrapper */ .bct-bank-panel { border: 1px solid #e5e5e5; border-radius: 12px; padding: 16px 18px 18px; margin: 24px 0; background: #faf9f7; font-size: 14px; } .bct-bank-panel h3 { margin-top: 0; margin-bottom: 4px; font-size: 18px; font-weight: 600; } .bct-bank-panel h4 { margin-top: 16px; margin-bottom: 6px; font-size: 15px; font-weight: 600; } .bct-bank-panel p { margin: 4px 0 8px; } /* Credits pill */ .bct-bank-panel #bct-credits { display: inline-block; min-width: 32px; padding: 2px 8px; margin-left: 4px; border-radius: 999px; background: #e0f4ec; /* soft green */ color: #186348; font-weight: 600; text-align: center; } /* Table */ .bct-bank-panel .bct-table { width: 100%; border-collapse: collapse; margin-top: 8px; margin-bottom: 8px; font-size: 13px; } .bct-bank-panel .bct-table th, .bct-bank-panel .bct-table td { padding: 8px 6px; border-bottom: 1px solid #eee; } .bct-bank-panel .bct-table th { text-align: left; font-weight: 600; color: #555; } .bct-bank-panel .bct-table tr:last-child td { border-bottom: none; } /* Button styles – lean on Woo styling but tweak slightly */ .bct-bank-panel .button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; border: 1px solid #1f7f63; background: #219f78; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .bct-bank-panel .button:hover { background: #1c8e6b; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .bct-bank-panel .button:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Secondary actions */ .bct-bank-panel .bct-use-extend { margin-top: 4px; margin-bottom: 6px; } .bct-bank-panel input[type="datetime-local"] { padding: 4px 6px; border-radius: 6px; border: 1px solid #ddd; font-size: 13px; margin-right: 6px; } .bct-bank-panel em { color: #777; font-size: 12px; } /* Small list for use-credit options */ .bct-bank-panel ul { list-style: none; padding-left: 0; margin: 4px 0; } .bct-bank-panel li + li { margin-top: 6px; } /* ========================================================================== BOOKING PAGE ========================================================================== */ .tabs [role="tablist"] { display:flex; gap:.5rem; border-bottom:2px solid #e6ece9; } .tabs [role="tab"] { appearance:none; background:transparent; border:none; cursor:pointer; text-align: left; padding:.6rem 1rem; border-bottom:2px solid transparent; font-size: 40px; font-weight: 700; line-height: 40px; font-family: 'Poppins', sans-serif; color: #78988b; } .tabs [role="tab"][aria-selected="true"] { border-color: #78988b; font-weight: 700; } .tabs [role="tabpanel"] { padding:1rem 0; } .tabs [role="tab"]:focus-visible { outline:2px solid; outline-offset:2px; } /* Add this to your existing CSS */ .tabs [role="tabpanel"] { opacity: 0; transition: opacity .25s ease; } /* Keep hidden panels out of layout */ .tabs [role="tabpanel"][hidden] { display: none; } /* Visible (active) panel fades in */ .tabs [role="tabpanel"].is-visible { opacity: 1; } .bookings.cleaning header, .bookings.cleaning .form-area {background-color: #78988b;} .bookings.cleaning .form-area {color: #fff;} .tabs h3 { font-size: 30px; line-height: 40px;} .tabs ul, .tabs ol { margin: 0 0 1em 1.25em; /* left indent and bottom gap */ padding: 0; } .tabs li { margin: 0.25em 0; line-height: 1.6; } .bookly-box.bookly-nav-steps button { --outer: 3px!important; /* outer border thickness */ --inner: 1.5px!important; /* inner border thickness */ --gap: 6px!important; /* space between borders */ display:inline-block!important; position:relative!important; padding:.8rem 1.4rem!important; border:var(--outer) solid #fff!important; border-radius:9999px!important; background:transparent!important; color: currentColor!important; /* inherits from parent */ font-weight:700!important; letter-spacing:.06em!important; text-transform:uppercase!important; text-decoration:none!important; line-height:1!important; } .bookly-box.bookly-nav-steps button span {color: #78988b!Important;} /* inner border */ .bookly-box.bookly-nav-steps button::after{ content:""!important; position:absolute!important; inset: calc(var(--outer) + var(--gap))!important; border: var(--inner) solid #fff!important; border-radius:9999px!important; pointer-events:none!important; background: #fff; } /* Optional hover (keeps transparent) */ .bookly-box.bookly-nav-steps button:hover{ filter: brightness(1.06)!important; } .form-area {padding-bottom: 80px;} .tabs-area {padding-top: 40px; padding-bottom: 80px;} #table_0 {width: 100%;} #table_0 th {text-align: left; font-weight: 700; line-height: 20px; padding: 10px;} .bookly-form-group select { border-radius: 6px !important; padding: 10px 12px !important; font-size: 16px !important; color: #fff !important; width: 100% !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; cursor: pointer; } /* Focus state */ .bookly-form-group select:focus { outline: none !important; border-color: #78988b !important; } /* Dropdown options */ .bookly-form-group select option { background-color: #fff !important; color: #333 !important; border-color: #fff!important; } /* Hovered option (supported in most browsers) */ .bookly-form-group select option:hover { border-color: #fff!important; } /* Selected option */ .bookly-form-group select option:checked { border-color: #fff!important; } .bookly-form .bookly-progress-tracker > .active .step, .bookly-form .bookly-columnizer .bookly-hour:active .bookly-hour-icon span, .bookly-form .bookly-btn, .bookly-form .bookly-btn:active, .bookly-form .bookly-btn:focus, .bookly-form .bookly-btn:hover, .bookly-form .bookly-btn-submit, .bookly-form .bookly-round, .bookly-form .bookly-pagination > li.active, .bookly-form .bg-bookly, .bookly-form .hover\:bg-bookly:hover, .bookly-form .bg-bookly-not-hover:not(:hover) { background-color: #ffffff!important; } .bookly-form .bookly-form-group > label, .bookly-form .bookly-label-error, .bookly-form .bookly-progress-tracker > .active, .bookly-form .bookly-columnizer .bookly-hour span.bookly-waiting-list, .bookly-form .hover\:text-bookly:hover, .bookly-form .text-bookly:not(:hover), .bookly-form .hover\:text-bookly:hover { color: #fff!important; } .bookly-form .bookly-form-group > label, .bookly-form .bookly-label-error, .bookly-form .bookly-progress-tracker > .active, .bookly-form .bookly-columnizer .bookly-hour span.bookly-waiting-list, .bookly-form .hover\:text-bookly:hover, .bookly-form .text-bookly:not(:hover), .bookly-form .hover\:text-bookly:hover { color: #fff!important; } .bookly-form .bookly-columnizer .bookly-day, .bookly-form .bookly-schedule-date { background: var(--bookly-main-color) !important; border: 1px solid var(--bookly-main-color) !important; } .bookly-form .bookly-columnizer .bookly-day, .bookly-form .bookly-schedule-date { background: #78988b !important; border: 1px solid #fff !important; } #bookly-js-address .bookly-box {width: 32.1%!important; float: left!important; margin-right: 15px!important;} #bookly-js-address .bookly-box.bookly-bold {width: 100%!Important;} .bookly-custom-fields-container { width: 32%; float: left; } .bookly-custom-fields-container .bookly-box { width: 100%; } .bookings .menu-item-38, .bookings .menu-item-39, .bookings .menu-item-40, .bookings .menu-item-41, .bookings .menu-item-44 {display: none!important;} .join-the-team .menu-item-65, .join-the-team .menu-item-59, .join-the-team .menu-item-60, .join-the-team .menu-item-61, .join-the-team .menu-item-64 {display: none!important;} .bookly-details-step > :nth-last-child(-n + 2 of .bookly-box) { width: 100%; float: left; } .bookly-checkbox-group > input[type="checkbox"] + label > i { border: 2px solid #fff!important; } /* Hide the whole Reschedule column in customer My Cleaning Schedule .customer-account .bookly-appointments-list thead th[aria-label="Reschedule"], .customer-account .bookly-appointments-list tbody td:nth-child(8) { display: none !important; } Also hide any stray Reschedule buttons in responsive/stacked rows .customer-account .bookly-appointments-list button[data-target*="customer-cabinet-reschedule-dialog"] { display: none !important; } */ .bookly-box.bookly-nav-steps {clear: both;} .basket header, .checkout header, .my-account header {background: #78988b; width: 100%; float: left;} .wp-block-woocommerce-empty-cart-block h2:nth-of-type(2) {display: none;} .wp-block-woocommerce-empty-cart-block .wc-block-grid {display: none;} .wp-block-woocommerce-empty-cart-block .wp-block-separator {display: none;} .wp-block-woocommerce-empty-cart-block h2 {text-align: center;} .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt { background-color: #78988b!important; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select { border: solid #78988b!important; color: #78988b!important; } #panel-2 a {color: #dea59a;} .woocommerce form .form-row label { font-size: 14px!important; font-weight: 600!important; } /* Shared font + height for fields & buttons */ .bct-bank-panel select, .bct-bank-panel input[type="date"], .bct-bank-panel input[type="time"], .bct-bank-panel .button.bct-use-extend, .bct-bank-panel .button.bct-use-new{ font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; height: 40px; padding: 0 0.75rem; font-size: 0.9rem; line-height: 1; /* stops them looking taller than 40px */ box-sizing: border-box; vertical-align: middle; } /* Inputs & selects */ .bct-bank-panel select, .bct-bank-panel input[type="date"], .bct-bank-panel input[type="time"]{ min-width: 170px; border: 1px solid #78988b; background: #fff; color: #3d2e2a; appearance: none; } .bct-bank-panel select:focus, .bct-bank-panel input[type="date"]:focus, .bct-bank-panel input[type="time"]:focus{ outline: none; border-color: #78988b; box-shadow: 0 0 0 2px rgba(120,152,139,0.25); } /* Buttons aligned with fields */ .bct-bank-panel .button.bct-use-extend, .bct-bank-panel .button.bct-use-new{ border-radius: 999px; border: none; background: #78988b; color: #fff; font-weight: 600; cursor: pointer; margin-left: 0.5rem; /* keeps it just to the right of the field */ margin-top: 0; /* stops it dropping lower */ } .bct-bank-panel .button.bct-use-extend:hover, .bct-bank-panel .button.bct-use-new:hover{ background: #6a887d; } .bct-bank-panel .button.bct-use-new {margin-bottom: -65px;} /* Labels stay tight to fields */ .bct-bank-panel .bct-use-credit-list label{ display: inline-flex; flex-direction: column; gap: 0.15rem; font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.85rem; } .woocommerce table.shop_table td { font-size: 16px!important; } .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt { background-color: #78988b!important; } p.return-to-shop, .fb_login_button_container {display: none!important;} .basic-page .product-name a { text-decoration: none; cursor: default !important; } .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {border: solid 3px; border-radius: 10px; padding: 10px 20px 10px 20px; text-transform: uppercase; font-weight: 700; color: #fff; background: #78988b;} dt.variation-Appointment {font-weight: 600; width: 100%; padding-bottom: 10px;} dd.variation-Appointment p {font-size: 14px; line-height: 16px; padding-bottom: 10px;} /* ========================================================================== JOIN PAGE ========================================================================== */ .join-the-team .form-area {padding-bottom: 130px;} .join-the-team header, .join-the-team .form-area {background-color: #dea59a;} .join-the-team .form-area {color: #fff;} .join-the-team .tabs [role="tab"][aria-selected="true"] {color: #dea59a; border-bottom:2px solid #dea59a;} .join-the-team .tabs [role="tab"] {color: #dea59a;} .join-the-team .tabs [role="tablist"] { border-bottom:2px solid #f9edea; color: #dea59a} .join-the-team .tabs {color: #dea59a} /* ========================================================================== SIMPLE SITEMAP ========================================================================== */ .simple-sitemap-container h3 { display: none; } .simple-sitemap-container h3.term-tag { display: block; } .simple-sitemap-container { text-align: left; } .simple-sitemap-container ul { margin: 0 0 0 40px!important; margin-top: 20px!important; } .simple-sitemap-container a { color: #78988b; } /* ===== Cleaner view: hide creation/status filters, employee filter & New Appointment button ===== */ /* scope to Bookly cabinet area (common IDs/classes) */ .bookly-staff-cabinet-appointments .col-auto.ml-auto {display: none!important;} .bookly-staff-cabinet-appointments .col-md-1 {display: none!important;} .bookly-staff-cabinet-appointments .col-md-2 {display: none!important;} .bookly-staff-cabinet-appointments .col-md-1 {display: none!important;} .bookly-staff-cabinet-appointments .bookly-js-appointments-list button[data-action="edit"] {display: none!important;} .btn.btn-default.ec-listWeek {display: none!important;} /* Scope ALL styles to Cleaner accounts only */ .cleaner-account .woocommerce-MyAccount-navigation{ --bg: #fff; --card: #fff; --border: #e9e9e9; --text: #1e1e1e; --muted: #777; --hover: #f9f6f5; --accent: #dea59a; --accent-weak: color-mix(in srgb, var(--accent) 15%, #fff); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); background: var(--bg); font-family: inherit; } /* Card container */ .cleaner-account .woocommerce-MyAccount-navigation > ul{ list-style: none; margin: 0; padding: 12px; display: grid; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; } /* Links */ .cleaner-account .woocommerce-MyAccount-navigation li a{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-decoration: none; font-weight: 500; color: var(--text); padding: .8rem 1rem; border: 1px solid transparent; border-radius: 12px; line-height: 1.2; position: relative; transition: background .2s ease, color .2s ease, transform .12s ease, border-color .2s ease; } /* Chevron */ .cleaner-account .woocommerce-MyAccount-navigation li a::after{ content: "›"; font-size: 1.1rem; opacity: .4; translate: 0 0; transition: translate .12s ease, opacity .2s ease; } /* Hover */ .cleaner-account .woocommerce-MyAccount-navigation li a:hover{ background: var(--hover); transform: translateX(2px); } .cleaner-account .woocommerce-MyAccount-navigation li a:hover::after{ translate: 2px 0; opacity: .7; } /* Focus visible (keyboard) */ .cleaner-account .woocommerce-MyAccount-navigation li a:focus-visible{ outline: none; box-shadow: var(--ring); border-color: var(--accent); } /* Active/current page */ .cleaner-account .woocommerce-MyAccount-navigation li.is-active > a, .cleaner-account .woocommerce-MyAccount-navigation li[aria-current="page"] > a{ background: var(--accent-weak); border-color: var(--accent); color: var(--text); } /* Accent bar on hover/active */ .cleaner-account .woocommerce-MyAccount-navigation li a::before{ content: ""; width: 4px; height: 1.4em; border-radius: 999px; background: transparent; margin-right: .25rem; transition: background .2s ease, height .2s ease; } .cleaner-account .woocommerce-MyAccount-navigation li a:hover::before{ background: color-mix(in srgb, var(--accent) 50%, transparent); } .cleaner-account .woocommerce-MyAccount-navigation li.is-active > a::before, .cleaner-account .woocommerce-MyAccount-navigation li[aria-current="page"] > a::before{ background: var(--accent); height: 1.6em; } /* Logout emphasis */ .cleaner-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{ color: #a22a2a; } .cleaner-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background: #fff5f5; border-color: #f3c0c0; } /* Responsive: grid layout for small screens */ @media (max-width: 720px){ .cleaner-account .woocommerce-MyAccount-navigation > ul{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 10px; } .cleaner-account .woocommerce-MyAccount-navigation li a{ justify-content: flex-start; } } /* Optional dark mode */ @media (prefers-color-scheme: dark){ .cleaner-account .woocommerce-MyAccount-navigation{ --bg: #0f0f0f; --card: #181818; --border: #2b2b2b; --text: #f1f1f1; --muted: #aaa; --hover: #222; --accent: #dea59a; --accent-weak: color-mix(in srgb, var(--accent) 20%, #181818); } .cleaner-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{ color: #f4a1a1; } .cleaner-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background: rgba(244,161,161,.15); border-color: rgba(244,161,161,.35); } } /* --- Pink text mode overrides (scoped) --- */ .cleaner-account .woocommerce-MyAccount-navigation{ --text: #dea59a; --accent: #dea59a; --hover: color-mix(in srgb, #dea59a 10%, #fff); --border: color-mix(in srgb, #dea59a 22%, #e9e9e9); --accent-weak: color-mix(in srgb, #dea59a 18%, #fff); --ring: 0 0 0 3px color-mix(in srgb, #dea59a 45%, transparent); } /* Make chevrons and any icons follow the pink text colour */ .cleaner-account .woocommerce-MyAccount-navigation li a::after{ color: currentColor; opacity: .6; } /* Active/current page keeps pink text and border */ .cleaner-account .woocommerce-MyAccount-navigation li.is-active > a, .cleaner-account .woocommerce-MyAccount-navigation li[aria-current="page"] > a{ color: var(--text); border-color: var(--accent); background: var(--accent-weak); } /* Optional: better contrast on hover (still pink) */ .cleaner-account .woocommerce-MyAccount-navigation li a:hover{ color: color-mix(in srgb, #dea59a 80%, #000); } /* Logout underline variant */ .cleaner-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{ text-decoration: underline; } .cleaner-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background: color-mix(in srgb, #dea59a 12%, #fff); } /* Bookly cabinet accents (scoped) */ .cleaner-account #bookly-tbs table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, .cleaner-account #bookly-tbs table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { background-color: #dea59a !important; } .cleaner-account #bookly-tbs .page-item.active .page-link { background-color: #dea59a !important; border-color: #dea59a !important; } .cleaner-account #bookly-tbs .btn-default:not(:disabled):not(.disabled).active, .cleaner-account #bookly-tbs .btn-default:not(:disabled):not(.disabled):active, .cleaner-account #bookly-tbs .show > .btn-default.bookly-dropdown-toggle { color: #dea59a !important; } .cleaner-account #bookly-tbs .btn-default { color: #dea59a !important; } .cleaner-account #bookly-tbs .table { color: #dea59a !important; } /* Scope ALL styles to Customer accounts only */ .customer-account .woocommerce-MyAccount-navigation{ --bg: #fff; --card: #fff; --border: #e9e9e9; --text: #1e1e1e; --muted: #777; --hover: #f7f9f8; --accent: #78988b; /* main colour */ --accent-weak: color-mix(in srgb, var(--accent) 15%, #fff); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); background: var(--bg); font-family: inherit; } /* Card container */ .customer-account .woocommerce-MyAccount-navigation > ul{ list-style: none; margin: 0; padding: 12px; display: grid; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; } /* Links */ .customer-account .woocommerce-MyAccount-navigation li a{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-decoration: none; font-weight: 500; color: var(--text); padding: .8rem 1rem; border: 1px solid transparent; border-radius: 12px; line-height: 1.2; position: relative; transition: background .2s ease, color .2s ease, transform .12s ease, border-color .2s ease; } /* Chevron */ .customer-account .woocommerce-MyAccount-navigation li a::after{ content: "›"; font-size: 1.1rem; opacity: .4; translate: 0 0; transition: translate .12s ease, opacity .2s ease; } /* Hover */ .customer-account .woocommerce-MyAccount-navigation li a:hover{ background: var(--hover); transform: translateX(2px); } .customer-account .woocommerce-MyAccount-navigation li a:hover::after{ translate: 2px 0; opacity: .7; } /* Focus visible (keyboard) */ .customer-account .woocommerce-MyAccount-navigation li a:focus-visible{ outline: none; box-shadow: var(--ring); border-color: var(--accent); } /* Active/current page */ .customer-account .woocommerce-MyAccount-navigation li.is-active > a, .customer-account .woocommerce-MyAccount-navigation li[aria-current="page"] > a{ background: var(--accent-weak); border-color: var(--accent); color: var(--text); } /* Accent bar on hover/active */ .customer-account .woocommerce-MyAccount-navigation li a::before{ content: ""; width: 4px; height: 1.4em; border-radius: 999px; background: transparent; margin-right: .25rem; transition: background .2s ease, height .2s ease; } .customer-account .woocommerce-MyAccount-navigation li a:hover::before{ background: color-mix(in srgb, var(--accent) 50%, transparent); } .customer-account .woocommerce-MyAccount-navigation li.is-active > a::before, .customer-account .woocommerce-MyAccount-navigation li[aria-current="page"] > a::before{ background: var(--accent); height: 1.6em; } /* Logout emphasis */ .customer-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{ color: #7a2a2a; } .customer-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background: #fff5f5; border-color: #f3c0c0; } .subscription_renewal_early {display: none!Important} /* Responsive */ @media (max-width: 720px){ .customer-account .woocommerce-MyAccount-navigation > ul{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 10px; } .customer-account .woocommerce-MyAccount-navigation li a{ justify-content: flex-start; } } /* Dark mode */ @media (prefers-color-scheme: dark){ .customer-account .woocommerce-MyAccount-navigation{ --bg: #0f0f0f; --card: #181818; --border: #2b2b2b; --text: #f1f1f1; --muted: #aaa; --hover: #1d2220; --accent: #78988b; --accent-weak: color-mix(in srgb, var(--accent) 20%, #181818); } .customer-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{ color: #f1b0b0; } .customer-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background: rgba(241,176,176,.15); border-color: rgba(241,176,176,.35); } } /* --- “Main colour” mode overrides (teal-grey) --- */ .customer-account .woocommerce-MyAccount-navigation{ --text: #78988b; /* main text tint */ --accent: #78988b; /* main accent */ --hover: color-mix(in srgb, #78988b 10%, #fff); --border: color-mix(in srgb, #78988b 22%, #e9e9e9); --accent-weak: color-mix(in srgb, #78988b 18%, #fff); --ring: 0 0 0 3px color-mix(in srgb, #78988b 45%, transparent); } /* Chevrons follow current text colour */ .customer-account .woocommerce-MyAccount-navigation li a::after{ color: currentColor; opacity: .6; } /* Active/current page keeps main colour */ .customer-account .woocommerce-MyAccount-navigation li.is-active > a, .customer-account .woocommerce-MyAccount-navigation li[aria-current="page"] > a{ color: var(--text); border-color: var(--accent); background: var(--accent-weak); } /* Slightly deeper on hover for readability */ .customer-account .woocommerce-MyAccount-navigation li a:hover{ color: color-mix(in srgb, #78988b 80%, #000); } /* Bookly cabinet accents (scoped) */ .customer-account #bookly-tbs table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, .customer-account #bookly-tbs table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { background-color: #78988b !important; } .customer-account #bookly-tbs .page-item.active .page-link { background-color: #78988b !important; border-color: #78988b !important; } .customer-account #bookly-tbs .btn-default:not(:disabled):not(.disabled).active, .customer-account #bookly-tbs .btn-default:not(:disabled):not(.disabled):active, .customer-account #bookly-tbs .show > .btn-default.bookly-dropdown-toggle { color: #78988b !important; } .customer-account #bookly-tbs .btn-default { color: #78988b !important; } .customer-account #bookly-tbs .table { color: #78988b !important; } .basic-page .customer-account ul li:before { content: none!important; } /* Layout */ .basic-page .packages{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 26px; } .basic-page .package{ position: relative; border: 2px solid #fff; border-radius: 16px; padding: 22px 22px 18px; background: rgba(255,255,255,0.06); overflow: hidden; } .basic-page .package h2{ margin: 0 0 10px; } .basic-page .includes-label{ margin: 0 0 10px; opacity: 0.9; } /* Sparkle bullets */ .basic-page .package ul, .basic-page .additional-info ul{ list-style: none; padding-left: 0; margin: 0 0 16px; color: #78988b; } .basic-page .package ul li, .basic-page .additional-info ul li{ position: relative; padding-left: 34px; margin: 10px 0; } .basic-page .package ul li::before, .basic-page .additional-info ul li::before{ content:""; width: 18px; height: 18px; position: absolute; left: 0; top: -6px; background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle-green.png') no-repeat center; background-size: contain; } .basic-page .package.is-popular {margin-top: 6px;} /* Nested list indentation */ .basic-page .package ul ul{ margin-top: 10px; padding-left: 8px; } .basic-page .package ul ul li{ margin: 8px 0; } /* Price */ .basic-page .price{ margin: 18px 0 0; font-size: 28px; line-height: 1.1; } /* Most popular sticker */ .basic-page .package.is-popular{ transform: translateY(-6px); } .basic-page .most-popular{ position: absolute; top: 20px; right: 3px; transform: rotate(15deg); padding: 2px 10px; border-radius: 999px; border: 2px solid #fff; background: #78988b; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; font-size: 12px; color: #fff; } /* Additional info: 2 blocks responsive */ .basic-page .additional-info{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 10px; } .basic-page .additional-info .info-block{ border: 2px solid #fff; border-radius: 16px; padding: 22px; background: rgba(255,255,255,0.06); } /* Responsive breakpoints */ @media (max-width: 1050px){ .basic-page .packages{ grid-template-columns: 1fr; } .basic-page .package.is-popular{ transform: none; } .basic-page .most-popular{ right: 14px; top: 14px; transform: none; padding: 8px 14px; border-radius: 12px; } } @media (max-width: 760px){ .basic-page .additional-info{ grid-template-columns: 1fr; } } .end-of-tenancy .basic-page { background-image: url('/wp-content/themes/thebrilliantcleanteam-theme/images/eot.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;} .end-of-tenancy .basic-page {color: #fff} /* outer frame sitting outside the card */ .basic-page .package { color: #78988b; position: relative; padding: 22px 22px 18px; overflow: hidden; } /* Outer frame */ .package{ border: 2px solid #fff; border-radius: 18px; padding: 10px; /* size of the gap */ background: #fff; background-clip: content-box; /* key line: white only fills inside the padding */ box-sizing: border-box; overflow: hidden; /* keeps corners clean */ } /* Inner card */ .package__inner{ background: #fff; border-radius: 12px; /* inner radius */ padding: 22px; } .end-of-tenancy .basic-page h3 {color: #fff;} .end-of-tenancy .basic-page ul li::before { margin: 10px 0; } .basic-page .package{ height: 100%; display: flex; } .basic-page .package__inner{ display: flex; flex-direction: column; width: 100%; } /* push the price to the bottom if you want consistent price alignment */ .basic-page .package__inner .price, .basic-page .package__inner h4{ margin-top: auto; } .cta-endoften {background-color: #78988b; padding-top: 30px; padding-bottom: 30px; color: #fff; text-align: center; width: 100%; float: left;} .cta-endoften h2 {padding-bottom: 20px; font-size: 30px;} .cta-endoften a.whitebg {margin-top: 0px;} .additional-info h2 {color: #78988b} .recurring-totals, .order-total.recurring-total {display: none!important;} .book-a-commercial-clean header, .book-a-commercial-clean .form-area {background-color: #78988b;} .book-a-commercial-clean header, .choose-a-booking header {width: 100%; float: left; z-index: 2; position: relative;} .choose-a-booking header, .choose-a-booking .cleaning-template {background-color: #78988b;} .tabs-area {color: #78988b;} /* Overlay */ .booking-overlay { position: fixed; inset: 0; background: rgba(120, 152, 139, 0.75); /* green + semi transparent */ display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } /* Active state */ .booking-overlay.is-active { opacity: 1; pointer-events: all; } /* Modal box */ .booking-modal { background: #78988b; padding: 2rem 2.5rem; max-width: 480px; width: 90%; text-align: center; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); position: relative; } .booking-modal h2 { font-size: 30px; padding-top: 40px; color: #fff; font-weight: 700; line-height: 30px; } /* Close button */ .booking-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.8rem; cursor: pointer; } h1.homehh {font-size: 20px!important; letter-spacing: 0!important; font-weight: 300!important; width: 50%; margin: auto; margin-top: auto; line-height: 24px!important; margin-top: 50px; float: left; width: 100%; padding-left: 300px; padding-right: 300px; box-sizing: border-box;} .sitemap-item.page_item.page-item-73, .sitemap-item.page_item.page-item-74, .sitemap-item.page_item.page-item-6, .sitemap-item.page_item.page-item-72 {display: none;} .button.greenborder.login {padding: 5px 20px 3px 20px; float: right;} a.login::after { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f2bd"; font-size: 18px; line-height: 1; display: inline-block; vertical-align: middle; padding-left: 10px; margin-top: -4px; } .trust-box { display: flex; flex-wrap: wrap; gap: 16px; border-radius: 12px; justify-content: center; align-items: stretch; width: 670px; padding-top: 20px; padding-bottom: 20px; float: left; margin-right: 20px !important; } .comsm {margin-top: 15px !important; padding-top: 10px !important; padding-bottom: 10px !important; } .trust-item { display: flex; align-items: center; gap: 10px; background: #ffffff; padding: 5px 10px; border-radius: 5px; border: 1px solid #ececec; min-width: 200px; box-sizing: border-box; } .trust-icon { font-size: 22px; line-height: 1; } .trust-text { font-size: 16px; font-weight: 600; color: #78988b; line-height: 1.4; } .trust-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .trust-icon { width: 42px; height: 42px; background: #78988b; /* tweak to your brand */ color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } /* ========================================================================== ANIMATIONS & KEYFRAMES ========================================================================== */ @keyframes fadeDown { to { opacity: 1; transform: translateY(0); } } @keyframes shrink { 0% { background-size: 110% 110%; } 100% { background-size: 100% 100%; } } @keyframes fadeIn1 { from { opacity: 0; } to { opacity: 1; } } /* Legacy commented fade blocks kept as-is: .home-post-wrapper, .element-class { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2s; } .menu .sub-menu, .about .cat-posts, .about .side-bar-posts {opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s;} .slideshow { animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2s;} */ @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } .contacts-bar-wrap img { animation: zoom-in-zoom-out 20s ease; } @keyframes zoom-in-zoom-out { 0% { transform: scale(1.5, 1.5); } 100% { transform: scale(1, 1); } } /* ========================================================================== BROWSER-SPECIFIC OVERRIDES ========================================================================== */ /* CHROME only */ /* EDGE only */ /* ========================================================================== MEDIA QUERIES ========================================================================== */ @media (max-width: 850px){ .carousel{ --spv: 2; } } @media (max-width: 600px){ .carousel{ --spv: 1; } } /* =================== max-width:1700px ===================================== */ @media only screen and (max-width:1700px) { .wrapper { width: 1400px; } .inner-wrapper { width: 1100px; } .bubble { width: clamp(400px, 24vmin, 200px);} .process, .cleaners-template .process { background-size: 238px 238px; background-position: right -30px top 0px; } .otherbubbles, .cleaners-template .otherbubbles { background-size: 238px 238px; background-position: left -50px top 0px; height: 300px; margin-top: -200px; } } /* =================== max-width:1590px ===================================== */ @media only screen and (max-width:1590px) { ul.home-cleaning-services, ul.commerical-cleaning-services {padding-right: 10%;} .solutions-wrap .left, .solutions-wrap .right { min-height: 800px; } } /* =================== max-width:1470px ===================================== */ @media only screen and (max-width:1470px) { .wrapper { width: 1200px; } .inner-wrapper { width: 1000px; } .solutions-wrap .left, .solutions-wrap .right { min-height: 870px; } .bubble { width: clamp(340px, 24vmin, 200px); } } /* =================== max-width:1270px ===================================== */ @media only screen and (max-width:1270px) { .wrapper { width: 1000px; } .inner-wrapper { width: 900px; } li#menu-item-44, li#menu-item-64 { padding-right: 20px; padding-left: 20px; } .home-temp .right, .home .right {margin-right: 5%; margin-top: -104px;} .home-temp a.button, .home a.button {padding: 10px 10px 0px 10px;} .home-temp h1, .home-temp h2, .home h1, .home h2 { font-size: 40px; line-height: 40px;} .home-temp h3, .home h3 { font-size: 18px;} ul.home-cleaning-services { padding-right: 20%; padding-left: 10%; } ul.commerical-cleaning-services { padding-right: 10%; padding-left: 20%; } @keyframes shrink { 0% { background-size: 180% 110%; } 100% { background-size: 170% 100%; } } .bubble { width: clamp(270px, 24vmin, 200px); } .bubble__num { padding-top: 0px; } .bubble__text { margin-top: -80px;} .terms ul.commerical-cleaning-services { width: 100%; } .tabs [role="tab"] {font-size: 30px; line-height: 30px;} } /* =================== max-width:1050px ===================================== */ @media only screen and (max-width:1050px) { .wrapper { width: 800px; } .inner-wrapper { width: 700px; } .menu-main-menu-container li, .subbrand-menu li { font-size: 12px; } .home-temp .wrapper, .home .wrapper { width: auto; margin-left: 40px; margin-right: 40px; } ul.commerical-cleaning-services { padding-right: 5%; padding-left: 25.5%; } .solutions-wrap .left, .solutions-wrap .right { padding-top: 80px;} .bubble { width: clamp(200px, 24vmin, 200px); } .bubble__num { font-size: 50px;} .bubble__text { margin-top: -30px; font-size: 14px; line-height: 16px; } .button.greenborder.login { float: none; margin-top: 20px;} .terms ul.commerical-cleaning-services h2 {width: 90%;} .terms .solutions-wrap .left, .terms .solutions-wrap .right { min-height: 510px; } .tabs [role="tab"] { font-size: 20px; line-height: 20px; } } /* =================== max-width:950px ===================================== */ @media only screen and (max-width:950px) { .home-temp .left, .home-temp .center, .home-temp .right {float: none;margin: 0px;} .home .left, .home .center, .home .right {float: none;margin: 0px;} h1.homehh { margin-top: -80px; float: left; width: 100%; padding-left: 60px; padding-right: 60px; box-sizing: border-box; } h1.homehh { opacity: 0; animation: homeH1FadeIn 0.6s ease forwards; animation-delay: 4s; } @keyframes homeH1FadeIn { to { opacity: 1; } } .centre.cleaningbutton { margin-top: 110px; margin-bottom: 110px; } body.home-temp, body.home { background: linear-gradient( to bottom, #e7b5a7 0 33.333%, #78988b 33.333% 66.666%, #6d7e88 66.666% 100% ); background-size: 100% 750px; /* each band = 250px */ background-repeat: repeat-y; } .home-temp footer, .home footer { margin-top: -80px; } .home-temp .copy, .home .copy {padding-bottom: 10px;} img.logo{ animation: none !important; transform: none !important; opacity: 1 !important; /* ensure the logo shows while wrapper animates */ } .logowrapper{ animation-delay: .5s; opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; /* total = 2.4s (0.8 fade-in + 1s hold + 0.6 fade-out) */ animation: logoFadeIO 3.4s ease forwards; /* add delay if you want: e.g., .5s */ } @keyframes logoFadeIO{ /* Fade in (0 → 0.8s = 33.333%) */ 0% { opacity: 0; max-height: 0; } 33.333% { opacity: 1; max-height: 1000px; } /* Hold visible for 1s (to 75%) */ 75% { opacity: 1; max-height: 1000px; } /* Fade out (last 0.6s) and collapse */ 100% { opacity: 0; max-height: 0; } } .solutions-wrap .left, .solutions-wrap .right { min-height: 1070px; } } /* =================== max-width:850px ===================================== */ @media only screen and (max-width:850px) { .wrapper, .inner-wrapper, .menu-overlay .inner-wrapper { width: 700px; } #navigation ul#menu-cleaning-menu li { text-align: center; list-style-type: none; float: none; margin-right: 0px; padding-left: 0px; display: block; margin-top: 0px; } ul#menu-cleaning-menu { z-index: 201; background: none repeat scroll 0 0 #fff; border: 0px; float: none; padding: 10px; position: absolute; right: 0; width: 100%; margin-top: 0px; text-align: center; -webkit-box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); -moz-box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); box-sizing: border-box; margin-top: 75px; padding-top: 10px; } #navigation ul#menu-academy li { text-align: center; list-style-type: none; float: none; margin-right: 0px; padding-left: 0px; display: block; margin-top: 0px; padding-right: 0px;} ul#menu-academy { z-index: 201; background: none repeat scroll 0 0 #fff; border: 0px; float: none; padding: 10px; position: absolute; right: 0; width: 100%; margin-top: 0px; text-align: center; -webkit-box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); -moz-box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); box-sizing: border-box; margin-top: 75px; padding-top: 10px; } ul#menu-academy.menu li a { color:#677983; } #navigation ul#menu-cleaners li { text-align: center; list-style-type: none; float: none; margin-right: 0px; padding-left: 0px; display: block; margin-top: 0px; padding-right: 0px;} ul#menu-cleaners { z-index: 201; background: none repeat scroll 0 0 #fff; border: 0px; float: none; padding: 10px; position: absolute; right: 0; width: 100%; margin-top: 0px; text-align: center; -webkit-box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); -moz-box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); box-shadow: -1px 7px 17px -3px rgba(0,0,0,1); box-sizing: border-box; margin-top: 75px; padding-top: 10px; } ul#menu-cleaners.menu li a { color:#dea59a; } .menu li a:hover, .menu li a:active { color: #78988b; } #menu-icon { display: block; margin-top: 0px; cursor: pointer; padding-right: 40px; } .menu { display: none; } .menu.active { display: block; } #navigation { width: auto; padding-top: 35px; } .menu li a { font-size: 24px; line-height: 34px; color: #78988b; } .menu .sub-menu, .menu .children { background-color: #1aa0db; border: 0px; padding: 0px; position: initial; left: initial; z-index: initial; width: 100%; display: block; margin: 0px; margin-top: 20px; } .menu ul a { padding: 0px; } .menu ul a:hover { text-decoration: none; } .show-mob { display: block; } li#menu-item-44, li#menu-item-64 { padding-left: 30px; padding-right: 0px; } #menu-item-44 > a { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/sparkle-green.png') no-repeat right 8px center; } #menu-item-64 > a { background: url('/wp-content/themes/thebrilliantcleanteam-theme/images/hands-pink.png') no-repeat right 8px center; } /* REMOVE WHEN LIVE (mobile) */ .refer-a-friend-offer-terms #menu-icon { display: none; } .privacy-policy #menu-icon { display: none; } .terms-and-conditions #menu-icon { display: none; } .centre.cleaningbutton { width: 100%;} .solutions-wrap .left, .solutions-wrap .right { min-height: initial; width: 100%; } .solutions-wrap .left, .solutions-wrap .right { padding-top: 50px; } ul.home-cleaning-services, ul.commerical-cleaning-services { padding-right: 10%; padding-left: 10%; } .terms ul.home-cleaning-services, .terms ul.commerical-cleaning-services { padding-right: 10%; padding-left: 10%; } .terms .solutions-wrap .left, .terms .solutions-wrap .right { min-height: auto;} .terms .solutions-wrap .left {padding-bottom: 0px;} .terms .solutions-wrap .right {padding-top: 0px;} .terms ul.commerical-cleaning-services h2 {width: 100%; text-align: left;} .terms .solution-bubble { top: 0px; } .solution-bubble { top: 0px;} .bubble { width: clamp(250px, 24vmin, 200px); } .bubble__num { font-size: 70px; } .bubble__text { margin-top: -30px; font-size: 18px; line-height: 22px; } h1.homehh {padding-right: 0px; padding-left: 90px; font-size: 12px!Important; line-height: 14px!Important; text-align: left; } } /* =================== max-width:720px ===================================== */ @media only screen and (max-width:720px) { .wrapper, .inner-wrapper, .menu-overlay .inner-wrapper { width: auto; margin-left: 40px; margin-right: 40px; } .inner-wrapper { margin-left: 0px; margin-right: 0px; } .left, .right { width: 100%; } header .right { width: initial; } header .left { width: initial; } @keyframes shrink { 0% { background-size: 280% 110%; } 100% { background-size: 270% 100%; } } .story {padding-bottom: 80px;} .grid3 div { padding-bottom: 0px; } .grid3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; /* optional spacing */ } .proof { padding-bottom: 100px; } .bubble { width: clamp(195px, 24vmin, 200px); } .bubble__num { font-size: 50px;} .bubble__text { margin-top: -30px; font-size: 14px; line-height: 16px; } .otherbubbles { background-size: 238px 238px; background-position: left -50px top 0px; height: 200px; margin-top: -100px; } .cleaners-template .process p { width: 100%; } .cleaners-template .story {padding-bottom: 80px;} .tabs [role="tab"] { font-size: 20px;} .trust-box { width: 100%;} } /* =================== max-width:600px ===================================== */ @media only screen and (max-width:600px) { h1 { font-size: 40px; line-height: 40px; } .tagline { font-size: 40px; line-height: 40px; } .subpages footer i { padding-top: 30px; } .basic-page ol { padding-left: 30px; } .grid3 { grid-template-columns: 1fr; } .home-temp .wrapper, .home .wrapper { width: auto; margin-left: 20px; margin-right: 20px; } .home-temp .copy, .home .copy { font-size: 9px;} .brilliantlogo {width: 300px!important} .hero__content, .hero__content { top: 110px;} .cleaning-template h1 { font-size: 35px; line-height: 35px; padding-top: 50px; } .hero h2 { font-size: 26px !important; padding-top: 0px; } .hero--cleaning, .academy-template .hero--cleaning, .cleaners-template .hero--cleaning { height: 500px; } .rule > span { display: inline-block; white-space: normal; line-height: 60px; text-align: center; width: 300px; } .cleaners-template .hassel-free-process h2 { font-size: 33px; line-height: 40px; } .solutions-wrap .left, .solutions-wrap .right { padding-left: 20px; padding-right: 20px; } ul.home-cleaning-services, ul.commerical-cleaning-services { padding-right: 0%; padding-left: 10%; } .terms ul.home-cleaning-services, .terms ul.commerical-cleaning-services { padding-right: 0%; padding-left: 10%; } .bubble { width: clamp(300px, 24vmin, 200px); } .bubble__num { font-size: 70px; } .bubble__text { font-size: 18px; line-height: 22px; margin-top: -100px; } /* REMOVE WHEN LIVE (mobile) */ .refer-a-friend-offer-terms header .right { display: none; } .privacy-policy header .right { display: none; } .terms-and-conditions header .right { display: none; } .trust-item { padding: 2px; min-width: 100%; } .comsm { padding-right: 20px!Important; font-size: 15px!important; } } /* =================== max-width:580px ===================================== */ @media only screen and (max-width:580px) { .wrapper, .inner-wrapper, .menu-overlay .inner-wrapper { margin-left: 20px; margin-right: 20px; } .inner-wrapper { margin-left: 0px; margin-right: 0px; } .cleaning-template h1 { font-size: 30px; line-height: 30px;} .hero h2 { font-size: 24px !important;} .rule > span { display: inline-block; white-space: normal; line-height: 48px; text-align: center; width: 240px; font-size: 48px; } ul.home-cleaning-services h2, ul.commerical-cleaning-services h2 { text-align: center; padding-top: 20px; } .terms ul.commerical-cleaning-services h2 { text-align: center;} ul.home-cleaning-services h2, ul.commerical-cleaning-services h2 { font-size: 40px; line-height: 40px;} .process h3 {font-size: 48px; line-height: 48px;} .otherbubbles { background-position: left -95px top 0px; } .cleaners-template .hero h2 { padding-left: 10px; padding-right: 10px; box-sizing: border-box; } #table_0 td {width: 100%; display: block;} #table_0 th {display: none;} #table_0 tbody tr td:nth-child(1) > div::before { content: "Bedrooms: "; font-weight: 600; } #table_0 tbody tr td:nth-child(2) > div::before { content: "Bathrooms: "; font-weight: 600; } #table_0 tbody tr td:nth-child(3) > div::before { content: "Suggested Weekly Hours: "; font-weight: 600; } #table_0 tbody tr td:nth-child(4) > div::before { content: "Reasoning: "; font-weight: 600; } #table_0 tbody tr {padding-bottom: 15px; display: block;} } /* =================== max-width:480px ===================================== */ @media only screen and (max-width:480px) { .carousel__btn { font-size: 60px; } h1.homehh { padding-right: 0px; padding-left: 90px; font-size: 10px!Important; line-height: 14px!Important; text-align: left; margin-top: -85px; } .home-temp img.logo { width: 100%!important; height: auto!important; } .bubble { width: clamp(190px, 24vmin, 200px); } .bubble__text { margin-top: -30px; font-size: 14px; line-height: 16px; } .bubble__num { font-size: 50px; } .tabs [role="tab"] { padding: .2rem 0rem;} } /* =================== max-width:319px ===================================== */ @media only screen and (max-width:319px) { body { min-width: 319px; } }