/* ==================================================================
MOHAMMEDI BUILDERS — SHARED SITE STYLES (css/site.css)
------------------------------------------------------------------
Include on EVERY page AFTER css/style.css:
Provides, identically on every page:
1. Slim white navigation bar
2. Full-width hero holding ONE admin-posted video or photo
3. Loading splash with the logo
4. Scroll reveal animations
5. Footer navigation links
================================================================== */
:root {
--nav-h: 80px; /* navbar height — hero starts below this */
--mb-green: #2e7d32;
--mb-dark: #1a5c28;
--mb-ink: #0f2117;
--mb-gold: #e8a020;
}
/* ==================================================================
1. NAVIGATION — slim white bar, same on every page
================================================================== */
#navigation { background: #fff; }
.navbar {
padding: 8px 0 !important;
background-color: #fff;
box-shadow: 0 2px 14px rgba(0,0,0,.08);
}
.navbar-brand { padding: 0 !important; margin-right: 0; display: flex; align-items: center; }
#navigation .logoBox {
height: 64px !important;
width: 150px !important;
margin-left: 6px;
background-size: contain !important;
background-position: left center !important;
background-repeat: no-repeat !important;
}
.navbar-nav { align-items: center; }
.navbar-nav .nav-item .nav-link {
padding: 7px 14px !important;
font-size: .92rem;
font-weight: 600;
border-radius: 6px;
white-space: nowrap;
}
.navbar .navbar-toggler { padding: 4px 9px; font-size: .95rem; }
@media (max-width: 991px) {
:root { --nav-h: 66px; }
.navbar { padding: 6px 0 !important; }
#navigation .logoBox { height: 52px !important; width: 124px !important; }
.navbar-nav .nav-item .nav-link { padding: 9px 14px !important; }
.navbar-collapse { background: #fff; padding-bottom: 8px; }
}
@media (max-width: 575px) {
:root { --nav-h: 60px; }
#navigation .logoBox { height: 46px !important; width: 110px !important; }
}
/* ==================================================================
2. HERO — one admin-posted video or photo, every page
Markup expected on each page:
================================================================== */
.mb-hero {
position: relative;
width: 100%;
margin-top: var(--nav-h); /* starts where the white bar ends */
height: calc(100vh - var(--nav-h));
min-height: 420px;
max-height: 780px;
overflow: hidden;
/* Neutral base, NOT a brand colour. The built-in fallback photo in the
markup is visible straight away, so the hero never shows as a flat
block of colour while the admin media is still downloading. */
background: #20242a;
}
/* Shorter hero on interior pages */
.mb-hero.mb-hero-short { height: calc(72vh - var(--nav-h)); min-height: 360px; }
.mb-hero-media {
position: absolute; inset: 0; z-index: 0;
/* Visible immediately. The fallback ![]()
in the page shows at once and
is replaced by the admin's media with a crossfade when it arrives. */
opacity: 1;
transition: opacity .6s ease;
}
/* Used only for the brief moment the admin media is swapped in */
.mb-hero-media.swapping { opacity: 0; }
/* cover = fills the hero edge to edge on any aspect ratio.
Works for portrait and landscape source files alike. */
.mb-hero-media img,
.mb-hero-media video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
animation: mbHeroDrift 28s ease-in-out infinite alternate;
}
@keyframes mbHeroDrift {
from { transform: scale(1); }
to { transform: scale(1.06); }
}
/* Cross-fade between hero slides */
.mb-hero-media img.mb-fade-out,
.mb-hero-media video.mb-fade-out { opacity: 0; transition: opacity .9s ease; }
.mb-hero-media img.mb-fade-in,
.mb-hero-media video.mb-fade-in { opacity: 1; transition: opacity .9s ease; }
.mb-hero-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
to bottom,
rgba(0,0,0,.46) 0%,
rgba(0,0,0,.30) 45%,
rgba(15,33,23,.74) 100%
);
}
.mb-hero-caption {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 20px 30px;
}
.mb-hero-caption h1,
.mb-hero-caption h5 {
color: #fff;
font-size: clamp(1.45rem, 3.2vw, 2.4rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -.3px;
margin: 0 0 12px;
max-width: 820px;
text-shadow: 0 3px 16px rgba(0,0,0,.5);
animation: mbRise .85s cubic-bezier(.4,0,.2,1) .15s both;
}
.mb-hero-caption p {
color: rgba(255,255,255,.9);
font-size: clamp(.82rem, 1.25vw, .98rem);
line-height: 1.65;
margin: 0 0 20px;
max-width: 560px;
text-shadow: 0 2px 10px rgba(0,0,0,.45);
animation: mbRise .85s cubic-bezier(.4,0,.2,1) .3s both;
}
.mb-hero-btns {
display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
animation: mbRise .85s cubic-bezier(.4,0,.2,1) .45s both;
}
@keyframes mbRise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.mb-hero-btn {
background: #fff; color: var(--mb-dark);
border: none; border-radius: 7px;
padding: 9px 22px; font-size: .84rem; font-weight: 800;
letter-spacing: .3px; cursor: pointer; text-decoration: none;
transition: background .2s, color .2s, transform .15s;
}
.mb-hero-btn:hover { background: var(--mb-green); color: #fff; transform: translateY(-2px); }
.mb-hero-btn.outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.75); }
.mb-hero-btn.outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }
@media (max-width: 575px) {
.mb-hero { height: calc(80vh - var(--nav-h)); min-height: 340px; }
.mb-hero-caption { padding: 14px 18px; }
.mb-hero-btn { padding: 8px 18px; font-size: .8rem; }
}
/* Portrait phones: bias the crop toward the top so faces/buildings survive */
@media (orientation: portrait) and (max-width: 767px) {
.mb-hero-media img,
.mb-hero-media video { object-position: center 35%; }
}
/* ==================================================================
3. LOADING SPLASH
Shown while the hero media preloads. Hard-capped so it can never
become the reason the site feels slow.
================================================================== */
#mbSplash {
position: fixed; inset: 0; z-index: 99999;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
/* No solid colour page. Only a light scrim so the white logo stays
readable — the real page shows through, softly blurred, behind it. */
background: rgba(10, 18, 13, .34);
transition: opacity .4s ease, visibility .4s ease;
}
#mbSplash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
/* The page itself is blurred while the gate is up, then sharpens.
Everything except the splash gets the blur, so the visitor can see
the page forming underneath instead of staring at a blank colour. */
body.mb-loading { overflow: hidden; }
body.mb-loading > *:not(#mbSplash) {
filter: blur(11px) saturate(.97);
transform: scale(1.01);
transition: filter .45s cubic-bezier(.4,0,.2,1),
transform .45s cubic-bezier(.4,0,.2,1);
pointer-events: none;
}
/* When the class is removed the blur animates away to full sharpness */
body > *:not(#mbSplash) {
transition: filter .45s cubic-bezier(.4,0,.2,1),
transform .45s cubic-bezier(.4,0,.2,1);
}
.mb-splash-inner {
display: flex; flex-direction: column; align-items: center;
animation: mbSplashPop .4s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes mbSplashPop {
from { opacity: 0; transform: scale(.9); }
to { opacity: 1; transform: scale(1); }
}
/* Logo breathes in and out for the whole four seconds */
.mb-splash-logo {
max-width: 230px; width: 60vw; height: auto;
filter: drop-shadow(0 8px 26px rgba(0,0,0,.55));
animation: mbSplashBreathe 1.15s ease-in-out infinite;
}
@keyframes mbSplashBreathe {
0%,100% { transform: scale(1); opacity: .92; }
50% { transform: scale(1.06); opacity: 1; }
}
.mb-splash-bar {
width: 190px; height: 3px; margin-top: 26px;
background: rgba(255,255,255,.22); border-radius: 3px; overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.mb-splash-bar span {
display: block; height: 100%; width: 0%;
background: linear-gradient(90deg, var(--mb-green), var(--mb-gold));
border-radius: 3px; transition: width .18s ease;
}
.mb-splash-txt {
margin-top: 12px; color: rgba(255,255,255,.8);
font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* Reduced-motion users get no blur and no pulsing */
@media (prefers-reduced-motion: reduce) {
body.mb-loading > *:not(#mbSplash) { filter: none; transform: none; }
.mb-splash-logo { animation: none; }
}
/* ==================================================================
4. SCROLL REVEAL
Add data-reveal="up" | "left" | "right" | "zoom" to any element.
================================================================== */
[data-reveal] {
opacity: 0;
transition: opacity .75s cubic-bezier(.4,0,.2,1),
transform .75s cubic-bezier(.4,0,.2,1);
will-change: opacity, transform;
}
[data-reveal="up"] { transform: translateY(38px); }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"] { transform: scale(.93); }
[data-reveal].revealed {
opacity: 1;
transform: none;
}
/* Children stagger one after another */
[data-reveal-group] > * {
opacity: 0; transform: translateY(30px);
transition: opacity .65s ease, transform .65s ease;
}
[data-reveal-group].revealed > * { opacity: 1; transform: none; }
[data-reveal-group].revealed > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-group].revealed > *:nth-child(2) { transition-delay: .13s; }
[data-reveal-group].revealed > *:nth-child(3) { transition-delay: .21s; }
[data-reveal-group].revealed > *:nth-child(4) { transition-delay: .29s; }
[data-reveal-group].revealed > *:nth-child(5) { transition-delay: .37s; }
[data-reveal-group].revealed > *:nth-child(6) { transition-delay: .45s; }
/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
[data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
.mb-hero-media img, .mb-hero-media video,
.mb-splash-logo { animation: none !important; }
}
/* ==================================================================
5. FOOTER NAVIGATION
================================================================== */
footer .foot-link {
display: block;
color: rgba(255,255,255,.86);
text-decoration: none;
font-size: .95rem;
margin-bottom: .55rem;
transition: color .18s, transform .18s;
}
footer .foot-link:hover,
footer .foot-link:focus-visible { color: #8bc34a; transform: translateX(5px); }
footer .foot-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
footer .foot-nav a {
color: rgba(255,255,255,.78);
text-decoration: none;
font-size: .87rem; font-weight: 600;
transition: color .18s;
}
footer .foot-nav a:hover,
footer .foot-nav a:focus-visible { color: #8bc34a; text-decoration: underline; }
footer .foot-logo-link { display: inline-block; }
@media (max-width: 991px) {
footer .foot-nav { justify-content: center; }
footer .foot-nav, footer .col.mx-auto { text-align: center; }
}
/* ==================================================================
6. MEDIA QUALITY HELPERS
"contain" is used wherever the FULL picture must be visible and
never cropped — popups, galleries, product cards.
================================================================== */
.mb-media-contain {
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
background: #0d0d0d; /* letterbox colour */
display: block;
image-rendering: auto;
}
.mb-media-cover {
width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block;
}
/* Skeleton shimmer while an image is still downloading */
.mb-skeleton {
background: linear-gradient(90deg,#e8f5e9 25%,#d4ecd5 50%,#e8f5e9 75%);
background-size: 400px 100%;
animation: mbShimmer 1.3s infinite linear;
}
@keyframes mbShimmer {
from { background-position: -400px 0; }
to { background-position: 400px 0; }
}
<-- fallback only