/* Modern House Group — 2026 visual system */ :root { --mh-yellow: #f2bb16; --mh-green: #64c355; --mh-gold: #d0a572; --mh-navy: #13152a; --ink: #101218; --paper: #f5f3ed; --white: #fff; --glass: rgba(255, 255, 255, 0.1); --glass-strong: rgba(17, 19, 24, 0.62); --glass-line: rgba(255, 255, 255, 0.2); --shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.22); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } html { scroll-behavior: smooth; } body, button, input, optgroup, select, textarea, p, h1, h2, h3, h4, h5, h6, .section-title, .navbar .dropdown-menu .dropdown-item, .modal-title { font-family: "Alexandria", sans-serif !important; } body { background: var(--paper); color: #65666d; } a:focus-visible, button:focus-visible { outline: 2px solid var(--brand, var(--mh-yellow)); outline-offset: 4px; } /* ---------- Group landing page ---------- */ .home-2026 { --brand: var(--mh-yellow); background: #090a0d; color: #fff; overflow: hidden; } html:has(.home-2026), body.home-2026 { width: 100%; max-width: 100%; overflow-x: clip; } .home-2026 .preloader-bg, .home-2026 #preloader { background: #090a0d; } .group-nav { position: fixed; z-index: 1000; top: 18px; left: 50%; width: min(1320px, calc(100% - 40px)); height: 76px; padding: 0 14px 0 20px; display: grid; grid-template-columns: 230px 1fr 190px; align-items: center; gap: 20px; direction: rtl; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; background: rgba(12, 13, 16, 0.46); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); transform: translateX(-50%); transition: border-color 500ms ease, background 500ms ease; } .group-brand { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; } .group-brand img { width: 54px; max-height: 50px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3)); } .group-brand img.logo-flat { filter: none; } .group-brand span, .group-brand small { display: block; } .group-brand small { margin-bottom: 2px; color: rgba(255, 255, 255, 0.58); font-size: 9px; font-weight: 400; letter-spacing: 0.03em; } .company-switcher { display: flex; align-items: center; justify-content: center; gap: 4px; } .company-switcher a { position: relative; padding: 10px 14px; border-radius: 14px; color: rgba(255, 255, 255, 0.58); font-size: 12px; font-weight: 400; transition: color 300ms ease, background 300ms ease, transform 300ms var(--ease-out); } .company-switcher a span { margin-left: 5px; font-size: 9px; color: var(--brand); transition: color 500ms ease; } .company-switcher a:hover, .company-switcher a.active { color: #fff; background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); } .company-switcher a.active::after { content: ""; position: absolute; right: 14px; bottom: 4px; width: calc(100% - 28px); height: 2px; border-radius: 3px; background: var(--brand); box-shadow: 0 0 14px var(--brand); } .nav-contact { height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.09); color: #fff; font-size: 12px; transition: color 300ms ease, background 300ms ease, transform 300ms var(--ease-out); } .nav-contact i { color: var(--brand); } .nav-contact:hover { background: var(--brand); color: #111; transform: translateY(-2px); } .nav-contact:hover i { color: inherit; } /* ---------- Language toggle + quick call (group nav + every brand-page navbar) ---------- Fixed chrome position in both languages — only the wording (and dir on , which drives the rest of the page) changes when this is clicked. */ .nav-tools { display: flex; align-items: center; gap: 8px; direction: ltr; } @media (min-width: 992px) { .group-nav .nav-tools { grid-column: 3; } } .nav-call, .lang-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 44px; border: 1px solid rgba(23, 25, 29, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.72); color: #17191d; cursor: pointer; transition: background 300ms ease, color 300ms ease, transform 300ms var(--ease-out); } .nav-call { width: 44px; font-size: 15px; } .lang-toggle { padding: 0 14px; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .lang-toggle i { color: var(--brand); font-size: 14px; } .nav-call:hover, .lang-toggle:hover { background: var(--brand); color: #17191d; transform: translateY(-2px); } .lang-toggle:hover i { color: inherit; } @media (max-width: 991px) { .nav-tools { gap: 6px; } .nav-call, .lang-toggle { height: 40px; border-radius: 13px; } .nav-call { width: 40px; } .lang-toggle { padding: 0 10px; font-size: 11px; } } .company-panels { width: 100%; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior-y: contain; } .company-panels::-webkit-scrollbar { display: none; } .company-panel { --brand: var(--mh-yellow); position: relative; isolation: isolate; width: 100%; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background-position: center; background-size: cover; } .company-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient( 90deg, rgba(6, 7, 10, 0.96) 0%, rgba(6, 7, 10, 0.74) 42%, rgba(6, 7, 10, 0.2) 76%, rgba(6, 7, 10, 0.48) 100% ), linear-gradient(0deg, rgba(3, 4, 7, 0.72) 0%, transparent 40%); } .company-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.13; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } .brand-modern { --brand: var(--mh-yellow); } .brand-kitchen { --brand: var(--mh-green); } .brand-luxury { --brand: var(--mh-gold); } .brand-aluminium { --brand: #9da9d4; } .brand-facade { --brand: #1b594e; } .panel-glow { position: absolute; z-index: -1; top: 50%; right: -14vw; width: 38vw; height: 38vw; border-radius: 50%; background: var(--brand); opacity: 0.14; filter: blur(90px); transform: translateY(-50%); transition: background 700ms ease; } .panel-inner { width: min(1240px, calc(100% - 120px)); margin: 108px auto 54px; display: grid; grid-template-columns: minmax(0, 1.2fr) 340px; gap: clamp(60px, 10vw, 160px); align-items: end; } .company-copy { width: 100%; min-width: 0; max-width: 720px; padding: clamp(28px, 4vw, 54px); border: 1px solid var(--glass-line); border-radius: 34px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) ); box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%); transform: translateY(44px); opacity: 0; transition: transform 950ms var(--ease-out), opacity 750ms ease; } .company-panel.active .company-copy { transform: translate(var(--pointer-x, 0), var(--pointer-y, 0)); opacity: 1; } .company-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: rgba(255, 255, 255, 0.7); font-size: 12px; } .company-index { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-size: 10px; font-weight: 600; } .company-copy h1, .company-copy h2 { margin: 0 0 22px; color: #fff; font-size: clamp(36px, 4.3vw, 68px); font-weight: 600; line-height: 1.22; letter-spacing: -0.04em; text-transform: none; overflow-wrap: anywhere; } .company-copy h1 em, .company-copy h2 em { color: var(--brand); font-style: normal; font-weight: 400; } .company-lead { max-width: 630px; margin: 0 0 26px; color: rgba(255, 255, 255, 0.7) !important; font-size: clamp(14px, 1.25vw, 17px); font-weight: 300; line-height: 2; } .company-lead bdi { white-space: nowrap; } .company-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; } .company-tags span { padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; background: rgba(255, 255, 255, 0.065); color: rgba(255, 255, 255, 0.8); font-size: 10px; } .company-tags i { margin-left: 6px; color: var(--brand); font-size: 12px; } .company-actions { display: flex; align-items: center; gap: 14px; } .primary-action, .secondary-action { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 16px; font-size: 12px; font-weight: 500; transition: transform 350ms var(--ease-out), box-shadow 350ms ease, background 350ms ease; } .primary-action { min-width: 178px; padding: 0 22px; background: var(--brand); color: #111; box-shadow: 0 12px 34px color-mix(in srgb, var(--brand) 24%, transparent); } .primary-action i { transition: transform 350ms var(--ease-out); } .primary-action:hover { color: #111; transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--brand) 34%, transparent); } .primary-action:hover i { transform: translateX(-5px); } .secondary-action { padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; background: rgba(255, 255, 255, 0.045); } .secondary-action:hover { color: #fff; background: rgba(255, 255, 255, 0.12); transform: translateY(-3px); } .company-proof { width: 100%; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; background: rgba(10, 11, 14, 0.36); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: translateY(35px); opacity: 0; transition: transform 900ms 180ms var(--ease-out), opacity 700ms 180ms ease; } .company-panel.active .company-proof { transform: translateY(0); opacity: 1; } .proof-label { color: var(--brand); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; } .proof-line { width: 100%; height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, var(--brand)); opacity: 0.55; } .company-proof p { margin: 0 0 28px; color: rgba(255, 255, 255, 0.8); font-size: 15px; line-height: 1.9; } .proof-footer { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.45); font-size: 9px; } .scroll-cue { position: absolute; z-index: 4; right: 50%; bottom: 18px; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.55); font-size: 9px; transform: translateX(50%); cursor: pointer; } .scroll-cue i { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; color: var(--brand); animation: cue-bounce 2s ease-in-out infinite; } @keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .panel-progress { position: fixed; z-index: 20; left: 26px; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.45); font-size: 9px; transform: translateY(-50%); } .progress-number { color: var(--brand); transition: color 500ms ease; } .progress-track { width: 1px; height: 120px; overflow: hidden; background: rgba(255, 255, 255, 0.18); } .progress-track i { display: block; width: 100%; height: 20%; background: var(--brand); transition: height 700ms var(--ease-out), background 500ms ease; } .floating-contact { position: fixed; z-index: 1001; left: 24px; bottom: 22px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; direction: ltr; } .contact-trigger { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 18px; background: var(--brand); color: #111; font-size: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); transition: transform 300ms var(--ease-out), background 500ms ease; } .floating-contact.open .contact-trigger { transform: rotate(8deg) scale(0.94); } .contact-options { display: grid; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(15px); transition: opacity 250ms ease, transform 350ms var(--ease-out); } .floating-contact.open .contact-options { opacity: 1; pointer-events: auto; transform: translateY(0); } .contact-options a { min-width: 118px; height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 13px; background: rgba(10, 11, 14, 0.68); color: #fff; font-size: 10px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .contact-options a:hover { background: var(--brand); color: #111; } /* ---------- Internal company pages ---------- */ body.brand-page { --brand: var(--mh-yellow); --brand-rgb: 242, 187, 22; } body.brand-house { --brand: var(--mh-yellow); --brand-rgb: 242, 187, 22; } body.brand-kitchen-page { --brand: var(--mh-green); --brand-rgb: 100, 195, 85; } body.brand-luxury-page { --brand: var(--mh-gold); --brand-rgb: 208, 165, 114; } body.brand-aluminium-page { --brand: #7783ad; --brand-rgb: 119, 131, 173; } body.brand-facade-page { --brand: #1b594e; --brand-rgb: 27, 89, 78; } .brand-page { background: #f5f3ed; } .brand-page .navbar { position: fixed; top: 18px; left: 50%; width: min(1320px, calc(100% - 40px)); height: 78px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; background: rgba(12, 13, 16, 0.38); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); transform: translateX(-50%); } .brand-page .navbar .container { max-width: none !important; padding: 0 18px; } .brand-page .navbar .navbar-nav .nav-link { padding: 10px 14px; border-radius: 13px; font-size: 15px; font-weight: 400; text-transform: none; } .brand-page .navbar .navbar-nav .nav-link:hover, .brand-page .navbar .navbar-nav .nav-link.active { color: var(--brand) !important; background: rgba(255, 255, 255, 0.08); } .brand-page .logo-img { width: 86px; max-height: 62px; object-fit: contain; filter: none; } .brand-page .parallax-header { min-height: 100dvh; height: auto; isolation: isolate; overflow: hidden; background-attachment: scroll; } .brand-page .parallax-header::after { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient( circle at 80% 55%, rgba(var(--brand-rgb), 0.18), transparent 38% ), linear-gradient(90deg, rgba(5, 6, 9, 0.23), rgba(5, 6, 9, 0.75)); pointer-events: none; } .brand-page .parallax-header[data-overlay-dark]::before { opacity: 0.42; } .brand-page .parallax-header .container { z-index: 3; } .brand-page .parallax-header .row > div { max-width: 760px; } .brand-page .parallax-header h1 { margin-bottom: 20px; font-size: clamp(36px, 4vw, 62px); font-weight: 600; line-height: 1.6; text-transform: none; letter-spacing: -0.035em; } /* Overrides a legacy vendor rule (.parallax-header h1 span { color:#c5a47e }) that would otherwise recolor the plain prefix/suffix spans gold too. */ .brand-page .parallax-header h1 span { color: inherit; } .brand-page .parallax-header h1 .hero-highlight { display: inline; padding: 4px 14px 6px; border-radius: 10px; background: var(--brand); color: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .brand-page .parallax-header p { color: rgba(255, 255, 255, 0.74); font-size: 15px; line-height: 2; } .brand-page .button-1 { width: auto; min-width: 180px; padding: 13px 28px; border: 0; border-radius: 16px; background: var(--brand) !important; color: #111; font-size: 13px; font-weight: 500; box-shadow: 0 14px 34px rgba(var(--brand-rgb), 0.25); } .brand-page .button-1:hover { border: 0; color: #111; background: #fff !important; } .brand-page .section-padding { padding: 105px 0; } .brand-page .section-title { color: var(--ink); font-size: clamp(36px, 4vw, 54px); font-weight: 600; letter-spacing: -0.04em; text-transform: none; } .brand-page .section-subtitle, .brand-page .section-subtitle-lux, .brand-page .section-subtitle-kit, .brand-page .section-subtitle-alo { color: var(--brand) !important; font-size: 14px; font-weight: 600; line-height: 1.5; } .brand-page .section-subtitle::before { content: ""; width: 28px; height: 2px; margin-left: 10px; display: inline-block; vertical-align: middle; border-radius: 2px; background: var(--brand); } .brand-page .about .content { padding: clamp(28px, 4vw, 46px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 30px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 22px 60px rgba(26, 27, 32, 0.07); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .brand-page .about .content p { margin-top: 15px; color: #5f6168; font-size: 15px; line-height: 2.15; } .brand-page .about .item { border-radius: 30px; box-shadow: 0 24px 65px rgba(16, 18, 24, 0.15); } .brand-page .about .item img { min-height: 450px; object-fit: cover; } .brand-page .about .item .icon { background: var(--brand-surface); } .brand-page .button-4 { border-radius: 14px; background: var(--brand) !important; color: #111 !important; } .brand-page .portfolio-home { position: relative; overflow: hidden; padding-top: 100px; padding-bottom: 100px; background: #101218; } .brand-page .portfolio-home::before { content: ""; position: absolute; top: -220px; right: -220px; width: 500px; height: 500px; border-radius: 50%; background: rgba(var(--brand-rgb), 0.13); filter: blur(80px); } .brand-page .portfolio-home .section-title { color: #fff; } .brand-page .portfolio-home .item { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; background: rgba(255, 255, 255, 0.05); } .brand-page .portfolio-home .item img, .brand-page .portfolio-home .owl-item video { display: block; width: 100%; height: min(62vh, 620px); border-radius: 28px; object-fit: cover; } .brand-page .portfolio-home .item .img-zoom { display: block; width: 100%; } .brand-page .owl-theme .owl-dots .owl-dot.active span, .brand-page .owl-theme .owl-dots .owl-dot:hover span { background: var(--brand) !important; border-color: var(--brand) !important; } /* Portfolio carousels can hold 60+ slides — dots are disabled there (js/custom.js) so the prev/next arrows must stay visible instead of the theme's default hover-only opacity. */ .brand-page .portfolio-home .owl-nav [class*="owl-"] { opacity: 0.85 !important; } .brand-page .portfolio-home .owl-nav [class*="owl-"]:hover, .brand-page .portfolio-home:hover .owl-nav [class*="owl-"] { opacity: 1 !important; } .brand-page .portfolio-home .owl-theme .owl-nav { top: 50% !important; } .brand-page .blog .item { height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 26px; background: rgba(255, 255, 255, 0.62); box-shadow: 0 20px 50px rgba(16, 18, 24, 0.07); transition: transform 400ms var(--ease-out), box-shadow 400ms ease; } .brand-page .blog .item:hover { transform: translateY(-8px); box-shadow: 0 28px 65px rgba(16, 18, 24, 0.12); } .brand-page .blog .item .img { overflow: hidden; border-radius: 22px; } .brand-page .contact { position: relative; background: linear-gradient(145deg, #f0eee7, #faf9f6); } .brand-page .contact input, .brand-page .contact textarea { border: 1px solid rgba(var(--brand-rgb), 0.18); background: rgba(255, 255, 255, 0.72) !important; color: #25272d; box-shadow: 0 10px 30px rgba(16, 18, 24, 0.04); } .brand-page .contact input::placeholder, .brand-page .contact textarea::placeholder { color: #777b83 !important; } .brand-page .contact input[type="submit"] { background: var(--brand) !important; color: #111; } .brand-page .footer { background: #101218; } .brand-page .progress-wrap { border-radius: 18px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .brand-page .progress-wrap::after { color: var(--brand); } .brand-page .progress-wrap svg.progress-circle path { stroke: var(--brand); } .brand-page .icons img, .brand-page .icons a:nth-child(2) { width: 54px; height: 54px; border-radius: 18px; } .brand-page .icons a:nth-child(2) { background: var(--brand) !important; color: #111; } .brand-page .sideSocial a { background: rgba(16, 18, 24, 0.8) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--brand); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .reveal-2026 { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 850ms var(--ease-out); } .reveal-2026.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 991px) { .group-nav { top: 12px; width: calc(100% - 24px); height: 66px; grid-template-columns: 1fr auto; padding: 0 10px 0 14px; border-radius: 20px; } .group-nav .nav-tools { grid-column: 2; } .group-brand img { width: 45px; } .group-brand span { font-size: 12px; } .company-switcher { position: fixed; top: 90px; right: 12px; left: 12px; height: 48px; padding: 5px; justify-content: stretch; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 17px; background: rgba(10, 11, 14, 0.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .company-switcher a { flex: 1; padding: 8px 6px; text-align: center; font-size: 9px; white-space: nowrap; } .company-switcher a { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .company-switcher a span:first-child { display: none; } .company-switcher a span:last-child { display: inline; margin-left: 0; font-size: 9px; } .company-switcher a.active::after { right: 20%; width: 60%; } .nav-contact { width: 46px; height: 46px; border-radius: 15px; } .nav-contact span { display: none; } .panel-inner { width: calc(100% - 30px); max-width: calc(100% - 30px); min-width: 0; margin: 145px auto 58px; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; } .company-copy { max-width: 670px; padding: 26px; border-radius: 26px; } .company-copy h1, .company-copy h2 { font-size: clamp(34px, 9.3vw, 52px); } .company-proof { display: none; } .company-panel::before { background: linear-gradient(0deg, rgba(5, 6, 9, 0.93), rgba(5, 6, 9, 0.36) 85%), linear-gradient(90deg, rgba(5, 6, 9, 0.5), transparent); } .panel-progress { display: none; } .floating-contact { left: 14px; bottom: 14px; } .scroll-cue { bottom: 12px; } .brand-page .navbar { top: 12px; width: calc(100% - 24px); height: 68px; border-radius: 20px; } .brand-page .navbar .container { padding: 0 8px; } .brand-page .logo-wrapper { padding: 8px 12px; } .brand-page .logo-img { width: 68px; } .brand-page .navbar button { padding: 18px !important; margin-top: 0; } .brand-page .navbar .navbar-collapse { position: absolute; top: 76px; right: 0; left: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; background: rgba(248, 248, 246, 0.92); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .brand-page .navbar .navbar-nav { padding: 6px; text-align: right; } .brand-page .navbar .navbar-nav .nav-link { color: #17191d; } .brand-page .parallax-header .row > div { margin: 40px 12px 0; } .brand-page .section-padding { padding: 78px 0; } .brand-page .about .content { border-radius: 24px; } } @media (max-width: 600px) { .company-panel { min-height: 100svh; } .panel-inner { margin-top: 136px; } .company-copy { padding: 23px 20px; } .group-brand { min-width: 0; overflow: hidden; } .group-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-eyebrow { margin-bottom: 16px; } .company-index { width: 34px; height: 34px; } .company-copy h1, .company-copy h2 { margin-bottom: 15px; font-size: clamp(30px, 9vw, 40px); line-height: 1.3; } .company-lead { margin-bottom: 18px; font-size: 12px; line-height: 1.8; } .company-tags { margin-bottom: 20px; gap: 6px; } .company-tags span { padding: 6px 9px; font-size: 8px; } .company-actions { gap: 8px; } .primary-action, .secondary-action { height: 46px; padding: 0 14px; border-radius: 14px; font-size: 10px; } .primary-action { min-width: 148px; } .scroll-cue span { display: none; } .contact-trigger { width: 48px; height: 48px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .company-panels { scroll-snap-type: none; } .company-copy, .company-proof, .reveal-2026 { opacity: 1; transform: none; } } /* ---------- Language-aware alignment + light branded landing ---------- Direction now comes from , set dynamically by js/i18n.js, and inherits naturally into every section/container/row below. The navbar chrome (logo, nav links, language button) keeps a fixed rtl layout in both languages — only the wording changes — so it is excluded here and still direction-pinned by its own more specific rules further down. */ .brand-page .navbar .container { flex-direction: row; } .brand-page .navbar-collapse { justify-content: flex-start !important; text-align: right; } .brand-page .parallax-header .row { justify-content: center !important; } .brand-page .parallax-header .row > div, .brand-page .parallax-header h1, .brand-page .parallax-header p { text-align: center !important; } .brand-page .about .content, .brand-page .about .content p, .brand-page .blog .item, .brand-page .contact, .brand-page .footer { text-align: start !important; } .brand-page .text-start { text-align: start !important; } .brand-page .text-end { text-align: end !important; } .home-2026 { background: #f8f6ef; color: #17191d; } .home-2026 .preloader-bg, .home-2026 #preloader { background: #faf7ed; } .group-nav { color: #17191d; border-color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.68); box-shadow: 0 16px 45px rgba(64, 55, 27, 0.1); } .group-brand { color: #17191d; } .group-brand small { color: rgba(23, 25, 29, 0.52); } .company-switcher a { color: rgba(23, 25, 29, 0.56); } .company-switcher a:hover, .company-switcher a.active { color: #17191d; background: rgba(255, 255, 255, 0.78); box-shadow: 0 8px 24px rgba(32, 32, 28, 0.06); } .nav-contact { color: #17191d; border-color: rgba(30, 31, 35, 0.08); background: rgba(255, 255, 255, 0.72); } .company-panel { --panel-rgb: 242, 187, 22; --panel-surface: #fbf3d1; background-color: var(--panel-surface); } .company-panel::before { background: linear-gradient( to left, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.62) 54%, rgba(var(--panel-rgb), 0.42) 100% ), linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)); } .company-panel::after { opacity: 0.045; mix-blend-mode: multiply; } .brand-modern { --brand: var(--mh-yellow); --panel-rgb: 242, 187, 22; --panel-surface: #fbf3d1; } .brand-kitchen { --brand: var(--mh-green); --panel-rgb: 100, 195, 85; --panel-surface: #e9f7e7; } .brand-luxury { --brand: var(--mh-gold); --panel-rgb: 208, 165, 114; --panel-surface: #f7ede1; } .brand-aluminium { --brand: var(--mh-navy); --panel-rgb: 95, 108, 153; --panel-surface: #edf0f7; } .brand-facade { --brand: #1b594e; --panel-rgb: 159, 191, 143; --panel-surface: #edf5ea; } .brand-facade .panel-glow { background: #9fbf8f; } .brand-facade .company-copy h2 { font-size: clamp(30px, 7vw, 60px); } .panel-glow { opacity: 0.26; filter: blur(105px); } .company-copy { border-color: rgba(255, 255, 255, 0.82); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.48) ); box-shadow: 0 28px 80px rgba(58, 50, 26, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .company-eyebrow { color: rgba(23, 25, 29, 0.6); } .company-copy h1, .company-copy h2 { color: #17191d; } .company-lead { color: rgba(23, 25, 29, 0.68) !important; } .company-tags span { color: rgba(23, 25, 29, 0.72); border-color: rgba(23, 25, 29, 0.08); background: rgba(255, 255, 255, 0.58); } .brand-aluminium .company-copy h1 em, .brand-aluminium .company-copy h2 em, .brand-aluminium .company-tags i, .brand-aluminium .company-index, .brand-aluminium .proof-label, .brand-aluminium .scroll-cue i { color: var(--mh-navy); } .brand-aluminium .primary-action { background: var(--mh-navy); color: #fff; } .brand-aluminium .primary-action:hover { color: #fff; } .brand-facade .primary-action { background: #1b594e; color: #fff; } .brand-facade .primary-action:hover { color: #fff; } .secondary-action { color: #17191d; border-color: rgba(23, 25, 29, 0.12); background: rgba(255, 255, 255, 0.48); } .secondary-action:hover { color: #17191d; background: rgba(255, 255, 255, 0.82); } .company-proof { color: #17191d; border-color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.58); box-shadow: 0 22px 58px rgba(52, 47, 30, 0.1); } .company-proof p { color: rgba(23, 25, 29, 0.78); } .proof-footer { color: rgba(23, 25, 29, 0.48); } .scroll-cue { color: rgba(23, 25, 29, 0.58); } .scroll-cue i { border-color: rgba(23, 25, 29, 0.14); } .panel-progress { color: rgba(23, 25, 29, 0.45); } .progress-track { background: rgba(23, 25, 29, 0.14); } .contact-trigger { border-color: rgba(23, 25, 29, 0.08); box-shadow: 0 15px 35px rgba(61, 53, 28, 0.14); } .contact-options a { color: #17191d; border-color: rgba(23, 25, 29, 0.08); background: rgba(255, 255, 255, 0.82); box-shadow: 0 12px 30px rgba(50, 46, 31, 0.1); } @media (max-width: 991px) { .company-switcher { border-color: rgba(23, 25, 29, 0.08); background: rgba(255, 255, 255, 0.76); box-shadow: 0 12px 32px rgba(50, 46, 31, 0.09); } .company-panel::before { background: linear-gradient( 0deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.34) 88% ), linear-gradient( 90deg, rgba(var(--panel-rgb), 0.32), rgba(255, 255, 255, 0.22) ); } .brand-page .navbar-collapse { text-align: right; } } /* ---------- Internal layout reliability + button interaction fixes ---------- */ .brand-page section[id] { scroll-margin-top: 108px; } /* Owl Carousel calculates its stage in LTR regardless of page language — keep the engine LTR always, and let the card content follow the active language instead. */ .brand-page .owl-carousel, .brand-page .owl-stage-outer, .brand-page .owl-stage, .brand-page .owl-item { direction: ltr !important; } .brand-page .owl-item .item, .brand-page .owl-item .con, .brand-page .owl-item .title { direction: rtl; } html[dir="ltr"] .brand-page .owl-item .item, html[dir="ltr"] .brand-page .owl-item .con, html[dir="ltr"] .brand-page .owl-item .title { direction: ltr; } .brand-page .preloader-bg, .brand-page #preloader { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .brand-page .reveal-2026, .brand-page .reveal-2026.is-visible { opacity: 1 !important; visibility: visible !important; transform: none !important; } .brand-page .navbar .container { direction: rtl; grid-template-columns: auto minmax(0, 1fr) auto; } .brand-page .logo-wrapper { grid-column: 1; justify-self: start; } .brand-page .navbar-collapse { grid-column: 2; direction: rtl; justify-content: center !important; justify-self: stretch; } .brand-page .navbar .navbar-nav { width: auto; margin: 0; direction: rtl; justify-content: center; } .primary-action, .secondary-action, .nav-contact, .brand-page .button-1, .brand-page .button-4, .brand-page input[type="submit"] { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; transition: transform 280ms var(--ease-out), box-shadow 280ms ease, background-color 280ms ease, border-color 280ms ease, color 280ms ease !important; } .primary-action i, .secondary-action i, .nav-contact i, .brand-page .button-1 i, .brand-page .button-4 i { flex: 0 0 auto; padding: 0 !important; margin: 0 !important; line-height: 1; } .primary-action:hover { border-color: transparent; background: color-mix(in srgb, var(--brand) 84%, white); color: #17191d; box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 28%, transparent); transform: translateY(-3px); } .primary-action:hover i { transform: translateX(-3px); } /* The "explore" arrow icon points toward reading-end (left in Arabic). Mirror the glyph in English so it still points the way the eye moves; the existing translateX(-3px) hover slide lands correctly either way. */ html[dir="ltr"] .primary-action i.bi-arrow-left { display: inline-block; transform: scaleX(-1); } html[dir="ltr"] .primary-action:hover i.bi-arrow-left { transform: scaleX(-1) translateX(-3px); } .secondary-action:hover { border-color: color-mix(in srgb, var(--brand) 35%, transparent); background: color-mix(in srgb, var(--brand) 13%, white); color: #17191d; box-shadow: 0 14px 30px rgba(44, 42, 34, 0.1); transform: translateY(-3px); } .nav-contact { direction: rtl; } .nav-contact span { flex: 0 0 auto; } .nav-contact:hover { border-color: transparent; background: var(--brand); color: #17191d; box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 25%, transparent); transform: translateY(-2px); } .brand-page .button-1:hover, .brand-page .button-4:hover, .brand-page input[type="submit"]:hover { border-color: color-mix(in srgb, var(--brand) 42%, transparent) !important; background: color-mix(in srgb, var(--brand) 82%, white) !important; color: #17191d !important; box-shadow: 0 16px 34px rgba(var(--brand-rgb), 0.22); transform: translateY(-3px); } .brand-aluminium-page .button-1:hover, .brand-aluminium-page .button-4:hover, .brand-aluminium-page input[type="submit"]:hover { background: #8f9ac0 !important; color: #fff !important; } .primary-action:active, .secondary-action:active, .nav-contact:active, .brand-page .button-1:active, .brand-page .button-4:active, .brand-page input[type="submit"]:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 7px 18px rgba(44, 42, 34, 0.1) !important; } .brand-page .navbar .nav-link:hover { transform: translateY(-1px); } @media (max-width: 991px) { .brand-page .navbar .container { direction: ltr; justify-content: space-between; } .brand-page .logo-wrapper { order: 1; } .brand-page .navbar-toggler { order: 2; } .brand-page .navbar-collapse { order: 3; direction: rtl; } } /* ---------- Dynamic company identity ---------- */ .group-brand-copy strong { display: block; color: #17191d; font-size: 14px; font-weight: 650; line-height: 1.35; } .group-brand-logo { transition: filter 300ms ease; } .group-brand.brand-is-changing .group-brand-logo, .group-brand.brand-is-changing .group-brand-copy { animation: brand-identity-in 520ms var(--ease-out) both; } .group-brand.brand-is-changing .group-brand-copy { animation-delay: 45ms; } @keyframes brand-identity-in { from { opacity: 0; transform: translateY(7px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Light internal company pages ---------- */ body.brand-page { --brand-surface: #fff8dc; --brand-surface-strong: #f8e7a8; background: var(--brand-surface); color: #555a60; } body.brand-house { --brand-surface: #fff9e6; --brand-surface-strong: #f9eab5; } body.brand-kitchen-page { --brand-surface: #eff9ed; --brand-surface-strong: #d8f0d4; } body.brand-luxury-page { --brand-surface: #fbf4ec; --brand-surface-strong: #efdfcc; } body.brand-aluminium-page { --brand-surface: #f1f3f8; --brand-surface-strong: #dfe3ef; } body.brand-facade-page { --brand-surface: #edf5ea; --brand-surface-strong: #dcebd6; } .brand-facade-page .button-1, .brand-facade-page .button-4, .brand-facade-page input[type="submit"] { color: #fff !important; } .brand-page .navbar { border-color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.78); box-shadow: 0 16px 45px rgba(52, 48, 34, 0.1); } .brand-page .navbar .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; } .brand-page .logo-wrapper { grid-column: 1; grid-row: 1; } .brand-page .navbar-collapse { grid-column: 2; grid-row: 1; justify-self: stretch; justify-content: center !important; } .brand-page .navbar .navbar-nav { align-items: center; justify-content: center; } .brand-page .nav-tools { grid-column: 3; grid-row: 1; } .brand-page .navbar .navbar-nav .nav-link, .brand-page .navbar .navbar-nav .nav-link.nav-color { color: #303238 !important; } .brand-page .navbar .navbar-nav .nav-link:hover, .brand-page .navbar .navbar-nav .nav-link.active { color: #17191d !important; background: rgba(var(--brand-rgb), 0.14); } .brand-page .navbar-toggler-icon, .brand-page .navbar .icon-bar { color: #23252a; } .brand-page .parallax-header[data-overlay-dark]::before { background: rgba(8, 9, 14, 0.48) !important; opacity: 1 !important; } .brand-page .parallax-header::after { background: radial-gradient( circle at 78% 60%, rgba(var(--brand-rgb), 0.34), transparent 45% ), linear-gradient( 115deg, rgba(8, 9, 14, 0.88) 8%, rgba(8, 9, 14, 0.6) 52%, rgba(8, 9, 14, 0.3) 100% ); } .brand-page .parallax-header h1 { color: #fff; } .brand-page .parallax-header p, .brand-page .parallax-header[data-overlay-dark] p { color: rgba(255, 255, 255, 0.78); } .brand-page .parallax-header .button-1 { background: var(--brand) !important; color: #17191d; } .brand-aluminium-page .parallax-header .button-1 { background: #7783ad !important; color: #fff; } .brand-page .about, .brand-page .blog, .brand-page .contact { background: var(--brand-surface); } .brand-page .about .content, .brand-page .blog .item, .brand-page .contact .form-box, .brand-page .contact .google-map { border-color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.68); box-shadow: 0 20px 55px rgba(55, 50, 34, 0.08); } .brand-page .contact .form-box, .brand-page .contact .google-map { padding: 22px; border: 1px solid rgba(255, 255, 255, 0.88); border-radius: 28px; } .brand-page .contact .google-map iframe { border-radius: 20px; } .brand-page .contact h5 { color: #17191d; } /* The circular action button on service/portfolio cards sits inside a corner notch cut from the card via box-shadow — the legacy theme fills that notch with plain #fff, which reads as a stray white patch on these pale brand backgrounds. Match it to the section's actual surface color instead. */ .brand-page .blog .item .icon, .brand-page .portfolio-home .item .con .icon { background: var(--brand-surface); } .brand-page .blog .item .icon::before, .brand-page .blog .item .icon::after, .brand-page .portfolio-home .item .con .icon::before, .brand-page .portfolio-home .item .con .icon::after { box-shadow: 6px 6px 0 6px var(--brand-surface); } .brand-page .portfolio-home { background: linear-gradient( 145deg, var(--brand-surface-strong), var(--brand-surface) ); } .brand-page .portfolio-home::before { background: rgba(var(--brand-rgb), 0.2); } .brand-page .portfolio-home .section-title { color: #17191d; } .brand-page .portfolio-home .item { border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.64); box-shadow: 0 24px 60px rgba(50, 46, 31, 0.11); } .brand-page .owl-theme .owl-nav [class*="owl-"] { color: #17191d; border-color: rgba(23, 25, 29, 0.18); background: rgba(255, 255, 255, 0.76); } .brand-page .footer, .brand-page .footer.bg { background: linear-gradient( 145deg, var(--brand-surface-strong), var(--brand-surface) ); color: #303238; } .brand-page .footer .top { border-bottom-color: rgba(23, 25, 29, 0.08); } .brand-page .footer .top .item h2, .brand-page .footer .top .item h3, .brand-page .footer .top .item p, .brand-page .footer .bottom p, .brand-page .footer .top .item .links ul li a, .brand-page .footer .top .item .address, .brand-page .footer .top .item .phone, .brand-page .footer .top .item .mail { color: #45484f; } .brand-page .footer .top .item h2, .brand-page .footer .top .item h3 { color: #17191d; } .brand-page .footer .bottom p a { color: var(--brand) !important; } .brand-page .footer .top .item .logo img, .brand-page .footer .bottom .logo img { filter: none !important; } /* Keep the Modern House identity black throughout its internal page. */ .brand-house .navbar .logo-img, .brand-house .footer .top .item .logo img, .brand-house .footer .bottom .logo img { filter: brightness(0) !important; } .brand-page .footer .top .social-icons li, .brand-page .footer .top .luxury-footer-icons li, .brand-page .footer .top .kit-footer-icons li, .brand-page .footer .top .alo-footer-icons li { background: var(--brand) !important; color: #17191d; } .brand-page .sideSocial a { color: var(--brand); border-color: rgba(23, 25, 29, 0.07); background: rgba(255, 255, 255, 0.84) !important; box-shadow: 0 10px 28px rgba(50, 46, 31, 0.08); } @media (max-width: 991px) { .group-brand-copy strong { font-size: 12px; } .brand-page .navbar .container { display: flex; gap: 10px; } .brand-page .logo-wrapper { order: 1; margin-inline-end: auto; } .brand-page .nav-tools { order: 2; } .brand-page .navbar-toggler { order: 3; } .brand-page .navbar-collapse { order: 4; position: absolute; top: 76px; right: 0; left: 0; } .brand-page .navbar .navbar-nav { align-items: stretch; } .brand-page .navbar .navbar-nav .nav-link { text-align: right; } } /* Final navbar placement: logo right, nav links centered, language tools left — fixed in both languages; only the wording inside translates. */ @media (min-width: 992px) { .brand-page .navbar-collapse { justify-content: center !important; } } .brand-page .parallax-header .button-1:hover, .brand-page .button-4:hover, .brand-page input[type="submit"]:hover { border-color: color-mix(in srgb, var(--brand) 42%, transparent) !important; background: color-mix(in srgb, var(--brand) 82%, white) !important; color: #17191d !important; box-shadow: 0 16px 34px rgba(var(--brand-rgb), 0.22); transform: translateY(-3px); } .brand-aluminium-page .parallax-header .button-1:hover, .brand-aluminium-page .button-4:hover, .brand-aluminium-page input[type="submit"]:hover { background: #8f9ac0 !important; color: #fff !important; } /* Keep pressed state stable after every hover override. */ .primary-action:active, .secondary-action:active, .nav-contact:active, .brand-page .button-1:active, .brand-page .button-4:active, .brand-page input[type="submit"]:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 7px 18px rgba(44, 42, 34, 0.1) !important; }