/* ========================================================================== Buzzoly — Motion layer Premium scroll reveal, parallax, hover choreography, ambient background motion and micro-interactions. Everything animates transform/opacity only so the compositor can own it. Motion is opt-in via the .mo-js class that motion.js sets on , so a JS failure never leaves content hidden. All of it collapses under prefers-reduced-motion and on coarse-pointer / low-power devices. ========================================================================== */ :root { --mo-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mo-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mo-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --mo-dur: 0.75s; --mo-dur-fast: 0.35s; --mo-delay: 0ms; --mo-stagger: 90ms; } /* -------------------------------------------------------------------------- 1. Scroll reveal -------------------------------------------------------------------------- */ html.mo-js [data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity var(--mo-dur) var(--mo-ease-out) var(--mo-delay), transform var(--mo-dur) var(--mo-ease-out) var(--mo-delay); } html.mo-js [data-reveal="fade"] { transform: none; } html.mo-js [data-reveal="down"] { transform: translate3d(0, -26px, 0); } html.mo-js [data-reveal="left"] { transform: translate3d(-44px, 0, 0); } html.mo-js [data-reveal="right"] { transform: translate3d(44px, 0, 0); } html.mo-js [data-reveal="zoom"] { transform: scale3d(0.94, 0.94, 1); } html.mo-js [data-reveal="image"] { transform: scale3d(0.95, 0.95, 1); transition-duration: 1.05s; } html.mo-js [data-reveal="drift-left"] { transform: translate3d(-26px, 20px, 0); } html.mo-js [data-reveal="drift-right"] { transform: translate3d(26px, 20px, 0); } html.mo-js [data-reveal].is-revealed { opacity: 1; transform: none; } /* An image reveal also wipes its own mask open. */ html.mo-js [data-reveal-mask] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--mo-ease-out) var(--mo-delay); } html.mo-js [data-reveal-mask].is-revealed { clip-path: inset(0 0 0 0); } /* -------------------------------------------------------------------------- 2. Split text — word-by-word headline reveal -------------------------------------------------------------------------- */ .mo-word { display: inline-block; overflow: hidden; vertical-align: bottom; /* Keep descenders from being clipped by the mask. */ padding-bottom: 0.14em; margin-bottom: -0.14em; } .mo-word__in { display: inline-block; transform: translate3d(0, 115%, 0); opacity: 0; transition: transform 0.95s var(--mo-ease-out), opacity 0.95s var(--mo-ease-out); transition-delay: calc(var(--mo-delay) + var(--i, 0) * 58ms); } .is-revealed .mo-word__in, .mo-split.is-revealed .mo-word__in { transform: none; opacity: 1; } /* -------------------------------------------------------------------------- 3. Ambient background motion — gradient blobs, grid drift, particles -------------------------------------------------------------------------- */ .mo-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; } .mo-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; animation: mo-drift 24s var(--mo-ease-soft) infinite alternate; } .mo-blob--a { width: 460px; height: 460px; top: -140px; left: -110px; background: radial-gradient(circle at 30% 30%, rgba(49, 126, 254, 0.34), rgba(49, 126, 254, 0) 70%); } .mo-blob--b { width: 520px; height: 520px; bottom: -200px; right: -140px; background: radial-gradient(circle at 60% 40%, rgba(95, 208, 198, 0.3), rgba(95, 208, 198, 0) 70%); animation-duration: 30s; animation-direction: alternate-reverse; } .mo-blob--c { width: 380px; height: 380px; top: 34%; left: 46%; background: radial-gradient(circle at 50% 50%, rgba(126, 106, 255, 0.22), rgba(126, 106, 255, 0) 70%); animation-duration: 36s; } @keyframes mo-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(48px, -36px, 0) scale(1.08); } 100% { transform: translate3d(-32px, 42px, 0) scale(0.96); } } .mo-grid { position: absolute; inset: -60px; background-image: linear-gradient(to right, rgba(20, 32, 58, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 32, 58, 0.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%); will-change: transform; animation: mo-grid-pan 34s linear infinite; } @keyframes mo-grid-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-64px, -64px, 0); } } .mo-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.85; } /* Slow-orbiting abstract shapes. */ .mo-shape { position: absolute; border: 1px solid rgba(49, 126, 254, 0.22); will-change: transform; } .mo-shape--ring { border-radius: 50%; animation: mo-spin 46s linear infinite; } .mo-shape--square { border-radius: 14px; animation: mo-spin 38s linear infinite reverse; } @keyframes mo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes mo-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } } @keyframes mo-float-slow { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -20px, 0) rotate(1.4deg); } } @keyframes mo-pulse-glow { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.06); } } /* -------------------------------------------------------------------------- 4. Hero -------------------------------------------------------------------------- */ body.premium-theme .slider-area.style-2 .te-single-slider { position: relative; } /* The ambient layer sits behind the artwork but above the flat gradient. */ body.premium-theme .slider-area .mo-ambient { z-index: 0; } body.premium-theme .slider-area .slider-feature-img, body.premium-theme .slider-area .slider-left-shape, body.premium-theme .slider-area .container { position: relative; z-index: 1; } body.premium-theme .slider-area .te-slider-content-wrapper { position: relative; z-index: 2; } /* A soft glow that breathes behind the headline block. */ .mo-hero-glow { position: absolute; width: 620px; height: 620px; left: -180px; top: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(49, 126, 254, 0.2) 0%, rgba(49, 126, 254, 0) 68%); pointer-events: none; will-change: transform, opacity; animation: mo-pulse-glow 9s var(--mo-ease-soft) infinite; } /* Floating product/UI mockups around the hero visual. Two nested layers: the outer element carries the JS pointer parallax, the inner one owns the looping float, so neither transform fights the other. */ .mo-mockups { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .mo-mockup { position: absolute; will-change: transform; } .mo-mockup__inner { animation: mo-float-slow 8s var(--mo-ease-soft) infinite; will-change: transform; } .mo-mockup:nth-child(2) .mo-mockup__inner { animation-duration: 10.5s; animation-delay: -2.2s; } .mo-mockup:nth-child(3) .mo-mockup__inner { animation-duration: 9.2s; animation-delay: -4.6s; } .mo-mockup:nth-child(4) .mo-mockup__inner { animation-duration: 11.8s; animation-delay: -1.1s; } .mo-card { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 33, 61, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 14px 16px; } /* Miniature browser window. */ .mo-card--window { width: 214px; padding: 0; overflow: hidden; } .mo-window__bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: rgba(244, 248, 253, 0.9); border-bottom: 1px solid rgba(20, 32, 58, 0.06); } .mo-window__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(20, 32, 58, 0.16); } .mo-window__dot:first-child { background: rgba(255, 118, 106, 0.7); } .mo-window__dot:nth-child(2) { background: rgba(255, 200, 87, 0.75); } .mo-window__dot:nth-child(3) { background: rgba(95, 208, 198, 0.8); } .mo-window__body { padding: 13px 14px 16px; } .mo-line { height: 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(49, 126, 254, 0.22), rgba(49, 126, 254, 0.07)); margin-bottom: 8px; } .mo-line--w70 { width: 70%; } .mo-line--w45 { width: 45%; } .mo-line--w90 { width: 90%; } .mo-window__blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; } .mo-window__block { height: 30px; border-radius: 8px; background: rgba(49, 126, 254, 0.1); } .mo-window__block:nth-child(2) { background: rgba(95, 208, 198, 0.16); } /* Metric chip. */ .mo-card--metric { display: flex; align-items: center; gap: 11px; } .mo-metric__icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-deep)); flex: 0 0 auto; } .mo-metric__value { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--premium-text); } .mo-metric__label { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--premium-muted); } /* Chat bubble. */ .mo-card--chat { width: 196px; } .mo-chat__head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--premium-text); margin-bottom: 9px; } .mo-chat__head i { color: var(--premium-blue); } .mo-chat__msg { font-size: 11.5px; line-height: 1.5; color: var(--premium-muted); background: rgba(49, 126, 254, 0.08); border-radius: 12px 12px 12px 4px; padding: 8px 10px; } .mo-chat__typing { display: inline-flex; gap: 4px; margin-top: 9px; padding-left: 4px; } .mo-chat__typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--premium-blue); opacity: 0.4; animation: mo-typing 1.3s ease-in-out infinite; } .mo-chat__typing span:nth-child(2) { animation-delay: 0.18s; } .mo-chat__typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes mo-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .mo-card--badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 15px; font-size: 12px; font-weight: 700; color: var(--premium-text); } .mo-card--badge i { color: #21b57a; } /* Placement. The hero art is rescaled below lg, so the mockups step down. */ .mo-mockup--window { top: 14%; right: 30%; } .mo-mockup--metric { top: 46%; right: 8%; } .mo-mockup--chat { bottom: 16%; right: 27%; } .mo-mockup--badge { top: 30%; right: 2%; } @media (max-width: 1399px) { .mo-mockup--window { right: 34%; } .mo-mockup--chat { right: 32%; } .mo-mockup--metric { right: 12%; } .mo-mockup--badge { display: none; } } @media (max-width: 1199px) { .mo-mockups { display: none; } .mo-hero-glow { width: 420px; height: 420px; } } body.premium-theme .slider-area.style-2 .te-single-slider .te-slider-content .te-slider-title { margin-bottom: 22px; } /* -------------------------------------------------------------------------- 5. Navigation -------------------------------------------------------------------------- */ body.premium-theme .te-header-menu-area { transition: background-color 0.45s var(--mo-ease-soft), box-shadow 0.45s var(--mo-ease-soft), border-color 0.45s var(--mo-ease-soft); } body.premium-theme .main-header { transition: padding 0.45s var(--mo-ease-soft); } body.premium-theme .te-logo img, body.premium-theme .mo-logo { transition: transform 0.45s var(--mo-ease-out); } body.premium-theme .te-header-menu-area.mo-nav-solid .te-logo img, body.premium-theme .te-header-menu-area.mo-nav-solid .mo-logo { transform: scale(0.92); } /* Animated underline on nav items. */ body.premium-theme .te-main-menu > ul > li > a { position: relative; } body.premium-theme .te-main-menu > ul > li > a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--premium-blue), var(--premium-accent)); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s var(--mo-ease-out); } body.premium-theme .te-main-menu > ul > li > a:hover::after, body.premium-theme .te-main-menu > ul > li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left center; } body.premium-theme .te-main-menu > ul > li > a > i { transition: transform 0.35s var(--mo-ease-out); } body.premium-theme .te-main-menu > ul > li:hover > a > i { transform: rotate(180deg); } /* Sub-menu items cascade in as the dropdown opens. */ body.premium-theme .te-main-menu .sub-menu li { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.32s var(--mo-ease-out), transform 0.32s var(--mo-ease-out); } body.premium-theme .te-main-menu > ul > li:hover > .sub-menu li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 40ms); } /* Mobile sidebar contents cascade in behind the panel slide. */ .te-menu-sidebar-area .te-menu-sidebar-logo, .te-menu-sidebar-area .te-mobile-nav-menu, .te-menu-sidebar-area .te-menu-sidebar-content .te-menu-sidebar-single-widget { opacity: 0; transform: translate3d(24px, 0, 0); transition: opacity 0.45s var(--mo-ease-out), transform 0.45s var(--mo-ease-out); } .te-menu-sidebar-area.active .te-menu-sidebar-logo, .te-menu-sidebar-area.active .te-mobile-nav-menu, .te-menu-sidebar-area.active .te-menu-sidebar-content .te-menu-sidebar-single-widget { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i, 0) * 80ms); } .te-body-overlay { transition: opacity 0.4s var(--mo-ease-soft), visibility 0.4s var(--mo-ease-soft); } /* -------------------------------------------------------------------------- 6. Logo wordmark -------------------------------------------------------------------------- */ .mo-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; } .mo-logo__mark { width: 38px; height: 38px; flex: 0 0 auto; display: block; } .mo-logo__mark .mo-logo__arrow { transform-origin: 50% 50%; transition: transform 0.5s var(--mo-ease-out); } .mo-logo:hover .mo-logo__mark .mo-logo__arrow { transform: translateY(-2px); } .mo-logo__text { font-family: "Spline Sans", "Inter", sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--premium-text); } .mo-logo__text .mo-logo__ai, .mo-logo__text .mo-logo__ai .mo-char { background: linear-gradient(135deg, var(--premium-blue) 0%, var(--premium-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mo-logo__text .mo-logo__tld { font-weight: 500; color: var(--premium-muted); } /* Wordmark letters stagger in on first paint. */ html.mo-js .mo-logo__text .mo-char { display: inline-block; opacity: 0; transform: translate3d(0, 40%, 0); transition: opacity 0.5s var(--mo-ease-out), transform 0.5s var(--mo-ease-out); transition-delay: calc(220ms + var(--i, 0) * 26ms); } html.mo-js body.mo-loaded .mo-logo__text .mo-char { opacity: 1; transform: none; } .te-menu-sidebar-logo .mo-logo__text, .te-footer-logo .mo-logo__text { font-size: 23px; } .footer .mo-logo__text { color: #ffffff; } .footer .mo-logo__text .mo-logo__tld { color: rgba(255, 255, 255, 0.7); } @media (max-width: 575px) { .mo-logo__text { font-size: 20px; } .mo-logo__mark { width: 32px; height: 32px; } } /* -------------------------------------------------------------------------- 7. Buttons and magnetic interaction -------------------------------------------------------------------------- */ body.premium-theme .te-theme-btn, body.premium-theme input.te-theme-btn, body.premium-theme .submit-btn, body.premium-theme .addcart-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.4s var(--mo-ease-out), box-shadow 0.4s var(--mo-ease-out), background-color 0.4s var(--mo-ease-out); } /* A sheen that sweeps across on hover. */ body.premium-theme .te-theme-btn::before, body.premium-theme .submit-btn::before, body.premium-theme .addcart-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.32) 50%, transparent 80%); transform: translate3d(-110%, 0, 0); transition: transform 0.75s var(--mo-ease-out); } body.premium-theme .te-theme-btn:hover::before, body.premium-theme .submit-btn:hover::before, body.premium-theme .addcart-btn:hover::before { transform: translate3d(110%, 0, 0); } body.premium-theme .te-theme-btn:hover, body.premium-theme .submit-btn:hover, body.premium-theme .addcart-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(49, 126, 254, 0.32); } body.premium-theme .te-theme-btn:active, body.premium-theme .submit-btn:active { transform: translateY(-1px) scale(0.985); transition-duration: 0.12s; } /* Magnetic wrapper: JS moves the outer element, the inner label rides along. */ .mo-magnetic { display: inline-flex; will-change: transform; } /* An arrow that nudges right on hover, used on CTAs and cards. */ .mo-arrow { display: inline-block; transition: transform 0.4s var(--mo-ease-out); } a:hover .mo-arrow, button:hover .mo-arrow, .mo-magnetic:hover .mo-arrow, .te-info-card:hover .mo-arrow, .about-cta__link:hover .mo-arrow { transform: translate3d(5px, 0, 0); } /* -------------------------------------------------------------------------- 8. Custom cursor -------------------------------------------------------------------------- */ .mo-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100000; opacity: 0; transition: opacity 0.3s var(--mo-ease-soft); } .mo-cursor.is-ready { opacity: 1; } .mo-cursor__dot, .mo-cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; } .mo-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--premium-blue); transition: opacity 0.3s var(--mo-ease-soft); } .mo-cursor__ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(49, 126, 254, 0.5); transition: width 0.32s var(--mo-ease-out), height 0.32s var(--mo-ease-out), margin 0.32s var(--mo-ease-out), background-color 0.32s var(--mo-ease-out), border-color 0.32s var(--mo-ease-out); } .mo-cursor.is-hovering .mo-cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(49, 126, 254, 0.1); border-color: rgba(49, 126, 254, 0.32); } .mo-cursor.is-hovering .mo-cursor__dot { opacity: 0; } .mo-cursor.is-down .mo-cursor__ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; } /* Hide the cursor pair while a project preview is showing. */ .mo-cursor.is-previewing { opacity: 0; } /* Cursor-following project preview. */ .mo-preview { position: fixed; top: 0; left: 0; width: 260px; height: 172px; margin: -86px 0 0 -130px; border-radius: 16px; overflow: hidden; pointer-events: none; z-index: 99999; opacity: 0; box-shadow: 0 30px 70px rgba(15, 33, 61, 0.3); transition: opacity 0.4s var(--mo-ease-out); will-change: transform, opacity; } .mo-preview.is-visible { opacity: 1; } .mo-preview__inner { width: 100%; height: 100%; transform: scale(0.9) rotate(-3deg); transition: transform 0.5s var(--mo-ease-out); } .mo-preview.is-visible .mo-preview__inner { transform: scale(1) rotate(0deg); } .mo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------------------------------- 9. Page transition -------------------------------------------------------------------------- */ .mo-page-fade { position: fixed; inset: 0; z-index: 99998; pointer-events: none; opacity: 0; background: linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%); transition: opacity 0.4s var(--mo-ease-soft); } .mo-page-fade.is-active { opacity: 1; pointer-events: all; } /* -------------------------------------------------------------------------- 10. Service cards -------------------------------------------------------------------------- */ body.premium-theme .te-info-card { position: relative; transition: transform 0.45s var(--mo-ease-out), box-shadow 0.45s var(--mo-ease-out), border-color 0.45s var(--mo-ease-out); } /* Gradient wash that fades in behind the content on hover. */ body.premium-theme .te-info-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 120% at 50% 0%, rgba(49, 126, 254, 0.14) 0%, rgba(49, 126, 254, 0) 62%), linear-gradient(180deg, rgba(95, 208, 198, 0.08) 0%, rgba(95, 208, 198, 0) 55%); opacity: 0; transition: opacity 0.45s var(--mo-ease-out); } body.premium-theme .te-info-card:hover::after { opacity: 1; } body.premium-theme .te-info-card:hover, body.premium-theme .te-process-step:hover, body.premium-theme .card:hover { transform: translate3d(0, -10px, 0); box-shadow: 0 34px 84px rgba(15, 33, 61, 0.16); border-color: var(--premium-border-strong); } body.premium-theme .te-info-card .te-title-wrapper .icon, body.premium-theme .te-process-step .te-title-wrapper .icon { transition: transform 0.55s var(--mo-ease-out); } body.premium-theme .te-info-card:hover .te-title-wrapper .icon, body.premium-theme .te-process-step:hover .te-title-wrapper .icon { transform: scale(1.1) rotate(-7deg); } body.premium-theme .te-info-card .te-title-wrapper .divider { transform-origin: left center; transition: transform 0.5s var(--mo-ease-out); } body.premium-theme .te-info-card:hover .te-title-wrapper .divider { transform: scaleX(1.35); } /* Arrow affordance appended to each service card. */ .mo-card-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--premium-blue); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--mo-ease-out), transform 0.4s var(--mo-ease-out); } .te-info-card:hover .mo-card-arrow { opacity: 1; transform: none; } /* On touch devices there is no hover, so keep the affordance visible. */ @media (hover: none) { .mo-card-arrow { opacity: 1; transform: none; } } /* Subtle 3D tilt driven by pointer position. */ .mo-tilt { transform-style: preserve-3d; will-change: transform; } /* -------------------------------------------------------------------------- 11. Portfolio -------------------------------------------------------------------------- */ body.premium-theme .te-portfolio-card .image { position: relative; overflow: hidden; border-radius: 24px; } body.premium-theme .te-portfolio-card .image img { display: block; width: 100%; transition: transform 0.9s var(--mo-ease-out); will-change: transform; } body.premium-theme .te-portfolio-card:hover .image img { transform: scale(1.08); } body.premium-theme .te-portfolio-card .te-content-wrapper { opacity: 0; transition: opacity 0.5s var(--mo-ease-out); } body.premium-theme .te-portfolio-card:hover .te-content-wrapper { opacity: 1; } body.premium-theme .te-portfolio-card .te-content-wrapper .content { transform: translate3d(0, 26px, 0); transition: transform 0.55s var(--mo-ease-out); } body.premium-theme .te-portfolio-card:hover .te-content-wrapper .content { transform: none; } body.premium-theme .te-portfolio-card .btn-wrapper a { transition: transform 0.5s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out); } body.premium-theme .te-portfolio-card:hover .btn-wrapper a { transform: rotate(45deg) scale(1.06); } @media (hover: none) { body.premium-theme .te-portfolio-card .te-content-wrapper { opacity: 1; } body.premium-theme .te-portfolio-card .te-content-wrapper .content { transform: none; } } body.premium-theme .te-portfolio-filter li { transition: transform 0.35s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out), color 0.35s var(--mo-ease-out), box-shadow 0.35s var(--mo-ease-out); } body.premium-theme .te-portfolio-filter li:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 12px 26px rgba(15, 33, 61, 0.12); } /* Horizontal "selected work" strip with cursor-following previews. */ .mo-worklist { margin-top: 56px; border-top: 1px solid var(--premium-border); } .mo-worklist__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 8px; border-bottom: 1px solid var(--premium-border); text-decoration: none; position: relative; overflow: hidden; } .mo-worklist__row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(49, 126, 254, 0.07), rgba(49, 126, 254, 0)); transform: translate3d(-100%, 0, 0); transition: transform 0.55s var(--mo-ease-out); } .mo-worklist__row:hover::before { transform: none; } .mo-worklist__main { display: flex; align-items: baseline; gap: 18px; min-width: 0; position: relative; } .mo-worklist__index { font-size: 13px; font-weight: 700; color: var(--premium-blue); flex: 0 0 auto; } .mo-worklist__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--premium-text); transition: transform 0.5s var(--mo-ease-out), color 0.35s var(--mo-ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mo-worklist__row:hover .mo-worklist__title { transform: translate3d(10px, 0, 0); color: var(--premium-blue); } .mo-worklist__meta { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; position: relative; } .mo-worklist__tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--premium-muted); } .mo-worklist__go { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--premium-border); color: var(--premium-blue); font-size: 13px; transition: transform 0.5s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out), color 0.35s var(--mo-ease-out); } .mo-worklist__row:hover .mo-worklist__go { transform: translate3d(4px, 0, 0) rotate(45deg); background: var(--premium-blue); color: #fff; } .mo-worklist__thumb { display: none; } .mo-worklist__thumb img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--premium-border); box-shadow: 0 16px 34px rgba(15, 33, 61, 0.12); } @media (max-width: 991px) { .mo-worklist__row { flex-wrap: nowrap; gap: 14px; padding: 18px 0; overflow: visible; isolation: isolate; } .mo-worklist__main { gap: 12px; width: auto; flex: 1 1 auto; } .mo-worklist__meta { gap: 0; margin-left: auto; } .mo-worklist__title { font-size: 18px; white-space: normal; } .mo-worklist__tag { display: none; } .mo-worklist__thumb { display: block; position: absolute; left: 50%; top: 50%; width: min(320px, calc(100vw - 150px)); padding-top: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-28%, -50%, 0) scale(0.96); transform-origin: center center; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; z-index: 3; } .mo-worklist__row.is-preview-active .mo-worklist__thumb { opacity: 1; visibility: visible; transform: translate3d(-28%, -50%, 0) scale(1); } } @media (max-width: 767px) { .mo-worklist__row { gap: 12px; padding: 16px 0; } .mo-worklist__thumb { width: min(250px, calc(100vw - 110px)); transform: translate3d(-24%, -50%, 0) scale(0.96); } .mo-worklist__row.is-preview-active .mo-worklist__thumb { transform: translate3d(-24%, -50%, 0) scale(1); } .mo-worklist__go { width: 34px; height: 34px; } } /* -------------------------------------------------------------------------- 12. Statistics -------------------------------------------------------------------------- */ .mo-stats-area { padding: 20px 0 70px; } .mo-stats { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 46px 34px; border-radius: var(--premium-radius); border: 1px solid var(--premium-border); background: linear-gradient(135deg, #0f213d 0%, #14294c 55%, #0d2f5e 100%); box-shadow: 0 30px 80px rgba(15, 33, 61, 0.22); } .mo-stats .mo-ambient { opacity: 0.55; } .mo-stats .mo-blob { filter: blur(60px); } .mo-stat { position: relative; z-index: 1; text-align: center; padding: 6px 10px; } .mo-stat + .mo-stat::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: rgba(255, 255, 255, 0.12); } .mo-stat__num { display: block; font-size: 46px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; color: #ffffff; font-variant-numeric: tabular-nums; } .mo-stat__num .mo-stat__suffix { background: linear-gradient(135deg, #6fb0ff 0%, #5fd0c6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mo-stat__label { display: block; margin-top: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); } @media (max-width: 991px) { .mo-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; padding: 38px 22px; } .mo-stat:nth-child(odd)::before { display: none; } .mo-stat__num { font-size: 38px; } } @media (max-width: 479px) { .mo-stats { grid-template-columns: 1fr; } .mo-stat::before { display: none; } } /* Reuse the same treatment for the existing about-page stat card. */ body.premium-theme .about-stat__num { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 13. Process timeline -------------------------------------------------------------------------- */ .mo-timeline-area { position: relative; padding: 90px 0 100px; overflow: hidden; } .mo-timeline { position: relative; margin-top: 58px; padding-left: 4px; } /* The rail the steps hang from. */ .mo-timeline__rail { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--premium-border); border-radius: 2px; } .mo-timeline__progress { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--premium-blue) 0%, var(--premium-accent) 100%); transform: scaleY(var(--mo-progress, 0)); transform-origin: top center; will-change: transform; } .mo-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 42px; } .mo-step:last-child { padding-bottom: 0; } .mo-step__node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--premium-muted); background: #ffffff; border: 1px solid var(--premium-border); box-shadow: 0 10px 26px rgba(15, 33, 61, 0.08); transform: scale(0.72); opacity: 0; transition: transform 0.6s var(--mo-ease-out), opacity 0.6s var(--mo-ease-out), color 0.4s var(--mo-ease-out), background-color 0.5s var(--mo-ease-out), border-color 0.5s var(--mo-ease-out), box-shadow 0.5s var(--mo-ease-out); } .mo-step__body { padding-top: 6px; opacity: 0; transform: translate3d(24px, 0, 0); transition: opacity 0.65s var(--mo-ease-out), transform 0.65s var(--mo-ease-out); } .mo-step.is-active .mo-step__node { opacity: 1; transform: none; color: #ffffff; background: linear-gradient(135deg, var(--premium-blue) 0%, var(--premium-blue-deep) 100%); border-color: transparent; box-shadow: 0 14px 34px rgba(49, 126, 254, 0.34); } .mo-step.is-active .mo-step__body { opacity: 1; transform: none; transition-delay: 120ms; } .mo-step__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; opacity: 0; transform: scale(0.6); transition: opacity 0.45s var(--mo-ease-out) 0.18s, transform 0.45s var(--mo-ease-out) 0.18s; } .mo-step__count { transition: opacity 0.3s var(--mo-ease-out); } .mo-step.is-active .mo-step__icon { opacity: 1; transform: none; } .mo-step.is-active .mo-step__count { opacity: 0; } .mo-step__title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--premium-text); } .mo-step__desc { margin: 0; max-width: 620px; color: var(--premium-muted); } .mo-step__phase { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--premium-blue); } @media (max-width: 575px) { .mo-step { grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 34px; } .mo-step__node { width: 46px; height: 46px; font-size: 14px; } .mo-timeline__rail { left: 22px; } .mo-step__title { font-size: 18px; } } /* -------------------------------------------------------------------------- 14. Testimonials -------------------------------------------------------------------------- */ .mo-testimonial-area { position: relative; padding: 20px 0 100px; } .mo-carousel { position: relative; margin-top: 46px; } .mo-carousel__viewport { overflow: hidden; padding: 12px 4px 24px; } .mo-carousel__track { display: flex; will-change: transform; transition: transform 0.72s var(--mo-ease-out); } .mo-carousel__slide { flex: 0 0 100%; max-width: 100%; padding: 0 12px; box-sizing: border-box; } .mo-quote { height: 100%; padding: 38px 36px 32px; border-radius: var(--premium-radius); background: var(--premium-surface); border: 1px solid var(--premium-border); box-shadow: var(--premium-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: scale(0.94); opacity: 0.45; transition: transform 0.72s var(--mo-ease-out), opacity 0.72s var(--mo-ease-out), box-shadow 0.72s var(--mo-ease-out); } .mo-carousel__slide.is-current .mo-quote { transform: scale(1); opacity: 1; box-shadow: var(--premium-shadow-hover); } .mo-quote__mark { font-size: 40px; line-height: 1; color: rgba(49, 126, 254, 0.24); margin-bottom: 14px; } .mo-quote__text { font-size: 18px; line-height: 1.66; color: var(--premium-text); margin-bottom: 24px; } .mo-quote__foot { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--premium-border); } .mo-quote__avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-deep)); flex: 0 0 auto; } .mo-quote__name { display: block; font-weight: 700; color: var(--premium-text); } .mo-quote__role { display: block; font-size: 13px; color: var(--premium-muted); } .mo-stars { display: inline-flex; gap: 3px; margin-left: auto; color: #f5b544; font-size: 13px; } .mo-stars i { opacity: 0; transform: scale(0.4) rotate(-30deg); transition: opacity 0.4s var(--mo-ease-out), transform 0.4s var(--mo-ease-out); } .mo-carousel__slide.is-current .mo-stars i { opacity: 1; transform: none; transition-delay: calc(180ms + var(--i, 0) * 80ms); } .mo-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; } .mo-carousel__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--premium-border); background: rgba(255, 255, 255, 0.8); color: var(--premium-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.35s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out), color 0.35s var(--mo-ease-out), box-shadow 0.35s var(--mo-ease-out); } .mo-carousel__btn:hover { transform: translate3d(0, -3px, 0); background: var(--premium-blue); color: #fff; box-shadow: 0 14px 30px rgba(49, 126, 254, 0.3); } .mo-carousel__dots { display: flex; align-items: center; gap: 8px; } .mo-carousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(20, 32, 58, 0.18); cursor: pointer; transition: width 0.45s var(--mo-ease-out), background-color 0.45s var(--mo-ease-out); } .mo-carousel__dot.is-current { width: 26px; background: var(--premium-blue); } @media (min-width: 992px) { .mo-carousel__slide { flex-basis: 50%; max-width: 50%; } } @media (max-width: 575px) { .mo-quote { padding: 28px 24px 24px; } .mo-quote__text { font-size: 16px; } } /* -------------------------------------------------------------------------- 15. Closing CTA -------------------------------------------------------------------------- */ .mo-cta-area { padding: 10px 0 100px; } .mo-cta { position: relative; overflow: hidden; border-radius: 32px; padding: 76px 56px; text-align: center; background: linear-gradient(135deg, #0f213d 0%, #163464 48%, #0c2b57 100%); box-shadow: 0 40px 100px rgba(15, 33, 61, 0.28); } /* Slow gradient shimmer across the panel. */ .mo-cta::before { content: ""; position: absolute; inset: -40%; background: conic-gradient( from 0deg, rgba(49, 126, 254, 0) 0deg, rgba(49, 126, 254, 0.26) 90deg, rgba(95, 208, 198, 0.22) 180deg, rgba(49, 126, 254, 0) 300deg ); animation: mo-spin 26s linear infinite; opacity: 0.55; pointer-events: none; } .mo-cta__inner { position: relative; z-index: 2; } .mo-cta__eyebrow { display: inline-block; margin-bottom: 16px; padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fc6ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); } .mo-cta__title { font-size: 46px; line-height: 1.14; letter-spacing: -0.03em; color: #ffffff; margin-bottom: 18px; } body.premium-theme .mo-cta__title { color: #ffffff; } .mo-cta__desc { max-width: 640px; margin: 0 auto 34px; font-size: 17px; color: rgba(255, 255, 255, 0.74); } body.premium-theme .mo-cta__desc { color: rgba(255, 255, 255, 0.74); } .mo-cta__actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .mo-cta__ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 13px 26px; border-radius: 999px; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.24); transition: transform 0.4s var(--mo-ease-out), background-color 0.4s var(--mo-ease-out), border-color 0.4s var(--mo-ease-out); } .mo-cta__ghost:hover { color: #ffffff; transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.42); } /* Glow that tracks the pointer across the CTA panel. */ .mo-cta__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; left: 0; top: 0; margin: -210px 0 0 -210px; background: radial-gradient(circle, rgba(111, 176, 255, 0.3) 0%, rgba(111, 176, 255, 0) 68%); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--mo-ease-soft); will-change: transform; z-index: 1; } .mo-cta:hover .mo-cta__glow { opacity: 1; } @media (max-width: 767px) { .mo-cta { padding: 54px 26px; border-radius: 26px; } .mo-cta__title { font-size: 32px; } .mo-cta__desc { font-size: 15px; } } /* -------------------------------------------------------------------------- 16. Section furniture and parallax -------------------------------------------------------------------------- */ body.premium-theme .te-section-title .short-title { position: relative; display: inline-block; } /* Section eyebrow gets a rule that draws itself as the heading arrives. */ body.premium-theme .te-section-title .short-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--premium-blue), rgba(95, 208, 198, 0)); transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--mo-ease-out) 0.2s; } body.premium-theme [data-reveal].is-revealed .short-title::after, body.premium-theme .te-section-title.is-revealed .short-title::after { transform: scaleX(1); } /* Scroll-linked parallax. JS writes --mo-shift; CSS owns the transform so a reduced-motion user simply gets 0. */ .mo-parallax { will-change: transform; transform: translate3d(0, var(--mo-shift, 0px), 0); } .mo-parallax-x { will-change: transform; transform: translate3d(var(--mo-shift-x, 0px), 0, 0); } /* Pointer-driven depth layers (hero art, CTA glow, mockups). */ .mo-depth { will-change: transform; } body.premium-theme .te-about-image-card .te-main-img-inner > img { transition: transform 0.9s var(--mo-ease-out); } body.premium-theme .te-about-image-card:hover .te-main-img-inner > img { transform: scale(1.03); } /* -------------------------------------------------------------------------- 17. Micro-interactions -------------------------------------------------------------------------- */ /* Links get a wipe underline rather than a hard text-decoration. */ body.premium-theme .te-footer-widget ul li a, body.premium-theme .about-cta__link, body.premium-theme .te-breadcrumb-list ul li a { position: relative; display: inline-block; transition: color 0.3s var(--mo-ease-out), transform 0.35s var(--mo-ease-out); } body.premium-theme .te-footer-widget ul li a::after, body.premium-theme .about-cta__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 0.42s var(--mo-ease-out); } body.premium-theme .te-footer-widget ul li a:hover::after, body.premium-theme .about-cta__link:hover::after { transform: scaleX(1); transform-origin: left center; } body.premium-theme .te-footer-widget ul li a:hover { transform: translate3d(4px, 0, 0); } /* Form fields lift and glow on focus. */ body.premium-theme .form-control, body.premium-theme .contact-three__input-box .form-control, body.premium-theme textarea.form-control { transition: border-color 0.35s var(--mo-ease-out), box-shadow 0.35s var(--mo-ease-out), transform 0.35s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out); } body.premium-theme .form-control:focus { border-color: var(--premium-blue); box-shadow: 0 0 0 4px rgba(49, 126, 254, 0.13); transform: translate3d(0, -2px, 0); outline: none; } body.premium-theme .contact-three__input-box { position: relative; } /* Field labels rise slightly while the field below them has focus. */ body.premium-theme .contact-comment-section h6 { transition: color 0.3s var(--mo-ease-out), transform 0.3s var(--mo-ease-out); } body.premium-theme .mo-field-active h6 { color: var(--premium-blue); transform: translate3d(0, -2px, 0); } /* Validation and flash messages slide in instead of appearing. */ body.premium-theme .alert, body.premium-theme .text-danger, body.premium-theme label.error { animation: mo-message-in 0.5s var(--mo-ease-out) both; } @keyframes mo-message-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } } /* Icon buttons and social/list icons react on hover. */ body.premium-theme .te-list-item .icon, body.premium-theme .about-value__icon, body.premium-theme .te-single-info-list .icon { transition: transform 0.45s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out); } body.premium-theme .te-list-item:hover .icon, body.premium-theme .about-value:hover .about-value__icon, body.premium-theme .te-single-info-list:hover .icon { transform: scale(1.12) rotate(-6deg); } body.premium-theme .about-value { transition: transform 0.45s var(--mo-ease-out), box-shadow 0.45s var(--mo-ease-out); } body.premium-theme .about-value:hover { transform: translate3d(0, -8px, 0); } /* Selected-work cards on the services page. */ body.premium-theme .site-card { transition: transform 0.5s var(--mo-ease-out), box-shadow 0.5s var(--mo-ease-out), border-color 0.5s var(--mo-ease-out); } body.premium-theme .site-card:hover { transform: translate3d(0, -10px, 0); } body.premium-theme .site-card__shot { display: block; overflow: hidden; } body.premium-theme .site-card__shot img { transition: transform 0.9s var(--mo-ease-out); } body.premium-theme .site-card:hover .site-card__shot img { transform: scale(1.07); } body.premium-theme .site-card__arrow { transition: transform 0.45s var(--mo-ease-out); } body.premium-theme .site-card:hover .site-card__arrow { transform: translate3d(4px, -4px, 0); } /* Scroll-to-top control fades and scales in. */ .progress-wrap { transform: scale(0.6) translate3d(0, 12px, 0); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--mo-ease-out), transform 0.5s var(--mo-ease-out), visibility 0.4s var(--mo-ease-out); } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: none; } .progress-wrap:hover { transform: translate3d(0, -4px, 0); } /* Preloader hand-off: the page content fades up once the loader clears. */ html.mo-js body.premium-theme .mo-page-content { opacity: 0; transition: opacity 0.5s var(--mo-ease-soft); } html.mo-js body.premium-theme.mo-loaded .mo-page-content { opacity: 1; } /* -------------------------------------------------------------------------- 18. Reduced motion and low-power fallbacks -------------------------------------------------------------------------- */ /* The class is set by JS from the media query so it also covers the canvas, pointer and carousel behaviour, not just CSS transitions. */ html.mo-reduced [data-reveal], html.mo-reduced .mo-word__in, html.mo-reduced .mo-step__node, html.mo-reduced .mo-step__body, html.mo-reduced .mo-quote, html.mo-reduced .mo-stars i, html.mo-reduced .mo-card-arrow, html.mo-reduced .te-menu-sidebar-area .te-menu-sidebar-logo, html.mo-reduced .te-menu-sidebar-area .te-mobile-nav-menu, html.mo-reduced .te-menu-sidebar-area .te-menu-sidebar-content .te-menu-sidebar-single-widget, html.mo-reduced .mo-logo__text .mo-char, html.mo-reduced body.premium-theme .mo-page-content { opacity: 1 !important; transform: none !important; clip-path: none !important; } html.mo-reduced .mo-blob, html.mo-reduced .mo-grid, html.mo-reduced .mo-shape, html.mo-reduced .mo-hero-glow, html.mo-reduced .mo-mockup__inner, html.mo-reduced .mo-cta::before, html.mo-reduced .mo-chat__typing span { animation: none !important; } html.mo-reduced .mo-particles, html.mo-reduced .mo-cursor, html.mo-reduced .mo-preview { display: none !important; } html.mo-reduced .mo-page-fade { display: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.mo-js) [data-reveal] { opacity: 1; transform: none; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Coarse pointers never get the cursor, previews or magnetism. */ @media (hover: none), (pointer: coarse) { .mo-cursor, .mo-preview { display: none !important; } } /* Trim the ambient work on small screens where it costs the most. */ @media (max-width: 767px) { .mo-blob { filter: blur(48px); opacity: 0.4; } .mo-blob--c { display: none; } .mo-grid { animation: none; } .mo-shape { display: none; } .mo-particles { display: none; } .mo-cta::before { animation-duration: 44s; } } /* Devices that report a save-data preference get the calm version. */ @media (prefers-reduced-data: reduce) { .mo-particles, .mo-blob, .mo-shape { display: none; } } /* Failsafe: if the reveal observer never runs, nothing stays invisible. */ html.mo-js.mo-force-reveal [data-reveal], html.mo-js.mo-force-reveal .mo-word__in, html.mo-js.mo-force-reveal body.premium-theme .mo-page-content { opacity: 1 !important; transform: none !important; clip-path: none !important; } /* -------------------------------------------------------------------------- 19. Card spotlight (pointer-tracked glow injected by motion.js) -------------------------------------------------------------------------- */ .mo-spot { position: absolute; top: 0; left: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 0; background: radial-gradient(circle, rgba(49, 126, 254, 0.16) 0%, rgba(49, 126, 254, 0) 66%); transition: opacity 0.45s var(--mo-ease-soft); will-change: transform; } [data-spotlight] { position: relative; overflow: hidden; } [data-spotlight]:hover .mo-spot { opacity: 1; } /* Keep real content above the glow. */ [data-spotlight] > *:not(.mo-spot) { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 20. Animated hero visual Replaces the flat clipped screenshot with a live, vector-crisp composition. -------------------------------------------------------------------------- */ body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img { right: 0; top: 0; width: 54vw; max-width: 860px; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; } .mo-hero-visual { position: relative; width: 640px; height: 620px; max-width: 100%; display: flex; align-items: center; justify-content: center; perspective: 1400px; } /* Layered ambience behind the dashboard. */ .mo-hero-visual__aura { position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, rgba(49, 126, 254, 0.3) 0%, rgba(49, 126, 254, 0) 62%), radial-gradient(circle at 68% 66%, rgba(95, 208, 198, 0.24) 0%, rgba(95, 208, 198, 0) 60%); filter: blur(18px); animation: mo-pulse-glow 11s var(--mo-ease-soft) infinite; } .mo-hero-visual__rings { position: absolute; width: 560px; height: 560px; animation: mo-spin 60s linear infinite; } .mo-hero-visual__rings circle { fill: none; stroke: rgba(49, 126, 254, 0.2); stroke-width: 1; } .mo-hero-visual__rings circle:nth-child(2) { stroke: rgba(95, 208, 198, 0.22); stroke-dasharray: 6 12; } .mo-hero-visual__rings circle:nth-child(3) { stroke: rgba(49, 126, 254, 0.12); stroke-dasharray: 2 9; } /* The dashboard itself: a glass panel on a gentle 3D lean. */ .mo-dash-wrap { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; } .mo-dash { position: relative; width: 480px; max-width: 92%; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 40px 90px rgba(15, 33, 61, 0.22), 0 6px 18px rgba(15, 33, 61, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: rotateY(-11deg) rotateX(4deg); transform-style: preserve-3d; } .mo-dash__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: rgba(243, 247, 253, 0.95); border-bottom: 1px solid rgba(20, 32, 58, 0.06); } .mo-dash__dot { width: 9px; height: 9px; border-radius: 50%; } .mo-dash__dot:nth-child(1) { background: #ff766a; } .mo-dash__dot:nth-child(2) { background: #ffc857; } .mo-dash__dot:nth-child(3) { background: #5fd0c6; } .mo-dash__url { margin-left: 10px; flex: 1; height: 20px; border-radius: 999px; background: rgba(20, 32, 58, 0.05); display: flex; align-items: center; padding: 0 10px; font-size: 10px; letter-spacing: 0.04em; color: var(--premium-muted); } .mo-dash__body { display: grid; grid-template-columns: 54px 1fr; min-height: 330px; } .mo-dash__rail { border-right: 1px solid rgba(20, 32, 58, 0.06); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; background: rgba(248, 251, 255, 0.7); } .mo-dash__rail span { width: 22px; height: 22px; border-radius: 7px; background: rgba(49, 126, 254, 0.12); } .mo-dash__rail span:first-child { background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-deep)); } .mo-dash__main { padding: 20px 20px 22px; } .mo-dash__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--premium-blue); margin-bottom: 8px; } .mo-dash__title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--premium-text); margin-bottom: 16px; } .mo-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; } .mo-kpi { border-radius: 12px; padding: 10px 11px; background: rgba(49, 126, 254, 0.07); border: 1px solid rgba(49, 126, 254, 0.1); } .mo-kpi:nth-child(2) { background: rgba(95, 208, 198, 0.1); border-color: rgba(95, 208, 198, 0.16); } .mo-kpi:nth-child(3) { background: rgba(126, 106, 255, 0.08); border-color: rgba(126, 106, 255, 0.14); } .mo-kpi__v { display: block; font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--premium-text); } .mo-kpi__l { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--premium-muted); } /* Bar chart — bars grow once on entry, then hold. */ .mo-chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding: 0 2px 0; border-bottom: 1px solid rgba(20, 32, 58, 0.07); margin-bottom: 14px; } .mo-chart__bar { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(49, 126, 254, 0.85), rgba(49, 126, 254, 0.35)); transform: scaleY(0); transform-origin: bottom center; height: var(--h, 40%); animation: mo-bar-grow 1s var(--mo-ease-out) forwards; animation-delay: calc(600ms + var(--i, 0) * 90ms); } .mo-chart__bar:nth-child(even) { background: linear-gradient(180deg, rgba(95, 208, 198, 0.85), rgba(95, 208, 198, 0.3)); } .mo-chart__bar--peak { background: linear-gradient(180deg, var(--premium-blue), rgba(49, 126, 254, 0.5)); box-shadow: 0 0 22px rgba(49, 126, 254, 0.4); } @keyframes mo-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Workflow row with a connector that keeps flowing. */ .mo-flow { display: flex; align-items: center; gap: 8px; } .mo-flow__node { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; color: var(--premium-text); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(20, 32, 58, 0.08); } .mo-flow__node i { color: var(--premium-blue); font-size: 9px; } .mo-flow__link { flex: 1; height: 2px; border-radius: 2px; background: rgba(49, 126, 254, 0.16); position: relative; overflow: hidden; } .mo-flow__link::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, rgba(49, 126, 254, 0), var(--premium-blue), rgba(49, 126, 254, 0)); animation: mo-flow-pulse 2.6s var(--mo-ease-soft) infinite; } .mo-flow__link:nth-of-type(2)::after { animation-delay: 0.5s; } @keyframes mo-flow-pulse { from { transform: translate3d(-120%, 0, 0); } to { transform: translate3d(320%, 0, 0); } } /* The rotating award badge, re-hosted inside the new visual. */ body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img .company-award { position: absolute; left: auto; right: -40px; bottom: 26px; top: auto; margin-top: 0; transform: scale(0.68); transform-origin: center center; z-index: 4; } .mo-award-mark { width: 46px; height: 46px; } /* Mockup placement is relative to the visual, not the viewport. */ .mo-hero-visual .mo-mockups { z-index: 3; } .mo-hero-visual .mo-mockup--window { top: 2%; right: 62%; } .mo-hero-visual .mo-mockup--metric { top: 12%; right: -6%; } .mo-hero-visual .mo-mockup--chat { bottom: 4%; right: 58%; } .mo-hero-visual .mo-mockup--badge { bottom: 34%; right: -12%; } @media (max-width: 1599px) { .mo-hero-visual { width: 570px; height: 580px; } .mo-dash { width: 430px; } } @media (max-width: 1399px) { body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img { width: 50vw; } .mo-hero-visual { width: 500px; height: 540px; } .mo-dash { width: 390px; } .mo-hero-visual .mo-mockup--window { right: 66%; } .mo-hero-visual .mo-mockup--badge { display: none; } } @media (max-width: 1199px) { body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img { width: 46vw; opacity: 0.9; } .mo-hero-visual { width: 420px; height: 480px; } .mo-dash { width: 340px; transform: rotateY(-8deg) rotateX(3deg); } .mo-hero-visual .mo-mockups { display: none; } .mo-hero-visual__rings { width: 440px; height: 440px; } body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img .company-award { right: -46px; bottom: 4px; transform: scale(0.56); } } @media (max-width: 991px) { body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img { position: relative; width: 100%; max-width: 100%; height: auto; margin-top: 48px; opacity: 1; } .mo-hero-visual { width: 100%; height: auto; padding: 40px 0 20px; } .mo-dash { transform: none; width: 100%; max-width: 420px; } .mo-hero-visual__aura { width: 420px; height: 420px; } .mo-hero-visual__rings { display: none; } body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img .company-award { display: none; } } @media (max-width: 575px) { .mo-dash__body { grid-template-columns: 44px 1fr; min-height: 0; } .mo-dash__main { padding: 16px; } .mo-dash__kpis { gap: 7px; } .mo-kpi { padding: 8px; } .mo-chart { height: 76px; } .mo-flow__node { font-size: 9px; padding: 5px 8px; } } /* The hero column no longer needs the mobile photo overlay. */ body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img-overlay { display: none; } /* -------------------------------------------------------------------------- 21. Narrow-viewport corrections -------------------------------------------------------------------------- */ /* A horizontal entrance offset is fine on a wide desktop, but on a phone it parks the element past the right edge and the document grows a horizontal scrollbar until the reveal fires. Below the tablet breakpoint every reveal travels vertically instead. */ @media (max-width: 991px) { html.mo-js [data-reveal="left"], html.mo-js [data-reveal="right"] { transform: translate3d(0, 30px, 0); } html.mo-js [data-reveal="drift-left"], html.mo-js [data-reveal="drift-right"] { transform: translate3d(0, 24px, 0); } .mo-step__body { transform: translate3d(0, 18px, 0); } .mo-timeline__rail { left: 22px; } } /* Belt and braces: an off-canvas decorative layer must never be able to widen the document. The theme sets this from JS once the preloader clears; doing it in CSS means it is true from the first paint too. */ body.premium-theme { overflow-x: hidden; } /* On mobile the hero art follows the copy, rather than pushing the headline below the fold. The slider box is not a flex container by default, so it becomes one only at this breakpoint. */ @media (max-width: 991px) { body.premium-theme .slider-area.style-2 .te-single-slider { display: flex; flex-direction: column; } body.premium-theme .slider-area.style-2 .te-single-slider > .container { order: 1; height: auto; } body.premium-theme .slider-area.style-2 .te-single-slider .slider-feature-img { order: 2; margin-top: 40px; } .mo-dash { max-width: 100%; } .mo-hero-visual__aura { width: 320px; height: 320px; } } /* The dashboard is a fixed-width composition; below this it has to give. */ @media (max-width: 420px) { .mo-dash__url { display: none; } .mo-dash__kpis { grid-template-columns: 1fr 1fr; } .mo-dash__kpis .mo-kpi:last-child { display: none; } .mo-flow { gap: 5px; } } /* -------------------------------------------------------------------------- 22. Website showcase (services page) Image-led cards: the screenshot is the content, so the hover state does the talking rather than a paragraph of copy. -------------------------------------------------------------------------- */ body.premium-theme .site-showcase-grid { gap: 30px; } body.premium-theme .site-card { position: relative; isolation: isolate; transition: transform 0.5s var(--mo-ease-out), box-shadow 0.5s var(--mo-ease-out), border-color 0.5s var(--mo-ease-out); } /* Soft gradient ring that lights up on hover. */ body.premium-theme .site-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(49, 126, 254, 0.45); opacity: 0; transition: opacity 0.45s var(--mo-ease-out); } body.premium-theme .site-card:hover { transform: translate3d(0, -10px, 0); box-shadow: 0 34px 76px rgba(15, 33, 61, 0.18); } body.premium-theme .site-card:hover::after, body.premium-theme .site-card:focus-visible::after { opacity: 1; } body.premium-theme .site-card:focus-visible { outline: none; transform: translate3d(0, -10px, 0); } /* The capture pans slowly downward on hover, revealing more of the page. */ body.premium-theme .site-card__shot img { transition: transform 4s var(--mo-ease-soft); will-change: transform; } body.premium-theme .site-card:hover .site-card__shot img { transform: translateY(-16%) scale(1.04); } body.premium-theme .site-card__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 24, 46, 0) 38%, rgba(11, 24, 46, 0.72) 100%); opacity: 0; transition: opacity 0.45s var(--mo-ease-out); } body.premium-theme .site-card:hover .site-card__veil { opacity: 1; } /* "Visit site" chip rises out of the bottom of the screenshot. */ body.premium-theme .site-card__view { position: absolute; left: 18px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--premium-text); background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 26px rgba(15, 33, 61, 0.24); opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.42s var(--mo-ease-out), transform 0.42s var(--mo-ease-out); } body.premium-theme .site-card__view i { color: var(--premium-blue); font-size: 11px; transition: transform 0.42s var(--mo-ease-out); } body.premium-theme .site-card:hover .site-card__view { opacity: 1; transform: none; } body.premium-theme .site-card:hover .site-card__view i { transform: translate3d(3px, -3px, 0); } /* Name and host shift right together, so the card reads as one object. */ body.premium-theme .site-card__name, body.premium-theme .site-card__host { transition: transform 0.45s var(--mo-ease-out), color 0.35s var(--mo-ease-out); } body.premium-theme .site-card:hover .site-card__name { transform: translate3d(4px, 0, 0); color: var(--premium-blue); } body.premium-theme .site-card:hover .site-card__host { transform: translate3d(4px, 0, 0); } body.premium-theme .site-card__arrow { transition: transform 0.45s var(--mo-ease-out); } body.premium-theme .site-card:hover .site-card__arrow { transform: translate3d(4px, -4px, 0); } /* Touch devices have no hover, so surface the affordance permanently and skip the pan, which would otherwise be stuck half-applied. */ @media (hover: none) { body.premium-theme .site-card__view { opacity: 1; transform: none; } body.premium-theme .site-card__veil { opacity: 1; } } html.mo-reduced body.premium-theme .site-card__shot img, html.mo-reduced body.premium-theme .site-card, html.mo-reduced body.premium-theme .site-card__view { transition: none !important; } html.mo-reduced body.premium-theme .site-card:hover .site-card__shot img { transform: none; } html.mo-reduced body.premium-theme .site-card__view { opacity: 1; transform: none; } @media (max-width: 575px) { body.premium-theme .site-card__view { left: 14px; bottom: 12px; padding: 8px 13px; font-size: 12px; } } /* -------------------------------------------------------------------------- 23. Portfolio section footer -------------------------------------------------------------------------- */ .mo-worklist__footer { display: flex; justify-content: center; margin-top: 44px; } /* The homepage grid sits inside the portfolio band, which already carries the section rhythm, so it only needs its own top gap. */ body.premium-theme .portfolio-area .site-showcase-grid { margin-top: 40px; } body.premium-theme .portfolio-area .mo-worklist { margin-top: 52px; } /* -------------------------------------------------------------------------- 24. Breadcrumb hero The photo stays as the base plate; everything on top of it is live — an aurora wash, a drifting light grid, orbit rings that track the pointer and glass pill crumbs. -------------------------------------------------------------------------- */ body.premium-theme .page-breadcrumb-area { padding-top: 210px; padding-bottom: 120px; isolation: isolate; } /* The overlay is what makes white type readable over any artwork, so it gets a touch more weight now that there is motion behind it. */ body.premium-theme .page-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 16, 34, 0.86) 0%, rgba(9, 23, 45, 0.62) 55%, rgba(9, 23, 45, 0.74) 100%), linear-gradient(180deg, rgba(6, 16, 34, 0.34) 0%, rgba(6, 16, 34, 0.6) 100%); } body.premium-theme .page-breadcrumb-area .mo-ambient { z-index: 2; opacity: 0.9; } body.premium-theme .page-breadcrumb-area .mo-blob { filter: blur(80px); opacity: 0.42; } body.premium-theme .page-breadcrumb-area .mo-blob--a { width: 520px; height: 520px; top: -180px; left: -80px; background: radial-gradient(circle at 40% 40%, rgba(79, 148, 255, 0.65), rgba(79, 148, 255, 0) 68%); } body.premium-theme .page-breadcrumb-area .mo-blob--b { width: 460px; height: 460px; bottom: -200px; right: -60px; background: radial-gradient(circle at 55% 45%, rgba(95, 208, 198, 0.34), rgba(95, 208, 198, 0) 70%); } /* A light-on-dark version of the drifting grid. */ .mo-grid--light { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); mask-image: radial-gradient(ellipse 78% 74% at 40% 45%, #000 12%, transparent 82%); -webkit-mask-image: radial-gradient(ellipse 78% 74% at 40% 45%, #000 12%, transparent 82%); } /* Pointer-tracked glow behind the heading. */ .mo-crumb-glow { position: absolute; z-index: 2; width: 560px; height: 560px; left: 12%; top: 50%; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(120, 178, 255, 0.28) 0%, rgba(120, 178, 255, 0) 66%); animation: mo-pulse-glow 10s var(--mo-ease-soft) infinite; } /* Orbit rings anchored to the right edge. */ .mo-crumb-arc { position: absolute; z-index: 2; width: 420px; height: 420px; right: -110px; top: 50%; margin-top: -210px; pointer-events: none; opacity: 0.5; } .mo-crumb-arc circle { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; } .mo-crumb-arc circle:nth-child(2) { stroke: rgba(120, 178, 255, 0.34); stroke-dasharray: 5 11; } .mo-crumb-arc circle:nth-child(3) { stroke: rgba(95, 208, 198, 0.3); stroke-dasharray: 2 8; } /* The rings rotate on a wrapper-free element, so the pointer parallax writes translate and the spin lives on a separate animation-only pseudo layer. */ @media (prefers-reduced-motion: no-preference) { .mo-crumb-arc circle:nth-child(2), .mo-crumb-arc circle:nth-child(3) { transform-origin: 210px 210px; animation: mo-spin 52s linear infinite; } .mo-crumb-arc circle:nth-child(3) { animation-duration: 38s; animation-direction: reverse; } } /* Content sits above every decorative layer. */ body.premium-theme .page-breadcrumb-area .container { position: relative; z-index: 3; } body.premium-theme .page-breadcrumb-area .te-breadcrumb-wrapper { box-shadow: none; text-align: center; } /* Eyebrow chip with a live status dot. */ .mo-crumb-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 8px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #cfe2ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mo-crumb-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd0c6; box-shadow: 0 0 0 0 rgba(95, 208, 198, 0.6); animation: mo-dot-pulse 2.4s var(--mo-ease-soft) infinite; } @keyframes mo-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 208, 198, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(95, 208, 198, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 208, 198, 0); } } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 60px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: #ffffff; text-shadow: 0 6px 34px rgba(4, 10, 24, 0.42); max-width: 900px; margin: 0 auto; } /* Crumbs as glass pills with chevron separators. */ body.premium-theme .te-breadcrumb-list { margin-top: 26px; } body.premium-theme .te-breadcrumb-list ul { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 7px 10px; margin: 0; list-style: none; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(4, 12, 28, 0.28); } body.premium-theme .te-breadcrumb-list ul li { display: inline-flex; align-items: center; font-size: 15px; line-height: 1.4; font-weight: 600; color: rgba(255, 255, 255, 0.72); text-shadow: none; } /* Chevron between crumbs, drawn rather than typed so it never wraps oddly. */ body.premium-theme .te-breadcrumb-list ul li + li::before { content: ""; width: 6px; height: 6px; margin: 0 4px 0 0; border-right: 1.6px solid rgba(255, 255, 255, 0.36); border-bottom: 1.6px solid rgba(255, 255, 255, 0.36); transform: rotate(-45deg); flex: 0 0 auto; } body.premium-theme .te-breadcrumb-list ul li a { display: inline-block; padding: 7px 15px; border-radius: 999px; font-size: 15px; line-height: 1.4; font-weight: 600; color: rgba(255, 255, 255, 0.86); text-shadow: none; transition: background-color 0.35s var(--mo-ease-out), color 0.35s var(--mo-ease-out), transform 0.35s var(--mo-ease-out); } body.premium-theme .te-breadcrumb-list ul li a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.16); transform: translate3d(0, -2px, 0); } body.premium-theme .te-breadcrumb-list ul li.active { padding: 7px 15px; border-radius: 999px; color: #0f213d; background: linear-gradient(135deg, #ffffff 0%, #e8f1ff 100%); box-shadow: 0 8px 20px rgba(4, 12, 28, 0.24); } /* Soft hand-off into the page background below. */ .mo-crumb-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(244, 247, 251, 0) 0%, rgba(244, 247, 251, 0.16) 100%); } @media (max-width: 1199px) { .mo-crumb-arc { right: -170px; opacity: 0.4; } .mo-crumb-glow { left: 50%; } } @media (max-width: 991px) { body.premium-theme .page-breadcrumb-area { padding-top: 170px; padding-bottom: 96px; } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 46px; } .mo-crumb-arc { display: none; } .mo-crumb-glow { width: 400px; height: 400px; margin: -200px 0 0 -200px; } } @media (max-width: 767px) { body.premium-theme .page-breadcrumb-area { padding-top: 150px; padding-bottom: 78px; } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 34px; } body.premium-theme .te-breadcrumb-list ul { padding: 5px 7px; } body.premium-theme .te-breadcrumb-list ul li, body.premium-theme .te-breadcrumb-list ul li a { font-size: 13px; } body.premium-theme .te-breadcrumb-list ul li a, body.premium-theme .te-breadcrumb-list ul li.active { padding: 6px 11px; } .mo-crumb-eyebrow { font-size: 10px; padding: 7px 14px; letter-spacing: 0.1em; } } html.mo-reduced .mo-crumb-glow, html.mo-reduced .mo-crumb-eyebrow__dot, html.mo-reduced .mo-crumb-arc circle { animation: none !important; } /* -------------------------------------------------------------------------- 25. Corrections -------------------------------------------------------------------------- */ /* The theme accents a inside a section title (".title span { color: blue }") to highlight one word. Splitting a heading wraps every word in a span, so the whole heading inherited the accent. Word wrappers are purely structural and must never carry colour of their own. */ html.mo-js .mo-split .mo-word, html.mo-js .mo-split .mo-word__in, html.mo-js .mo-word, html.mo-js .mo-word__in { color: inherit; } /* -------------------------------------------------------------------------- 26. Breadcrumb / header separation The fixed nav pill is white; the breadcrumb card is dark. Overlapping the two made the pill look wedged into the artwork, so the card now starts below the nav and carries its own vertical rhythm. -------------------------------------------------------------------------- */ body.premium-theme .page-breadcrumb-area { margin-top: 168px; padding-top: 76px; padding-bottom: 84px; } /* An even, centre-weighted scrim: the old left-heavy gradient left the headline sitting on the busiest part of the artwork. */ body.premium-theme .page-overlay { background: radial-gradient(ellipse 62% 78% at 50% 52%, rgba(6, 16, 34, 0.82) 0%, rgba(6, 16, 34, 0.52) 62%, rgba(6, 16, 34, 0.42) 100%), linear-gradient(180deg, rgba(6, 16, 34, 0.58) 0%, rgba(6, 16, 34, 0.34) 42%, rgba(6, 16, 34, 0.66) 100%); } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 54px; } .mo-crumb-glow { left: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; } /* With the card shorter, the rings need to sit tighter to the edge. */ .mo-crumb-arc { width: 340px; height: 340px; right: -90px; margin-top: -170px; } .mo-crumb-arc circle:nth-child(2), .mo-crumb-arc circle:nth-child(3) { transform-origin: 210px 210px; } @media (max-width: 1199px) { body.premium-theme .page-breadcrumb-area { margin-top: 150px; } } @media (max-width: 991px) { body.premium-theme .page-breadcrumb-area { margin-top: 122px; padding-top: 60px; padding-bottom: 66px; } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 42px; } } @media (max-width: 767px) { body.premium-theme .page-breadcrumb-area { margin-top: 104px; padding-top: 48px; padding-bottom: 54px; } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 32px; } } /* -------------------------------------------------------------------------- 27. Services page intro The lead paragraph was a bare left-aligned line hanging under the banner. -------------------------------------------------------------------------- */ body.premium-theme .shop-page-area { padding: 54px 0 6px !important; } body.premium-theme .shop-page-area .product-list { justify-content: center; } body.premium-theme .shop-page-area .product-list > .col-12 { max-width: 780px; margin: 0 auto; text-align: center; } body.premium-theme .shop-page-area .product-list p, body.premium-theme .shop-page-area .product-list > .col-12 > div { font-size: 18px; line-height: 1.75; color: var(--premium-muted); margin-bottom: 0; } @media (max-width: 767px) { body.premium-theme .shop-page-area { padding: 38px 0 4px !important; } body.premium-theme .shop-page-area .product-list p, body.premium-theme .shop-page-area .product-list > .col-12 > div { font-size: 16px; } } /* The showcase then needs a little less top gap, since the intro supplies it. */ body.premium-theme .site-showcase-area { padding-top: 18px; } /* -------------------------------------------------------------------------- 28. Compact breadcrumb bar The tall centred banner ate half the first screen before any content. On desktop it becomes a two-column bar — identity on the left, trail on the right — which roughly halves its height and reads as deliberate rather than merely cropped. It still stacks and centres on small screens. -------------------------------------------------------------------------- */ @media (min-width: 992px) { body.premium-theme .page-breadcrumb-area { padding-top: 40px; padding-bottom: 44px; } body.premium-theme .page-breadcrumb-area .te-breadcrumb-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 32px; text-align: left; padding: 0 46px; } body.premium-theme .page-breadcrumb-area .te-page-heading { order: 1; min-width: 0; } body.premium-theme .page-breadcrumb-area .mo-crumb-eyebrow { order: 0; flex: 0 0 auto; margin-bottom: 0; align-self: center; } body.premium-theme .page-breadcrumb-area .te-breadcrumb-list { order: 2; flex: 0 0 auto; margin-top: 0; } body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 40px; line-height: 1.15; margin: 0; max-width: none; text-align: left; } /* The eyebrow now sits inline, so it reads as a label on the title. */ body.premium-theme .page-breadcrumb-area .mo-crumb-eyebrow { padding: 7px 15px; font-size: 11px; } /* Decoration scales with the shorter band. */ .mo-crumb-glow { width: 420px; height: 420px; margin: -210px 0 0 -210px; left: 34%; } .mo-crumb-arc { width: 240px; height: 240px; right: -70px; margin-top: -120px; } body.premium-theme .page-breadcrumb-area .mo-blob { filter: blur(64px); opacity: 0.36; } body.premium-theme .page-breadcrumb-area .mo-blob--a { width: 340px; height: 340px; top: -150px; } body.premium-theme .page-breadcrumb-area .mo-blob--b { width: 320px; height: 320px; bottom: -160px; } .mo-crumb-fade { height: 60px; } } @media (min-width: 1400px) { body.premium-theme .page-breadcrumb-area .te-page-title { font-size: 44px; } } /* -------------------------------------------------------------------------- 29. Service copy (category pages) The category summary is editor HTML, so it is styled by element rather than by class. Everything here mirrors the homepage vocabulary: glass card, ambient wash, accent rules, check-marked lists. -------------------------------------------------------------------------- */ .mo-service-copy { position: relative; padding: 56px 0 24px; overflow: hidden; background: linear-gradient(180deg, #f2f7fd 0%, #eef4fb 55%, #f5f8fc 100%); } .mo-service-copy .mo-ambient { opacity: 0.8; } .mo-service-copy .mo-blob--a { width: 460px; height: 460px; top: -180px; left: -140px; } .mo-service-copy .mo-blob--b { width: 420px; height: 420px; bottom: -180px; right: -120px; } .mo-rich-card { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 62px 64px 56px; border-radius: var(--premium-radius); background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%); border: 1px solid var(--premium-border); box-shadow: var(--premium-shadow); } /* The card stays wide and light; the copy inside keeps a readable measure so lines never run past roughly 80 characters. */ .mo-rich { max-width: 880px; margin: 0 auto; } /* ---- typography ---- */ .mo-rich { font-size: 17.5px; line-height: 1.85; color: var(--premium-muted); } .mo-rich > *:first-child { margin-top: 0; } .mo-rich > *:last-child { margin-bottom: 0; } .mo-rich h1, .mo-rich h2, .mo-rich h3, .mo-rich h4 { position: relative; color: var(--premium-text); letter-spacing: -0.025em; line-height: 1.22; margin: 42px 0 16px; } .mo-rich h1 { font-size: 34px; } .mo-rich h2 { font-size: 29px; } .mo-rich h3 { font-size: 23px; } .mo-rich h4 { font-size: 19px; } /* Accent bar that grows in as the heading reveals. */ .mo-rich h2::before, .mo-rich h3::before { content: ""; position: absolute; left: -60px; top: 0.42em; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--premium-blue), var(--premium-accent)); transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--mo-ease-out) 0.15s; } .mo-rich h2.is-revealed::before, .mo-rich h3.is-revealed::before { transform: scaleX(1); } .mo-rich p { margin: 0 0 18px; } .mo-rich strong, .mo-rich b { color: var(--premium-text); font-weight: 700; } .mo-rich a { color: var(--premium-blue); font-weight: 600; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s var(--mo-ease-out); } .mo-rich a:hover { background-size: 100% 1px; } /* ---- lists ---- */ .mo-rich ul, .mo-rich ol { margin: 0 0 22px; padding: 0; list-style: none; } .mo-rich li { position: relative; padding-left: 38px; margin-bottom: 12px; } /* Items cascade once their list scrolls in. */ .mo-rich-list li { opacity: 0; transform: translate3d(14px, 0, 0); transition: opacity 0.55s var(--mo-ease-out), transform 0.55s var(--mo-ease-out); } .mo-rich-list.is-revealed li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); } .mo-rich ul li::before { content: "\f00c"; font-family: "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; position: absolute; left: 0; top: 3px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--premium-blue); background: rgba(49, 126, 254, 0.12); } .mo-rich ol { counter-reset: mo-rich-count; } .mo-rich ol li { counter-increment: mo-rich-count; } .mo-rich ol li::before { content: counter(mo-rich-count); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-deep)); } /* ---- rules and quotes ---- */ .mo-rich hr { height: 1px; border: 0; margin: 38px 0; background: linear-gradient(90deg, rgba(49, 126, 254, 0) 0%, rgba(49, 126, 254, 0.28) 22%, rgba(95, 208, 198, 0.28) 78%, rgba(95, 208, 198, 0) 100%); opacity: 1; } .mo-rich blockquote { margin: 26px 0; padding: 20px 24px; border-left: 3px solid var(--premium-blue); border-radius: 0 16px 16px 0; background: rgba(49, 126, 254, 0.06); color: var(--premium-text); font-size: 18px; } .mo-rich img { max-width: 100%; height: auto; border-radius: 18px; margin: 22px 0; } .mo-rich table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 15px; } .mo-rich th, .mo-rich td { padding: 12px 14px; border-bottom: 1px solid var(--premium-border); text-align: left; } .mo-rich th { color: var(--premium-text); font-weight: 700; } @media (max-width: 991px) { .mo-rich-card { padding: 40px 34px 36px; } /* No room for the outdented accent bar, so it tucks inside. */ .mo-rich h2::before, .mo-rich h3::before { left: 0; top: -14px; } .mo-rich h2 { font-size: 25px; margin-top: 40px; } .mo-rich h3 { font-size: 21px; } } @media (max-width: 575px) { .mo-service-copy { padding-top: 38px; } .mo-rich-card { padding: 30px 22px 26px; border-radius: 22px; } .mo-rich { font-size: 16px; } .mo-rich h2 { font-size: 22px; } .mo-rich li { padding-left: 32px; } } html.mo-reduced .mo-rich-list li, html.mo-reduced .mo-rich h2::before, html.mo-reduced .mo-rich h3::before { opacity: 1 !important; transform: none !important; } html.mo-reduced .mo-rich h2::before, html.mo-reduced .mo-rich h3::before { transform: scaleX(1) !important; } /* Inline CTA that closes the service copy. */ .mo-rich-cta { max-width: 880px; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-top: 44px; padding: 28px 32px; border-radius: 22px; background: linear-gradient(135deg, rgba(49, 126, 254, 0.09) 0%, rgba(95, 208, 198, 0.09) 100%); border: 1px solid rgba(49, 126, 254, 0.16); } .mo-rich-cta__title { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; color: var(--premium-text); } .mo-rich-cta__desc { margin: 0; max-width: 560px; color: var(--premium-muted); } @media (max-width: 575px) { .mo-rich-cta { padding: 24px 20px; margin-top: 34px; } .mo-rich-cta__title { font-size: 19px; } } /* Slim lead line used when a service page has no long-form summary. */ .mo-service-lead { padding: 52px 0 4px; text-align: center; } .mo-service-lead p { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: var(--premium-muted); } @media (max-width: 767px) { .mo-service-lead { padding: 36px 0 2px; } .mo-service-lead p { font-size: 16px; } } /* -------------------------------------------------------------------------- 30. Service line-up (all-services page) -------------------------------------------------------------------------- */ .mo-services-area { position: relative; overflow: hidden; padding: 70px 0 40px; } .mo-services-area .container { position: relative; z-index: 1; } .mo-services-area .mo-blob--a { width: 480px; height: 480px; top: -200px; left: -160px; } .mo-services-area .mo-blob--b { width: 440px; height: 440px; bottom: -220px; right: -140px; } .mo-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; } .mo-service-card { position: relative; display: flex; flex-direction: column; padding: 34px 32px 30px; border-radius: var(--premium-radius); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid var(--premium-border); box-shadow: 0 12px 34px rgba(15, 33, 61, 0.07); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 0.45s var(--mo-ease-out), box-shadow 0.45s var(--mo-ease-out), border-color 0.45s var(--mo-ease-out); } /* Gradient wash that fades up on hover. */ .mo-service-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 100% at 50% 0%, rgba(49, 126, 254, 0.13) 0%, rgba(49, 126, 254, 0) 62%), linear-gradient(180deg, rgba(95, 208, 198, 0.09) 0%, rgba(95, 208, 198, 0) 58%); opacity: 0; transition: opacity 0.45s var(--mo-ease-out); } .mo-service-card:hover { transform: translate3d(0, -10px, 0); box-shadow: 0 34px 76px rgba(15, 33, 61, 0.16); border-color: var(--premium-border-strong); } .mo-service-card:hover::after { opacity: 1; } .mo-service-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .mo-service-card__num { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: rgba(20, 32, 58, 0.26); transition: color 0.4s var(--mo-ease-out); } .mo-service-card:hover .mo-service-card__num { color: var(--premium-blue); } .mo-service-card__icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #ffffff; background: linear-gradient(135deg, var(--premium-blue) 0%, var(--premium-blue-deep) 100%); box-shadow: 0 12px 26px rgba(49, 126, 254, 0.28); transition: transform 0.55s var(--mo-ease-out); } .mo-service-card:hover .mo-service-card__icon { transform: scale(1.09) rotate(-7deg); } .mo-service-card__title { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--premium-text); transition: color 0.35s var(--mo-ease-out); } .mo-service-card:hover .mo-service-card__title { color: var(--premium-blue); } .mo-service-card__rule { display: block; width: 38px; height: 3px; margin: 14px 0 14px; border-radius: 3px; background: linear-gradient(90deg, var(--premium-blue), var(--premium-accent)); transform-origin: left center; transition: transform 0.5s var(--mo-ease-out); } .mo-service-card:hover .mo-service-card__rule { transform: scaleX(1.6); } .mo-service-card__desc { font-size: 15.5px; line-height: 1.72; color: var(--premium-muted); margin-bottom: 20px; } /* Pushes the link to the bottom so cards align regardless of copy length. */ .mo-service-card__go { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--premium-blue); } @media (max-width: 1199px) { .mo-services-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 767px) { .mo-services-area { padding: 48px 0 26px; } .mo-services-grid { grid-template-columns: 1fr; margin-top: 32px; } .mo-service-card { padding: 28px 24px 26px; } .mo-service-card__title { font-size: 19px; } } /* -------------------------------------------------------------------------- 31. Other services (shown on a category page) -------------------------------------------------------------------------- */ .mo-other-services { padding: 30px 0 10px; } .mo-other-services__label { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--premium-blue); text-align: center; } .mo-other-services__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .mo-other-services__chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--premium-text); text-decoration: none; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--premium-border); box-shadow: 0 8px 22px rgba(15, 33, 61, 0.06); transition: transform 0.4s var(--mo-ease-out), box-shadow 0.4s var(--mo-ease-out), border-color 0.4s var(--mo-ease-out), color 0.35s var(--mo-ease-out); } .mo-other-services__chip > i:first-child { color: var(--premium-blue); font-size: 13px; } .mo-other-services__chip .mo-arrow { font-size: 11px; opacity: 0.5; } .mo-other-services__chip:hover { transform: translate3d(0, -4px, 0); color: var(--premium-blue); border-color: var(--premium-border-strong); box-shadow: 0 16px 34px rgba(49, 126, 254, 0.16); } @media (max-width: 575px) { .mo-other-services__chip { padding: 10px 16px; font-size: 13.5px; } } /* -------------------------------------------------------------------------- 32. Showcase section rhythm on the services page A distinct band keeps the work from blending into the cards above it. -------------------------------------------------------------------------- */ body.premium-theme .site-showcase-area { position: relative; padding-top: 66px; background: linear-gradient(180deg, rgba(238, 244, 251, 0) 0%, #eef4fb 12%, #eef4fb 88%, rgba(238, 244, 251, 0) 100%); } /* ========================================================================== 33. About — editorial layout Deliberately off-template: no breadcrumb banner, oversized opening statement, running marquee, sticky-column narrative, offset value grid. ========================================================================== */ .ab-page { overflow: hidden; } /* Shared furniture ------------------------------------------------------- */ .ab-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--premium-blue); } .ab-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--premium-accent); animation: mo-dot-pulse 2.4s var(--mo-ease-soft) infinite; } .ab-eyebrow--light { color: #8fbcff; } body.premium-theme .ab-h2 { font-size: 42px; line-height: 1.14; letter-spacing: -0.03em; font-weight: 700; color: var(--premium-text); margin: 0 0 18px; } body.premium-theme .ab-h2--light { color: #ffffff; } .ab-textlink { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--premium-text); text-decoration: none; transition: color 0.35s var(--mo-ease-out); } .ab-textlink:hover { color: var(--premium-blue); } /* 1. Hero ---------------------------------------------------------------- */ .ab-hero { position: relative; padding: 210px 0 90px; } .ab-hero .container { position: relative; z-index: 1; } .ab-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } body.premium-theme .ab-hero__title { font-size: 66px; line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; color: var(--premium-text); margin: 0 0 26px; } .ab-hero__lead { max-width: 520px; font-size: 19px; line-height: 1.75; color: var(--premium-muted); margin: 0 0 34px; } .ab-hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* Overlapping image pair, each on its own parallax depth. */ .ab-hero__art { position: relative; min-height: 500px; } .ab-shot { position: absolute; margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 34px 80px rgba(15, 33, 61, 0.2); } .ab-shot img { display: block; width: 100%; height: 100%; object-fit: cover; } .ab-shot--back { width: 60%; height: 300px; top: 0; right: 0; } .ab-shot--front { width: 68%; height: 340px; left: 0; bottom: 0; border: 6px solid #ffffff; } .ab-badge { position: absolute; right: 4%; bottom: 44px; z-index: 2; padding: 20px 24px; border-radius: 20px; text-align: center; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 24px 60px rgba(15, 33, 61, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .ab-badge__num { display: block; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--premium-blue); font-variant-numeric: tabular-nums; } .ab-badge__label { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--premium-muted); line-height: 1.5; } /* 2. Marquee ------------------------------------------------------------- */ .ab-marquee { position: relative; padding: 22px 0; border-top: 1px solid var(--premium-border); border-bottom: 1px solid var(--premium-border); background: rgba(255, 255, 255, 0.6); overflow: hidden; /* Fade the ends so items enter and leave rather than being cut off. */ mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ab-marquee__track { display: flex; align-items: center; gap: 26px; width: max-content; will-change: transform; /* The list is rendered twice, so shifting by exactly -50% lands on an identical frame and the loop is seamless. */ animation: ab-marquee 38s linear infinite; } .ab-marquee:hover .ab-marquee__track { animation-play-state: paused; } @keyframes ab-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .ab-marquee__item { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--premium-text); white-space: nowrap; } .ab-marquee__sep { font-size: 13px; color: var(--premium-blue); } /* 3. Story --------------------------------------------------------------- */ .ab-story { padding: 96px 0 84px; } .ab-story__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; } .ab-story__sticky { position: sticky; top: 170px; } .ab-story__note { font-size: 16px; line-height: 1.7; color: var(--premium-muted); margin: 0; } .ab-lead { font-size: 22px; line-height: 1.65; color: var(--premium-text); margin: 0 0 44px; } .ab-point { display: grid; grid-template-columns: 62px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--premium-border); } .ab-point__no { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; color: var(--premium-blue); padding-top: 4px; } .ab-point__title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--premium-text); margin: 0 0 8px; } .ab-point p { margin: 0; color: var(--premium-muted); line-height: 1.78; } /* 4. Figures ------------------------------------------------------------- */ .ab-figures { padding: 10px 0 96px; } .ab-figures__row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--premium-border); border-bottom: 1px solid var(--premium-border); } .ab-figure { position: relative; padding: 40px 26px; text-align: center; } .ab-figure + .ab-figure::before { content: ""; position: absolute; left: 0; top: 24%; height: 52%; width: 1px; background: var(--premium-border); } .ab-figure__num { display: block; font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--premium-text); font-variant-numeric: tabular-nums; } .ab-figure__plus { background: linear-gradient(135deg, var(--premium-blue) 0%, var(--premium-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ab-figure__label { display: block; margin-top: 12px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--premium-muted); } /* 5. Values, offset grid -------------------------------------------------- */ .ab-values { padding: 0 0 96px; } .ab-values__head { max-width: 640px; margin-bottom: 50px; } .ab-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* The middle column drops, which is what stops this reading as another uniform card grid like the rest of the site. Done with margin rather than transform so it survives the reveal animation and reduced motion alike. */ @media (min-width: 992px) { .ab-values__grid > *:nth-child(3n + 2) { margin-top: 44px; } .ab-values__grid > *:nth-child(3n + 3) { margin-top: 22px; } } .ab-value { position: relative; padding: 32px 30px 28px; border-radius: var(--premium-radius); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid var(--premium-border); box-shadow: 0 12px 34px rgba(15, 33, 61, 0.07); overflow: hidden; isolation: isolate; transition: box-shadow 0.45s var(--mo-ease-out), border-color 0.45s var(--mo-ease-out); } .ab-value:hover { box-shadow: 0 30px 70px rgba(15, 33, 61, 0.15); border-color: var(--premium-border-strong); } .ab-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 15px; font-size: 18px; color: var(--premium-blue); background: rgba(49, 126, 254, 0.1); transition: transform 0.55s var(--mo-ease-out), background-color 0.4s var(--mo-ease-out); } .ab-value:hover .ab-value__icon { transform: scale(1.09) rotate(-7deg); background: rgba(49, 126, 254, 0.16); } .ab-value__title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--premium-text); margin: 0 0 10px; } .ab-value p { margin: 0; color: var(--premium-muted); line-height: 1.75; font-size: 15.5px; } /* 6. Method band ---------------------------------------------------------- */ .ab-method { position: relative; overflow: hidden; padding: 90px 0 84px; background: linear-gradient(135deg, #0f213d 0%, #14294c 55%, #0d2f5e 100%); } .ab-method .container { position: relative; z-index: 1; } .ab-method .mo-blob { opacity: 0.4; filter: blur(74px); } .ab-method__head { max-width: 640px; margin-bottom: 46px; } .ab-method__row { display: grid; grid-template-columns: 90px 300px 1fr; gap: 24px; align-items: baseline; padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); transition: background-color 0.4s var(--mo-ease-out); } .ab-method__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .ab-method__no { font-size: 15px; font-weight: 800; letter-spacing: 0.14em; color: #6fb0ff; } body.premium-theme .ab-method__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; } .ab-method__desc { margin: 0; color: rgba(255, 255, 255, 0.7); line-height: 1.78; } /* 7. Close ---------------------------------------------------------------- */ .ab-close { padding: 90px 0 100px; } .ab-close__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 52px 56px; border-radius: 30px; background: radial-gradient(120% 140% at 0% 0%, rgba(49, 126, 254, 0.12) 0%, rgba(49, 126, 254, 0) 60%), linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%); border: 1px solid var(--premium-border); box-shadow: var(--premium-shadow); } .ab-close__copy { max-width: 620px; } body.premium-theme .ab-close__title { font-size: 36px; line-height: 1.16; letter-spacing: -0.03em; font-weight: 700; color: var(--premium-text); margin: 0 0 12px; } .ab-close__desc { margin: 0; color: var(--premium-muted); line-height: 1.75; } /* Responsive -------------------------------------------------------------- */ @media (max-width: 1199px) { body.premium-theme .ab-hero__title { font-size: 54px; } .ab-hero { padding-top: 190px; } .ab-story__grid { gap: 46px; } .ab-method__row { grid-template-columns: 70px 260px 1fr; } } @media (max-width: 991px) { .ab-hero { padding: 160px 0 70px; } .ab-hero__grid { grid-template-columns: 1fr; gap: 46px; } body.premium-theme .ab-hero__title { font-size: 44px; } .ab-hero__lead { font-size: 17px; max-width: none; } .ab-hero__art { min-height: 420px; } .ab-shot--back { height: 250px; } .ab-shot--front { height: 290px; } .ab-story { padding: 70px 0 60px; } .ab-story__grid { grid-template-columns: 1fr; gap: 34px; } .ab-story__sticky { position: static; } .ab-lead { font-size: 19px; margin-bottom: 30px; } body.premium-theme .ab-h2 { font-size: 32px; } .ab-figures__row { grid-template-columns: repeat(2, 1fr); } .ab-figure:nth-child(odd)::before { display: none; } .ab-figure:nth-child(n + 3) { border-top: 1px solid var(--premium-border); } .ab-figure__num { font-size: 42px; } .ab-values__grid { grid-template-columns: repeat(2, 1fr); } .ab-method { padding: 70px 0 66px; } .ab-method__row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } .ab-close__inner { padding: 40px 32px; } body.premium-theme .ab-close__title { font-size: 28px; } } @media (max-width: 767px) { .ab-hero { padding: 140px 0 56px; } body.premium-theme .ab-hero__title { font-size: 34px; } .ab-marquee__item { font-size: 16px; } .ab-hero__art { min-height: 340px; } .ab-shot--back { width: 66%; height: 190px; } .ab-shot--front { width: 74%; height: 220px; } .ab-badge { right: 0; bottom: 0; padding: 15px 18px; } .ab-badge__num { font-size: 26px; } .ab-values__grid { grid-template-columns: 1fr; } .ab-figures__row { grid-template-columns: 1fr; } .ab-figure::before { display: none; } .ab-figure { border-top: 1px solid var(--premium-border); } .ab-figure:first-child { border-top: 0; } .ab-point { grid-template-columns: 44px 1fr; gap: 12px; } .ab-close { padding: 60px 0 70px; } .ab-close__inner { padding: 32px 22px; border-radius: 24px; } } html.mo-reduced .ab-marquee__track, html.mo-reduced .ab-eyebrow__dot { animation: none !important; } /* ========================================================================== 34. Contact — split screen A sticky dark invitation panel beside the form on light ground. No breadcrumb banner, so the page reads as a destination rather than another inner page. ========================================================================== */ .ct-page { overflow: hidden; } .ct-split { display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: stretch; } /* Left panel -------------------------------------------------------------- */ .ct-aside { position: relative; display: flex; align-items: center; overflow: hidden; padding: 190px 0 90px; background: linear-gradient(150deg, #e9f2ff 0%, #dbeafe 48%, #e6f4ff 100%); border-right: 1px solid rgba(49, 126, 254, 0.12); } .ct-aside .mo-blob { opacity: 0.5; filter: blur(90px); } .ct-aside .mo-blob--a { width: 460px; height: 460px; top: -160px; left: -140px; background: radial-gradient(circle at 40% 40%, rgba(49, 126, 254, 0.34), rgba(49, 126, 254, 0) 70%); } .ct-aside .mo-blob--b { width: 420px; height: 420px; bottom: -170px; right: -130px; background: radial-gradient(circle at 55% 45%, rgba(95, 208, 198, 0.55), rgba(95, 208, 198, 0) 68%); } .ct-aside__inner { position: relative; z-index: 1; width: 100%; /* Aligns the panel's content with the site container on the left edge while letting the panel itself bleed to the viewport edge. */ max-width: 560px; margin-left: auto; padding: 0 56px 0 24px; } .ct-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 9px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--premium-blue-deep); background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(49, 126, 254, 0.18); box-shadow: 0 8px 20px rgba(15, 33, 61, 0.06); } .ct-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd0c6; animation: mo-dot-pulse 2.4s var(--mo-ease-soft) infinite; } body.premium-theme .ct-title { font-size: 46px; line-height: 1.12; letter-spacing: -0.035em; font-weight: 700; color: var(--premium-text); margin: 0 0 22px; } .ct-lead { font-size: 17px; line-height: 1.78; color: var(--premium-muted); margin: 0 0 38px; } .ct-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; } .ct-detail { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; text-decoration: none; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(49, 126, 254, 0.12); transition: transform 0.4s var(--mo-ease-out), background-color 0.4s var(--mo-ease-out), border-color 0.4s var(--mo-ease-out); } a.ct-detail:hover { transform: translate3d(4px, 0, 0); background: #ffffff; border-color: rgba(49, 126, 254, 0.32); box-shadow: 0 14px 32px rgba(49, 126, 254, 0.14); } .ct-detail__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #ffffff; background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-deep)); } .ct-detail__body { min-width: 0; } .ct-detail__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--premium-muted); } .ct-detail__value { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 600; color: var(--premium-text); overflow-wrap: anywhere; } .ct-detail__go { margin-left: auto; font-size: 12px; color: var(--premium-blue); } .ct-assure { list-style: none; margin: 0; padding: 0; } .ct-assure li { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; font-size: 14.5px; color: var(--premium-muted); } .ct-assure i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #0f8f7f; background: rgba(95, 208, 198, 0.24); } /* Right side -------------------------------------------------------------- */ .ct-formside { padding: 190px 0 80px; background: linear-gradient(180deg, #f6f9fd 0%, #eef4fb 100%); } .ct-formcard { max-width: 620px; margin-right: auto; padding: 44px 46px 40px; border-radius: 28px; background: #ffffff; border: 1px solid var(--premium-border); box-shadow: 0 28px 70px rgba(15, 33, 61, 0.1); margin-left: 56px; } .ct-formcard__head { margin-bottom: 26px; } body.premium-theme .ct-formcard__title { font-size: 25px; font-weight: 700; letter-spacing: -0.025em; color: var(--premium-text); margin: 0 0 6px; } .ct-formcard__note { margin: 0; font-size: 14px; color: var(--premium-muted); } .ct-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } .ct-field--wide { grid-column: 1 / -1; } .ct-field label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--premium-text); transition: color 0.3s var(--mo-ease-out); } .ct-req { color: var(--premium-blue); } .ct-field:focus-within label { color: var(--premium-blue); } body.premium-theme .ct-form .form-control { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--premium-border); background: #fbfcfe; color: var(--premium-text); font-size: 15px; } body.premium-theme .ct-form textarea.form-control { min-height: 130px; resize: vertical; } body.premium-theme .ct-form .form-control:focus { background: #ffffff; border-color: var(--premium-blue); box-shadow: 0 0 0 4px rgba(49, 126, 254, 0.13); transform: translate3d(0, -2px, 0); } /* Captcha sits beside its input rather than stacking under it. Both sides are pinned to the same height so the row reads as one control. */ .ct-captcha { --ct-captcha-h: 52px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; } body.premium-theme .ct-captcha__input .form-control { height: var(--ct-captcha-h); min-height: var(--ct-captcha-h); } .ct-captcha__image { display: flex; align-items: center; gap: 8px; height: var(--ct-captcha-h); padding: 0 6px; border-radius: 14px; background: #f2f6fc; border: 1px solid var(--premium-border); } /* The source image is 180x50; scale it to sit inside the fixed row height without touching its aspect ratio. */ .ct-captcha__image img { height: calc(var(--ct-captcha-h) - 12px); width: auto; max-width: 100%; border-radius: 8px; display: block; } .ct-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--premium-border); } .ct-form__privacy { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--premium-muted); } .ct-form__privacy i { color: var(--premium-accent); } /* Success state ----------------------------------------------------------- */ body.premium-theme .ct-success { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(33, 181, 122, 0.3); background: rgba(33, 181, 122, 0.1); color: #14663f; } body.premium-theme .ct-success i { font-size: 18px; color: #21b57a; } /* Responsive -------------------------------------------------------------- */ @media (max-width: 1399px) { .ct-aside__inner { max-width: 500px; padding-right: 44px; } .ct-formcard { margin-left: 44px; padding: 40px 38px 36px; } body.premium-theme .ct-title { font-size: 40px; } } @media (max-width: 1199px) { .ct-split { grid-template-columns: 1fr; min-height: 0; } .ct-aside { padding: 170px 0 64px; /* Stacked, the divider belongs under the panel, not down its right edge. */ border-right: 0; border-bottom: 1px solid rgba(49, 126, 254, 0.12); } .ct-aside__inner { max-width: 720px; margin: 0 auto; padding: 0 24px; } .ct-formside { padding: 64px 0 80px; } .ct-formcard { max-width: 720px; margin: 0 auto; } } @media (max-width: 767px) { .ct-aside { padding: 140px 0 52px; } body.premium-theme .ct-title { font-size: 30px; } .ct-lead { font-size: 16px; margin-bottom: 28px; } .ct-formside { padding: 44px 0 62px; } .ct-formcard { padding: 30px 22px 28px; border-radius: 22px; } .ct-form__grid { grid-template-columns: 1fr; } .ct-captcha { grid-template-columns: 1fr; } .ct-captcha__image { justify-content: center; } } html.mo-reduced .ct-eyebrow__dot { animation: none !important; } /* ========================================================================== 35. Service pages — About-page editorial treatment Shares the .ab-* vocabulary; these are the service-specific deltas. ========================================================================== */ /* The hero is a single centred column: unlike About, there is no photography to pair it with. */ .sv-hero .container { position: relative; z-index: 1; text-align: center; } .sv-trail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; font-size: 13.5px; font-weight: 600; color: var(--premium-muted); } .sv-trail a { color: var(--premium-muted); text-decoration: none; transition: color 0.3s var(--mo-ease-out); } .sv-trail a:hover { color: var(--premium-blue); } .sv-trail span[aria-hidden] { opacity: 0.42; } .sv-trail__current { color: var(--premium-text); } body.premium-theme .sv-hero__title { /* Service names run long ("Search Engine Optimization"). A ch-based cap forced every one of them onto two lines, so the line finds its own length and the size scales down instead. */ max-width: min(100%, 1100px); margin-left: auto; margin-right: auto; font-size: clamp(26px, 4.6vw, 62px); } /* Headline sweep — SERVICES-COLORS.md § 2. The hero heading ("Our Services" on the listing, the service name such as "Mobile App Development" on a category page) is navy for most of its width with a blue -> teal band of light travelling through it. Colour only: nothing here changes size, spacing, weight or line height. The heading carries `data-split="words"`, and each `.mo-word` wrapper is `overflow: hidden` — it establishes its own paint context, so a gradient clipped on the

cannot paint through it. Each word therefore gets its own copy of the gradient, as the reference calls for. The rule on the

covers the pre-split (and no-JS) state. */ body.premium-theme .sv-hero__title, html.mo-js body.premium-theme .sv-hero__title .mo-word__in { background-image: linear-gradient(100deg, var(--premium-text) 0%, var(--premium-text) 30%, var(--premium-blue) 43%, var(--premium-accent) 50%, var(--premium-blue) 57%, var(--premium-text) 70%, var(--premium-text) 100%); background-repeat: no-repeat; /* Keep the animated position inside 0%–100%: the image is no-repeat and 2.6x the box, so a position outside that range leaves part of the word with no background — and with a transparent text fill, no background means invisible letters. */ background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sv-hero-sweep 6.5s var(--mo-ease-soft) infinite; } @keyframes sv-hero-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* Parked at 0% — navy across most of the word, lifting to blue at the tail. Parking mid-sweep leaves a teal band in the middle of the word, which reads as a fault rather than as a highlight. */ html.mo-reduced body.premium-theme .sv-hero__title, html.mo-reduced body.premium-theme .sv-hero__title .mo-word__in { animation: none; background-position: 0% 0; } .sv-hero__lead { max-width: 640px; margin-left: auto; margin-right: auto; } .sv-hero__actions { justify-content: center; } /* Sticky aside gets its own call to action under the note. */ .sv-aside__cta { margin-top: 24px; } /* The sticky aside repeats the service name. "Mobile App Development" and "Search Engine Optimization" wrapped at the default h2 size in this narrow column, so it scales with the column instead of breaking. */ body.premium-theme .ab-story__sticky .ab-h2 { font-size: clamp(22px, 2.1vw, 32px); line-height: 1.2; } /* The narrative column is the full measure here — no card around it. */ .sv-rich { max-width: none; } .sv-rich > *:first-child { margin-top: 0; } /* Service line-up cards reuse .ab-value, plus a number and a footer link. */ .sv-lineup { padding-top: 84px; } /* The service line-up reuses the About grid, but these cards are a comparison set: readers scan them against each other, so they must be the same box. The staggered top margins eat into the grid row's fixed height, which is what made the three columns different heights. */ .sv-lineup .ab-values__grid > *:nth-child(n) { margin-top: 0; } /* Row height is content-driven by default, so the second row came out shorter than the first. 1fr forces every row to the tallest, making all six boxes identical. Left off below tablet, where a single column would just inherit the tallest card's whitespace. */ @media (min-width: 768px) { .sv-lineup .ab-values__grid { grid-auto-rows: 1fr; } } .sv-card { display: flex; flex-direction: column; text-decoration: none; } .sv-card__go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--premium-blue); } body.premium-theme .sv-card .ab-value__title { transition: color 0.35s var(--mo-ease-out); } .sv-card:hover .ab-value__title { color: var(--premium-blue); } /* Selected work band. */ .sv-work { padding: 20px 0 96px; } .sv-work .ab-values__head { max-width: 640px; margin-bottom: 44px; } .sv-work .site-showcase-grid { margin-top: 0; } @media (max-width: 991px) { .sv-lineup { padding-top: 60px; } .sv-work { padding-bottom: 70px; } body.premium-theme .sv-hero__title { max-width: none; } } /* ========================================================================== 36. Preloader — vector mark and wordmark Replaces the bitmap logo so the loader is sharp on every display and stays on-brand. .premium-preloader__logo is now a span wrapper rather than an img, so the pulse moves onto it and the glyph sizes itself. ========================================================================== */ body.premium-theme .premium-preloader { gap: 22px; } body.premium-theme .premium-preloader__logo { display: flex; align-items: center; justify-content: center; width: auto; height: auto; animation: premium-preloader-pulse 2s ease-in-out infinite; } body.premium-theme .premium-preloader__glyph { width: 62px; height: 62px; display: block; filter: drop-shadow(0 14px 30px rgba(49, 126, 254, 0.34)); } body.premium-theme .premium-preloader__name { display: flex; justify-content: center; } /* Inside the loader the mark is already shown large above, so the wordmark runs as text only. */ body.premium-theme .premium-preloader__name .mo-logo__mark { display: none; } body.premium-theme .premium-preloader__name .mo-logo__text { font-size: 27px; letter-spacing: -0.02em; } body.premium-theme .premium-preloader__name .mo-logo { gap: 0; animation: mo-preloader-name 0.7s var(--mo-ease-out) both; } @keyframes mo-preloader-name { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } @media (max-width: 575px) { body.premium-theme .premium-preloader__glyph { width: 52px; height: 52px; } body.premium-theme .premium-preloader__name .mo-logo__text { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { body.premium-theme .premium-preloader__logo, body.premium-theme .premium-preloader__name .mo-logo { animation: none !important; } } /* Footer service names are labels, not prose: "E-commerce Development" broke across two lines at some column widths, which read as two separate links. The footer columns are wide enough for the longest item at every breakpoint, including full-width stacking on mobile. */ body.premium-theme .te-footer-widget ul li a { white-space: nowrap; } /* ========================================================================== 38. Services dropdown Service names are labels, not prose. In the fixed-width submenu the longer ones ("Search Engine Optimization", "Mobile App Development") wrapped onto two lines and read as separate entries, so the panel sizes to its content instead. ========================================================================== */ body.premium-theme .te-main-menu ul ul, body.premium-theme .te-main-menu .sub-menu { width: auto; min-width: 240px; max-width: none; } /* The theme pins every submenu item to 210px, which is what forced the longer service names onto a second line. */ body.premium-theme .te-main-menu ul ul li, body.premium-theme .te-main-menu .sub-menu li { width: auto; white-space: nowrap; } body.premium-theme .te-main-menu .sub-menu li a { white-space: nowrap; } /* The mobile drawer is full-width, so it keeps normal wrapping. */ @media (max-width: 991px) { body.premium-theme .te-main-menu .sub-menu li a, .te-mobile-nav-menu .sub-menu li a { white-space: normal; } } /* Captcha refresh control. The package image was clickable but gave no hint, so people retyped a code they could not read instead of fetching a new one. */ .ct-captcha__refresh { flex: 0 0 auto; width: 34px; height: calc(var(--ct-captcha-h) - 14px); padding: 0; border-radius: 10px; border: 1px solid var(--premium-border); background: #ffffff; color: var(--premium-blue); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--mo-ease-out), background-color 0.35s var(--mo-ease-out), color 0.35s var(--mo-ease-out), border-color 0.35s var(--mo-ease-out); } .ct-captcha__refresh:hover { transform: translate3d(0, -2px, 0); background: var(--premium-blue); border-color: var(--premium-blue); color: #ffffff; } .ct-captcha__refresh i { transition: transform 0.6s var(--mo-ease-out); } .ct-captcha__refresh.is-spinning i { transform: rotate(360deg); } /* ========================================================================== 39. Legal pages — privacy policy and terms Plain reading pages, shared by both. Typography and spacing only: no cards, panels, coloured bands or shadows. The single measure is capped so the lines stay readable, and hairline rules do the separating that boxes would. ========================================================================== */ /* The site body carries a soft blue gradient; the legal pages sit on flat white instead. .lg-page starts at the top of
, which the header overlays, so this covers the full page area behind the header too. */ .lg-page { padding: 190px 0 110px; background: #ffffff; } .lg-doc { max-width: 720px; margin: 0 auto; } /* Heading ----------------------------------------------------------------- */ .lg-head { padding-bottom: 40px; } .lg-updated { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--premium-muted); } body.premium-theme .lg-title { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; color: var(--premium-text); margin: 0 0 18px; } .lg-lead { margin: 0; font-size: 18.5px; line-height: 1.7; color: var(--premium-muted); } /* Sections ---------------------------------------------------------------- */ .lg-sec { padding: 34px 0; border-top: 1px solid var(--premium-border); } body.premium-theme .lg-sec h2 { font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; color: var(--premium-text); margin: 0 0 12px; } .lg-sec p { margin: 0 0 14px; font-size: 17px; line-height: 1.8; color: var(--premium-muted); } /* Sub-headings inside a numbered clause ("Personal Information", "Technical Data"), set below the h2 but still clearly a heading. */ body.premium-theme .lg-sec h3 { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--premium-text); margin: 22px 0 10px; } .lg-sec ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; } .lg-sec ul li { margin-bottom: 7px; padding-left: 4px; font-size: 17px; line-height: 1.75; color: var(--premium-muted); } .lg-sec ul li::marker { color: rgba(49, 126, 254, 0.55); } /* The section supplies its own bottom padding, so the last child never adds a second gap on top of it. */ .lg-sec > :last-child, .lg-sec ul li:last-child { margin-bottom: 0; } .lg-sec a { color: var(--premium-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(49, 126, 254, 0.3); transition: border-color 0.3s var(--mo-ease-out); } .lg-sec a:hover { border-bottom-color: var(--premium-blue); } /* Foot -------------------------------------------------------------------- */ .lg-foot { padding-top: 34px; border-top: 1px solid var(--premium-border); } .lg-textlink { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--premium-text); text-decoration: none; transition: color 0.35s var(--mo-ease-out); } .lg-textlink:hover { color: var(--premium-blue); } /* Responsive -------------------------------------------------------------- */ @media (max-width: 991px) { .lg-page { padding: 165px 0 90px; } } @media (max-width: 767px) { .lg-page { padding: 145px 0 74px; } .lg-lead { font-size: 17px; } .lg-head { padding-bottom: 30px; } .lg-sec { padding: 28px 0; } body.premium-theme .lg-sec h2 { font-size: 19.5px; } .lg-sec p { font-size: 16.5px; } } /* ========================================================================== 40. Footer legal links Privacy and terms sit in the bottom bar as well as the Company column. The bar is already a space-between flex row, so the pair simply lands opposite the copyright line and wraps beneath it on narrow screens. ========================================================================== */ .footer-bottom-area .te-footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; } .footer-bottom-area .te-footer-legal a { color: #335371; font-weight: 500; text-decoration: none; transition: color 0.3s var(--mo-ease-out); } .footer-bottom-area .te-footer-legal a:hover { color: #317efe; } .footer-bottom-area .te-footer-legal span { color: rgba(51, 83, 113, 0.45); } @media (max-width: 575px) { .footer-bottom-area .te-footer-legal { font-size: 14px; } }