/* ========================================================================== MBG Ridgeline, expanded visual system Molded By Grace Business Group LLC Loaded after mbg.css. Everything below is one system. The same four ideas repeat at every scale: a drawn gold contour, an incomplete arc, a hairline grid, and a single accent that is rationed. Nothing here is decorative for its own sake. ========================================================================== */ :root { /* Editorial display scale. Larger top end than the base scale so the display-to-body contrast reads as designed rather than as a template. */ --mbg-display: clamp(2.75rem, 1.5rem + 4.6vw, 5rem); --mbg-display-sm: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); /* One motion language. Every transition on the site uses one of these. */ --mbg-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mbg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mbg-dur-fast: 180ms; --mbg-dur: 340ms; --mbg-dur-slow: 620ms; --mbg-gutter: 24px; --mbg-content: 1160px; } /* -------------------------------------------------------------------------- 22. Motion system One reveal primitive, used everywhere. The hidden state is only applied when JavaScript has added .mbg-motion to , so if the script fails or is blocked the page renders fully visible with no hidden content. Reduced motion is handled twice: the script skips observing entirely, and the media query below neutralises the transforms regardless. -------------------------------------------------------------------------- */ .mbg-motion .mbg-reveal { opacity: 0; transform: translate3d(0, 18px, 0); will-change: opacity, transform; } .mbg-motion .mbg-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--mbg-dur-slow) var(--mbg-ease-out), transform var(--mbg-dur-slow) var(--mbg-ease-out); transition-delay: var(--mbg-delay, 0ms); will-change: auto; } /* Staggered children. The parent carries the group, each child its own step. Steps are capped at six so a long list never waits a noticeable time. */ .mbg-motion .mbg-stagger > * { opacity: 0; transform: translate3d(0, 16px, 0); } .mbg-motion .mbg-stagger.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--mbg-dur-slow) var(--mbg-ease-out), transform var(--mbg-dur-slow) var(--mbg-ease-out); } .mbg-motion .mbg-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(2) { transition-delay: 90ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(4) { transition-delay: 270ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(n + 6) { transition-delay: 450ms; } /* A gold rule that draws itself in when its section arrives. */ .mbg-motion .mbg-rule > .elementor-widget-container::before, .mbg-motion .mbg-rule::before, .mbg-motion .mbg-ruled::before { width: 0; } .mbg-motion .mbg-rule.is-in > .elementor-widget-container::before, .mbg-motion .mbg-rule.is-in::before, .mbg-motion .mbg-ruled.is-in::before { width: 40px; transition: width var(--mbg-dur-slow) var(--mbg-ease-out) 60ms; } /* The hero ridgeline draws once on entry. Staggered so the contours settle in sequence rather than arriving as one block. */ .mbg-ridge-path { stroke-dasharray: var(--len, 2400); stroke-dashoffset: var(--len, 2400); } .mbg-motion .mbg-ridge.is-in .mbg-ridge-path { animation: mbg-draw 2400ms var(--mbg-ease-out) forwards; animation-delay: var(--mbg-delay, 0ms); } /* Without the script, or with motion reduced, the contours are simply drawn. */ html:not(.mbg-motion) .mbg-ridge-path { stroke-dashoffset: 0; } @keyframes mbg-draw { to { stroke-dashoffset: 0; } } /* The incomplete arc behind the ridge. Echoes the arc in the MBG mark without reproducing it. */ .mbg-arc-path { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); } .mbg-motion .mbg-ridge.is-in .mbg-arc-path { animation: mbg-draw 2800ms var(--mbg-ease-out) 200ms forwards; } html:not(.mbg-motion) .mbg-arc-path { stroke-dashoffset: 0; } /* Slow drift on decorative background layers only. Never on content. */ .mbg-motion .mbg-drift { animation: mbg-drift 34s ease-in-out infinite alternate; } @keyframes mbg-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16px, -10px, 0); } } /* An arrow that moves on hover. Used on every secondary link on the site so the gesture is learned once. */ .mbg-arrow { display: inline-block; margin-left: 0.45em; transition: transform var(--mbg-dur) var(--mbg-ease); } a:hover .mbg-arrow, a:focus-visible .mbg-arrow, .elementor-button:hover .mbg-arrow { transform: translateX(5px); } /* Everything animated is switched off together, in one place. */ @media (prefers-reduced-motion: reduce) { .mbg-motion .mbg-reveal, .mbg-motion .mbg-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } .mbg-ridge-path, .mbg-arc-path { stroke-dashoffset: 0 !important; animation: none !important; } .mbg-motion .mbg-drift { animation: none !important; } .mbg-motion .mbg-rule > .elementor-widget-container::before, .mbg-motion .mbg-rule::before, .mbg-motion .mbg-ruled::before { width: 40px !important; transition: none !important; } .mbg-arrow { transition: none !important; } } /* -------------------------------------------------------------------------- 23. The ridgeline motif A layered contour drawing used in the hero, in section dividers, and as a quiet background texture. It is always decorative, always aria-hidden, and never carries information. -------------------------------------------------------------------------- */ .mbg-ridge { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mbg-ridge svg { display: block; width: 100%; height: 100%; } .mbg-ridge-path, .mbg-arc-path { fill: none; vector-effect: non-scaling-stroke; } /* On light grounds the contours sit just above the background so they read as texture rather than as content. */ .mbg-ridge-light .mbg-ridge-path { stroke: var(--mbg-accent); stroke-width: 1.25; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(1) { opacity: 0.55; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(2) { opacity: 0.34; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(3) { opacity: 0.22; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(4) { opacity: 0.14; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(5) { opacity: 0.09; } .mbg-ridge-light .mbg-arc-path { stroke: var(--mbg-accent); stroke-width: 1; opacity: 0.28; } .mbg-ridge-dark .mbg-ridge-path { stroke: var(--mbg-accent-light); stroke-width: 1.25; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(1) { opacity: 0.5; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(2) { opacity: 0.32; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(3) { opacity: 0.2; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(4) { opacity: 0.13; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(5) { opacity: 0.08; } .mbg-ridge-dark .mbg-arc-path { stroke: var(--mbg-accent-light); stroke-width: 1; opacity: 0.24; } /* A hairline grid, one of the four repeating ideas. Sits under the ridge in the hero and under the manifesto panel. */ .mbg-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(16, 29, 45, 0.055) 1px, transparent 1px); background-size: calc(100% / 6) 100%; } .mbg-band-dark .mbg-grid-lines { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px); } /* Fine grain. One tiny inline SVG, no image request, no library. Only on the navy bands, where flat colour would otherwise look plastic. */ .mbg-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); } /* Section transition. A drawn contour that separates one band from the next in place of a plain border. */ .mbg-divider { position: relative; height: 96px; overflow: hidden; pointer-events: none; } .mbg-divider svg { display: block; width: 100%; height: 100%; } @media (max-width: 767px) { .mbg-divider { height: 60px; } } /* -------------------------------------------------------------------------- 24. Editorial typography -------------------------------------------------------------------------- */ .mbg-display { font-family: var(--mbg-font-heading); font-size: var(--mbg-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.018em; margin: 0; } .mbg-display-sm { font-family: var(--mbg-font-heading); font-size: var(--mbg-display-sm); font-weight: 600; line-height: 1.06; letter-spacing: -0.014em; margin: 0; } /* Emphasis inside a headline stays in the same family, as italic. Never a second typeface. */ .mbg-em { font-style: italic; } /* The one place gold is allowed to touch a letterform: a single word in a display heading, at display size, where it clears contrast comfortably. */ .mbg-gold { color: var(--mbg-accent-deep); } .mbg-band-dark .mbg-gold { color: var(--mbg-accent-light); } .mbg-lede-lg { font-size: clamp(1.1875rem, 1.06rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--mbg-ink-muted); max-width: 40ch; } .mbg-band-dark .mbg-lede-lg { color: #C8CFD9; } /* Editorial page introduction, used at the top of every page except home. */ .mbg-page-head { position: relative; overflow: hidden; padding-top: clamp(64px, 4vw + 40px, 116px); padding-bottom: clamp(48px, 3vw + 30px, 88px); border-bottom: 1px solid var(--mbg-line); } .mbg-page-head .mbg-page-head-inner { position: relative; z-index: 1; } .mbg-page-head h1 { margin: 12px 0 20px; } /* Pull quote and belief statement. Used at most once per page. */ .mbg-pullquote { position: relative; margin: 0; padding-left: 28px; border-left: 2px solid var(--mbg-accent); font-family: var(--mbg-font-heading); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; color: var(--mbg-ink); } .mbg-band-dark .mbg-pullquote { border-left-color: var(--mbg-accent-light); color: #FFFFFF; } .mbg-pullquote cite { display: block; margin-top: 16px; font-family: var(--mbg-font-body); font-size: 0.875rem; font-style: normal; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mbg-ink-muted); } .mbg-band-dark .mbg-pullquote cite { color: var(--mbg-accent-light); } /* -------------------------------------------------------------------------- 25. Layout primitives -------------------------------------------------------------------------- */ .mbg-wrap { width: 100%; max-width: var(--mbg-content); margin-inline: auto; padding-inline: var(--mbg-gutter); } .mbg-section { position: relative; padding-top: var(--mbg-space-xl); padding-bottom: var(--mbg-space-xl); } .mbg-section-tight { padding-top: var(--mbg-space-lg); padding-bottom: var(--mbg-space-lg); } /* The editorial split: a sticky label column beside a reading column. This is the layout that makes the long pages feel composed rather than stacked. */ .mbg-split { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(32px, 4vw, 80px); align-items: start; } .mbg-split-label { position: sticky; top: 112px; } .mbg-split-body > * + * { margin-top: 22px; } .mbg-split-body p { max-width: 62ch; } @media (max-width: 900px) { .mbg-split { grid-template-columns: 1fr; gap: 20px; } /* Sticky must disengage before the label and the body can collide. */ .mbg-split-label { position: static; top: auto; } } /* Plain column layouts for shorter passages. */ .mbg-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); } .mbg-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); } .mbg-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); } @media (max-width: 1024px) { .mbg-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .mbg-cols-2, .mbg-cols-3, .mbg-cols-4 { grid-template-columns: 1fr; } } /* Section heading block, used at the top of most sections. */ .mbg-section-head { max-width: 52ch; margin-bottom: clamp(36px, 4vw, 64px); } .mbg-section-head .mbg-eyebrow { display: block; margin-bottom: 14px; } .mbg-section-head h2 { margin: 0 0 18px; } .mbg-section-head p { color: var(--mbg-ink-muted); max-width: 60ch; margin-bottom: 0; } .mbg-band-dark .mbg-section-head p { color: #C8CFD9; } /* A gold rule available on any element rather than only on Elementor widgets. */ .mbg-ruled::before { content: ""; display: block; width: 40px; height: 2px; background: var(--mbg-accent); margin-bottom: 20px; } .mbg-band-dark .mbg-ruled::before { background: var(--mbg-accent-light); } /* -------------------------------------------------------------------------- 26. Homepage hero Text-led. The mark is present only as a watermark behind the contours, at an opacity where it registers as texture and never competes with the H1. -------------------------------------------------------------------------- */ .mbg-hero-v2 { position: relative; overflow: hidden; background: var(--mbg-bg); border-bottom: 1px solid var(--mbg-line); padding-top: clamp(56px, 5vw + 24px, 104px); padding-bottom: clamp(64px, 5vw + 28px, 112px); } .mbg-hero-v2 .mbg-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(32px, 4vw, 72px); align-items: center; } .mbg-hero-copy-v2 { max-width: 34ch; } .mbg-hero-copy-v2 .mbg-eyebrow { display: block; margin-bottom: 20px; } .mbg-hero-copy-v2 h1 { font-size: var(--mbg-display); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 26px; } .mbg-hero-copy-v2 .mbg-hero-lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--mbg-ink-muted); max-width: 46ch; margin: 0 0 32px; } /* The visual half. A layered composition: watermark, contours, arc, grid. */ .mbg-hero-visual { position: relative; aspect-ratio: 5 / 4; min-height: 300px; } @media (max-width: 1024px) { .mbg-hero-visual { aspect-ratio: 16 / 9; min-height: 220px; } } .mbg-hero-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: min(58%, 300px); opacity: 0.07; z-index: 0; } .mbg-hero-watermark img { display: block; width: 100%; height: auto; } /* Scroll cue. A drawn line rather than a bouncing chevron. */ .mbg-scrollcue { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(36px, 4vw, 60px); font-family: var(--mbg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mbg-ink-muted); text-decoration: none; min-height: 44px; } .mbg-scrollcue::after { content: ""; width: 56px; height: 1px; background: var(--mbg-accent); transform-origin: left center; } .mbg-motion .mbg-scrollcue::after { animation: mbg-cue 3.2s var(--mbg-ease) 1.4s infinite; } @keyframes mbg-cue { 0%, 62%, 100% { transform: scaleX(1); opacity: 0.85; } 30% { transform: scaleX(1.5); opacity: 1; } } .mbg-scrollcue:hover { color: var(--mbg-ink); } .mbg-scrollcue:hover::after { background: var(--mbg-ink); } @media (prefers-reduced-motion: reduce) { .mbg-motion .mbg-scrollcue::after { animation: none !important; } } @media (max-width: 1024px) { .mbg-hero-v2 .mbg-hero-inner { grid-template-columns: 1fr; gap: 32px; } .mbg-hero-copy-v2 { max-width: 44ch; } } @media (max-width: 767px) { .mbg-hero-visual { order: 2; min-height: 180px; aspect-ratio: 2 / 1; } .mbg-hero-copy-v2 { order: 1; } } /* -------------------------------------------------------------------------- 27. Content bands -------------------------------------------------------------------------- */ .mbg-band { position: relative; overflow: hidden; } .mbg-band > .mbg-wrap { position: relative; z-index: 1; } .mbg-band-dark.mbg-band { isolation: isolate; } /* -------------------------------------------------------------------------- 28. Manifesto panel The one place on the site where type is allowed to run large over a navy ground with nothing else competing. -------------------------------------------------------------------------- */ .mbg-manifesto { position: relative; overflow: hidden; padding-top: clamp(72px, 6vw, 128px); padding-bottom: clamp(72px, 6vw, 128px); } .mbg-manifesto-inner { position: relative; z-index: 2; max-width: 24ch; } .mbg-manifesto p { font-family: var(--mbg-font-heading); font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; color: #FFFFFF; margin: 0; } .mbg-manifesto .mbg-manifesto-foot { font-family: var(--mbg-font-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: #C8CFD9; margin-top: 28px; max-width: 52ch; } /* -------------------------------------------------------------------------- 29. Brand cards, refined Layered hover: the border warms, the card lifts one pixel, the gold top rule brightens, and the arrow travels. Four small changes, one gesture. -------------------------------------------------------------------------- */ .mbg-brandcard { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--mbg-bg); border: 1px solid var(--mbg-line); border-top: 3px solid var(--mbg-accent); border-radius: var(--mbg-radius); overflow: hidden; transition: border-color var(--mbg-dur) var(--mbg-ease), transform var(--mbg-dur) var(--mbg-ease); } .mbg-brandcard:hover, .mbg-brandcard:focus-within { border-color: #C4C9D1; border-top-color: var(--mbg-accent-light); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .mbg-brandcard:hover, .mbg-brandcard:focus-within { transform: none; } } .mbg-brandcard .mbg-logo-slot { position: relative; overflow: hidden; } /* A contour wash inside the logo slot ties the card to the hero motif. */ .mbg-brandcard .mbg-logo-slot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(120% 90% at 50% 130%, rgba(166, 123, 56, 0.13) 0%, rgba(166, 123, 56, 0) 62%); pointer-events: none; } .mbg-brandcard .mbg-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--mbg-space-md); } .mbg-brandcard .mbg-card-body > .mbg-card-foot { margin-top: auto; padding-top: 20px; } /* Category label. All caps, letterspaced, rationed to card headers. */ .mbg-cat { display: block; font-family: var(--mbg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mbg-accent-deep); margin: 0 0 10px; } .mbg-band-dark .mbg-cat { color: var(--mbg-accent-light); } /* Status, stated in words. Never colour alone. */ .mbg-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mbg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--mbg-ink-muted); border: 1px solid var(--mbg-line); border-radius: var(--mbg-radius-sm); padding: 6px 12px; background: var(--mbg-surface); } .mbg-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mbg-accent); flex: 0 0 auto; } .mbg-band-dark .mbg-status { color: #C8CFD9; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); } .mbg-band-dark .mbg-status::before { background: var(--mbg-accent-light); } /* -------------------------------------------------------------------------- 30. Brand profiles, Our Brands page Long editorial sections rather than three separate routes. Alternating sides give the page its rhythm. -------------------------------------------------------------------------- */ .mbg-profile { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 80px); align-items: start; } .mbg-profile-alt .mbg-profile-visual { order: 2; } .mbg-profile-visual { position: sticky; top: 112px; } .mbg-profile-mark { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 32px; background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-top: 3px solid var(--mbg-accent); border-radius: var(--mbg-radius); overflow: hidden; text-align: center; } .mbg-profile-mark img { max-height: 110px; width: auto; } .mbg-profile-mark .mbg-logo-slot-name { position: relative; z-index: 1; font-family: var(--mbg-font-heading); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.2; color: var(--mbg-ink); margin: 0; } .mbg-profile-body > * + * { margin-top: 20px; } .mbg-profile-body p { max-width: 62ch; color: var(--mbg-ink-muted); } .mbg-profile-body h2 { margin: 0; } .mbg-profile-body h3 { font-family: var(--mbg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mbg-ink); margin: 0; } @media (max-width: 900px) { .mbg-profile { grid-template-columns: 1fr; gap: 26px; } .mbg-profile-alt .mbg-profile-visual { order: 0; } .mbg-profile-visual { position: static; top: auto; } .mbg-profile-mark { min-height: 150px; padding: 24px; } } /* -------------------------------------------------------------------------- 31. Project cards, Our Work Deliberately a different object from a brand card. No gold top rule, a written ownership line, and a service tag row. Conflating the two is the most damaging error this site could make, so they must not look alike. -------------------------------------------------------------------------- */ .mbg-projectcard { display: flex; flex-direction: column; height: 100%; background: var(--mbg-bg); border: 1px solid var(--mbg-line); border-radius: var(--mbg-radius); overflow: hidden; transition: border-color var(--mbg-dur) var(--mbg-ease); } .mbg-projectcard:hover, .mbg-projectcard:focus-within { border-color: #B9BFC8; } .mbg-projectcard .mbg-card-body { padding: var(--mbg-space-md); flex: 1 1 auto; } .mbg-projectcard .mbg-ownership { display: block; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--mbg-line); } .mbg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .mbg-tags li { font-family: var(--mbg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--mbg-ink-muted); border: 1px solid var(--mbg-line); border-radius: var(--mbg-radius-sm); padding: 5px 10px; background: var(--mbg-surface); } .mbg-band-dark .mbg-tags li { color: #C8CFD9; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); } /* An empty slot that is honest about being empty rather than being filled with an invented project. */ .mbg-slot-open { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 180px; padding: var(--mbg-space-md); border: 1px dashed var(--mbg-line); border-radius: var(--mbg-radius); background: transparent; } .mbg-slot-open p { color: var(--mbg-ink-muted); margin: 0; max-width: 34ch; } /* -------------------------------------------------------------------------- 32. Numbered structure list Used where the reference sites would put a statistics band. It carries the same visual rhythm without asserting a single number MBG cannot support. -------------------------------------------------------------------------- */ .mbg-numbered { list-style: none; margin: 0; padding: 0; counter-reset: mbg-n; } .mbg-numbered > li { position: relative; padding: 26px 0 26px 62px; border-top: 1px solid var(--mbg-line); } .mbg-numbered > li:last-child { border-bottom: 1px solid var(--mbg-line); } .mbg-numbered > li::before { content: counter(mbg-n, decimal-leading-zero); counter-increment: mbg-n; position: absolute; left: 0; top: 26px; font-family: var(--mbg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--mbg-accent-deep); } .mbg-numbered h3 { margin: 0 0 8px; font-size: 1.1875rem; } .mbg-numbered p { margin: 0; color: var(--mbg-ink-muted); max-width: 62ch; } .mbg-band-dark .mbg-numbered > li { border-top-color: rgba(255, 255, 255, 0.16); } .mbg-band-dark .mbg-numbered > li:last-child { border-bottom-color: rgba(255, 255, 255, 0.16); } .mbg-band-dark .mbg-numbered > li::before { color: var(--mbg-accent-light); } .mbg-band-dark .mbg-numbered p { color: #C8CFD9; } @media (max-width: 480px) { .mbg-numbered > li { padding-left: 0; padding-top: 44px; } .mbg-numbered > li::before { top: 20px; } } /* -------------------------------------------------------------------------- 33. Header refinement on scroll The header never changes height, so nothing below it moves. Only the background, the hairline and the mark's scale respond to scroll. That keeps cumulative layout shift at zero. -------------------------------------------------------------------------- */ .mbg-header { transition: background-color var(--mbg-dur) var(--mbg-ease), border-color var(--mbg-dur) var(--mbg-ease), box-shadow var(--mbg-dur) var(--mbg-ease); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); background: rgba(255, 255, 255, 0.86); } .mbg-header.is-scrolled { background: rgba(255, 255, 255, 0.97); border-bottom-color: #CDD3DB; box-shadow: 0 1px 14px rgba(16, 29, 45, 0.07); } .mbg-header .mbg-logo-mark img { transition: transform var(--mbg-dur) var(--mbg-ease); transform-origin: left center; } .mbg-header.is-scrolled .mbg-logo-mark img { transform: scale(0.9); } /* A gold read-progress hairline along the bottom edge of the header. Decorative, never the only indication of anything. */ .mbg-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--mbg-progress, 0%); background: var(--mbg-accent); transition: width 120ms linear; pointer-events: none; } /* Navigation microinteraction: the underline grows from the left. */ .mbg-header .elementor-nav-menu--main .elementor-item { position: relative; } .mbg-header .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--mbg-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--mbg-dur) var(--mbg-ease); } .mbg-header .elementor-nav-menu--main .elementor-item:hover::after, .mbg-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); } /* The old inset shadow underline is replaced by the animated rule above. */ .mbg-header .elementor-nav-menu--main .elementor-item.elementor-item-active { box-shadow: none; } /* The dropdown panel has its own ground, so the rule must not bleed into it. */ .mbg-header .elementor-nav-menu--dropdown .elementor-item::after { display: none; } @media (prefers-reduced-motion: reduce) { .mbg-header, .mbg-header .mbg-logo-mark img, .mbg-header .elementor-nav-menu--main .elementor-item::after, .mbg-header::after { transition: none !important; } } /* -------------------------------------------------------------------------- 34. Footer composition -------------------------------------------------------------------------- */ .mbg-footer { position: relative; overflow: hidden; } .mbg-footer > * { position: relative; z-index: 1; } .mbg-footer-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; } .mbg-footer-lockup img { width: 54px; height: auto; display: block; flex: 0 0 auto; } .mbg-footer-lockup .mbg-wordmark-name { color: #FFFFFF; font-size: 1.375rem; } .mbg-footer-lockup .mbg-wordmark-sub { color: var(--mbg-accent-light); } .mbg-footer-lockup:hover .mbg-wordmark-name { color: var(--mbg-accent-light); } /* A drawn contour along the top edge of the footer, so the footer belongs to the same drawing as the hero. */ .mbg-footer-ridge { position: absolute; top: 0; left: 0; right: 0; height: 150px; pointer-events: none; z-index: 0; } .mbg-footer-ridge svg { display: block; width: 100%; height: 100%; } /* -------------------------------------------------------------------------- 35. Contact band and closing CTA -------------------------------------------------------------------------- */ .mbg-cta-band { position: relative; overflow: hidden; padding-top: clamp(64px, 5vw, 104px); padding-bottom: clamp(64px, 5vw, 104px); } .mbg-cta-band .mbg-cta-inner { position: relative; z-index: 2; max-width: 46ch; } .mbg-cta-band h2 { margin: 0 0 18px; } .mbg-cta-band p { color: #C8CFD9; margin: 0 0 30px; max-width: 52ch; } /* -------------------------------------------------------------------------- 36. Utilities and safety -------------------------------------------------------------------------- */ .mbg-hr { border: 0; border-top: 1px solid var(--mbg-line); margin: clamp(40px, 5vw, 72px) 0; } .mbg-band-dark .mbg-hr { border-top-color: rgba(255, 255, 255, 0.16); } .mbg-stack-sm > * + * { margin-top: 14px; } .mbg-stack > * + * { margin-top: 22px; } .mbg-stack-lg > * + * { margin-top: 36px; } /* Decorative layers are hidden from assistive technology in markup with aria-hidden, and from print here. */ @media print { .mbg-ridge, .mbg-grid-lines, .mbg-divider, .mbg-hero-watermark, .mbg-footer-ridge, .mbg-scrollcue { display: none !important; } } /* Nothing on this site scrolls sideways. Belt and braces for the absolutely positioned decorative layers above. */ .mbg-hero-v2, .mbg-band, .mbg-page-head, .mbg-manifesto, .mbg-cta-band { max-width: 100vw; } /* Anchor targets clear the sticky header. */ [id] { scroll-margin-top: 104px; } @media (max-width: 767px) { :root { --mbg-gutter: 20px; } .mbg-split-body p, .mbg-profile-body p { max-width: none; } } @media (max-width: 360px) { :root { --mbg-gutter: 16px; } }