:root { --mhb-bg: #050505; --mhb-bg-soft: #090b10; --mhb-surface: rgba(255, 255, 255, 0.025); --mhb-surface-strong: rgba(255, 255, 255, 0.055); --mhb-border: rgba(255, 255, 255, 0.07); --mhb-border-strong: rgba(255, 255, 255, 0.14); --mhb-text: #ffffff; --mhb-text-muted: rgba(255, 255, 255, 0.46); --mhb-text-dim: rgba(255, 255, 255, 0.3); /* Homepage-pattern surfaces — flip in light mode (see light token blocks). */ --mhb-surface-card: rgba(5, 5, 5, 0.82); --mhb-header-bg: rgba(0, 0, 0, 0.93); --mhb-gradient-text-start: #ffffff; --mhb-grid-line: rgba(255, 255, 255, 0.035); --mhb-blue: #3b82f6; --mhb-blue-soft: rgba(59, 130, 246, 0.16); --mhb-violet: #8b5cf6; --mhb-cyan: #22d3ee; --mhb-green: #22c55e; --mhb-font-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mhb-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace; } /* * Light palette tokens. Re-used by both the auto (OS) detection below and the * manual override. Accent colors (blue/violet/cyan/green) stay shared. */ .mhb-theme-light-vars, [data-mhb-theme="light"] { --mhb-bg: #ffffff; --mhb-bg-soft: #f5f6f8; --mhb-surface: rgba(0, 0, 0, 0.03); --mhb-surface-strong: rgba(0, 0, 0, 0.06); --mhb-border: rgba(0, 0, 0, 0.08); --mhb-border-strong: rgba(0, 0, 0, 0.16); --mhb-text: #0a0a0a; --mhb-text-muted: rgba(10, 10, 10, 0.55); --mhb-text-dim: rgba(10, 10, 10, 0.4); --mhb-surface-card: rgba(255, 255, 255, 0.92); --mhb-header-bg: rgba(255, 255, 255, 0.9); --mhb-gradient-text-start: #0a0a0a; --mhb-grid-line: rgba(0, 0, 0, 0.045); } /* * AUTO mode: follow the visitor's OS preference, UNLESS the document has an * explicit manual choice ([data-mhb-theme] on ). The :not() guard lets * the manual toggle win over the system setting. */ @media (prefers-color-scheme: light) { :root:not([data-mhb-theme="dark"]) { --mhb-bg: #ffffff; --mhb-bg-soft: #f5f6f8; --mhb-surface: rgba(0, 0, 0, 0.03); --mhb-surface-strong: rgba(0, 0, 0, 0.06); --mhb-border: rgba(0, 0, 0, 0.08); --mhb-border-strong: rgba(0, 0, 0, 0.16); --mhb-text: #0a0a0a; --mhb-text-muted: rgba(10, 10, 10, 0.55); --mhb-text-dim: rgba(10, 10, 10, 0.4); --mhb-surface-card: rgba(255, 255, 255, 0.92); --mhb-header-bg: rgba(255, 255, 255, 0.9); --mhb-gradient-text-start: #0a0a0a; --mhb-grid-line: rgba(0, 0, 0, 0.045); } } /* Floating manual toggle injected by frontend.js */ .mhb-theme-toggle { align-items: center; background: var(--mhb-surface-strong); border: 1px solid var(--mhb-border-strong); border-radius: 999px; bottom: 24px; color: var(--mhb-text); cursor: pointer; display: inline-flex; font-family: var(--mhb-font-mono); font-size: 0.7rem; gap: 8px; justify-content: center; left: 24px; letter-spacing: 0.12em; padding: 10px 16px; position: fixed; text-transform: uppercase; z-index: 60; backdrop-filter: blur(12px); } .mhb-theme-toggle:hover { background: var(--mhb-surface); border-color: var(--mhb-text-dim); } html { scroll-behavior: smooth; } html.mhb-lenis-ready { scroll-behavior: auto; } .mhb-homepage-pattern, .mhb-homepage-pattern *, .mhb-page, .mhb-page * { --wp--style--block-gap: 0; box-sizing: border-box; } :where(.wp-site-blocks) > .mhb-homepage-pattern, :where(.wp-site-blocks) > .wp-block-group.mhb-homepage-pattern, :where(.wp-site-blocks) > :is( .wp-block-mhb-site-header, .wp-block-mhb-hero, .wp-block-mhb-tech-marquee, .wp-block-mhb-services-grid, .wp-block-mhb-work-preview, .wp-block-mhb-process-strip, .wp-block-mhb-homepage-cta, .wp-block-mhb-site-footer ), .mhb-homepage-pattern, .mhb-homepage-pattern > *, .mhb-homepage-pattern main > *, .mhb-homepage-pattern .wp-block-mhb-site-header, .mhb-homepage-pattern .wp-block-mhb-hero, .mhb-homepage-pattern .wp-block-mhb-tech-marquee, .mhb-homepage-pattern .wp-block-mhb-services-grid, .mhb-homepage-pattern .wp-block-mhb-work-preview, .mhb-homepage-pattern .wp-block-mhb-process-strip, .mhb-homepage-pattern .wp-block-mhb-homepage-cta, .mhb-homepage-pattern .wp-block-mhb-site-footer { margin-block-start: 0 !important; margin-block-end: 0 !important; } :where(.wp-site-blocks) > * { margin-block-start:0rem; margin-block-end: 0; } .mhb-homepage-pattern { /* Token-based base so the homepage follows the light/dark toggle. The accent radials sit on top of the bg gradient and read fine on both palettes. */ background: radial-gradient(circle at 12% 4%, rgba(34, 211, 238, 0.13), transparent 28rem), radial-gradient(circle at 82% 14%, rgba(139, 92, 246, 0.18), transparent 32rem), radial-gradient(circle at 50% 52%, rgba(59, 130, 246, 0.09), transparent 42rem), linear-gradient(180deg, var(--mhb-bg) 0%, var(--mhb-bg-soft) 44%, var(--mhb-bg) 100%); color: var(--mhb-text); font-family: var(--mhb-font-display); isolation: isolate; overflow: clip; position: relative; } .mhb-homepage-pattern::before { background-image: linear-gradient(var(--mhb-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mhb-grid-line) 1px, transparent 1px); background-size: 72px 72px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 68%); opacity: 0.28; pointer-events: none; position: absolute; z-index: -2; } .mhb-homepage-pattern::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.36'/%3E%3C/svg%3E"); content: ""; inset: 0; opacity: 0.11; pointer-events: none; position: absolute; z-index: -1; } .mhb-animate-in { animation: mhb-fade-up 0.78s cubic-bezier(0.22, 1, 0.36, 1) both; } .mhb-animate-soft { animation: mhb-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } .mhb-delay-1 { animation-delay: 0.08s; } .mhb-delay-2 { animation-delay: 0.16s; } .mhb-delay-3 { animation-delay: 0.24s; } @keyframes mhb-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mhb-animate-in, .mhb-animate-soft, .mhb-marquee-track { animation: none !important; } } .mhb-homepage-pattern :is(.mhb-site-header, .mhb-hero, .mhb-tech-marquee, .mhb-home-section, .mhb-work-preview, .mhb-process-strip, .mhb-homepage-cta, .mhb-site-footer) { font-family: var(--mhb-font-display); } .mhb-homepage-pattern :is(.mhb-hero, .mhb-home-section, .mhb-work-preview, .mhb-homepage-cta, .mhb-site-footer) { background: transparent; } .mhb-homepage-pattern :is(.mhb-hero, .mhb-home-section, .mhb-work-preview, .mhb-homepage-cta) { position: relative; } /* Modified */ .mhb-homepage-pattern :is(.mhb-home-section, .mhb-work-preview, .mhb-homepage-cta)::before { /* background: radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.07), transparent 24rem), radial-gradient(circle at 100% 12%, rgba(139, 92, 246, 0.1), transparent 28rem); */ content: ""; inset: 0; opacity: 0.78; pointer-events: none; position: absolute; z-index: -1; } .mhb-homepage-pattern .mhb-site-header { background: var(--mhb-header-bg); box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28); } .mhb-homepage-pattern .mhb-hero { background: radial-gradient(circle at 78% 20%, rgba(34, 211, 238, 0.13), transparent 26rem), radial-gradient(circle at 22% 72%, rgba(139, 92, 246, 0.13), transparent 30rem), transparent; } .mhb-homepage-pattern :is(.mhb-service-card, .mhb-work-item, .mhb-process-card) { background: linear-gradient(145deg, var(--mhb-surface-strong), var(--mhb-surface)), var(--mhb-surface-card); box-shadow: inset 0 1px 0 var(--mhb-border); } .mhb-homepage-pattern .mhb-service-card:hover, .mhb-homepage-pattern .mhb-work-item:hover { border-color: var(--mhb-border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 80px rgba(0, 0, 0, 0.32); } .mhb-homepage-pattern .mhb-card-grid, .mhb-homepage-pattern .mhb-process-grid { background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.16)); } .mhb-homepage-pattern .mhb-tech-marquee, .mhb-homepage-pattern .mhb-process-strip { background: linear-gradient(90deg, rgba(34, 211, 238, 0.035), rgba(139, 92, 246, 0.045)), rgba(255, 255, 255, 0.012); } .mhb-homepage-pattern .gradient-text, .mhb-homepage-pattern .mhb-hero .gradient-text, .mhb-homepage-pattern .mhb-homepage-cta .gradient-text { background: linear-gradient(135deg, var(--mhb-gradient-text-start) 0%, var(--mhb-cyan) 32%, var(--mhb-blue) 62%, var(--mhb-violet) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mhb-homepage-pattern .mhb-hero .badge, .mhb-homepage-pattern .mhb-hero h1 span, .mhb-homepage-pattern .mhb-hero .desc, .mhb-homepage-pattern .mhb-hero .actions, .mhb-homepage-pattern .mhb-stats-grid, .mhb-homepage-pattern .mhb-section-header, .mhb-homepage-pattern .mhb-work-header, .mhb-homepage-pattern .mhb-homepage-cta > *, .mhb-homepage-pattern .mhb-site-footer__cta > * { animation: mhb-fade-up 0.78s cubic-bezier(0.22, 1, 0.36, 1) both; } .mhb-homepage-pattern .mhb-hero h1 span:nth-child(2), .mhb-homepage-pattern .mhb-hero .desc, .mhb-homepage-pattern .mhb-section-header, .mhb-homepage-pattern .mhb-work-header, .mhb-homepage-pattern .mhb-homepage-cta > :nth-child(2), .mhb-homepage-pattern .mhb-site-footer__cta > :nth-child(2) { animation-delay: 0.12s; } .mhb-homepage-pattern .mhb-hero h1 span:nth-child(3), .mhb-homepage-pattern .mhb-hero .actions, .mhb-homepage-pattern .mhb-homepage-cta > :nth-child(3), .mhb-homepage-pattern .mhb-site-footer__cta > :nth-child(3) { animation-delay: 0.22s; } .mhb-homepage-pattern .mhb-stats-grid { animation-delay: 0.32s; } .is-style-ocean :is(.mhb-hero .btn-primary, .mhb-homepage-cta a, .mhb-service-card a, .mhb-work-item a), .is-style-ocean:is(.wp-block-mhb-hero, .wp-block-mhb-homepage-cta, .wp-block-mhb-services-grid, .wp-block-mhb-work-preview) :is(.btn-primary, a) { background-color: #22d3ee; color: #041012; } .is-style-ocean :is(.gradient-text, .mhb-hero .gradient-text, .mhb-homepage-cta .gradient-text) { background: linear-gradient(135deg, var(--mhb-gradient-text-start) 0%, #22d3ee 52%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .is-style-emerald :is(.mhb-hero .btn-primary, .mhb-homepage-cta a, .mhb-service-card a, .mhb-work-item a), .is-style-emerald:is(.wp-block-mhb-hero, .wp-block-mhb-homepage-cta, .wp-block-mhb-services-grid, .wp-block-mhb-work-preview) :is(.btn-primary, a) { background-color: #22c55e; color: #041006; } .is-style-emerald :is(.gradient-text, .mhb-hero .gradient-text, .mhb-homepage-cta .gradient-text) { background: linear-gradient(135deg, var(--mhb-gradient-text-start) 0%, #22c55e 52%, #14b8a6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mhb-homepage-pattern :is(.mhb-service-card, .mhb-work-item, .mhb-process-card) { animation: mhb-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; } .mhb-homepage-pattern :is(.mhb-service-card, .mhb-work-item, .mhb-process-card):nth-child(2) { animation-delay: 0.08s; } .mhb-homepage-pattern :is(.mhb-service-card, .mhb-work-item, .mhb-process-card):nth-child(3) { animation-delay: 0.16s; } .mhb-homepage-pattern :is(.mhb-service-card, .mhb-process-card):nth-child(4) { animation-delay: 0.24s; } .mhb-homepage-pattern :is(h1, h2, h3) { text-wrap: balance; } .mhb-homepage-pattern p { text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { .mhb-homepage-pattern *, .mhb-homepage-pattern *::before, .mhb-homepage-pattern *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } .mhb-homepage-pattern .mhb-reveal, .mhb-page .mhb-reveal { animation: none !important; opacity: 0; transform: translateY(26px); transition: opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1), transform 0.78s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .mhb-homepage-pattern .mhb-reveal.mhb-is-visible, .mhb-page .mhb-reveal.mhb-is-visible { opacity: 1; transform: translateY(0); } .mhb-magnetic { transform: translate( var(--mhb-magnetic-x, 0), var(--mhb-magnetic-y, 0) ); transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease; will-change: transform; } .mhb-spotlight-card { overflow: hidden; position: relative; } .mhb-spotlight-card::after { background: radial-gradient( 260px circle at var(--mhb-spotlight-x, 50%) var(--mhb-spotlight-y, 50%), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.08) 34%, transparent 62% ); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity 0.24s ease; z-index: 0; } .mhb-spotlight-card:hover::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mhb-magnetic { transform: none !important; transition: none; } .mhb-spotlight-card::after { display: none; } } @media (prefers-reduced-motion: reduce) { .mhb-homepage-pattern .mhb-reveal, .mhb-page .mhb-reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- Homepage "Stacked from idea to launch" (stacking-cards) and "Testimonials" (moving-testimonials) are built on the shared .mhb-page system, which is hardcoded dark for the standalone inner pages. These overrides are scoped to the two block classes so they follow the light/dark toggle on the homepage without altering the inner pages. The extra class raises specificity so the rules win regardless of stylesheet order. ------------------------------------------------------------------------- */ .mhb-page.mhb-stacking-cards, .mhb-page.mhb-moving-testimonials { background: var(--mhb-bg); color: var(--mhb-text); } .mhb-stacking-cards .mhb-page-eyebrow, .mhb-moving-testimonials .mhb-page-eyebrow { color: var(--mhb-text-dim); } .mhb-stacking-cards .mhb-page-section-head h2, .mhb-moving-testimonials .mhb-page-section-head h2 { color: var(--mhb-text); } .mhb-stacking-cards .mhb-stack-card, .mhb-moving-testimonials .mhb-testimonial-card { background: linear-gradient(145deg, var(--mhb-surface-strong), var(--mhb-surface)), var(--mhb-surface-card); border-color: var(--mhb-border); } .mhb-stacking-cards .mhb-stack-card h3, .mhb-moving-testimonials .mhb-testimonial-card blockquote { color: var(--mhb-text); } .mhb-stacking-cards .mhb-stack-card p { color: var(--mhb-text-muted); } .mhb-moving-testimonials .mhb-testimonial-card figcaption, .mhb-moving-testimonials .mhb-testimonial-card figcaption em { color: var(--mhb-text-dim); } .mhb-moving-testimonials .mhb-testimonial-card figcaption strong { color: var(--mhb-text); }