/* ========================================================================= MIORO PREMIUM LAYER Deep-ink & gold design system over the Skyhaus/Elementor base. Palette: #0A1F29 ink - #0A1F29 logo navy - #B39260 gold - warm paper Type: Manrope (single coherent family, 300-800) ========================================================================= */ :root{ --mp-ink: #0A1F29; --mp-ink-2: #0A1F29; --mp-ink-3: #0A1F29; --mp-ink-soft: rgba(10,31,41,.06); --mp-gold: #B39260; --mp-gold-lt: #E3C88E; --mp-gold-dk: #8A6E42; --mp-gold-grad: linear-gradient(100deg,#8A6E42 0%,#B39260 22%,#F0DCAE 48%,#B39260 72%,#8A6E42 100%); --mp-paper: #FCFBF9; --mp-paper-2: #F4F1EB; --mp-text: #16222B; --mp-muted: #5D6E79; --mp-line: rgba(16,40,57,.14); --mp-line-gold: rgba(179,146,96,.38); --mp-gutter: clamp(20px, 5vw, 72px); --mp-sec: clamp(72px, 9vw, 140px); --mp-ease: cubic-bezier(.16,.84,.36,1); --mp-ease-io: cubic-bezier(.65,.02,.28,1); } /* ---------- 0. RESET OF THE NANTES !important TYRANNY ------------------- */ html body, html body p, html body li, html body a, html body span, html body div, html body strong, html body b, html body em, html body blockquote, html body input, html body textarea, html body select, html body button, html body .menu-menu-container li a, html body #menu-menu li a, html body .menu-useful-links-container li a, html body #menu-useful-links li a, html body .menu-faqs-container li a, html body #menu-faqs li a, html body .navigation1-ul li a, html body .site-navigation li a, html body .elementor-widget-text-editor, html body .elementor-widget-text-editor *{ font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif !important; } html body :is(h1,h2,h3,h4,h5,h6,.entry-title,.widget-title,.site-title,.elementor-heading-title), html body .elementor-widget-text-editor :is(h1,h2,h3,h4,h5,h6), html body :is(.mio-t-h1,.mio-t-h2,.mio-t-h3,.mio-t-h4,.mio-t-h5,.mio-t-h6){ font-family:'Manrope',system-ui,sans-serif !important; font-weight:600 !important; } /* re-map the legacy .mio-t-hN scale onto the new fluid display scale */ html body .mio-t-h1{ font-size:clamp(38px,4.6vw,66px) !important; line-height:1.1 !important; font-weight:600 !important; } html body .mio-t-h2{ font-size:clamp(32px,3.8vw,54px) !important; line-height:1.14 !important; font-weight:600 !important; } html body .mio-t-h3{ font-size:clamp(25px,2.6vw,36px) !important; line-height:1.2 !important; font-weight:600 !important; } html body .mio-t-h4, html body .elementor-widget-heading .elementor-heading-title.elementor-size-large.mio-t-h4{ font-size:clamp(22px,2.1vw,30px) !important; line-height:1.26 !important; font-weight:600 !important; } html body .mio-t-h5{ font-size:clamp(19px,1.7vw,24px) !important; line-height:1.32 !important; font-weight:600 !important; } html body .mio-t-h6{ font-size:clamp(17px,1.4vw,21px) !important; line-height:1.4 !important; font-weight:600 !important; } html body :is(.mio-t-h1,.mio-t-h2,.mio-t-h3,.mio-t-h4,.mio-t-h5,.mio-t-h6){ color:var(--mp-ink) !important; letter-spacing:-.01em !important; } .mp-band :is(.mio-t-h1,.mio-t-h2,.mio-t-h3,.mio-t-h4,.mio-t-h5,.mio-t-h6){ color:#F6F1E7 !important; } /* The theme pins html/body to height:100%; combined with overflow-x that turns into its own scroll container and breaks window scrolling / sticky. */ html, body{ height:auto !important; min-height:100%; width:auto !important; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media all{ html.mp-motion-off{ scroll-behavior:auto; } } body{ background:var(--mp-paper) !important; color:var(--mp-text) !important; font-weight:300; font-size:clamp(15px,1.02vw,17px); line-height:1.75; letter-spacing:.004em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; } /* ---------- 1. TYPE SCALE ---------------------------------------------- */ h1,h2,h3,h4,h5,h6,.elementor-heading-title{ color:var(--mp-ink) !important; font-weight:600 !important; letter-spacing:-.012em; line-height:1.12; margin:0 0 .5em; text-transform:none !important; } h1,.elementor-widget-heading h1.elementor-heading-title{ font-size:clamp(38px,5vw,72px); } h2,.elementor-widget-heading h2.elementor-heading-title{ font-size:clamp(30px,3.6vw,52px); line-height:1.16; } h3,.elementor-widget-heading h3.elementor-heading-title{ font-size:clamp(23px,2.3vw,32px); line-height:1.24; } h4{ font-size:clamp(19px,1.6vw,23px); line-height:1.3; } h5,h6{ font-size:clamp(16px,1.2vw,18px); line-height:1.4; } p{ color:var(--mp-muted) !important; margin:0 0 1.1em; } strong,b{ font-weight:500 !important; color:var(--mp-text) !important; } a{ color:var(--mp-ink); text-decoration:none; transition:color .35s var(--mp-ease); } a:hover{ color:var(--mp-gold-dk); } .mp-eyebrow{ font-family:'Manrope',sans-serif !important; font-size:11px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--mp-gold-dk) !important; display:inline-flex; align-items:center; gap:14px; margin:0 0 18px; } .mp-eyebrow::before{ content:""; width:34px; height:1px; background:var(--mp-gold); opacity:.7; } /* ---------- 2. HEADER --------------------------------------------------- */ /* take the header out of jQuery-sticky's hands: one fixed bar, one JS-measured offset */ #masthead{ position:fixed; top:0; left:0; right:0; z-index:900; } #masthead-inner-sticky-wrapper{ height:auto !important; } #masthead-inner{ position:static !important; top:auto !important; left:auto !important; width:auto !important; background:transparent !important; border-bottom:1px solid transparent !important; box-shadow:none !important; transition:background .5s var(--mp-ease), backdrop-filter .5s var(--mp-ease), border-color .5s var(--mp-ease), box-shadow .5s var(--mp-ease); } body{ padding-top:var(--mp-hdr,96px); } /* the showcase runs full-bleed underneath the transparent header */ .mp-show{ margin-top:calc(-1 * var(--mp-hdr,96px)); } .header-main-inner, .header--row-inner{ background:transparent !important; border:0 !important; } #masthead .container{ max-width:1480px !important; padding-inline:var(--mp-gutter) !important; } html:not(.mp-scrolled) #masthead-inner{ background:rgba(252,251,249,.74) !important; backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); } html.mp-scrolled #masthead-inner{ background:rgba(252,251,249,.9) !important; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--mp-line) !important; box-shadow:0 12px 40px -28px rgba(10,31,41,.5) !important; } /* --- homepage: transparent header floating over the dark showcase --- */ html.mp-home:not(.mp-scrolled) #masthead-inner{ background:transparent !important; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent !important; } html.mp-home:not(.mp-scrolled) #masthead .logo img{ filter:brightness(0) invert(1); } html.mp-home:not(.mp-scrolled) #masthead :is(.main-menu,.nav-menu,ul.menu) > li > a{ color:#F6F1E7 !important; } html.mp-home:not(.mp-scrolled) #masthead .navigation1-ul > li > a, html.mp-home:not(.mp-scrolled) #masthead .builder-header-html-item a{ color:rgba(240,246,250,.72) !important; } html.mp-home:not(.mp-scrolled) #masthead .navigation1-ul > li > a:hover, html.mp-home:not(.mp-scrolled) #masthead .builder-header-html-item a:hover, html.mp-home:not(.mp-scrolled) #masthead .navigation1-ul .current-language-menu-item > a{ color:#F6F1E7 !important; } html.mp-home:not(.mp-scrolled) #masthead .item--button.skyhaus-btn{ background:transparent !important; color:var(--mp-gold-lt) !important; border-color:rgba(227,200,142,.6) !important; } html.mp-home:not(.mp-scrolled) #masthead .item--button.skyhaus-btn:hover{ background:var(--mp-gold-lt) !important; border-color:var(--mp-gold-lt) !important; color:var(--mp-ink) !important; } #masthead .logo img, #masthead .logo-image img{ height:clamp(30px,3.2vw,42px) !important; width:auto !important; transition:height .5s var(--mp-ease), opacity .4s; } html.mp-scrolled #masthead .logo img{ height:clamp(25px,2.5vw,32px) !important; } #masthead .cb-row--desktop{ padding-block:clamp(10px,1.4vw,18px) !important; } html.mp-scrolled #masthead .cb-row--desktop{ padding-block:8px !important; } #masthead .navigation1-ul{ gap:clamp(14px,1.6vw,28px) !important; align-items:center; } #masthead .navigation1-ul > li > a{ font-size:11px !important; font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--mp-muted) !important; padding:4px 0 !important; } #masthead .navigation1-ul > li > a:hover{ color:var(--mp-ink) !important; } #masthead .navigation1-ul .current-language-menu-item > a{ color:var(--mp-ink) !important; } #masthead .builder-header-html-item a{ font-size:11px !important; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mp-muted) !important; } #masthead .builder-header-html-item a:hover{ color:var(--mp-ink) !important; } #masthead .item--button.skyhaus-btn, .skyhaus-btn.skyhaus-builder-btn{ position:relative; overflow:hidden; display:inline-flex !important; align-items:center; justify-content:center; background:var(--mp-ink) !important; color:#fff !important; border:1px solid var(--mp-ink) !important; border-radius:2px !important; padding:11px 24px !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.18em !important; text-transform:uppercase !important; line-height:1 !important; transition:background .45s var(--mp-ease), color .45s var(--mp-ease), border-color .45s var(--mp-ease); } #masthead .item--button.skyhaus-btn:hover{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; color:var(--mp-ink) !important; } #masthead .main-menu > li > a, #masthead .nav-menu > li > a, #masthead ul.menu > li > a{ position:relative; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--mp-ink) !important; padding-block:10px !important; } #masthead .main-menu > li > a::after, #masthead ul.menu:not(.navigation1-ul) > li > a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--mp-gold-grad); background-size:200% 100%; transform:scaleX(0); transform-origin:right; transition:transform .55s var(--mp-ease); } #masthead .main-menu > li:hover > a::after, #masthead .main-menu > li.current-menu-item > a::after, #masthead ul.menu:not(.navigation1-ul) > li:hover > a::after{ transform:scaleX(1); transform-origin:left; } #masthead .sub-menu{ background:rgba(252,251,249,.97) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--mp-line) !important; border-top:2px solid var(--mp-gold) !important; border-radius:0 0 3px 3px !important; box-shadow:0 30px 70px -40px rgba(10,31,41,.55) !important; padding:10px 0 !important; } #masthead .sub-menu li a{ font-size:12px !important; letter-spacing:.08em !important; text-transform:none !important; color:var(--mp-muted) !important; padding:9px 22px !important; transition:color .3s var(--mp-ease), background .3s var(--mp-ease), padding-left .3s var(--mp-ease); } #masthead .sub-menu li a:hover{ color:var(--mp-ink) !important; background:var(--mp-ink-soft) !important; padding-left:28px !important; } /* ---------- 3. SCROLL PROGRESS (gold thread) --------------------------- */ .mp-progress{ position:fixed; inset:0 auto auto 0; z-index:99999; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--mp-gold-grad); background-size:300% 100%; pointer-events:none; will-change:transform; } /* ---------- 4. SECTION RHYTHM & DARK BANDS ------------------------------ */ .elementor-section.elementor-top-section{ position:relative; } .elementor-section-boxed > .elementor-container{ max-width:1320px !important; padding-inline:var(--mp-gutter); } .mp-band{ background:var(--mp-ink) !important; color:#EAF1F5 !important; position:relative; overflow:hidden; } .mp-band::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 80% at 12% 0%, rgba(179,146,96,.16), transparent 60%), radial-gradient(90% 70% at 92% 100%, rgba(179,146,96,.10), transparent 62%); } .mp-band > *{ position:relative; z-index:1; } .mp-band h1,.mp-band h2,.mp-band h3,.mp-band h4,.mp-band h5,.mp-band h6, .mp-band .elementor-heading-title{ color:#F6F1E7 !important; } .mp-band p{ color:rgba(230,240,246,.72) !important; } .mp-band a{ color:var(--mp-gold-lt); } .mp-band .mp-eyebrow{ color:var(--mp-gold-lt) !important; } .mp-band .mp-eyebrow::before{ background:var(--mp-gold-lt); } .mp-tint{ background:var(--mp-paper-2) !important; } /* ---------- 5. IMAGE TREATMENT (all images on #0A1F29) ------------------ */ .mp-frame{ position:relative; display:block; overflow:hidden; background:var(--mp-ink); border-radius:2px; isolation:isolate; } .mp-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3; border:1px solid var(--mp-line-gold); border-radius:inherit; transition:border-color .6s var(--mp-ease); } .mp-frame:hover::after{ border-color:rgba(227,200,142,.75); } .mp-frame > img{ display:block !important; width:100% !important; height:auto !important; max-width:100% !important; transition:transform 1.4s var(--mp-ease), filter 1.4s var(--mp-ease); will-change:transform; } .mp-frame:hover > img{ transform:scale(1.045); } .mp-frame.mp-zoom > img{ transform:scale(1.16); filter:saturate(.82) brightness(.9); } .mp-frame.mp-zoom.is-in > img{ transform:scale(1); filter:none; } .mp-frame.mp-zoom.is-in:hover > img{ transform:scale(1.045); } .elementor-widget-image .elementor-widget-container{ background:transparent; } .elementor-widget-image img{ border-radius:2px; } /* ---------- 6. MASK REVEAL / STAGGER ------------------------------------ */ .mp-rv{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .9s var(--mp-ease), transform .9s var(--mp-ease); } .mp-rv.is-in{ opacity:1; transform:none; } .mp-mask{ display:block; overflow:hidden; padding-bottom:.22em; } h1.mp-mask,h2.mp-mask,h3.mp-mask,.elementor-heading-title.mp-mask{ margin-bottom:calc(.5em - .22em); } .mp-mask > .mp-mask-i{ display:block; transform:translate3d(0,110%,0) rotate(1.5deg); opacity:0; transition:transform 1.05s var(--mp-ease), opacity .7s ease; will-change:transform; } .mp-mask.is-in > .mp-mask-i{ transform:none; opacity:1; } .mp-stagger > *{ opacity:0; transform:translate3d(0,30px,0); transition:opacity .8s var(--mp-ease), transform .8s var(--mp-ease); } .mp-stagger.is-in > *{ opacity:1; transform:none; } /* ---------- 7. GOLD SHIMMER --------------------------------------------- */ .mp-shimmer{ background:var(--mp-gold-grad); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; animation:mp-sweep 7s linear infinite; } @keyframes mp-sweep{ 0%{background-position:180% 0} 100%{background-position:-80% 0} } .mp-rule{ height:1px; border:0; margin:0; background:var(--mp-gold-grad); background-size:250% 100%; animation:mp-sweep 6s linear infinite; opacity:.85; } .mp-sheen{ position:relative; overflow:hidden; } .mp-sheen::before{ content:""; position:absolute; top:-60%; bottom:-60%; left:-40%; width:26%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg) translateX(-260%); pointer-events:none; z-index:2; } .mp-sheen:hover::before{ animation:mp-sheen 1.05s var(--mp-ease) forwards; } .mp-band .mp-sheen::before{ background:linear-gradient(100deg,transparent,rgba(240,220,174,.35),transparent); } @keyframes mp-sheen{ to{ transform:skewX(-18deg) translateX(560%); } } #masthead .logo a{ position:relative; display:inline-block; overflow:hidden; } #masthead .logo a::after{ content:""; position:absolute; top:-50%; bottom:-50%; left:0; width:34%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent); transform:skewX(-20deg) translateX(-320%); animation:mp-logo-sheen 8.5s var(--mp-ease) infinite; pointer-events:none; } @keyframes mp-logo-sheen{ 0%,72%{transform:skewX(-20deg) translateX(-320%)} 88%,100%{transform:skewX(-20deg) translateX(460%)} } /* ---------- 8. BUTTONS -------------------------------------------------- */ .mp-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; padding:15px 32px; border-radius:2px; border:1px solid var(--mp-ink); background:transparent; color:var(--mp-ink) !important; font-family:'Manrope',sans-serif; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1; cursor:pointer; z-index:0; transition:color .5s var(--mp-ease), border-color .5s var(--mp-ease); } .mp-btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--mp-ink); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--mp-ease); } .mp-btn:hover{ color:#fff !important; } .mp-btn:hover::before{ transform:scaleY(1); transform-origin:top; } .mp-btn .mp-btn-arrow{ transition:transform .5s var(--mp-ease); display:block; width:22px; height:1px; background:currentColor; } .mp-btn:hover .mp-btn-arrow{ transform:translateX(6px); } .mp-btn--gold{ border-color:var(--mp-gold); color:var(--mp-gold-dk) !important; } .mp-btn--gold::before{ background:var(--mp-gold); } .mp-btn--gold:hover{ color:var(--mp-ink) !important; } .mp-band .mp-btn{ border-color:rgba(227,200,142,.55); color:var(--mp-gold-lt) !important; } .mp-band .mp-btn::before{ background:var(--mp-gold-lt); } .mp-band .mp-btn:hover{ color:var(--mp-ink) !important; border-color:var(--mp-gold-lt); } .elementor-widget-button .elementor-button, a.elementor-button, .elementor-button-link{ background:transparent !important; border:1px solid var(--mp-ink) !important; border-radius:2px !important; color:var(--mp-ink) !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:14px 30px !important; position:relative; overflow:hidden; z-index:0; transition:color .5s var(--mp-ease), border-color .5s var(--mp-ease) !important; } .elementor-widget-button .elementor-button::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--mp-ink); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--mp-ease); } .elementor-widget-button .elementor-button:hover{ color:#fff !important; } .elementor-widget-button .elementor-button:hover::before{ transform:scaleY(1); transform-origin:top; } .mp-band .elementor-widget-button .elementor-button{ border-color:rgba(227,200,142,.55) !important; color:var(--mp-gold-lt) !important; } .mp-band .elementor-widget-button .elementor-button::before{ background:var(--mp-gold-lt); } .mp-band .elementor-widget-button .elementor-button:hover{ color:var(--mp-ink) !important; } /* ---------- 9. CUSTOM GOLD CURSOR --------------------------------------- */ @media (pointer:fine){ html.mp-cursor-on, html.mp-cursor-on *{ cursor:none !important; } .mp-cursor{ position:fixed; top:0; left:0; z-index:2147483000; pointer-events:none; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1px solid var(--mp-gold); transition:width .35s var(--mp-ease), height .35s var(--mp-ease), margin .35s var(--mp-ease), background-color .35s var(--mp-ease), border-color .35s var(--mp-ease), opacity .3s; will-change:transform; } .mp-cursor-dot{ position:fixed; top:0; left:0; z-index:2147483001; pointer-events:none; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--mp-gold); will-change:transform; transition:opacity .3s, transform .2s; } .mp-cursor.is-link{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(179,146,96,.14); border-color:var(--mp-gold-lt); } .mp-cursor.is-hidden,.mp-cursor-dot.is-hidden{ opacity:0; } } @media (pointer:coarse){ .mp-cursor,.mp-cursor-dot{ display:none !important; } } /* ---------- 10. PRELOADER ----------------------------------------------- */ .mp-pre{ position:fixed; inset:0; z-index:2147483600; display:grid; place-items:center; pointer-events:all; } .mp-pre__panel{ position:absolute; left:0; width:100%; height:50.5%; background:var(--mp-ink); transition:transform 1s var(--mp-ease-io); } .mp-pre__panel--t{ top:0; } .mp-pre__panel--b{ bottom:0; } .mp-pre__mark{ position:relative; z-index:2; width:clamp(66px,7vw,96px); height:auto; transition:opacity .5s ease, transform .8s var(--mp-ease); } .mp-pre__mark path{ fill:none; stroke:var(--mp-gold); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:mp-draw 1.15s var(--mp-ease) forwards; } @keyframes mp-draw{ to{ stroke-dashoffset:0; } } .mp-pre__bar{ position:absolute; z-index:2; left:50%; bottom:calc(50% - 78px); transform:translateX(-50%); width:132px; height:1px; background:rgba(179,146,96,.22); overflow:hidden; } .mp-pre__bar i{ position:absolute; inset:0; background:var(--mp-gold-grad); background-size:250% 100%; transform:scaleX(0); transform-origin:left; animation:mp-load 1.3s var(--mp-ease) forwards; } @keyframes mp-load{ to{ transform:scaleX(1); } } html.mp-pre-done .mp-pre{ pointer-events:none; } html.mp-pre-done .mp-pre__mark{ opacity:0; transform:scale(.94); } html.mp-pre-done .mp-pre__bar{ opacity:0; transition:opacity .3s; } html.mp-pre-done .mp-pre__panel--t{ transform:translateY(-101%); } html.mp-pre-done .mp-pre__panel--b{ transform:translateY(101%); } html.mp-pre-gone .mp-pre{ display:none; } html.mp-preloading{ overflow:hidden; } /* ---------- 11. HERO - PINNED HORIZONTAL SHOWCASE ----------------------- */ .mp-show{ position:relative; background:var(--mp-ink); } .mp-show__sticky{ position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; display:flex; align-items:center; } .mp-show__track{ display:flex; height:100%; align-items:stretch; will-change:transform; } .mp-show__intro{ flex:0 0 min(46vw,660px); display:flex; flex-direction:column; justify-content:center; padding:0 clamp(28px,5vw,90px); color:#F6F1E7; } .mp-show__intro h1{ color:#F6F1E7 !important; font-size:clamp(36px,4.4vw,68px) !important; line-height:1.08 !important; margin:0 0 22px; } .mp-show__intro p{ color:rgba(230,240,246,.66) !important; max-width:42ch; font-size:clamp(14px,1.05vw,16.5px); } .mp-show__cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; } .mp-card{ position:relative; flex:0 0 min(34vw,470px); height:100%; margin-right:clamp(12px,1.6vw,26px); overflow:hidden; background:var(--mp-ink-2); display:block; } .mp-card:last-child{ margin-right:clamp(28px,5vw,90px); } .mp-card__img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; transform:scale(1.08); transition:transform 1.6s var(--mp-ease), filter 1s var(--mp-ease); filter:brightness(.86) saturate(.95); } .mp-card:hover .mp-card__img{ transform:scale(1.16); filter:brightness(1) saturate(1.05); } .mp-card__veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,31,41,.94) 0%, rgba(10,31,41,.44) 44%, rgba(10,31,41,.06) 100%); } .mp-card__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px,2.4vw,38px); } .mp-card__logo{ height:clamp(20px,1.9vw,28px) !important; width:auto !important; max-width:none !important; display:block; margin-bottom:14px; filter:brightness(0) invert(1); opacity:.96; } .mp-card__txt{ color:rgba(230,240,246,.74) !important; font-size:13.5px; line-height:1.65; max-height:0; opacity:0; overflow:hidden; margin:0; transition:max-height .7s var(--mp-ease), opacity .5s var(--mp-ease), margin .7s var(--mp-ease); } .mp-card:hover .mp-card__txt{ max-height:170px; opacity:1; margin-top:2px; } .mp-card__more{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--mp-gold-lt); } .mp-card__more i{ display:block; width:26px; height:1px; background:var(--mp-gold-lt); transition:width .5s var(--mp-ease); } .mp-card:hover .mp-card__more i{ width:44px; } .mp-card__num{ position:absolute; top:clamp(20px,2.2vw,34px); right:clamp(20px,2.2vw,34px); z-index:2; font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:.14em; color:rgba(227,200,142,.7); } .mp-show__hint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:12px; font-family:'Manrope',sans-serif; font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:rgba(227,200,142,.62); transition:opacity .5s; } .mp-show__hint i{ display:block; width:52px; height:1px; background:rgba(227,200,142,.4); position:relative; overflow:hidden; } .mp-show__hint i::after{ content:""; position:absolute; inset:0; background:var(--mp-gold-lt); transform:translateX(-100%); animation:mp-hint 2.2s var(--mp-ease) infinite; } @keyframes mp-hint{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} } .mp-show.is-end .mp-show__hint{ opacity:0; } @media (max-width:900px), (pointer:coarse){ .mp-show{ height:auto !important; } .mp-show__sticky{ position:relative; height:auto; min-height:0; display:block; } .mp-show__track{ display:block; transform:none !important; } .mp-show__intro{ flex:none; padding:clamp(96px,18vw,130px) var(--mp-gutter) clamp(38px,8vw,60px); } .mp-card{ flex:none; width:auto; height:min(78svh,540px); margin:0 var(--mp-gutter) 14px; } .mp-card:last-child{ margin-bottom:clamp(48px,10vw,80px); } .mp-card__txt{ max-height:none; opacity:1; margin-top:2px; } .mp-show__hint{ display:none; } } /* ---------- 12. FILM (cinematic video block) ---------------------------- */ .mp-film{ position:relative; background:var(--mp-ink); padding:var(--mp-sec) 0; overflow:hidden; } .mp-film::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(110% 70% at 50% 0%, rgba(179,146,96,.14), transparent 62%), radial-gradient(80% 60% at 90% 100%, rgba(179,146,96,.09), transparent 60%); } .mp-film__wrap{ max-width:1320px; margin:0 auto; padding-inline:var(--mp-gutter); position:relative; z-index:1; } .mp-film__head{ text-align:center; margin-bottom:clamp(34px,4vw,56px); } .mp-film__head h2{ color:#F6F1E7 !important; margin:0 0 14px; } .mp-film__head p{ color:rgba(230,240,246,.6) !important; margin:0 auto; max-width:58ch; } .mp-film__head .mp-eyebrow{ color:var(--mp-gold-lt) !important; } .mp-film__head .mp-eyebrow::before{ background:var(--mp-gold-lt); } .mp-film__stage{ position:relative; width:100%; aspect-ratio:16/9; background:var(--mp-ink-2); overflow:hidden; border-radius:3px; border:1px solid var(--mp-line-gold); cursor:pointer; } .mp-film__poster{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; transform:scale(1.04); filter:brightness(.62) saturate(.9); transition:transform 1.6s var(--mp-ease), filter 1s var(--mp-ease); } .mp-film__stage:hover .mp-film__poster{ transform:scale(1.1); filter:brightness(.72) saturate(1); } .mp-film__stage::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(62% 62% at 50% 50%, transparent 24%, rgba(10,31,41,.55) 100%); } .mp-film__play{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; border:0; background:none; padding:0; cursor:pointer; } .mp-film__ring{ position:relative; width:clamp(84px,9vw,124px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:rgba(10,31,41,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .5s var(--mp-ease), transform .5s var(--mp-ease); } .mp-film__stage:hover .mp-film__ring{ background:rgba(179,146,96,.26); transform:scale(1.06); } .mp-film__ring svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .mp-film__ring circle{ fill:none; stroke:var(--mp-gold-lt); stroke-width:1.2; stroke-dasharray:302; stroke-dashoffset:302; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset 1.2s var(--mp-ease); } .mp-film__stage.is-in .mp-film__ring circle{ stroke-dashoffset:0; } .mp-film__ring::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(227,200,142,.4); animation:mp-pulse 2.8s var(--mp-ease) infinite; } @keyframes mp-pulse{ 0%{transform:scale(1);opacity:.75} 70%,100%{transform:scale(1.5);opacity:0} } .mp-film__tri{ position:relative; z-index:2; margin-left:5px; border-left:15px solid var(--mp-gold-lt); border-top:10px solid transparent; border-bottom:10px solid transparent; } .mp-film__label{ position:absolute; left:0; right:0; bottom:clamp(20px,2.4vw,34px); z-index:3; text-align:center; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:rgba(227,200,142,.82); } .mp-lb{ position:fixed; inset:0; z-index:2147483500; background:rgba(6,19,26,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding:clamp(16px,4vw,54px); opacity:0; visibility:hidden; transition:opacity .5s var(--mp-ease), visibility .5s; } .mp-lb.is-open{ opacity:1; visibility:visible; } .mp-lb__inner{ position:relative; width:min(1180px,100%); aspect-ratio:16/9; background:#000; border:1px solid var(--mp-line-gold); border-radius:3px; overflow:hidden; transform:scale(.965) translateY(14px); transition:transform .6s var(--mp-ease); } .mp-lb.is-open .mp-lb__inner{ transform:none; } .mp-lb__inner iframe{ position:absolute !important; inset:0; width:100% !important; height:100% !important; border:0; } .mp-lb__close{ position:absolute; top:clamp(12px,2.4vw,28px); right:clamp(12px,2.4vw,28px); width:48px; height:48px; border-radius:50%; border:1px solid rgba(227,200,142,.45); background:transparent; color:var(--mp-gold-lt); font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .4s var(--mp-ease), transform .4s var(--mp-ease); } .mp-lb__close:hover{ background:rgba(179,146,96,.2); transform:rotate(90deg); } html.mp-lb-open{ overflow:hidden; } /* ---------- 13. STATS + MARQUEE ----------------------------------------- */ .mp-stats{ padding:clamp(52px,6vw,88px) 0; background:var(--mp-paper-2); border-block:1px solid var(--mp-line); } .mp-stats__grid{ max-width:1320px; margin:0 auto; padding-inline:var(--mp-gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px); } @media (max-width:820px){ .mp-stats__grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; } } .mp-stat{ text-align:center; position:relative; } .mp-stat + .mp-stat::before{ content:""; position:absolute; top:14%; bottom:14%; width:1px; background:var(--mp-line); left:calc(-1 * clamp(10px,1.5vw,24px)); } @media (max-width:820px){ .mp-stat:nth-child(odd)::before{ display:none; } } .mp-stat__n{ font-family:'Manrope',sans-serif; font-size:clamp(38px,4.4vw,62px); line-height:1; color:var(--mp-ink); display:flex; align-items:baseline; justify-content:center; gap:1px; } .mp-stat__n sup{ font-size:.4em; color:var(--mp-gold-dk); top:-.75em; } .mp-stat__l{ margin-top:12px; font-family:'Manrope',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--mp-muted); } .mp-marq{ background:var(--mp-ink); padding:clamp(26px,3vw,40px) 0; overflow:hidden; position:relative; } .mp-marq::before,.mp-marq::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(60px,10vw,180px); z-index:2; pointer-events:none; } .mp-marq::before{ left:0; background:linear-gradient(to right,var(--mp-ink),transparent); } .mp-marq::after{ right:0; background:linear-gradient(to left,var(--mp-ink),transparent); } .mp-marq__track{ display:flex; width:max-content; animation:mp-marq 42s linear infinite; } .mp-marq:hover .mp-marq__track{ animation-play-state:paused; } @keyframes mp-marq{ to{ transform:translateX(-50%); } } .mp-marq__item{ display:flex; align-items:center; gap:16px; padding-inline:clamp(24px,3.4vw,58px); font-family:'Manrope',sans-serif; font-size:12px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:rgba(230,240,246,.55); white-space:nowrap; } .mp-marq__item b{ color:var(--mp-gold-lt) !important; font-weight:500; letter-spacing:.22em; } .mp-marq__item::after{ content:""; width:4px; height:4px; border-radius:50%; background:rgba(179,146,96,.5); } /* ---------- 14. MAP ----------------------------------------------------- */ .mp-map{ position:relative; width:100%; height:clamp(360px,46vw,540px); background:var(--mp-ink); overflow:hidden; border:1px solid var(--mp-line-gold); border-radius:3px; } .mp-map iframe{ position:absolute !important; inset:0; width:100% !important; height:100% !important; border:0; display:block; filter:grayscale(.9) contrast(.92) saturate(.5) brightness(.96); transition:filter .8s var(--mp-ease); } .mp-map:hover iframe{ filter:none; } .mp-map__badge{ position:absolute; z-index:3; left:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); background:rgba(10,31,41,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--mp-line-gold); border-radius:2px; padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px); max-width:min(360px,72%); } .mp-map__badge strong{ display:block; color:#F6F1E7 !important; font-family:'Manrope',sans-serif !important; font-size:17px; font-weight:400 !important; letter-spacing:.01em; margin-bottom:8px; } .mp-map__badge span{ display:block; color:rgba(230,240,246,.66); font-size:13px; line-height:1.6; } .mp-map__badge a{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--mp-gold-lt) !important; } .mp-map__badge a i{ display:block; width:22px; height:1px; background:var(--mp-gold-lt); transition:width .45s var(--mp-ease); } .mp-map__badge a:hover i{ width:38px; } /* ---------- 15. FOOTER -------------------------------------------------- */ #colophon, .site-footer, footer#colophon{ background:var(--mp-ink) !important; color:rgba(230,240,246,.7) !important; border-top:1px solid rgba(179,146,96,.22) !important; } #colophon .widget-title, .site-footer .widget-title{ font-family:'Manrope',sans-serif !important; color:#F6F1E7 !important; font-size:15px !important; font-weight:400 !important; letter-spacing:.06em; margin-bottom:18px !important; padding-bottom:14px; position:relative; } #colophon .widget-title::after, .site-footer .widget-title::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:1px; background:var(--mp-gold); } #colophon a, .site-footer a{ color:rgba(230,240,246,.62) !important; font-size:13.5px; } #colophon a:hover, .site-footer a:hover{ color:var(--mp-gold-lt) !important; } #colophon li, .site-footer li{ margin-bottom:9px; list-style:none; } #colophon ul, .site-footer ul{ padding-left:0; margin-left:0; } #colophon p, .site-footer p{ color:rgba(230,240,246,.62) !important; } #colophon .menu-item-has-children, .site-footer .menu-item-has-children{ position:relative; } #colophon .sub-menu, .site-footer .sub-menu{ position:static !important; display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important; box-shadow:none !important; background:transparent !important; border:0 !important; padding:10px 0 0 14px !important; margin:0 !important; border-left:1px solid rgba(179,146,96,.25) !important; min-width:0 !important; width:auto !important; } #colophon .sub-menu li a, .site-footer .sub-menu li a{ padding:0 !important; font-size:12.5px !important; } #colophon .dropdown-symbol, #colophon .caret, #colophon .sub-menu-toggle, .site-footer .dropdown-symbol, .site-footer .caret, .site-footer .sub-menu-toggle{ display:none !important; } #footer_copyright, .site-info{ background:var(--mp-ink-2) !important; border-top:1px solid rgba(179,146,96,.18) !important; color:rgba(230,240,246,.5) !important; font-size:12px; letter-spacing:.08em; padding-block:22px !important; } #footer_copyright a, .site-info a{ color:rgba(230,240,246,.66) !important; } #footer_copyright *, .site-info *{ color:rgba(230,240,246,.5) !important; } #colophon .mt-social-icons a, .site-footer .social-icons a, #colophon .widget_mt_address_social_icons a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(179,146,96,.32) !important; display:inline-grid; place-items:center; transition:background .4s var(--mp-ease), border-color .4s var(--mp-ease), transform .4s var(--mp-ease); } #colophon .mt-social-icons a:hover, #colophon .widget_mt_address_social_icons a:hover{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; transform:translateY(-3px); } /* ---------- 16. FORMS --------------------------------------------------- */ input[type=text],input[type=email],input[type=tel],input[type=url], input[type=search],input[type=number],textarea,select{ font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:300 !important; color:var(--mp-text) !important; background:transparent !important; border:0 !important; border-bottom:1px solid var(--mp-line) !important; border-radius:0 !important; padding:12px 2px !important; box-shadow:none !important; transition:border-color .45s var(--mp-ease) !important; } input:focus,textarea:focus,select:focus{ outline:none !important; border-bottom-color:var(--mp-gold) !important; } .mp-band input,.mp-band textarea,.mp-band select{ color:#EAF1F5 !important; border-bottom-color:rgba(227,200,142,.28) !important; } input[type=submit],button[type=submit],.wpcf7-submit{ background:var(--mp-gold) !important; color:var(--mp-ink) !important; border:1px solid var(--mp-gold) !important; border-radius:2px !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:15px 34px !important; cursor:pointer; transition:background .45s var(--mp-ease), color .45s var(--mp-ease) !important; } input[type=submit]:hover,button[type=submit]:hover,.wpcf7-submit:hover{ background:transparent !important; color:var(--mp-gold-lt) !important; } /* ---------- 17. UTILITIES / FIXES --------------------------------------- */ .elementor-section.mp-dead{ display:none !important; } ::selection{ background:var(--mp-gold); color:var(--mp-ink); } @media (pointer:fine){ ::-webkit-scrollbar{ width:9px; } ::-webkit-scrollbar-track{ background:var(--mp-paper-2); } ::-webkit-scrollbar-thumb{ background:rgba(16,40,57,.28); border-radius:9px; } ::-webkit-scrollbar-thumb:hover{ background:var(--mp-gold); } } .mp-curtain{ position:fixed; inset:0; z-index:2147483400; background:var(--mp-ink); transform:translateY(100%); pointer-events:none; transition:transform .72s var(--mp-ease-io); } html.mp-leaving .mp-curtain{ transform:translateY(0); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--mp-gold) !important; outline-offset:3px; } @media all{ html.mp-motion-off :is(.mp-rv,.mp-stagger > *,.mp-mask > .mp-mask-i){ opacity:1 !important; transform:none !important; transition:none !important; } html.mp-motion-off .mp-frame.mp-zoom > img{ transform:none !important; filter:none !important; } html.mp-motion-off :is(.mp-shimmer,.mp-rule,.mp-marq__track,.mp-film__ring::before){ animation:none !important; } html.mp-motion-off #masthead .logo a::after{ animation:none !important; } html.mp-motion-off .mp-shimmer{ color:var(--mp-gold-dk) !important; -webkit-text-fill-color:currentColor; } html.mp-motion-off .mp-show__track{ transform:none !important; } html.mp-motion-off .mp-show__sticky{ position:relative; height:auto; } html.mp-motion-off .mp-curtain{ display:none; } } /* ========================================================================= 18. REFINEMENT PASS - header compaction, real footer selectors, hero clearance ========================================================================= */ /* --- 18.1 header: two tight rows instead of two tall ones --------------- */ #masthead .header--row .cb-row--desktop{ padding-block:7px !important; } html.mp-scrolled #masthead .header--row .cb-row--desktop{ padding-block:3px !important; } #masthead #cb-row--header-bottom nav ul.menu > li > a, #masthead .primary-menu ul > li > a{ height:auto !important; line-height:1 !important; padding:14px 0 !important; } #masthead #cb-row--header-bottom nav ul.menu, #masthead .primary-menu ul.menu{ gap:clamp(18px,2.2vw,38px); } #masthead #cb-row--header-bottom nav ul.menu > li, #masthead .primary-menu ul.menu > li{ margin:0 !important; } html.mp-scrolled #masthead #cb-row--header-bottom nav ul.menu > li > a{ padding:10px 0 !important; } /* utility strip: one clean line */ #masthead #cb-row--header-main .col-v2-right{ display:flex; align-items:center; gap:clamp(12px,1.6vw,26px); } #masthead #cb-row--header-main .col-v2-right > .item--inner{ margin:0 !important; } #masthead .navigation1-ul{ flex-wrap:nowrap !important; white-space:nowrap; } #masthead .navigation1-ul > li{ margin:0 !important; } /* --- 18.2 hero: keep the eyebrow clear of the floating nav -------------- */ .mp-show__intro{ padding-top:var(--mp-hdr,120px); padding-bottom:clamp(40px,6vh,90px); } @media (max-width:900px), (pointer:coarse){ .mp-show__intro{ padding-top:calc(var(--mp-hdr,120px) + 24px) !important; } } /* --- 18.3 film: lift the poster out of the murk ------------------------- */ .mp-film__poster{ filter:brightness(.8) saturate(.95) !important; } .mp-film__stage:hover .mp-film__poster{ filter:brightness(.92) saturate(1.05) !important; } .mp-film__stage::after{ background:radial-gradient(70% 70% at 50% 50%, rgba(10,31,41,.05) 20%, rgba(10,31,41,.62) 100%) !important; } /* --- 18.4 footer: real selectors for this theme ------------------------- */ #site-footer{ border-top:1px solid rgba(179,146,96,.22); } #cb-row--footer-main .footer--row-inner{ background:var(--mp-ink) !important; padding-block:clamp(48px,6vw,84px) !important; } #cb-row--footer-main .widget-title{ font-family:'Manrope',sans-serif !important; color:#F6F1E7 !important; font-size:15px !important; line-height:1.3 !important; letter-spacing:.06em !important; margin:0 0 18px !important; padding-bottom:14px !important; position:relative; } #cb-row--footer-main .widget-title::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:1px; background:var(--mp-gold); } #site-footer a{ color:rgba(230,240,246,.62) !important; font-size:13.5px !important; } #site-footer a:hover{ color:var(--mp-gold-lt) !important; } #site-footer p, #site-footer li, #site-footer span{ color:rgba(230,240,246,.62) !important; } #site-footer li{ list-style:none; margin-bottom:9px; } /* the hover-dropdown "Legal Area" / "Policies & Procedures" widgets: flatten them */ #site-footer .trapper{ position:relative !important; margin-bottom:34px; } #site-footer .trapper ul, #site-footer .titleul{ position:static !important; opacity:1 !important; visibility:visible !important; width:auto !important; top:auto !important; right:auto !important; box-shadow:none !important; padding:0 !important; margin:0 !important; list-style:none !important; transition:none !important; } #site-footer .titleul::before{ display:none !important; } #site-footer .titleft{ display:block !important; position:relative; font-family:'Manrope',sans-serif !important; color:#F6F1E7 !important; font-size:15px !important; line-height:1.3 !important; letter-spacing:.06em !important; padding:0 0 14px !important; margin:0 0 18px !important; cursor:default; } #site-footer .titleft::before{ content:"" !important; position:absolute !important; left:0 !important; right:auto !important; top:auto !important; bottom:0 !important; width:28px !important; height:1px !important; border:0 !important; transform:none !important; background:var(--mp-gold) !important; } #site-footer .titleli a[style]{ color:rgba(230,240,246,.62) !important; } #site-footer .titleli a[style]:hover{ color:var(--mp-gold-lt) !important; } /* copyright bar: ink, not a gold slab */ #cb-row--footer-bottom .footer--row-inner{ background:var(--mp-ink-2) !important; border-top:1px solid rgba(179,146,96,.2); } #cb-row--footer-bottom .footer--row-inner .container{ border-color:transparent !important; padding-block:20px !important; } #cb-row--footer-bottom, #cb-row--footer-bottom *{ color:rgba(230,240,246,.5) !important; font-size:12px !important; letter-spacing:.09em !important; } #cb-row--footer-bottom a:hover{ color:var(--mp-gold-lt) !important; } /* social icons */ #site-footer .widget_mt_address_social_icons a, #site-footer .mt-social-icons a{ width:40px !important; height:40px !important; border-radius:50%; border:1px solid rgba(179,146,96,.32) !important; display:inline-grid !important; place-items:center; transition:background .4s var(--mp-ease), border-color .4s var(--mp-ease), transform .4s var(--mp-ease); } #site-footer .widget_mt_address_social_icons a:hover, #site-footer .mt-social-icons a:hover{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; transform:translateY(-3px); } #site-footer .widget_mt_address_social_icons a svg, #site-footer .mt-social-icons a svg{ fill:currentColor; } /* ========================================================================= 19. NAVIGATION LAYOUT ========================================================================= */ #masthead nav.primary-menu, #masthead .primary-menu-ul, #masthead .navigation1-ul{ height:auto !important; min-height:0 !important; } #masthead .primary-menu-ul{ display:flex !important; align-items:center; justify-content:center; gap:clamp(16px,2.3vw,40px); margin:0 !important; padding:0 !important; list-style:none; } #masthead .primary-menu-ul > li{ display:block !important; margin:0 !important; padding:0 !important; position:relative; } #masthead .primary-menu-ul > li > a{ padding:12px 0 !important; display:inline-flex !important; align-items:center; gap:6px; } html.mp-scrolled #masthead .primary-menu-ul > li > a{ padding:9px 0 !important; } #masthead .navigation1-ul{ display:flex !important; align-items:center; gap:clamp(10px,1.2vw,18px); margin:0 !important; padding:0 !important; list-style:none; } #masthead .navigation1-ul > li{ display:block !important; } /* hairline between the two language items */ #masthead .navigation1-ul > li.trp-language-switcher-container + li.trp-language-switcher-container{ padding-left:clamp(10px,1.2vw,18px); border-left:1px solid currentColor; border-left-color:rgba(120,140,155,.35); } /* submenus stay stacked */ #masthead .primary-menu-ul .sub-menu{ display:block !important; } #masthead .primary-menu-ul .sub-menu li{ display:block !important; } /* dropdown caret: quiet chevron instead of the theme glyph */ #masthead .primary-menu-ul > li.menu-item-has-children > a::before{ content:none !important; } #masthead .primary-menu-ul .dropdown-symbol{ opacity:.55; transform:scale(.8); } /* tighten the two header rows further */ #cb-row--header-main .cb-row--desktop{ padding-block:6px !important; } #cb-row--header-bottom .cb-row--desktop{ padding-block:0 !important; } #cb-row--header-bottom .container{ min-height:0 !important; } /* mobile header */ @media (max-width:900px){ #masthead .cb-row--mobile{ padding-block:8px !important; } #masthead .logo img{ height:30px !important; } } /* ========================================================================= 20. HERO CARD LEGIBILITY + HEADER CTA ========================================================================= */ .mp-card__img{ filter:brightness(1.02) saturate(1.04) !important; } .mp-card:hover .mp-card__img{ filter:brightness(1.12) saturate(1.12) !important; } .mp-card__veil{ background:linear-gradient(to top, rgba(10,31,41,.92) 0%, rgba(10,31,41,.62) 26%, rgba(10,31,41,.18) 55%, rgba(10,31,41,0) 78%) !important; } .mp-card::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border:1px solid rgba(179,146,96,.22); transition:border-color .6s var(--mp-ease); } .mp-card:hover::after{ border-color:rgba(227,200,142,.6); } /* header CTA must never wrap */ #masthead .item--button.skyhaus-btn{ white-space:nowrap !important; } #masthead .builder-header-html-item a{ white-space:nowrap; } #masthead .navigation1-ul > li > a{ white-space:nowrap; } /* ========================================================================= 21. HERO SCRIM + HINT PLACEMENT ========================================================================= */ /* keeps the floating nav legible over bright product photography */ .mp-show__sticky::before{ content:""; position:absolute; left:0; right:0; top:0; z-index:4; pointer-events:none; height:clamp(150px,24vh,280px); background:linear-gradient(to bottom, rgba(6,19,26,.82) 0%, rgba(6,19,26,.45) 45%, rgba(6,19,26,0) 100%); } .mp-show__intro, .mp-show__hint{ position:relative; z-index:5; } .mp-show__hint{ left:clamp(28px,5vw,90px) !important; transform:none !important; bottom:clamp(22px,4vh,42px) !important; } /* ========================================================================= 22. CONTACT PAGE (.mc-* custom block) - retheme + working map ========================================================================= */ .mc-wrap{ background:var(--mp-paper) !important; } .mc-inner{ max-width:1320px !important; padding-inline:var(--mp-gutter) !important; } .mc-banner{ margin-bottom:clamp(44px,6vw,80px) !important; background:var(--mp-ink); border-radius:2px; position:relative; } .mc-banner::after{ content:""; position:absolute; inset:0; pointer-events:none; border:1px solid var(--mp-line-gold); border-radius:inherit; } .mc-banner img{ border-radius:2px; } .mc-head{ text-align:center; max-width:70ch; margin-inline:auto; } .mc-head .mc-eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:var(--mp-gold-dk) !important; margin-bottom:16px; } .mc-head .mc-eyebrow::before{ content:""; width:34px; height:1px; background:var(--mp-gold); opacity:.7; } .mc-head h1{ margin:0 0 18px !important; } .mc-head .mc-line{ width:44px; height:1px !important; background:var(--mp-gold-grad) !important; background-size:250% 100% !important; margin:0 auto 22px !important; animation:mp-sweep 6s linear infinite; } .mc-head p{ color:var(--mp-muted) !important; } /* the three contact cards */ .mc-cards{ margin-block:clamp(40px,5vw,72px) !important; gap:clamp(14px,1.6vw,24px) !important; } .mc-card{ background:var(--mp-paper-2) !important; border:1px solid var(--mp-line) !important; border-radius:2px !important; padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px) !important; text-align:center; position:relative; overflow:hidden; transition:border-color .5s var(--mp-ease), transform .5s var(--mp-ease), background .5s var(--mp-ease); } .mc-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--mp-gold-grad); background-size:250% 100%; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--mp-ease); } .mc-card:hover{ background:#fff !important; border-color:var(--mp-line-gold) !important; transform:translateY(-4px); } .mc-card:hover::before{ transform:scaleX(1); } .mc-ico{ width:52px !important; height:52px !important; border-radius:50% !important; background:var(--mp-ink) !important; color:var(--mp-gold-lt) !important; display:grid !important; place-items:center; margin:0 auto 20px !important; } .mc-ico svg{ width:19px !important; height:19px !important; } .mc-card h2{ font-size:clamp(17px,1.5vw,21px) !important; margin:0 0 10px !important; } .mc-card p{ color:var(--mp-muted) !important; font-size:14px !important; margin:0 !important; } .mc-more{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:500 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--mp-gold-dk) !important; } /* dark request-information panel */ .mc-grid{ gap:clamp(16px,2vw,28px) !important; align-items:stretch !important; } .mc-form{ background:var(--mp-ink) !important; border:1px solid var(--mp-line-gold) !important; border-radius:2px !important; padding:clamp(30px,3.4vw,52px) !important; } .mc-form h2{ color:#F6F1E7 !important; margin:0 0 16px !important; } .mc-form .mc-line{ width:44px; height:1px !important; background:var(--mp-gold) !important; margin:0 0 20px !important; } .mc-form p{ color:rgba(230,240,246,.62) !important; margin:0 0 30px !important; } .mc-form label{ display:block !important; font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:rgba(227,200,142,.8) !important; margin:0 0 8px !important; } .mc-form input, .mc-form textarea{ width:100% !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(227,200,142,.24) !important; border-radius:2px !important; color:#F2F6F8 !important; padding:13px 15px !important; margin-bottom:20px !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:300 !important; transition:border-color .4s var(--mp-ease), background .4s var(--mp-ease) !important; } .mc-form input::placeholder, .mc-form textarea::placeholder{ color:rgba(230,240,246,.35) !important; } .mc-form input:focus, .mc-form textarea:focus{ border-color:var(--mp-gold) !important; background:rgba(255,255,255,.09) !important; outline:none !important; } .mc-form textarea{ min-height:130px !important; resize:vertical !important; } .mc-form button{ background:var(--mp-gold) !important; border:1px solid var(--mp-gold) !important; border-radius:2px !important; color:var(--mp-ink) !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:15px 34px !important; cursor:pointer; transition:background .45s var(--mp-ease), color .45s var(--mp-ease) !important; } .mc-form button:hover{ background:transparent !important; color:var(--mp-gold-lt) !important; } /* map panel */ .mc-map{ position:relative !important; min-height:0 !important; background:var(--mp-ink) !important; border:1px solid var(--mp-line-gold) !important; border-radius:2px !important; overflow:hidden !important; } .mc-map iframe{ position:absolute !important; inset:0; width:100% !important; height:100% !important; border:0 !important; filter:grayscale(.85) contrast(.95) saturate(.45) brightness(.97); transition:filter .8s var(--mp-ease); } .mc-map:hover iframe{ filter:none; } /* injected badge */ .mp-map-badge{ position:absolute; z-index:3; left:clamp(14px,1.8vw,24px); bottom:clamp(14px,1.8vw,24px); background:rgba(10,31,41,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--mp-line-gold); border-radius:2px; padding:clamp(16px,1.7vw,22px) clamp(18px,1.9vw,26px); max-width:min(330px,74%); box-shadow:0 24px 60px -34px rgba(0,0,0,.8); } .mp-map-badge strong{ display:block; color:#F6F1E7 !important; font-family:'Manrope',sans-serif !important; font-size:16px !important; font-weight:400 !important; letter-spacing:.01em; margin-bottom:8px; } .mp-map-badge span{ display:block; color:rgba(230,240,246,.66) !important; font-size:13px !important; line-height:1.6; } .mp-map-badge a{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:500 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--mp-gold-lt) !important; } .mp-map-badge a i{ display:block; width:22px; height:1px; background:var(--mp-gold-lt); transition:width .45s var(--mp-ease); } .mp-map-badge a:hover i{ width:38px; } @media (max-width:992px){ .mc-map{ min-height:420px !important; } } /* ========================================================================= 23. CARD SYSTEMS - certificates grid & policy hub ========================================================================= */ /* --- certificate cards -------------------------------------------------- */ .mio-certs__grid{ gap:clamp(14px,1.6vw,24px) !important; } .cert-card{ background:var(--mp-paper-2) !important; border:1px solid var(--mp-line) !important; border-radius:2px !important; overflow:hidden; position:relative; transition:border-color .5s var(--mp-ease), transform .5s var(--mp-ease), background .5s var(--mp-ease), box-shadow .5s var(--mp-ease); } .cert-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2; background:var(--mp-gold-grad); background-size:250% 100%; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--mp-ease); } .cert-card:hover{ background:#fff !important; border-color:var(--mp-line-gold) !important; transform:translateY(-5px); box-shadow:0 30px 60px -42px rgba(10,31,41,.5); } .cert-card:hover::before{ transform:scaleX(1); } .cert-card__link{ display:block; padding:clamp(18px,2vw,26px) !important; } .cert-card img{ background:var(--mp-ink); border-radius:2px; } .cert-card__title, html body .cert-card__title.mio-t-h3{ font-size:clamp(16px,1.35vw,19px) !important; line-height:1.35 !important; letter-spacing:0 !important; margin:18px 0 12px !important; color:var(--mp-ink) !important; } .cert-card__meta{ font-size:12.5px !important; line-height:1.65 !important; color:var(--mp-muted) !important; } .cert-card__cta{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--mp-gold-dk) !important; } /* --- policy / procedure hub -------------------------------------------- */ .mio-hub__intro{ color:var(--mp-muted) !important; max-width:74ch; } .mio-hub__list{ gap:clamp(12px,1.4vw,20px) !important; } .mio-hub__item{ background:var(--mp-paper-2) !important; border:1px solid var(--mp-line) !important; border-radius:2px !important; position:relative; overflow:hidden; transition:border-color .5s var(--mp-ease), transform .5s var(--mp-ease), background .5s var(--mp-ease); } .mio-hub__item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; z-index:2; background:var(--mp-gold); transform:scaleY(0); transform-origin:top; transition:transform .55s var(--mp-ease); } .mio-hub__item:hover{ background:#fff !important; border-color:var(--mp-line-gold) !important; transform:translateX(4px); } .mio-hub__item:hover::before{ transform:scaleY(1); } .mio-hub__link{ display:block; padding:clamp(18px,2vw,28px) !important; } .mio-hub__title, html body .mio-hub__title.mio-t-h3, html body .mio-hub__title.mio-t-h4, html body .mio-hub__title.mio-t-h5{ font-size:clamp(16px,1.35vw,19px) !important; line-height:1.35 !important; letter-spacing:0 !important; margin:0 0 8px !important; color:var(--mp-ink) !important; } .mio-hub__desc{ font-size:13.5px !important; line-height:1.7 !important; color:var(--mp-muted) !important; margin:0 !important; } /* long-form policy pages: comfortable measure and rhythm ------------------ */ .elementor-widget-text-editor p{ max-width:78ch; } .elementor-widget-text-editor ul, .elementor-widget-text-editor ol{ max-width:78ch; color:var(--mp-muted); } .elementor-widget-text-editor li{ margin-bottom:.5em; } .elementor-widget-text-editor h2, .elementor-widget-text-editor h3{ margin-top:1.6em; } /* ========================================================================= 24. BUTTONS ON DARK GROUNDS ========================================================================= */ .mp-show .mp-btn, .mp-film .mp-btn, .mp-band .mp-btn{ border-color:rgba(227,200,142,.55) !important; color:var(--mp-gold-lt) !important; } .mp-show .mp-btn::before, .mp-film .mp-btn::before, .mp-band .mp-btn::before{ background:var(--mp-gold-lt); } .mp-show .mp-btn:hover, .mp-film .mp-btn:hover, .mp-band .mp-btn:hover{ color:var(--mp-ink) !important; border-color:var(--mp-gold-lt) !important; } /* the first CTA reads as the primary action */ .mp-show__cta .mp-btn:first-child{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; color:var(--mp-ink) !important; } .mp-show__cta .mp-btn:first-child::before{ background:#F0DCAE; } .mp-show__cta .mp-btn:first-child:hover{ color:var(--mp-ink) !important; } /* 25. hero CTA row */ .mp-show__cta{ gap:12px !important; } .mp-show__cta .mp-btn{ padding:14px 22px !important; } .mp-show__cta .mp-btn .mp-btn-arrow{ width:18px; } /* ========================================================================= 26. MOBILE HEADER - solid bar, no white-logo trick, hero sits below it ========================================================================= */ @media (max-width:900px){ .mp-show{ margin-top:0 !important; } html.mp-home:not(.mp-scrolled) #masthead-inner{ background:rgba(252,251,249,.94) !important; backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--mp-line) !important; } html.mp-home:not(.mp-scrolled) #masthead .logo img{ filter:none !important; } html.mp-home:not(.mp-scrolled) #masthead :is(.main-menu,.nav-menu,ul.menu) > li > a{ color:var(--mp-ink) !important; } html.mp-home:not(.mp-scrolled) #masthead .navigation1-ul > li > a, html.mp-home:not(.mp-scrolled) #masthead .builder-header-html-item a{ color:var(--mp-muted) !important; } html.mp-home:not(.mp-scrolled) #masthead .item--button.skyhaus-btn{ background:var(--mp-ink) !important; color:#fff !important; border-color:var(--mp-ink) !important; } /* readable rhythm on small screens */ .mp-show__intro h1{ font-size:clamp(30px,8.2vw,42px) !important; } .mp-show__intro p{ font-size:15px !important; } .mp-show__cta{ flex-direction:column; align-items:flex-start; } .mp-show__cta .mp-btn{ width:100%; justify-content:space-between; } .mp-stats__grid{ gap:30px 18px !important; } .mp-stat__n{ font-size:clamp(32px,9vw,44px) !important; } .mp-film__head h2{ font-size:clamp(26px,7vw,36px) !important; } } /* off-canvas mobile menu, restyled */ #header-menu-sidebar, #header-menu-sidebar-inner{ background:var(--mp-ink) !important; color:#EAF1F5 !important; } #header-menu-sidebar a{ color:rgba(240,246,250,.82) !important; } #header-menu-sidebar a:hover{ color:var(--mp-gold-lt) !important; } #header-menu-sidebar .sub-menu{ background:transparent !important; border:0 !important; box-shadow:none !important; } #header-menu-sidebar-bg{ background:rgba(6,19,26,.6) !important; } #masthead .mobile-menu-trigger, #masthead .menu-mobile-toggle, #masthead button.menu-toggle{ color:var(--mp-ink) !important; } /* 27. card body children must be block-level */ .mp-card__txt{ display:block !important; } .mp-card__body{ display:block !important; } .mp-card__more{ display:inline-flex !important; } /* ========================================================================= 28. IMAGE CAROUSEL (rebuilt - the Elementor/Swiper chunk never shipped) ========================================================================= */ .mp-car{ position:relative; overflow:hidden; background:var(--mp-ink); border-radius:2px; border:1px solid var(--mp-line-gold); } .mp-car__track{ display:flex !important; width:100%; transform:translate3d(0,0,0); transition:transform .85s var(--mp-ease); will-change:transform; } .mp-car__slide{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; position:relative; margin:0 !important; aspect-ratio:16/9; overflow:hidden; background:var(--mp-ink); } .mp-car__slide figure{ margin:0 !important; height:100%; position:relative; } .mp-car__slide .mp-frame{ position:absolute; inset:0; border-radius:0; } .mp-car__slide .mp-frame::after{ border:0; } .mp-car__slide img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; transform:scale(1.06) !important; transition:transform 6s linear, filter .8s var(--mp-ease) !important; filter:brightness(.94); } .mp-car__slide.is-on img{ transform:scale(1.14) !important; } .mp-car__cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(46px,7vw,90px) clamp(20px,3vw,44px) clamp(18px,2.4vw,32px); background:linear-gradient(to top, rgba(6,19,26,.92) 0%, rgba(6,19,26,.45) 55%, transparent 100%); color:rgba(240,246,250,.9); font-family:'Manrope',sans-serif; font-size:clamp(12.5px,1.05vw,14.5px); font-weight:300; line-height:1.6; letter-spacing:.01em; opacity:0; transform:translateY(12px); transition:opacity .7s var(--mp-ease) .15s, transform .7s var(--mp-ease) .15s; } .mp-car__slide.is-on .mp-car__cap{ opacity:1; transform:none; } .mp-car__nav{ position:absolute; inset:0; z-index:4; pointer-events:none; } .mp-car__btn{ position:absolute; top:50%; margin-top:-26px; pointer-events:auto; width:52px; height:52px; border-radius:50%; background:rgba(10,31,41,.5); border:1px solid rgba(227,200,142,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer; padding:0; transition:background .4s var(--mp-ease), border-color .4s var(--mp-ease), transform .4s var(--mp-ease); } .mp-car__btn:hover{ background:rgba(179,146,96,.7); border-color:var(--mp-gold-lt); } .mp-car__btn::before{ content:""; position:absolute; top:50%; left:50%; width:11px; height:11px; border-left:1px solid var(--mp-gold-lt); border-bottom:1px solid var(--mp-gold-lt); } .mp-car__btn--prev{ left:clamp(12px,2vw,26px); } .mp-car__btn--prev::before{ transform:translate(-35%,-50%) rotate(45deg); } .mp-car__btn--next{ right:clamp(12px,2vw,26px); } .mp-car__btn--next::before{ transform:translate(-65%,-50%) rotate(-135deg); } .mp-car__dots{ position:absolute; z-index:4; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,28px); display:flex; gap:9px; } .mp-car__dot{ width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer; background:transparent; border:1px solid rgba(227,200,142,.55); transition:background .4s var(--mp-ease), transform .4s var(--mp-ease); } .mp-car__dot.is-on{ background:var(--mp-gold-lt); transform:scale(1.25); } .mp-car__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:5; background:rgba(227,200,142,.16); overflow:hidden; } .mp-car__bar i{ display:block; height:100%; width:100%; background:var(--mp-gold-grad); background-size:250% 100%; transform:scaleX(0); transform-origin:left; } /* neutralise leftover swiper scaffolding */ .elementor-image-carousel-wrapper.mp-car .swiper-pagination, .elementor-image-carousel-wrapper.mp-car .elementor-swiper-button{ display:none !important; } @media (max-width:700px){ .mp-car__btn{ width:42px; height:42px; margin-top:-21px; } .mp-car__cap{ font-size:12px; } } /* 29. carousel image tone (production shots are intentionally dark) */ .mp-car__slide img{ filter:brightness(1.06) saturate(1.02) !important; } .mp-car__slide.is-on img{ filter:brightness(1.14) saturate(1.06) !important; } .mp-car__cap{ padding-top:clamp(34px,5vw,64px); } /* ========================================================================= 30. CONTACT FORM 7 - catalog request & hotline forms ========================================================================= */ .mp-form-card{ background:var(--mp-paper-2); border:1px solid var(--mp-line); border-radius:2px; padding:clamp(26px,3.2vw,52px); max-width:880px; position:relative; overflow:hidden; } .mp-form-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--mp-gold-grad); background-size:250% 100%; animation:mp-sweep 7s linear infinite; } .mp-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px clamp(20px,2.4vw,36px); } .mp-form > p{ margin:0 0 clamp(16px,1.8vw,24px) !important; min-width:0; } .mp-form > p.mp-f-full{ grid-column:1 / -1; } @media (max-width:700px){ .mp-form{ grid-template-columns:1fr; } } .mp-form label{ display:block !important; font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--mp-muted) !important; line-height:1.4; } .mp-form label br{ display:block; content:""; margin-bottom:6px; } .mp-form .wpcf7-form-control-wrap{ display:block; } .mp-form input[type=text], .mp-form input[type=email], .mp-form input[type=tel], .mp-form input[type=url], .mp-form input[type=number], .mp-form textarea, .mp-form select{ width:100% !important; max-width:100% !important; background:rgba(255,255,255,.7) !important; border:1px solid var(--mp-line) !important; border-bottom:1px solid var(--mp-line) !important; border-radius:2px !important; padding:12px 14px !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:300 !important; color:var(--mp-text) !important; transition:border-color .4s var(--mp-ease), background .4s var(--mp-ease) !important; } .mp-form input:focus, .mp-form textarea:focus, .mp-form select:focus{ border-color:var(--mp-gold) !important; background:#fff !important; outline:none !important; } .mp-form textarea{ min-height:150px !important; resize:vertical !important; } .mp-form input[type=submit], .mp-form .wpcf7-submit{ width:auto !important; margin-top:6px; background:var(--mp-ink) !important; color:#fff !important; border:1px solid var(--mp-ink) !important; border-radius:2px !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:500 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:15px 40px !important; cursor:pointer; transition:background .45s var(--mp-ease), color .45s var(--mp-ease) !important; } .mp-form input[type=submit]:hover, .mp-form .wpcf7-submit:hover{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; color:var(--mp-ink) !important; } .mp-form .wpcf7-not-valid-tip{ color:#b03a2e !important; font-size:12px !important; margin-top:6px; } .wpcf7-response-output{ grid-column:1 / -1; border:1px solid var(--mp-line-gold) !important; border-radius:2px; padding:14px 18px !important; margin:6px 0 0 !important; font-size:13px !important; color:var(--mp-text) !important; } /* ========================================================================= 31. VICENZA ANNOUNCEMENT BAR (fixed, always visible, above the header) ========================================================================= */ .mp-bar{ position:fixed; top:0; left:0; right:0; z-index:950; background:var(--mp-ink); border-bottom:1px solid rgba(179,146,96,.28); overflow:hidden; } .mp-bar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--mp-gold-grad); background-size:250% 100%; animation:mp-sweep 6s linear infinite; opacity:.9; } .mp-bar__in{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.4vw,20px); max-width:1480px; margin:0 auto; padding:9px clamp(16px,4vw,48px); font-family:'Manrope',sans-serif; font-size:11px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,246,250,.78); text-align:center; line-height:1.5; } .mp-bar__in b{ color:var(--mp-gold-lt) !important; font-weight:500; letter-spacing:.2em; } .mp-bar__dot{ width:4px; height:4px; border-radius:50%; background:rgba(179,146,96,.6); flex:0 0 auto; } .mp-bar__cta{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--mp-gold-lt) !important; font-weight:500; letter-spacing:.2em; border-bottom:1px solid rgba(227,200,142,.4); padding-bottom:1px; transition:border-color .4s var(--mp-ease), color .4s var(--mp-ease); } .mp-bar__cta:hover{ border-color:var(--mp-gold-lt); color:#F6F1E7 !important; } .mp-bar__cta i{ display:block; width:16px; height:1px; background:currentColor; transition:width .4s var(--mp-ease); } .mp-bar__cta:hover i{ width:26px; } /* the header now hangs below the bar; the page reserves both */ #masthead{ top:var(--mp-bar, 0px); } body{ padding-top:calc(var(--mp-bar, 0px) + var(--mp-hdr, 96px)); } .mp-progress{ top:var(--mp-bar, 0px); } @media (max-width:760px){ /* keep the dates and the booth number - they are the point of the bar */ .mp-bar__in{ flex-wrap:wrap; font-size:9.5px; letter-spacing:.1em; gap:5px 8px; padding:7px 12px; line-height:1.45; } .mp-bar__dot{ width:3px; height:3px; } .mp-bar__cta{ flex-basis:100%; justify-content:center; border:0; padding:0; } .mp-bar__cta i{ width:14px; } } @media (max-width:400px){ .mp-bar__in{ font-size:9px; letter-spacing:.06em; } } /* ========================================================================= 32. LOGO - real white artwork on dark, original on light. Never distorted. ========================================================================= */ /* the old filter turned the gold mark white too - gone */ html.mp-home:not(.mp-scrolled) #masthead .logo img{ filter:none !important; } #masthead .logo a.mp-logo-swap{ position:relative; display:inline-block; line-height:0; } #masthead .logo a.mp-logo-swap img{ transition:opacity .45s var(--mp-ease); } #masthead .logo a.mp-logo-swap .mp-logo-alt{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; object-position:left center; opacity:0; pointer-events:none; } html.mp-home:not(.mp-scrolled) #masthead .logo a.mp-logo-swap .mp-logo-alt{ opacity:1; } html.mp-home:not(.mp-scrolled) #masthead .logo a.mp-logo-swap .mp-logo-base{ opacity:0; } @media (max-width:900px){ html.mp-home:not(.mp-scrolled) #masthead .logo a.mp-logo-swap .mp-logo-alt{ opacity:0; } html.mp-home:not(.mp-scrolled) #masthead .logo a.mp-logo-swap .mp-logo-base{ opacity:1; } } /* footer logo sits on ink - use the white artwork there too */ #site-footer .logo img, #cb-row--footer-main .widget_media_image img{ filter:none !important; } /* ========================================================================= 33. TEXT CARD - copy sitting beside an image gets a card, not empty space ========================================================================= */ .mp-textcard{ background:var(--mp-paper-2) !important; border:1px solid var(--mp-line); border-radius:2px; padding:clamp(26px,3vw,52px) !important; position:relative; overflow:hidden; align-self:center; } .mp-textcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--mp-gold-grad); background-size:250% 100%; animation:mp-sweep 7s linear infinite; } .mp-textcard .elementor-widget:last-child .elementor-widget-container > *:last-child{ margin-bottom:0; } .mp-textcard p{ max-width:62ch; } .mp-textcard .elementor-widget-spacer{ display:none; } /* the card supplies its own rhythm */ /* on ink bands the card flips to a lighter surface of the same ink */ .mp-band .mp-textcard, .mp-textcard.mp-textcard--ink{ background:var(--mp-ink-2) !important; border-color:rgba(179,146,96,.24); } .mp-band .mp-textcard p, .mp-textcard--ink p{ color:rgba(230,240,246,.72) !important; } /* the paired image column stretches so the two sides read as one block */ .mp-imgcol{ align-self:stretch; display:flex; } .mp-imgcol > .elementor-widget-wrap{ width:100%; display:flex; flex-direction:column; justify-content:center; } .mp-imgcol .mp-frame{ height:100%; } .mp-imgcol .mp-frame > img{ height:100% !important; object-fit:cover !important; } @media (max-width:900px){ .mp-textcard{ padding:clamp(22px,6vw,32px) !important; } .mp-imgcol .mp-frame{ height:auto; } .mp-imgcol .mp-frame > img{ height:auto !important; } } /* 34. inside a card, copy reads left-aligned - centred text in a box looks cheap */ .mp-textcard, .mp-textcard *:not(.mp-card__more){ text-align:left !important; } .mp-textcard .elementor-widget-image img{ margin-left:0 !important; margin-right:auto !important; } .mp-textcard .elementor-widget-button .elementor-button{ margin-top:6px; } .mp-textcard .elementor-widget-container{ text-align:left !important; } /* ========================================================================= 35. FULL-BLEED LAYOUT The theme boxes all page content into a 1400px .container, and Elementor's "stretched section" JS (which normally breaks out of it) never shipped with the static export. Result: 270px of dead white either side on a 1920 screen. We release the container and let each band decide its own measure instead. ========================================================================= */ #primary > .container, .content-area > .container{ max-width:none !important; width:100% !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important; } /* content measure, generous on large screens, safe on small ones */ :root{ --mp-max: min(1560px, 92vw); --mp-max-wide: min(1780px, 96vw); } .elementor-section-boxed > .elementor-container{ max-width:var(--mp-max) !important; margin-inline:auto !important; padding-inline:var(--mp-gutter); } .elementor-section-full_width > .elementor-container, .elementor-section-stretched > .elementor-container{ max-width:var(--mp-max-wide) !important; margin-inline:auto !important; padding-inline:var(--mp-gutter); } /* our own bands are already full-bleed; their insides keep the same measure */ .mp-stats__grid, .mp-film__wrap{ max-width:var(--mp-max) !important; } /* hand-built blocks on the contact / certificate / hub pages */ .mc-inner{ max-width:var(--mp-max) !important; } .mio-certs__grid{ max-width:var(--mp-max) !important; } .mio-hub__list, .mio-hub__intro{ max-width:var(--mp-max) !important; margin-inline:auto !important; } #masthead .container{ max-width:var(--mp-max-wide) !important; } #site-footer .container{ max-width:var(--mp-max) !important; } .mp-bar__in{ max-width:var(--mp-max-wide); } /* very wide screens: stop the hero cards from becoming letterbox slivers */ @media (min-width:1700px){ .mp-card{ flex:0 0 min(30vw,560px); } .mp-show__intro{ flex:0 0 min(42vw,760px); } } /* 36. text card and its image sit at equal height */ .mp-textcard{ align-self:stretch !important; align-content:center !important; } .mp-imgcol .elementor-widget-image, .mp-imgcol .elementor-widget-image .elementor-widget-container{ height:100%; } @media (max-width:900px){ .mp-textcard{ align-self:auto !important; } .mp-imgcol .elementor-widget-image, .mp-imgcol .elementor-widget-image .elementor-widget-container{ height:auto; } } /* 37. long-form copy gets a proper reading column, centred on the page */ .elementor-container.mp-prose{ max-width:min(980px, 92vw) !important; margin-inline:auto !important; } .mp-prose .elementor-widget-text-editor p, .mp-prose .elementor-widget-text-editor ul, .mp-prose .elementor-widget-text-editor ol{ max-width:none; } .mp-prose h1, .mp-prose h2, .mp-prose h3{ margin-top:1.4em; } .mp-prose h2{ font-size:clamp(24px,2.4vw,34px) !important; } .mp-prose h3{ font-size:clamp(19px,1.7vw,24px) !important; } /* ========================================================================= 38. HERO v2 - static premium grid. The pinned horizontal showcase collapsed to zero-height cards whenever the OS reported reduced motion (Windows "animation effects" off). Replaced with a robust intro + 2x2 product grid that needs no JS and no scroll hijack. ========================================================================= */ .mp-show{ margin-top:0 !important; } .mp-show__sticky{ position:static !important; height:auto !important; min-height:0 !important; display:block !important; overflow:visible !important; } .mp-show__sticky::before{ content:none !important; } .mp-show__hint{ display:none !important; } .mp-show__track{ display:grid !important; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(14px,1.6vw,24px); align-items:stretch; height:auto !important; transform:none !important; max-width:var(--mp-max-wide); margin-inline:auto; padding:clamp(40px,5vw,80px) var(--mp-gutter) clamp(44px,5.5vw,88px); } .mp-show__intro{ grid-column:1; grid-row:1 / span 2; flex:none !important; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(16px,2.4vw,48px) 0 0 !important; } .mp-card{ position:relative; flex:none !important; width:auto !important; height:auto !important; min-height:clamp(220px,20vw,320px); margin:0 !important; border-radius:2px; overflow:hidden; } .mp-card:last-child{ margin:0 !important; } .mp-card__txt{ font-size:12.5px; } @media (max-width:1100px){ .mp-show__track{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .mp-show__intro{ grid-column:1 / -1; grid-row:auto; padding:0 0 clamp(20px,3vw,36px) !important; } .mp-card{ min-height:clamp(200px,30vw,300px); } } @media (max-width:560px){ .mp-card{ min-height:44vw; } .mp-card__txt{ display:none !important; } } /* ========================================================================= 39. HEADER v2 - always light; only the Vicenza bar stays ink. ========================================================================= */ /* neutralise the old dark-transparent home header (highest-specificity rules) */ html.mp-home:not(.mp-scrolled) #masthead-inner{ background:rgba(252,251,249,.92) !important; backdrop-filter:saturate(170%) blur(16px); -webkit-backdrop-filter:saturate(170%) blur(16px); border-bottom:1px solid var(--mp-line) !important; } html.mp-home:not(.mp-scrolled) #masthead .logo img{ filter:none !important; } html.mp-home:not(.mp-scrolled) #masthead :is(.main-menu,.nav-menu,ul.menu) > li > a{ color:var(--mp-ink) !important; } html.mp-home:not(.mp-scrolled) #masthead .navigation1-ul > li > a, html.mp-home:not(.mp-scrolled) #masthead .builder-header-html-item a{ color:var(--mp-muted) !important; } html.mp-home:not(.mp-scrolled) #masthead .item--button.skyhaus-btn{ background:var(--mp-ink) !important; color:#fff !important; border-color:var(--mp-ink) !important; } .mp-logo-alt{ display:none !important; } /* the always-on light bar, whatever page or scroll state */ #masthead-inner{ background:rgba(252,251,249,.92) !important; backdrop-filter:saturate(170%) blur(16px); -webkit-backdrop-filter:saturate(170%) blur(16px); border-bottom:1px solid var(--mp-line) !important; } /* --- language switcher: a clean EN | TR segmented control ---------------- */ #masthead .navigation1-ul{ gap:0 !important; } #masthead .navigation1-ul li::before, #masthead .navigation1-ul li::after, #masthead .navigation1-ul a::before, #masthead .navigation1-ul a::after, #masthead .navigation1-ul .link-before::before, #masthead .navigation1-ul .link-before::after{ content:none !important; } #masthead .navigation1-ul > li.trp-language-switcher-container{ margin:0 !important; } #masthead .navigation1-ul > li.trp-language-switcher-container + li.trp-language-switcher-container{ padding-left:0 !important; border-left:0 !important; } #masthead .navigation1-ul > li.trp-language-switcher-container > a{ display:inline-flex !important; align-items:center; justify-content:center; min-width:40px; padding:6px 12px !important; border:1px solid var(--mp-line) !important; font-size:10.5px !important; letter-spacing:.14em !important; color:var(--mp-muted) !important; transition:background .35s var(--mp-ease), color .35s var(--mp-ease), border-color .35s var(--mp-ease); } #masthead .navigation1-ul > li.trp-language-switcher-container:first-child > a{ border-radius:2px 0 0 2px !important; border-right-width:0 !important; } #masthead .navigation1-ul > li.trp-language-switcher-container + li.trp-language-switcher-container > a{ border-radius:0 2px 2px 0 !important; } #masthead .navigation1-ul > li.current-language-menu-item > a{ background:var(--mp-ink) !important; border-color:var(--mp-ink) !important; color:#fff !important; } #masthead .navigation1-ul > li.trp-language-switcher-container > a:hover{ color:var(--mp-ink) !important; } #masthead .navigation1-ul > li.current-language-menu-item > a:hover{ color:#fff !important; } /* breathing room between the switcher and the next utility item */ #masthead .navigation1-ul > li:not(.trp-language-switcher-container){ margin-left:clamp(14px,1.8vw,28px) !important; } /* --- dropdown menus: quiet, expensive ------------------------------------ */ #masthead ul.menu .sub-menu, #masthead .primary-menu-ul .sub-menu{ min-width:256px; background:#FDFCFA !important; border:1px solid var(--mp-line) !important; border-top:2px solid var(--mp-gold) !important; border-radius:0 0 4px 4px !important; box-shadow:0 28px 56px -28px rgba(10,31,41,.4) !important; padding:10px 0 !important; } #masthead .sub-menu li{ margin:0 !important; display:block !important; } #masthead .sub-menu li a{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:400 !important; letter-spacing:.05em !important; text-transform:none !important; color:var(--mp-muted) !important; display:block !important; line-height:1.45 !important; padding:10px 26px !important; position:relative; transition:color .3s var(--mp-ease), background .3s var(--mp-ease), padding-left .3s var(--mp-ease) !important; } #masthead .sub-menu li a::before{ content:""; position:absolute; left:14px; top:50%; width:0; height:1px; background:var(--mp-gold); transition:width .3s var(--mp-ease); } #masthead .sub-menu li a:hover{ color:var(--mp-ink) !important; background:var(--mp-ink-soft) !important; padding-left:34px !important; } #masthead .sub-menu li a:hover::before{ width:12px; } /* utility row alignment */ #masthead .builder-header-html-item a{ letter-spacing:.16em !important; } #masthead #cb-row--header-main .col-v2-right{ gap:clamp(14px,1.8vw,26px); } /* ========================================================================= 40. FILM - inline autoplaying embed ========================================================================= */ .mp-film__stage iframe{ position:absolute !important; inset:0; width:100% !important; height:100% !important; border:0 !important; display:block; } .mp-film__stage.is-live{ cursor:default !important; } .mp-film__stage.is-live::after{ content:none !important; } /* ========================================================================= 42. MANROPE TUNING + FIXED LOGO ========================================================================= */ /* headings: geometric confidence, tight but not cramped */ h1,h2,h3,.elementor-heading-title{ letter-spacing:-.02em !important; } h1{ font-weight:700 !important; } .mp-show__intro h1{ font-weight:700 !important; letter-spacing:-.025em !important; font-size:clamp(32px,3.4vw,54px) !important; } body{ font-weight:400; } p{ font-weight:400; } .mp-eyebrow, .mp-bar__in, .mp-btn, .elementor-button, .mp-card__more, .mp-stat__l, .mp-marq__item, .mc-eyebrow{ font-weight:600 !important; } /* the logo never changes size - no growing, no shrinking, no stretching */ #masthead .logo img, #masthead .logo-image img{ height:32px !important; width:auto !important; max-width:none !important; transition:none !important; transform:none !important; } html.mp-scrolled #masthead .logo img{ height:32px !important; } #masthead .logo a{ overflow:visible !important; } #masthead .logo a::after{ content:none !important; animation:none !important; } /* ========================================================================= 41. PROPORTION PASS The image+text rows were sized by the photo's natural height, leaving the text floating in an oversized card. The image now keeps a 4:3 ceiling and the whole composition sits on a tighter, calmer measure. ========================================================================= */ /* content measure: was far too wide at 1920 - a page is not a banner */ :root{ --mp-max: min(1320px, 92vw); --mp-max-wide: min(1560px, 94vw); } /* --- image + text rows --------------------------------------------------- */ .elementor-container[data-mp-card]{ gap:clamp(20px, 3vw, 48px); align-items:stretch; } /* the photo obeys a 4:3 frame instead of dictating the row height */ .mp-imgcol .mp-frame{ height:auto !important; aspect-ratio:4 / 3; max-height:520px; width:100%; } .mp-imgcol .mp-frame > img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; } /* the card: dense, centred, readable */ .mp-textcard{ display:flex !important; flex-direction:column; justify-content:center; align-self:stretch !important; padding:clamp(26px, 3vw, 48px) clamp(24px, 3.2vw, 56px) !important; } .mp-textcard .elementor-widget-heading .elementor-heading-title, .mp-textcard h2, .mp-textcard h3{ font-size:clamp(24px, 2.2vw, 34px) !important; line-height:1.18 !important; margin:0 0 14px !important; } .mp-textcard p{ max-width:58ch; margin:0 0 .9em !important; font-size:clamp(14px, 1vw, 15.5px); line-height:1.7; } .mp-textcard .elementor-widget{ margin-bottom:0 !important; } .mp-textcard .elementor-widget-button{ margin-top:10px !important; } .mp-textcard .elementor-widget-container{ margin:0 !important; } /* wordmark images (miochain etc.) inside cards: modest, aligned with the text */ .mp-textcard .elementor-widget-image img{ max-width:min(220px, 52%) !important; height:auto !important; margin:0 0 14px !important; } /* --- global rhythm ------------------------------------------------------- */ /* sections breathe evenly instead of shouting */ .elementor-section.elementor-top-section > .elementor-container{ padding-top:clamp(36px, 4.5vw, 72px); padding-bottom:clamp(36px, 4.5vw, 72px); } /* the generated bands manage their own rhythm */ .mp-film .mp-film__wrap, .mp-stats__grid{ padding-top:0; padding-bottom:0; } /* spacers from the page builder collapse - the rhythm above replaces them */ .elementor-widget-spacer{ display:none !important; } /* hero: same tighter measure */ .mp-show__track{ max-width:var(--mp-max-wide); } .mp-card{ min-height:clamp(210px, 17.5vw, 290px); } /* long-form pages keep their reading column */ .elementor-container.mp-prose{ max-width:min(920px, 92vw) !important; } @media (max-width:900px){ .mp-imgcol .mp-frame{ max-height:380px; } .mp-textcard{ padding:clamp(22px, 5vw, 32px) !important; } } /* 43. wordmarks inside cards sit flush left with the copy */ .mp-textcard figure{ margin:0 !important; text-align:left !important; } .mp-textcard .elementor-widget-image .elementor-widget-container{ text-align:left !important; } .mp-textcard .elementor-widget-image{ margin-bottom:4px !important; } /* 44. flex children fill the card - Elementor's align-items:center was shrinking each widget to its content width and centring it */ .mp-textcard{ align-items:stretch !important; align-content:stretch !important; } .mp-textcard > .elementor-element, .mp-textcard > .elementor-widget{ width:100% !important; max-width:100% !important; } /* ========================================================================= 45. DECLUTTER PASS - decorative dash strokes retired everywhere - header dropdowns removed: every top item is a direct link - "Bilgi Toplumu Hizmetleri" leaves the header (JS re-homes it in the footer) - utility row items share one size and one baseline ========================================================================= */ /* the little "-" strokes after labels: gone */ .mp-btn .mp-btn-arrow, .mp-bar__cta i, .mp-card__more i, .mp-map__badge a i, .mp-map-badge a i, .mc-more::after{ display:none !important; } .mp-btn{ gap:0; } .mp-bar__cta{ gap:0; border-bottom-width:1px; } .mp-card__more{ gap:0; } /* no dropdowns: top-level items navigate directly */ #masthead .sub-menu{ display:none !important; } #masthead .dropdown-symbol, #masthead .menu-item-has-children > a > svg, #masthead .menu-item-has-children > a i, #masthead .primary-menu-ul .caret{ display:none !important; } #masthead .menu-item-has-children > a::after{ content:none !important; } /* Bilgi Toplumu Hizmetleri no longer lives in the header */ #masthead .navigation1-ul > li:not(.trp-language-switcher-container){ display:none !important; } /* utility row: one type size, one baseline */ #masthead #cb-row--header-main .col-v2-right{ align-items:center !important; } #masthead .builder-header-html-item a, #masthead .navigation1-ul > li.trp-language-switcher-container > a{ font-size:10.5px !important; font-weight:600 !important; letter-spacing:.15em !important; line-height:1 !important; } #masthead .builder-header-html-item{ display:flex; align-items:center; } #masthead .item--button.skyhaus-btn{ font-weight:600 !important; } /* hero: intro column optically centred against the card grid */ .mp-show__intro{ justify-content:center; padding-top:clamp(6px,1vw,18px) !important; } .mp-show__intro p{ margin-bottom:0; } .mp-show__cta{ margin-top:26px; } /* ========================================================================= 46. BRAND PAGES (/miochain/ /miorope/ /miodesign/ /mioform/) ========================================================================= */ .bp-hero{ background:var(--mp-ink); color:#EAF1F5; position:relative; overflow:hidden; padding:clamp(56px,7vw,110px) 0 clamp(44px,5vw,84px); } .bp-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(110% 80% at 15% 0%, rgba(179,146,96,.16), transparent 60%); } .bp-wrap{ max-width:var(--mp-max); margin-inline:auto; padding-inline:var(--mp-gutter); position:relative; } .bp-hero .mp-eyebrow{ color:var(--mp-gold-lt) !important; } .bp-hero .mp-eyebrow::before{ background:var(--mp-gold-lt); } .bp-name{ font-family:'Manrope',sans-serif !important; font-weight:800 !important; font-size:clamp(40px,5.5vw,84px); line-height:1.02; letter-spacing:-.03em; color:#F6F1E7 !important; margin:0 0 18px; } .bp-name span{ color:var(--mp-gold-lt); font-weight:300; } .bp-lead{ max-width:62ch; color:rgba(230,240,246,.72) !important; font-size:clamp(15px,1.15vw,17.5px); } .bp-hero .mp-btn{ margin-top:28px; } .bp-media{ background:var(--mp-ink); padding:0 0 clamp(44px,5.5vw,88px); } .bp-media .bp-wrap{ max-width:var(--mp-max-wide); } .bp-media .mp-frame{ aspect-ratio:21/9; } .bp-media .mp-frame > img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; } .bp-feats{ padding:clamp(48px,6vw,96px) 0; background:var(--mp-paper); } .bp-feats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); } .bp-feat{ background:var(--mp-paper-2); border:1px solid var(--mp-line); border-radius:2px; padding:clamp(24px,2.6vw,40px); position:relative; overflow:hidden; } .bp-feat::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--mp-gold-grad); background-size:250% 100%; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--mp-ease); } .bp-feat:hover::before{ transform:scaleX(1); } .bp-feat__n{ font-weight:700; font-size:13px; letter-spacing:.18em; color:var(--mp-gold-dk); margin-bottom:14px; } .bp-feat h3{ font-size:clamp(17px,1.4vw,21px) !important; margin:0 0 10px !important; } .bp-feat p{ font-size:14px; margin:0 !important; } .bp-cta{ background:var(--mp-ink-2); padding:clamp(48px,6vw,88px) 0; text-align:center; } .bp-cta h2{ color:#F6F1E7 !important; margin:0 0 12px !important; font-size:clamp(24px,2.6vw,38px) !important; } .bp-cta p{ color:rgba(230,240,246,.62) !important; margin:0 auto 26px; max-width:56ch; } .bp-cta__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .bp-cta .mp-btn{ border-color:rgba(227,200,142,.55); color:var(--mp-gold-lt) !important; } .bp-cta .mp-btn::before{ background:var(--mp-gold-lt); } .bp-cta .mp-btn:hover{ color:var(--mp-ink) !important; } .bp-cta .mp-btn--gold{ background:var(--mp-gold); border-color:var(--mp-gold); color:var(--mp-ink) !important; } .bp-others{ padding:clamp(48px,6vw,90px) 0; background:var(--mp-paper-2); } .bp-others h2{ text-align:center; margin:0 0 clamp(24px,3vw,44px) !important; font-size:clamp(22px,2.2vw,32px) !important; } .bp-others__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); } .bp-others .mp-card{ min-height:clamp(200px,16vw,260px); } @media (max-width:900px){ .bp-feats__grid, .bp-others__grid{ grid-template-columns:1fr; } .bp-media .mp-frame{ aspect-ratio:16/10; } } /* 47. dark bands never show dark type - belt and braces after the font swap */ .mp-film__head h2, .mp-film__head .mp-mask-i, .mp-band :is(h1,h2,h3,h4,h5,h6), .mp-band .elementor-heading-title, .bp-hero :is(h1,h2), .bp-cta h2, .mp-show__intro h1{ color:#F6F1E7 !important; } .mp-film__head p, .mp-band p{ color:rgba(230,240,246,.68) !important; } /* 48. dropdowns really are gone (an earlier stacked-submenu rule outranked 45) */ #masthead .primary-menu-ul .sub-menu, #masthead ul.menu .sub-menu, #masthead .primary-menu-ul li .sub-menu, #masthead .sub-menu{ display:none !important; visibility:hidden !important; } /* 49. no dropdowns, so no chevrons either */ #masthead .nav-icon-angle{ display:none !important; } /* 50. contact page - locations grid */ .mp-loc{ max-width:var(--mp-max); margin:clamp(36px,4.5vw,64px) auto; } .mp-loc__head{ text-align:center; margin-bottom:clamp(22px,2.6vw,38px); } .mp-loc__head h2{ margin:6px 0 0 !important; font-size:clamp(24px,2.4vw,36px) !important; } .mp-loc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); } .mp-loc__card{ background:#fff; border:1px solid var(--mp-line); border-radius:2px; overflow:hidden; transition:border-color .5s var(--mp-ease), transform .5s var(--mp-ease), box-shadow .5s var(--mp-ease); } .mp-loc__card:hover{ border-color:var(--mp-line-gold); transform:translateY(-4px); box-shadow:0 30px 60px -44px rgba(10,31,41,.5); } .mp-loc__img{ aspect-ratio:4/3; border-radius:0; } .mp-loc__img::after{ border:0 !important; } .mp-loc__img > img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; } .mp-loc__card h3{ font-size:clamp(15px,1.2vw,18px) !important; line-height:1.35 !important; margin:16px 18px 6px !important; } .mp-loc__card p{ font-size:13px !important; color:var(--mp-muted) !important; margin:0 18px 18px !important; } @media (max-width:900px){ .mp-loc__grid{ grid-template-columns:1fr; } } /* ========================================================================= 40. CLIENT REVISIONS - September 2026 1) standard cursor 2) hero category names 3) no open/transition motion 4) text + image boxes share one size 5) product category tabs 7) awards removed (HTML) 9) "Request Information" in yellow ========================================================================= */ /* --- 1 + 3: standard arrow cursor, no preloader / page curtain -------------- */ /* (scroll reveals, counters, marquee and hover motion stay on - see 41) */ .mp-cursor, .mp-cursor-dot, .mp-pre, .mp-curtain{ display:none !important; } html.mp-cursor-on, html.mp-cursor-on *{ cursor:auto !important; } html.mp-preloading{ overflow:auto !important; } /* --- 2: HERO v3 - one strong visual, copy top-aligned with it -------------- */ .mp-hero{ background:var(--mp-ink); color:#F6F1E7; position:relative; overflow:hidden; } .mp-hero__in{ max-width:var(--mp-max-wide); margin:0 auto; padding:clamp(36px,4.5vw,72px) var(--mp-gutter) clamp(40px,5vw,80px); display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,64px); align-items:start; /* top edges line up */ } .mp-hero__copy{ display:flex; flex-direction:column; align-items:flex-start; padding-top:2px; } .mp-hero__copy .mp-eyebrow{ margin-top:0 !important; } .mp-hero__copy h1{ color:#F6F1E7 !important; margin:18px 0 22px !important; font-size:clamp(38px,4.3vw,66px) !important; line-height:1.06 !important; letter-spacing:-.015em !important; } .mp-hero__copy p{ color:rgba(230,240,246,.78) !important; max-width:46ch; font-size:clamp(16.5px,1.32vw,19.5px) !important; line-height:1.6 !important; margin:0 !important; } .mp-hero__cta{ margin-top:clamp(26px,2.6vw,38px); display:flex; gap:12px; flex-wrap:wrap; } .mp-hero .mp-btn{ padding:15px 24px !important; } .mp-hero .mp-btn:first-child{ background:var(--mp-gold); border-color:var(--mp-gold); color:var(--mp-ink) !important; } .mp-hero .mp-btn:first-child::before{ background:#F0DCAE; } .mp-hero .mp-btn:first-child:hover{ color:var(--mp-ink) !important; } .mp-hero .mp-btn:not(:first-child){ border-color:rgba(227,200,142,.55); color:var(--mp-gold-lt) !important; } .mp-hero .mp-btn:not(:first-child)::before{ background:var(--mp-gold-lt); } .mp-hero .mp-btn:not(:first-child):hover{ color:var(--mp-ink) !important; } .mp-hero__visual{ min-width:0; } .mp-hero__frame{ aspect-ratio:4 / 3; border-radius:2px; background:var(--mp-ink); } .mp-hero__frame::after{ border-color:rgba(227,200,142,.28); } .mp-hero__img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; transform:scale(1.06); will-change:transform; /* JS parallax nudges this */ transition:none !important; } @media (max-width:900px){ .mp-hero__in{ grid-template-columns:minmax(0,1fr); gap:28px; } .mp-hero__frame{ aspect-ratio:16 / 11; } } /* --- 2b: the four product lines, side by side under the hero -------------- */ .mp-lines{ background:var(--mp-paper); border-bottom:1px solid var(--mp-line); } .mp-lines__in{ max-width:var(--mp-max-wide); margin:0 auto; padding:clamp(28px,3.2vw,52px) var(--mp-gutter) clamp(32px,3.6vw,60px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); } .mp-line{ display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--mp-line); border-radius:2px; overflow:hidden; text-decoration:none !important; color:var(--mp-ink) !important; transition:transform .55s var(--mp-ease), box-shadow .55s var(--mp-ease), border-color .55s var(--mp-ease); } .mp-line:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -24px rgba(10,31,41,.45); border-color:rgba(179,146,96,.55); } .mp-line__img{ display:block; aspect-ratio:4 / 3; border-radius:0 !important; background:var(--mp-ink); } .mp-line__img::after{ border:0 !important; } .mp-line__img img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; transition:transform 1.1s var(--mp-ease); } .mp-line:hover .mp-line__img img{ transform:scale(1.06); } .mp-line__body{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(20px,2vw,28px); flex:1; } .mp-line__logo{ height:26px !important; width:auto !important; max-width:100% !important; display:block; /* one cap-height for all four */ margin:0 0 12px !important; filter:none !important; } .mp-line__txt{ display:block; font-size:14px; line-height:1.6; color:var(--mp-muted); margin:0 0 16px; } .mp-line__more{ margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mp-gold-dk); } .mp-line__more i{ display:block; width:26px; height:1px; background:var(--mp-gold); transition:width .5s var(--mp-ease); } .mp-line:hover .mp-line__more i{ width:44px; } @media (max-width:1000px){ .mp-lines__in{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:520px){ .mp-lines__in{ grid-template-columns:minmax(0,1fr); } .mp-line__logo{ height:22px !important; } } /* --- 4: text card and picture box get identical outer dimensions ---------- */ .elementor-container[data-mp-card]{ --mp-pair-gap:clamp(16px,2vw,28px); display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--mp-pair-gap); } @media (min-width:901px){ .elementor-container[data-mp-card] > .elementor-column{ width:calc(50% - var(--mp-pair-gap) / 2) !important; flex:0 0 auto; } } .elementor-container[data-mp-card] > .elementor-column > .elementor-widget-wrap{ min-height:100%; } .mp-textcard{ align-self:stretch !important; height:100%; box-sizing:border-box; } .mp-imgcol{ align-self:stretch !important; display:flex; } .mp-imgcol > .elementor-widget-wrap{ padding:0 !important; height:100%; display:flex; flex-direction:column; } .mp-imgcol .elementor-widget-image, .mp-imgcol .elementor-widget-image .elementor-widget-container{ height:100%; margin:0 !important; } .mp-imgcol .mp-frame{ height:100% !important; margin:0 !important; border-radius:2px; } .mp-imgcol .mp-frame > img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; } @media (max-width:900px){ .mp-imgcol .mp-frame{ height:auto !important; min-height:0; } .mp-imgcol .mp-frame > img{ height:auto !important; } } /* --- 5: product category tabs -------------------------------------------- */ .mp-tabs{ max-width:var(--mp-max-wide); margin:0 auto; padding:0 var(--mp-gutter) clamp(24px,3vw,40px); } .mp-tabs__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0; padding:0; border-bottom:1px solid var(--mp-line); } .mp-tabs__btn{ appearance:none; -webkit-appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:14px clamp(14px,2vw,26px); cursor:pointer; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mp-muted); transition:color .25s var(--mp-ease), border-color .25s var(--mp-ease); } .mp-tabs__btn:hover{ color:var(--mp-ink); } .mp-tabs__btn.is-on{ color:var(--mp-ink); border-bottom-color:var(--mp-gold); } .mp-tab-off{ display:none !important; } .mp-tabs + .elementor-section{ padding-top:0 !important; } /* --- 8: form feedback ------------------------------------------------------ */ .mp-form-note{ margin:12px 0 0; font-size:13px; color:var(--mp-muted); } .mp-form-note.is-err{ color:#B4433A; } .mc-form .mp-form-note{ color:rgba(230,240,246,.72); } .mc-form .mp-form-note.is-err{ color:#F0A59B; } .mp-form-done{ padding:28px; border:1px solid rgba(179,146,96,.45); border-radius:2px; background:rgba(227,200,142,.08); } .mp-form-done strong{ display:block; margin-bottom:8px; font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mp-gold); } .mp-form-done p{ margin:0; } /* --- 9: "Request Information" heading in yellow --------------------------- */ html body .mc-form h2.mio-t-h3, html body .mc-form .mio-t-h3{ color:#E8C35C !important; } /* ========================================================================= 41. CLIENT REVISIONS - round 2 (September 2026) brand ink everywhere, larger nav + hero copy, shrinking header logo, tab crossfade, motion kept on regardless of the OS "reduce motion" flag ========================================================================= */ /* every dark surface is the brand ink, no second navy */ :root{ --mp-ink-2:#0A1F29; --mp-ink-3:#0A1F29; } .mp-frame, .mp-film__stage, .mp-film__poster-wrap, .mc-map, .mp-map{ background:#0A1F29 !important; } /* photos: their darkest tones melt into the ink frame instead of showing a second navy */ .mp-frame > img{ mix-blend-mode:lighten; } .mp-line__img img, .mp-hero__img{ mix-blend-mode:lighten; } /* header nav a step larger */ #masthead .main-menu > li > a, #masthead .nav-menu > li > a, #masthead ul.menu > li > a{ font-size:14px !important; letter-spacing:.17em !important; font-weight:500 !important; } /* header logo: large at the top of the page, settles to 32px once you scroll */ html{ --mp-logo-h:clamp(40px,3.6vw,52px); } html.mp-scrolled{ --mp-logo-h:32px; } html:not(.mp-scrolled) #masthead .logo img, html:not(.mp-scrolled) #masthead .logo-image img, html.mp-scrolled #masthead .logo img, html.mp-scrolled #masthead .logo-image img, #masthead .logo img, #masthead .logo-image img{ height:var(--mp-logo-h) !important; transition:height .45s var(--mp-ease) !important; } @media (max-width:900px){ html{ --mp-logo-h:36px; } html.mp-scrolled{ --mp-logo-h:30px; } } /* product tabs: the chosen category fades and rises in */ @keyframes mp-tabin{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } } section.mp-tab-in{ animation:mp-tabin .65s var(--mp-ease) both; } .mp-tabs__btn{ position:relative; } .mp-tabs__btn::after{ content:""; position:absolute; left:50%; right:50%; bottom:-2px; height:2px; background:var(--mp-gold); transition:left .35s var(--mp-ease), right .35s var(--mp-ease); } .mp-tabs__btn.is-on{ border-bottom-color:transparent; } .mp-tabs__btn.is-on::after{ left:0; right:0; } /* hero card row: slightly slower, softer stagger than the content rows */ .mp-lines__in.mp-stagger > *{ transition-duration:1s; } /* reduced-motion is now opt-in via ?mp-motion=0 only */ html.mp-motion-off .mp-hero__img{ transform:none !important; } /* ========================================================================= 42. CLIENT REVISIONS - round 3 (September 2026) real line logos on collection pages, 5th line (MioroChain), depth parallax, film poster growth, fair countdown, footer in one row of single columns, redrawn social icons ========================================================================= */ /* --- collection pages: the wordmark image instead of typed "mio form" ----- */ .bp-name--logo{ margin:14px 0 22px !important; line-height:0; } .bp-logo{ display:block; height:clamp(44px,5vw,74px) !important; width:auto !important; max-width:100% !important; } .bp-logo--card{ height:24px !important; margin:0 !important; } .bp-others__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .bp-others .mp-card{ min-height:clamp(180px,14vw,240px) !important; } .bp-others .mp-card__body{ display:flex !important; align-items:flex-end; } @media (max-width:1000px){ .bp-others__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:600px){ .bp-others__grid{ grid-template-columns:minmax(0,1fr) !important; } .bp-logo{ height:40px !important; } } /* --- homepage: five product lines side by side ------------------------------ */ .mp-lines__in{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.3vw,20px); } .mp-line__txt{ font-size:13.5px; } .mp-line__logo{ height:24px !important; } @media (max-width:1250px){ .mp-lines__in{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:1000px){ .mp-lines__in{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:520px){ .mp-lines__in{ grid-template-columns:minmax(0,1fr); } } /* --- 3. depth parallax on framed photos ------------------------------------ */ .mp-frame.mp-plx > img{ transform:translate3d(0,var(--mp-py,0px),0) scale(1.14) !important; transition:transform .9s cubic-bezier(.2,.7,.2,1), filter 1.4s var(--mp-ease) !important; will-change:transform; } .mp-frame.mp-plx.mp-zoom:not(.is-in) > img{ transform:translate3d(0,var(--mp-py,0px),0) scale(1.28) !important; } /* --- 5. the film poster grows into place ------------------------------------ */ .mp-film__stage{ transform-origin:50% 35%; will-change:transform, border-radius; overflow:hidden; } /* --- 6. fair countdown (exhibitions page) ----------------------------------- */ .mp-count{ background:var(--mp-ink); color:#F6F1E7; position:relative; overflow:hidden; } .mp-count::before{ content:""; position:absolute; inset:auto -10% -40% 50%; height:80%; pointer-events:none; background:radial-gradient(closest-side, rgba(179,146,96,.18), transparent 70%); } .mp-count__in{ position:relative; max-width:var(--mp-max-wide); margin:0 auto; padding:clamp(36px,4vw,64px) var(--mp-gutter); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,3vw,48px); align-items:center; } .mp-count .mp-eyebrow{ color:var(--mp-gold-lt) !important; } .mp-count .mp-eyebrow::before{ background:var(--mp-gold-lt); } .mp-count__head h2{ color:#F6F1E7 !important; font-size:clamp(26px,2.6vw,40px) !important; line-height:1.1 !important; margin:12px 0 8px !important; } .mp-count__head p{ color:rgba(230,240,246,.7) !important; margin:0 !important; font-size:15px; } .mp-count__clock{ display:flex; align-items:stretch; gap:clamp(8px,1vw,16px); } .mp-count__lbl{ align-self:center; margin-right:6px; font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mp-gold-lt); white-space:nowrap; } .mp-count__cell{ min-width:clamp(64px,6vw,90px); padding:16px 10px 14px; text-align:center; border:1px solid rgba(227,200,142,.32); border-radius:2px; background:rgba(255,255,255,.035); } .mp-count__cell b{ display:block; font-family:'Manrope',sans-serif; font-weight:600; line-height:1; font-size:clamp(28px,2.8vw,42px); color:#F6F1E7; font-variant-numeric:tabular-nums; } .mp-count__cell b.is-tick{ animation:mp-tick .5s var(--mp-ease); } @keyframes mp-tick{ from{ transform:translateY(-8px); opacity:.25; } to{ transform:none; opacity:1; } } .mp-count__cell i{ display:block; margin-top:8px; font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(230,240,246,.6); } @media (max-width:900px){ .mp-count__in{ grid-template-columns:minmax(0,1fr); } .mp-count__clock{ flex-wrap:wrap; } .mp-count__lbl{ width:100%; margin:0 0 4px; } } /* --- 7. footer: every section is its own column, in one row ----------------- */ #cb-row--footer-main .row{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(24px,3vw,52px); margin:0 !important; width:auto !important; } #cb-row--footer-main .row::before, #cb-row--footer-main .row::after{ display:none !important; } #cb-row--footer-main .footer-column, #cb-row--footer-main .item--inner, #cb-row--footer-main .widget-area, #cb-row--footer-main .widget_custom_html > .textwidget{ display:contents !important; } #cb-row--footer-main .widget{ margin:0 !important; min-width:0; } #cb-row--footer-main #block-10{ display:none !important; } #site-footer .trapper{ margin-bottom:0 !important; } #site-footer ul, #site-footer .titleul, #site-footer .menu{ column-count:1 !important; columns:auto !important; display:block !important; float:none !important; width:auto !important; } #site-footer li{ display:block !important; float:none !important; width:auto !important; } @media (max-width:1000px){ #cb-row--footer-main .row{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ #cb-row--footer-main .row{ grid-template-columns:minmax(0,1fr); } } /* --- 7b. social icons, redrawn ---------------------------------------------- */ #site-footer .widget_mt_address_social_icons{ position:relative; } #site-footer .widget_mt_address_social_icons::before{ content:"Follow Us"; display:block; font-family:'Manrope',sans-serif; color:#F6F1E7; font-size:15px; line-height:1.3; letter-spacing:.06em; margin:0 0 18px; padding-bottom:14px; } html[lang^="tr"] #site-footer .widget_mt_address_social_icons::before{ content:"Bizi Takip Edin"; } #site-footer .widget_mt_address_social_icons::after{ content:""; position:absolute; left:0; top:calc(1.3em + 14px); width:28px; height:1px; background:var(--mp-gold); } #site-footer .social-links{ display:flex !important; flex-wrap:wrap; gap:12px; margin:0 !important; padding:0 !important; } #site-footer .social-links li{ margin:0 !important; } #site-footer .widget_mt_address_social_icons a, #site-footer .mt-social-icons a{ width:46px !important; height:46px !important; border-radius:50%; border:1px solid rgba(227,200,142,.42) !important; background:rgba(255,255,255,.03) !important; color:var(--mp-gold-lt) !important; display:inline-grid !important; place-items:center; transition:background .4s var(--mp-ease), border-color .4s var(--mp-ease), color .4s var(--mp-ease), transform .4s var(--mp-ease), box-shadow .4s var(--mp-ease); } #site-footer .widget_mt_address_social_icons a svg, #site-footer .mt-social-icons a svg{ width:18px !important; height:18px !important; fill:currentColor !important; display:block; } #site-footer .widget_mt_address_social_icons a:hover, #site-footer .mt-social-icons a:hover{ background:var(--mp-gold) !important; border-color:var(--mp-gold) !important; color:var(--mp-ink) !important; transform:translateY(-4px); box-shadow:0 14px 28px -14px rgba(227,200,142,.6); } /* the icons rise one after another (mp-stagger is added by the script) */ #site-footer .social-links.mp-stagger > li{ transition-duration:.7s; } /* ========================================================================= 43. CLIENT REVISIONS - round 4 (September 2026) no stray lines (scroll thread, bar underline, header rule, text-card rule), light text on every dark surface, film without controls, social icons fixed, catalog page redesigned ========================================================================= */ /* --- stray lines gone ---------------------------------------------------- */ .mp-progress{ display:none !important; } .mp-bar{ border-bottom:0 !important; } .mp-bar::after{ display:none !important; } #masthead-inner, html.mp-scrolled #masthead-inner, html:not(.mp-scrolled) #masthead-inner, html.mp-home:not(.mp-scrolled) #masthead-inner{ border-bottom:0 !important; box-shadow:0 10px 30px -22px rgba(10,31,41,.25) !important; } .mp-textcard::before{ display:none !important; } /* --- light text and numbers on dark surfaces ------------------------------ */ .mp-count :is(b, strong, h2, h3, p, i, span), .mp-hero :is(b, strong, h1, p, span), .mp-film :is(b, strong, h2, p, span), .bp-hero :is(b, strong, h1, p, span), .bp-cta :is(b, strong, h2, p), .mp-band :is(b, strong, h2, h3, p, span), .mc-form :is(b, strong, h2, p, label), .mp-form-done :is(b, strong) { color:#F6F1E7 !important; } .mp-count__cell i, .mp-count__head p, .mp-hero__copy p, .mp-film__head p, .bp-hero .bp-lead, .bp-cta p{ color:rgba(230,240,246,.72) !important; } .mp-count .mp-eyebrow, .mp-count__lbl{ color:var(--mp-gold-lt) !important; } /* --- film: autoplay loop, nothing to click ------------------------------------- */ .mp-film__stage.is-live iframe{ pointer-events:none; } .mp-film__shield{ position:absolute; inset:0; z-index:4; cursor:default; } .mp-film__stage.is-live{ cursor:default !important; } /* --- social icons: one clean row of circles -------------------------------- */ #site-footer .social-links a::before, #site-footer .social-links a::after, #site-footer .widget_mt_address_social_icons a::before, #site-footer .widget_mt_address_social_icons a::after{ display:none !important; content:none !important; } #site-footer .social-links{ flex-wrap:nowrap !important; gap:10px !important; } #site-footer .social-links li{ width:auto !important; } #site-footer .widget_mt_address_social_icons a, #site-footer .mt-social-icons a{ width:44px !important; height:44px !important; border-radius:50% !important; outline:0 !important; box-shadow:none !important; background-image:none !important; } #site-footer .widget_mt_address_social_icons a svg{ width:17px !important; height:17px !important; } /* --- catalog request page ---------------------------------------------------- */ .mp-cat{ display:grid !important; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,72px); align-items:start; max-width:var(--mp-max-wide); margin:0 auto; padding-block:clamp(16px,2vw,32px) clamp(40px,5vw,80px); } .mp-cat > .elementor-section{ min-width:0; } .mp-cat .elementor-container, .mp-cat .elementor-column, .mp-cat .elementor-widget-wrap{ padding:0 !important; } .mp-cat .elementor-widget{ margin:0 !important; } .mp-cat .elementor-widget-heading .elementor-widget-container{ text-align:left !important; } .mp-cat__eyebrow{ margin-bottom:16px; } html body .mp-cat__title{ font-size:clamp(32px,3.4vw,50px) !important; line-height:1.06 !important; margin:0 0 18px !important; text-align:left !important; } .mp-cat__lead{ font-size:16.5px; line-height:1.65; color:var(--mp-muted); max-width:46ch; margin:0 0 22px; } .mp-cat__list{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:10px; } .mp-cat__list li{ position:relative; padding-left:28px; font-size:14.5px; color:var(--mp-ink); line-height:1.5; } .mp-cat__list li::before{ content:""; position:absolute; left:0; top:.55em; width:16px; height:1px; background:var(--mp-gold); } .mp-cat__img{ aspect-ratio:4 / 3; border-radius:2px; } .mp-cat__img img{ width:100% !important; height:100% !important; object-fit:cover !important; } .mp-cat .mp-form-card{ background:var(--mp-ink) !important; border:1px solid rgba(227,200,142,.28) !important; border-radius:2px; padding:clamp(26px,3vw,44px) !important; box-shadow:0 30px 60px -40px rgba(10,31,41,.5); } .mp-cat .mp-form-card::before{ display:none !important; } .mp-cat__formhead{ margin-bottom:26px; } .mp-cat__formhead .mp-eyebrow{ color:var(--mp-gold-lt) !important; } .mp-cat__formhead .mp-eyebrow::before{ background:var(--mp-gold-lt); } .mp-cat__formhead h2{ color:#F6F1E7 !important; font-size:clamp(22px,2vw,28px) !important; margin:12px 0 6px !important; } .mp-cat__formhead p{ color:rgba(230,240,246,.68) !important; margin:0 !important; font-size:14.5px; } .mp-cat .mp-form label{ color:rgba(230,240,246,.72) !important; } .mp-cat .mp-form input[type=text], .mp-cat .mp-form input[type=email], .mp-cat .mp-form input[type=tel], .mp-cat .mp-form textarea{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(227,200,142,.28) !important; color:#F6F1E7 !important; border-radius:2px !important; transition:border-color .3s var(--mp-ease), background .3s var(--mp-ease), box-shadow .3s var(--mp-ease); } .mp-cat .mp-form input:focus, .mp-cat .mp-form textarea:focus{ border-color:var(--mp-gold-lt) !important; background:rgba(255,255,255,.08) !important; box-shadow:0 0 0 3px rgba(227,200,142,.18) !important; outline:0 !important; } .mp-cat .mp-form .wpcf7-submit{ background:var(--mp-gold) !important; color:var(--mp-ink) !important; border-color:var(--mp-gold) !important; font-weight:600 !important; letter-spacing:.2em !important; padding:16px 36px !important; transition:background .3s var(--mp-ease), transform .3s var(--mp-ease); } .mp-cat .mp-form .wpcf7-submit:hover{ background:#F0DCAE !important; transform:translateY(-2px); } .mp-cat .mp-form-note{ color:rgba(230,240,246,.72) !important; } .mp-cat .mp-form-note.is-err{ color:#F0A59B !important; } .mp-cat .mp-form-done{ border-color:rgba(227,200,142,.45); } .mp-cat .mp-form-done p{ color:rgba(230,240,246,.8) !important; } @media (max-width:900px){ .mp-cat{ grid-template-columns:minmax(0,1fr); } .mp-cat__img{ display:none; } } /* ========================================================================= 44. CLIENT REVISIONS - round 5 (September 2026) self-hosted film (no YouTube chrome), no white flash between pages ========================================================================= */ /* the film is a plain