:root {--color-text: #14133b;--color-headings-preferred: #14133b;--color-primary-25: #e7f2f9; --color-primary-50: #cfe5f3; --color-primary-100: #b7d8ed; --color-primary-200: #87bee1; --color-primary-300: #56a4d4; --color-primary-400: #3291cb; --color-primary-500: #0e7dc2; --color-primary-600: #0c70b1; --color-primary-700: #0a63a0; --color-primary-800: #095690; --color-primary-900: #07487f; --color-primary-1000: #064074; --color-secondary-25: #e8e7eb; --color-secondary-50: #d0d0d8; --color-secondary-100: #b9b8c4; --color-secondary-200: #8a899d; --color-secondary-300: #5b5a76; --color-secondary-400: #373658; --color-secondary-500: #14133b; --color-secondary-600: #111034; --color-secondary-700: #0f0e2c; --color-secondary-800: #0c0b25; --color-secondary-900: #09091e; --color-secondary-1000: #080719; --color-tertiary-25: #e6f6f8; --color-tertiary-50: #ccedf0; --color-tertiary-100: #b3e5e9; --color-tertiary-200: #80d3da; --color-tertiary-300: #4dc1cb; --color-tertiary-400: #26b4c0; --color-tertiary-500: #00a7b5; --color-tertiary-600: #0097a5; --color-tertiary-700: #008894; --color-tertiary-800: #007884; --color-tertiary-900: #006873; --color-tertiary-1000: #005e69; --color-neutral-25: #f6f6f6; --color-neutral-50: #eeeeee; --color-neutral-100: #e5e5e5; --color-neutral-200: #d4d4d4; --color-neutral-300: #c2c2c2; --color-neutral-400: #b5b5b5; --color-neutral-500: #a8a8a8; --color-neutral-600: #989898; --color-neutral-700: #898989; --color-neutral-800: #797979; --color-neutral-900: #696969; --color-neutral-1000: #5f5f5f; --font-primary:gotham, sans-serif;--font-secondary:Open Sans, sans-serif;}html {font-family: var(--font-primary);}h1 {font-weight: 900;font-family: var(--font-primary);}h2 {font-weight: 700;font-family: var(--font-primary);}h3 {font-weight: 500;font-family: var(--font-primary);}h4 {font-weight: 500;font-family: var(--font-primary);}h5 {font-weight: 500;font-family: var(--font-primary);}h6 {font-weight: 700;font-family: var(--font-primary);}[type=button],[type=reset],[type=submit],a.button,.button {font-weight: 700;font-family: var(--font-primary);}:root{--block-padding: 1.5rem;}@media (min-width: 37.5em) {:root{--block-padding: 2rem;}}@media (min-width: 56.25em) {:root{--block-padding: 4rem;}}.block.bg-primary-25 { --color-section-background: var(--color-primary-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-primary-25:not(.is-full-width) + .block.bg-primary-25:not(.is-full-width) { padding-top: 0; } .block.bg-primary-25:not(.is-full-width) + .block.bg-primary-25.is-full-width .inner-content { padding-top: 0; } .overlay-primary-25 { --overlay-color: var(--color-primary-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-primary-100 { --color-section-background: var(--color-primary-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-primary-100:not(.is-full-width) + .block.bg-primary-100:not(.is-full-width) { padding-top: 0; } .block.bg-primary-100:not(.is-full-width) + .block.bg-primary-100.is-full-width .inner-content { padding-top: 0; } .overlay-primary-100 { --overlay-color: var(--color-primary-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-primary-500 { --color-section-background: var(--color-primary-500); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-primary-500:not(.is-full-width) + .block.bg-primary-500:not(.is-full-width) { padding-top: 0; } .block.bg-primary-500:not(.is-full-width) + .block.bg-primary-500.is-full-width .inner-content { padding-top: 0; } .overlay-primary-500 { --overlay-color: var(--color-primary-500); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-primary-700 { --color-section-background: var(--color-primary-700); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-primary-700:not(.is-full-width) + .block.bg-primary-700:not(.is-full-width) { padding-top: 0; } .block.bg-primary-700:not(.is-full-width) + .block.bg-primary-700.is-full-width .inner-content { padding-top: 0; } .overlay-primary-700 { --overlay-color: var(--color-primary-700); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-secondary-25 { --color-section-background: var(--color-secondary-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-secondary-25:not(.is-full-width) + .block.bg-secondary-25:not(.is-full-width) { padding-top: 0; } .block.bg-secondary-25:not(.is-full-width) + .block.bg-secondary-25.is-full-width .inner-content { padding-top: 0; } .overlay-secondary-25 { --overlay-color: var(--color-secondary-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-secondary-100 { --color-section-background: var(--color-secondary-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-secondary-100:not(.is-full-width) + .block.bg-secondary-100:not(.is-full-width) { padding-top: 0; } .block.bg-secondary-100:not(.is-full-width) + .block.bg-secondary-100.is-full-width .inner-content { padding-top: 0; } .overlay-secondary-100 { --overlay-color: var(--color-secondary-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-secondary-500 { --color-section-background: var(--color-secondary-500); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-secondary-500:not(.is-full-width) + .block.bg-secondary-500:not(.is-full-width) { padding-top: 0; } .block.bg-secondary-500:not(.is-full-width) + .block.bg-secondary-500.is-full-width .inner-content { padding-top: 0; } .overlay-secondary-500 { --overlay-color: var(--color-secondary-500); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-secondary-700 { --color-section-background: var(--color-secondary-700); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-secondary-700:not(.is-full-width) + .block.bg-secondary-700:not(.is-full-width) { padding-top: 0; } .block.bg-secondary-700:not(.is-full-width) + .block.bg-secondary-700.is-full-width .inner-content { padding-top: 0; } .overlay-secondary-700 { --overlay-color: var(--color-secondary-700); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-tertiary-25 { --color-section-background: var(--color-tertiary-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-tertiary-25:not(.is-full-width) + .block.bg-tertiary-25:not(.is-full-width) { padding-top: 0; } .block.bg-tertiary-25:not(.is-full-width) + .block.bg-tertiary-25.is-full-width .inner-content { padding-top: 0; } .overlay-tertiary-25 { --overlay-color: var(--color-tertiary-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-tertiary-100 { --color-section-background: var(--color-tertiary-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-tertiary-100:not(.is-full-width) + .block.bg-tertiary-100:not(.is-full-width) { padding-top: 0; } .block.bg-tertiary-100:not(.is-full-width) + .block.bg-tertiary-100.is-full-width .inner-content { padding-top: 0; } .overlay-tertiary-100 { --overlay-color: var(--color-tertiary-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-tertiary-500 { --color-section-background: var(--color-tertiary-500); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-tertiary-500:not(.is-full-width) + .block.bg-tertiary-500:not(.is-full-width) { padding-top: 0; } .block.bg-tertiary-500:not(.is-full-width) + .block.bg-tertiary-500.is-full-width .inner-content { padding-top: 0; } .overlay-tertiary-500 { --overlay-color: var(--color-tertiary-500); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-tertiary-700 { --color-section-background: var(--color-tertiary-700); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-tertiary-700:not(.is-full-width) + .block.bg-tertiary-700:not(.is-full-width) { padding-top: 0; } .block.bg-tertiary-700:not(.is-full-width) + .block.bg-tertiary-700.is-full-width .inner-content { padding-top: 0; } .overlay-tertiary-700 { --overlay-color: var(--color-tertiary-700); --color-section-text: #ffffff; --color-section-headings: #ffffff; } .block.bg-neutral-25 { --color-section-background: var(--color-neutral-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-25:not(.is-full-width) + .block.bg-neutral-25:not(.is-full-width) { padding-top: 0; } .block.bg-neutral-25:not(.is-full-width) + .block.bg-neutral-25.is-full-width .inner-content { padding-top: 0; } .overlay-neutral-25 { --overlay-color: var(--color-neutral-25); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-100 { --color-section-background: var(--color-neutral-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-100:not(.is-full-width) + .block.bg-neutral-100:not(.is-full-width) { padding-top: 0; } .block.bg-neutral-100:not(.is-full-width) + .block.bg-neutral-100.is-full-width .inner-content { padding-top: 0; } .overlay-neutral-100 { --overlay-color: var(--color-neutral-100); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-500 { --color-section-background: var(--color-neutral-500); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-500:not(.is-full-width) + .block.bg-neutral-500:not(.is-full-width) { padding-top: 0; } .block.bg-neutral-500:not(.is-full-width) + .block.bg-neutral-500.is-full-width .inner-content { padding-top: 0; } .overlay-neutral-500 { --overlay-color: var(--color-neutral-500); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-700 { --color-section-background: var(--color-neutral-700); --color-section-headings: var(--color-headings-preferred); } .block.bg-neutral-700:not(.is-full-width) + .block.bg-neutral-700:not(.is-full-width) { padding-top: 0; } .block.bg-neutral-700:not(.is-full-width) + .block.bg-neutral-700.is-full-width .inner-content { padding-top: 0; } .overlay-neutral-700 { --overlay-color: var(--color-neutral-700); --color-section-headings: var(--color-headings-preferred); } :root {--navbar-bg-color: var(--color-white); --navbar-color: var(--color-secondary-500); --navbar-bg-color-hover: var(--color-white); --navbar-color-hover: var(--color-primary-500); --navbar-font-family: var(--font-primary); --navbar-font-weight: 700; } .timeline { --timeline-color-theme: var(--color-secondary-500); }/* Global headings */ h1,h2,h3,h4,h5,h6 { letter-spacing: -0.05em; } .page-title { font-size: var(--font-size-6) !important; } @media(max-width:900px) { .page-title { font-size: var(--font-size-5) !important; } } /* Global text*/ .color-teal { color: var(--color-tertiary-500) !important; } /* Global icons*/ li.has-image-marker:before { background-size: cover; } /* Global links*/ .page-content a { color: var(--color-tertiary-500) !important; font-weight: bold; } .page-content a: hover { color: var(--color-tertiary-700) !important; } /* Global blocks */ /* Blocks: left alingment*/ .block-section .row { -webkit-box-pack: flex-start !important; -ms-flex-pack: flex-start !important; justify-content: flex-start !important; } @media (min-width: 56.25em) { .block-section .col.md-10 { max-width: 80% !important; -webkit-box-flex: 0 !important; -ms-flex: 0 0 80% !important; flex: 0 0 80% !important; } } .block-section, .block-columns { padding-bottom: calc(var(--block-padding) - 1.5rem) !important; padding-top: var(--block-padding) !important ; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } /* Footer */ .site-footer { display: none; } .logo-footer img { max-width: 250px; } @media (max-width: 600px) { .logo-footer img { max-width: 150px; } } .footer a { color: white !important; } .footer .col { z-index: 10; } .footer::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 100%; z-index: 1; background-image: url("https://cotesbach-development.co.uk/wp-content/uploads/2025/11/loop-gradient2-scaled.png"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; } /* Hero */ .hero h1, .hero p { color: white; } @media (min-width: 75em) { .hero h1, .hero p { margin-bottom: 0 !important; } } /* Hero loop gradient overlay*/ .hero .container { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .hero-image { padding-bottom: 1.5rem !important; } .hero-figure { height: 100%; } .hero-figure img { height: 80%; bottom: auto; } .hero:has(.hero-image) { height: 80dvh; min-height: 700px; } .hero-image.has-overlay::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 70%; z-index: 1; background: linear-gradient(0deg,rgba(20, 19, 59, 1) 15%, rgba(14, 125, 194, 1) 50%, rgba(14, 125, 194, 0) 100%); opacity: 1 !important; } .hero-image.has-overlay::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; height: 80%; width: 100%; z-index: 2; background-image: url("https://cotesbach-development.co.uk/wp-content/uploads/2025/11/loop-gradient2-scaled.png"); background-repeat: no-repeat; background-position: top; background-size: cover; } @media (max-width: 900px) { .hero:has(.hero-image) { height: 50dvh !important; min-height: 400px; } .hero-image.has-overlay::before { height: 50%; } .hero-image.has-overlay::after { height: 50%; } } /* Block Bg color gradient*/ .bg-gradient { padding: 2rem 0; background: linear-gradient( to bottom, rgba(20, 19, 59, 1) 0%, rgba(20, 19, 59, 1) 30%, rgba(10, 99, 160, 1) 70%, rgba(255, 255, 255, 0) 100% );; } .bg-gradient, .bg-gradient .wp-block-heading , .bg-gradient a, .bg-gradient ul { color: white !important; } /* Navbar */ /* Removing the arrow from the The Project menu link */ @media (min-width: 75em) { .navbar-menu li.has-children a::after, .navbar-menu li.menu-item-has-children a::after { content: none !important; } } @media (min-width: 75em) { .navbar-menu li.menu-item-1381 a { padding-right: 0.75rem !important; } } @media (max-width: 75em) { .sub-menu { padding-left: 1em; } .sub-menu li a { font-size: 1em !important; } } /* GRID CARDS */ @media(max-width:900px) { .block.grid-cards .wp-block-ezpz-column { padding-bottom: 1rem; } } .block.grid-cards .wp-block-ezpz-column .inner-content { display:grid; align-items: center; grid-template-areas: "icon heading" "text text"; grid-template-columns: 60px 1fr; gap: 0.5rem; display: flex; flex-direction: column; background-color: var(--color-secondary-500); color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; width: 100%; } .block.grid-cards .wp-block-ezpz-column .inner-content figure { grid-area: icon; aspect-ratio: 1/1; margin: 0; max-height: 60px; //margin-top: -2.5rem; } .block.grid-cards .wp-block-ezpz-column .inner-content figure img { height: 100%; width: 100%; object-fit: contain; } .block.grid-cards .wp-block-ezpz-column .inner-content .wp-block-heading { grid-area: heading; margin: 0; text-align-center !important; } .block.grid-cards .wp-block-ezpz-column .inner-content .wp-block-heading a { text-decoration: none; curson: pointer; text-align-center !important; } .block.grid-cards .wp-block-ezpz-column .inner-content p{ margin-top: 1rem; } .block.grid-cards .wp-block-ezpz-column .inner-content .wp-block-heading a:hover { color: var(--color-tertiary-700) !important; } .block.grid-cards .wp-block-ezpz-column .inner-content:not(:has(.text-content)) p, .block.grid-cards .wp-block-ezpz-column .inner-content .text-content { grid-area: text; font-size: var(--font-size--1); } /* Highlight gray box*/ .highlight-gray-box .col.md-6:nth-child(2) .inner-content { background: linear-gradient( to bottom, rgba(230, 230, 230, 1) 0%, rgba(235, 235, 235, 1) 60%, rgba(245, 245, 245, 1) 85%, rgba(255, 255, 255, 1) 100% ); padding: 2rem; } /* The Project Page */ .section-goals img { aspect-ratio: 1 / 1; width: auto; object-fit: contain; width: 80px; margin: 0 auto; } /* GRID 2 COLUMN */ .block.grid-cards-two-col .wp-block-ezpz-column .inner-content { display: grid; align-items: center; grid-template-areas: "image image" "icon heading" "text text"; grid-template-columns: 60px 1fr; gap: 0.5rem; gap: 0.5rem; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .image-full-size { grid-area: image; height: 100%; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .image-full-size img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .icon-img { grid-area: icon; aspect-ratio: 1 / 1; margin: 0; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .icon-img img { width: 100%; height: 100%; object-fit: contain; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .wp-block-heading { grid-area: heading; margin: 0; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .wp-block-heading a { text-decoration: none; curson: pointer; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content .wp-block-heading a:hover { color: var(--color-tertiary-700) !important; } .block.grid-cards-two-col .wp-block-ezpz-column .inner-content ul { grid-area: text; margin-top: 0.5rem; font-size: var(--font-size--1); } /* Video homepage*/ .home .wp-video { width: 100% !important; } .technologies-card-block .wp-block-ezpz-column{ padding-bottom: 1.5rem; height: -webkit-fill-available; } .technologies-card-block .wp-block-ezpz-column::before{ content: ''; width: calc(100% - 3rem); background: var(--color-secondary-500); height: 0.25rem; position: absolute; bottom: -1.5rem; } .technologies-card-block .wp-block-ezpz-column .inner-content{ background: var(--color-neutral-25); border-radius: 1rem; overflow: hidden; } .technologies-card-block .wp-block-ezpz-column .inner-content img{ height: 100%; } .block-slider img{ width: 100%; height: 100%; position: absolute; top:0; left:0; object-fit: cover; } .block-slider .swiper-slide .col { display: flex; align-items: flex-end; z-index: 9; padding-bottom: 1.5rem; } .block-slider .swiper-slide .col p{ font-size: var(--font-size-5); line-height: 1.1; } .block-slider .swiper-slide .row{ margin-left: 0px; margin-right: 0px; padding: 1.5rem; height: 100%; } .block-slider .swiper-slide { background: var(--color-secondary-500); border-radius: 1rem; height: auto; color: white !important; position: relative; min-height: 500px; overflow: hidden; } .block-slider .swiper-slide::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; height: 80%; width: 100%; z-index: 2; background-image: url(https://cotesbach-development.co.uk/wp-content/uploads/2025/11/loop-gradient2-scaled.png); background-repeat: no-repeat; background-position: top; background-size: cover; } .block-slider .swiper-slide::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 70%; z-index: 1; background: linear-gradient(0deg, rgba(20, 19, 59, 1) 15%, rgba(14, 125, 194, 1) 50%, rgba(14, 125, 194, 0) 100%); opacity: 1 !important; } @media(max-width: 900px){ .block-slider .swiper-slide .col p{ font-size: var(--font-size-4); line-height: 1.1; } }