@charset "UTF-8";
/*
 * Colours / visual styling
 * ------------------------
 * This file contains colour, background, border-colour, shadow/filter and
 * other purely visual properties. Layout and sizing live in layout.css.
 */

:root {
    --colour-black: #000;
    --colour-white: #fff;
    --colour-offwhite: #f0f1ec;
    --colour-teal: #3d9587;
    --colour-teal-light: #41a297;
    --colour-dark: #2d2d2f;
    --colour-dark-text: #222529;
    --colour-light-grey: #ececec;
    --colour-warm-grey: #ded2b8;
    --colour-sidebar: #efefef;
    --colour-mid-grey: #ccc;
    --colour-border-dark: #333333;
    --colour-border: #414141;
    --colour-border-light: #d9d8d3;
    --colour-card-text: #202a2b;
    --colour-muted: #989898;
    --colour-footer: #617677;
    --colour-yellow: #fbb312;
}

/* --------------------------------------------------------------------------
   Page / bands
   -------------------------------------------------------------------------- */

body {
    background-color: var(--colour-black);
}

body.blog,
body.wp-singular,
body.archive,
body.search {
    background-color: var(--colour-white);
}

#bandbanner,
#wrapper {
    background-color: var(--colour-black);
}

body.blog #wrapper, body.wp-singular #wrapper {
    background-color: var(--colour-warm-grey);
}

#band0 {
    background-color: var(--colour-black);
}

#band0 .wp-block-heading {
    color: var(--colour-offwhite);
}

#band0 h5 {
    color: var(--colour-dark-text);
}

#band0 hr {
    color: var(--colour-white);
}

.wp-block-heading mark {
    background-color: transparent;
    color: var(--colour-teal-light);
}

#band1 {
    background-color: var(--colour-offwhite);
}

#band2 {
    background-color: var(--colour-light-grey);
}

#band2 .wp-block-heading,
#band2 p {
    color: var(--colour-black);
}

#band3 {
    background-color: var(--colour-dark);
}

#band3 .wp-block-heading,
#band0 p,
#band3 p {
    color: #e3e4e0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.section-btn-sq,
.btn-outline-secondary-sq {
    border-color: transparent;
    background-color: var(--colour-black);
    color: var(--colour-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z' transform='translate(-8.59 -6)' fill='%23fff'/%3E%3C/svg%3E");
}

#band1 .section-btn-sq,
#band2 .section-btn-sq,
.blog .btn-outline-secondary-sq {
    background-color: var(--colour-black);
    color: var(--colour-white);
}

#sitefooter #band0 {
    border-top-color: var(--colour-teal);
    border-bottom-color: var(--colour-teal);
	border-style: solid;
    border-width: 1px;
}

.section-btn-tilt {
    border-color: transparent;
    background-color: var(--colour-black);
    color: var(--colour-white);
}

.section-btn,
.btn-outline-secondary {
    border-color: transparent;
    background-color: var(--colour-teal);
    color: var(--colour-white);
}

.section-btn-inner::after {
    border-top-color: var(--colour-white);
    border-right-color: var(--colour-white);
}

#band1 .projectbtn .section-btn:hover {
    background-color: #4d4d4e;
}

.section-btn:hover,
.btn-outline-secondary:hover {
    -webkit-filter: opacity(70%);
    filter: opacity(70%);
}

.tint {
    color: var(--colour-teal);
}

.tint_light {
    color: var(--colour-offwhite);
}

