/*
---------------------------------------------
MAMI — Redesign layer (inspired by hayriake.mg)
Loaded AFTER templatemo-space-dynamic.css on every page.
Real photography heroes, a stat band, cleaner cards,
no illustration/clipart. Keeps the MAMI green/blue palette.
---------------------------------------------
*/
/* -----------------------------------------
0. Bug fix: partner logos had no ![]()
rule
(the base theme only styled the old
icon+text placeholder) — real logos were
overflowing their box.
------------------------------------------ */
.partner-logo {
border-style: solid;
background: var(--bg-surface);
padding: 18px;
}
.partner-logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: .8;
transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.partner-logo:hover img {
filter: grayscale(0%);
opacity: 1;
}
/* Alterra's logo is drawn in white (meant for a dark
header) — give that one tile a dark chip so it reads. */
.partner-logo.on-dark {
background: var(--color-dark, #0f1b2d);
border-color: var(--color-dark, #0f1b2d);
}
.partner-logo.on-dark img {
filter: none;
opacity: .9;
}
.partner-logo.on-dark:hover img {
filter: none;
opacity: 1;
}
/* -----------------------------------------
1. Full-bleed photo hero
Add class "hero-photo" to .main-banner /
.news-hero and set style="background-image:
url(...)" inline on the element.
------------------------------------------ */
.hero-photo {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 640px;
display: flex;
align-items: center;
padding: 210px 0 90px 0 !important;
position: relative;
overflow: hidden;
}
.hero-photo:after,
.hero-photo:before {
content: none !important;
}
.hero-photo .hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(11, 26, 18, .82) 0%, rgba(11, 26, 18, .58) 42%, rgba(11, 26, 18, .22) 75%);
z-index: 0;
}
.hero-photo > .container {
position: relative;
z-index: 1;
}
.hero-photo .left-content,
.hero-photo .hero-box {
margin-right: 0;
}
.hero-photo .left-content h6,
.hero-photo .news-chip {
color: #ffd97d;
}
.hero-photo .left-content h1,
.hero-photo h1 {
color: #fff;
}
.hero-photo .left-content h1 em,
.hero-photo h1 em {
color: #7be3a8;
}
.hero-photo .left-content h1 span,
.hero-photo h1 span {
color: #ffd97d;
}
.hero-photo .left-content p,
.hero-photo p {
color: rgba(255, 255, 255, .88);
font-size: 17px;
max-width: 560px;
}
.hero-photo .phone-info h4,
.hero-photo .phone-info a {
color: #fff;
}
.hero-photo .phone-info a {
text-decoration: underline;
}
/* frosted-glass search bar sitting on the photo */
.hero-photo .left-content form input {
background-color: rgba(255, 255, 255, .16);
border: 1.5px solid rgba(255, 255, 255, .5);
backdrop-filter: blur(6px);
}
.hero-photo .left-content form input::placeholder {
color: rgba(255, 255, 255, .85);
}
.hero-photo .left-content form button {
background-color: #fff;
color: var(--color-primary-dark);
}
/* CTA row used on photo heroes */
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.btn-pill {
display: inline-block;
padding: 14px 30px;
border-radius: 999px;
font-weight: 600;
letter-spacing: .2px;
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn-pill-solid {
background: var(--color-primary);
color: #fff !important;
box-shadow: 0 10px 24px rgba(15, 27, 45, .25);
}
.btn-pill-solid:hover {
transform: translateY(-3px);
background: var(--color-primary-dark);
}
.btn-pill-outline {
border: 1.5px solid rgba(255, 255, 255, .7);
color: #fff !important;
}
.btn-pill-outline:hover {
background: rgba(255, 255, 255, .12);
transform: translateY(-3px);
}
@media (max-width: 991px) {
.hero-photo {
min-height: 460px;
padding: 170px 0 70px 0 !important;
}
}
@media (max-width: 576px) {
.hero-photo {
min-height: 420px;
padding: 150px 0 60px 0 !important;
}
.hero-photo .left-content h1,
.hero-photo h1 {
font-size: 34px !important;
line-height: 1.3 !important;
}
}
.hero-photo .contact-form-card {
background: var(--bg-surface);
border-radius: 24px;
padding: 34px;
box-shadow: 0 20px 45px rgba(15, 27, 45, .3);
}
@media (max-width: 576px) {
.hero-photo .contact-form-card {
padding: 22px;
}
}
/* -----------------------------------------
2. Stat band — overlapping card, like
hayriake's impact metrics row.
------------------------------------------ */
.stat-band-wrap {
position: relative;
z-index: 2;
}
.stat-band {
background: var(--bg-surface);
border-radius: 20px;
box-shadow: 0 24px 50px rgba(15, 27, 45, .18);
margin-top: -70px;
padding: 34px 10px 12px;
}
@media (max-width: 767px) {
.stat-band {
margin-top: -40px;
border-radius: 16px;
}
}
.stat-band .stat-card {
background: transparent;
border-radius: 0;
border-right: 1px solid var(--border-soft);
}
.stat-band .stat-label {
color: var(--color-heading);
}
.stat-band .col-6:nth-child(2n) .stat-card,
.stat-band .col-lg-3:last-child .stat-card {
border-right: none;
}
@media (max-width: 767px) {
.stat-band .col-6:nth-child(2n) .stat-card {
border-right: none;
}
}
@media (min-width: 992px) {
.stat-band .col-lg-3:nth-child(2n) .stat-card {
border-right: 1px solid var(--border-soft);
}
}
/* -----------------------------------------
3. Real-photo panels (replaces the old
clipart .left-image illustrations)
------------------------------------------ */
.photo-panel {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 45px rgba(15, 27, 45, .16);
}
.photo-panel img {
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
display: block;
}
.photo-panel.ratio-tall img {
aspect-ratio: 4 / 5;
}
.photo-panel.ratio-wide img {
aspect-ratio: 16 / 10;
}
/* -----------------------------------------
4. Section polish
------------------------------------------ */
.section-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-size: 13px;
color: var(--color-accent);
margin-bottom: 10px;
}
.service-line-image img,
.our-portfolio .card-image img,
.news-card img,
.featured-news img {
transition: transform .5s ease;
}
.our-portfolio .item:hover .card-image img,
.news-card:hover img,
.featured-news:hover img {
transform: scale(1.06);
}
.service-line-image {
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(15, 27, 45, .14);
}
/* -----------------------------------------
5. Gallery hero grid polish (real photos
already used there — light visual lift)
------------------------------------------ */
.gallery-caption {
font-weight: 600;
}
/* -----------------------------------------
6. Form fix: the markup wraps every field
in a bare