/* ========================================================================== MymenTech design system Palette taken from Branding/mymentech-mark.svg and favicon.svg: blue #2F6BFF → #0F3BD6 cyan #22E3FF → #0A8CF0 navy #0B1033 Headings: Poppins (matches the wordmark). Body: Inter. ========================================================================== */ :root { --mt-blue-400: #4d84ff; --mt-blue-500: #2f6bff; --mt-blue-600: #1d4fe8; --mt-blue-700: #0f3bd6; --mt-blue-800: #0a2a9e; --mt-cyan-300: #7df0ff; --mt-cyan-400: #22e3ff; --mt-cyan-500: #0ac4f0; --mt-sky-500: #0a8cf0; --mt-navy-950: #060b24; --mt-navy-900: #0b1033; --mt-navy-800: #111a4a; --mt-navy-700: #1a2a6e; --mt-ink: #0b1033; --mt-text: #334155; --mt-muted: #64748b; --mt-line: #e3e8f5; --mt-bg: #ffffff; --mt-bg-alt: #f4f7ff; --mt-bg-soft: #eef3ff; --mt-success: #16a34a; --mt-warning: #f59e0b; --mt-danger: #dc2626; --mt-grad: linear-gradient(135deg, var(--mt-blue-500) 0%, var(--mt-blue-700) 100%); --mt-grad-accent: linear-gradient(135deg, var(--mt-cyan-400) 0%, var(--mt-sky-500) 100%); --mt-grad-brand: linear-gradient(135deg, #1d4fe8 0%, #0a8cf0 100%); --mt-grad-text: linear-gradient(90deg, #2f6bff 0%, #22e3ff 100%); --mt-grad-dark: linear-gradient(160deg, #0b1033 0%, #0a1a5c 60%, #0f3bd6 140%); --mt-font-head: "Poppins", "Sora", "Segoe UI", sans-serif; --mt-font-body: "Inter", "Segoe UI", system-ui, sans-serif; --mt-font-mono: "JetBrains Mono", Menlo, Consolas, monospace; --mt-radius-sm: 8px; --mt-radius: 14px; --mt-radius-lg: 22px; --mt-radius-pill: 999px; --mt-shadow-sm: 0 1px 2px rgba(11, 16, 51, 0.06), 0 1px 3px rgba(11, 16, 51, 0.08); --mt-shadow: 0 10px 30px -12px rgba(11, 16, 51, 0.18); --mt-shadow-lg: 0 30px 60px -20px rgba(15, 59, 214, 0.28); --mt-ring: 0 0 0 4px rgba(47, 107, 255, 0.18); --mt-container: 1200px; --mt-gutter: 24px; --mt-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Elementor global color aliases */ --e-global-color-primary: var(--mt-blue-600); --e-global-color-secondary: var(--mt-navy-900); --e-global-color-text: var(--mt-text); --e-global-color-accent: var(--mt-cyan-500); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.mt-site { font-family: var(--mt-font-body); color: var(--mt-text); background: var(--mt-bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } body.mt-site h1, body.mt-site h2, body.mt-site h3, body.mt-site h4, body.mt-site h5, body.mt-site h6, .mt-h1, .mt-h2, .mt-h3, .mt-h4 { font-family: var(--mt-font-head); color: var(--mt-ink); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; } .mt-h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.8rem); font-weight: 800; } .mt-h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); } .mt-h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); } .mt-h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; } body.mt-site a { color: var(--mt-blue-600); text-decoration: none; transition: color .2s; } body.mt-site a:hover { color: var(--mt-blue-700); } body.mt-site p { margin: 0 0 1em; } body.mt-site img { max-width: 100%; height: auto; } .mt-container { max-width: var(--mt-container); margin: 0 auto; padding: 0 var(--mt-gutter); } .mt-narrow { max-width: 820px; } .mt-center { text-align: center; } .mt-muted { color: var(--mt-muted); } .mt-small { font-size: .9rem; } .mt-lead { font-size: 1.125rem; color: var(--mt-muted); max-width: 70ch; } .mt-align-center .mt-lead { margin-left: auto; margin-right: auto; } .mt-gradient-text { background: var(--mt-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sections */ .mt-section { padding: clamp(56px, 8vw, 104px) 0; } .mt-section-tight { padding: 32px 0; } .mt-section-alt { background: var(--mt-bg-alt); } .mt-section-dark { background: var(--mt-grad-dark); color: #c7d2fe; } .mt-section-dark .mt-h2, .mt-section-dark .mt-h3, .mt-section-dark .mt-h4 { color: #fff; } .mt-section-head { margin-bottom: 44px; } .mt-section-head.mt-align-center { text-align: center; } .mt-section-head.mt-align-center .mt-eyebrow { justify-content: center; } .mt-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mt-font-head); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mt-blue-600); margin-bottom: 12px; } .mt-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--mt-grad-accent); } .mt-eyebrow-light { color: var(--mt-cyan-400); } .mt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } /* Buttons */ .mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--mt-radius-pill); font-family: var(--mt-font-head); font-weight: 600; font-size: .95rem; line-height: 1; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .25s var(--mt-ease), box-shadow .25s, background .25s, color .25s, border-color .25s; } .mt-btn:hover { transform: translateY(-2px); } .mt-btn .mt-icon { transition: transform .25s var(--mt-ease); } .mt-btn:hover .mt-icon-arrow { transform: translateX(3px); } .mt-btn-primary { background: var(--mt-grad-brand); color: #fff !important; box-shadow: 0 10px 24px -10px rgba(29, 79, 232, .6); } .mt-btn-primary:hover { box-shadow: 0 16px 30px -10px rgba(29, 79, 232, .7); } .mt-btn-accent { background: var(--mt-grad-accent); color: var(--mt-navy-900) !important; } .mt-btn-light { background: #fff; color: var(--mt-blue-700) !important; box-shadow: var(--mt-shadow); } .mt-btn-outline { background: transparent; color: var(--mt-blue-600) !important; border-color: var(--mt-blue-500); } .mt-btn-outline:hover { background: var(--mt-bg-soft); } .mt-btn-ghost-light { background: rgba(255,255,255,.08); color: #fff !important; border-color: rgba(255,255,255,.25); backdrop-filter: blur(6px); } .mt-btn-ghost-light:hover { background: rgba(255,255,255,.16); } .mt-btn-dark { background: var(--mt-navy-900); color: #fff !important; } .mt-btn-sm { padding: 10px 18px; font-size: .85rem; } .mt-btn-lg { padding: 18px 34px; font-size: 1.05rem; } .mt-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .mt-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--mt-blue-600); font-size: .95rem; } .mt-link-arrow .mt-icon { transition: transform .2s; } a:hover .mt-link-arrow .mt-icon, .mt-link-arrow:hover .mt-icon { transform: translateX(3px); } .mt-icon-link { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--mt-bg-soft); color: var(--mt-blue-600); } /* Hero */ .mt-hero { position: relative; overflow: hidden; color: #c7d2fe; background: var(--mt-grad-dark); padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 8vw, 100px); } .mt-hero-inner { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); } .mt-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 85% 10%, rgba(34, 227, 255, .22), transparent 60%), radial-gradient(500px 260px at 10% 90%, rgba(47, 107, 255, .35), transparent 60%); } .mt-hero-glow::after { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); } .mt-hero .mt-container { position: relative; } .mt-hero .mt-h1 { color: #fff; } .mt-hero .mt-lead { color: #c7d2fe; } .mt-hero-content { max-width: 820px; } .mt-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .mt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--mt-radius-pill); background: rgba(255,255,255,.1); color: #fff; font-size: .85rem; font-weight: 600; border: 1px solid rgba(255,255,255,.14); } .mt-badge-accent { background: rgba(34, 227, 255, .14); color: var(--mt-cyan-300); border-color: rgba(34,227,255,.3); } .mt-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: #94a3b8; margin-bottom: 20px; } .mt-breadcrumbs a { color: #c7d2fe; } .mt-breadcrumbs a:hover { color: #fff; } .mt-crumb-sep { opacity: .5; } .mt-main > .mt-section:first-child { padding-top: 64px; } /* Grid + cards */ .mt-grid { display: grid; gap: 28px; } .mt-grid-2 { grid-template-columns: repeat(2, 1fr); } .mt-grid-3 { grid-template-columns: repeat(3, 1fr); } .mt-grid-4 { grid-template-columns: repeat(4, 1fr); } .mt-card { background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius-lg); padding: 30px; box-shadow: var(--mt-shadow-sm); transition: transform .3s var(--mt-ease), box-shadow .3s, border-color .3s; display: flex; flex-direction: column; gap: 12px; color: var(--mt-text); position: relative; } a.mt-card:hover, .mt-card.is-hover:hover { transform: translateY(-6px); box-shadow: var(--mt-shadow); border-color: rgba(47,107,255,.35); color: var(--mt-text); } .mt-card p { margin: 0; color: var(--mt-muted); } .mt-card .mt-h4 { margin: 0; } .mt-card-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--mt-grad-brand); color: #fff; box-shadow: 0 10px 20px -10px rgba(29,79,232,.6); margin-bottom: 6px; } .mt-card-foot { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-top: 1px dashed var(--mt-line); } .mt-card-foot .mt-link-arrow { margin-left: auto; } .mt-price-from { font-family: var(--mt-font-head); font-weight: 700; color: var(--mt-ink); } .mt-stat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--mt-radius-pill); background: #ecfdf5; color: #047857; font-size: .78rem; font-weight: 600; } .mt-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .mt-check-list li { display: flex; gap: 10px; align-items: flex-start; } .mt-check-list .mt-icon { flex: none; margin-top: 4px; color: var(--mt-blue-600); background: var(--mt-bg-soft); border-radius: 50%; padding: 3px; width: 22px; height: 22px; } .mt-check-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .mt-tags { display: flex; flex-wrap: wrap; gap: 6px; } .mt-tag { display: inline-block; padding: 4px 11px; border-radius: var(--mt-radius-pill); background: var(--mt-bg-soft); color: var(--mt-blue-700); font-size: .75rem; font-weight: 600; } .mt-placeholder { position: relative; display: grid; place-items: center; aspect-ratio: 16/10; width: 100%; color: #fff; overflow: hidden; background: linear-gradient(135deg, hsl(calc(224deg + var(--mt-ph-shift, 0deg)) 90% 45%), hsl(calc(200deg + var(--mt-ph-shift, 0deg)) 95% 50%)); } .mt-placeholder::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 45%); } .mt-placeholder span { font-family: var(--mt-font-head); font-size: 5rem; font-weight: 800; opacity: .9; position: relative; } .mt-placeholder em { position: absolute; bottom: 14px; left: 16px; font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .mt-placeholder-sm span { font-size: 2.5rem; } /* Portfolio */ .mt-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; } .mt-filter-btn { padding: 9px 18px; border-radius: var(--mt-radius-pill); border: 1px solid var(--mt-line); background: #fff; color: var(--mt-text); font-family: var(--mt-font-head); font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .2s; } .mt-filter-btn:hover { border-color: var(--mt-blue-500); color: var(--mt-blue-600); } .mt-filter-btn.is-active { background: var(--mt-navy-900); color: #fff; border-color: var(--mt-navy-900); } .mt-project-card { display: flex; flex-direction: column; border-radius: var(--mt-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--mt-line); box-shadow: var(--mt-shadow-sm); color: var(--mt-text); transition: transform .3s var(--mt-ease), box-shadow .3s; } .mt-project-card:hover { transform: translateY(-6px); box-shadow: var(--mt-shadow); color: var(--mt-text); } .mt-project-card.is-hidden { display: none; } .mt-project-media { aspect-ratio: 16/10; overflow: hidden; background: var(--mt-bg-alt); } .mt-project-media img, .mt-project-media .mt-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mt-ease); } .mt-project-card:hover .mt-project-media img { transform: scale(1.05); } .mt-project-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; } .mt-project-body .mt-eyebrow { margin-bottom: 0; } .mt-project-body p { margin: 0; color: var(--mt-muted); font-size: .95rem; } .mt-project-result { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--mt-line); display: flex; align-items: baseline; gap: 8px; } .mt-project-result strong { font-family: var(--mt-font-head); font-size: 1.3rem; color: var(--mt-blue-600); } .mt-project-result span { font-size: .85rem; color: var(--mt-muted); } .mt-project-hero-media { border-radius: var(--mt-radius-lg); overflow: hidden; box-shadow: var(--mt-shadow-lg); margin-top: -90px; position: relative; z-index: 2; } .mt-project-hero-media img, .mt-project-hero-media .mt-placeholder { width: 100%; display: block; aspect-ratio: 21/9; object-fit: cover; } .mt-case-layout { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; } .mt-case-meta { position: sticky; top: 100px; } .mt-case-meta dl { margin: 0; display: grid; gap: 14px; } .mt-case-meta dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-muted); font-weight: 600; } .mt-case-meta dd { margin: 2px 0 0; font-weight: 500; color: var(--mt-ink); } .mt-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; } .mt-results-lg { grid-template-columns: repeat(4, 1fr); margin: 0 0 36px; } .mt-result { padding: 18px 20px; border-radius: var(--mt-radius); background: var(--mt-bg-alt); border: 1px solid var(--mt-line); } .mt-result strong { display: block; font-family: var(--mt-font-head); font-size: 1.7rem; background: var(--mt-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .mt-result span { font-size: .85rem; color: var(--mt-muted); } .mt-featured-case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .mt-featured-media { border-radius: var(--mt-radius-lg); overflow: hidden; box-shadow: var(--mt-shadow-lg); } .mt-featured-media img, .mt-featured-media .mt-placeholder { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } .mt-adjacent { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--mt-line); padding-top: 28px; } .mt-adjacent-link { display: flex; flex-direction: column; gap: 4px; color: var(--mt-ink); } .mt-adjacent-link span { font-size: .8rem; color: var(--mt-muted); text-transform: uppercase; letter-spacing: .08em; } .mt-adjacent-next { text-align: right; } /* Prose */ .mt-prose { font-size: 1.05rem; } .mt-prose h2, .mt-prose h3 { margin-top: 1.6em; } .mt-prose h2 small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-muted); margin-top: 4px; } .mt-prose ul, .mt-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } .mt-prose li { margin-bottom: .4em; } .mt-prose blockquote { border-left: 4px solid var(--mt-blue-500); margin: 1.5em 0; padding: .5em 1.2em; background: var(--mt-bg-alt); border-radius: 0 var(--mt-radius) var(--mt-radius) 0; } .mt-prose code { font-family: var(--mt-font-mono); font-size: .9em; background: var(--mt-bg-soft); color: var(--mt-blue-800); padding: 2px 6px; border-radius: 5px; } .mt-prose pre { background: var(--mt-navy-900); color: #e2e8f0; padding: 20px; border-radius: var(--mt-radius); overflow: auto; font-size: .88rem; line-height: 1.6; } .mt-prose pre code { background: none; color: inherit; padding: 0; } .mt-prose img { border-radius: var(--mt-radius); } .mt-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95rem; } .mt-prose th, .mt-prose td { border: 1px solid var(--mt-line); padding: 10px 12px; text-align: left; vertical-align: top; } .mt-prose th { background: var(--mt-bg-alt); font-weight: 600; } .mt-prose hr { border: 0; border-top: 1px solid var(--mt-line); margin: 2em 0; } /* Process */ .mt-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; } .mt-process-step { position: relative; padding: 28px 26px; background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius-lg); } .mt-process-step .mt-h4 { margin: 10px 0 6px; } .mt-process-step p { margin: 0; color: var(--mt-muted); font-size: .95rem; } .mt-step-num { font-family: var(--mt-font-head); font-weight: 800; font-size: 2rem; background: var(--mt-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } /* Pricing */ .mt-pricing { align-items: stretch; } .mt-tier { text-align: left; } .mt-tier.is-popular { border-color: var(--mt-blue-500); box-shadow: var(--mt-shadow-lg); } .mt-tier-badge { position: absolute; top: -14px; left: 28px; padding: 6px 14px; border-radius: var(--mt-radius-pill); background: var(--mt-grad-accent); color: var(--mt-navy-900); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .mt-tier-price { font-family: var(--mt-font-head); font-size: 2.4rem; font-weight: 800; color: var(--mt-ink); letter-spacing: -0.03em; } .mt-tier .mt-check-list { margin: 8px 0 18px; } .mt-tier .mt-btn { margin-top: auto; } .mt-tier-period { font-family: var(--mt-font-body); font-size: .9rem; font-weight: 500; color: var(--mt-muted); letter-spacing: 0; } body.mt-site .mt-pricing-cta { margin: 40px 0 0; font-size: 1.05rem; } .mt-tier-note { margin: 10px 0 0; min-height: 2.7em; font-size: .78rem; line-height: 1.35; color: var(--mt-muted); text-align: center; } .mt-order-next, .mt-order-brief { margin: 24px 0 32px; padding: 24px 28px; border: 1px solid var(--mt-border, #e5e9f5); border-radius: var(--mt-radius); background: var(--mt-bg-soft, #f5f7ff); } .mt-order-next h2, .mt-order-brief h2 { font-size: 1.3rem; margin: 0 0 12px; } .mt-order-next ol { margin: 0 0 12px 20px; } .mt-product-service-link { margin: 18px 0; } /* FAQ */ .mt-faq { display: grid; gap: 12px; } .mt-faq-item { border: 1px solid var(--mt-line); border-radius: var(--mt-radius); background: #fff; padding: 0 22px; } .mt-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--mt-font-head); font-weight: 600; color: var(--mt-ink); } .mt-faq-item summary::-webkit-details-marker { display: none; } .mt-faq-item summary .mt-icon { transition: transform .25s; color: var(--mt-blue-600); flex: none; } .mt-faq-item[open] summary .mt-icon { transform: rotate(90deg); } .mt-faq-body { padding: 0 0 18px; color: var(--mt-muted); } /* Testimonials, team, stats, posts */ .mt-stars { display: flex; gap: 2px; color: #f59e0b; } .mt-stars .mt-icon { fill: currentColor; } .mt-testimonial blockquote { margin: 0; font-size: 1.02rem; color: var(--mt-ink); } .mt-testimonial blockquote p { color: var(--mt-ink); } .mt-testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; } .mt-testimonial figcaption div { display: flex; flex-direction: column; } .mt-testimonial figcaption span { font-size: .85rem; color: var(--mt-muted); } .mt-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .mt-avatar-initial { display: grid; place-items: center; background: var(--mt-grad-brand); color: #fff; font-family: var(--mt-font-head); font-weight: 700; } .mt-team-card { align-items: center; text-align: center; } .mt-team-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; font-size: 2.5rem; box-shadow: 0 0 0 6px var(--mt-bg-soft); } .mt-role { color: var(--mt-blue-600) !important; font-weight: 600; font-size: .9rem; } .mt-team-card .mt-tags { justify-content: center; } .mt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .mt-stat { text-align: center; padding: 26px 16px; border-radius: var(--mt-radius-lg); background: #fff; border: 1px solid var(--mt-line); } .mt-stat strong { display: block; font-family: var(--mt-font-head); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; background: var(--mt-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .mt-stat span { color: var(--mt-muted); font-size: .9rem; font-weight: 500; } .mt-stats-dark .mt-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } .mt-stats-dark .mt-stat span { color: #c7d2fe; } .mt-post-card { padding: 0; overflow: hidden; gap: 0; } .mt-post-media { aspect-ratio: 16/9; overflow: hidden; } .mt-post-media img, .mt-post-media .mt-placeholder { width: 100%; height: 100%; object-fit: cover; } .mt-post-meta { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; font-size: .8rem; color: var(--mt-muted); } .mt-post-meta .mt-eyebrow { margin: 0; } .mt-post-card .mt-h4 { padding: 10px 24px 0; } .mt-post-card p { padding: 8px 24px 0; } .mt-post-card .mt-link-arrow { padding: 14px 24px 24px; } /* Clients marquee */ .mt-clients { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .mt-clients-track { display: flex; gap: 56px; width: max-content; animation: mt-marquee 40s linear infinite; } .mt-client { font-family: var(--mt-font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color: #94a3b8; white-space: nowrap; opacity: .9; } @keyframes mt-marquee { to { transform: translateX(-50%); } } /* Contact */ .mt-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .mt-contact-grid { grid-template-columns: 1fr 1fr; } .mt-contact-list li { display: flex; gap: 14px; align-items: flex-start; } .mt-contact-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mt-bg-soft); color: var(--mt-blue-600); } .mt-contact-label { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mt-muted); } .mt-contact-value { display: block; color: var(--mt-ink); font-weight: 500; } .mt-social { display: flex; gap: 10px; } .mt-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #c7d2fe; border: 1px solid rgba(255,255,255,.12); transition: all .2s; } .mt-social a:hover { background: var(--mt-grad-brand); color: #fff; transform: translateY(-2px); } .mt-social-light a { background: var(--mt-bg-soft); color: var(--mt-blue-600); border-color: var(--mt-line); } /* CTA */ .mt-cta { padding: clamp(56px, 8vw, 96px) 0; } .mt-cta-inner { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 7vw, 88px) 32px; border-radius: 32px; color: #fff; background: var(--mt-grad-dark); box-shadow: var(--mt-shadow-lg); } .mt-cta-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 240px at 80% 0%, rgba(34,227,255,.3), transparent 60%), radial-gradient(400px 220px at 10% 100%, rgba(47,107,255,.45), transparent 60%); } .mt-cta-inner > * { position: relative; } .mt-cta-inner .mt-h2 { color: #fff; } .mt-cta-inner .mt-lead { color: #c7d2fe; margin: 0 auto 28px; } body.mt-site .mt-cta-inner .mt-cta-note { margin: 22px 0 0; font-size: .88rem; color: rgba(199,210,254,.85); letter-spacing: .01em; } body.mt-site .mt-cta-inner .mt-cta-note span { color: rgba(199,210,254,.45); margin: 0 10px; } .mt-cta-inner .mt-btn-accent { padding: 16px 34px; font-size: 1rem; box-shadow: 0 14px 30px -12px rgba(34,227,255,.55); } .mt-cta-inner .mt-btn-accent:hover { box-shadow: 0 18px 34px -12px rgba(34,227,255,.7); } /* Header / footer helpers (used by Elementor header & footer templates) */ .mt-header { position: sticky; top: 0; z-index: 90; background: rgba(11,16,51,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); } .mt-header .elementor-nav-menu a { font-family: var(--mt-font-head); font-weight: 500; } .mt-footer { background: var(--mt-navy-950); color: #94a3b8; } .mt-footer a { color: #c7d2fe; } .mt-footer a:hover { color: #fff; } .mt-footer h4, .mt-footer .elementor-heading-title { color: #fff; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; } .mt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .mt-footer .elementor-icon-list-item a { color: #c7d2fe; } .mt-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; } /* Elementor tweaks */ .elementor-widget-container .mt-grid { width: 100%; } .elementor-nav-menu--main .elementor-item { font-family: var(--mt-font-head); } .elementor-widget-form .elementor-field-group .elementor-field { border-radius: var(--mt-radius-sm); border-color: var(--mt-line); font-family: var(--mt-font-body); } .elementor-widget-form .elementor-button { border-radius: var(--mt-radius-pill); background: var(--mt-grad-brand); font-family: var(--mt-font-head); font-weight: 600; } /* Hello theme fallback header/footer when no Elementor template is active */ .site-header { background: var(--mt-navy-900); } .site-header .site-title a, .site-header .site-navigation a { color: #fff; } /* WooCommerce harmonisation */ .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce #respond input#submit, .woocommerce input.button { border-radius: var(--mt-radius-pill) !important; background: var(--mt-grad-brand) !important; color: #fff !important; font-family: var(--mt-font-head) !important; font-weight: 600 !important; padding: 12px 22px !important; } .woocommerce .button.alt { background: var(--mt-navy-900) !important; } .woocommerce-page .mt-container.mt-section, .woocommerce .mt-shop-wrap { max-width: var(--mt-container); margin: 0 auto; padding: 48px var(--mt-gutter) 72px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--mt-font-head); } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--mt-blue-600); border-radius: var(--mt-radius); } .woocommerce-info::before, .woocommerce-message::before { color: var(--mt-blue-600); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--mt-line); border-radius: var(--mt-radius-sm); padding: 10px 12px; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: var(--mt-radius-sm); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--mt-bg-soft); color: var(--mt-blue-700); font-weight: 600; } /* Blog (Hello fallback) */ .mt-site .site-main, .mt-site .elementor-location-single .page-content { max-width: var(--mt-container); margin: 0 auto; } .mt-site article.post .entry-title a { color: var(--mt-ink); } /* Reveal animation */ .mt-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--mt-ease), transform .7s var(--mt-ease); } .mt-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mt-reveal { opacity: 1; transform: none; transition: none; } .mt-clients-track { animation: none; } } /* Responsive */ @media (max-width: 1024px) { .mt-grid-4 { grid-template-columns: repeat(2, 1fr); } .mt-grid-3 { grid-template-columns: repeat(2, 1fr); } .mt-process { grid-template-columns: repeat(2, 1fr); } .mt-stats { grid-template-columns: repeat(2, 1fr); } .mt-results-lg { grid-template-columns: repeat(2, 1fr); } .mt-case-layout { grid-template-columns: 1fr; } .mt-case-meta { position: static; } } @media (max-width: 767px) { :root { --mt-gutter: 16px; } .mt-grid-2, .mt-grid-3, .mt-grid-4, .mt-two-col, .mt-featured-case, .mt-contact-grid { grid-template-columns: 1fr; } .mt-process { grid-template-columns: 1fr; } .mt-check-grid { grid-template-columns: 1fr; } .mt-results-grid, .mt-results-lg { grid-template-columns: repeat(2, 1fr); } .mt-card { padding: 24px; } .mt-project-hero-media { margin-top: -40px; } .mt-adjacent { flex-direction: column; } .mt-adjacent-next { text-align: left; } .mt-cta-inner { border-radius: 22px; } .mt-btn { width: 100%; } .mt-btn-row { flex-direction: column; } } /* -------------------------------------------------------------------------- Elementor page helpers (classes used by the Elementor layouts) -------------------------------------------------------------------------- */ .mt-el-hero { position: relative; } .mt-el-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 85% 10%, rgba(34, 227, 255, .22), transparent 60%), radial-gradient(500px 260px at 10% 90%, rgba(47, 107, 255, .35), transparent 60%); } .mt-el-hero::after { content: ""; position: absolute; inset: 0; opacity: .25; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); } .mt-el-hero > .e-con-inner, .mt-el-hero > * { position: relative; z-index: 1; } .mt-el-hero .mt-hero-badges { margin-top: 8px; } .mt-el-dark .mt-check-list .mt-icon { background: rgba(255,255,255,.1); color: var(--mt-cyan-400); } .mt-check-dark li { color: #e0e7ff; } .mt-check-dark li::before { content: "\2713"; color: var(--mt-cyan-400); font-weight: 700; margin-right: 10px; } .mt-lead-el p { font-size: 1.125rem; max-width: 70ch; margin: 0; } .mt-center .mt-lead-el p { margin: 0 auto; } .mt-head-el .mt-eyebrow { margin-bottom: 0; } .mt-head-el h2 { margin: 0; } .mt-narrow-el > .e-con-inner { max-width: 820px; } .mt-site .elementor-widget-button.mt-el-btn .elementor-button { border-radius: 999px; padding: 14px 26px; font-family: var(--mt-font-head); font-weight: 600; font-size: .95rem; transition: transform .25s var(--mt-ease), box-shadow .25s; } .mt-site .elementor-widget-button.mt-el-btn .elementor-button:hover { transform: translateY(-2px); } .mt-site .elementor-widget-button.mt-el-btn-primary .elementor-button { background: var(--mt-grad-brand); background-color: var(--mt-blue-600); color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgba(29,79,232,.6); } .mt-site .elementor-widget-button.mt-el-btn-accent .elementor-button { background: var(--mt-grad-accent); background-color: var(--mt-cyan-400); color: var(--mt-navy-900); border: 0; } .mt-site .elementor-widget-button.mt-el-btn-ghost .elementor-button { background: rgba(255,255,255,.08); background-color: rgba(255,255,255,.08); color: #fff; border: 2px solid rgba(255,255,255,.25); } .mt-site .mt-el-dark .elementor-widget-button.mt-el-btn-ghost .elementor-button:hover { background: rgba(255,255,255,.16); } .mt-site .mt-section-el:not(.mt-el-dark) .elementor-widget-button.mt-el-btn-ghost .elementor-button { background: var(--mt-bg-soft); color: var(--mt-blue-700); border-color: transparent; } .mt-site .elementor-widget-button.mt-el-btn-outline .elementor-button { background: transparent; background-color: transparent; color: var(--mt-blue-600); border: 2px solid var(--mt-blue-500); box-shadow: none; } .mt-site .elementor-widget-button.mt-el-btn-outline .elementor-button:hover { background: var(--mt-bg-soft); background-color: var(--mt-bg-soft); color: var(--mt-blue-700); border-color: var(--mt-blue-600); box-shadow: 0 8px 20px -12px rgba(29,79,232,.45); } .mt-site .mt-header-cta .elementor-button { padding: 10px 20px; font-size: .85rem; } .mt-iconbox .elementor-icon-box-wrapper { background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius-lg); padding: 30px; box-shadow: var(--mt-shadow-sm); height: 100%; transition: transform .3s var(--mt-ease), box-shadow .3s; } .mt-iconbox .elementor-icon-box-wrapper:hover { transform: translateY(-6px); box-shadow: var(--mt-shadow); } .mt-iconbox .elementor-icon-box-icon { margin-bottom: 16px; } .mt-iconbox .elementor-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--mt-grad-brand); color: #fff !important; font-size: 24px; box-shadow: 0 10px 20px -10px rgba(29,79,232,.6); } .mt-iconbox .elementor-icon svg { fill: #fff; } .mt-iconbox .elementor-icon-box-title { font-family: var(--mt-font-head); font-size: 1.2rem; font-weight: 600; color: var(--mt-ink); margin: 0 0 8px; } .mt-iconbox .elementor-icon-box-description { color: var(--mt-muted); font-size: .95rem; } .mt-el-dark .mt-iconbox .elementor-icon-box-wrapper { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } .mt-el-dark .mt-iconbox .elementor-icon-box-title { color: #fff; } .mt-el-dark .mt-iconbox .elementor-icon-box-description { color: #c7d2fe; } .mt-contact-note { background: var(--mt-bg-alt); } .mt-contact-note p { margin: 0; } .mt-footer-links .elementor-icon-list-item { padding: 0; } .mt-footer-links .elementor-icon-list-text { color: #c7d2fe; font-size: .95rem; transition: color .2s; } .mt-footer-links a:hover .elementor-icon-list-text { color: #fff; } .mt-footer .elementor-widget-text-editor p { margin-bottom: .8em; } .mt-footer-bottom p { margin: 0; } .mt-nav .elementor-nav-menu--dropdown { box-shadow: var(--mt-shadow-lg); border-radius: 12px; overflow: hidden; } .mt-nav .elementor-nav-menu--dropdown a { color: #0b1033; } .mt-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .mt-nav .elementor-nav-menu--dropdown .elementor-item:hover { background: #f4f7ff; color: #1d4fe8; } .mt-nav .elementor-sub-item { font-size: .9rem; } @media (max-width: 1024px) { .mt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { background: #0b1033; } .mt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a { color: #c7d2fe; } .mt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a:hover, .mt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item-active { background: rgba(255,255,255,.08); color: #fff; } } /* Timeline (About page) */ .mt-timeline { list-style: none; margin: 0 auto; padding: 0; position: relative; display: grid; gap: 22px; max-width: 820px; } .mt-timeline::before { content: ""; position: absolute; left: 70px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--mt-blue-500), var(--mt-cyan-400)); } .mt-timeline li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 32px; align-items: start; } .mt-timeline li span { font-family: var(--mt-font-head); font-weight: 800; color: var(--mt-blue-600); font-size: 1.05rem; text-align: right; padding-top: 14px; grid-row: 1 / span 2; } .mt-timeline li::before { content: ""; position: absolute; left: 63px; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--mt-blue-500); box-shadow: 0 0 0 4px #fff; z-index: 1; } .mt-timeline li strong { display: block; font-family: var(--mt-font-head); color: var(--mt-ink); font-size: 1.1rem; margin-top: 12px; grid-column: 2; } .mt-timeline li p { grid-column: 2; margin: 0; color: var(--mt-muted); background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: 14px 18px; } @media (max-width: 600px) { .mt-timeline::before { left: 8px; } .mt-timeline li { grid-template-columns: 1fr; padding-left: 32px; } .mt-timeline li span { text-align: left; padding: 0; grid-row: auto; } .mt-timeline li::before { left: 1px; top: 4px; } .mt-timeline li strong, .mt-timeline li p { grid-column: 1; } .mt-timeline li strong { margin-top: 0; } } /* Neutralise Elementor's global