.tint_dark {
    color: var(--colour-dark-text);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.bg-dark {
    background-color: var(--colour-black) !important;
    border-bottom-color: var(--colour-dark);
    opacity: 1;
}

.nav-link {
    --bs-nav-link-color: #fafafa;
    color: var(--bs-nav-link-color);
}

.navbar-toggler {
    background-color: var(--colour-black);
    border-color: var(--colour-black);
    color: var(--colour-white) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3E%3Cpath stroke=%27rgba%28255, 255, 255, 1%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3E%3C/svg%3E") !important;
}

.navbar-toggler:focus {
    border-color: var(--colour-white);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.footernav .current-menu-item a,
a.nav-link:hover {
    color: var(--colour-teal);
}

/* --------------------------------------------------------------------------
   Cards / content
   -------------------------------------------------------------------------- */

.quote-card {
    background-color: transparent;
    color: var(--colour-white);
    border-bottom-color: var(--colour-border-dark);
}

.quote-card a {
    color: var(--colour-light-grey);
}

.container.divider {
    border-top-color: var(--colour-border-dark);
}

.card-title a {
    color: var(--colour-card-text) !important;
}

#sidebar {
    background-color: var(--colour-sidebar);
}

#sidebar h2,
#sidebar a {
    color: var(--colour-card-text);
}

#sidebar .wp-block-group {
    border-bottom-color: var(--colour-black);
}

#sidebar li {
    background-color: var(--colour-mid-grey);
}

.fa-envelope,
.fa-instagram,
.fa-linkedin,
.fa-facebook,
.fa-twitter,
.fa-phone {
    color: var(--colour-white);
}

.mini-dash {
    border-top-color: var(--colour-yellow);
}

#contact p.contactdetails a:hover {
    color: var(--colour-yellow);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footernav a,
#sitefooter h5,
.footernav .email_address {
    color: var(--colour-muted);
}

.footernav a:hover,
.footernav .email_address a {
    color: var(--colour-white);
}

.footernav .email_address a:hover {
    color: var(--colour-muted);
}

#footer p,
footer a,
#footer {
    color: var(--colour-footer);
}

#footer {
    background-color: var(--colour-black);
}

footer a:hover {
    color: var(--colour-white);
}

/* --------------------------------------------------------------------------
   Teams / social links
   -------------------------------------------------------------------------- */

.social-link a {
    background-color: var(--colour-mid-grey);
    color: var(--colour-white);
}

.tsocials .fa-linkedin {
    color: var(--colour-teal);
}

.social-link a:hover {
    background-color: var(--colour-black);
    color: var(--colour-white);
}

#band0 .team-member h5,
#band0 .team-member .trole {
    color: var(--colour-white);
}

/* --------------------------------------------------------------------------
   Services / dividers / decorative elements
   -------------------------------------------------------------------------- */

#services :first-child.wp-block-column {
    border-color: var(--colour-black);
}

#services .wp-block-column {
    border-left-color: var(--colour-border-dark);
}

.wire-frame-box,
.wire-frame-box-square {
    border-color: var(--colour-black);
    background-color: var(--colour-mid-grey);
}

.solidbtn .nav-link {
    border-color: var(--colour-teal);
}



	.box-divider{
		border: none;
		border-top: 0px solid #3d9587;
		opacity: 0;
		margin: 0px;
		margin-bottom: 10px;
	}

.sideborderboth {
    border-left-color: var(--colour-border);
    border-right-color: var(--colour-border);
}

.sideborderright,
.sideborderleft {
    border-color: var(--colour-border-light);
}

/* --------------------------------------------------------------------------
   Image-backed sections
   -------------------------------------------------------------------------- */

.media_queries,
.improving_choice,
.slash_bk {
    background-color: var(--colour-black);
    color: var(--colour-white);
}

.media_queries {
    background-image: url('https://dev.tiltcollective.org/wp-content/uploads/2026/09/about_mediaenquiries2-1.jpg');
}

.improving_choice {
    background-image: url('https://dev.tiltcollective.org/wp-content/uploads/2026/09/home_market.jpg');
}

.slash_bk {
    background-image: url('https://dev.tiltcollective.org/wp-content/uploads/2026/09/tilt-bk.jpg');
}

@media (max-width: 990px) {
    .improving_choice,
    .media_queries {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

@media (max-width: 778px) {
    .slash_bk {
        background-color: rgba(0, 0, 0, 0.8);
        color: var(--colour-offwhite);
    }
}


/* Logo hover treatment */
.logo-img {
    filter: grayscale(0%) opacity(100%);
}

a .logo-img:hover,
.logo-card:hover .logo-img {
    filter: grayscale(100%) opacity(70%);
}