/* ========================================================================== SmacPage design system Palette sampled from the supplied logo: navy #00246B, pink #F52549. ========================================================================== */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --color-primary: #00246b; --color-primary-600: #0a3589; --color-secondary: #f52549; --color-secondary-700: #d3153a; --color-dark: #06152f; --color-dark-soft: #0b1f44; --color-white: #fff; --color-light: #f4f6fb; --color-border: #dde4ef; --color-text: #1a2740; --color-muted: #55627a; --color-on-dark: #c7d2e6; --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --container: 1240px; --gutter: clamp(1rem, 4vw, 2rem); --radius: 4px; --shadow-sm: 0 1px 2px rgba(6, 21, 47, .06), 0 2px 8px rgba(6, 21, 47, .05); --shadow-md: 0 10px 30px -10px rgba(6, 21, 47, .18); --shadow-lg: 0 30px 60px -25px rgba(6, 21, 47, .35); --header-h: 76px; --ease: cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--color-text); background: var(--color-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--color-secondary-700); } :focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: 2px; } .section--dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: #fff; } .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; background: var(--color-secondary); color: #fff; padding: .75rem 1.25rem; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 1rem; color: #fff; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; color: var(--color-dark); margin: 0 0 var(--space-sm); font-weight: 700; } h1 { font-size: clamp(2.4rem, 5.4vw + .5rem, 4.9rem); letter-spacing: -.035em; line-height: 1.04; } h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.1rem); } h3 { font-size: clamp(1.2rem, .6vw + 1rem, 1.5rem); letter-spacing: -.01em; line-height: 1.25; } p { margin: 0 0 1.1em; } .lead { font-size: clamp(1.05rem, .5vw + 1rem, 1.3rem); color: var(--color-muted); max-width: 62ch; line-height: 1.65; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(820px + var(--gutter) * 2); } /* ---------------------------------------------------------------- Sections */ .section { padding-block: clamp(3.5rem, 8vw, var(--space-2xl)); position: relative; } .section--tint { background: var(--color-light); } .section--dark { background: var(--color-dark); color: var(--color-on-dark); } .section--dark h2, .section--dark h3, .section--dark h1 { color: #fff; } .section--dark .lead, .section--dark p { color: var(--color-on-dark); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(0, 36, 107, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 36, 107, .06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); } .section--dark.grid-bg::before { background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px); } .section > .container { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-secondary-700); margin-bottom: var(--space-sm); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; } .section--dark .eyebrow, .hero .eyebrow { color: #ff8da1; } .section-heading { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-heading--center { margin-inline: auto; text-align: center; } .section-heading--center .eyebrow { justify-content: center; } .section-heading--center .lead { margin-inline: auto; } .section-heading h2 { margin-bottom: var(--space-sm); } .section-heading .lead { margin: 0; } .split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); } .split-head .section-heading { margin: 0; } /* ----------------------------------------------------------------- Buttons */ .btn { --btn-bg: var(--color-secondary); --btn-fg: #fff; --btn-bd: transparent; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .8rem 1.5rem; font-family: var(--font-display); font-weight: 600; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--btn-fg); cursor: pointer; border: 0; background: transparent; transition: transform .25s var(--ease), color .2s; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: background .2s; } .btn--secondary { --btn-bg: transparent; --btn-fg: var(--color-primary); } .btn--secondary::before { background: var(--color-primary); } .btn--secondary::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: #fff; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); transition: background .2s; } .btn--secondary:hover { color: #fff; } .btn--secondary:hover::after { background: var(--color-primary); } .btn--light { --btn-fg: var(--color-dark); } .btn--light::before { background: #fff; } .btn--ghost { --btn-fg: #fff; } .btn--ghost::before { background: rgba(255, 255, 255, .55); } .btn--ghost::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--color-dark); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); transition: background .2s; } .btn--ghost:hover::after { background: rgba(255, 255, 255, .12); } .btn:hover { transform: translateY(-2px); color: var(--btn-fg); } .btn--primary:hover::before { background: var(--color-secondary-700); } .btn--secondary:hover { color: #fff; } .btn .icon { transition: transform .25s var(--ease); } .btn:hover .icon { transform: translateX(4px); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--color-primary); } .link-arrow .icon { transition: transform .25s var(--ease); } .link-arrow:hover .icon { transform: translateX(5px); } .section--dark .link-arrow { color: #fff; } /* ------------------------------------------------------------------ Header */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; } .site-header.is-scrolled { border-color: var(--color-border); box-shadow: 0 6px 24px -14px rgba(6, 21, 47, .25); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: var(--header-h); } .site-logo { display: block; flex: none; } .site-logo img { width: 168px; height: auto; aspect-ratio: 1261 / 394; } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; } .primary-nav a, .nav-trigger { display: inline-flex; align-items: center; gap: .35rem; padding: .6rem .85rem; min-height: 44px; font-family: var(--font-display); font-size: .92rem; font-weight: 500; color: var(--color-dark); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; } .primary-nav a::after, .nav-trigger::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .35rem; height: 2px; background: var(--color-secondary); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .primary-nav a:hover::after, .primary-nav a[aria-current]::after, .nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); } .nav-trigger .icon { transition: transform .2s; } .nav-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); } .header-cta { display: none; } .has-mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; } .mega.is-open { opacity: 1; visibility: visible; transform: none; } .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.05fr; gap: var(--space-lg); padding-block: var(--space-lg); } .mega-title { display: flex; align-items: center; gap: .6rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-secondary-700); margin-bottom: var(--space-sm); } .mega a { text-decoration: none; } .mega-col li a:hover { text-decoration: underline; text-decoration-color: var(--color-secondary); text-underline-offset: 5px; text-decoration-thickness: 2px; } .mega-title a { color: inherit; padding: 0; min-height: 0; font-size: inherit; font-weight: 700; letter-spacing: inherit; } .mega-col h3 a::after { display: none; } .mega-col ul { display: block; } .mega-col li a { display: flex; padding: .45rem 0; min-height: 0; font-weight: 500; font-size: .95rem; color: var(--color-text); } .mega-col li a::after { left: 0; right: auto; width: 100%; bottom: .25rem; } .mega-col li a:hover { color: var(--color-primary); } .mega-aside { background: var(--color-dark); color: var(--color-on-dark); padding: var(--space-md); position: relative; overflow: hidden; } .mega-aside p { font-size: .92rem; } .mega-aside strong { display: block; font-family: var(--font-display); color: #fff; font-size: 1.15rem; margin-bottom: .5rem; line-height: 1.25; } .mega-aside .hex { position: absolute; right: -30px; bottom: -30px; width: 140px; opacity: .25; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--color-border); background: #fff; color: var(--color-dark); cursor: pointer; } .mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--color-dark); color: #fff; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; overflow-y: auto; display: flex; flex-direction: column; } .mobile-nav.is-open { transform: none; visibility: visible; } .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem var(--gutter); min-height: var(--header-h); border-bottom: 1px solid rgba(255, 255, 255, .12); } .mobile-nav-head .logo-plate { background: #fff; padding: 6px 10px; } .mobile-nav-head .logo-plate img { width: 120px; } .mobile-nav .nav-toggle { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); } .mobile-nav-body { padding: var(--space-md) var(--gutter) var(--space-lg); flex: 1; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav-body > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .1); } .mobile-nav a, .mobile-nav .acc-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 56px; padding: .5rem 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #fff; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; } .mobile-nav .acc-btn .icon { transition: transform .25s; } .mobile-nav .acc-btn[aria-expanded="true"] .icon { transform: rotate(180deg); } .acc-panel { display: none; padding: 0 0 var(--space-sm); } .acc-panel.is-open { display: block; } .acc-title { color: #ff8da1; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; margin: var(--space-sm) 0 .25rem; } .acc-panel a { font-size: 1.02rem; font-weight: 500; min-height: 44px; color: var(--color-on-dark); } .mobile-nav-foot { padding: var(--space-md) var(--gutter) var(--space-lg); border-top: 1px solid rgba(255, 255, 255, .12); } .mobile-nav-foot .btn { width: 100%; } body.nav-open { overflow: hidden; } @media (min-width: 1100px) { .nav-toggle { display: none; } .header-cta { display: inline-flex; } } @media (max-width: 1099px) { .primary-nav { display: none; } .site-logo img { width: 140px; } } /* -------------------------------------------------------------------- Hero */ .hero { position: relative; background: var(--color-dark); color: var(--color-on-dark); overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6.5rem); } .hero h1, .hero h2 { color: #fff; } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%); } .hero::after { content: ""; position: absolute; right: -10%; top: -30%; width: 60vw; height: 60vw; max-width: 780px; max-height: 780px; background: radial-gradient(closest-side, rgba(10, 53, 137, .65), transparent); pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-xl); align-items: center; } .hero h1 .accent { color: var(--color-secondary); } .hero .lead { color: var(--color-on-dark); margin-bottom: var(--space-lg); } .hero-meta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .88rem; color: #9fb0cc; } .hero-meta span { display: inline-flex; align-items: center; gap: .5rem; } .hero-meta .icon { color: var(--color-secondary); } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } } .hero--page { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); } .hero--page h1 { font-size: clamp(2.1rem, 4vw + .5rem, 3.8rem); max-width: 18ch; } .hero--page .lead { max-width: 56ch; margin-bottom: var(--space-md); } .breadcrumbs { font-size: .85rem; margin-bottom: var(--space-md); } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; } .breadcrumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; } .breadcrumbs a { color: inherit; text-decoration: none; opacity: .8; } .breadcrumbs a:hover { opacity: 1; text-decoration: underline; } .hero .breadcrumbs { color: #9fb0cc; } .breadcrumbs--dark { color: var(--color-muted); } /* Hero visual: layered interface panels */ .hero-visual { position: relative; min-height: 420px; } .hv-panel { position: absolute; background: rgba(11, 31, 68, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); color: #fff; } .hv-browser { inset: 0 0 auto 4%; width: 92%; } .hv-bar { display: flex; align-items: center; gap: 6px; padding: .6rem .8rem; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .7rem; color: #8ea2c4; } .hv-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a4d75; } .hv-bar i:first-child { background: var(--color-secondary); } .hv-bar span { margin-left: .5rem; padding: 2px 10px; background: rgba(255, 255, 255, .06); border-radius: 20px; } .hv-body { padding: 1.1rem; display: grid; gap: 1rem; } .hv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .hv-kpi { border: 1px solid rgba(255, 255, 255, .1); padding: .6rem .7rem; } .hv-kpi small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #8ea2c4; } .hv-kpi b { font-family: var(--font-display); font-size: 1.15rem; } .hv-kpi em { font-style: normal; color: #4ade80; font-size: .72rem; } .hv-chart { width: 100%; height: 130px; } .hv-chart .line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 2.4s .4s var(--ease) forwards; } .hv-chart .area { opacity: 0; animation: fade 1.2s 1.6s forwards; } .hv-mobile { right: 0; bottom: 0; width: 28%; min-width: 118px; padding: .7rem; } .hv-mobile .notch { width: 36%; height: 4px; background: rgba(255, 255, 255, .25); margin: 0 auto .8rem; border-radius: 4px; } .hv-mobile .row { height: 8px; background: rgba(255, 255, 255, .12); margin-bottom: .5rem; } .hv-mobile .row.accent { width: 60%; background: var(--color-secondary); } .hv-mobile .block { height: 54px; border: 1px solid rgba(255, 255, 255, .14); margin: .7rem 0; background: linear-gradient(135deg, rgba(10, 53, 137, .6), transparent); } .hv-code { left: 0; bottom: 4%; width: 52%; padding: .8rem 1rem; font: 500 .72rem/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; color: #9fb0cc; } .hv-code b { color: #ff8da1; font-weight: 500; } .hv-code u { text-decoration: none; color: #7dd3fc; } .hv-score { right: 3%; top: 58%; width: 30%; min-width: 120px; padding: .8rem; text-align: center; display: none; } .hv-ring { width: 64px; height: 64px; margin: 0 auto .4rem; } .hv-ring circle:last-child { stroke-dasharray: 150; stroke-dashoffset: 150; animation: ring 1.8s 1s var(--ease) forwards; } .hv-score small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #8ea2c4; } .hv-hex { position: absolute; width: 150px; right: -20px; top: -40px; opacity: .55; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade { to { opacity: 1; } } @keyframes ring { to { stroke-dashoffset: 14; } } @media (min-width: 560px) { .hv-score { display: block; } } @media (max-width: 959px) { .hero-visual { min-height: 360px; } } @media (max-width: 480px) { .hero-visual { min-height: 300px; } .hv-code { display: none; } .hv-kpi b { font-size: .95rem; } .hv-browser { inset: 0 18% auto 0; width: auto; } } /* ------------------------------------------------------------------- Stats */ .stats { background: var(--color-primary); color: #fff; position: relative; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .stat { padding: clamp(1.5rem, 3vw, 2.25rem) var(--space-md); border-left: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); } .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .stat-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.03em; display: block; } .stat-value sup, .stat-value .suffix { color: #ff8da1; } .stat-label { display: block; margin-top: .5rem; font-size: .88rem; color: #c0cde6; } @media (min-width: 800px) { .stats-grid { grid-template-columns: repeat(var(--cols, 4), 1fr); } .stat { border-bottom: 0; } .stat:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: var(--space-md); } .stat:first-child { border-left: 0; padding-left: 0; } } /* -------------------------------------------------------- Capabilities (3) */ .cap-grid { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); } .cap { position: relative; background: #fff; padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: var(--space-sm); transition: background .3s; overflow: hidden; } .cap::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color-secondary); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .cap:hover::after, .cap:focus-within::after { transform: scaleX(1); } .cap-num { font-family: var(--font-display); font-weight: 700; font-size: 4.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--color-border); position: absolute; right: 1.25rem; top: .75rem; transition: -webkit-text-stroke-color .3s; } .cap:hover .cap-num { -webkit-text-stroke-color: var(--color-secondary); } .icon-box { width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-primary); color: #fff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background .3s, transform .3s var(--ease); } .cap:hover .icon-box { background: var(--color-secondary); transform: translateY(-3px); } .cap p { color: var(--color-muted); margin: 0; } .cap ul { list-style: none; margin: 0 0 var(--space-xs); padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .cap li { font-size: .78rem; font-weight: 500; padding: .2rem .6rem; border: 1px solid var(--color-border); color: var(--color-primary); } .cap .link-arrow { margin-top: auto; } @media (min-width: 860px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------ Featured services */ .fs-list { border-top: 1px solid var(--color-border); counter-reset: fs; } .fs-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md); align-items: center; padding: clamp(1.1rem, 2.4vw, 1.75rem) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; position: relative; transition: padding .35s var(--ease), background .3s; } .fs-item::before { counter-increment: fs; content: counter(fs, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--color-secondary-700); } .fs-item h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.4rem); letter-spacing: -.02em; transition: color .25s; } .fs-item p { margin: .25rem 0 0; color: var(--color-muted); font-size: .98rem; max-width: 60ch; } .fs-item .arrow { width: 52px; height: 52px; border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--color-primary); transition: background .25s, color .25s, transform .3s var(--ease), border-color .25s; } .fs-item:hover { padding-inline: var(--space-sm); background: var(--color-light); color: inherit; } .fs-item:hover h3 { color: var(--color-primary); } .fs-item:hover .arrow { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); transform: rotate(-45deg); } @media (max-width: 560px) { .fs-item { grid-template-columns: auto 1fr; } .fs-item .arrow { display: none; } } /* ------------------------------------------------------------- Why section */ .why-grid { display: grid; gap: var(--space-xl); align-items: start; } .why-points { display: grid; gap: 0; counter-reset: why; } .why-point { display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid rgba(255, 255, 255, .14); } .why-point::before { counter-increment: why; content: counter(why, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--color-secondary); font-size: 1.1rem; padding-top: .15rem; } .why-point h3 { margin-bottom: .35rem; font-size: 1.25rem; } .why-point p { margin: 0; font-size: .98rem; } .why-intro { position: sticky; top: calc(var(--header-h) + 2rem); } .why-hex { margin-top: var(--space-lg); width: min(280px, 70%); opacity: .9; } @media (min-width: 900px) { .why-grid { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); } .why-points { grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); } } @media (max-width: 899px) { .why-intro { position: static; } } /* ---------------------------------------------------------------- Process */ .process-tabs { display: flex; gap: .5rem; margin-bottom: var(--space-lg); flex-wrap: wrap; } .process-tab { min-height: 44px; padding: .5rem 1.1rem; font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--color-primary); border: 1px solid var(--color-border); cursor: pointer; transition: background .2s, color .2s; } .process-tab[aria-selected="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .process-panel[hidden] { display: none; } .timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); counter-reset: step; } .timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); } .timeline-progress { position: absolute; left: 21px; top: 8px; width: 2px; height: 0; background: var(--color-secondary); transition: height .2s linear; } .step { position: relative; padding-left: 4rem; } .step-dot { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; background: var(--color-primary); font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #fff; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); transition: background .3s; } .step.is-active .step-dot { background: var(--color-secondary); } .step h3 { margin: .15rem 0 .25rem; font-size: 1.2rem; } .step p { margin: 0; color: var(--color-muted); font-size: .96rem; } .section--dark .step p { color: var(--color-on-dark); } .section--dark .step-dot { background: #1b3a78; } .section--dark .step.is-active .step-dot { background: var(--color-secondary); } .section--dark .timeline::before { background: rgba(255, 255, 255, .15); } @media (min-width: 900px) { .timeline { grid-template-columns: repeat(var(--n, 6), 1fr); gap: var(--space-sm); } .timeline::before { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 2px; } .timeline-progress { left: 22px; top: 21px; height: 2px; width: 0; transition: width .2s linear; } .step { padding: 4rem 0 0; } .step h3 { font-size: 1.1rem; } } /* ------------------------------------------------------------------- Cards */ .card-grid { display: grid; gap: var(--space-md); } @media (min-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } } .card-service { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); background: #fff; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; position: relative; } .card-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); color: inherit; } .card-service h3 { margin: 0; } .card-service p { margin: 0; color: var(--color-muted); font-size: .96rem; } .card-service .icon-box { width: 48px; height: 48px; } .card-service .link-arrow { margin-top: auto; padding-top: var(--space-xs); } /* Portfolio: asymmetric */ .work-grid { display: grid; gap: var(--space-md); } .work-card { position: relative; display: block; background: var(--color-dark); color: #fff; text-decoration: none; overflow: hidden; min-height: 320px; isolation: isolate; } .work-card:hover { color: #fff; } .work-media { position: absolute; inset: 0; z-index: -1; } .work-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease), opacity .3s; opacity: .85; } .work-card:hover .work-media img { transform: scale(1.06); opacity: 1; } .work-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); display: grid; place-items: center; } .work-fallback svg { width: 38%; opacity: .25; } .work-body { position: absolute; inset: auto 0 0 0; padding: var(--space-md); background: linear-gradient(to top, rgba(6, 21, 47, .96) 25%, rgba(6, 21, 47, .0)); padding-top: 4rem; } .work-body h3 { color: #fff; margin: 0 0 .25rem; } .work-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8rem; color: #c0cde6; margin: 0; } .work-meta span + span::before { content: "·"; margin-right: .75rem; opacity: .6; } .work-desc { font-size: .92rem; color: #c0cde6; margin: .5rem 0 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s; } .work-card:hover .work-desc, .work-card:focus-visible .work-desc { max-height: 6rem; opacity: 1; } .work-tag { position: absolute; top: var(--space-sm); left: var(--space-sm); background: var(--color-secondary); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; } .work-arrow { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: var(--color-dark); transform: scale(.8); opacity: 0; transition: .3s var(--ease); } .work-card:hover .work-arrow { transform: none; opacity: 1; } @media (min-width: 900px) { .work-grid--feature { grid-template-columns: repeat(12, 1fr); } .work-grid--feature .work-card:nth-child(1) { grid-column: span 7; min-height: 520px; } .work-grid--feature .work-card:nth-child(2) { grid-column: span 5; min-height: 520px; } .work-grid--feature .work-card:nth-child(3) { grid-column: span 5; min-height: 400px; } .work-grid--feature .work-card:nth-child(4) { grid-column: span 7; min-height: 400px; } .work-grid--feature .work-card:nth-child(n+5) { grid-column: span 4; min-height: 360px; } } @media (max-width: 899px) { .work-grid--feature { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-sm); padding-bottom: var(--space-sm); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; } .work-grid--feature .work-card { flex: 0 0 82%; scroll-snap-align: center; min-height: 380px; } } .work-desc { max-height: 6rem; opacity: 1; } @media (hover: hover) { .work-desc { max-height: 0; opacity: 0; } } /* Case studies */ .case-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s; position: relative; } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; } .case-head { padding: var(--space-md); background: var(--color-dark); color: #fff; position: relative; overflow: hidden; } .case-head .tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #ff8da1; font-weight: 600; } .case-head h3 { color: #fff; margin: .4rem 0 0; } .case-metric { padding: var(--space-md); border-bottom: 1px solid var(--color-border); } .case-metric b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--color-primary); line-height: 1; letter-spacing: -.03em; } .case-metric small { display: block; margin-top: .35rem; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--color-muted); font-weight: 600; } .case-body { padding: var(--space-md); display: grid; gap: .75rem; flex: 1; } .case-list { margin: 0; display: grid; gap: .75rem; } .footer-sub { margin-top: 1.5rem; } .case-row { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; font-size: .92rem; } .case-row dt { font-weight: 600; color: var(--color-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding-top: .15rem; } .case-row dd { margin: 0; color: var(--color-muted); } .case-body .link-arrow { margin-top: auto; padding-top: .5rem; } .results-band { display: grid; gap: 1px; background: rgba(255, 255, 255, .16); grid-template-columns: repeat(2, 1fr); } .result { background: var(--color-dark); padding: var(--space-md); } .result small { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: #9fb0cc; font-weight: 600; display: block; } .result b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); color: #fff; letter-spacing: -.03em; line-height: 1.1; margin: .4rem 0; } .result b::first-letter { color: var(--color-secondary); } .result span { font-size: .85rem; color: #9fb0cc; } @media (min-width: 900px) { .results-band { grid-template-columns: repeat(4, 1fr); } } /* Testimonials */ .testi-track { display: grid; gap: var(--space-md); } .testi { background: #fff; border: 1px solid var(--color-border); padding: var(--space-md) var(--space-md) var(--space-lg); position: relative; display: flex; flex-direction: column; gap: var(--space-sm); } .testi::before { content: "\201C"; position: absolute; right: 1.25rem; top: -.35rem; font-family: var(--font-display); font-size: 6.5rem; line-height: 1; color: var(--color-secondary); opacity: .9; } .testi blockquote { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--color-dark); } .testi-person { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); } .avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .testi-person b { display: block; font-family: var(--font-display); color: var(--color-dark); line-height: 1.2; } .testi-person span { font-size: .85rem; color: var(--color-muted); } .stars { display: inline-flex; gap: 2px; color: var(--color-secondary); } .stars .icon { fill: currentColor; stroke: none; } .slider-nav { display: none; gap: .5rem; } .slider-nav button { width: 48px; height: 48px; border: 1px solid var(--color-border); background: #fff; color: var(--color-primary); cursor: pointer; display: grid; place-items: center; } .slider-nav button:hover { background: var(--color-primary); color: #fff; } @media (max-width: 859px) { .testi-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-sm); margin-inline: calc(var(--gutter) * -1); padding: .5rem var(--gutter) var(--space-sm); scrollbar-width: thin; } .testi-track .testi { flex: 0 0 88%; scroll-snap-align: center; } .slider-nav { display: flex; } } @media (min-width: 860px) { .testi-track { grid-template-columns: repeat(3, 1fr); } .testi-track--feature .testi:first-child { grid-column: span 2; } .testi-track--feature .testi:first-child blockquote { font-size: 1.3rem; } } /* Industries */ .ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); } .ind { background: #fff; padding: var(--space-md); display: flex; flex-direction: column; gap: .75rem; min-height: 150px; transition: background .3s, color .3s; } .ind .icon { color: var(--color-primary); transition: color .3s, transform .3s var(--ease); } .ind b { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-dark); margin-top: auto; transition: color .3s; } .ind:hover { background: var(--color-primary); } .ind:hover .icon { color: #ff8da1; transform: translateY(-3px); } .ind:hover b { color: #fff; } @media (min-width: 760px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } } /* Blog cards */ .post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); text-decoration: none; color: inherit; height: 100%; transition: box-shadow .3s, transform .3s var(--ease); } .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); color: inherit; } .post-thumb { aspect-ratio: 16 / 10; background: var(--color-dark); overflow: hidden; position: relative; } .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .post-card:hover .post-thumb img { transform: scale(1.05); } .post-thumb--fallback { display: grid; place-items: center; background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); } .post-thumb--fallback svg { width: 34%; opacity: .3; } .post-body { padding: var(--space-md); display: flex; flex-direction: column; gap: .6rem; flex: 1; } .post-cat { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-secondary-700); } .post-body h3 { margin: 0; font-size: 1.25rem; } .post-body p { margin: 0; color: var(--color-muted); font-size: .95rem; } .post-meta { margin-top: auto; padding-top: .75rem; font-size: .82rem; color: var(--color-muted); display: flex; gap: .75rem; flex-wrap: wrap; } /* ----------------------------------------------------------------- CTA */ .cta-band { background: var(--color-dark); color: #fff; position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem); } .cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(10, 53, 137, .75), transparent 60%); } .cta-band .hex-deco { position: absolute; right: -60px; top: 50%; width: min(520px, 70vw); transform: translateY(-50%); opacity: .35; } .cta-inner { position: relative; max-width: 760px; } .cta-inner h2 { color: #fff; font-size: clamp(2rem, 4vw + .5rem, 4rem); } .cta-inner p { color: var(--color-on-dark); font-size: 1.1rem; max-width: 56ch; margin-bottom: var(--space-lg); } .cta-strip { background: var(--color-light); border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); padding: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); } .cta-strip strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-dark); display: block; } .cta-strip p { margin: 0; color: var(--color-muted); } /* ------------------------------------------------------- Service pages */ .svc-layout { display: grid; gap: var(--space-xl); } @media (min-width: 960px) { .svc-layout { grid-template-columns: 7fr 5fr; align-items: start; } } .prose { font-size: 1.06rem; } .prose h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); margin-top: 1.6em; } .prose h3 { margin-top: 1.4em; } .prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; } .prose li { margin-bottom: .4em; } .prose img { height: auto; } .prose blockquote { margin: 1.5em 0; padding: .5em 1.25em; border-left: 4px solid var(--color-secondary); background: var(--color-light); } .prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .prose th, .prose td { border: 1px solid var(--color-border); padding: .6rem .8rem; text-align: left; } .prose a { text-decoration: underline; } .panel { border: 1px solid var(--color-border); background: #fff; padding: var(--space-md); } .panel--dark { background: var(--color-dark); color: var(--color-on-dark); border-color: var(--color-dark); } .panel--dark h3 { color: #fff; } .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; } .check-list li { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; align-items: start; } .check-list .icon { color: var(--color-secondary); margin-top: 3px; } .tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .tag-list li { padding: .35rem .8rem; border: 1px solid var(--color-border); font-size: .88rem; font-weight: 500; background: #fff; color: var(--color-primary); } .problem-grid { display: grid; gap: var(--space-md); } @media (min-width: 720px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } } .problem { padding: var(--space-md); border: 1px solid var(--color-border); background: #fff; border-top: 3px solid var(--color-primary); } .problem h3 { font-size: 1.15rem; } .problem p { margin: 0; color: var(--color-muted); font-size: .96rem; } .approach { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); } .approach-item { background: #fff; padding: var(--space-md); display: grid; gap: .35rem; } .approach-item h3 { font-size: 1.15rem; display: flex; gap: .6rem; align-items: baseline; } .approach-item h3 span { font-size: .85rem; color: var(--color-secondary-700); } .approach-item p { margin: 0; color: var(--color-muted); } @media (min-width: 720px) { .approach { grid-template-columns: repeat(2, 1fr); } } .benefit-grid { display: grid; gap: var(--space-md); } @media (min-width: 720px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .benefit-grid--4 { grid-template-columns: repeat(4, 1fr); } } .benefit { padding-top: var(--space-sm); border-top: 2px solid var(--color-secondary); } .benefit h3 { font-size: 1.1rem; } .benefit p { margin: 0; color: var(--color-muted); font-size: .96rem; } .section--dark .benefit p { color: var(--color-on-dark); } .sticky-side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: var(--space-md); } .svc-visual { aspect-ratio: 4 / 3; background: rgba(11, 31, 68, .55); border: 1px solid rgba(255, 255, 255, .12); position: relative; overflow: hidden; display: grid; place-items: center; } .svc-visual img { width: 100%; height: 100%; object-fit: cover; } .svc-visual svg { width: 70%; } .sub-service-links { display: grid; gap: .5rem; } .sub-service-links a { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border: 1px solid var(--color-border); text-decoration: none; font-weight: 500; color: var(--color-dark); background: #fff; transition: border-color .2s, background .2s; } .sub-service-links a:hover { border-color: var(--color-primary); background: var(--color-light); } .service-block { display: grid; gap: var(--space-lg); padding-block: var(--space-xl); border-top: 1px solid var(--color-border); } .service-block:first-of-type { border-top: 0; } @media (min-width: 900px) { .service-block { grid-template-columns: 4fr 8fr; } } .service-block .big-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 9vw, 8rem); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--color-border); display: block; } /* FAQ */ .faq { border-top: 1px solid var(--color-border); } .faq details { border-bottom: 1px solid var(--color-border); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 1.15rem 0; min-height: 56px; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--color-dark); } .faq summary::-webkit-details-marker { display: none; } .faq summary .icon { flex: none; color: var(--color-secondary); transition: transform .25s; } .faq details[open] summary .icon { transform: rotate(45deg); } .faq .answer { padding: 0 0 1.25rem; color: var(--color-muted); max-width: 70ch; } /* ------------------------------------------------------ Archives & filters */ .filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-lg); } .filter-bar a { padding: .55rem 1.1rem; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--color-border); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--color-dark); background: #fff; transition: .2s; } .filter-bar a:hover { border-color: var(--color-primary); } .filter-bar a[aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .pagination ul { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; } .pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid var(--color-border); text-decoration: none; color: var(--color-dark); font-weight: 500; } .pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .empty-state { padding: var(--space-xl) var(--space-md); border: 1px dashed var(--color-border); text-align: center; background: var(--color-light); } .empty-state p { color: var(--color-muted); max-width: 52ch; margin-inline: auto; } /* Project / case detail */ .meta-table { display: grid; gap: 0; margin: 0; } .meta-table div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-sm); padding: .75rem 0; border-bottom: 1px solid var(--color-border); font-size: .95rem; } .meta-table dt { font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); padding-top: .15rem; } .meta-table dd { margin: 0; } .device { position: relative; background: var(--color-dark); padding: 10px; box-shadow: var(--shadow-lg); } .device-bar { display: flex; gap: 5px; padding: 0 0 8px; } .device-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a4d75; } .device img { width: 100%; } .shots { display: grid; gap: var(--space-md); } @media (min-width: 720px) { .shots { grid-template-columns: repeat(2, 1fr); } } .shots img { border: 1px solid var(--color-border); width: 100%; } .phone-shot { max-width: 260px; border: 8px solid var(--color-dark); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); } .cs-block { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-top: 1px solid var(--color-border); } @media (min-width: 860px) { .cs-block { grid-template-columns: 3fr 9fr; gap: var(--space-xl); } } .cs-block h2 { font-size: 1.1rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--color-secondary-700); } .cs-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); } .cs-timeline li { position: relative; padding: 0 0 var(--space-md) var(--space-md); } .cs-timeline li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; background: var(--color-secondary); transform: rotate(45deg); } .cs-timeline b { font-family: var(--font-display); color: var(--color-dark); display: block; } /* Jobs */ .job { display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); background: #fff; } .job-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; color: var(--color-muted); } .job-meta span { display: inline-flex; align-items: center; gap: .35rem; } .job details summary { cursor: pointer; font-weight: 600; color: var(--color-primary); min-height: 44px; display: flex; align-items: center; } .job h3 { margin: 0; } /* ----------------------------------------------------------------- Forms */ .form { display: grid; gap: var(--space-md); } .form-row { display: grid; gap: var(--space-md); } @media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } } .field label, .field legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--color-dark); } .field .req { color: var(--color-secondary-700); } .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .8rem 1rem; font: inherit; font-size: 1rem; color: var(--color-text); background: #fff; border: 1px solid #b9c4d8; border-radius: 0; transition: border-color .2s, box-shadow .2s; } .field textarea { min-height: 150px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-primary); } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 36, 107, .2); } .field input[type="file"] { padding: .7rem; } .field-error { display: none; margin: .35rem 0 0; color: #b4102f; font-size: .86rem; font-weight: 500; } .field.has-error .field-error { display: block; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b4102f; } .check { display: grid; grid-template-columns: 24px 1fr; gap: .7rem; align-items: start; } .check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--color-secondary); } .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { padding: 1rem 1.25rem; border-left: 4px solid; font-weight: 500; display: none; } .form-status.is-visible { display: block; } .form-status--ok { background: #e8f8ee; border-color: #1a8f4a; color: #0f5d30; } .form-status--error { background: #fdecef; border-color: #b4102f; color: #8c0c25; } .form-wrap { background: #fff; border: 1px solid var(--color-border); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--shadow-md); } .form .btn[disabled] { opacity: .6; pointer-events: none; } .contact-grid { display: grid; gap: var(--space-xl); } @media (min-width: 960px) { .contact-grid { grid-template-columns: 7fr 5fr; align-items: start; } } .contact-card { display: grid; gap: var(--space-md); } .contact-line { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-sm); align-items: start; } .contact-line .icon-box { width: 48px; height: 48px; } .contact-line b { display: block; font-family: var(--font-display); color: var(--color-dark); } .contact-line a { color: var(--color-text); } .map-frame { border: 1px solid var(--color-border); aspect-ratio: 4 / 3; width: 100%; } /* --------------------------------------------------------------- Blog single */ .post-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: #9fb0cc; margin-top: var(--space-md); } .post-layout { display: grid; gap: var(--space-xl); } @media (min-width: 1000px) { .post-layout { grid-template-columns: 1fr 300px; } } .toc { border: 1px solid var(--color-border); padding: var(--space-md); background: var(--color-light); margin-bottom: var(--space-lg); } .toc strong { font-family: var(--font-display); display: block; margin-bottom: .5rem; } .toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: .35rem; } .toc li.sub { margin-left: 1rem; list-style: circle; } .toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; } .post-aside { display: grid; gap: var(--space-md); align-content: start; } .share { display: flex; gap: .5rem; flex-wrap: wrap; } .share a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border); color: var(--color-primary); background: #fff; } .share a:hover { background: var(--color-primary); color: #fff; } .author-box { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); margin-top: var(--space-xl); } .author-box img { border-radius: 50%; } .author-box p { margin: .25rem 0 0; color: var(--color-muted); font-size: .94rem; } .featured-image { margin: 0 0 var(--space-lg); } .featured-image img { width: 100%; } .wp-caption, figure { max-width: 100%; margin-inline: 0; } /* About / misc */ .mv-grid { display: grid; gap: var(--space-md); } @media (min-width: 800px) { .mv-grid { grid-template-columns: repeat(3, 1fr); } } .mv { padding: var(--space-lg) var(--space-md); border: 1px solid var(--color-border); background: #fff; position: relative; } .mv::before { content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 4px; background: var(--color-secondary); } .mv h3 { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--color-secondary-700); } .mv p { margin: 0; font-size: 1.08rem; color: var(--color-dark); } .tech-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); } .tech-wall div { background: #fff; padding: var(--space-sm) var(--space-md); } .tech-wall b { display: block; font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary-700); margin-bottom: .25rem; } .tech-wall span { font-size: .95rem; color: var(--color-text); } @media (min-width: 800px) { .tech-wall { grid-template-columns: repeat(3, 1fr); } } .legal-wrap { max-width: 820px; } .page-404 { text-align: left; } .big-404 { font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 22vw, 16rem); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--color-secondary); letter-spacing: -.05em; } .search-form { display: flex; gap: .5rem; max-width: 520px; } .search-form input[type="search"] { flex: 1; min-height: 52px; padding: .8rem 1rem; border: 1px solid #b9c4d8; font: inherit; border-radius: 0; } .search-form input[type="submit"] { min-height: 52px; padding: 0 1.25rem; background: var(--color-primary); color: #fff; border: 0; font-weight: 600; cursor: pointer; } /* ------------------------------------------------------------------ Footer */ .site-footer { background: var(--color-dark); color: var(--color-on-dark); padding-top: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; } .footer-top { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); } .footer-brand .logo-plate { display: inline-block; background: #fff; padding: 10px 14px; margin-bottom: var(--space-md); } .footer-brand .logo-plate img { width: 150px; } .footer-brand p { max-width: 36ch; font-size: .96rem; } .footer-cols { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(2, 1fr); } .footer-cols h3 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-sm); } .footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .footer-cols a { color: var(--color-on-dark); text-decoration: none; font-size: .95rem; display: inline-block; padding: .3rem 0; min-height: 32px; } .footer-cols a:hover { color: #fff; text-decoration: underline; } .footer-contact li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; padding: .3rem 0; font-size: .95rem; align-items: start; } .footer-contact .icon { color: var(--color-secondary); margin-top: 3px; } .footer-contact a { padding: 0; min-height: 0; } .social { display: flex; gap: .5rem; margin-top: var(--space-sm); } .social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); color: #fff; padding: 0; transition: background .2s, border-color .2s; } .social a:hover { background: var(--color-secondary); border-color: var(--color-secondary); text-decoration: none; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: var(--space-md); display: flex; flex-wrap: wrap; gap: .5rem var(--space-md); justify-content: space-between; font-size: .88rem; color: #8ea2c4; } .footer-bottom a { color: #c0cde6; } @media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .footer-top { grid-template-columns: 3fr 9fr; } .footer-cols { grid-template-columns: repeat(4, 1fr); } } /* Sticky mobile CTA */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(6, 21, 47, .96); display: none; transform: translateY(100%); transition: transform .3s var(--ease); } .mobile-cta.is-visible { transform: none; } .mobile-cta .btn { width: 100%; } @media (max-width: 859px) { .mobile-cta { display: block; } body { padding-bottom: 0; } } /* ------------------------------------------------------------ Reveal motion */ .js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease), translate .8s var(--ease), transform .3s var(--ease), box-shadow .3s, border-color .3s, background .3s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s, 0s; } .js [data-reveal].is-in { opacity: 1; translate: 0 0; } .hero-copy > * { animation: rise .9s var(--ease) both; } .hero-copy > *:nth-child(2) { animation-delay: .1s; } .hero-copy > *:nth-child(3) { animation-delay: .2s; } .hero-copy > *:nth-child(4) { animation-delay: .3s; } .hero-copy > *:nth-child(5) { animation-delay: .4s; } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .float { animation: float 7s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .js [data-reveal] { opacity: 1; transform: none; } .hv-chart .line { stroke-dashoffset: 0; } .hv-chart .area { opacity: 1; } .hv-ring circle:last-child { stroke-dashoffset: 14; } } @media print { .site-header, .site-footer, .mobile-cta, .cta-band { display: none; } } .panel .share { margin-top: .75rem; } @media (max-width: 1099px) { .mega { display: none; } } .tech-wall, .ind-grid, .stats-grid, .results-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tech-wall span, .stat-label { overflow-wrap: anywhere; } @media (max-width: 420px) { .tech-wall { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 760px) { .ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 800px) { .tech-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } } @media (min-width: 900px) { .results-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mobile-nav .logo-plate { display: inline-block; width: auto; min-height: 0; padding: 6px 10px; justify-content: flex-start; } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .admin-bar { --header-h: 76px; } .mega-title, .acc-title { font-family: var(--font-display); font-weight: 700; } .panel-title { font-size: 1.25rem; letter-spacing: -.01em; } .panel--dark .panel-title { color: #fff; } /* ========================================================================== Refinement pass: topbar, rounded system, gradient buttons, glass header, scroller, heading in/out motion, shift-left hover. ========================================================================== */ :root { --radius: 8px; --radius-lg: 14px; --radius-btn: 12px; --shift: 0; } /* Topbar */ .topbar { background: var(--color-primary); color: #fff; font-size: .82rem; letter-spacing: .02em; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 42px; } .topbar-contact { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.5rem; } .topbar-contact a, .topbar-address { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; padding-block: .35rem; transition: transform .25s var(--ease), color .2s; } .topbar-contact a:hover { color: #fff; transform: none; } .topbar-contact .icon { color: #ff8da1; flex: none; } .topbar-social { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; } .topbar-social a { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border-radius: 50%; transition: background .2s, transform .25s var(--ease); } .topbar-social a:hover { background: var(--color-secondary); color: #fff; transform: none; } @media (max-width: 999px) { .topbar-address { display: none; } } @media (max-width: 560px) { .topbar-contact a span { display: none; } .topbar-contact a { min-width: 34px; justify-content: center; } .topbar-inner { min-height: 40px; } } /* Liquid-glass header and surfaces */ .site-header { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .55)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 30px -18px rgba(6, 21, 47, .35); } .site-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 140% at 15% -40%, rgba(255, 255, 255, .85), transparent 60%), radial-gradient(40% 120% at 90% 140%, rgba(245, 37, 73, .10), transparent 65%); } .site-header .header-inner { position: relative; } .site-header.is-scrolled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px -16px rgba(6, 21, 47, .4); } .mega { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .hv-panel, .mobile-cta { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .hv-panel { background: rgba(11, 31, 68, .72); border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -20px rgba(0, 0, 0, .55); } .why-point { transition: transform .3s var(--ease); } /* Buttons: gradient that slides on hover, soft glow */ .btn { border-radius: var(--radius-btn); min-height: 50px; padding: .85rem 1.6rem; background-size: 220% 100%; background-position: 0 0; transition: transform .3s var(--ease), background-position .5s var(--ease), box-shadow .3s, border-color .2s, color .2s; text-transform: none; letter-spacing: .01em; font-size: .98rem; } .btn::before, .btn::after { display: none !important; } .btn--primary { color: #fff; background-image: linear-gradient(100deg, #1c2b94 0%, #5b2db3 42%, #f52549 100%); box-shadow: 0 12px 26px -10px rgba(76, 45, 180, .6); } .btn--primary:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(245, 37, 73, .6); } .btn--secondary { color: var(--color-primary); background: #fff; border: 1.5px solid var(--color-border); box-shadow: var(--shadow-sm); } .btn--secondary:hover { color: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 10px 22px -12px rgba(0, 36, 107, .45); } .btn--ghost { color: #fff; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .35); } .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .14); } .btn--light { color: var(--color-dark); background: #fff; box-shadow: var(--shadow-sm); } .btn--light:hover { color: var(--color-primary); box-shadow: 0 10px 24px -10px rgba(255, 255, 255, .5); } .btn:hover { transform: none; } .btn:focus-visible { outline-offset: 3px; } .btn:hover .icon { transform: translateX(4px); } .btn[disabled] { opacity: .6; } /* Shift-left hover everywhere */ .card-service, .post-card, .case-card, .testi, .cap, .problem, .approach-item, .benefit, .ind, .mv, .panel, .job, .contact-line, .tech-wall > div, .fs-item, .why-point, .sub-service-links a, .work-card, .filter-bar a, .share a, .check-list li, .stat, .result { transition: transform .3s var(--ease), box-shadow .3s, border-color .3s, background .3s, color .3s, padding .35s var(--ease); } .card-service:hover, .post-card:hover, .case-card:hover, .testi:hover, .cap:hover, .problem:hover, .approach-item:hover, .benefit:hover, .ind:hover, .mv:hover, .panel:hover, .job:hover, .contact-line:hover, .tech-wall > div:hover, .fs-item:hover, .why-point:hover, .sub-service-links a:hover, .work-card:hover, .filter-bar a:hover, .share a:hover, .check-list li:hover, .result:hover, .stat:hover { transform: none; } .link-arrow:hover, .primary-nav a:hover, .nav-trigger:hover, .footer-cols a:hover, .breadcrumbs a:hover, .mega-col li a:hover, .social a:hover, .pagination a:hover, .slider-nav button:hover, .nav-toggle:hover { transform: none; } .link-arrow, .primary-nav a, .nav-trigger, .footer-cols a, .breadcrumbs a, .mega-col li a, .social a, .pagination a, .slider-nav button, .nav-toggle { transition: transform .25s var(--ease), color .2s, background .2s; } .fs-item:hover { padding-inline: 0; } .cap-grid .cap:hover, .ind-grid .ind:hover { z-index: 1; } /* Little border radius everywhere */ .cap-grid, .ind-grid, .tech-wall, .approach, .results-band, .stats-grid { border-radius: var(--radius-lg); overflow: hidden; } .card-service, .post-card, .case-card, .testi, .panel, .problem, .mv, .job, .form-wrap, .toc, .author-box, .empty-state, .cta-strip, .device, .svc-visual, .hv-panel, .map-frame, .meta-table, .mega-aside, .work-card, .phone-shot { border-radius: var(--radius-lg); } .case-head, .post-thumb, .shots img, .featured-image img, .prose img { border-radius: var(--radius); } .case-card, .post-card, .work-card { overflow: hidden; } .case-head { border-radius: 0; } .field input, .field select, .field textarea, .search-form input[type="search"], .search-form input[type="submit"] { border-radius: 10px; } .filter-bar a, .pagination a, .pagination span, .tag-list li, .sub-service-links a, .share a, .nav-toggle, .slider-nav button, .process-tab, .cap li { border-radius: 10px; } .tag-list li, .cap li, .work-tag { border-radius: 999px; } .work-arrow { border-radius: 12px; } .fs-item .arrow { border-radius: 12px; } .fs-item { border-radius: 0; } .logo-plate { border-radius: 10px; } .site-logo img { border-radius: 4px; } .mobile-nav .logo-plate { border-radius: 10px; } .form-status { border-radius: 0 var(--radius) var(--radius) 0; } .faq details { border-radius: 0; } .device img { border-radius: 4px; } .icon-box { border-radius: 14px; clip-path: none; } .step-dot { border-radius: 0; } /* Infinite scroller */ .marquee { background: #fff; border-block: 1px solid var(--color-border); overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-list { display: flex; flex: none; align-items: center; list-style: none; margin: 0; padding: 0; } .marquee-list li { display: flex; align-items: center; white-space: nowrap; padding: 1.15rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-dark); } .marquee-list li::after { content: ""; width: 9px; height: 9px; margin-inline: 2.4rem; background: var(--color-secondary); transform: rotate(45deg); flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; width: auto; flex-wrap: wrap; } .marquee-list[aria-hidden] { display: none; } .marquee { -webkit-mask-image: none; mask-image: none; } } /* Section heading: enter and exit */ .js .section-heading[data-reveal="heading"] { opacity: 1; translate: 0 0; transition: none; } .js .section-heading[data-reveal="heading"] > * { opacity: 0; translate: 0 38px; filter: blur(6px); transition: opacity .7s var(--ease), translate .8s var(--ease), filter .7s var(--ease); } .js .section-heading[data-reveal="heading"] > :nth-child(2) { transition-delay: .08s; } .js .section-heading[data-reveal="heading"] > :nth-child(3) { transition-delay: .16s; } .js .section-heading[data-reveal="heading"].is-in > * { opacity: 1; translate: 0 0; filter: none; } .js .section-heading[data-reveal="heading"].is-out-up > * { opacity: 0; translate: 0 -38px; filter: blur(6px); transition-delay: 0s; } .js .section-heading[data-reveal="heading"].is-out-down > * { opacity: 0; translate: 0 38px; filter: blur(6px); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .js .section-heading[data-reveal="heading"] > * { opacity: 1 !important; translate: none !important; filter: none !important; } } /* Footer only: lift on hover */ .site-footer a, .site-footer .btn { transition: transform .3s var(--ease), color .2s, background .2s, box-shadow .3s; } .site-footer .footer-cols a:hover, .site-footer .footer-bottom a:hover, .site-footer .footer-contact a:hover, .site-footer .social a:hover, .site-footer .btn:hover, .site-footer .logo-plate:hover { transform: translateY(-4px); } /* Buttons: lift on hover */ .btn:hover, .site-footer .btn:hover { transform: translateY(-5px); } /* Eyebrow capsule with live pulsing dot */ .eyebrow { gap: .65rem; padding: .5rem 1.05rem .5rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); color: var(--color-primary); font-size: .74rem; letter-spacing: .14em; box-shadow: 0 6px 18px -10px rgba(0, 36, 107, .35); text-decoration: none; } .eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 0 rgba(245, 37, 73, .55), 0 0 10px 1px rgba(245, 37, 73, .6); animation: dot-ping 2s cubic-bezier(.2, .7, .2, 1) infinite; } .section--dark .eyebrow, .hero .eyebrow, .cta-band .eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(245, 37, 73, .6), 0 0 10px 1px rgba(245, 37, 73, .6); transform: scale(1); } 60% { box-shadow: 0 0 0 9px rgba(245, 37, 73, 0), 0 0 14px 3px rgba(245, 37, 73, .7); transform: scale(1.15); } 100% { box-shadow: 0 0 0 0 rgba(245, 37, 73, 0), 0 0 10px 1px rgba(245, 37, 73, .6); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } } /* Hero floating elements */ .hv-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 12px; color: #fff; font: 600 .78rem/1 var(--font-display); letter-spacing: .04em; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -12px rgba(0, 0, 0, .6); animation: hv-float var(--dur, 6s) ease-in-out var(--dl, 0s) infinite; } .hv-chip .icon { color: #ff8da1; } .hv-chip b { font-weight: 600; } .hv-chip--c1 { --dur: 6s; left: 2%; top: 4%; } .hv-chip--c2 { --dur: 7.5s; --dl: -1.5s; right: 2%; top: 30%; } .hv-chip--c3 { --dur: 5.5s; --dl: -3s; left: -2%; top: 46%; } .hv-chip--c4 { --dur: 8s; --dl: -2s; right: 20%; top: -3%; } .hv-chip--c5 { --dur: 6.5s; --dl: -4s; left: 38%; bottom: -3%; } .hv-chip--c6 { --dur: 7s; --dl: -.5s; right: -2%; bottom: 30%; } .hv-chip--c7 { --dur: 5s; --dl: -2.5s; left: 30%; top: -5%; } .hv-chip--c2 .icon, .hv-chip--c6 .icon { color: #7dd3fc; } .hv-chip--c4 .icon, .hv-chip--c7 .icon { color: #86efac; } @keyframes hv-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 33% { transform: translate3d(6px, -12px, 0) rotate(1.2deg); } 66% { transform: translate3d(-5px, -4px, 0) rotate(-1deg); } } .hv-orbit { position: absolute; left: 50%; top: 46%; width: 86%; aspect-ratio: 1; margin: -43% 0 0 -43%; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 50%; animation: hv-spin 60s linear infinite; pointer-events: none; } .hv-orbit::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 14px 3px rgba(245, 37, 73, .7); } .hv-orbit--2 { width: 112%; margin: -56% 0 0 -56%; animation-duration: 90s; animation-direction: reverse; border-color: rgba(125, 211, 252, .12); } .hv-orbit--2::after { background: #7dd3fc; box-shadow: 0 0 14px 3px rgba(125, 211, 252, .6); } @keyframes hv-spin { to { transform: rotate(360deg); } } .hv-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .6; animation: hv-twinkle 3s ease-in-out infinite; } .hv-dot--1 { left: 12%; top: 22%; } .hv-dot--2 { right: 10%; top: 12%; animation-delay: -1s; background: var(--color-secondary); } .hv-dot--3 { left: 48%; bottom: 8%; animation-delay: -2s; } .hv-dot--4 { right: 6%; bottom: 14%; animation-delay: -.5s; background: #7dd3fc; } @keyframes hv-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.4); } } .hv-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .hv-links path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 6; animation: hv-dash 8s linear infinite; } @keyframes hv-dash { to { stroke-dashoffset: -90; } } .hero-visual { z-index: 1; } @media (max-width: 559px) { .hv-chip--c3, .hv-chip--c5, .hv-chip--c7, .hv-orbit--2 { display: none; } .hv-chip--c1 { left: 0; } .hv-chip--c2, .hv-chip--c6 { right: 0; } .hv-chip { padding: .4rem .65rem; font-size: .7rem; } } @media (prefers-reduced-motion: reduce) { .hv-chip, .hv-orbit, .hv-dot, .hv-links path { animation: none; } } .hv-chip--c1 { left: -2%; top: -7%; } /* Animated hero headline */ .hero-title { display: flex; flex-direction: column; align-items: flex-start; } .ht-line { display: block; } .ht-rotator { display: grid; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } .ht-word { grid-area: 1 / 1; color: var(--color-secondary); opacity: 0; transform: translateY(70%); filter: blur(6px); animation: ht-cycle 12s var(--ease) infinite; animation-delay: calc(var(--i) * 2s); } @keyframes ht-cycle { 0% { opacity: 0; transform: translateY(70%); filter: blur(6px); } 4%, 14% { opacity: 1; transform: translateY(0); filter: blur(0); } 18%, 100% { opacity: 0; transform: translateY(-70%); filter: blur(6px); } } @media (prefers-reduced-motion: reduce) { .ht-word { animation: none; } .ht-word:first-child { opacity: 1; transform: none; filter: none; } } /* Hero social proof */ .hero-side { display: grid; gap: var(--space-lg); } .proof { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); width: fit-content; max-width: 100%; justify-self: center; } .proof-avatars { display: flex; flex: none; } .proof-avatars img, .proof-plus { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--color-dark); object-fit: cover; margin-left: -12px; background: var(--color-primary); } .proof-avatars > :first-child { margin-left: 0; } .proof-plus { display: grid; place-items: center; color: #fff; font: 700 1.1rem var(--font-display); background: var(--color-secondary); } .proof-text { margin: 0; display: grid; line-height: 1.35; font-size: .88rem; color: #9fb0cc; } .proof-text strong { color: #fff; font-family: var(--font-display); font-size: 1rem; } .proof-text .suffix { color: #ff8da1; } @media (max-width: 480px) { .proof { border-radius: 20px; padding: .75rem; } .proof-avatars img, .proof-plus { width: 38px; height: 38px; margin-left: -10px; } } /* Social proof animations */ .proof { position: relative; animation: proof-float 6s ease-in-out infinite; } .proof::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(245, 37, 73, .9) 85%, rgba(125, 211, 252, .8) 95%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: proof-spin 4s linear infinite; pointer-events: none; } @property --ang { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes proof-spin { to { --ang: 360deg; } } @keyframes proof-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .js .proof .proof-avatars > * { opacity: 0; transform: translateX(-14px) scale(.5); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.3, 1.6, .5, 1); } .js .proof.is-in .proof-avatars > * { opacity: 1; transform: none; } .proof.is-in .proof-avatars > :nth-child(2) { transition-delay: .12s; } .proof.is-in .proof-avatars > :nth-child(3) { transition-delay: .24s; } .proof.is-in .proof-avatars > :nth-child(4) { transition-delay: .36s; } .proof.is-in .proof-avatars > :nth-child(5) { transition-delay: .48s; } .proof-avatars img { transition: transform .3s var(--ease); } .proof-avatars img:hover { transform: translateY(-5px) scale(1.08); position: relative; z-index: 2; } .proof-plus { animation: proof-pulse 2.4s ease-out infinite; } @keyframes proof-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 37, 73, .6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(245, 37, 73, 0); } } .proof-text strong { background: linear-gradient(100deg, #fff 30%, #ff8da1 50%, #fff 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: proof-shine 4s ease-in-out infinite; } .proof-text strong .suffix { -webkit-text-fill-color: #ff8da1; } @keyframes proof-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -80% 0; } } @media (prefers-reduced-motion: reduce) { .proof, .proof::before, .proof-plus, .proof-text strong { animation: none; } .proof-text strong { -webkit-text-fill-color: #fff; background: none; } .js .proof .proof-avatars > * { opacity: 1; transform: none; } } /* Primary button: blue to pink */ .btn--primary { background-image: linear-gradient(100deg, #0a3589 0%, #f52549 50%, #0a3589 100%); background-size: 200% 100%; background-position: 0 0; box-shadow: 0 12px 26px -10px rgba(245, 37, 73, .5); } .btn--primary:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(10, 53, 137, .6); } /* Stats band: centred group, glow and shimmer */ .stats { background: radial-gradient(80% 160% at 50% -40%, #0f3a94, var(--color-primary) 60%, #001a52); overflow: hidden; } .stats::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 64px 100%; pointer-events: none; } .stats::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #ff8da1, #7dd3fc, transparent); animation: stats-sweep 5s ease-in-out infinite; } @keyframes stats-sweep { to { left: 100%; } } .stats-grid { display: flex; flex-wrap: wrap; justify-content: center; border: 0; border-radius: 0; overflow: visible; } .stat { position: relative; flex: 0 1 auto; text-align: left; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.4vw, 3.25rem); border-left: 1px solid rgba(255, 255, 255, .16); border-bottom: 0; overflow: hidden; } .stat:first-child, .stat:nth-child(odd):first-child { border-left: 0; } .stat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 120%), rgba(255, 141, 161, .22), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; } .stat:hover::before { opacity: 1; } .stat-value { background: linear-gradient(100deg, #fff 40%, #ffc2cd 60%, #fff 80%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: stat-shine 5s ease-in-out infinite; font-variant-numeric: tabular-nums; display: inline-block; } .stat-value .suffix { -webkit-text-fill-color: #ff8da1; display: inline-block; } .stat:hover .stat-value .suffix { animation: stat-pop .6s var(--ease); } @keyframes stat-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -60% 0; } } @keyframes stat-pop { 40% { transform: scale(1.35) rotate(-8deg); } } @media (max-width: 799px) { .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { border-left: 0; padding-inline: var(--space-sm); border-bottom: 1px solid rgba(255, 255, 255, .12); } .stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .16); } .stat:last-child { grid-column: 1 / -1; border-left: 0; border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .stats::after, .stat-value { animation: none; } .stat-value { -webkit-text-fill-color: #fff; background: none; } } /* Section heading: title left, supporting text right */ @media (min-width: 900px) { .section-heading:has(> .lead):not(.section-heading--center) { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 var(--space-xl); max-width: none; width: 100%; } .section-heading:has(> .lead):not(.section-heading--center) > .eyebrow { flex: 0 0 auto; margin-bottom: var(--space-sm); } .section-heading:has(> .lead):not(.section-heading--center)::after { content: ""; order: 1; flex-basis: 100%; height: 0; } .section-heading:has(> .lead):not(.section-heading--center) > .eyebrow { order: 0; } .section-heading:has(> .lead):not(.section-heading--center) > h1, .section-heading:has(> .lead):not(.section-heading--center) > h2 { order: 2; flex: 1 1 52%; max-width: 640px; margin: 0; } .section-heading:has(> .lead):not(.section-heading--center) > .lead { order: 3; flex: 0 1 42%; max-width: 520px; margin: 0 0 .35rem; } } /* Section headings: larger, fluid size */ .section-heading h2 { font-weight: 700; font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4rem); line-height: 1.08; } @media (min-width: 900px) { .section-heading:has(> .lead):not(.section-heading--center) > h2 { max-width: 760px; } } /* Capability card particles */ .cap > :not(.particles) { position: relative; z-index: 1; } .cap .cap-num { position: absolute; } .particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .particles i { position: absolute; bottom: -10px; border-radius: 50%; background: rgba(0, 36, 107, .28); opacity: 0; animation: particle-rise linear infinite; } .particles i.pk { background: rgba(245, 37, 73, .4); } .particles i.bl { background: rgba(91, 140, 255, .4); } .cap:hover .particles i { filter: brightness(1.3); box-shadow: 0 0 8px currentColor; } @keyframes particle-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translate(var(--dx, 0), -380px) scale(1.1); opacity: 0; } } /* Capability card "Learn more": glass capsule button */ .cap .link-arrow { align-self: flex-start; margin-top: var(--space-md); padding: .7rem 1.2rem; border-radius: 999px; color: var(--color-primary); background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(0, 36, 107, .08)); border: 1px solid rgba(0, 36, 107, .18); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 20px -12px rgba(0, 36, 107, .45); text-transform: none; letter-spacing: .01em; font-size: .92rem; transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s; } .cap .link-arrow .icon { transition: transform .3s var(--ease); } .cap .link-arrow:hover { transform: translateY(-5px); color: #fff; background: linear-gradient(135deg, rgba(0, 36, 107, .92), rgba(245, 37, 73, .85)); border-color: transparent; box-shadow: 0 14px 26px -12px rgba(245, 37, 73, .55); } .cap .link-arrow:hover .icon { transform: translateX(4px); } .cap .link-arrow { margin-top: auto; } .cap ul { margin-bottom: var(--space-md); } /* Closing CTA illustration */ .cta-illustration { position: absolute; right: max(var(--gutter), calc((100vw - var(--container)) / 2)); top: 50%; width: min(540px, 44vw); height: auto; transform: translateY(-50%); } .ci-float { animation: ci-float 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .ci-float--b { animation-duration: 5.5s; animation-delay: -1s; } .ci-float--c { animation-duration: 6.5s; animation-delay: -2s; } .ci-float--d { animation-duration: 8s; animation-delay: -3s; } .ci-float--e { animation-duration: 6s; animation-delay: -.5s; } @keyframes ci-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .ci-b { transform-box: fill-box; transform-origin: left center; animation: ci-build 9s var(--ease) infinite; animation-delay: calc(var(--i) * .35s); } @keyframes ci-build { 0% { opacity: 0; transform: translateY(14px) scaleX(.6); } 8%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } } .ci-cursor { animation: ci-click 9s ease-in-out infinite; transform-box: fill-box; } @keyframes ci-click { 0%, 18% { transform: translate(180px, 90px); } 30% { transform: translate(0, 0); } 34% { transform: translate(0, 0) scale(.85); } 38%, 82% { transform: translate(0, 0); } 100% { transform: translate(180px, 90px); } } .ci-dot { animation: ci-typing 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); transform-box: fill-box; transform-origin: center; } @keyframes ci-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-6px); opacity: 1; } } .ci-rays { animation: ci-pulse 2.4s ease-in-out infinite; } @keyframes ci-pulse { 50% { opacity: .35; } } .ci-trail { animation: hv-dash 6s linear infinite; } .ci-spark { animation: hv-twinkle 3s ease-in-out infinite; } @media (max-width: 899px) { .cta-illustration { display: none; } } @media (prefers-reduced-motion: reduce) { .ci-float, .ci-b, .ci-cursor, .ci-dot, .ci-rays, .ci-trail, .ci-spark { animation: none; } .ci-b { opacity: 1; } } /* Footer redesign: brand + CTA row, then all menus in one horizontal line */ .site-footer { background: radial-gradient(60% 50% at 85% 0%, rgba(10, 53, 137, .55), transparent 70%), radial-gradient(40% 40% at 5% 100%, rgba(245, 37, 73, .12), transparent 70%), var(--color-dark); padding-top: clamp(3rem, 6vw, 4.5rem); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #0a3589, #f52549, #7dd3fc, transparent); background-size: 200% 100%; animation: footer-line 8s linear infinite; } @keyframes footer-line { to { background-position: -200% 0; } } .site-footer::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); pointer-events: none; } .site-footer > .container { position: relative; z-index: 1; } .footer-hero { display: grid; gap: var(--space-lg); align-items: center; padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: var(--space-xl); } .footer-hero .footer-brand p { margin: 0; max-width: 42ch; } .footer-hero .footer-brand .logo-plate { margin-bottom: var(--space-sm); } .footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 50px -28px rgba(0, 0, 0, .7); } .footer-cta strong { display: block; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); color: #fff; line-height: 1.2; margin-bottom: .25rem; } .footer-cta span { color: var(--color-on-dark); font-size: .95rem; } @media (min-width: 960px) { .footer-hero { grid-template-columns: 1fr 1.25fr; gap: var(--space-xl); } } .site-footer .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); padding-bottom: var(--space-xl); } @media (min-width: 700px) { .site-footer .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .site-footer .footer-cols { grid-template-columns: repeat(6, minmax(0, auto)); justify-content: space-between; gap: var(--space-md); } } .footer-cols h3 { position: relative; padding-bottom: .75rem; margin-bottom: var(--space-sm); } .footer-cols h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--color-secondary); transition: width .35s var(--ease); } .footer-cols > div:hover h3::after { width: 54px; } .footer-cols a { position: relative; } .footer-contact li { grid-template-columns: 20px 1fr; } .footer-contact li span, .footer-contact a { overflow-wrap: anywhere; } .footer-bottom { align-items: center; } .footer-bottom .social { margin: 0; } .social a { border-radius: 12px; background: rgba(255, 255, 255, .06); } .footer-bottom a { text-decoration: none; } .footer-bottom > a:last-child:hover { text-decoration: underline; } /* Footer menus: one row, space-between */ @media (min-width: 1100px) { .site-footer .footer-cols { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: var(--space-md); } .site-footer .footer-cols > div { flex: 0 0 auto; } .site-footer .footer-cols > div:last-child { max-width: 230px; } } /* Mega menu: floating centred panel */ .mega { left: 0; right: 0; margin-inline: auto; width: min(1040px, calc(100% - 2rem)); top: calc(100% + 10px); background: rgba(255, 255, 255, .96); border: 1px solid rgba(0, 36, 107, .12); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(6, 21, 47, .45), inset 0 1px 0 #fff; overflow: hidden; } .mega .mega-grid { max-width: none; padding: var(--space-lg); gap: var(--space-lg); grid-template-columns: repeat(3, 1fr) 1.15fr; } .mega ul { list-style: none; margin: 0; padding: 0; } .mega-col li a { border-radius: 8px; padding: .5rem .6rem; margin-left: -.6rem; } .mega-col li a:hover { background: var(--color-light); text-decoration: none; color: var(--color-primary); } .mega-aside { border-radius: 14px; } .mega { width: min(1120px, calc(100% - 2rem)); } .mega .mega-grid { grid-template-columns: 1.25fr 1.1fr 1fr 1.1fr; } .mega-col li a { white-space: nowrap; } /* Video testimonials */ .vt { overflow: hidden; } .vt::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -160px; background: radial-gradient(closest-side, rgba(10, 53, 137, .6), transparent); pointer-events: none; } .vt-grid { display: grid; gap: var(--space-md); position: relative; z-index: 1; } @media (min-width: 640px) { .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .vt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vt-card { margin: 0; padding: .75rem; border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 50px -28px rgba(0, 0, 0, .8); position: relative; transition: transform .4s var(--ease), border-color .3s, box-shadow .3s; } .vt-card:hover { transform: translateY(-6px); border-color: rgba(245, 37, 73, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -26px rgba(245, 37, 73, .45); } .vt-play, .vt-frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden; background: #000; padding: 0; cursor: pointer; } .vt-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: saturate(1.05); } .vt-card:hover .vt-play img { transform: scale(1.06); } .vt-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 21, 47, .65), transparent 55%); pointer-events: none; } .vt-btn { position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg, #0a3589, #f52549); box-shadow: 0 10px 30px -6px rgba(245, 37, 73, .7), inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .3s var(--ease); } .vt-btn svg { margin-left: 3px; } .vt-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(245, 37, 73, .7); animation: vt-ring 2.2s ease-out infinite; } @keyframes vt-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } } .vt-play:hover .vt-btn { transform: scale(1.12); } .vt-eq { position: absolute; z-index: 2; right: 14px; bottom: 12px; display: flex; align-items: flex-end; gap: 3px; height: 22px; } .vt-eq i { width: 4px; border-radius: 2px; background: rgba(255, 255, 255, .85); animation: vt-eq 1.1s ease-in-out infinite; } .vt-eq i:nth-child(1) { height: 40%; } .vt-eq i:nth-child(2) { height: 80%; animation-delay: -.3s; } .vt-eq i:nth-child(3) { height: 55%; animation-delay: -.6s; } .vt-eq i:nth-child(4) { height: 95%; animation-delay: -.2s; } .vt-eq i:nth-child(5) { height: 35%; animation-delay: -.8s; } @keyframes vt-eq { 50% { transform: scaleY(.35); } } .vt-card figcaption { display: flex; align-items: center; gap: .8rem; padding: .9rem .4rem .25rem; } .vt-card figcaption b { display: block; color: #fff; font-family: var(--font-display); line-height: 1.2; } .vt-card figcaption small { color: var(--color-on-dark); font-size: .85rem; } .vt-card .avatar { background: linear-gradient(135deg, #0a3589, #f52549); } .vt-yt { margin-left: auto; font: 600 .68rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #ff8da1; padding: .35rem .6rem; border: 1px solid rgba(255, 141, 161, .4); border-radius: 999px; } .vt-card.is-playing .vt-eq { display: none; } .vt-empty { position: relative; z-index: 1; padding: var(--space-xl) var(--space-md); border: 1px dashed rgba(255, 255, 255, .3); border-radius: var(--radius-lg); text-align: center; color: var(--color-on-dark); } .vt-empty strong { color: #fff; font-family: var(--font-display); font-size: 1.2rem; } @media (prefers-reduced-motion: reduce) { .vt-btn::before, .vt-eq i { animation: none; } } /* Video testimonials: light grid background with blue + pink frosted glows */ .vt { background-color: #fff; background-image: linear-gradient(to right, rgba(0, 36, 107, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 36, 107, .07) 1px, transparent 1px); background-size: 32px 32px; isolation: isolate; } .vt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at 92% 0%, rgba(10, 53, 137, .35), transparent 70%), radial-gradient(460px circle at 6% 100%, rgba(245, 37, 73, .30), transparent 70%), radial-gradient(300px circle at 55% 55%, rgba(245, 37, 73, .10), transparent 70%); } .vt::after { display: none; } .vt .vt-frost { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; } .vt h2 { color: var(--color-dark); } .vt .lead { color: var(--color-muted); } .vt .eyebrow { background: rgba(255, 255, 255, .7); border-color: var(--color-border); color: var(--color-primary); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .vt-card { background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .45)); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 #fff, 0 24px 50px -26px rgba(0, 36, 107, .45); } .vt-card:hover { border-color: rgba(245, 37, 73, .5); box-shadow: inset 0 1px 0 #fff, 0 30px 60px -24px rgba(245, 37, 73, .4); } .vt-card figcaption b { color: var(--color-dark); } .vt-card figcaption small { color: var(--color-muted); } .vt-yt { color: var(--color-secondary-700); border-color: rgba(245, 37, 73, .35); background: rgba(255, 255, 255, .6); } .vt-empty { border-color: var(--color-border); color: var(--color-muted); background: rgba(255, 255, 255, .6); } .vt-empty strong { color: var(--color-dark); } /* Video testimonials: lighter, faded grid */ .vt { background-image: none; } .vt::after { display: block; content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; width: auto; height: auto; right: 0; top: 0; background: linear-gradient(to right, rgba(0, 36, 107, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 36, 107, .045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 30%, transparent 100%); } /* Why SmacPage: glass cards, spotlight, aurora */ .why { overflow: hidden; } .why-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; } .why-blob--1 { width: 460px; height: 460px; left: -120px; top: 10%; background: rgba(10, 53, 137, .9); animation: why-drift 16s ease-in-out infinite alternate; } .why-blob--2 { width: 380px; height: 380px; right: -80px; bottom: -80px; background: rgba(245, 37, 73, .45); animation: why-drift 20s ease-in-out -6s infinite alternate-reverse; } @keyframes why-drift { to { transform: translate(60px, -50px) scale(1.15); } } .why-shine { background: linear-gradient(100deg, #fff 20%, #ff8da1 45%, #7dd3fc 60%, #fff 80%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: stat-shine 6s ease-in-out infinite; } .why-points { gap: var(--space-md); grid-template-columns: minmax(0, 1fr); counter-reset: none; } @media (min-width: 640px) { .why-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .why-point { position: relative; display: block; overflow: hidden; padding: var(--space-md) var(--space-md) var(--space-md); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 50px -30px rgba(0, 0, 0, .8); transition: transform .4s var(--ease), border-color .3s, box-shadow .3s; } .why-point::before { content: ""; position: absolute; inset: 0; counter-increment: none; padding: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -30%), rgba(245, 37, 73, .28), rgba(10, 53, 137, .18) 45%, transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; color: transparent; font-size: 0; } .why-point::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #f52549, #7dd3fc, transparent); transform: translateX(-100%); transition: transform .8s var(--ease); } .why-point:hover { transform: translateY(-6px); border-color: rgba(255, 141, 161, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -28px rgba(245, 37, 73, .45); } .why-point:hover::before { opacity: 1; } .why-point:hover::after { transform: translateX(100%); } .why-point > * { position: relative; z-index: 1; } .why-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: var(--space-sm); border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0a3589, #f52549); box-shadow: 0 12px 24px -10px rgba(245, 37, 73, .6), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); } .why-point:hover .why-icon { transform: rotate(-8deg) scale(1.1); } .why-icon .icon { transition: transform .4s var(--ease); } .why-num { position: absolute !important; right: 1rem; top: .35rem; z-index: 0 !important; font: 700 3.6rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); transition: -webkit-text-stroke-color .3s, transform .5s var(--ease); } .why-point:hover .why-num { -webkit-text-stroke-color: rgba(255, 141, 161, .8); transform: translateY(4px) scale(1.06); } .why-point h3 { margin: 0 0 .4rem; font-size: 1.2rem; } .why-point p { margin: 0; font-size: .96rem; } @media (prefers-reduced-motion: reduce) { .why-blob, .why-shine { animation: none; } .why-shine { -webkit-text-fill-color: #fff; background: none; } } /* Merged Why + Process section */ .why.grid-bg::before { background-size: 40px 40px; -webkit-mask-image: linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, .55) 14%, transparent 36%, transparent 64%, rgba(0, 0, 0, .55) 86%, #000 100%); mask-image: linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, .55) 14%, transparent 36%, transparent 64%, rgba(0, 0, 0, .55) 86%, #000 100%); } .process-block { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(255, 255, 255, .12); position: relative; } .why .process-tab { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05); } .why .process-tab[aria-selected="true"] { background: linear-gradient(100deg, #0a3589, #f52549); border-color: transparent; } .process-block { grid-column: 1 / -1; width: 100%; } /* Brand showcase section */ .showcase { background: #fff; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); } .showcase-grid { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 960px) { .showcase-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); } } .showcase-mark { width: clamp(110px, 14vw, 170px); height: auto; margin-bottom: var(--space-md); animation: float 7s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(0, 36, 107, .25)); } .showcase-title { display: flex; flex-wrap: wrap; gap: 0 .3em; font-size: clamp(2.4rem, 1.2rem + 4vw, 4.4rem); letter-spacing: -.03em; margin-bottom: var(--space-md); } .sw { color: var(--color-dark); animation: sw-hl 6s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); } @keyframes sw-hl { 0%, 4% { color: var(--color-dark); } 8%, 30% { color: var(--color-primary-600); text-shadow: 0 0 28px rgba(10, 53, 137, .35); } 38%, 100% { color: var(--color-dark); text-shadow: none; } } .showcase-sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); line-height: 1.35; color: var(--color-dark); max-width: 30ch; margin-bottom: var(--space-sm); } .showcase-text { color: var(--color-muted); max-width: 52ch; } .showcase-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; height: clamp(380px, 46vw, 560px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } .sc-col { overflow: hidden; } .sc-track { display: flex; flex-direction: column; gap: 1rem; animation: sc-up 34s linear infinite; } .sc-col--1 .sc-track { animation-name: sc-down; animation-duration: 40s; } .sc-col--2 .sc-track { animation-duration: 30s; } .showcase-cols:hover .sc-track { animation-play-state: paused; } @keyframes sc-up { to { transform: translateY(calc(-50% - .5rem)); } } @keyframes sc-down { from { transform: translateY(calc(-50% - .5rem)); } to { transform: translateY(0); } } .sc-card { display: grid; justify-items: center; align-content: center; gap: .6rem; padding: 1.4rem .8rem 1rem; min-height: 150px; border-radius: 16px; background: #f1f2f5; border: 1px solid rgba(0, 36, 107, .06); text-align: center; transition: background .3s, box-shadow .3s; } .sc-card:hover { background: #fff; box-shadow: 0 16px 30px -18px rgba(0, 36, 107, .4); } .sc-card img { width: auto; max-width: 70%; max-height: 74px; object-fit: contain; } .sc-card span { font: 500 .78rem/1.2 var(--font-body); color: var(--color-muted); } @media (max-width: 560px) { .showcase-cols { gap: .6rem; } .sc-card { min-height: 120px; padding: 1rem .5rem .8rem; } .sc-card img { max-height: 56px; } } @media (prefers-reduced-motion: reduce) { .sc-track, .sw, .showcase-mark { animation: none; } } .showcase-title { font-size: clamp(2.1rem, 1rem + 3.1vw, 3.8rem); white-space: nowrap; flex-wrap: nowrap; } /* Showcase bottom edge: glowing divider so it reads as its own section */ .showcase { position: relative; padding-bottom: clamp(4rem, 8vw, 6.5rem); background: linear-gradient(180deg, #fff 70%, #f3f6fd 100%); } .showcase::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: radial-gradient(60% 100% at 18% 100%, rgba(10, 53, 137, .16), transparent 70%), radial-gradient(50% 100% at 85% 100%, rgba(245, 37, 73, .14), transparent 70%); pointer-events: none; } .showcase::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, #0a3589 25%, #f52549 50%, #7dd3fc 75%, transparent 100%); background-size: 200% 100%; animation: footer-line 7s linear infinite; box-shadow: 0 -6px 26px rgba(245, 37, 73, .35); } .showcase > .container { position: relative; z-index: 1; } .showcase-dots { position: absolute; left: 0; right: 0; bottom: 18px; height: 28px; display: flex; justify-content: center; gap: .9rem; pointer-events: none; } .showcase-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 36, 107, .25); animation: showcase-dot 2.4s ease-in-out infinite; animation-delay: calc(var(--n) * .15s); } .showcase-dots i:nth-child(3n) { background: rgba(245, 37, 73, .45); } @keyframes showcase-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-9px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .showcase::after, .showcase-dots i { animation: none; } } .showcase::after, .showcase-dots { display: none; } /* Portfolio slider */ .ps { background: #f5f7fb; } .ps-head { text-align: center; max-width: 820px; margin: 0 auto clamp(2rem, 4vw, 3rem); } .ps-head h2 { font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem); margin-bottom: var(--space-sm); } .ps-blue { color: var(--color-primary-600); } .ps-head .lead { margin: 0 auto; font-size: 1rem; } .ps-card { position: relative; max-width: 1040px; margin-inline: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(0, 36, 107, .45); overflow: hidden; } .ps-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; } .js .ps-slide { display: none; } .js .ps-slide.is-active { display: grid; animation: ps-in .6s var(--ease); } @keyframes ps-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .ps-media { position: relative; background: linear-gradient(135deg, #0a2a6e, #06152f); overflow: hidden; } .ps-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 6s linear; } .ps-slide.is-active:hover .ps-media img { transform: scale(1.06); } .ps-ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem; color: rgba(255, 255, 255, .8); font-weight: 600; } .ps-ph svg { width: 120px; opacity: .45; } .ps-body { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; gap: .75rem; } .ps-body h3 { color: var(--color-primary-600); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); margin: 0; } .ps-tag { font-weight: 600; color: var(--color-dark); margin: 0; } .ps-text { color: var(--color-muted); font-size: .95rem; margin: 0; } .ps-label { margin: .5rem 0 0; font: 700 .72rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-secondary-700); } .ps-tech { margin: 0; } .ps-btn { align-self: flex-start; margin-top: .6rem; min-height: 42px; padding: .55rem 1.2rem; font-size: .88rem; } .ps-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: .6rem; z-index: 3; } .ps-arrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; background: #fff; color: var(--color-primary); box-shadow: 0 8px 20px -6px rgba(0, 36, 107, .5); transition: transform .3s var(--ease), background .3s, color .3s; } .ps-arrow--prev .icon { transform: rotate(180deg); } .ps-arrow--next { background: linear-gradient(135deg, #0a3589, #f52549); color: #fff; } .ps-arrow:hover { transform: scale(1.12); } .ps-more { text-align: center; margin: var(--space-lg) 0 0; } @media (max-width: 759px) { .ps-slide, .js .ps-slide.is-active { grid-template-columns: 1fr; } .ps-media { aspect-ratio: 16 / 10; } .ps-nav { left: auto; right: 12px; top: 12px; transform: none; display: flex; } } @media (prefers-reduced-motion: reduce) { .js .ps-slide.is-active { animation: none; } .ps-media img { transition: none; } } /* Portfolio slider: wide landscape screenshots shown in full */ .ps-card { max-width: 1120px; } .ps-slide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 0; } .js .ps-slide.is-active { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .ps-media { aspect-ratio: 16 / 10; background: #eef1f8; } .ps-media img { object-fit: contain; object-position: center; } .ps-ph { background: linear-gradient(135deg, #0a2a6e, #06152f); } .ps-slide.is-active:hover .ps-media img { transform: none; } .ps-nav { left: 56.52%; } @media (max-width: 759px) { .ps-slide, .js .ps-slide.is-active { grid-template-columns: 1fr; } .ps-nav { left: auto; } } .ps-media { aspect-ratio: auto; display: grid; align-content: center; background: linear-gradient(135deg, #0a2a6e, #06152f); padding: clamp(.75rem, 2vw, 1.5rem); } .ps-media img { position: static; inset: auto; width: 100%; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); } .ps-ph { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; } /* Text testimonial slider (inside the client testimonials section) */ .vt-text { position: relative; z-index: 1; margin-top: clamp(3rem, 6vw, 5rem); } .vt-text-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; } .vt-text-head h3 { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3rem); margin: 0; color: var(--color-dark); } .vt-grad { background: linear-gradient(100deg, #0a3589, #f52549); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vt-nav { display: flex; } .vt-nav button { width: 46px; height: 46px; border-radius: 50%; border: 0; color: #fff; background: linear-gradient(135deg, #0a3589, #f52549); box-shadow: 0 10px 22px -10px rgba(245, 37, 73, .6); transition: transform .3s var(--ease), box-shadow .3s; } .vt-nav button:hover { background: linear-gradient(135deg, #0a3589, #f52549); color: #fff; transform: translateY(-5px); } .vt-flip { display: grid; transform: rotate(180deg); } .vt-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1.25rem; margin-inline: -.25rem; scrollbar-width: none; } .vt-track::-webkit-scrollbar { display: none; } .tcard { flex: 0 0 calc((100% - 3rem) / 4); min-width: 270px; scroll-snap-align: start; margin: 0; padding: 1.25rem; border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(255, 255, 255, .85), rgba(232, 241, 252, .7)); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #fff, 0 20px 40px -26px rgba(0, 36, 107, .45); transition: transform .4s var(--ease), box-shadow .3s, border-color .3s; } .tcard:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 28px 50px -26px rgba(245, 37, 73, .4); border-color: rgba(245, 37, 73, .35); } .tcard-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; } .tcard-top b { display: block; font-family: var(--font-display); color: var(--color-primary-600); line-height: 1.2; } .tcard-top small { display: block; color: var(--color-muted); font-size: .85rem; } .tcard-avatar { width: 56px; height: 56px; padding: 3px; background: linear-gradient(135deg, #0a3589, #f52549); flex: none; } .tcard-avatar img { border-radius: 50%; border: 2px solid #fff; } .tcard blockquote { margin: 0; } .tcard blockquote p { margin: 0; color: var(--color-text); font-size: .98rem; line-height: 1.65; } @media (max-width: 1099px) { .tcard { flex-basis: calc((100% - 1rem) / 2); } } @media (max-width: 639px) { .tcard { flex-basis: 86%; } } /* Why cards: plain icons, no gradient tile */ .why-icon { background: transparent; box-shadow: none; width: auto; height: auto; border-radius: 0; color: #ff8da1; justify-content: start; } .why-icon .icon { width: 34px; height: 34px; stroke-width: 1.5; } .why-point:hover .why-icon { transform: translateY(-3px); color: #fff; } /* SEO case study stacking cards */ .cs-stack { background: linear-gradient(180deg, #fff, #f6f7fb); } .cs-list { max-width: 980px; margin-inline: auto; padding-bottom: 1rem; } .cs-card { position: sticky; top: calc(var(--header-h) + 28px + var(--i) * 18px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1rem, 3vw, 2.25rem); align-items: center; padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 2.5rem; background: #fff; border-radius: 22px; border: 1px solid rgba(0, 36, 107, .08); box-shadow: 0 30px 60px -34px rgba(0, 36, 107, .35); transform-origin: 50% 0; transform: scale(var(--s, 1)); opacity: var(--o, 1); will-change: transform; } .cs-card:last-child { margin-bottom: 0; } .cs-info h3 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); color: var(--color-primary-600); margin-bottom: .6rem; } .cs-summary { color: var(--color-muted); font-size: .95rem; margin-bottom: 1rem; } .cs-summary em { color: var(--color-secondary-700); font-style: italic; } .cs-tags { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .cs-tags li { padding: .3rem .8rem; border-radius: 999px; font: 600 .78rem/1.2 var(--font-body); color: #fff; background: linear-gradient(135deg, #1c2fd6, #0a3589); } .cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 1.5rem; } .cs-stats > div { text-align: center; padding-inline: .4rem; } .cs-stats > div + div { border-left: 1px solid var(--color-border); } .cs-stats dd { margin: 0; font: 700 clamp(1.4rem, 1rem + 1vw, 1.9rem)/1.1 var(--font-display); color: var(--color-primary-600); order: -1; } .cs-stats dd sup { color: var(--color-secondary); font-size: .55em; top: -.7em; } .cs-stats dt { font-size: .8rem; color: var(--color-muted); font-weight: 500; } .cs-stats > div { display: flex; flex-direction: column; } .btn--outline-pink { color: var(--color-secondary-700); background: #fff; border: 1.5px solid var(--color-secondary); min-height: 44px; padding: .6rem 1.4rem; font-size: .92rem; border-radius: 999px; } .btn--outline-pink:hover { color: #fff; background: var(--color-secondary); transform: translateY(-5px); box-shadow: 0 12px 24px -10px rgba(245, 37, 73, .6); } .cs-media { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #06152f; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); } .cs-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .cs-card:hover .cs-media img { transform: scale(1.04); } .cs-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #0a2a6e, #06152f); } .cs-ph svg { width: 40%; opacity: .4; } @media (max-width: 759px) { .cs-card { position: relative; top: auto; grid-template-columns: 1fr; transform: none; opacity: 1; } .cs-media { order: -1; } } @media (prefers-reduced-motion: reduce) { .cs-card { position: relative; top: auto; transform: none !important; opacity: 1 !important; } } .cs-stack--page > .container { padding-inline: 0; max-width: none; } .cs-stack--page .cs-list { padding-top: .5rem; } /* Industries: refined cards with animated icons */ .ind-wrap { position: relative; } .ind-grid { gap: 1rem; background: transparent; border: 0; border-radius: 0; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { .ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ind { position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; min-height: 112px; padding: 1.1rem 1.1rem; border-radius: 18px; border: 1px solid var(--color-border); background: linear-gradient(150deg, #fff, #f5f8fe); box-shadow: 0 14px 30px -24px rgba(0, 36, 107, .45); transition: transform .4s var(--ease), box-shadow .3s, border-color .3s; } .ind::before { content: ""; position: absolute; inset: 0; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 37, 73, .14), rgba(10, 53, 137, .1) 50%, transparent 75%); opacity: 0; transition: opacity .3s; pointer-events: none; } .ind:hover { background: linear-gradient(150deg, #fff, #f5f8fe); transform: translateY(-6px); border-color: rgba(245, 37, 73, .4); box-shadow: 0 24px 40px -24px rgba(245, 37, 73, .4); } .ind:hover::before { opacity: 1; } .ind > * { position: relative; } .ind b { margin: 0; font-size: 1rem; color: var(--color-dark); flex: 1; } .ind:hover b { color: var(--color-primary-600); } .ind-ico { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: var(--color-primary-600); background: linear-gradient(145deg, #eaf0fc, #fff); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -12px rgba(0, 36, 107, .5); animation: ind-float 5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -.6s); } .ind-ico .icon { color: var(--color-primary-600); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), color .3s; transform-origin: center; animation: ind-breathe 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -.4s); } .ind:hover .ind-ico .icon { color: var(--color-secondary); transform: scale(1.18) rotate(-8deg); animation-play-state: paused; } .ind-ring { position: absolute; inset: -5px; border-radius: 20px; border: 1.5px dashed rgba(245, 37, 73, .0); transition: border-color .3s; animation: ind-spin 14s linear infinite; } .ind:hover .ind-ring { border-color: rgba(245, 37, 73, .6); } .ind-ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 10px rgba(245, 37, 73, .8); opacity: 0; transition: opacity .3s; } .ind:hover .ind-ring::after { opacity: 1; } .ind-go { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0a3589, #f52549); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s var(--ease); flex: none; } .ind:hover .ind-go { opacity: 1; transform: none; } @keyframes ind-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes ind-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes ind-spin { to { transform: rotate(360deg); } } @media (max-width: 759px) { .ind { flex-direction: column; align-items: flex-start; gap: .6rem; min-height: 130px; } .ind-go { display: none; } } @media (prefers-reduced-motion: reduce) { .ind-ico, .ind-ico .icon, .ind-ring { animation: none; } } /* FAQ section and accordion */ .faq-home { background: linear-gradient(180deg, #eef5fd, #f7faff); overflow: hidden; } .faq-home::before { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 53, 137, .18), transparent); pointer-events: none; } .faq-home-grid { display: grid; gap: var(--space-xl); align-items: start; } @media (min-width: 960px) { .faq-home-grid { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); } .faq-home-intro { position: sticky; top: calc(var(--header-h) + 2rem); } } .faq-home-intro h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); } .faq-home-intro .lead { font-size: 1rem; margin-bottom: var(--space-md); max-width: 46ch; } .faqx { display: grid; gap: .8rem; } .faqx-item { border-radius: 16px; background: #fff; border: 1px solid rgba(0, 36, 107, .1); box-shadow: 0 14px 30px -26px rgba(0, 36, 107, .5); transition: background .3s, box-shadow .3s, border-color .3s; overflow: hidden; } .faqx-item:hover { border-color: rgba(245, 37, 73, .4); } .faqx-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 1rem 1.25rem; font: 600 1.02rem/1.35 var(--font-display); color: var(--color-primary-600); } .faqx-item summary::-webkit-details-marker { display: none; } .faqx-ico { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0a3589, #f52549); transition: transform .4s var(--ease); } .faqx-ico::before, .faqx-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease); } .faqx-ico::after { transform: rotate(90deg); } .faqx-item[open] { background: linear-gradient(135deg, #0a3589, #06265f); border-color: transparent; box-shadow: 0 24px 44px -26px rgba(10, 53, 137, .8); } .faqx-item[open] summary { color: #ffd166; } .faqx-item[open] .faqx-ico { transform: rotate(180deg); } .faqx-item[open] .faqx-ico::after { transform: rotate(0); } .faqx-a { padding: 0 1.25rem 1.25rem; color: #e6eefc; font-size: .98rem; animation: faqx-in .45s var(--ease); } .faqx-a p:last-child { margin-bottom: 0; } .faqx-a a { color: #ffd166; } @keyframes faqx-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .faqx-a { animation: none; } } /* Footer: light sheet that clearly separates from the dark CTA above */ .site-footer { background: radial-gradient(50% 60% at 90% 0%, rgba(10, 53, 137, .10), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgba(245, 37, 73, .08), transparent 70%), #f3f6fc; color: var(--color-text); border-radius: 34px 34px 0 0; position: relative; z-index: 2; box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, .55); padding-top: clamp(3.5rem, 6vw, 5rem); } main:has(> .cta-band:last-child) + .site-footer { margin-top: -34px; } .cta-band { padding-bottom: calc(clamp(3.5rem, 8vw, 6.5rem) + 34px); } .site-footer::before { top: 0; left: 34px; right: 34px; height: 3px; border-radius: 3px; } .site-footer::after { background-image: linear-gradient(to right, rgba(0, 36, 107, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 36, 107, .04) 1px, transparent 1px); } .footer-hero { border-bottom-color: rgba(0, 36, 107, .12); } .footer-brand .logo-plate, .site-footer .logo-plate { background: transparent; padding: 0; border-radius: 0; } .footer-brand .logo-plate img { width: 170px; } .footer-brand p { color: var(--color-muted); } .footer-cta { background: linear-gradient(135deg, #0a3589, #06152f); border-color: rgba(255, 255, 255, .2); box-shadow: 0 30px 60px -30px rgba(0, 36, 107, .7); } .footer-cta strong { color: #fff; } .footer-cta span { color: #c0cde6; } .footer-cols h3 { color: var(--color-primary-600); } .footer-cols a { color: var(--color-text); } .footer-cols a:hover { color: var(--color-secondary-700); text-decoration: none; } .footer-contact li { color: var(--color-text); } .footer-contact a { color: var(--color-text); } .footer-contact .icon { color: var(--color-secondary); } .footer-bottom { border-top-color: rgba(0, 36, 107, .12); color: var(--color-muted); } .footer-bottom a { color: var(--color-primary-600); } .social a { color: var(--color-primary-600); background: #fff; border-color: rgba(0, 36, 107, .15); box-shadow: 0 8px 18px -12px rgba(0, 36, 107, .45); } .social a:hover { color: #fff; background: linear-gradient(135deg, #0a3589, #f52549); border-color: transparent; } .site-footer :focus-visible { outline-color: var(--color-secondary); } /* FAQ icons: plain, no gradient */ .faqx-ico { background: transparent; } .faqx-ico::before, .faqx-ico::after { background: var(--color-primary-600); width: 14px; margin-left: -7px; } .faqx-item[open] .faqx-ico::before, .faqx-item[open] .faqx-ico::after { background: #ffd166; } /* Two-colour gradient on the last word of headings (lighter ramp on dark backgrounds) */ .vt-grad { background: linear-gradient(100deg, #1c2b94 0%, #6a2fb0 45%, #f52549 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: .06em; } .section--dark .vt-grad, .hero .vt-grad, .cta-band .vt-grad { background-image: linear-gradient(100deg, #7dd3fc 0%, #c4b5fd 45%, #ff8da1 100%); } .section-heading h2, .hero--page h1, .cta-inner h2 { -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Testimonial slider arrows: plain */ .vt-nav button { background: #fff; color: var(--color-primary-600); border: 1px solid rgba(0, 36, 107, .18); box-shadow: 0 8px 18px -12px rgba(0, 36, 107, .5); } .vt-nav button:hover { background: var(--color-primary-600); color: #fff; border-color: var(--color-primary-600); box-shadow: 0 12px 22px -12px rgba(0, 36, 107, .6); transform: translateY(-5px); } /* Footer: brand socials, legal links in the bottom bar, giant wordmark */ .footer-brand .social { margin-top: var(--space-md); } .footer-bottom { justify-content: space-between; } .footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; } .footer-legal a { color: var(--color-primary-600); text-decoration: none; font-size: .88rem; } .footer-legal a:hover { color: var(--color-secondary-700); text-decoration: underline; } .footer-word { order: 3; text-align: center; font: 800 clamp(3.5rem, 15.5vw, 14rem)/.8 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; user-select: none; pointer-events: none; margin: clamp(1.5rem, 4vw, 3rem) 0 0; padding-bottom: .08em; background: linear-gradient(180deg, rgba(0, 36, 107, .16), rgba(0, 36, 107, .02) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; overflow: hidden; white-space: nowrap; } .footer-word::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); background-size: 250% 100%; background-position: 130% 0; animation: word-sheen 6s ease-in-out infinite; mix-blend-mode: soft-light; } @keyframes word-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { .footer-word::after { animation: none; } } /* Stats: remove background vertical lines, keep the separators between stats */ .stats::before { display: none; } /* About hero illustration */ .hero-split { display: grid; gap: var(--space-xl); align-items: center; } .hero-art { display: none; } @media (min-width: 960px) { .hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hero-art { display: block; } } .about-art { position: relative; width: 100%; max-width: 520px; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .about-art svg { display: block; width: 100%; height: auto; overflow: visible; } .aa-glow { animation: aa-breathe 6s ease-in-out infinite; transform-origin: 250px 200px; } .aa-ring { fill: none; stroke: rgba(160, 190, 255, .35); stroke-width: 1; stroke-dasharray: 3 7; transform-origin: 250px 200px; } .aa-ring--a { animation: aa-spin 60s linear infinite; } .aa-ring--b { animation: aa-spin 40s linear infinite reverse; stroke: rgba(245, 37, 73, .4); } .aa-link { stroke: rgba(160, 190, 255, .4); stroke-width: 1.2; stroke-dasharray: 4 6; animation: aa-dash 1.6s linear infinite; } .aa-dot { fill: #ff6b86; filter: drop-shadow(0 0 6px #f52549); } .aa-pulse { fill: none; stroke: #f52549; stroke-width: 2; transform-origin: 250px 200px; animation: aa-pulse 2.8s ease-out infinite; } .aa-hub { animation: aa-breathe 4s ease-in-out infinite; transform-origin: 250px 200px; filter: drop-shadow(0 0 22px rgba(47, 107, 255, .65)); } .aa-node-bg { fill: rgba(14, 30, 70, .85); stroke: rgba(160, 190, 255, .45); stroke-width: 1.2; } .aa-float { animation: aa-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); } .aa-icon { color: #fff; width: 28px; height: 28px; display: grid; place-items: center; } .aa-icon svg { width: 22px; height: 22px; } .aa-label { fill: #cfdcf7; font: 600 10px var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .aa-chip { position: absolute; padding: .45rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #cfdcf7; font-size: .8rem; white-space: nowrap; animation: aa-chipfloat 6s ease-in-out infinite; } .aa-chip b { color: #fff; font-family: var(--font-display); } .aa-chip--1 { left: 30%; top: 3%; } .aa-chip--2 { right: 24%; bottom: 3%; animation-delay: -3s; } @keyframes aa-spin { to { transform: rotate(360deg); } } @keyframes aa-dash { to { stroke-dashoffset: -20; } } @keyframes aa-breathe { 50% { transform: scale(1.05); } } @keyframes aa-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } } @keyframes aa-float { 50% { transform: translateY(-8px); } } @keyframes aa-chipfloat { 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .about-art *, .about-art { animation: none !important; } .aa-dot { display: none; } } /* About: "We're here to help you" panel */ .help-band { position: relative; overflow: hidden; display: grid; gap: var(--space-lg); align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 28px; background: linear-gradient(135deg, #eef2ff, #f4f0ff); border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 30px 60px -40px rgba(10, 53, 137, .45); } .help-band::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 90, 255, .16), transparent); pointer-events: none; } @media (min-width: 1100px) { .help-band { grid-template-columns: minmax(0, 1.25fr) 300px minmax(0, 1fr); gap: var(--space-md); } } .help-eyebrow { margin: 0 0 .6rem; color: #4a55d6; font-weight: 500; font-size: .98rem; } .help-copy h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); color: var(--color-dark); margin-bottom: .8rem; } .help-text { color: #555e78; max-width: 52ch; margin-bottom: 1.4rem; } .help-fig { position: relative; width: min(300px, 80%); margin-inline: auto; } .help-fig svg { display: block; width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; } .hb-head { animation: hb-nod 4s ease-in-out infinite; transform-origin: 161px 130px; } .hb-arm--l { animation: hb-type .5s ease-in-out infinite alternate; transform-origin: 112px 172px; } .hb-arm--r { animation: hb-type .5s ease-in-out .25s infinite alternate; transform-origin: 210px 172px; } .hb-hand { animation: hb-tap .5s ease-in-out infinite alternate; } .hb-hand--r { animation-delay: .25s; } .hb-beam { animation: hb-beam 3s ease-in-out infinite; } .help-tag { position: absolute; z-index: 2; left: calc(14% + (var(--i) * 9%)); bottom: 48%; padding: .35rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(10, 53, 137, .14); color: var(--color-primary-600); font: 600 .75rem var(--font-display); white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(10, 53, 137, .6); opacity: 0; animation: hb-float 7s ease-out infinite; animation-delay: calc(var(--i) * .85s); } .help-tag:nth-of-type(odd) { --dx: -26px; } .help-tag:nth-of-type(even) { --dx: 26px; color: #f52549; } .help-feats { display: grid; gap: .8rem; position: relative; z-index: 1; } .help-feat { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(10, 53, 137, .06); } .help-feat strong { display: block; font: 600 1rem var(--font-display); color: var(--color-dark); } .help-feat span:not(.help-ico) { font-size: .88rem; color: #667089; } .help-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ecebfb; color: #4a2f9a; } @media (max-width: 1099px) { .help-fig { width: min(260px, 70%); } .help-feats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } } @keyframes hb-nod { 50% { transform: rotate(-3deg) translateY(1px); } } @keyframes hb-type { to { transform: translateY(3px); } } @keyframes hb-tap { to { transform: translateY(-3px); } } @keyframes hb-beam { 50% { opacity: .55; } } @keyframes hb-float { 0% { transform: translate(0, 0) scale(.7); opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(var(--dx, 0), -230px) scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .help-fig *, .help-tag { animation: none !important; } .help-tag { opacity: 1; bottom: auto; top: calc(var(--i) * 11%); } } /* Help band: wider panel, heading on one line */ .help-sec .container { max-width: min(1440px, 100% - 2rem); } @media (min-width: 1100px) { .help-band { grid-template-columns: minmax(0, 1.5fr) 280px minmax(0, 1fr); } .help-copy h2 { white-space: nowrap; } } /* Help band: more vertical padding */ .help-band { padding-block: clamp(2.5rem, 5vw, 4.5rem); } /* Company timeline (horizontal, animated) */ .tl-sec { background: #fff; } .tl { list-style: none; margin: var(--space-xl) 0 0; padding: 0; position: relative; display: grid; gap: 2rem; grid-template-columns: 1fr; } .tl-line { position: absolute; background: rgba(10, 53, 137, .14); border-radius: 4px; left: 11px; top: 0; bottom: 0; width: 3px; } .tl-line i { display: block; width: 100%; height: 0; border-radius: 4px; background: linear-gradient(180deg, #0a3589, #f52549); transition: height 2.2s var(--ease) .2s; } .tl.is-in .tl-line i { height: 100%; } .tl-item { position: relative; padding-left: 2.6rem; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.35s + var(--i) * .4s); } .tl.is-in .tl-item { opacity: 1; transform: none; } .tl-dot { position: absolute; left: 0; top: .3rem; width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 3px solid #0a3589; box-shadow: 0 0 0 0 rgba(245, 37, 73, .4); } .tl.is-in .tl-dot { animation: tl-ping 2.6s ease-out infinite; animation-delay: calc(.6s + var(--i) * .4s); background: radial-gradient(circle, #f52549 38%, #fff 42%); } .tl-year { display: block; font: 700 clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--font-display); background: linear-gradient(90deg, #0a3589, #f52549); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .5rem; } .tl-item h3 { font-size: 1.1rem; margin-bottom: .35rem; color: var(--color-dark); } .tl-item p { color: #5d667f; font-size: .94rem; margin: 0; } @media (min-width: 900px) { .tl { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.5rem; padding-top: 3rem; } .tl-line { left: 0; right: 0; top: 12px; bottom: auto; height: 3px; width: auto; } .tl-line i { width: 0; height: 100%; background: linear-gradient(90deg, #0a3589, #f52549); transition: width 2.4s var(--ease) .2s; } .tl.is-in .tl-line i { width: 100%; height: 100%; } .tl-item { padding-left: 0; padding-top: 1.2rem; } .tl-dot { top: -3rem; left: 0; } } @keyframes tl-ping { 0% { box-shadow: 0 0 0 0 rgba(245, 37, 73, .45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(245, 37, 73, 0); } } @media (prefers-reduced-motion: reduce) { .tl-item { opacity: 1; transform: none; transition: none; } .tl-line i { transition: none; width: 100%; height: 100%; } .tl-dot { animation: none !important; } } /* Timeline pacing: line travels year by year */ .tl { --step: .9s; } .tl-line i { transition: height calc(var(--n) * var(--step)) linear .1s; } .tl:not(.is-in) .tl-line i, .tl:not(.is-in) .tl-item { transition-duration: 0s; transition-delay: 0s; } .tl-item { transition-delay: calc(var(--i) * var(--step)); } .tl-dot { transform: scale(.4); background: #fff; transition: transform .5s var(--ease), background .3s; transition-delay: calc(var(--i) * var(--step)); } .tl.is-in .tl-dot { transform: none; } @media (min-width: 900px) { .tl-line i { transition: width calc((var(--n) - 1) * var(--step)) linear .1s; } .tl:not(.is-in) .tl-line i { transition-duration: 0s; } } /* Technologies: scrolling logo rows */ .tech-sec { overflow: hidden; } .tech-rows { margin-top: var(--space-xl); display: grid; gap: 1.1rem; } .tech-row { position: relative; display: grid; gap: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tech-cat { padding-inline: max(1rem, calc((100vw - var(--container, 1240px)) / 2)); font: 700 .72rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #f52549; } .tech-track { list-style: none; margin: 0; padding: 0; display: flex; gap: .8rem; width: max-content; animation: tech-l var(--dur) linear infinite; } .tech-row[data-dir="r"] .tech-track { animation-name: tech-r; } .tech-row:hover .tech-track { animation-play-state: paused; } .tk { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: 14px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 12px 24px -20px rgba(10, 53, 137, .6); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; white-space: nowrap; } .tk:hover { transform: translateY(-4px); border-color: var(--c, #0a3589); box-shadow: 0 18px 30px -18px var(--c, #0a3589); } .tk i { display: block; width: 26px; height: 26px; background: var(--c, #0a3589); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .tk b { font: 600 .95rem var(--font-display); color: var(--color-dark); } .tk .tk-initial { display: grid; place-items: center; background: linear-gradient(135deg, #0a3589, #f52549); color: #fff; border-radius: 8px; font: 700 .85rem var(--font-display); font-style: normal; -webkit-mask: none; mask: none; } @keyframes tech-l { to { transform: translateX(-50%); } } @keyframes tech-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .tech-track { animation: none; flex-wrap: wrap; width: auto; padding-inline: 1rem; } .tech-track li[aria-hidden] { display: none; } } /* Keep category labels crisp: fade only the scrolling track */ .tech-row { -webkit-mask-image: none; mask-image: none; } .tech-track-wrap, .tech-track { } .tech-row > .tech-track { -webkit-mask-image: none; mask-image: none; } .tech-row::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8%; height: 56px; background: linear-gradient(270deg, var(--tint-bg, #f4f6fb), transparent); pointer-events: none; } /* Technologies v2: category cards with logo tiles (replaces the scrolling rows) */ .tech-sec { overflow: visible; } .tech-grid { margin-top: var(--space-xl); display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .tech-card { position: relative; padding: 1.4rem; border-radius: 20px; background: #fff; border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 24px 40px -34px rgba(10, 53, 137, .55); overflow: hidden; } .tech-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, #0a3589, #f52549); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .3s; } .tech-card.is-in::before { transform: none; } .tech-card h3 { margin: 0 0 1.1rem; font: 700 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #f52549; } .tech-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .tech-list li { opacity: 0; transform: translateY(12px) scale(.94); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.2s + var(--n) * .07s); } .tech-card.is-in .tech-list li { opacity: 1; transform: none; } .tech-list .tk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; width: 100%; min-height: 96px; padding: .9rem .5rem; border-radius: 14px; background: #f6f8fd; border: 1px solid transparent; box-shadow: none; white-space: normal; text-align: center; } .tech-list .tk:hover { background: #fff; transform: translateY(-5px); border-color: var(--c, #0a3589); box-shadow: 0 16px 28px -16px var(--c, #0a3589); } .tech-list .tk i { width: 34px; height: 34px; transition: transform .4s var(--ease); } .tech-list .tk:hover i { transform: scale(1.18) rotate(-6deg); } .tech-list .tk b { font: 600 .8rem/1.25 var(--font-display); color: #3b4560; } .tech-list .tk .tk-initial { width: 34px; height: 34px; font-size: 1rem; } @media (prefers-reduced-motion: reduce) { .tech-list li { opacity: 1; transform: none; transition: none; } .tech-card::before { transform: none; transition: none; } } @media (min-width: 1100px) { .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tech-card:nth-child(5):last-child { grid-column: span 2; } .tech-card:nth-child(5):last-child .tech-list { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } } /* Mission / Vision / Approach: glass cards over blue + pink glow and particles (background colour unchanged) */ .mv-sec { position: relative; overflow: hidden; } .mv-sec > .container { position: relative; z-index: 1; } .mv-sec > .particles { z-index: 0; } .mv-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); animation: mv-drift 14s ease-in-out infinite alternate; } .mv-glow--b { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(closest-side, rgba(47, 107, 255, .28), transparent); } .mv-glow--p { width: 480px; height: 480px; right: -120px; bottom: -170px; background: radial-gradient(closest-side, rgba(245, 37, 73, .22), transparent); animation-delay: -6s; } .mv-sec .mv-grid { gap: 1.4rem; } .mv-sec .mv { position: relative; overflow: hidden; padding: 2rem 1.7rem 2.2rem; border-radius: 22px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -36px rgba(10, 53, 137, .55), inset 0 1px 0 #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .5s var(--ease), box-shadow .5s; } .mv-sec .mv::before { display: none; } .mv-sec .mv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #2f6bff, #f52549); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); } .mv-sec .mv:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -34px rgba(10, 53, 137, .65), inset 0 1px 0 #fff; } .mv-sec .mv:hover::after { transform: none; } @media (min-width: 800px) { .mv-sec .mv:nth-child(2) { margin-top: 2.2rem; } } .mv-ghost { position: absolute; right: 1.2rem; top: .4rem; font: 700 5rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(10, 53, 137, .12); pointer-events: none; } .mv-ico { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 1.3rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0a3589, #f52549); box-shadow: 0 16px 28px -14px rgba(245, 37, 73, .7); } .mv-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 1.5px solid rgba(47, 107, 255, .35); animation: mv-ring 3s ease-out infinite; } .mv-sec .mv h3 { font-size: 1.35rem; margin-bottom: .6rem; color: var(--color-dark); letter-spacing: 0; text-transform: none; } .mv-sec .mv p { color: #455070; margin: 0; } @keyframes mv-drift { to { transform: translate(60px, 40px) scale(1.12); } } @keyframes mv-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.25); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mv-glow, .mv-ico::after { animation: none; } } /* About: "What we do" panel */ .wwd { position: relative; overflow: hidden; align-self: start; padding: 1.8rem; border-radius: 24px; color: #fff; background: linear-gradient(160deg, #0b2a6b 0%, #06163d 55%, #04112e 100%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 70px -40px rgba(0, 36, 107, .9), inset 0 1px 0 rgba(255, 255, 255, .15); } .wwd::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%); mask-image: linear-gradient(200deg, #000, transparent 65%); pointer-events: none; } .wwd-glow { position: absolute; width: 320px; height: 320px; right: -110px; top: -130px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .45), transparent); animation: mv-drift 9s ease-in-out infinite alternate; pointer-events: none; } .wwd h3 { position: relative; margin: 0 0 1.2rem; font-size: 1.25rem; color: #fff; display: flex; align-items: center; gap: .6rem; } .wwd h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .35), transparent); } .wwd-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .wwd-list li { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.2s + var(--i) * .12s); } .wwd.is-in .wwd-list li { opacity: 1; transform: none; } .wwd-item { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: 16px; color: inherit; text-decoration: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .35s, border-color .35s, transform .35s var(--ease); } a.wwd-item:hover { background: rgba(255, 255, 255, .12); border-color: rgba(245, 37, 73, .55); transform: translateY(-3px); } .wwd-ico { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #2f6bff, #f52549); color: #fff; box-shadow: 0 14px 24px -12px rgba(245, 37, 73, .8); } .wwd-txt { flex: 1; min-width: 0; display: grid; gap: .15rem; } .wwd-txt strong { font: 600 1.05rem var(--font-display); color: #fff; } .wwd-txt span { font-size: .88rem; line-height: 1.45; color: #b8c6e6; } .wwd-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; transition: background .35s, transform .35s var(--ease); } a.wwd-item:hover .wwd-go { background: #f52549; border-color: #f52549; transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .wwd-list li { opacity: 1; transform: none; transition: none; } .wwd-glow { animation: none; } } /* Our team */ .team-sec { position: relative; overflow: hidden; background: #fff; } .team-sec > .container { position: relative; z-index: 1; } .lead-grid { display: grid; gap: 1.6rem; margin-top: var(--space-lg); } @media (min-width: 900px) { .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lead-card { position: relative; display: grid; gap: 1.4rem; align-items: center; padding: 1.2rem; border-radius: 26px; background: linear-gradient(135deg, #f4f7ff, #fff); border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 30px 60px -40px rgba(10, 53, 137, .5); transition: transform .5s var(--ease), box-shadow .5s; overflow: hidden; } @media (min-width: 560px) { .lead-card { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } } .lead-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -38px rgba(10, 53, 137, .6); } .lead-photo { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #e3eaff, #fde4ea); } .lead-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); pointer-events: none; } .lead-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .lead-card:hover .lead-photo img { transform: scale(1.05); } .lead-info h3 { font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); margin-bottom: .6rem; color: #0a3589; } .lead-role { display: inline-block; padding: .35rem .8rem; border-radius: 8px; background: linear-gradient(135deg, #0a3589, #f52549); color: #fff; font: 600 .8rem var(--font-display); } .lead-bio { margin-top: 1rem; color: #53607d; font-size: .95rem; } .lead-in { display: inline-grid; place-items: center; margin-top: 1rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(10, 53, 137, .2); color: #0a3589; transition: background .3s, color .3s; } .lead-in:hover { background: #0a3589; color: #fff; } .tm-ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #dfe8ff, #fbdbe3); } .tm-ph svg { width: 46%; fill: rgba(10, 53, 137, .35); } .experts-heading { margin-top: var(--space-2xl); } .experts { margin-top: var(--space-lg); padding-block: 1.6rem 2.4rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .experts-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; width: max-content; animation: exp-scroll var(--dur, 40s) linear infinite; } .experts:hover .experts-track { animation-play-state: paused; } .exp-card { flex: none; width: 168px; padding: .6rem; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -22px rgba(10, 53, 137, .45); transition: transform .4s var(--ease), box-shadow .4s; } .exp-card:hover { transform: translateY(-8px); box-shadow: 0 28px 50px -22px rgba(245, 37, 73, .45); } .exp-photo { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e3eaff, #fde4ea); } .exp-photo img { width: 100%; height: 100%; object-fit: cover; } .exp-name { display: grid; gap: .1rem; margin: -2.2rem .5rem 0; position: relative; padding: .55rem .5rem .5rem; text-align: center; border-radius: 16px 16px 12px 12px; background: #fff; } .exp-name strong { font: 600 .88rem var(--font-display); color: #0c1d3d; } .exp-name span { font-size: .78rem; color: #f5557a; } @keyframes exp-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .experts { overflow-x: auto; } .experts-track { animation: none; } .exp-card[aria-hidden] { display: none; } } .exp-card { width: 184px; } .exp-name strong { font-size: .84rem; } /* Experts heading: flex, title left and text right */ .experts-heading { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; } .experts-heading h2 { flex: 1 1 420px; max-width: 18ch; margin: 0; } .experts-heading p { flex: 0 1 460px; margin: 0 0 .4rem; color: #53607d; } /* Team heading on one line */ .team-sec .section-heading:not(.experts-heading) { max-width: none; } @media (min-width: 900px) { .team-sec .section-heading:not(.experts-heading) h2 { white-space: nowrap; } } .lead-role { background: #0a3589; } /* Footer: tighter space between the menus and the wordmark */ .site-footer .footer-cols { padding-bottom: 0; } .footer-word { margin-top: -.4rem; } /* Testimonials hero illustration */ .tst-art { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1.15; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .tst-orb { position: absolute; border-radius: 50%; filter: blur(2px); animation: aa-breathe 6s ease-in-out infinite; } .tst-orb--1 { width: 70%; aspect-ratio: 1; left: 15%; top: 8%; background: radial-gradient(closest-side, rgba(47, 107, 255, .5), transparent); } .tst-orb--2 { width: 40%; aspect-ratio: 1; right: 2%; bottom: 0; background: radial-gradient(closest-side, rgba(245, 37, 73, .35), transparent); animation-delay: -3s; } .tst-card { position: absolute; padding: 1rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .tst-card--main { left: 14%; top: 14%; width: 66%; padding: 1.3rem; animation: aa-chipfloat 6s ease-in-out infinite; } .tst-card--a { right: 0; top: 0; width: 38%; animation: aa-chipfloat 5s ease-in-out -1.5s infinite; } .tst-card--b { left: 0; bottom: 6%; width: 52%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; animation: aa-chipfloat 7s ease-in-out -3s infinite; } .tst-quote { position: absolute; right: 1.1rem; top: -.2rem; font: 700 4rem/1 var(--font-display); color: rgba(255, 255, 255, .18); } .tst-stars { display: flex; gap: 3px; margin-bottom: .9rem; } .tst-stars svg { width: 18px; height: 18px; fill: #ffc233; filter: drop-shadow(0 0 6px rgba(255, 194, 51, .6)); opacity: 0; animation: tst-star 4s ease-in-out infinite; } .tst-stars svg:nth-child(2) { animation-delay: .15s; } .tst-stars svg:nth-child(3) { animation-delay: .3s; } .tst-stars svg:nth-child(4) { animation-delay: .45s; } .tst-stars svg:nth-child(5) { animation-delay: .6s; } .tst-stars--sm svg { width: 12px; height: 12px; } .tst-line { display: block; height: 7px; margin-bottom: .5rem; border-radius: 6px; background: rgba(255, 255, 255, .28); } .tst-line--m { width: 82%; } .tst-line--s { width: 55%; } .tst-who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; } .tst-who .tst-line { margin: 0 0 .35rem; width: 90px; background: rgba(255, 255, 255, .5); } .tst-who .tst-line--role { width: 60px; background: rgba(255, 255, 255, .25); } .tst-av { flex: none; display: block; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2f6bff, #f52549); border: 2px solid rgba(255, 255, 255, .6); } .tst-av--b { margin-top: .7rem; width: 28px; height: 28px; background: linear-gradient(135deg, #f52549, #ffb347); } .tst-avs { display: inline-flex; } .tst-avs i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #0a2a66; margin-left: -8px; background: linear-gradient(135deg, #2f6bff, #7bb0ff); } .tst-avs i:first-child { margin-left: 0; } .tst-avs i:nth-child(2) { background: linear-gradient(135deg, #f52549, #ff8aa0); } .tst-avs i:nth-child(3) { background: linear-gradient(135deg, #ffb347, #ffd98a); } .tst-avs b { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; background: #fff; color: #0a3589; font: 700 .85rem var(--font-display); } .tst-rate { display: inline-flex; align-items: center; gap: .3rem; color: #fff; } .tst-rate strong { font: 700 1.3rem var(--font-display); } .tst-rate svg { width: 18px; height: 18px; fill: #ffc233; } .tst-badge { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .6); animation: aa-chipfloat 4.5s ease-in-out infinite; } .tst-badge--heart { right: 6%; bottom: 22%; background: linear-gradient(135deg, #f52549, #ff6b86); } .tst-badge--check { left: 6%; top: 6%; background: linear-gradient(135deg, #1fbf75, #3de39a); animation-delay: -2s; } @keyframes tst-star { 0%, 10% { opacity: 0; transform: scale(.4) rotate(-30deg); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tst-art *, .tst-art { animation: none !important; } .tst-stars svg { opacity: 1; } } .tst-quote { top: auto; bottom: -.6rem; right: 1.1rem; font-size: 5rem; } /* Client Success Stories: two opposite-direction text testimonial rows */ .ss-sec { background: #f7f5f1; overflow: hidden; } .ss-row { overflow: hidden; margin-bottom: 1.2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .ss-track { display: flex; gap: 1.2rem; width: max-content; padding-block: .3rem; animation: ss-left var(--dur, 60s) linear infinite; } .ss-row[data-dir="r"] .ss-track { animation-name: ss-right; } .ss-row:hover .ss-track { animation-play-state: paused; } .ss-card { flex: none; width: 250px; margin: 0; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px -26px rgba(10, 53, 137, .5); transition: transform .4s var(--ease), box-shadow .4s; } .ss-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(10, 53, 137, .55); } .ss-av { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .7rem; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #0a3589, #f52549); color: #fff; font: 700 1.2rem var(--font-display); } .ss-av img { width: 100%; height: 100%; object-fit: cover; } .ss-card b { font: 600 .98rem var(--font-display); color: #0c1d3d; } .ss-card small { margin-top: .15rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #6b7390; } .ss-card blockquote { margin: .9rem 0 0; } .ss-card blockquote p { margin: 0; font-size: .82rem; line-height: 1.55; color: #5d667f; } @keyframes ss-left { to { transform: translateX(-50%); } } @keyframes ss-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .ss-row { overflow-x: auto; } .ss-track { animation: none; } .ss-card[aria-hidden] { display: none; } } /* Careers hero illustration */ .car-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.2; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .car-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .car-steps rect { transform-box: fill-box; transform-origin: bottom; animation: car-rise .9s var(--ease) both; } .car-steps rect:nth-child(2) { animation-delay: .15s; } .car-steps rect:nth-child(3) { animation-delay: .3s; } .car-steps rect:nth-child(4) { animation-delay: .45s; } .car-steps rect:nth-child(5) { animation-delay: .6s; } .car-trail { animation: aa-dash 1.6s linear infinite; } .car-flag { transform-box: fill-box; transform-origin: 0 100%; animation: car-wave 2.4s ease-in-out infinite; } .car-climber { offset-path: path('M90 262 L170 212 L250 162 L330 112 L410 62'); offset-rotate: 0deg; animation: car-climb 7s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); } .car-sparks path { transform-box: fill-box; transform-origin: center; animation: car-twinkle 2.6s ease-in-out infinite; } .car-sparks path:nth-child(2) { animation-delay: -.9s; } .car-sparks path:nth-child(3) { animation-delay: -1.7s; } .car-role { display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; border-radius: 14px; color: #fff; } .car-role b { display: block; font: 600 .88rem var(--font-display); } .car-role small { font-size: .7rem; color: #9fe3bf; } .car-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #2f6bff, #6ea0ff); } .car-ico--p { background: linear-gradient(135deg, #f52549, #ff7a93); } .car-ico--g { background: linear-gradient(135deg, #1fbf75, #3de39a); } .car-role--1 { left: 0; top: 8%; animation: aa-chipfloat 5.5s ease-in-out infinite; } .car-role--2 { left: 4%; bottom: 24%; animation: aa-chipfloat 6.5s ease-in-out -2s infinite; } .car-role--3 { right: 0; bottom: 4%; animation: aa-chipfloat 6s ease-in-out -3.5s infinite; } @keyframes car-rise { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes car-wave { 50% { transform: skewY(-6deg) scaleX(.92); } } @keyframes car-climb { 0% { offset-distance: 0%; } 80%, 100% { offset-distance: 100%; } } @keyframes car-twinkle { 50% { transform: scale(1.6) rotate(20deg); opacity: .4; } } @media (prefers-reduced-motion: reduce) { .car-art *, .car-art { animation: none !important; } .car-climber { offset-distance: 100%; } } .car-ico svg { position: static; width: 20px; height: 20px; } /* Contact hero illustration */ .cnt-art { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1.15; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .cnt-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cnt-plane { offset-path: path('M120 300 C 180 120, 330 60, 420 70'); offset-rotate: auto; animation: cnt-fly 5s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); } .cnt-form { left: 12%; top: 20%; width: 62%; padding: 1rem 1.1rem 1.2rem; animation: aa-chipfloat 6s ease-in-out infinite; } .cnt-top { display: flex; gap: 5px; margin-bottom: .9rem; } .cnt-top i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); } .cnt-top i:first-child { background: #f52549; } .cnt-field { display: block; margin-bottom: .6rem; padding: .6rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); } .cnt-field em { display: block; height: 7px; width: 55%; border-radius: 6px; background: rgba(255, 255, 255, .4); } .cnt-field em.cnt-w2 { width: 35%; margin-top: .45rem; background: rgba(255, 255, 255, .22); } .cnt-field--area { padding-bottom: 1.1rem; } .cnt-type { animation: cnt-type 4s steps(10) infinite; overflow: hidden; } .cnt-send { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 10px; background: linear-gradient(90deg, #0a3589, #f52549); color: #fff; font: 600 .82rem var(--font-display); box-shadow: 0 12px 22px -10px rgba(245, 37, 73, .8); animation: cnt-press 4s ease-in-out infinite; } .cnt-send svg { width: 16px; height: 16px; } .cnt-chat { right: 2%; bottom: 8%; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 18px 18px 18px 4px; animation: aa-chipfloat 5s ease-in-out -2s infinite; } .cnt-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #2f6bff, #f52549); border: 2px solid rgba(255, 255, 255, .6); } .cnt-dots { display: inline-flex; gap: 4px; } .cnt-dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: cnt-dot 1.2s ease-in-out infinite; } .cnt-dots i:nth-child(2) { animation-delay: .15s; } .cnt-dots i:nth-child(3) { animation-delay: .3s; } .cnt-b svg { position: static; width: 22px; height: 22px; } .cnt-b--mail { left: 0; top: 4%; background: linear-gradient(135deg, #2f6bff, #6ea0ff); } .cnt-b--phone { left: 4%; bottom: 10%; background: linear-gradient(135deg, #1fbf75, #3de39a); animation: cnt-ring 2.4s ease-in-out infinite; } .cnt-b--pin { right: 6%; top: 6%; background: linear-gradient(135deg, #f52549, #ff7a93); } .cnt-b--pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(245, 37, 73, .55); animation: mv-ring 2.4s ease-out infinite; } @keyframes cnt-fly { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes cnt-type { 0% { width: 0; } 60%, 100% { width: 80%; } } @keyframes cnt-press { 0%, 62%, 100% { transform: none; } 70% { transform: scale(.92); } } @keyframes cnt-dot { 50% { transform: translateY(-5px); opacity: .5; } } @keyframes cnt-ring { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } } @media (prefers-reduced-motion: reduce) { .cnt-art *, .cnt-art { animation: none !important; } .cnt-plane { offset-distance: 100%; } .cnt-type { width: 80%; } } /* Contact: office maps */ .offices { display: grid; gap: 1.6rem; margin-top: var(--space-md); } .office h3 { font-size: 1.35rem; margin: 0 0 .25rem; color: var(--color-dark); } .office p { margin: 0 0 .7rem; font-size: .9rem; color: #5d667f; } .office iframe { display: block; width: 100%; height: 220px; border: 0; border-radius: 16px; background: #e8edf7; box-shadow: 0 18px 36px -26px rgba(10, 53, 137, .6); } /* Contact: office map tabs (modern card) */ .offices { margin-top: var(--space-md); padding: .6rem; border-radius: 22px; background: linear-gradient(135deg, #f1f5ff, #fff); border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 30px 60px -40px rgba(10, 53, 137, .55); } .offices-tabs { display: none; gap: .4rem; padding: .25rem; margin-bottom: .6rem; border-radius: 14px; background: rgba(10, 53, 137, .06); } .offices.is-tabs .offices-tabs { display: flex; } .offices-tabs button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 42px; padding: .5rem .6rem; border: 0; border-radius: 11px; background: transparent; color: #4a5778; font: 600 .88rem var(--font-display); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; } .offices-tabs button svg { width: 16px; height: 16px; } .offices-tabs button:hover { color: var(--color-dark); } .offices-tabs button[aria-selected="true"] { background: #fff; color: #0a3589; box-shadow: 0 8px 18px -10px rgba(10, 53, 137, .6); } .offices-tabs button[aria-selected="true"] svg { color: #f52549; } .offices:not(.is-tabs) .office + .office { margin-top: 1rem; } .office { animation: rise .5s var(--ease) both; } .office[hidden] { display: none; } .office-map { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #e8edf7; } .office-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .office-info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem .5rem .4rem; } .office-info h3 { margin: 0 0 .15rem; font-size: 1.1rem; color: var(--color-dark); } .office-info p { margin: 0; font-size: .88rem; color: #5d667f; } .office-go { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; background: #0a3589; color: #fff; font: 600 .85rem var(--font-display); text-decoration: none; transition: background .3s, transform .3s var(--ease); } .office-go svg { width: 16px; height: 16px; } .office-go:hover { background: #f52549; transform: translateY(-3px); } @media (max-width: 480px) { .offices-tabs button span { font-size: .8rem; } .office-map { aspect-ratio: 1 / 1; } } /* Contact: keep both columns the same height so nothing hangs outside the form card */ @media (min-width: 960px) { .contact-grid { align-items: stretch; } .form-wrap { display: flex; flex-direction: column; } .form-wrap form { flex: 1; display: flex; flex-direction: column; } .office-map { aspect-ratio: 16 / 10; } } /* Client logos: infinite scroller */ .cl-sec { background: #fff; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem); } .cl-sec .section-heading { margin-bottom: 1.6rem; } .cl-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cl-track { display: flex; align-items: center; width: max-content; gap: 1.2rem; animation: ss-left var(--dur, 60s) linear infinite; } .cl-row:hover .cl-track { animation-play-state: paused; } .cl-item { flex: none; } .cl-logo { display: grid; place-items: center; width: 190px; height: 100px; padding: .4rem; border-radius: 16px; background: #fff; border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 14px 30px -26px rgba(10, 53, 137, .5); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; } .cl-logo:hover { transform: translateY(-5px); border-color: rgba(245, 37, 73, .35); box-shadow: 0 22px 36px -22px rgba(10, 53, 137, .55); } .cl-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; } .cl-logo:hover img { filter: none; opacity: 1; } @media (max-width: 600px) { .cl-logo { width: 150px; height: 80px; } } @media (prefers-reduced-motion: reduce) { .cl-row { overflow-x: auto; } .cl-track { animation: none; } .cl-item[aria-hidden] { display: none; } } .sc-card img { mix-blend-mode: multiply; } .cl-sec { padding-bottom: clamp(4rem, 8vw, 6.5rem); } /* Portfolio page intro */ .pf-intro { background: #fff; } .pf-grid { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 960px) { .pf-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-2xl); } } .pf-copy h2 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); line-height: 1.08; } .pf-copy .lead { max-width: 48ch; margin-bottom: var(--space-md); } .pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; border-top: 1px solid rgba(10, 53, 137, .12); } .pf-stats > div { padding: 1.1rem 1rem 0; text-align: center; } .pf-stats > div + div { border-left: 1px solid rgba(10, 53, 137, .12); } .pf-stats dt { font: 700 clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1.1 var(--font-display); background: linear-gradient(90deg, #0a3589, #f52549); -webkit-background-clip: text; background-clip: text; color: transparent; } .pf-stats dd { margin: .3rem 0 0; display: grid; gap: .25rem; } .pf-stats b { font: 600 1rem var(--font-display); color: var(--color-dark); } .pf-stats span { font-size: .85rem; color: #7a8299; } .pf-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.1; margin-inline: auto; } .pf-blob { position: absolute; inset: 4% 2% 8% 8%; border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; background: linear-gradient(135deg, #e9efff, #fde7ec); animation: pf-morph 12s ease-in-out infinite; } .pf-browser { position: absolute; left: 14%; top: 14%; width: 70%; border-radius: 16px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 40px 70px -34px rgba(10, 53, 137, .6); overflow: hidden; animation: aa-chipfloat 6s ease-in-out infinite; } .pf-bar { display: flex; align-items: center; gap: 5px; padding: .6rem .8rem; background: #f1f4fb; } .pf-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c6cde0; } .pf-bar i:first-child { background: #f52549; } .pf-bar em { flex: 1; height: 10px; margin-left: .6rem; border-radius: 6px; background: #dfe5f3; } .pf-body { position: relative; padding: .9rem; display: grid; gap: .55rem; } .pf-hero { display: block; height: 92px; border-radius: 10px; background: linear-gradient(135deg, #0a3589, #2f6bff 60%, #f52549); position: relative; overflow: hidden; } .pf-hero i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 250% 100%; animation: word-sheen 3.6s ease-in-out infinite; } .pf-line { display: block; height: 8px; width: 80%; border-radius: 6px; background: #dfe5f3; } .pf-line--s { width: 52%; } .pf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .pf-tiles i { height: 40px; border-radius: 8px; background: #eef2fb; border: 1px solid #e0e6f4; animation: pf-pop 3s ease-in-out infinite; } .pf-tiles i:nth-child(2) { animation-delay: .25s; } .pf-tiles i:nth-child(3) { animation-delay: .5s; } .pf-cta { display: block; width: 90px; height: 24px; border-radius: 8px; background: linear-gradient(90deg, #0a3589, #f52549); animation: cnt-press 4s ease-in-out infinite; } .pf-cursor { position: absolute; right: 16%; bottom: 8px; width: 26px; height: 26px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); animation: pf-cursor 4s ease-in-out infinite; } .pf-float { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; box-shadow: 0 18px 30px -14px rgba(10, 53, 137, .6); animation: aa-chipfloat 5s ease-in-out infinite; } .pf-float svg { width: 24px; height: 24px; } .pf-float--code { left: 0; top: 30%; background: linear-gradient(135deg, #7b6cff, #a79bff); } .pf-float--chart { right: 0; top: 4%; background: linear-gradient(135deg, #2f6bff, #6ea0ff); animation-delay: -2s; } .pf-float--bolt { left: 8%; bottom: 8%; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #f52549, #ff7a93); animation-delay: -3.5s; } .pf-badge { position: absolute; right: 2%; bottom: 4%; padding: .9rem 1.2rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0a3589, #f52549); box-shadow: 0 24px 40px -18px rgba(245, 37, 73, .6); animation: aa-chipfloat 5.5s ease-in-out -1s infinite; } .pf-badge strong { display: block; font: 700 2.1rem/1 var(--font-display); } .pf-badge span { font-size: .85rem; opacity: .9; } .pf-tech { background: #f5f3ee; padding-block: 1.6rem; overflow: hidden; } .pf-tech-in { display: grid; gap: 1rem; align-items: center; } @media (min-width: 800px) { .pf-tech-in { grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; } } .pf-tech h3 { margin: 0; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.1; color: var(--color-dark); } .pf-tech-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .pf-tech-track { list-style: none; margin: 0; padding: .4rem 0; display: flex; gap: .9rem; width: max-content; animation: ss-left 40s linear infinite; } .pf-tech-row:hover .pf-tech-track { animation-play-state: paused; } .pf-chip { display: grid; justify-items: center; gap: .35rem; width: 82px; padding: .7rem .4rem; border-radius: 12px; background: #fff; border: 1px solid rgba(10, 53, 137, .35); transition: transform .35s var(--ease), border-color .35s; } .pf-chip:hover { transform: translateY(-4px); border-color: #f52549; } .pf-chip i { display: block; width: 28px; height: 28px; background: #1d2540; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .pf-chip .pt-initial { display: grid; place-items: center; background: #1d2540; color: #fff; border-radius: 8px; font: 700 .85rem var(--font-display); font-style: normal; -webkit-mask: none; mask: none; } .pf-chip b { font: 500 .72rem var(--font-display); color: #333b52; text-align: center; } @keyframes pf-morph { 50% { border-radius: 54% 46% 44% 56% / 46% 56% 44% 54%; transform: rotate(3deg); } } @keyframes pf-pop { 50% { transform: translateY(-4px); background: #e2e9fb; } } @keyframes pf-cursor { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-70px, -40px); } } @media (prefers-reduced-motion: reduce) { .pf-art *, .pf-art, .pf-tech-track { animation: none !important; } .pf-tech-row { overflow-x: auto; } .pf-tech li[aria-hidden] { display: none; } } /* Portfolio hero illustration */ .pfh-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.15; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .pfh-stack { position: absolute; inset: 8% 6% 10% 6%; perspective: 900px; } .pfh-card { position: absolute; left: 0; right: 0; top: 0; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; animation: pfh-cycle 9s ease-in-out infinite; animation-delay: calc(var(--i) * -3s); transform-origin: 50% 100%; } .pfh-bar { display: flex; align-items: center; gap: 5px; padding: .55rem .8rem; background: rgba(255, 255, 255, .08); } .pfh-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); } .pfh-bar i:first-child { background: #f52549; } .pfh-bar em { flex: 1; height: 8px; margin-left: .5rem; border-radius: 6px; background: rgba(255, 255, 255, .15); } .pfh-shot { display: grid; gap: .5rem; padding: .9rem; } .pfh-banner { display: block; height: 96px; border-radius: 10px; } .pfh-card--a .pfh-banner { background: linear-gradient(135deg, #2f6bff, #7bb0ff); } .pfh-card--b .pfh-banner { background: linear-gradient(135deg, #f52549, #ff9ab0); } .pfh-card--c .pfh-banner { background: linear-gradient(135deg, #7b6cff, #b7aeff); } .pfh-ln { display: block; height: 8px; width: 78%; border-radius: 6px; background: rgba(255, 255, 255, .25); } .pfh-ln--s { width: 50%; background: rgba(255, 255, 255, .15); } .pfh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .pfh-row i { height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .12); } .pfh-chip { display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 14px; color: #fff; } .pfh-chip b { font: 600 .85rem var(--font-display); } .pfh-chip small { font-size: .7rem; color: #9fe3bf; } .pfh-chip svg { width: 20px; height: 20px; color: #3de39a; } .pfh-chip--live { left: 0; bottom: 14%; animation: aa-chipfloat 5s ease-in-out infinite; } .pfh-chip--grow { right: 0; top: 4%; animation: aa-chipfloat 6s ease-in-out -2s infinite; } .pfh-dot { width: 9px; height: 9px; border-radius: 50%; background: #3de39a; box-shadow: 0 0 0 0 rgba(61, 227, 154, .6); animation: tl-ping 2s ease-out infinite; } .pfh-star { right: 4%; bottom: 6%; background: linear-gradient(135deg, #f52549, #ff7a93); animation-delay: -1.5s; } @keyframes pfh-cycle { 0%, 100% { transform: translate3d(0, 56px, 0) scale(.86); opacity: .45; z-index: 1; } 33% { transform: translate3d(0, 28px, 0) scale(.93); opacity: .75; z-index: 2; } 66% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; z-index: 3; } 83% { transform: translate3d(0, -14px, 0) scale(1.02); opacity: .6; z-index: 3; } } @media (prefers-reduced-motion: reduce) { .pfh-art *, .pfh-art { animation: none !important; } .pfh-card--b { transform: translateY(28px) scale(.93); } .pfh-card--c { transform: translateY(56px) scale(.86); opacity: .5; } } .pfh-card { background: linear-gradient(160deg, #14306d, #0a1c47); backdrop-filter: none; -webkit-backdrop-filter: none; } .pfh-stack { inset: 16% 4% 10% 4%; } .pfh-banner { height: 128px; } .pfh-row i { height: 48px; } /* Portfolio: monitor cards */ .mon-grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem) 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .mon { display: block; text-align: center; color: inherit; text-decoration: none; } .mon-body { display: block; transition: transform .5s var(--ease), filter .5s; filter: drop-shadow(0 26px 30px rgba(10, 53, 137, .22)); } .mon:hover .mon-body, .mon:focus-visible .mon-body { transform: translateY(-8px); filter: drop-shadow(0 34px 36px rgba(10, 53, 137, .32)); } .mon-bezel { display: block; padding: 7px 7px 0; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #2b2d33, #0f1013); } .mon-screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px 4px 0 0; background: #fff; } .mon-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transition: top 7s linear, transform 7s linear; } .mon:hover .mon-shot, .mon:focus-visible .mon-shot { top: 100%; transform: translateY(-100%); } .mon-empty { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #e9efff, #fde7ec); color: #0a3589; } .mon-chin { display: grid; place-items: center; height: 26px; background: linear-gradient(180deg, #e9eaee, #c9ccd3); color: #8d929e; border-radius: 0 0 6px 6px; } .mon-chin svg { width: 14px; height: 14px; } .mon-neck { display: block; width: 22%; height: 38px; margin: 0 auto; background: linear-gradient(90deg, #b9bcc4, #e6e7eb 50%, #b9bcc4); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); } .mon-base { display: block; width: 42%; height: 8px; margin: 0 auto; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #d5d7dd, #a9adb7); } .mon-title { display: inline-block; margin-top: 1.2rem; padding: .55rem 1.4rem; border-radius: 999px; background: #0a3589; color: #fff; font: 700 .8rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; transition: background .3s, transform .3s var(--ease); } .mon:hover .mon-title { background: #f52549; transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .mon-shot { transition: none; } .mon:hover .mon-shot { top: 0; transform: none; } .mon-body { transition: none; } } /* Portfolio: monitor cards */ .mon-grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem) 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .mon { display: block; text-align: center; color: inherit; text-decoration: none; } .mon-body { display: block; transition: transform .5s var(--ease), filter .5s; filter: drop-shadow(0 26px 30px rgba(10, 53, 137, .22)); } .mon:hover .mon-body, .mon:focus-visible .mon-body { transform: translateY(-8px); filter: drop-shadow(0 34px 36px rgba(10, 53, 137, .32)); } .mon-bezel { display: block; padding: 7px 7px 0; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #2b2d33, #0f1013); } .mon-screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px 4px 0 0; background: #fff; } .mon-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transition: top 7s linear, transform 7s linear; } .mon:hover .mon-shot, .mon:focus-visible .mon-shot { top: 100%; transform: translateY(-100%); } .mon-empty { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #e9efff, #fde7ec); color: #0a3589; } .mon-chin { display: grid; place-items: center; height: 26px; background: linear-gradient(180deg, #e9eaee, #c9ccd3); color: #8d929e; border-radius: 0 0 6px 6px; } .mon-chin svg { width: 14px; height: 14px; } .mon-neck { display: block; width: 22%; height: 38px; margin: 0 auto; background: linear-gradient(90deg, #b9bcc4, #e6e7eb 50%, #b9bcc4); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); } .mon-base { display: block; width: 42%; height: 8px; margin: 0 auto; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #d5d7dd, #a9adb7); } .mon-title { display: inline-block; margin-top: 1.2rem; padding: .55rem 1.4rem; border-radius: 999px; background: #0a3589; color: #fff; font: 700 .8rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; transition: background .3s, transform .3s var(--ease); } .mon:hover .mon-title { background: #f52549; transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .mon-shot { transition: none; } .mon:hover .mon-shot { top: 0; transform: none; } .mon-body { transition: none; } } .mon[hidden] { display: none; } .mon-none { text-align: center; color: #5d667f; padding: 2rem 0; } .mon-grid .mon { transition: opacity .5s var(--ease), transform .5s var(--ease); } /* Case studies hero illustration */ .cs-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.15; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .cs-chart { left: 6%; top: 14%; width: 82%; padding: .9rem 1rem 1rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .cs-chart svg { display: block; width: 100%; height: auto; overflow: visible; } .cs-head { display: flex; align-items: center; gap: 5px; margin-bottom: .7rem; } .cs-head i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); } .cs-head i:first-child { background: #f52549; } .cs-head em { flex: 1; height: 8px; margin-left: .5rem; border-radius: 6px; background: rgba(255, 255, 255, .15); } .cs-bars rect { transform-box: fill-box; transform-origin: bottom; animation: cs-bar 7s ease-in-out infinite; } .cs-bars rect:nth-child(2) { animation-delay: .12s; } .cs-bars rect:nth-child(3) { animation-delay: .24s; } .cs-bars rect:nth-child(4) { animation-delay: .36s; } .cs-bars rect:nth-child(5) { animation-delay: .48s; } .cs-bars rect:nth-child(6) { animation-delay: .6s; } .cs-bars rect:nth-child(7) { animation-delay: .72s; } .cs-curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cs-draw 7s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(123, 176, 255, .6)); } .cs-area { opacity: 0; animation: cs-fade 7s ease-in-out infinite; } .cs-dot { opacity: 0; animation: cs-dot 7s ease-in-out infinite; filter: drop-shadow(0 0 8px #fff); } .cs-rank { left: 0; bottom: 8%; display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 14px; color: #fff; animation: aa-chipfloat 5s ease-in-out -1.5s infinite; } .cs-hash { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #f52549, #ff7a93); font: 700 1.05rem var(--font-display); } .cs-rank b { display: block; font: 600 .85rem var(--font-display); } .cs-rank small { font-size: .7rem; color: #9fe3bf; } .cs-ba { right: 2%; bottom: 2%; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 999px; color: #fff; font: 600 .8rem var(--font-display); animation: aa-chipfloat 6s ease-in-out -3s infinite; } .cs-before { opacity: .65; } .cs-after { color: #3de39a; } .cs-arrow svg { width: 16px; height: 16px; } .cs-search { left: 2%; top: 2%; background: linear-gradient(135deg, #2f6bff, #6ea0ff); } .cs-target { right: 4%; top: 2%; background: linear-gradient(135deg, #7b6cff, #a79bff); animation-delay: -2s; } @keyframes cs-draw { 0% { stroke-dashoffset: 1; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes cs-fade { 0%, 15% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes cs-dot { 0%, 42% { opacity: 0; transform: scale(.4); } 50%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } } @keyframes cs-bar { 0% { transform: scaleY(0); } 30%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } } @media (prefers-reduced-motion: reduce) { .cs-art *, .cs-art { animation: none !important; } .cs-curve { stroke-dashoffset: 0; } .cs-area, .cs-dot { opacity: 1; } } .cs-card[hidden] { display: none; } /* Case studies page: no extra tinted panel behind the stacked cards */ .cs-stack--page { background: none; } /* Footer: finer grid */ .site-footer::after { background-size: 32px 32px; } /* Footer: no animated top line */ .site-footer::before { display: none; } /* Footer: extra-fine grid */ .site-footer::after { background-size: 16px 16px; } /* Footer: pulses travelling along some grid lines */ .fp-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); } .site-footer > .container { position: relative; z-index: 1; } .fp { position: absolute; display: block; opacity: 0; } .fp--h { left: 0; height: 1px; width: 110px; background: linear-gradient(90deg, transparent, #2f6bff 60%, #6ea0ff); box-shadow: 0 0 8px 1px rgba(47, 107, 255, .55); animation: fp-x linear infinite; } .fp--v { top: 0; width: 1px; height: 110px; background: linear-gradient(180deg, transparent, #2f6bff 60%, #6ea0ff); box-shadow: 0 0 8px 1px rgba(47, 107, 255, .55); animation: fp-y linear infinite; } .fp--pink.fp--h { background: linear-gradient(90deg, transparent, #f52549 60%, #ff7a93); box-shadow: 0 0 8px 1px rgba(245, 37, 73, .5); } .fp--pink.fp--v { background: linear-gradient(180deg, transparent, #f52549 60%, #ff7a93); box-shadow: 0 0 8px 1px rgba(245, 37, 73, .5); } @keyframes fp-x { 0% { transform: translateX(-120px); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translateX(var(--dist)); opacity: 0; } } @keyframes fp-y { 0% { transform: translateY(-120px); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translateY(var(--dist)); opacity: 0; } } /* Footer pulses: lighter colour */ .fp--h { background: linear-gradient(90deg, transparent, rgba(110, 160, 255, .55) 60%, rgba(150, 190, 255, .8)); box-shadow: 0 0 6px 1px rgba(110, 160, 255, .3); } .fp--v { background: linear-gradient(180deg, transparent, rgba(110, 160, 255, .55) 60%, rgba(150, 190, 255, .8)); box-shadow: 0 0 6px 1px rgba(110, 160, 255, .3); } .fp--pink.fp--h { background: linear-gradient(90deg, transparent, rgba(255, 110, 140, .5) 60%, rgba(255, 150, 175, .8)); box-shadow: 0 0 6px 1px rgba(255, 110, 140, .28); } .fp--pink.fp--v { background: linear-gradient(180deg, transparent, rgba(255, 110, 140, .5) 60%, rgba(255, 150, 175, .8)); box-shadow: 0 0 6px 1px rgba(255, 110, 140, .28); } /* Blog hero illustration */ .blg-art { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1.15; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .blg-main { left: 8%; top: 8%; width: 62%; padding: 1rem; display: grid; gap: .55rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .blg-banner { position: relative; display: block; height: 96px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #2f6bff, #7b6cff 55%, #f52549); } .blg-banner i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%); background-size: 250% 100%; animation: word-sheen 3.8s ease-in-out infinite; } .blg-title { display: block; height: 11px; width: 78%; border-radius: 6px; background: rgba(255, 255, 255, .6); } .blg-line { display: block; height: 7px; border-radius: 6px; background: rgba(255, 255, 255, .26); transform-origin: left; animation: blg-write 6s ease-in-out infinite; } .blg-line--1 { width: 100%; } .blg-line--2 { width: 92%; animation-delay: .6s; } .blg-line--3 { width: 70%; animation-delay: 1.2s; } .blg-line--4 { width: 84%; animation-delay: 1.8s; } .blg-meta { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; } .blg-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #2f6bff, #f52549); } .blg-meta em { width: 56px; height: 6px; border-radius: 5px; background: rgba(255, 255, 255, .35); } .blg-meta b { margin-left: auto; font: 500 .7rem var(--font-body); color: #9fe3bf; } .blg-pen { position: absolute; right: 12%; bottom: 14%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #f52549, #ff7a93); box-shadow: 0 14px 24px -10px rgba(245, 37, 73, .8); animation: blg-pen 6s ease-in-out infinite; } .blg-pen svg { width: 22px; height: 22px; } .blg-side { right: 0; bottom: 6%; width: 44%; padding: .8rem; display: grid; gap: .5rem; animation: aa-chipfloat 5.5s ease-in-out -2s infinite; } .blg-thumb { display: block; height: 58px; border-radius: 8px; background: linear-gradient(135deg, #f52549, #ffb347); } .blg-tag { justify-self: start; padding: .2rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; font: 600 .7rem var(--font-display); } .blg-b svg { position: static; width: 22px; height: 22px; } .blg-b--book { left: 0; top: 36%; background: linear-gradient(135deg, #2f6bff, #6ea0ff); } .blg-b--search { right: 6%; top: 2%; background: linear-gradient(135deg, #7b6cff, #a79bff); animation-delay: -2s; } .blg-b--bolt { left: 10%; bottom: 4%; background: linear-gradient(135deg, #1fbf75, #3de39a); animation-delay: -3.5s; } @keyframes blg-write { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes blg-pen { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 20% { transform: translate(-72px, -66px) rotate(6deg); } 40% { transform: translate(-40px, -50px) rotate(-6deg); } 60% { transform: translate(-90px, -36px) rotate(6deg); } 80% { transform: translate(-20px, -22px) rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { .blg-art *, .blg-art { animation: none !important; } } .blg-main { left: 4%; top: 6%; } .blg-side { right: 0; bottom: -2%; width: 40%; } .blg-pen { right: 14%; bottom: 20%; } [data-post-grid] > article[hidden] { display: none; } /* FAQ hero illustration */ .faq-art { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1.15; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .faq-panel { left: 12%; top: 16%; width: 74%; padding: .9rem; display: grid; gap: .6rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .faq-row { border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; animation: faq-hl 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); } .faq-q { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; } .faq-qi { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #2f6bff, #f52549); color: #fff; font: 700 .85rem var(--font-display); } .faq-ln { display: block; height: 7px; border-radius: 6px; background: rgba(255, 255, 255, .42); flex: 1; } .faq-ln--a { width: 94%; flex: none; background: rgba(255, 255, 255, .24); margin-bottom: .45rem; } .faq-ln--b { width: 62%; flex: none; background: rgba(255, 255, 255, .16); } .faq-plus { position: relative; flex: none; width: 14px; height: 14px; animation: faq-rot 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); } .faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #fff; } .faq-plus::after { transform: rotate(90deg); } .faq-a { display: grid; grid-template-rows: 0fr; padding-inline: .8rem; animation: faq-open 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); } .faq-a > div { overflow: hidden; } .faq-bubble { position: absolute; left: 0; top: 2%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px 26px 26px 6px; background: linear-gradient(135deg, #f52549, #ff7a93); box-shadow: 0 24px 40px -16px rgba(245, 37, 73, .7); animation: faq-bob 4s ease-in-out infinite; } .faq-bubble span { font: 700 3rem/1 var(--font-display); color: #fff; } .faq-tick { right: 2%; top: 4%; background: linear-gradient(135deg, #1fbf75, #3de39a); } .faq-bolt { left: 4%; bottom: 6%; background: linear-gradient(135deg, #7b6cff, #a79bff); animation-delay: -2s; } .faq-tick svg, .faq-bolt svg { position: static; width: 22px; height: 22px; } .faq-chat { right: 0; bottom: 8%; display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 14px; color: #fff; animation: aa-chipfloat 5s ease-in-out -1.5s infinite; } .faq-chat b { font: 600 .85rem var(--font-display); } .faq-chat small { font-size: .7rem; color: #9fe3bf; } .faq-dot { width: 9px; height: 9px; border-radius: 50%; background: #3de39a; animation: tl-ping 2s ease-out infinite; } @keyframes faq-open { 0% { grid-template-rows: 0fr; padding-bottom: 0; } 6%, 30% { grid-template-rows: 1fr; padding-bottom: .8rem; } 36%, 100% { grid-template-rows: 0fr; padding-bottom: 0; } } @keyframes faq-hl { 0% { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); } 6%, 30% { background: rgba(47, 107, 255, .22); border-color: rgba(120, 170, 255, .55); } 36%, 100% { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); } } @keyframes faq-rot { 0% { transform: rotate(0); } 6%, 30% { transform: rotate(45deg); } 36%, 100% { transform: rotate(0); } } @keyframes faq-bob { 50% { transform: translateY(-10px) rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { .faq-art *, .faq-art { animation: none !important; } .faq-row:first-child .faq-a { grid-template-rows: 1fr; padding-bottom: .8rem; } } /* SEO service hero illustration */ .svc-visual--art { background: none; border: 0; overflow: visible; display: block; aspect-ratio: auto; } .svc-visual--art svg { width: auto; } .seo-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.12; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .seo-serp { left: 4%; top: 8%; width: 82%; padding: .9rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .seo-search { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; } .seo-search svg { width: 16px; height: 16px; flex: none; } .seo-typed { display: block; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .55); animation: seo-type 9s steps(14) infinite; overflow: hidden; } .seo-caret { width: 2px; height: 14px; background: #fff; animation: blink 1s steps(1) infinite; margin-left: -.3rem; } .seo-results { position: relative; height: 196px; margin-top: .8rem; } .seo-res { position: absolute; left: 0; right: 0; height: 40px; display: flex; align-items: center; gap: .6rem; padding: 0 .7rem; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); } .seo-res--a { top: 0; } .seo-res--b { top: 50px; } .seo-res--c { top: 100px; } .seo-res b, .seo-res u { display: block; height: 6px; border-radius: 5px; background: rgba(255, 255, 255, .32); } .seo-res b { width: 140px; margin-bottom: .35rem; background: rgba(255, 255, 255, .5); } .seo-res u { width: 96px; text-decoration: none; background: rgba(255, 255, 255, .2); } .seo-rank { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 .72rem var(--font-display); font-style: normal; } .seo-res--you { top: 150px; z-index: 2; background: linear-gradient(90deg, rgba(47, 107, 255, .3), rgba(245, 37, 73, .28)); border-color: rgba(255, 140, 165, .7); box-shadow: 0 0 24px -4px rgba(245, 37, 73, .6); animation: seo-climb 9s ease-in-out infinite; } .seo-rank--you { background: linear-gradient(135deg, #f52549, #ff7a93); } .seo-res--you em { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #3de39a; color: #06361f; font-style: normal; } .seo-res--you em svg { width: 14px; height: 14px; } .seo-res--a { animation: seo-push-a 9s ease-in-out infinite; } .seo-res--b { animation: seo-push-b 9s ease-in-out infinite; } .seo-res--c { animation: seo-push-c 9s ease-in-out infinite; } .seo-traffic { right: 0; bottom: 4%; width: 36%; padding: .6rem .8rem; display: grid; gap: .3rem; color: #cfdcf7; font: 600 .75rem var(--font-display); animation: aa-chipfloat 5s ease-in-out -2s infinite; } .seo-traffic svg { width: 100%; height: auto; } .seo-spark { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cs-draw 9s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(61, 227, 154, .6)); } .seo-chip { position: absolute; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 600 .72rem var(--font-display); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: aa-chipfloat 5.5s ease-in-out infinite; } .seo-chip--1 { left: 0; bottom: 22%; } .seo-chip--2 { left: 10%; bottom: 4%; animation-delay: -2s; } .seo-chip--3 { right: 6%; top: 0; animation-delay: -3.5s; } .seo-mag { left: -1%; top: 0; background: linear-gradient(135deg, #f52549, #ff7a93); } .seo-mag svg { position: static; width: 22px; height: 22px; } @keyframes seo-type { 0% { width: 0; } 28%, 100% { width: 150px; } } @keyframes seo-climb { 0%, 30% { top: 150px; } 55%, 92% { top: 0; } 100% { top: 150px; } } @keyframes seo-push-a { 0%, 30% { top: 0; } 55%, 92% { top: 50px; } 100% { top: 0; } } @keyframes seo-push-b { 0%, 30% { top: 50px; } 55%, 92% { top: 100px; } 100% { top: 50px; } } @keyframes seo-push-c { 0%, 30% { top: 100px; } 55%, 92% { top: 150px; } 100% { top: 100px; } } @media (prefers-reduced-motion: reduce) { .seo-art *, .seo-art { animation: none !important; } .seo-typed { width: 150px; } .seo-res--you { top: 0; } .seo-res--a { top: 50px; } .seo-res--b { top: 100px; } .seo-res--c { top: 150px; } .seo-spark { stroke-dashoffset: 0; } } @keyframes blink { 50% { opacity: 0; } } /* SEO hero: SERP-style results */ .seo-serp { width: 88%; left: 2%; padding: .85rem .9rem 1rem; } .seo-tabs { display: flex; align-items: center; gap: .9rem; margin: .7rem .2rem .2rem; font: 500 .68rem var(--font-body); color: #9db0d6; } .seo-tabs span { padding-bottom: .3rem; border-bottom: 2px solid transparent; } .seo-tabs .is-on { color: #fff; border-color: #6ea0ff; } .seo-tabs em { margin-left: auto; font-style: normal; font-size: .62rem; color: #7f93bd; } .seo-results { height: 272px; margin-top: .5rem; } .seo-res { height: 62px; display: block; padding: .5rem .7rem .5rem 2.4rem; border-radius: 10px; } .seo-res--a { top: 0; } .seo-res--b { top: 70px; } .seo-res--c { top: 140px; } .seo-res--you { top: 210px; } .seo-url { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; } .seo-fav { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .35); flex: none; } .seo-url u { display: block; width: 90px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .26); text-decoration: none; } .seo-res b { width: 62%; height: 8px; margin-bottom: .35rem; background: #8fb4ff; } .seo-d { display: block; width: 92%; height: 5px; margin-bottom: .25rem; border-radius: 4px; background: rgba(255, 255, 255, .2); } .seo-d--s { width: 64%; } .seo-res .seo-rank { position: absolute; left: .55rem; top: .55rem; } .seo-res--you b { background: #ffa3b6; } .seo-res--you .seo-url em { margin-left: auto; width: 18px; height: 18px; } .seo-res--you .seo-url em svg { width: 12px; height: 12px; } @keyframes seo-climb { 0%, 30% { top: 210px; } 55%, 92% { top: 0; } 100% { top: 210px; } } @keyframes seo-push-a { 0%, 30% { top: 0; } 55%, 92% { top: 70px; } 100% { top: 0; } } @keyframes seo-push-b { 0%, 30% { top: 70px; } 55%, 92% { top: 140px; } 100% { top: 70px; } } @keyframes seo-push-c { 0%, 30% { top: 140px; } 55%, 92% { top: 210px; } 100% { top: 140px; } } @media (prefers-reduced-motion: reduce) { .seo-res--you { top: 0; } .seo-res--a { top: 70px; } .seo-res--b { top: 140px; } .seo-res--c { top: 210px; } } .seo-art { aspect-ratio: 1; } .seo-traffic { bottom: 0; } .seo-chip--1 { bottom: 20%; } .seo-chip--2 { bottom: 2%; } /* Service offerings grid */ .so-sec { background: #fff; } .so-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); margin-top: var(--space-lg); } .so-card { position: relative; padding: 1.5rem 1.4rem 1.6rem; border-radius: 18px; background: #f8f6f1; border: 1px solid rgba(10, 53, 137, .55); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s, background .4s; overflow: hidden; } .so-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #0a3589, #f52549); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .so-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(245, 37, 73, .6); box-shadow: 0 26px 44px -26px rgba(10, 53, 137, .55); } .so-card:hover::after { transform: none; } .so-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1rem; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0a3589, #2f6bff); box-shadow: 0 14px 24px -12px rgba(10, 53, 137, .7); transition: transform .4s var(--ease), background .4s; } .so-card:hover .so-ico { transform: rotate(-6deg) scale(1.08); background: linear-gradient(135deg, #f52549, #ff7a93); } .so-card h3 { margin: 0 0 .5rem; font-size: 1.3rem; color: var(--color-primary-600); } .so-card p { margin: 0; color: #5d667f; font-size: .95rem; } /* Offerings grid: four columns on wide screens; tools card fills the remaining space */ @media (min-width: 1100px) { .so-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .so-tools { grid-column: span 3; } } @media (min-width: 640px) and (max-width: 1099px) { .so-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .so-tools { grid-column: 1 / -1; } } .so-tools { padding: 1.4rem 1.4rem 1.5rem; border-radius: 18px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .5); align-self: stretch; } .so-tools h3 { margin: 0 0 1rem; font: 700 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #f52549; } .so-tools .tech-list { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } /* Tools card: tiles spread evenly (space-between) */ .so-tools .tech-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; } .so-tools .tech-list li { flex: 0 0 auto; width: 118px; } .so-tools { display: flex; flex-direction: column; } .so-tools .tech-list { margin-block: auto; } /* Business problems: modern, animated cards (background colour unchanged) */ .prob-sec { position: relative; overflow: hidden; } .prob-sec::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 53, 137, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 53, 137, .05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 85%); pointer-events: none; } .prob-sec > .container { position: relative; z-index: 1; } .prob-sec .problem-grid { gap: 1.4rem; } .problem { position: relative; overflow: hidden; padding: 1.7rem 1.6rem 1.8rem 1.6rem; border: 1px solid rgba(10, 53, 137, .1); border-top: 1px solid rgba(10, 53, 137, .1); border-radius: 20px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .55); transition: transform .45s var(--ease), box-shadow .45s, border-color .45s; } .problem::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(245, 37, 73, .16), rgba(47, 107, 255, .12) 45%, transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; } .problem::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #0a3589, #f52549, #7dd3fc); transform: scaleX(.22); transform-origin: left; transition: transform .7s var(--ease); } .problem:hover { transform: translateY(-7px); border-color: rgba(245, 37, 73, .35); box-shadow: 0 34px 56px -30px rgba(10, 53, 137, .6); } .problem:hover::before { opacity: 1; } .problem:hover::after { transform: none; } .problem > * { position: relative; } .problem-num { position: absolute; right: 1.2rem; top: .6rem; font: 700 3.6rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(10, 53, 137, .13); transition: -webkit-text-stroke-color .4s; pointer-events: none; } .problem:hover .problem-num { -webkit-text-stroke-color: rgba(245, 37, 73, .35); } .problem-ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.1rem; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0a3589, #2f6bff); box-shadow: 0 14px 24px -12px rgba(10, 53, 137, .7); animation: aa-chipfloat 5s ease-in-out infinite; transition: background .4s; } .problem:nth-child(even) .problem-ico { animation-delay: -2.5s; } .problem:hover .problem-ico { background: linear-gradient(135deg, #f52549, #ff7a93); } .problem-ico svg { width: 24px; height: 24px; } .problem h3 { margin: 0 0 .5rem; font-size: 1.2rem; } @media (prefers-reduced-motion: reduce) { .problem-ico { animation: none; } .problem { transition: none; } } /* Our approach: animated zig-zag timeline */ .ap { --step: .8s; position: relative; display: grid; gap: 1.6rem; padding-block: .5rem; } .ap-line { position: absolute; left: 22px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: rgba(10, 53, 137, .12); } .ap-line i { display: block; width: 100%; height: 0; border-radius: 3px; background: linear-gradient(180deg, #0a3589, #f52549); transition: height calc(var(--n) * var(--step)) linear .1s; } .ap.is-in .ap-line i { height: 100%; } .ap:not(.is-in) .ap-line i, .ap:not(.is-in) .ap-card, .ap:not(.is-in) .ap-node { transition-duration: 0s; transition-delay: 0s; } .ap-item { position: relative; padding-left: 4.2rem; } .ap-node { position: absolute; left: 0; top: .6rem; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid #0a3589; color: #0a3589; font: 700 .85rem var(--font-display); transform: scale(.5); opacity: 0; transition: transform .5s var(--ease), opacity .4s, background .4s, color .4s; transition-delay: calc(var(--i) * var(--step)); } .ap.is-in .ap-node { transform: none; opacity: 1; background: linear-gradient(135deg, #0a3589, #f52549); border-color: #fff; color: #fff; box-shadow: 0 0 0 0 rgba(245, 37, 73, .45), 0 12px 22px -10px rgba(10, 53, 137, .7); animation: tl-ping 2.8s ease-out infinite; animation-delay: calc(var(--i) * var(--step) + .6s); } .ap-card { padding: 1.3rem 1.4rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 22px 40px -30px rgba(10, 53, 137, .5); opacity: 0; transform: translateX(34px); transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s, border-color .4s; transition-delay: calc(var(--i) * var(--step) + .15s); } .ap.is-in .ap-card { opacity: 1; transform: none; } .ap-card:hover { border-color: rgba(245, 37, 73, .4); box-shadow: 0 30px 50px -28px rgba(10, 53, 137, .6); } .ap-card h3 { margin: 0 0 .45rem; font-size: 1.15rem; color: var(--color-dark); } .ap-card p { margin: 0; color: #5d667f; font-size: .96rem; } @media (min-width: 800px) { .ap { gap: 1.2rem; } .ap-line { left: calc(50% - 1.5px); } .ap-item { width: calc(50% - 2.6rem); padding-left: 0; } .ap-item:nth-child(odd) { margin-right: auto; } .ap-item:nth-child(even) { margin-left: auto; } .ap-item:nth-child(even) { margin-top: -2.2rem; } .ap-item:nth-child(odd) .ap-node { left: auto; right: calc(-2.6rem - 23px); } .ap-item:nth-child(even) .ap-node { left: calc(-2.6rem - 23px); } .ap-item:nth-child(odd) .ap-card { transform: translateX(-34px); text-align: right; } .ap.is-in .ap-item:nth-child(odd) .ap-card { transform: none; } .ap-item:nth-child(odd) .ap-card { margin-right: 0; } } @media (prefers-reduced-motion: reduce) { .ap-line i { transition: none; height: 100%; } .ap-card, .ap-node { transition: none; opacity: 1; transform: none; } .ap-node { background: linear-gradient(135deg, #0a3589, #f52549); color: #fff; border-color: #fff; animation: none !important; } } /* Comparison: generic vs our strategy */ .vs-sec { position: relative; overflow: hidden; background: #f5f7fc; } .vs-sec > .container { position: relative; z-index: 1; } .vs { --step: .75s; position: relative; margin-top: var(--space-lg); display: grid; gap: .9rem; max-width: 1040px; margin-inline: auto; } .vs-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin-bottom: .4rem; } .vs-label { padding: .7rem 1rem; border-radius: 14px; font: 700 clamp(.95rem, .8rem + .6vw, 1.3rem) var(--font-display); text-align: center; } .vs-label--bad { background: #e8ebf3; color: #5d667f; } .vs-label--good { color: #fff; background: linear-gradient(135deg, #0a3589, #072458); box-shadow: 0 18px 34px -18px rgba(10, 53, 137, .8); } .vs-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 700 .95rem var(--font-display); color: #fff; background: linear-gradient(135deg, #f52549, #ff7a93); box-shadow: 0 0 0 6px rgba(245, 37, 73, .14), 0 14px 26px -10px rgba(245, 37, 73, .8); animation: tl-ping 2.6s ease-out infinite; } .vs-spine { display: none; } .vs-row { display: grid; gap: .6rem; } .vs-bad, .vs-good { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border-radius: 16px; opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s; transition-delay: calc(var(--i) * var(--step)); } .vs-bad { background: #fff; border: 1px dashed rgba(93, 102, 127, .45); color: #6a7390; transform: translateX(-30px); } .vs-good { background: linear-gradient(135deg, #0a3589, #08285f); border: 1px solid rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 22px 40px -26px rgba(10, 53, 137, .9); transform: translateX(30px); } .vs.is-in .vs-bad, .vs.is-in .vs-good { opacity: 1; transform: none; } .vs:not(.is-in) .vs-bad, .vs:not(.is-in) .vs-good { transition-duration: 0s; transition-delay: 0s; } .vs-good:hover { box-shadow: 0 30px 50px -24px rgba(10, 53, 137, 1); } .vs-bad p, .vs-good p { margin: 0; font-size: .97rem; line-height: 1.5; } .vs-bad p { text-decoration: line-through; text-decoration-color: rgba(245, 37, 73, .35); } .vs-x, .vs-ok { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .vs-x { background: rgba(245, 37, 73, .12); color: #f52549; } .vs-ok { background: #3de39a; color: #06361f; transform: scale(0); transition: transform .5s var(--ease); transition-delay: calc(var(--i) * var(--step) + .3s); } .vs.is-in .vs-ok { transform: none; } .vs-x svg, .vs-ok svg { width: 14px; height: 14px; } .vs-dot { display: none; } @media (min-width: 800px) { .vs-head { grid-template-columns: 1fr 52px 1fr; gap: 1.1rem; } .vs-row { grid-template-columns: 1fr 52px 1fr; gap: 1.1rem; align-items: stretch; } .vs-dot { display: block; align-self: center; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #0a3589; z-index: 1; transform: scale(0); transition: transform .4s var(--ease); transition-delay: calc(var(--i) * var(--step)); } .vs.is-in .vs-dot { transform: none; background: #f52549; border-color: #fff; box-shadow: 0 0 0 4px rgba(245, 37, 73, .2); } .vs-spine { display: block; position: absolute; left: calc(50% - 1.5px); top: 66px; bottom: 6px; width: 3px; border-radius: 3px; background: rgba(10, 53, 137, .12); } .vs-spine i { display: block; width: 100%; height: 0; border-radius: 3px; background: linear-gradient(180deg, #0a3589, #f52549); transition: height calc(var(--n) * var(--step)) linear .1s; } .vs.is-in .vs-spine i { height: 100%; } .vs:not(.is-in) .vs-spine i, .vs:not(.is-in) .vs-dot { transition-duration: 0s; } } /* Why choose us: dark intro + feature wall */ .wy-sec { background: #fff; } .wy-grid { display: grid; gap: 1.6rem; align-items: start; } @media (min-width: 960px) { .wy-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 2.2rem; } .wy-intro { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .wy-intro { position: relative; overflow: hidden; padding: 2.2rem 2rem; border-radius: 24px; color: #fff; background: linear-gradient(160deg, #0b2a6b, #06163d 60%, #04112e); box-shadow: 0 40px 70px -40px rgba(0, 36, 107, .9), inset 0 1px 0 rgba(255, 255, 255, .15); } .wy-intro::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); pointer-events: none; } .wy-glow { position: absolute; width: 320px; height: 320px; right: -120px; bottom: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .5), transparent); animation: mv-drift 9s ease-in-out infinite alternate; pointer-events: none; } .wy-intro > * { position: relative; } .wy-intro h2 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: .8rem; } .wy-intro p { color: #b8c6e6; margin-bottom: 1.4rem; } .wy-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .wy-card { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.2rem 1.3rem; border-radius: 18px; background: #f6f8fd; border: 1px solid rgba(10, 53, 137, .08); transition: transform .4s var(--ease), box-shadow .4s, background .4s, border-color .4s; overflow: hidden; } .wy-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #0a3589, #f52549); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); } .wy-card:hover { transform: translateY(-5px); background: #fff; border-color: rgba(245, 37, 73, .3); box-shadow: 0 26px 44px -28px rgba(10, 53, 137, .55); } .wy-card:hover::after { transform: none; } .wy-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0a3589, #2f6bff); box-shadow: 0 14px 24px -12px rgba(10, 53, 137, .7); transition: background .4s, transform .4s var(--ease); } .wy-card:hover .wy-ico { background: linear-gradient(135deg, #f52549, #ff7a93); transform: rotate(-6deg) scale(1.08); } .wy-ico svg { width: 24px; height: 24px; } .wy-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--color-dark); } .wy-card p { margin: 0; font-size: .9rem; line-height: 1.5; color: #5d667f; } @media (prefers-reduced-motion: reduce) { .vs-bad, .vs-good, .vs-ok, .vs-dot { opacity: 1; transform: none; transition: none; } .vs-spine i { height: 100%; transition: none; } .vs-badge, .wy-glow { animation: none; } } /* Pricing plans */ .pr-sec { position: relative; overflow: hidden; background: radial-gradient(60% 50% at 80% 0%, rgba(10, 53, 137, .6), transparent 70%), #040f27; color: #fff; } .pr-sec::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%); pointer-events: none; } .pr-glow { position: absolute; border-radius: 50%; pointer-events: none; animation: mv-drift 12s ease-in-out infinite alternate; } .pr-glow--b { width: 460px; height: 460px; left: -140px; top: 10%; background: radial-gradient(closest-side, rgba(47, 107, 255, .35), transparent); } .pr-glow--p { width: 420px; height: 420px; right: -120px; bottom: -80px; background: radial-gradient(closest-side, rgba(245, 37, 73, .3), transparent); animation-delay: -5s; } .pr-sec > .container { position: relative; z-index: 1; } .pr-sec .section-heading h2 { color: #fff; } .pr-sec .section-heading .lead { color: #b8c6e6; } .pr-grid { display: grid; gap: 1.4rem; margin-top: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; } .pr-card { position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.6rem 1.7rem; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -40px rgba(0, 0, 0, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; } .pr-card:hover { transform: translateY(-8px); border-color: rgba(120, 170, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 40px 70px -36px rgba(47, 107, 255, .55); } .pr-card.is-featured { border-color: transparent; background: linear-gradient(180deg, rgba(20, 52, 120, .85), rgba(8, 24, 64, .85)) padding-box, linear-gradient(135deg, #2f6bff, #f52549) border-box; border: 1.5px solid transparent; box-shadow: 0 40px 80px -36px rgba(245, 37, 73, .45); } @media (min-width: 960px) { .pr-card.is-featured { transform: translateY(-10px); } .pr-card.is-featured:hover { transform: translateY(-18px); } } .pr-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: 999px; background: linear-gradient(90deg, #f52549, #ff7a93); color: #fff; font: 700 .72rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 12px 24px -10px rgba(245, 37, 73, .8); } .pr-name { margin: 0 0 .5rem; font: 600 1rem var(--font-display); color: #ff8fa6; } .pr-price { display: flex; align-items: baseline; gap: .4rem; } .pr-amount { font: 700 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--font-display); color: #fff; letter-spacing: -.02em; } .pr-period { font: italic 500 .9rem var(--font-body); color: #9fb2d8; } .pr-offer { margin: .7rem 0 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; line-height: 1.45; color: #ff8fa6; } .pr-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .1rem; flex: 1; } .pr-list li { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .9rem; line-height: 1.4; color: #dbe6ff; } .pr-list svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: #3de39a; } .pr-btn { justify-content: center; width: 100%; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); } .pr-btn:hover { background: linear-gradient(90deg, #0a3589, #f52549); border-color: transparent; transform: translateY(-5px); color: #fff; } .is-featured .pr-btn { background: linear-gradient(90deg, #0a3589, #f52549); border-color: transparent; box-shadow: 0 16px 30px -14px rgba(245, 37, 73, .7); } /* Plan popup */ .plan-modal { width: min(560px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--color-text); box-shadow: 0 50px 100px -30px rgba(0, 20, 70, .7); overflow: auto; } .plan-modal::backdrop { background: rgba(3, 12, 36, .72); backdrop-filter: blur(6px); } .plan-modal[open] { animation: pm-in .4s var(--ease); } .pm-box { position: relative; padding: clamp(1.4rem, 3vw, 2.2rem); } .pm-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #0a3589, #f52549); } .pm-box h2 { margin: .4rem 0 .3rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--color-dark); } .pm-sub { margin: 0 0 1.2rem; color: #5d667f; font-size: .95rem; } .pm-close { position: absolute; right: 1rem; top: 1.1rem; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eef2fb; color: #0a3589; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease); } .pm-close:hover { background: #f52549; color: #fff; transform: rotate(90deg); } .plan-modal .form-row { gap: .8rem; } @keyframes pm-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pr-glow, .plan-modal[open] { animation: none; } .pr-card, .pr-card:hover { transition: none; } } .pr-sec .vt-grad { background-image: linear-gradient(90deg, #8fb8ff, #ff8fa6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* One heading style for every page hero (inner pages, services, single posts, 404): same font, weight, tracking and gradient last word */ .hero h1, .hero--page h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: #fff; } .hero--page h1 { font-size: clamp(2.2rem, 1rem + 3.4vw, 3.8rem); max-width: 20ch; } .hero--page h1 .vt-grad { padding-bottom: .06em; } /* Service FAQ: same look as the homepage FAQ, with floating particles */ .faq-svc { position: relative; } .faq-svc > .container { position: relative; z-index: 1; } .faq-svc > .particles { z-index: 0; } .faq-svc > .particles i { filter: brightness(.9); } /* Footer wordmark: bottom fades away like smoke */ .footer-word { background: linear-gradient(180deg, rgba(0, 36, 107, .2) 0%, rgba(0, 36, 107, .12) 40%, rgba(0, 36, 107, .03) 85%); -webkit-background-clip: text; background-clip: text; -webkit-mask-image: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, .55) 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 15%, rgba(0, 0, 0, .55) 55%, transparent 96%); } /* Footer wordmark: heavy rounded sans, smoky fade */ .footer-word { font-family: "Inter", system-ui, sans-serif; font-weight: 900; font-size: clamp(3rem, 13.2vw, 12.5rem); letter-spacing: -.035em; line-height: .86; filter: url(#smac-round); background: linear-gradient(180deg, #c9d2e8 0%, #dde3f1 45%, #f3f6fc 92%); -webkit-background-clip: text; background-clip: text; } .footer-word::after { mix-blend-mode: normal; opacity: .5; } .footer-word { font-size: clamp(3rem, 16.4vw, 15.5rem); background: linear-gradient(180deg, #bcc7e2 0%, #d5dcee 45%, #f3f6fc 92%); } .footer-word { background-image: linear-gradient(180deg, #bcc7e2 0%, #d5dcee 45%, #f3f6fc 92%); -webkit-background-clip: text; background-clip: text; } /* Wordmark always fits its container (the word is about 5.6em wide) */ .footer-word { font-size: min(calc((100vw - 3.5rem) / 6), 205px); overflow: visible; padding-inline: .04em; } /* More space above the wordmark */ .footer-word { margin-top: clamp(1.5rem, 3vw, 3rem); } /* --------------------------------------------------------------------------- Buttons: solid blue, pink on hover. On blue/dark backgrounds: white, pink on hover. --------------------------------------------------------------------------- */ .btn--primary, .btn--primary:focus-visible { background: #0a3589; background-image: none; color: #fff; border-color: transparent; box-shadow: 0 12px 26px -12px rgba(10, 53, 137, .65); transition: background-color .3s, color .3s, box-shadow .3s, transform .25s var(--ease); } .btn--primary:hover { background: #f52549; background-image: none; color: #fff; box-shadow: 0 14px 30px -10px rgba(245, 37, 73, .6); } .hero .btn--primary, .section--dark .btn--primary, .cta-band .btn--primary, .site-footer .footer-cta .btn--primary, .panel--dark .btn--primary, .wy-intro .btn--primary, .pr-sec .btn--primary, .why .btn--primary, .cta-inner .btn--primary { background: #fff; background-image: none; color: #0a3589; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5); } .hero .btn--primary:hover, .section--dark .btn--primary:hover, .cta-band .btn--primary:hover, .site-footer .footer-cta .btn--primary:hover, .panel--dark .btn--primary:hover, .wy-intro .btn--primary:hover, .pr-sec .btn--primary:hover, .why .btn--primary:hover, .cta-inner .btn--primary:hover { background: #f52549; background-image: none; color: #fff; box-shadow: 0 14px 30px -10px rgba(245, 37, 73, .6); } /* Pricing buttons sit on a blue background */ .pr-btn, .is-featured .pr-btn { background: #fff; background-image: none; color: #0a3589; border-color: transparent; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5); } .pr-btn:hover, .is-featured .pr-btn:hover { background: #f52549; background-image: none; color: #fff; border-color: transparent; } /* Button-like pieces inside illustrations */ .cnt-send { background: #fff; background-image: none; color: #0a3589; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); } .pf-cta { background: #0a3589; background-image: none; } /* Bottom mobile bar is dark blue: white button, pink on hover */ .mobile-cta .btn--primary { background: #fff; background-image: none; color: #0a3589; } .mobile-cta .btn--primary:hover { background: #f52549; color: #fff; } /* Services hero illustration */ .sv-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 500 / 440; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .sv-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sv-link { fill: none; stroke: rgba(160, 190, 255, .45); stroke-width: 1.6; stroke-dasharray: 4 7; animation: aa-dash 1.6s linear infinite; } .sv-pulse { fill: #ff7a93; filter: drop-shadow(0 0 6px #f52549); } .sv-hub { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 26%; background: #fff; box-shadow: 0 0 60px rgba(47, 107, 255, .55), 0 24px 40px -16px rgba(0, 0, 0, .6); animation: aa-breathe 4s ease-in-out infinite; } .sv-hub img { width: 62%; height: auto; } .sv-ring { position: absolute; inset: -8px; border-radius: 30%; border: 2px solid rgba(245, 37, 73, .6); animation: mv-ring 2.8s ease-out infinite; } .sv-card { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem .65rem .7rem; border-radius: 16px; color: #fff; white-space: nowrap; } .sv-card b { display: block; margin-bottom: .35rem; font: 600 .82rem var(--font-display); } .sv-card--web { left: 0; top: 4%; animation: aa-chipfloat 6s ease-in-out infinite; } .sv-card--mkt { right: -2%; top: 14%; animation: aa-chipfloat 6.5s ease-in-out -2s infinite; } .sv-card--app { left: 50%; bottom: 0; margin-left: -85px; animation: aa-chipfloat 5.5s ease-in-out -4s infinite; } .sv-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #fff; } .sv-ico svg { width: 22px; height: 22px; } .sv-ico--b { background: linear-gradient(135deg, #2f6bff, #6ea0ff); } .sv-ico--p { background: linear-gradient(135deg, #f52549, #ff7a93); } .sv-ico--g { background: linear-gradient(135deg, #7b6cff, #a79bff); } .sv-code { display: grid; gap: 4px; } .sv-code i { display: block; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .4); transform-origin: left; animation: blg-write 5s ease-in-out infinite; } .sv-code i:nth-child(1) { width: 90px; } .sv-code i:nth-child(2) { width: 64px; animation-delay: .5s; } .sv-code i:nth-child(3) { width: 78px; animation-delay: 1s; } .sv-bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; } .sv-bars i { display: block; width: 12px; border-radius: 3px; background: linear-gradient(180deg, #ff8fa6, #f52549); transform-origin: bottom; animation: cs-bar 5s ease-in-out infinite; } .sv-bars i:nth-child(1) { height: 30%; } .sv-bars i:nth-child(2) { height: 48%; animation-delay: .15s; } .sv-bars i:nth-child(3) { height: 64%; animation-delay: .3s; } .sv-bars i:nth-child(4) { height: 82%; animation-delay: .45s; } .sv-bars i:nth-child(5) { height: 100%; animation-delay: .6s; } .sv-dots { display: flex; gap: 6px; } .sv-dots i { width: 12px; height: 12px; border-radius: 50%; background: #a79bff; animation: cnt-dot 1.4s ease-in-out infinite; } .sv-dots i:nth-child(2) { animation-delay: .18s; } .sv-dots i:nth-child(3) { animation-delay: .36s; } @media (prefers-reduced-motion: reduce) { .sv-art *, .sv-art { animation: none !important; } } /* Services list: lively white background (grid, drifting glows, rising particles) */ .svc-list { position: relative; overflow: hidden; background: #fff; } .svc-list::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 53, 137, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 53, 137, .06) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(75% 55% at 50% 40%, #000, transparent 95%); mask-image: radial-gradient(75% 55% at 50% 40%, #000, transparent 95%); pointer-events: none; } .svc-list::after { content: ""; position: absolute; top: 0; bottom: 0; left: 8%; width: 2px; background: linear-gradient(180deg, transparent, rgba(47, 107, 255, .35), rgba(245, 37, 73, .35), transparent); background-size: 100% 220%; animation: svc-flow 7s linear infinite; pointer-events: none; } .svc-list > .container { position: relative; z-index: 1; } .svc-glow { position: absolute; border-radius: 50%; pointer-events: none; animation: mv-drift 14s ease-in-out infinite alternate; } .svc-glow--1 { width: 560px; height: 560px; left: -200px; top: 4%; background: radial-gradient(closest-side, rgba(47, 107, 255, .22), transparent); } .svc-glow--2 { width: 520px; height: 520px; right: -190px; top: 38%; background: radial-gradient(closest-side, rgba(245, 37, 73, .17), transparent); animation-delay: -6s; } .svc-glow--3 { width: 480px; height: 480px; left: -140px; bottom: 6%; background: radial-gradient(closest-side, rgba(123, 108, 255, .18), transparent); animation-delay: -10s; } .svc-list .service-block { position: relative; } .svc-list .service-block > :not(.particles) { position: relative; z-index: 1; } .svc-list .service-block > .particles { z-index: 0; inset: -20px -80px; } .svc-list .service-block .particles i { animation-name: particle-rise-long; } .svc-list .big-num { transition: -webkit-text-stroke-color .5s; } .svc-list .service-block:hover .big-num { -webkit-text-stroke-color: rgba(245, 37, 73, .35); } @keyframes particle-rise-long { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translate(var(--dx, 0), -760px) scale(1.1); opacity: 0; } } @keyframes svc-flow { from { background-position: 0 0; } to { background-position: 0 -220%; } } @media (max-width: 800px) { .svc-list::after { display: none; } } @media (prefers-reduced-motion: reduce) { .svc-glow, .svc-list::after { animation: none; } } .svc-list .service-block > .particles { position: absolute; } /* Play button: solid blue, pink on hover (no gradient) */ .vt-btn { background: #0a3589; background-image: none; box-shadow: 0 10px 30px -8px rgba(10, 53, 137, .7), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .3s var(--ease), background-color .3s, box-shadow .3s; } .vt-play:hover .vt-btn { background: #f52549; box-shadow: 0 12px 32px -8px rgba(245, 37, 73, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .vt-btn::before { border-color: rgba(10, 53, 137, .6); } .vt-play:hover .vt-btn::before { border-color: rgba(245, 37, 73, .7); } /* Logo mark instead of an initial in photo-less avatars */ .avatar-mark { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar:has(.avatar-mark), .vt-card .avatar, .ss-av:has(.avatar-mark) { background: #fff; border: 1px solid rgba(10, 53, 137, .18); } .avatar .avatar-mark, .ss-av .avatar-mark { padding: 3px; object-fit: contain; } /* Slider navigation buttons: pink on hover (testimonials, portfolio slider, generic sliders) */ .vt-nav button:hover, .slider-nav button:hover { background: #f52549; border-color: #f52549; color: #fff; box-shadow: 0 12px 22px -10px rgba(245, 37, 73, .6); } .ps-arrow--next { background: #0a3589; background-image: none; color: #fff; } .ps-arrow:hover, .ps-arrow--next:hover { background: #f52549; color: #fff; } /* Process tabs (dark section): no gradient. Active = white, hover = pink */ .why .process-tab[aria-selected="true"] { background: #fff; background-image: none; color: #0a3589; border-color: #fff; } .why .process-tab:hover { background: #f52549; background-image: none; color: #fff; border-color: #f52549; } .process-tab:hover { background: #f52549; color: #fff; border-color: #f52549; } .process-tab[aria-selected="true"]:hover { background: #f52549; color: #fff; } /* Social icons: solid pink on hover (no gradient) */ .social a:hover, .site-footer .social a:hover, .topbar-social a:hover { background: #f52549; background-image: none; border-color: #f52549; color: #fff; } /* Legal pages hero illustration */ .lg-art { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1.1; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .lg-back { position: absolute; left: 20%; top: 6%; width: 62%; height: 80%; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transform: rotate(7deg); animation: aa-chipfloat 7s ease-in-out -1s infinite; } .lg-doc { left: 12%; top: 9%; width: 64%; padding: 1.1rem 1.1rem 1.3rem; display: grid; gap: .8rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .lg-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255, 255, 255, .14); } .lg-seal { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #0a3589; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .lg-seal svg { width: 18px; height: 18px; } .lg-title { display: block; height: 9px; width: 55%; border-radius: 6px; background: rgba(255, 255, 255, .6); } .lg-clause { display: flex; align-items: center; gap: .65rem; } .lg-tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: transparent; animation: lg-check 8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); } .lg-tick svg { width: 14px; height: 14px; } .lg-lines { display: grid; gap: 5px; flex: 1; } .lg-lines i { display: block; height: 6px; border-radius: 5px; background: rgba(255, 255, 255, .3); } .lg-lines i:last-child { width: 62%; background: rgba(255, 255, 255, .18); } .lg-sign { position: relative; margin-top: .3rem; padding-top: .3rem; } .lg-sign svg { display: block; width: 62%; height: auto; overflow: visible; } .lg-sig { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cs-draw 8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(159, 194, 255, .6)); } .lg-signline { display: block; height: 1px; margin-top: .2rem; background: rgba(255, 255, 255, .3); } .lg-b svg { position: static; width: 24px; height: 24px; } .lg-b--shield { right: 4%; top: 6%; width: 56px; height: 56px; background: linear-gradient(135deg, #2f6bff, #6ea0ff); } .lg-b--pen { right: 10%; bottom: 20%; background: linear-gradient(135deg, #f52549, #ff7a93); animation-delay: -2s; } .lg-chip { left: 0; bottom: 10%; display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 14px; color: #fff; animation: aa-chipfloat 5s ease-in-out -1.5s infinite; } .lg-chip b { font: 600 .85rem var(--font-display); } .lg-chip small { font-size: .7rem; color: #9fe3bf; } .lg-dot { width: 9px; height: 9px; border-radius: 50%; background: #3de39a; animation: tl-ping 2s ease-out infinite; } @keyframes lg-check { 0%, 8% { background: rgba(255, 255, 255, .1); color: transparent; border-color: rgba(255, 255, 255, .28); } 14%, 80% { background: #3de39a; color: #06361f; border-color: #3de39a; } 90%, 100% { background: rgba(255, 255, 255, .1); color: transparent; border-color: rgba(255, 255, 255, .28); } } @media (prefers-reduced-motion: reduce) { .lg-art *, .lg-art { animation: none !important; } .lg-tick { background: #3de39a; color: #06361f; border-color: #3de39a; } .lg-sig { stroke-dashoffset: 0; } } /* Privacy policy hero illustration */ .pv-art { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1.1; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .pv-core { position: absolute; left: 50%; top: 46%; width: 34%; transform: translate(-50%, -50%); aspect-ratio: 1; display: grid; place-items: center; } .pv-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(110, 160, 255, .55); animation: pv-pulse 4.5s ease-out infinite; } .pv-ring--2 { animation-delay: 1.5s; } .pv-ring--3 { animation-delay: 3s; } .pv-shield { position: relative; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 28px rgba(47, 107, 255, .7)); animation: aa-breathe 4s ease-in-out infinite; } .pv-glint { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cs-draw 5s ease-in-out infinite; } .pv-lock { transform-box: fill-box; transform-origin: 50% 100%; animation: pv-lock 5s ease-in-out infinite; } .pv-orbit { position: absolute; left: 50%; top: 46%; width: 74%; aspect-ratio: 1; margin: calc(-37% * 1) 0 0 -37%; border-radius: 50%; border: 1px dashed rgba(160, 190, 255, .35); animation: aa-spin 26s linear infinite; } .pv-chip { position: absolute; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font: 600 .72rem var(--font-display); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: aa-spin 26s linear infinite reverse; } .pv-chip--1 { left: 50%; top: 0; margin: -14px 0 0 -26px; } .pv-chip--2 { right: 0; top: 62%; margin: 0 -20px 0 0; } .pv-chip--3 { left: 4%; top: 74%; } .pv-toggles { left: 0; bottom: 2%; width: 42%; padding: .7rem .8rem; display: grid; gap: .55rem; animation: aa-chipfloat 6s ease-in-out infinite; } .pv-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: #dbe6ff; font: 500 .75rem var(--font-body); } .pv-sw { position: relative; display: block; width: 32px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .22); animation: pv-sw 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); } .pv-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: pv-knob 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); } .pv-b svg { position: static; width: 22px; height: 22px; } .pv-b--key { right: 2%; bottom: 8%; background: linear-gradient(135deg, #f52549, #ff7a93); } @keyframes pv-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } } @keyframes pv-lock { 0%, 55% { transform: translateY(0); } 62%, 90% { transform: translateY(-5px); } 100% { transform: translateY(0); } } @keyframes pv-sw { 0%, 12% { background: rgba(255, 255, 255, .22); } 20%, 80% { background: #3de39a; } 90%, 100% { background: rgba(255, 255, 255, .22); } } @keyframes pv-knob { 0%, 12% { transform: none; } 20%, 80% { transform: translateX(14px); } 90%, 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .pv-art *, .pv-art { animation: none !important; } .pv-glint { stroke-dashoffset: 0; } .pv-sw { background: #3de39a; } .pv-sw::after { transform: translateX(14px); } } /* Refund policy hero illustration */ .rf-art { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1.1; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .rf-center { position: absolute; left: 50%; top: 48%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; } .rf-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: aa-spin 9s linear infinite; filter: drop-shadow(0 0 12px rgba(110, 160, 255, .5)); } .rf-coin { position: relative; width: 56%; aspect-ratio: 1; transform-style: preserve-3d; animation: rf-flip 5s ease-in-out infinite; } .rf-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; font: 700 clamp(2rem, 4vw, 3.2rem) var(--font-display); color: #fff; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .3), 0 20px 36px -12px rgba(0, 0, 0, .6); } .rf-face--a { background: radial-gradient(circle at 30% 28%, #ffd76a, #f0a500 70%); color: #6a4300; } .rf-face--b { background: radial-gradient(circle at 30% 28%, #6ea0ff, #0a3589 75%); transform: rotateY(180deg); } .rf-receipt { position: absolute; left: 0; top: 8%; width: 34%; padding: .8rem .8rem 1.5rem; border-radius: 10px 10px 0 0; background: #f6f8fd; color: #0a3589; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 14px 100%; animation: rf-print 6s ease-in-out infinite; } .rf-rhead i { display: block; height: 8px; width: 60%; margin-bottom: .7rem; border-radius: 5px; background: #0a3589; } .rf-rline { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; } .rf-rline i, .rf-total i { display: block; height: 6px; flex: 1; max-width: 62%; border-radius: 4px; background: #c4cde3; } .rf-rline b { width: 24px; height: 6px; border-radius: 4px; background: #c4cde3; } .rf-total { display: flex; justify-content: space-between; align-items: center; margin-top: .7rem; padding-top: .6rem; border-top: 1.5px dashed #b2bdd8; } .rf-total b { font: 700 .95rem var(--font-display); color: #f52549; } .rf-card { position: absolute; right: 0; bottom: 6%; width: 44%; aspect-ratio: 1.6; padding: .8rem; border-radius: 14px; background: linear-gradient(135deg, #0a3589, #2f6bff); box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .3); animation: rf-card 6s ease-in-out infinite; } .rf-chip { display: block; width: 26px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #ffd76a, #f0a500); } .rf-num { position: absolute; left: .8rem; bottom: .8rem; display: flex; gap: 5px; } .rf-num i { display: block; width: 20px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .6); } .rf-plus { position: absolute; right: .8rem; top: .7rem; padding: .15rem .5rem; border-radius: 999px; background: #3de39a; color: #06361f; font: 700 .78rem var(--font-display); animation: rf-pop 6s ease-in-out infinite; } @keyframes rf-flip { 0%, 30% { transform: rotateY(0); } 50%, 80% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } @keyframes rf-print { 0% { transform: translateY(-14px); opacity: 0; } 15%, 85% { transform: none; opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } } @keyframes rf-card { 0%, 40% { transform: translateX(14px) rotate(2deg); } 60%, 100% { transform: none; } } @keyframes rf-pop { 0%, 48% { opacity: 0; transform: scale(.4); } 58%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rf-art *, .rf-art { animation: none !important; } .rf-face--b { display: none; } } /* Client logos: full colour always */ .cl-logo img { filter: none; opacity: 1; } .sc-card img { filter: none; } /* Clients: more room between the heading and the logo row */ .cl-sec .section-heading { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } /* New SmacPage logo (300 x 80, transparent) */ .site-logo img { width: 190px; aspect-ratio: 300 / 80; } @media (max-width: 1100px) { .site-logo img { width: 160px; } } .mobile-nav-head .logo-plate img { width: 130px; } .footer-brand .logo-plate img { width: 200px; aspect-ratio: 300 / 80; } /* Footer wordmark v3: letters rise in one by one (no shimmer); rounding scales with the size */ .footer-word { filter: url(#smac-round); background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: initial; white-space: nowrap; display: flex; justify-content: center; } .footer-word::after { display: none; content: none; animation: none; } .footer-word > span { display: inline-block; background-image: linear-gradient(180deg, #bcc7e2 0%, #d5dcee 45%, #f3f6fc 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0; transform: translateY(38%); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * .07s); } .footer-word.is-in > span { opacity: 1; transform: none; } @media (max-width: 1100px) { .footer-word { filter: url(#smac-round-md); } } @media (max-width: 640px) { .footer-word { filter: url(#smac-round-sm); letter-spacing: -.03em; } } @media (prefers-reduced-motion: reduce) { .footer-word > span { opacity: 1; transform: none; transition: none; } } /* Footer contact column uses the full width on phones so the email does not break */ @media (max-width: 699px) { .site-footer .footer-cols > div:last-child { grid-column: 1 / -1; max-width: none; } } @media (max-width: 640px) { .footer-word { -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.25) 100%); margin-top: 1rem; } } /* Mobile sticky CTA: vivid pink button with glow and a gentle pulse */ .mobile-cta { background: linear-gradient(180deg, rgba(8, 28, 78, .96), rgba(4, 14, 40, .98)); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, .55); } .mobile-cta .btn--primary { position: relative; min-height: 54px; background: #f52549; background-image: none; color: #fff; font-size: .95rem; letter-spacing: .06em; border-radius: 14px; box-shadow: 0 10px 26px -6px rgba(245, 37, 73, .75), inset 0 1px 0 rgba(255, 255, 255, .35); animation: mcta-pulse 2.6s ease-out infinite; } .mobile-cta .btn--primary .icon { animation: mcta-nudge 1.6s ease-in-out infinite; } .mobile-cta .btn--primary:hover, .mobile-cta .btn--primary:active { background: #0a3589; color: #fff; box-shadow: 0 10px 26px -6px rgba(10, 53, 137, .8), inset 0 1px 0 rgba(255, 255, 255, .25); } @keyframes mcta-pulse { 0% { box-shadow: 0 10px 26px -6px rgba(245, 37, 73, .75), 0 0 0 0 rgba(245, 37, 73, .5), inset 0 1px 0 rgba(255, 255, 255, .35); } 70%, 100% { box-shadow: 0 10px 26px -6px rgba(245, 37, 73, .75), 0 0 0 14px rgba(245, 37, 73, 0), inset 0 1px 0 rgba(255, 255, 255, .35); } } @keyframes mcta-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .mobile-cta .btn--primary, .mobile-cta .btn--primary .icon { animation: none; } } /* Hero illustrations now show on phones and tablets: stacked under the text and scaled to fit */ .hero-art { display: block; margin-top: .6rem; } .hero-art > div { max-width: 100%; } @media (max-width: 959px) { .hero-split { gap: var(--space-lg); } .hero--art { padding-bottom: clamp(2.5rem, 8vw, 4rem); } } @media (max-width: 600px) { .hero-art { zoom: .84; } } @media (max-width: 400px) { .hero-art { zoom: .74; } } .hero--art, .hero--page { overflow: hidden; } /* No sideways scroll on phones from slide-in animations and glows */ html, body { overflow-x: clip; } @media (max-width: 600px) { .svc-visual--art { zoom: .86; } } /* Contain slide-in animations and glows inside each section so phones can never pan sideways */ main section, main article, main header, main > div, .site-footer, .site-header, .topbar { overflow-x: clip; } /* Sections now contain their own overflow, so the page-level rule is not needed (it can interfere with sticky elements on some phones) */ html, body { overflow-x: visible; } /* Client logos v2: uniform cards, two rows in opposite directions, soft depth */ .cl-sec { background: linear-gradient(180deg, #fff 0%, #f6f8fd 100%); position: relative; } .cl-sec::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(10, 53, 137, .09) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 80% at 50% 55%, #000, transparent 85%); mask-image: radial-gradient(70% 80% at 50% 55%, #000, transparent 85%); pointer-events: none; } .cl-sec > * { position: relative; } .cl-row { margin-bottom: 1.1rem; padding-block: .7rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .cl-row[data-dir="r"] .cl-track { animation-name: ss-right; } .cl-track { gap: 1.1rem; } .cl-logo { position: relative; width: 224px; height: 112px; padding: 0; border-radius: 18px; background: #fff; border: 1px solid rgba(10, 53, 137, .09); box-shadow: 0 16px 34px -26px rgba(10, 53, 137, .55), inset 0 1px 0 #fff; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s, border-color .45s; } .cl-logo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #0a3589, #f52549); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .cl-logo:hover { transform: translateY(-6px) scale(1.03); border-color: rgba(245, 37, 73, .3); box-shadow: 0 26px 44px -24px rgba(10, 53, 137, .6); } .cl-logo:hover::after { transform: none; } .cl-logo img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.14); filter: none; opacity: 1; transition: transform .5s var(--ease); } .cl-logo:hover img { transform: scale(1.22); } @media (max-width: 600px) { .cl-logo { width: 168px; height: 86px; border-radius: 14px; } .cl-track { gap: .8rem; } } @media (prefers-reduced-motion: reduce) { .cl-logo:hover, .cl-logo:hover img { transform: none; } } /* Client logos: smaller, with inner padding; no gradient line on hover */ .cl-logo { width: 200px; height: 100px; padding: 14px 18px; } .cl-logo::after { display: none; } .cl-logo img { transform: none; border-radius: 6px; } .cl-logo:hover img { transform: scale(1.06); } @media (max-width: 600px) { .cl-logo { width: 156px; height: 80px; padding: 10px 14px; } } /* Client logos: balance the padding (bottom was visually tight) */ .cl-logo { padding: 14px 18px 22px; box-sizing: border-box; } .cl-logo img { height: 100%; max-height: 100%; } @media (max-width: 600px) { .cl-logo { padding: 10px 14px 16px; } } /* Client logos: logo box with equal inner padding on all four sides */ .cl-logo { padding: 0; } .cl-logo img { position: absolute; inset: 14px 16px; width: calc(100% - 32px); height: calc(100% - 28px); max-width: none; max-height: none; object-fit: contain; transform: none; } .cl-logo:hover img { transform: scale(1.05); } @media (max-width: 600px) { .cl-logo { padding: 0; } .cl-logo img { inset: 10px 12px; width: calc(100% - 24px); height: calc(100% - 20px); } } /* AI SEO hero illustration */ .ai-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .ai-graph { position: absolute; right: -2%; top: -4%; width: 52%; height: auto; overflow: visible; opacity: .9; } .ai-pulse { fill: #fff; filter: drop-shadow(0 0 6px #6ea0ff); } .ai-ping { fill: none; stroke: #f52549; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pv-pulse 2.8s ease-out infinite; } .ai-nodes circle:not(.ai-ping) { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .35)); } .ai-panel { left: 3%; top: 16%; width: 80%; padding: 1rem 1.05rem 1.1rem; display: grid; gap: .8rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .ai-head { display: flex; align-items: center; gap: .5rem; color: #fff; } .ai-head b { font: 600 .85rem var(--font-display); } .ai-spark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #7b6cff, #2f6bff); } .ai-spark svg { width: 16px; height: 16px; } .ai-live { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #3de39a; animation: tl-ping 2s ease-out infinite; } .ai-q { padding: .5rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); } .ai-q-text { display: block; height: 7px; width: 70%; border-radius: 5px; background: rgba(255, 255, 255, .6); overflow: hidden; animation: seo-type 9s steps(12) infinite; } .ai-answer { position: relative; display: grid; gap: .45rem; padding-right: .2rem; } .ai-line { display: block; height: 7px; border-radius: 5px; background: rgba(255, 255, 255, .3); transform-origin: left; animation: blg-write 9s ease-in-out infinite; } .ai-line--1 { width: 94%; animation-delay: .8s; } .ai-line--2 { width: 100%; animation-delay: 1.6s; } .ai-line--3 { width: 82%; animation-delay: 2.4s; } .ai-line--4 { width: 58%; animation-delay: 3.2s; } .ai-cite { position: absolute; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; background: #6ea0ff; color: #06163d; font: 700 .62rem var(--font-display); opacity: 0; animation: ai-cite 9s ease-in-out infinite; } .ai-cite--1 { right: 2%; top: -3px; animation-delay: 2s; } .ai-cite--2 { right: 18%; top: 44px; animation-delay: 3.4s; background: #ff8fa6; } .ai-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .ai-src { position: relative; display: flex; align-items: center; gap: .35rem; padding: .45rem .5rem; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); } .ai-src i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .4); } .ai-src b { display: block; height: 5px; flex: 1; border-radius: 4px; background: rgba(255, 255, 255, .28); } .ai-src--you { background: rgba(245, 37, 73, .2); border-color: rgba(255, 140, 165, .7); box-shadow: 0 0 22px -4px rgba(245, 37, 73, .7); animation: ai-glow 9s ease-in-out infinite; } .ai-src--you i { background: #f52549; } .ai-src em { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #3de39a; color: #06361f; font-style: normal; transform: scale(0); animation: ai-tick 9s ease-in-out infinite; } .ai-src em svg { width: 11px; height: 11px; } .ai-chip { position: absolute; padding: .32rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 600 .72rem var(--font-display); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: aa-chipfloat 5.5s ease-in-out infinite; } .ai-chip--1 { left: 0; top: 2%; } .ai-chip--2 { left: 2%; bottom: 8%; animation-delay: -2s; } .ai-chip--3 { right: 6%; bottom: 20%; animation-delay: -3.5s; } .ai-cited { right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 14px; color: #fff; animation: aa-chipfloat 5s ease-in-out -1.5s infinite; } .ai-cited b { font: 600 .8rem var(--font-display); } .ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #3de39a; animation: tl-ping 2s ease-out infinite; } @keyframes ai-cite { 0%, 10% { opacity: 0; transform: scale(.3); } 18%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } } @keyframes ai-glow { 0%, 38% { box-shadow: none; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); } 50%, 90% { box-shadow: 0 0 22px -4px rgba(245, 37, 73, .7); background: rgba(245, 37, 73, .22); border-color: rgba(255, 140, 165, .75); } 100% { box-shadow: none; } } @keyframes ai-tick { 0%, 46% { transform: scale(0); } 54%, 90% { transform: none; } 100% { transform: scale(0); } } @media (prefers-reduced-motion: reduce) { .ai-art *, .ai-art { animation: none !important; } .ai-cite, .ai-src em { opacity: 1; transform: none; } } .ai-art { aspect-ratio: .95; } .ai-graph { width: 50%; right: -3%; top: -6%; } .ai-panel { top: 30%; left: 0; width: 86%; } .ai-chip--1 { top: 4%; left: 2%; } .ai-chip--2 { bottom: 4%; } .ai-graph { width: 44%; top: -12%; right: 0; } .ai-panel { top: 34%; } /* AI SEO hero illustration v2: page checklist -> AI engine -> cited in the AI Overview */ .ax { position: relative; width: 100%; max-width: 500px; aspect-ratio: 500 / 460; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .ax-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ax-wire { fill: none; stroke: rgba(160, 190, 255, .5); stroke-width: 1.6; stroke-dasharray: 4 7; animation: aa-dash 1.6s linear infinite; } .ax-dot { fill: #fff; filter: drop-shadow(0 0 6px #6ea0ff); } .ax-dot--p { fill: #ff9db0; filter: drop-shadow(0 0 6px #f52549); } .ax-page { left: 0; top: 0; width: 58%; padding: .8rem .9rem 1rem; } .ax-bar { display: flex; align-items: center; gap: 5px; padding-bottom: .65rem; margin-bottom: .55rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .ax-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); } .ax-bar i:first-child { background: #f52549; } .ax-bar span { margin-left: .4rem; padding: .15rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #b8c6e6; font: 500 .66rem var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ax-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .ax-list li { display: flex; align-items: center; gap: .55rem; color: #dbe6ff; font: 500 .74rem var(--font-body); } .ax-box { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); color: transparent; animation: ax-tick 10s ease-in-out infinite; animation-delay: calc(var(--i) * 1.3s); } .ax-box svg { width: 12px; height: 12px; } .ax-engine { position: absolute; left: 60%; top: 41%; width: 22%; aspect-ratio: 1; display: grid; place-items: center; } .ax-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(110, 160, 255, .55); animation: pv-pulse 4.2s ease-out infinite; } .ax-ring--2 { animation-delay: 1.4s; } .ax-ring--3 { animation-delay: 2.8s; } .ax-core { position: relative; display: grid; place-items: center; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #7aa7ff, #0a3589 72%); color: #fff; font: 700 1.1rem var(--font-display); box-shadow: 0 0 34px rgba(47, 107, 255, .75), inset 0 0 0 2px rgba(255, 255, 255, .3); animation: aa-breathe 3.4s ease-in-out infinite; } .ax-sat { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ff9db0; box-shadow: 0 0 10px #f52549; animation: ax-orbit 5s linear infinite; } .ax-sat--2 { background: #9fe3bf; box-shadow: 0 0 10px #3de39a; animation-duration: 7s; animation-direction: reverse; } .ax-sat--3 { background: #a79bff; box-shadow: 0 0 10px #7b6cff; animation-duration: 9s; animation-delay: -3s; } .ax-answer { left: 14%; bottom: 0; width: 86%; padding: .85rem .95rem .95rem; display: grid; gap: .6rem; } .ax-ahead { display: flex; align-items: center; gap: .5rem; color: #fff; } .ax-ahead b { font: 600 .8rem var(--font-display); } .ax-sp { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #7b6cff, #2f6bff); } .ax-sp svg { width: 14px; height: 14px; } .ax-text { display: grid; gap: .4rem; } .ax-text i { display: block; height: 6px; border-radius: 5px; background: rgba(255, 255, 255, .3); transform-origin: left; animation: blg-write 10s ease-in-out infinite; animation-delay: 5.2s; } .ax-text i:nth-child(1) { width: 96%; } .ax-text i:nth-child(2) { width: 88%; animation-delay: 5.8s; } .ax-text i:nth-child(3) { width: 60%; animation-delay: 6.4s; } .ax-src { display: flex; gap: .5rem; } .ax-cite { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 600 .68rem var(--font-display); } .ax-cite u { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 5px; background: #6ea0ff; color: #06163d; font-size: .6rem; text-decoration: none; } .ax-cite b { font-weight: 600; } .ax-cite em { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #3de39a; color: #06361f; font-style: normal; transform: scale(0); animation: ai-tick 10s ease-in-out infinite; animation-delay: 1.4s; } .ax-cite em svg { width: 10px; height: 10px; } .ax-cite:first-child { animation: ai-glow 10s ease-in-out infinite; animation-delay: 1.4s; } .ax-cite--ghost { flex: 1; } .ax-cite--ghost b { display: block; flex: 1; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .26); } .ax-cite--ghost u { background: rgba(255, 255, 255, .3); } @keyframes ax-tick { 0%, 6% { background: rgba(255, 255, 255, .08); color: transparent; border-color: rgba(255, 255, 255, .28); } 12%, 82% { background: #3de39a; color: #06361f; border-color: #3de39a; } 92%, 100% { background: rgba(255, 255, 255, .08); color: transparent; border-color: rgba(255, 255, 255, .28); } } @keyframes ax-orbit { from { transform: rotate(0) translateX(clamp(38px, 6vw, 52px)) rotate(0); } to { transform: rotate(360deg) translateX(clamp(38px, 6vw, 52px)) rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .ax *, .ax { animation: none !important; } .ax-box { background: #3de39a; color: #06361f; border-color: #3de39a; } .ax-cite em { transform: none; } } /* Hero heading: optional smaller second line */ .hero h1 .h1-sub { display: block; margin-top: .55em; font-size: .4em; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: #7dd3fc; -webkit-text-fill-color: #7dd3fc; } /* Second heading line: warm yellow so it stands out from the blue background */ .hero h1 .h1-sub { color: #ffd166; -webkit-text-fill-color: #ffd166; font-weight: 600; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } /* Service overview: layered, animated and more polished */ .ov-sec { position: relative; overflow-x: clip; background: linear-gradient(180deg, #fff, #f6f8fd); } .ov-sec::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 53, 137, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 53, 137, .05) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(70% 70% at 30% 35%, #000, transparent 85%); mask-image: radial-gradient(70% 70% at 30% 35%, #000, transparent 85%); pointer-events: none; } .ov-sec > .container { position: relative; z-index: 1; } .ov-prose { position: relative; padding-left: 1.4rem; } .ov-prose::before { content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #0a3589, #f52549); } .ov-prose p:first-child { font-size: 1.08rem; color: #1d2740; } .ov-tools { margin-top: 1.8rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .5); position: relative; overflow: hidden; } .ov-tools::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0a3589, #f52549); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .3s; } .ov-tools.is-in::before { transform: none; } .ov-tools h3 { margin: 0 0 1rem; font: 700 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #f52549; } .ov-cta { position: relative; overflow: hidden; background: linear-gradient(160deg, #0b2a6b, #06163d 60%, #04112e); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 70px -40px rgba(0, 36, 107, .9), inset 0 1px 0 rgba(255, 255, 255, .15); } .ov-cta::before { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .5), transparent); animation: mv-drift 9s ease-in-out infinite alternate; pointer-events: none; } .ov-cta > :not(.particles) { position: relative; z-index: 1; } .ov-cta > .particles { z-index: 0; } .ov-live { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .9rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #dbe6ff; font: 600 .72rem var(--font-display); } .ov-live i { width: 8px; height: 8px; border-radius: 50%; background: #3de39a; animation: tl-ping 2s ease-out infinite; } .ov-del { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .5); } .ov-del-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(10, 53, 137, .1); } .ov-del-head h3 { margin: 0; } .ov-count { padding: .25rem .7rem; border-radius: 999px; background: #eef2fb; color: #0a3589; font: 600 .72rem var(--font-display); } .ov-del-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .ov-del-list li { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem .6rem; margin-inline: -.6rem; border-radius: 12px; font-size: .95rem; line-height: 1.4; color: #1d2740; opacity: 0; transform: translateX(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .3s; transition-delay: calc(var(--i) * .08s + .25s); } .ov-del.is-in .ov-del-list li { opacity: 1; transform: none; } .ov-del-list li:hover { background: #f1f5ff; transition-delay: 0s; } .ov-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: .05rem; border-radius: 50%; background: linear-gradient(135deg, #0a3589, #2f6bff); color: #fff; transition: background .3s, transform .3s var(--ease); } .ov-del-list li:hover .ov-tick { background: #f52549; transform: scale(1.12); } .ov-tick svg { width: 14px; height: 14px; } @media (prefers-reduced-motion: reduce) { .ov-del-list li { opacity: 1; transform: none; transition: none; } .ov-cta::before, .ov-live i { animation: none; } } /* Business problems: all cards in one row on desktop (up to four) */ @media (min-width: 1000px) { .prob-sec .problem-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } .prob-sec .problem { padding: 1.5rem 1.3rem 1.6rem; } .prob-sec .problem h3 { font-size: 1.1rem; } } /* Without / With cards */ .ww-sec { background: #fff; } .ww-grid { display: grid; gap: 1.4rem; margin-top: var(--space-lg); max-width: 1100px; margin-inline: auto; } @media (min-width: 800px) { .ww-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ww-card { position: relative; padding: 2rem 1.9rem 2.1rem; border-radius: 24px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; } .ww-card:hover { transform: translateY(-6px); } .ww-card h3 { margin: 0 0 1.3rem; font-size: 1.35rem; } .ww-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; } .ww-card li { display: flex; align-items: flex-start; gap: .8rem; font-size: 1rem; line-height: 1.45; opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .09s + .25s); } .ww-card.is-in li { opacity: 1; transform: none; } .ww-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; } .ww-ic svg { width: 14px; height: 14px; } .ww-card--no { background: linear-gradient(180deg, #fff1ed, #ffe9e4); border: 1px solid rgba(245, 37, 73, .12); color: #5b4a52; box-shadow: 0 30px 50px -40px rgba(245, 37, 73, .5); } .ww-card--no h3 { color: #f0506a; } .ww-card--no .ww-ic { background: rgba(245, 37, 73, .12); color: #f52549; } .ww-card--yes { background: linear-gradient(180deg, #f2f6ff, #e9f0ff); border: 1px solid rgba(10, 53, 137, .12); color: #1d2740; box-shadow: 0 30px 50px -40px rgba(10, 53, 137, .6); } .ww-card--yes h3 { color: #0a3589; } .ww-card--yes .ww-ic { background: #1fbf75; color: #fff; } .ww-card--yes:hover { box-shadow: 0 40px 60px -34px rgba(10, 53, 137, .7); } .ww-card--no li { text-decoration: none; } /* Two cards with mock-ups */ .duo-sec { position: relative; overflow-x: clip; background: linear-gradient(180deg, #f6f8fd, #fff); } .duo-sec > .container { position: relative; z-index: 1; } .duo-grid { display: grid; gap: 1.4rem; margin-top: var(--space-lg); max-width: 1180px; margin-inline: auto; } @media (min-width: 900px) { .duo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .duo-card { display: flex; flex-direction: column; padding: 2rem 1.9rem 1.8rem; border-radius: 24px; background: #fff; border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 30px 56px -40px rgba(10, 53, 137, .55); transition: transform .45s var(--ease), box-shadow .45s; } .duo-card:hover { transform: translateY(-6px); box-shadow: 0 40px 66px -38px rgba(10, 53, 137, .65); } .duo-card h3 { margin: 0 0 .5rem; font-size: 1.4rem; color: var(--color-dark); } .duo-card p { margin: 0 0 1.4rem; color: #5d667f; } .duo-art { margin-top: auto; padding: 1.2rem; border-radius: 18px; background: linear-gradient(135deg, #eef3ff, #fdf0f3); min-height: 260px; display: grid; align-items: center; } .dm-serp { position: relative; max-width: 420px; margin-inline: auto; width: 100%; padding-bottom: 1.6rem; } .dm-win { display: flex; gap: 5px; padding: .5rem .7rem; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid #e0e6f4; border-bottom: 0; } .dm-win i { width: 7px; height: 7px; border-radius: 50%; background: #d3dbee; } .dm-win i:first-child { background: #f52549; } .dm-body { display: grid; gap: .6rem; padding: .8rem; border-radius: 0 0 10px 10px; background: #fff; border: 1px solid #e0e6f4; box-shadow: 0 18px 30px -22px rgba(10, 53, 137, .4); } .dm-res { position: relative; display: grid; gap: 4px; padding: .5rem .6rem; border-radius: 8px; } .dm-res u { display: block; height: 5px; width: 36%; border-radius: 4px; background: #c7d1e8; text-decoration: none; } .dm-res b { display: block; height: 7px; width: 70%; border-radius: 5px; background: #6a8fe0; } .dm-res s { display: block; height: 5px; width: 90%; border-radius: 4px; background: #dfe5f3; text-decoration: none; } .dm-res--you { background: #f2f6ff; border: 1px solid rgba(10, 53, 137, .25); box-shadow: 0 10px 22px -14px rgba(10, 53, 137, .6); animation: dm-rise 7s ease-in-out infinite; } .dm-res--you b { background: #0a3589; } .dm-res em { position: absolute; right: .5rem; top: .4rem; display: inline-flex; align-items: center; gap: 2px; padding: .1rem .45rem; border-radius: 999px; background: #3de39a; color: #06361f; font: 700 .62rem var(--font-display); font-style: normal; } .dm-res em svg { width: 11px; height: 11px; } .dm-search { position: absolute; left: 6%; right: 6%; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; background: #fff; box-shadow: 0 14px 26px -12px rgba(10, 53, 137, .5); color: #3b4560; font: 500 .8rem var(--font-body); } .dm-search svg { width: 14px; height: 14px; color: #0a3589; } .dm-chat { max-width: 440px; margin-inline: auto; width: 100%; display: grid; gap: .7rem; } .dm-user { justify-self: end; max-width: 78%; padding: .6rem .85rem; border-radius: 14px 14px 4px 14px; background: #fff; box-shadow: 0 10px 20px -14px rgba(10, 53, 137, .5); font: 500 .78rem var(--font-body); color: #1d2740; animation: dm-pop 8s ease-in-out infinite; } .dm-bot { padding: .85rem 1rem; border-radius: 14px 14px 14px 4px; background: #f6f9ff; border: 1px solid #dfe7fa; box-shadow: 0 14px 26px -18px rgba(10, 53, 137, .55); font: 400 .8rem/1.5 var(--font-body); color: #1d2740; animation: dm-pop 8s ease-in-out .6s infinite; } .dm-bot p { margin: 0 0 .35rem; } .dm-bot ul { margin: 0 0 .35rem; padding-left: 1.1rem; } .dm-bot .dm-end { margin: 0; } .dm-dots { display: flex; gap: .45rem; justify-self: end; } .dm-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 6px 12px -6px rgba(10, 53, 137, .6); } .dm-dots i:nth-child(1) { background: #1d2740; } .dm-dots i:nth-child(2) { background: linear-gradient(135deg, #2f6bff, #7b6cff); } .dm-dots i:nth-child(3) { background: linear-gradient(135deg, #ff8a5c, #f52549); } .dm-dots i:nth-child(4) { background: linear-gradient(135deg, #3de39a, #2f6bff); } @keyframes dm-rise { 0%, 30% { transform: translateY(30px); opacity: .55; } 55%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(30px); opacity: .55; } } @keyframes dm-pop { 0% { opacity: 0; transform: translateY(10px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ww-card li { opacity: 1; transform: none; transition: none; } .dm-res--you, .dm-user, .dm-bot { animation: none; } } /* AI assistant logos in the chat mock-up */ .dm-dots { gap: .5rem; align-items: center; } .dm-ai { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 8px 16px -8px rgba(10, 53, 137, .5); transition: transform .3s var(--ease); } .dm-ai:hover { transform: translateY(-4px) scale(1.08); } .dm-ai i { display: block; width: 18px; height: 18px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .dm-ai img { display: block; width: 18px; height: 18px; } .dm-ai--gpt i { background: #10a37f; } .dm-ai--gem i { background: linear-gradient(135deg, #4285f4, #9b72cb 55%, #d96570); } .dm-ai--cla i { background: #d97757; } .dm-dots .dm-ai { animation: dm-bob 4s ease-in-out infinite; } .dm-dots .dm-ai:nth-child(2) { animation-delay: .25s; } .dm-dots .dm-ai:nth-child(3) { animation-delay: .5s; } .dm-dots .dm-ai:nth-child(4) { animation-delay: .75s; } @keyframes dm-bob { 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .dm-dots .dm-ai { animation: none; } } .dm-dots .dm-ai i { width: 18px; height: 18px; border: 0; border-radius: 0; box-shadow: none; } .dm-dots .dm-ai--gpt i { background: #10a37f; } .dm-dots .dm-ai--gem i { background: linear-gradient(135deg, #4285f4, #9b72cb 55%, #d96570); } .dm-dots .dm-ai--cla i { background: #d97757; } /* Client results (dark) */ .cr-sec { position: relative; overflow-x: clip; color: #fff; background: radial-gradient(60% 50% at 80% 0%, rgba(10, 53, 137, .6), transparent 70%), #050f28; } .cr-sec::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%); pointer-events: none; } .cr-glow { position: absolute; border-radius: 50%; pointer-events: none; animation: mv-drift 12s ease-in-out infinite alternate; } .cr-glow--b { width: 460px; height: 460px; left: -140px; top: 20%; background: radial-gradient(closest-side, rgba(47, 107, 255, .3), transparent); } .cr-glow--p { width: 420px; height: 420px; right: -120px; bottom: -80px; background: radial-gradient(closest-side, rgba(245, 37, 73, .25), transparent); animation-delay: -5s; } .cr-sec > .container { position: relative; z-index: 1; } .cr-sec .section-heading h2 { color: #fff; } .cr-sec .section-heading .lead { color: #b8c6e6; } .cr-sec .vt-grad { background-image: linear-gradient(90deg, #8fb8ff, #ff8fa6); } .cr-grid { display: grid; gap: 1.2rem; margin-top: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: 1180px; margin-inline: auto; } .cr-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.4rem 1.6rem; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; overflow: hidden; } .cr-card::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, #2f6bff, #f52549); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .cr-card:hover { transform: translateY(-6px); border-color: rgba(120, 170, 255, .45); box-shadow: 0 30px 56px -34px rgba(47, 107, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .14); } .cr-card:hover::after { transform: none; } .cr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .cr-top h3 { margin: 0 0 .55rem; font-size: 1.15rem; color: #fff; } .cr-tag { display: inline-block; padding: .22rem .7rem; border-radius: 999px; background: rgba(123, 108, 255, .2); border: 1px solid rgba(167, 155, 255, .35); color: #c9c2ff; font: 600 .72rem var(--font-body); } .cr-fig { text-align: right; flex: none; } .cr-fig strong { display: block; font: 700 1.9rem/1.1 var(--font-display); background-image: linear-gradient(90deg, #8fb8ff, #ff8fa6); -webkit-background-clip: text; background-clip: text; color: transparent; } .cr-fig span { font-size: .78rem; color: #9fb2d8; } .cr-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 8px; background: rgba(31, 191, 117, .14); border: 1px solid rgba(61, 227, 154, .3); color: #6df0b5; font: 600 .74rem var(--font-body); } .cr-badge i { width: 6px; height: 6px; border-radius: 50%; background: #3de39a; } .cr-card p { margin: 0; color: #a9b8d8; font-size: .92rem; line-height: 1.55; } @media (prefers-reduced-motion: reduce) { .cr-glow { animation: none; } .cr-card, .cr-card::after { transition: none; } } .cr-note { max-width: 760px; margin: 0 auto 1.2rem; padding: .6rem .9rem; border-radius: 10px; background: rgba(255, 209, 102, .12); border: 1px dashed rgba(255, 209, 102, .55); color: #ffd166; font-size: .82rem; text-align: center; } .cr-fig strong span { font-size: inherit; color: inherit; } .cr-fig > span { font-size: .78rem; color: #9fb2d8; } /* Overview tools: sliding row of logo tiles */ .ov-marq { overflow: hidden; margin-inline: -.3rem; padding: .3rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .ov-track { list-style: none; margin: 0; padding: 0; display: flex; gap: .8rem; width: max-content; animation: ss-left var(--dur, 40s) linear infinite; } .ov-marq:hover .ov-track { animation-play-state: paused; } .ov-track li { flex: none; width: 124px; } .ov-track .tk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; width: 100%; min-height: 100px; padding: .8rem .5rem; border-radius: 14px; background: #f6f8fd; border: 1px solid transparent; box-shadow: none; white-space: normal; text-align: center; } .ov-track .tk:hover { background: #fff; transform: translateY(-5px); border-color: var(--c, #0a3589); box-shadow: 0 16px 28px -16px var(--c, #0a3589); } .ov-track .tk i { width: 34px; height: 34px; } .ov-track .tk b { font: 600 .78rem/1.25 var(--font-display); color: #3b4560; } .ov-track .tk .tk-initial { width: 34px; height: 34px; font-size: 1rem; } @media (prefers-reduced-motion: reduce) { .ov-marq { overflow-x: auto; } .ov-track { animation: none; } .ov-track li[aria-hidden] { display: none; } } /* Keep the sliding tools row inside its column */ .svc-layout > * { min-width: 0; } .ov-tools { min-width: 0; max-width: 100%; } .ov-marq { max-width: 100%; } /* Tools with their own colour logo files (PNG): shown as-is, not as a one-colour mask */ .tk--img img { display: block; width: auto; height: 34px; max-width: 84px; object-fit: contain; transition: transform .4s var(--ease); } .tk--img:hover img { transform: scale(1.12); } /* FAQ side illustration (AI SEO): assistants orbiting the brand mark */ .fa { position: relative; width: min(100%, 400px); aspect-ratio: 1.1; margin-top: 2rem; } .fa-glow { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 107, 255, .28), rgba(245, 37, 73, .1) 60%, transparent); animation: aa-breathe 5s ease-in-out infinite; } .fa-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(10, 53, 137, .25); transform: translate(-50%, -50%); } .fa-ring--1 { width: 56%; aspect-ratio: 1; } .fa-ring--2 { width: 84%; aspect-ratio: 1; border-color: rgba(245, 37, 73, .22); } .fa-core { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 28%; background: #fff; box-shadow: 0 18px 40px -14px rgba(10, 53, 137, .55), 0 0 0 6px rgba(47, 107, 255, .1); animation: aa-breathe 4s ease-in-out infinite; } .fa-core img { width: 62%; height: auto; } .fa-orbit { position: absolute; left: 50%; top: 50%; width: 84%; aspect-ratio: 1; margin: calc(-42% * 1) 0 0 -42%; animation: aa-spin 22s linear infinite; } .fa-ai { position: absolute; width: 14%; aspect-ratio: 1; } .fa-ai--1 { left: 50%; top: 0; margin: -7% 0 0 -7%; } .fa-ai--2 { right: 0; top: 50%; margin: -7% -7% 0 0; } .fa-ai--3 { left: 50%; bottom: 0; margin: 0 0 -7% -7%; } .fa-ai--4 { left: 0; top: 50%; margin: -7% 0 0 -7%; } .fa-ai-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 10px 20px -8px rgba(10, 53, 137, .55); animation: aa-spin 22s linear infinite reverse; } .fa-ai-in i { display: block; width: 52%; height: 52%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .fa-ai-in img { width: 52%; height: 52%; display: block; } .fa-q, .fa-a { position: absolute; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 14px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 14px 26px -14px rgba(10, 53, 137, .55); font: 500 .74rem var(--font-body); color: #1d2740; white-space: nowrap; } .fa-q { left: -2%; top: 2%; border-radius: 14px 14px 14px 3px; animation: aa-chipfloat 5s ease-in-out infinite; } .fa-a { right: -2%; bottom: 4%; border-radius: 14px 14px 3px 14px; animation: aa-chipfloat 5.5s ease-in-out -2s infinite; } .fa-typing { display: inline-flex; gap: 3px; } .fa-typing b { width: 5px; height: 5px; border-radius: 50%; background: #6a8fe0; animation: cnt-dot 1.2s ease-in-out infinite; } .fa-typing b:nth-child(2) { animation-delay: .15s; } .fa-typing b:nth-child(3) { animation-delay: .3s; } .fa-cite { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; background: #6ea0ff; color: #06163d; font: 700 .62rem var(--font-display); } .fa-a em { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #3de39a; color: #06361f; font-style: normal; } .fa-a em svg { width: 11px; height: 11px; } @media (max-width: 959px) { .fa { margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .fa *, .fa { animation: none !important; } } /* Social Media Management hero illustration */ .svc-visual--art svg { width: auto; } .sm { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .sm-cal { left: 0; top: 4%; width: 42%; padding: .75rem .8rem .85rem; animation: aa-chipfloat 6.5s ease-in-out infinite; } .sm-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; color: #fff; } .sm-cal-head b { font: 600 .74rem var(--font-display); } .sm-cal-head span { width: 22px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .3); } .sm-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: .3rem; } .sm-days i { text-align: center; font: 600 .56rem var(--font-body); font-style: normal; color: #9fb2d8; } .sm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .sm-cell { aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); animation: sm-fill 8s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); } .sm-cell--0 { --c: #2f6bff; } .sm-cell--1 { --c: #f52549; } .sm-cell--2 { --c: #7b6cff; } .sm-cell--3 { --c: #3de39a; } .sm-post { right: 0; top: 0; width: 56%; padding: .8rem .85rem 1rem; animation: aa-chipfloat 6s ease-in-out -2s infinite; } .sm-user { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; } .sm-av { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff url('') center / 70% no-repeat; border: 2px solid #f52549; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); } .sm-name { display: grid; gap: 4px; flex: 1; } .sm-name b { display: block; height: 6px; width: 60%; border-radius: 4px; background: rgba(255, 255, 255, .6); } .sm-name u { display: block; height: 5px; width: 38%; border-radius: 4px; background: rgba(255, 255, 255, .25); text-decoration: none; } .sm-follow { padding: .18rem .6rem; border-radius: 999px; background: #0a3589; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font: 600 .6rem var(--font-display); } .sm-img { position: relative; aspect-ratio: 1.45; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #4b7bff, #f27a9a 78%, #ffb37a); } .sm-sun { position: absolute; right: 18%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff4c4; box-shadow: 0 0 26px 8px rgba(255, 244, 196, .55); animation: aa-breathe 4s ease-in-out infinite; } .sm-hill { position: absolute; bottom: -22%; border-radius: 50%; } .sm-hill--1 { left: -10%; width: 70%; aspect-ratio: 1.6; background: #17306d; } .sm-hill--2 { right: -14%; width: 74%; aspect-ratio: 1.5; background: #0c1f4f; } .sm-actions { display: flex; align-items: center; gap: .7rem; margin-top: .65rem; color: #fff; } .sm-act svg { width: 20px; height: 20px; } .sm-act--like { color: #ff5c78; animation: sm-like 3.6s ease-in-out infinite; } .sm-count { margin-left: auto; font: 500 .66rem var(--font-body); color: #cfdcf7; } .sm-count i { font: 700 .74rem var(--font-display); font-style: normal; color: #fff; } .sm-cap { display: grid; gap: 5px; margin-top: .55rem; } .sm-cap i { display: block; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .26); } .sm-cap i:last-child { width: 62%; background: rgba(255, 255, 255, .16); } .sm-heart { position: absolute; color: #ff5c78; opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 92, 120, .7)); animation: sm-rise 5s ease-out infinite; } .sm-heart svg { fill: currentColor; } .sm-heart--1 { right: 14%; top: 34%; } .sm-heart--2 { right: 26%; top: 36%; animation-delay: 1.6s; } .sm-heart--3 { right: 6%; top: 38%; animation-delay: 3.1s; } .sm-eng { left: 8%; bottom: 8%; display: flex; align-items: center; gap: .8rem; padding: .6rem .85rem; border-radius: 14px; color: #fff; font: 600 .74rem var(--font-display); animation: aa-chipfloat 5s ease-in-out -1s infinite; } .sm-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; } .sm-bars i { display: block; width: 7px; border-radius: 3px; background: linear-gradient(180deg, #8fb8ff, #2f6bff); transform-origin: bottom; animation: cs-bar 5s ease-in-out infinite; } .sm-bars i:nth-child(1) { height: 36%; } .sm-bars i:nth-child(2) { height: 56%; animation-delay: .15s; } .sm-bars i:nth-child(3) { height: 48%; animation-delay: .3s; } .sm-bars i:nth-child(4) { height: 78%; animation-delay: .45s; } .sm-bars i:nth-child(5) { height: 100%; animation-delay: .6s; } .sm-p { width: 44px; height: 44px; } .sm-p svg { position: static; width: 22px; height: 22px; } .sm-p--fb { right: 4%; bottom: 14%; background: linear-gradient(135deg, #1877f2, #4f9bff); } .sm-p--ig { right: 24%; bottom: 2%; background: linear-gradient(135deg, #f52549, #ff9b4a); animation-delay: -2s; } .sm-p--in { left: 0; top: 50%; background: linear-gradient(135deg, #0a66c2, #3b8fe0); animation-delay: -3.5s; } @keyframes sm-fill { 0%, 8% { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); } 18%, 84% { background: var(--c, #2f6bff); border-color: transparent; box-shadow: 0 6px 12px -6px var(--c, #2f6bff); } 94%, 100% { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); box-shadow: none; } } @keyframes sm-like { 0%, 35%, 100% { transform: scale(1); } 42% { transform: scale(1.5); } 52% { transform: scale(.95); } 60% { transform: scale(1.15); } } @keyframes sm-rise { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) translateX(-14px) scale(1.25); } } @media (prefers-reduced-motion: reduce) { .sm *, .sm { animation: none !important; } .sm-cell { background: var(--c, #2f6bff); } .sm-heart { display: none; } } /* Feature bands: header band with title and icon, text body */ .bd-sec { background: #f6f7fb; position: relative; overflow-x: clip; } .bd-grid { display: grid; gap: 1.4rem; margin-top: var(--space-lg); max-width: 1180px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .bd-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .5); transition: transform .45s var(--ease), box-shadow .45s; } .bd-card:hover { transform: translateY(-7px); box-shadow: 0 34px 56px -30px rgba(10, 53, 137, .6); } .bd-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 86px; padding: 1.1rem 1.3rem; background: #0a3589; color: #fff; position: relative; overflow: hidden; transition: background .4s; } .bd-head::after { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); animation: aa-breathe 5s ease-in-out infinite; pointer-events: none; } .bd-card:hover .bd-head { background: #f52549; } .bd-head h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; color: #fff; position: relative; z-index: 1; } .bd-ico { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); transition: transform .45s var(--ease), background .4s; } .bd-ico svg { width: 28px; height: 28px; } .bd-card:hover .bd-ico { transform: rotate(-8deg) scale(1.1); background: rgba(255, 255, 255, .22); } .bd-card p { margin: 0; padding: 1.2rem 1.3rem 1.5rem; color: #4b5671; font-size: .97rem; line-height: 1.6; flex: 1; background: linear-gradient(180deg, #f7f9ff, #fff); } @media (prefers-reduced-motion: reduce) { .bd-head::after { animation: none; } .bd-card, .bd-ico { transition: none; } } /* Tools slider: logos only */ .ov-tools--logos .ov-track li { width: 92px; } .ov-tools--logos .ov-track .tk { min-height: 84px; padding: .8rem; justify-content: center; } .ov-tools--logos .ov-track .tk b { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ov-tools--logos .ov-track .tk i { width: 40px; height: 40px; } .ov-tools--logos .ov-track .tk .tk-initial { width: 40px; height: 40px; } .ov-tools--logos .ov-track .tk--img img { height: 40px; max-width: 70px; } /* Benefits: professional cards */ .bn-sec { position: relative; overflow-x: clip; background: linear-gradient(180deg, #f6f8fd, #fff); } .bn-sec > .container { position: relative; z-index: 1; } .bn-grid { display: grid; gap: 1.3rem; margin-top: var(--space-lg); max-width: 1120px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } @media (min-width: 900px) { .bn-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } } .bn-card { position: relative; overflow: hidden; padding: 2rem 1.6rem 1.9rem; border-radius: 22px; background: #fff; border: 1px solid rgba(10, 53, 137, .08); box-shadow: 0 26px 46px -36px rgba(10, 53, 137, .55); transition: transform .45s var(--ease), box-shadow .45s, border-color .45s; } .bn-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: #f52549; transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease), background .4s; } .bn-card::after { content: ""; position: absolute; right: -50px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 107, 255, .12), transparent); transition: transform .6s var(--ease); pointer-events: none; } .bn-card:hover { transform: translateY(-8px); border-color: rgba(245, 37, 73, .3); box-shadow: 0 36px 60px -32px rgba(10, 53, 137, .6); } .bn-card:hover::before { transform: none; background: #0a3589; } .bn-card:hover::after { transform: scale(1.4); } .bn-num { position: absolute; right: 1.2rem; top: .8rem; font: 700 3.4rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(10, 53, 137, .12); pointer-events: none; } .bn-ico { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.3rem; border-radius: 16px; color: #fff; background: #0a3589; box-shadow: 0 16px 28px -14px rgba(10, 53, 137, .7); transition: background .4s, transform .45s var(--ease); } .bn-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 1.5px solid rgba(47, 107, 255, .3); animation: mv-ring 3.2s ease-out infinite; } .bn-card:hover .bn-ico { background: #f52549; transform: rotate(-6deg) scale(1.08); } .bn-card h3 { position: relative; margin: 0 0 .55rem; font-size: 1.2rem; color: var(--color-dark); } .bn-card p { position: relative; margin: 0; color: #5d667f; font-size: .97rem; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .bn-ico::after { animation: none; } .bn-card, .bn-ico { transition: none; } } /* ---- Process wheel ---- */ .wh-sec { position: relative; overflow-x: clip; background: #fff; } .wh-sec > .container { position: relative; z-index: 1; } .wh { display: grid; gap: 2rem; align-items: center; margin-top: var(--space-lg); max-width: 1180px; margin-inline: auto; } @media (min-width: 960px) { .wh { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 3rem; } } .wh-wheel { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; } .wh-ring { position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(10, 53, 137, .3); animation: aa-spin 40s linear infinite; } .wh-hub { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: .4rem; text-align: center; padding: 1rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #1d4cb5, #0a3589 70%); color: #fff; box-shadow: 0 0 0 10px rgba(47, 107, 255, .1), 0 30px 50px -24px rgba(10, 53, 137, .8); } .wh-hub b { font: 700 clamp(.85rem, .6rem + .9vw, 1.25rem)/1.2 var(--font-display); } .wh-cursor { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); animation: aa-breathe 3s ease-in-out infinite; } .wh-node { position: absolute; width: 19%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: 2px; padding: 4px; border-radius: 50%; background: #fff; border: 4px solid #1d2a4f; color: #1d2a4f; cursor: pointer; font-family: var(--font-display); transition: transform .4s var(--ease), border-color .3s, box-shadow .3s, background .3s; } .wh-node:hover, .wh-node:focus-visible { transform: translate(-50%, -50%) scale(1.1); } .wh-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d5e3ff; font: 700 .72rem var(--font-display); color: #0a3589; transition: background .3s, color .3s; } .wh-t { font: 700 clamp(.5rem, .4rem + .35vw, .72rem)/1.15 var(--font-display); text-align: center; } .wh-node.is-active { border-color: #f52549; background: #fff4f6; box-shadow: 0 0 0 7px rgba(245, 37, 73, .14), 0 20px 34px -14px rgba(245, 37, 73, .6); transform: translate(-50%, -50%) scale(1.14); z-index: 2; } .wh-node.is-active .wh-n { background: #f52549; color: #fff; } @media (max-width: 560px) { .wh-t { display: none; } .wh-node { border-width: 3px; } .wh-n { width: 26px; height: 26px; } } .wh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .wh-item { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 1rem; border-radius: 16px; cursor: pointer; opacity: .6; border: 1px solid transparent; transition: opacity .35s, background .35s, border-color .35s, box-shadow .35s; } .wh-item:hover { opacity: .9; } .wh-item.is-active { opacity: 1; background: #f4f7ff; border-color: rgba(10, 53, 137, .12); box-shadow: 0 20px 36px -28px rgba(10, 53, 137, .6); } .wh-check { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3e9f6; color: #0a3589; transition: background .35s, color .35s; } .wh-item.is-active .wh-check { background: #f52549; color: #fff; } .wh-item h3 { margin: 0; font-size: 1.08rem; color: var(--color-dark); } .wh-item p { margin: .3rem 0 0; color: #5d667f; font-size: .92rem; line-height: 1.5; } .wh-item.is-active p { color: #3d4764; } @media (prefers-reduced-motion: reduce) { .wh-ring, .wh-cursor { animation: none; } .wh-item p { transition: none; } } /* ---- Funnel ---- */ .fn-sec { background: linear-gradient(180deg, #f6f8fd, #fff); } .fn { --step: .45s; max-width: 1080px; margin: var(--space-lg) auto 0; display: grid; gap: .55rem; } .fn-head { display: none; } .fn-row { display: grid; gap: .5rem; align-items: center; } .fn-group { min-height: 0; } .fn-group span { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #0a3589; color: #fff; font: 700 .72rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .fn-bar-wrap { display: flex; justify-content: center; } .fn-bar { width: var(--w, 100%); min-height: 62px; display: grid; place-items: center; padding-inline: 2rem; color: #fff; font: 700 1.05rem var(--font-display); clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%); transform: scaleX(.7); opacity: 0; transition: transform .7s var(--ease), opacity .6s, filter .3s; transition-delay: calc(var(--i) * var(--step)); } .fn.is-in .fn-bar { transform: none; opacity: 1; } .fn:not(.is-in) .fn-bar { transition-duration: 0s; transition-delay: 0s; } .fn-row:hover .fn-bar { filter: brightness(1.12); } .fn-bar--0 { background: #2f6bff; } .fn-bar--1 { background: #5a5fe0; } .fn-bar--2 { background: #8a58d6; } .fn-bar--3 { background: #d6478f; } .fn-bar--4 { background: #f52549; } .fn-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .fn-tags li { padding: .32rem .75rem; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 53, 137, .14); color: #1d2a4f; font: 600 .8rem var(--font-body); box-shadow: 0 8px 16px -12px rgba(10, 53, 137, .5); opacity: 0; transform: translateX(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * var(--step) + .3s); } .fn.is-in .fn-tags li { opacity: 1; transform: none; } @media (min-width: 900px) { .fn-head { display: grid; grid-template-columns: 150px minmax(0, 1fr) 280px; gap: 1.5rem; padding-bottom: .5rem; font: 700 .78rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #f52549; } .fn-head span:last-child { text-align: left; } .fn-head span:first-child { grid-column: 1 / 3; text-align: left; } .fn-row { grid-template-columns: 150px minmax(0, 1fr) 280px; gap: 1.5rem; } .fn-tags { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .fn-bar, .fn-tags li { opacity: 1; transform: none; transition: none; } } /* ---- Why choose us (split) ---- */ .ch-sec { background: #fff; position: relative; overflow-x: clip; } .ch-grid { display: grid; gap: 2.2rem; align-items: center; max-width: 1180px; } @media (min-width: 960px) { .ch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } } .ch-copy h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.1; } .ch-copy .lead { max-width: 52ch; margin-bottom: 1.4rem; } .ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .ch-list li { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; border-radius: 14px; background: #f6f8fd; border: 1px solid rgba(10, 53, 137, .06); font-weight: 600; color: #1d2740; transition: transform .35s var(--ease), background .35s, box-shadow .35s; } .ch-list li:hover { transform: translateX(6px); background: #fff; box-shadow: 0 16px 28px -20px rgba(10, 53, 137, .6); } .ch-tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0a3589; color: #fff; transition: background .3s; } .ch-list li:hover .ch-tick { background: #f52549; } .ch-art { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1.08; margin-inline: auto; } .ch-blob { position: absolute; inset: 6% 2% 4% 8%; border-radius: 48% 52% 50% 50% / 52% 46% 54% 48%; background: linear-gradient(135deg, #e9efff, #fde7ec); animation: pf-morph 12s ease-in-out infinite; } .ch-dash { position: absolute; left: 8%; top: 12%; width: 84%; border-radius: 16px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 40px 70px -34px rgba(10, 53, 137, .6); overflow: hidden; animation: aa-chipfloat 6.5s ease-in-out infinite; } .ch-bar { display: flex; align-items: center; gap: 5px; padding: .6rem .8rem; background: #0a3589; } .ch-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); } .ch-bar i:first-child { background: #f52549; } .ch-bar em { flex: 1; height: 8px; margin-left: .5rem; border-radius: 6px; background: rgba(255, 255, 255, .2); } .ch-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .9rem; } .ch-kpi { display: flex; align-items: center; gap: .8rem; } .ch-ring { width: 54px; height: 54px; flex: none; } .ch-ring svg { display: block; width: 100%; height: 100%; } .ch-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ch-arc 7s ease-in-out infinite; } .ch-kpi-t { display: grid; gap: .45rem; flex: 1; } .ch-kpi-t b { font: 600 .78rem var(--font-display); color: #1d2740; } .ch-kpi-t i { display: block; height: 7px; width: 70%; border-radius: 5px; background: #dfe6f6; } .ch-chart { display: block; width: 100%; height: auto; overflow: visible; } .ch-chart rect { transform-box: fill-box; transform-origin: bottom; animation: cs-bar 7s ease-in-out infinite; } .ch-chart rect:nth-child(2) { animation-delay: .1s; } .ch-chart rect:nth-child(3) { animation-delay: .2s; } .ch-chart rect:nth-child(4) { animation-delay: .3s; } .ch-chart rect:nth-child(5) { animation-delay: .4s; } .ch-chart rect:nth-child(6) { animation-delay: .5s; } .ch-chart rect:nth-child(7) { animation-delay: .6s; } .ch-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cs-draw 7s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(10, 53, 137, .35)); } .ch-end { opacity: 0; animation: cs-dot 7s ease-in-out infinite; } .ch-coin { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #ffe28a, #f0a500 72%); color: #7a4d00; font: 700 1.3rem var(--font-display); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 16px 24px -10px rgba(0, 0, 0, .35); animation: aa-chipfloat 4.5s ease-in-out infinite; } .ch-coin--1 { left: 0; top: 24%; } .ch-coin--2 { right: 0; top: 6%; width: 38px; height: 38px; animation-delay: -1.8s; } .ch-coin--3 { right: 6%; bottom: 10%; width: 52px; height: 52px; animation-delay: -3s; } .ch-click { position: absolute; left: 14%; bottom: 8%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #f52549; color: #fff; box-shadow: 0 16px 26px -10px rgba(245, 37, 73, .7); animation: aa-chipfloat 5s ease-in-out -2s infinite; } .ch-chip { position: absolute; left: 36%; bottom: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 14px 26px -14px rgba(10, 53, 137, .5); font: 700 .78rem var(--font-display); color: #0a3589; } .ch-chip svg { width: 14px; height: 14px; color: #1fbf75; } @keyframes ch-arc { 0%, 8% { stroke-dashoffset: 1; } 40%, 90% { stroke-dashoffset: .28; } 100% { stroke-dashoffset: 1; } } @media (prefers-reduced-motion: reduce) { .ch-art *, .ch-art { animation: none !important; } .ch-line, .ch-arc { stroke-dashoffset: 0; } .ch-end { opacity: 1; } } /* Ad platforms panels */ .pl-sec { position: relative; } .pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; } .pl-card { --pc: #0a3589; position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.6rem 1.5rem; border-radius: 24px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .55); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; } .pl-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--pc); } .pl-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: var(--pc); opacity: .08; pointer-events: none; } .pl-card:hover { transform: translateY(-6px); box-shadow: 0 34px 54px -32px rgba(10, 53, 137, .6); } .pl-card--google { --pc: #4285f4; } .pl-card--meta { --pc: #0a7cff; } .pl-card--linkedin { --pc: #0a66c2; } .pl-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .8rem; position: relative; z-index: 1; } .pl-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 10px 20px -12px rgba(10, 53, 137, .5); color: var(--pc); flex: none; } .pl-head h3 { margin: 0; font-size: 1.3rem; color: var(--color-dark); } .pl-desc { margin: 0 0 1rem; color: #5d667f; line-height: 1.55; position: relative; z-index: 1; } .pl-points { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; position: relative; z-index: 1; } .pl-points li { display: flex; gap: .6rem; align-items: flex-start; color: var(--color-dark); font-size: .96rem; line-height: 1.4; } .pl-points li span { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f1f5ff; color: #f52549; margin-top: 1px; } .pl-best { margin: auto 0 0; padding: .6rem .9rem; border-radius: 12px; background: #f4f7ff; color: #0a3589; font-weight: 600; font-size: .9rem; position: relative; z-index: 1; } @media (max-width: 960px) { .pl-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .pl-card { transition: none; } .pl-card:hover { transform: none; } } /* Process wheel: compact vertical carousel for the step list */ .wh { --ih: 92px; } .wh-list { display: block; height: calc(var(--ih) * 3); overflow: hidden; position: relative; align-self: center; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); } .wh-track { display: block; transform: translateY(calc((1 - var(--cur, 0)) * var(--ih))); transition: transform .6s var(--ease); will-change: transform; } .wh-item { height: var(--ih); box-sizing: border-box; overflow: hidden; margin: 0; opacity: .35; align-items: center; } .wh-item.is-active { opacity: 1; } .wh-item p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 560px) { .wh { --ih: 112px; } .wh-item p { -webkit-line-clamp: 3; } } @media (prefers-reduced-motion: reduce) { .wh-track { transition: none; } } /* PPC page: flat, strictly alternating section backgrounds (no gradients bleeding between sections) */ .postid-50 .ov-sec, .postid-50 .wh-sec, .postid-50 .ch-sec, .postid-50 .faq-svc { background: #fff; background-image: none; } .postid-50 .pl-sec, .postid-50 .fn-sec, .postid-50 .ap-sec, .postid-50 .section--tint { background: #f3f6fc; background-image: none; } .postid-50 .cl-sec { background: #fff; background-image: none; } /* PPC hero illustration */ .pp { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .pp-search { left: 0; top: 8%; width: 70%; padding: .9rem 1rem 1rem; animation: aa-chipfloat 6.5s ease-in-out infinite; z-index: 2; } .pp-bar { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .82rem; margin-bottom: .75rem; } .pp-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid #fff; animation: pp-typing 7s steps(22) infinite; } .pp-type i { font-style: normal; } .pp-res { display: grid; gap: 5px; padding: .6rem .7rem; border-radius: 12px; margin-bottom: .45rem; position: relative; } .pp-res b, .pp-res u { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .22); text-decoration: none; } .pp-res b { width: 62%; height: 9px; background: rgba(255, 255, 255, .5); } .pp-res u { width: 92%; } .pp-res u.s { width: 70%; } .pp-res--ad { background: rgba(245, 37, 73, .14); border: 1px solid rgba(245, 37, 73, .45); animation: pp-hit 7s ease-in-out infinite; } .pp-tag { position: absolute; right: .6rem; top: .5rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: 1px 7px; border-radius: 6px; background: #f52549; color: #fff; } .pp-cursor { position: absolute; right: 14%; bottom: 8%; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #f52549; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6); animation: pp-click 7s ease-in-out infinite; } .pp-perf { right: 0; bottom: 6%; width: 74%; padding: .85rem 1rem .5rem; animation: aa-chipfloat 7s ease-in-out -2s infinite; } .pp-perf-h { display: flex; justify-content: space-between; align-items: baseline; color: #fff; font-size: .85rem; } .pp-perf-h span { font-size: .68rem; color: rgba(255, 255, 255, .6); } .pp-perf svg { display: block; width: 100%; margin-top: .4rem; overflow: visible; } .pp-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pp-draw 7s ease-in-out infinite; } .pp-area { opacity: 0; animation: pp-fade 7s ease-in-out infinite; } .pp-dot { opacity: 0; animation: pp-fade 7s ease-in-out infinite; } .pp-kpi { display: grid; gap: 2px; width: 31%; padding: .6rem .75rem; color: #fff; font-size: .7rem; } .pp-kpi b { font-size: 1.15rem; font-family: var(--font-display); } .pp-kpi i { height: 4px; border-radius: 3px; background: linear-gradient(90deg, #2fd3a3, transparent); } .pp-kpi--a { right: 0; top: 0; animation: aa-chipfloat 5.5s ease-in-out -1s infinite; } .pp-kpi--b { left: 0; bottom: 3%; animation: aa-chipfloat 6s ease-in-out -3s infinite; } .pp-kpi--b i { background: linear-gradient(90deg, #f52549, transparent); } .pp-coin { position: absolute; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #7a4b00; background: #ffd166; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .6); opacity: 0; animation: pp-coin 4.5s ease-in infinite; } .pp-coin--1 { left: 56%; top: 42%; } .pp-coin--2 { left: 66%; top: 46%; animation-delay: -1.5s; } .pp-coin--3 { left: 48%; top: 48%; animation-delay: -3s; } .pp-p { width: 40px; height: 40px; } .pp-p--g { right: 6%; top: 36%; background: #4285f4; } .pp-p--m { left: 4%; top: 46%; background: #0a7cff; animation-delay: -1.5s; } .pp-p--l { left: 44%; bottom: 0; background: #0a66c2; animation-delay: -3s; } @keyframes pp-typing { 0% { width: 0; } 30%, 88% { width: 100%; } 96%, 100% { width: 0; } } @keyframes pp-hit { 0%, 38% { box-shadow: none; transform: none; } 46% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(245, 37, 73, .25); } 56%, 100% { box-shadow: none; transform: none; } } @keyframes pp-click { 0%, 30% { transform: translate(60px, 50px) scale(1); opacity: 0; } 38% { opacity: 1; } 46% { transform: translate(-120px, -78px) scale(1); opacity: 1; } 49% { transform: translate(-120px, -78px) scale(.8); } 53% { transform: translate(-120px, -78px) scale(1); } 66%, 100% { transform: translate(-120px, -78px); opacity: 0; } } @keyframes pp-draw { 0%, 45% { stroke-dashoffset: 1; } 80%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes pp-fade { 0%, 50% { opacity: 0; } 80%, 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes pp-coin { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, 90px) scale(1); } } @media (max-width: 560px) { .pp-kpi { font-size: .62rem; } .pp-kpi b { font-size: 1rem; } .pp-cursor { display: none; } } @media (prefers-reduced-motion: reduce) { .pp, .pp * { animation: none !important; } .pp-type { width: 100%; border: 0; } .pp-line { stroke-dashoffset: 0; } .pp-area, .pp-dot { opacity: 1; } .pp-coin { display: none; } } /* Website Redesign hero illustration */ .wr { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .wr-win { left: 0; top: 6%; width: 82%; padding: .7rem .75rem .75rem; animation: aa-chipfloat 7s ease-in-out infinite; z-index: 1; } .wr-top { display: flex; align-items: center; gap: 5px; margin-bottom: .6rem; } .wr-top i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); } .wr-url { flex: 1; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .14); margin-left: 6px; } .wr-lbl { position: relative; width: 44px; height: 14px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .wr-lbl b { position: absolute; right: 0; top: 0; padding: 0 7px; border-radius: 7px; line-height: 14px; } .wr-lbl .o { background: #8a8f9f; color: #fff; animation: wr-lo 8s steps(1) infinite; } .wr-lbl .n { background: #f52549; color: #fff; animation: wr-ln 8s steps(1) infinite; } .wr-stage { position: relative; aspect-ratio: 1.45; border-radius: 10px; overflow: hidden; background: #fff; } .wr-old, .wr-new { position: absolute; inset: 0; padding: 8px; display: grid; gap: 6px; align-content: start; } .wr-old { background: #e9e4d6; } .o-banner { height: 22%; background: linear-gradient(90deg, #c0392b, #e6a23c); border-radius: 2px; } .o-row { display: flex; gap: 4px; } .o-row span { flex: 1; height: 8px; background: #8c7b5a; } .o-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; } .o-cols i { height: 34px; background: #b9b09a; border: 2px solid #7a6f55; } .o-text u { display: block; height: 4px; margin-bottom: 4px; background: #6d6a60; width: 96%; } .o-text u:nth-child(2) { width: 80%; } .o-text u:nth-child(3) { width: 90%; } .o-text u:nth-child(4) { width: 60%; } .wr-new { background: #f6f9ff; clip-path: inset(0 100% 0 0); animation: wr-wipe 8s var(--ease) infinite; } .n-nav { display: flex; align-items: center; gap: 6px; } .n-nav b { width: 22px; height: 8px; border-radius: 4px; background: #0a3589; margin-right: auto; } .n-nav span { width: 16px; height: 4px; border-radius: 3px; background: #c4cde3; } .n-nav em { width: 24px; height: 10px; border-radius: 5px; background: #f52549; } .n-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px; align-items: center; padding: 6px 0; } .n-copy u { display: block; height: 8px; border-radius: 4px; background: #0b1a3f; margin-bottom: 5px; } .n-copy u.s { width: 70%; background: #8a99c0; height: 5px; } .n-copy em { display: block; width: 36px; height: 11px; border-radius: 6px; background: #0a3589; margin-top: 7px; } .n-art { position: relative; height: 56px; } .n-art span { position: absolute; border-radius: 12px; } .n-art span:first-child { inset: 0 18px 0 0; background: linear-gradient(135deg, #0a3589, #2f6bff); } .n-art span:last-child { width: 38px; height: 38px; right: 0; bottom: -4px; background: #f52549; border-radius: 50%; opacity: .9; } .n-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .n-cards i { height: 36px; border-radius: 8px; background: #fff; box-shadow: 0 6px 12px -6px rgba(10, 53, 137, .4); border-top: 3px solid #2f6bff; } .n-cards i:nth-child(2) { border-color: #f52549; } .n-cards i:nth-child(3) { border-color: #2fd3a3; } .wr-line { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #f52549; box-shadow: 0 0 14px 2px rgba(245, 37, 73, .7); animation: wr-bar 8s var(--ease) infinite; } .wr-phone { right: 0; bottom: 14%; width: 25%; aspect-ratio: .55; padding: .5rem .45rem; display: grid; gap: 5px; align-content: start; background: rgba(255, 255, 255, .92); border-radius: 18px; animation: aa-chipfloat 6s ease-in-out -2s infinite; z-index: 2; } .wr-notch { justify-self: center; width: 30%; height: 4px; border-radius: 3px; background: #c4cde3; } .p-hero { height: 38px; border-radius: 8px; background: linear-gradient(135deg, #0a3589, #2f6bff); } .p-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .p-row i { height: 22px; border-radius: 6px; background: #e6ecfb; } .p-line { height: 4px; border-radius: 3px; background: #c4cde3; } .p-line.s { width: 60%; } .p-btn { height: 12px; border-radius: 7px; background: #f52549; animation: wr-pulse 2.4s ease-in-out infinite; } .wr-speed { left: 0; bottom: 4%; display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; color: #fff; font-size: .78rem; animation: aa-chipfloat 5.5s ease-in-out -1s infinite; } .wr-gauge { position: relative; width: 38px; height: 38px; display: grid; place-items: center; } .wr-gauge svg { position: absolute; inset: 0; } .wr-gauge b { font-family: var(--font-display); font-size: .95rem; } .wr-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wr-gauge 8s ease-in-out infinite; } .wr-keep { right: 4%; top: 0; display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; color: #fff; font-size: .78rem; font-weight: 700; animation: aa-chipfloat 6.2s ease-in-out -3s infinite; z-index: 2; } .wr-keep i { display: block; font-style: normal; font-weight: 500; font-size: .66rem; color: rgba(255, 255, 255, .65); } .wr-ok { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #2fd3a3; color: #04261c; flex: none; } .wr-b { width: 40px; height: 40px; } .wr-b--1 { right: 28%; bottom: 2%; background: #0a3589; } .wr-b--2 { left: 2%; top: 2%; background: #f52549; animation-delay: -2s; } @keyframes wr-wipe { 0%, 12% { clip-path: inset(0 100% 0 0); } 42%, 82% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 100% 0 0); } } @keyframes wr-bar { 0%, 12% { left: 0; opacity: 0; } 14% { opacity: 1; } 42% { left: calc(100% - 3px); opacity: 1; } 46%, 92% { left: calc(100% - 3px); opacity: 0; } 96%, 100% { left: 0; opacity: 0; } } @keyframes wr-lo { 0%, 27% { opacity: 1; } 28%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } } @keyframes wr-ln { 0%, 27% { opacity: 0; } 28%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes wr-gauge { 0%, 20% { stroke-dashoffset: .85; } 50%, 85% { stroke-dashoffset: .08; } 100% { stroke-dashoffset: .85; } } @keyframes wr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @media (max-width: 560px) { .wr-keep i { display: none; } .wr-speed span:first-child { display: none; } } @media (prefers-reduced-motion: reduce) { .wr, .wr * { animation: none !important; } .wr-new { clip-path: none; } .wr-line, .wr-lbl .o { display: none; } .wr-lbl .n { opacity: 1; } .wr-arc { stroke-dashoffset: .08; } } .wr-keep > span:last-child { line-height: 1.3; } .wr-keep { right: 0; top: -2%; } /* Roadmap: stage rail + one detail panel at a time (distinct from the vertical "Our approach" timeline) */ .rd { --p: 0; display: grid; gap: 1.6rem; } .rd-rail { position: relative; display: flex; justify-content: space-between; gap: .5rem; overflow-x: auto; padding: .4rem .2rem 1.2rem; scrollbar-width: none; } .rd-rail::-webkit-scrollbar { display: none; } .rd-track { position: absolute; left: 3.2rem; right: 3.2rem; top: calc(.4rem + 22px); height: 4px; border-radius: 4px; background: #dbe3f5; } .rd-track i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 4px; background: linear-gradient(90deg, #2f6bff, #f52549); transition: width .5s var(--ease); } .rd-tab { position: relative; flex: 1 0 96px; display: grid; justify-items: center; gap: .5rem; padding: 0 .2rem; border: 0; background: none; cursor: pointer; font: inherit; color: #5d667f; } .rd-dot { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 4px solid #dbe3f5; color: #0a3589; font-family: var(--font-display); font-weight: 700; transition: border-color .35s, background .35s, color .35s, transform .35s var(--ease), box-shadow .35s; } .rd-lab { font-size: .82rem; font-weight: 600; line-height: 1.25; text-align: center; max-width: 110px; transition: color .3s; } .rd-tab.is-done .rd-dot { border-color: #2f6bff; background: #2f6bff; color: #fff; } .rd-tab.is-active .rd-dot { border-color: #f52549; background: #f52549; color: #fff; transform: scale(1.14); box-shadow: 0 0 0 7px rgba(245, 37, 73, .15); } .rd-tab.is-active .rd-lab { color: var(--color-dark); } .rd-tab:hover .rd-dot { transform: scale(1.08); } .rd-stage { position: relative; border-radius: 26px; background: linear-gradient(135deg, #0a1f4d, #0a3589); color: #fff; padding: 2rem 2rem 2rem; box-shadow: 0 34px 60px -38px rgba(10, 53, 137, .9); overflow: hidden; } .rd-stage::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .35), transparent); pointer-events: none; } .rd-panel { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; position: relative; z-index: 1; } .rd-panel.is-active { animation: rd-in .5s var(--ease) both; } .rd-side { display: grid; justify-items: center; gap: .8rem; min-width: 120px; } .rd-big { font-family: var(--font-display); font-weight: 700; font-size: 4.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .55); } .rd-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: #f52549; color: #fff; box-shadow: 0 14px 24px -10px rgba(245, 37, 73, .7); } .rd-body h3 { margin: 0 0 .5rem; font-size: 1.45rem; color: #fff; } .rd-body p { margin: 0 0 1rem; color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.6; max-width: 56ch; } .rd-out { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(47, 211, 163, .16); color: #7ff0cd; font-weight: 700; font-size: .84rem; } .rd-nav { position: absolute; right: 1.4rem; bottom: 1.2rem; display: flex; gap: .5rem; z-index: 2; } .rd-nav button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .25s; } .rd-nav button:hover { background: #f52549; border-color: #f52549; } .rd-prev svg { transform: rotate(180deg); } @keyframes rd-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .rd-rail { justify-content: flex-start; } .rd-track { display: none; } .rd-stage { padding: 1.5rem 1.3rem 4.2rem; } .rd-panel { grid-template-columns: 1fr; gap: 1rem; } .rd-side { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; } .rd-big { font-size: 3rem; } } @media (prefers-reduced-motion: reduce) { .rd-panel.is-active { animation: none; } .rd-track i, .rd-dot { transition: none; } } .rd-panel[hidden] { display: none; } .rd-stage { min-height: 240px; display: grid; align-content: center; } @media (max-width: 760px) { .rd-stage { min-height: 300px; } } /* Service types: bento cards with animated art panels */ .ty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } .ty-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 26px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 24px 44px -34px rgba(10, 53, 137, .55); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; } .ty-card:hover { transform: translateY(-6px); box-shadow: 0 34px 54px -32px rgba(10, 53, 137, .6); } .ty-art { padding: 1.2rem 1.4rem .6rem; background: linear-gradient(135deg, var(--a, #0a3589), var(--b, #2f6bff)); } .ty-card--0 { --a: #0a3589; --b: #2f6bff; } .ty-card--1 { --a: #c4143a; --b: #f5526c; } .ty-card--2 { --a: #5b2fc9; --b: #8d6bff; } .ty-card--3 { --a: #0b7a5b; --b: #2fd3a3; } .ty-art svg { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; } .ty-body { position: relative; padding: 1.3rem 1.5rem 1.5rem; } .ty-n { position: absolute; right: 1.3rem; top: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(10, 53, 137, .18); } .ty-body h3 { margin: 0 0 .5rem; font-size: 1.25rem; color: var(--color-dark); padding-right: 3.5rem; } .ty-body p { margin: 0 0 1rem; color: #5d667f; line-height: 1.6; font-size: .96rem; } .ty-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; } .ty-tags li { padding: .28rem .75rem; border-radius: 999px; background: #f1f5ff; color: #0a3589; font-size: .8rem; font-weight: 600; } .ty-pulse { animation: ty-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .ty-drop { animation: ty-drop 4s ease-in-out infinite; } .ty-cart { animation: ty-bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .ty-bars rect { transform-box: fill-box; transform-origin: bottom; animation: ty-grow 3.6s var(--ease) infinite; } .ty-bars rect:nth-child(2) { animation-delay: .12s; } .ty-bars rect:nth-child(3) { animation-delay: .24s; } .ty-bars rect:nth-child(4) { animation-delay: .36s; } .ty-bars rect:nth-child(5) { animation-delay: .48s; } .ty-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ty-line 3.6s ease-in-out infinite; } .ty-ring { animation: ty-bob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .ty-ping { animation: ty-pulse 2.4s ease-in-out -.8s infinite; transform-box: fill-box; transform-origin: center; } .ty-wire { animation: ty-wire 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .ty-brush { animation: ty-bob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .ty-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ty-arc 3.6s ease-in-out infinite; } .ty-lens { animation: ty-bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes ty-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes ty-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes ty-drop { 0%, 30% { transform: translate(0, 0) scale(1); opacity: 1; } 70% { transform: translate(128px, 52px) scale(.5); opacity: .9; } 100% { transform: translate(128px, 52px) scale(0); opacity: 0; } } @keyframes ty-grow { 0% { transform: scaleY(.1); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.1); } } @keyframes ty-line { 0%, 15% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes ty-arc { 0%, 10% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: .28; } 100% { stroke-dashoffset: 1; } } @keyframes ty-wire { 0%, 100% { transform: scale(1); } 50% { transform: scale(.97); } } @media (max-width: 760px) { .ty-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ty-card, .ty-card * { animation: none !important; transition: none; } .ty-draw { stroke-dashoffset: 0; } .ty-arc { stroke-dashoffset: .28; } .ty-card:hover { transform: none; } } /* Industries: flip tiles */ .in-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .in-tile { --c: #2f6bff; position: relative; display: block; width: 100%; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; perspective: 900px; text-align: center; } .in-tile--1 { --c: #f52549; } .in-tile--2 { --c: #7a4bff; } .in-tile--3 { --c: #0fb58a; } .in-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s var(--ease), box-shadow .3s; } .in-front { background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 18px 32px -26px rgba(10, 53, 137, .55); } .in-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: background .3s, color .3s; } .in-name { font-weight: 700; font-size: .95rem; color: var(--color-dark); line-height: 1.25; } .in-back { background: linear-gradient(135deg, #0a1f4d, var(--c)); color: #fff; transform: rotateY(180deg); gap: .4rem; align-content: center; } .in-back b { font-family: var(--font-display); font-size: 1rem; } .in-back span { font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .88); } .in-tile.is-flipped .in-front, .in-tile:focus-visible .in-front { transform: rotateY(-180deg); } .in-tile.is-flipped .in-back, .in-tile:focus-visible .in-back { transform: rotateY(0); } @media (hover: hover) { .in-tile:hover .in-front { transform: rotateY(-180deg); } .in-tile:hover .in-back { transform: rotateY(0); } } @media (max-width: 960px) { .in-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .in-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .in-tile { height: 168px; } } @media (prefers-reduced-motion: reduce) { .in-face { transition: none; } } /* Why redesign: sticky gauge + expandable reasons */ .nd { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 2rem; align-items: start; } .nd-side { position: sticky; top: 110px; padding: 1.6rem 1.4rem; border-radius: 24px; background: linear-gradient(160deg, #0a1f4d, #0a3589); color: #fff; box-shadow: 0 30px 54px -36px rgba(10, 53, 137, .9); overflow: hidden; } .nd-side::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .35), transparent); pointer-events: none; } .nd-gauge svg { display: block; width: 100%; height: auto; overflow: visible; } .nd-needle { transform-origin: 100px 100px; animation: nd-sweep 6s var(--ease) infinite; } .nd-needle path { stroke: #fff; } .nd-needle circle { fill: #fff; } .nd-lbl { display: flex; justify-content: space-between; margin-top: .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .nd-bad { color: #ff8da1; } .nd-good { color: #7ff0cd; } .nd-cap { margin: 1.1rem 0 0; display: grid; gap: .3rem; position: relative; z-index: 1; } .nd-cap b { font-family: var(--font-display); font-size: 1.1rem; } .nd-cap span { color: rgba(255, 255, 255, .8); font-size: .92rem; line-height: 1.5; } .nd-list { display: grid; gap: .8rem; } .nd-item { border-radius: 18px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 18px 32px -28px rgba(10, 53, 137, .5); transition: border-color .3s, box-shadow .3s; } .nd-item[open] { border-color: rgba(245, 37, 73, .35); box-shadow: 0 26px 40px -28px rgba(10, 53, 137, .55); } .nd-item summary { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; } .nd-item summary::-webkit-details-marker { display: none; } .nd-num { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #f1f5ff; color: #0a3589; font-family: var(--font-display); font-weight: 700; transition: background .3s, color .3s; } .nd-item[open] .nd-num { background: #f52549; color: #fff; } .nd-head { flex: 1; display: grid; gap: .2rem; min-width: 0; } .nd-head b { font-family: var(--font-display); font-size: 1.08rem; color: var(--color-dark); } .nd-head em { display: inline-flex; align-items: center; gap: .35rem; font-style: normal; font-size: .84rem; color: #c4143a; } .nd-chev { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #f1f5ff; color: #0a3589; transition: transform .35s var(--ease), background .3s, color .3s; } .nd-item[open] .nd-chev { transform: rotate(45deg); background: #f52549; color: #fff; } .nd-item p { margin: 0; padding: 0 1.2rem 1.2rem calc(1.2rem + 40px + 1rem); color: #5d667f; line-height: 1.65; font-size: .96rem; } .nd-item[open] p { animation: nd-in .4s var(--ease) both; } @keyframes nd-sweep { 0%, 8% { transform: rotate(-70deg); } 50%, 85% { transform: rotate(62deg); } 100% { transform: rotate(-70deg); } } @keyframes nd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .nd { grid-template-columns: 1fr; } .nd-side { position: static; max-width: 380px; margin-inline: auto; width: 100%; } } @media (max-width: 560px) { .nd-item p { padding-left: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .nd-needle { animation: none; transform: rotate(62deg); } .nd-item[open] p { animation: none; } .nd-chev { transition: none; } } /* Website Redesign page: flat, strictly alternating section backgrounds */ .postid-52 .ov-sec, .postid-52 .ty-sec, .postid-52 .rd-sec, .postid-52 .section--tint, .postid-52 .cl-sec { background: #fff; background-image: none; } .postid-52 .nd-sec, .postid-52 .in-sec, .postid-52 .faq-svc { background: #f3f6fc; background-image: none; } /* WordPress Development hero illustration */ .wpd { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .wpd-ed { left: 0; top: 4%; width: 68%; padding: .7rem .75rem .8rem; animation: aa-chipfloat 7s ease-in-out infinite; } .wpd-top { display: flex; align-items: center; gap: 6px; margin-bottom: .6rem; } .wpd-logo { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #21759b; color: #fff; } .wpd-top i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); } .wpd-top em { margin-left: auto; font-style: normal; font-size: .62rem; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: #f52549; color: #fff; animation: wpd-pub 8s ease-in-out infinite; } .wpd-canvas { position: relative; display: grid; gap: 7px; padding: .7rem; border-radius: 10px; background: #fff; min-height: 168px; align-content: start; } .wpd-blk { opacity: 0; transform: translateY(8px); animation: wpd-build 8s var(--ease) infinite; border-radius: 6px; } .wpd-blk--h { animation-delay: 0s; } .wpd-blk--img { animation-delay: .7s; } .wpd-blk--p { animation-delay: 1.4s; } .wpd-blk--btn { animation-delay: 2.1s; } .wpd-blk u { display: block; height: 6px; border-radius: 3px; background: #c4cde3; margin-bottom: 5px; width: 94%; } .wpd-blk u.s { width: 62%; } .wpd-blk--h u { height: 11px; width: 66%; background: #0b1a3f; margin: 0; } .wpd-blk--img { position: relative; height: 50px; overflow: hidden; background: linear-gradient(135deg, #cfe0ff, #eaf1ff); } .wpd-sun { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #ffd166; right: 18px; top: 8px; } .wpd-hill { position: absolute; left: -10px; right: -10px; bottom: -20px; height: 44px; border-radius: 50%; background: #2f6bff; } .wpd-blk--btn b { display: block; width: 58px; height: 16px; border-radius: 8px; background: #0a3589; } .wpd-cursor { position: absolute; width: 2px; height: 14px; background: #f52549; right: 22%; top: 14px; animation: wpd-blink 1s steps(1) infinite; } .wpd-code { right: 0; top: 2%; width: 50%; padding: .6rem .75rem; animation: aa-chipfloat 6.4s ease-in-out -2s infinite; z-index: 2; background: rgba(6, 14, 34, .78); } .wpd-dots { display: flex; align-items: center; gap: 4px; margin-bottom: .45rem; } .wpd-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .wpd-dots span { margin-left: 6px; font-size: .62rem; color: rgba(255, 255, 255, .6); } .wpd-code pre { margin: 0; font: 600 .66rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfd8f3; white-space: pre; } .wpd-code .l { display: block; overflow: hidden; width: 0; white-space: nowrap; animation: wpd-type 8s steps(26) infinite; } .wpd-code .l2 { animation-delay: .8s; } .wpd-code .l3 { animation-delay: 1.6s; } .wpd-code b { color: #7fb2ff; font-weight: 600; } .wpd-code i { color: #ffd166; font-style: normal; } .wpd-code em { color: #6f7ba3; font-style: normal; } .wpd-sec { left: 2%; bottom: 4%; display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; color: #fff; font-size: .8rem; font-weight: 700; animation: aa-chipfloat 5.6s ease-in-out -1s infinite; } .wpd-sec i, .wpd-spd i { display: block; font-style: normal; font-weight: 500; font-size: .66rem; color: rgba(255, 255, 255, .65); } .wpd-shield { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #2fd3a3; color: #04261c; animation: wpd-pop 4s ease-in-out infinite; } .wpd-spd { right: 2%; bottom: 8%; display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; color: #fff; font-size: .8rem; font-weight: 700; animation: aa-chipfloat 6s ease-in-out -3s infinite; } .wpd-gauge { position: relative; width: 38px; height: 38px; display: grid; place-items: center; } .wpd-gauge svg { position: absolute; inset: 0; } .wpd-gauge b { font-family: var(--font-display); } .wpd-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wpd-gauge 8s ease-in-out infinite; } .wpd-b { width: 40px; height: 40px; } .wpd-b--1 { left: 40%; bottom: 0; background: #0a3589; } .wpd-b--2 { right: 10%; top: 44%; background: #f52549; animation-delay: -2s; } @keyframes wpd-build { 0% { opacity: 0; transform: translateY(8px); } 6%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px); } } @keyframes wpd-type { 0% { width: 0; } 14%, 80% { width: 100%; } 94%, 100% { width: 0; } } @keyframes wpd-blink { 50% { opacity: 0; } } @keyframes wpd-pub { 0%, 40% { transform: scale(1); } 48% { transform: scale(1.18); } 56%, 100% { transform: scale(1); } } @keyframes wpd-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } @keyframes wpd-gauge { 0%, 15% { stroke-dashoffset: .85; } 45%, 85% { stroke-dashoffset: .06; } 100% { stroke-dashoffset: .85; } } @media (max-width: 560px) { .wpd-sec i, .wpd-spd i { display: none; } .wpd-code pre { font-size: .58rem; } } @media (prefers-reduced-motion: reduce) { .wpd, .wpd * { animation: none !important; } .wpd-blk { opacity: 1; transform: none; } .wpd-code .l { width: 100%; } .wpd-arc { stroke-dashoffset: .06; } .wpd-cursor { display: none; } } /* Expertise: bento grid */ .ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .ex-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.3rem; border-radius: 22px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 18px 32px -28px rgba(10, 53, 137, .55); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; } .ex-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, #2f6bff, #f52549); transition: width .5s var(--ease); } .ex-card:hover { transform: translateY(-5px); border-color: rgba(245, 37, 73, .3); box-shadow: 0 28px 44px -28px rgba(10, 53, 137, .6); } .ex-card:hover::before { width: 100%; } .ex-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #f1f5ff; color: #0a3589; transition: background .3s, color .3s, transform .4s var(--ease); } .ex-card:hover .ex-ic { background: #f52549; color: #fff; transform: rotate(-6deg) scale(1.06); } .ex-card h3 { margin: .3rem 0 0; font-size: 1.05rem; color: var(--color-dark); } .ex-card p { margin: 0; color: #5d667f; font-size: .9rem; line-height: 1.55; } .ex-card--feat { grid-column: span 2; grid-row: span 2; padding: 1.8rem 1.7rem; background: linear-gradient(150deg, #0a1f4d, #0a3589); border-color: transparent; color: #fff; } .ex-card--feat h3 { color: #fff; font-size: 1.5rem; margin-top: .8rem; } .ex-card--feat p { color: rgba(255, 255, 255, .82); font-size: 1rem; max-width: 40ch; } .ex-card--feat .ex-ic { width: 60px; height: 60px; background: #f52549; color: #fff; } .ex-card--feat::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .35), transparent); pointer-events: none; } .ex-art { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: 1rem; position: relative; z-index: 1; } .ex-psd, .ex-wp { position: relative; width: 120px; height: 84px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; } .ex-psd i { position: absolute; border-radius: 4px; background: rgba(255, 255, 255, .35); } .ex-psd i:nth-child(1) { left: 10px; top: 10px; width: 60%; height: 8px; } .ex-psd i:nth-child(2) { left: 10px; top: 26px; right: 10px; height: 26px; background: rgba(47, 107, 255, .7); } .ex-psd i:nth-child(3) { left: 10px; bottom: 10px; width: 36%; height: 8px; background: #f52549; } .ex-arrow { color: #ffd166; animation: ex-slide 2s ease-in-out infinite; } .ex-wp svg { color: #fff; animation: ex-pop 2s ease-in-out infinite; } .ex-wp u { position: absolute; left: 10px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .4); text-decoration: none; } .ex-wp u:nth-of-type(1) { bottom: 18px; width: 60%; } .ex-wp u:nth-of-type(2) { bottom: 8px; width: 38%; } .ex-card--cta { grid-column: span 2; background: #fff4f6; border-color: rgba(245, 37, 73, .25); } .ex-card--cta .ex-ic { background: #f52549; color: #fff; } .ex-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-weight: 700; color: #f52549; text-decoration: none; } .ex-link:hover { gap: .7rem; } @keyframes ex-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } @keyframes ex-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @media (max-width: 960px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-card--feat { grid-row: auto; } } @media (max-width: 560px) { .ex-grid { grid-template-columns: 1fr; } .ex-card--feat, .ex-card--cta { grid-column: auto; } .ex-psd, .ex-wp { width: 96px; } } @media (prefers-reduced-motion: reduce) { .ex-card, .ex-ic, .ex-card::before { transition: none; } .ex-arrow, .ex-wp svg { animation: none; } .ex-card:hover { transform: none; } } /* Industries: scrolling pills layout */ .in-mq { display: grid; gap: 1rem; margin-inline: calc(50% - 50vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .in-mq-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; width: max-content; animation: ss-left var(--dur, 30s) linear infinite; } .in-mq-row--1 .in-mq-track { animation-name: ss-right; } .in-mq:hover .in-mq-track { animation-play-state: paused; } .in-pill { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; width: 290px; padding: .85rem 1.1rem; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 16px 28px -24px rgba(10, 53, 137, .6); transition: border-color .3s, transform .3s var(--ease); } .in-pill:hover { border-color: rgba(245, 37, 73, .4); transform: translateY(-3px); } .in-pill-ic { grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #f1f5ff; color: #0a3589; } .in-pill b { font-family: var(--font-display); font-size: .98rem; color: var(--color-dark); white-space: nowrap; } .in-pill em { font-style: normal; font-size: .78rem; color: #5d667f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (prefers-reduced-motion: reduce) { .in-mq { margin-inline: 0; -webkit-mask-image: none; mask-image: none; } .in-mq-track { animation: none; flex-wrap: wrap; width: auto; } .in-mq-row[aria-hidden="true"], .in-mq-track li[aria-hidden="true"] { display: none; } } /* Why us: spotlight */ .us-sec { position: relative; background: linear-gradient(160deg, #06152f, #0a2a66); color: #fff; overflow: hidden; } .us-glow { position: absolute; width: 460px; height: 460px; right: -140px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .3), transparent); pointer-events: none; } .us { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; position: relative; } .us-copy h2 { color: #fff; } .us-copy .lead { color: rgba(255, 255, 255, .8); } .us-copy .eyebrow { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); } .us-detail { position: relative; margin-top: 1.6rem; padding: 1.2rem 1.4rem 1.4rem; min-height: 150px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); overflow: hidden; display: grid; } .us-d { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; } .us-d.is-lit { opacity: 1; transform: none; pointer-events: auto; } .us-d b { display: block; margin-bottom: .4rem; font-family: var(--font-display); font-size: 1.2rem; color: #fff; } .us-d p { margin: 0; color: rgba(255, 255, 255, .85); line-height: 1.6; font-size: .98rem; } .us-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); } .us-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f6bff, #f52549); } .us.is-running .us-bar i { animation: us-fill var(--us-ms, 3.6s) linear infinite; } .us-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; } .us-chip { width: 100%; aspect-ratio: .9; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: .6rem; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: inherit; cursor: pointer; text-align: center; transition: background .35s, border-color .35s, transform .35s var(--ease), box-shadow .35s; } .us-ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .12); color: #fff; transition: background .35s; } .us-t { font-size: .8rem; font-weight: 700; line-height: 1.25; } .us-chip:hover { border-color: rgba(255, 255, 255, .4); } .us-chip.is-lit { background: #f52549; border-color: #f52549; transform: translateY(-6px) scale(1.04); box-shadow: 0 24px 36px -18px rgba(245, 37, 73, .8); } .us-chip.is-lit .us-ic { background: rgba(255, 255, 255, .22); } @keyframes us-fill { from { width: 0; } to { width: 100%; } } @media (max-width: 960px) { .us { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 520px) { .us-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .us-chip { aspect-ratio: 1.3; } } @media (prefers-reduced-motion: reduce) { .us-d, .us-chip, .us-ic { transition: none; } .us.is-running .us-bar i { animation: none; width: 100%; } .us-chip.is-lit { transform: none; } } .postid-53 .us-sec { background: linear-gradient(160deg, #06152f, #0a2a66); } /* WordPress Development page: flat alternating backgrounds */ .postid-53 .ov-sec, .postid-53 .in-sec, .postid-53 .faq-svc, .postid-53 .cl-sec { background: #fff; background-image: none; } .postid-53 .ex-sec, .postid-53 .ap-sec, .postid-53 .section--tint { background: #f3f6fc; background-image: none; } .us-copy .vt-grad { background-image: linear-gradient(90deg, #8ec5ff, #c9b6ff 50%, #ff9db3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .in-mq { padding-block: .4rem 1.6rem; gap: 1.1rem; } /* Portfolio showcase: browser-framed cards in a swipeable row */ .pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; } .pf-head h2 { margin: .4rem 0 .5rem; } .pf-head .lead { margin: 0; max-width: 56ch; } .pf-nav { display: flex; gap: .5rem; flex: none; } .pf-nav button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(10, 53, 137, .2); background: #fff; color: #0a3589; cursor: pointer; transition: background .25s, color .25s, border-color .25s; } .pf-nav button:hover { background: #f52549; border-color: #f52549; color: #fff; } .pf-prev svg { transform: rotate(180deg); } .pf-track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .6rem max(1rem, calc((100vw - var(--container, 1200px)) / 2)) 1.6rem; scroll-padding-inline: max(1rem, calc((100vw - var(--container, 1200px)) / 2)); } .pf-track::-webkit-scrollbar { display: none; } .pf-card { flex: 0 0 min(440px, 82vw); scroll-snap-align: start; display: grid; gap: 1rem; text-decoration: none; color: inherit; } .pf-frame { position: relative; display: block; border-radius: 18px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 26px 44px -30px rgba(10, 53, 137, .6); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; } .pf-card:hover .pf-frame, .pf-card:focus-visible .pf-frame { transform: translateY(-6px); box-shadow: 0 36px 54px -30px rgba(10, 53, 137, .7); } .pf-bar { display: flex; gap: 5px; padding: .6rem .8rem; background: #eef2fb; } .pf-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c4cde3; } .pf-bar i:first-child { background: #f52549; } .pf-shot { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #dbe3f5; } .pf-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); } .pf-card:hover .pf-shot img { transform: scale(1.08); } .pf-tag { position: absolute; left: .9rem; bottom: .9rem; padding: .25rem .75rem; border-radius: 999px; background: #0a1f4d; color: #fff; font-size: .75rem; font-weight: 700; } .pf-body { display: grid; gap: .35rem; padding-inline: .3rem; } .pf-t { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-dark); } .pf-cl { font-size: .82rem; font-weight: 700; color: #f52549; } .pf-d { color: #5d667f; font-size: .92rem; line-height: 1.55; } .pf-techs { display: flex; flex-wrap: wrap; gap: .4rem; } .pf-techs b { padding: .2rem .65rem; border-radius: 999px; background: #f1f5ff; color: #0a3589; font-size: .75rem; font-weight: 600; } .pf-more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: #0a3589; transition: gap .3s, color .3s; } .pf-card:hover .pf-more { gap: .7rem; color: #f52549; } .pf-foot { display: flex; justify-content: center; margin-top: .6rem; } @media (max-width: 640px) { .pf-head { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .pf-frame, .pf-shot img { transition: none; } .pf-track { scroll-behavior: auto; } } .postid-53 .pf-sec { background: #f3f6fc; background-image: none; } /* Ecommerce Development hero illustration */ .ecd { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .ecd-shop { left: 0; top: 4%; width: 72%; padding: .75rem .8rem .9rem; animation: aa-chipfloat 7s ease-in-out infinite; } .ecd-top { display: flex; align-items: center; gap: 6px; margin-bottom: .7rem; } .ecd-top b { width: 38px; height: 10px; border-radius: 5px; background: #f52549; margin-right: auto; } .ecd-top i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); } .ecd-cart { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; animation: ecd-cartpop 7s ease-in-out infinite; } .ecd-count { position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #f52549; color: #fff; font: 800 .6rem/16px var(--font-body, sans-serif); text-align: center; font-style: normal; } .ecd-count::before { content: "0"; animation: ecd-n 7s steps(1) infinite; } .ecd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ecd-prod { display: grid; gap: 5px; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .92); position: relative; } .ecd-img { display: grid; place-items: center; height: 54px; border-radius: 7px; background: linear-gradient(135deg, #cfe0ff, #eaf1ff); } .ecd-img--b { background: linear-gradient(135deg, #ffe0e6, #fff1f3); } .ecd-img--c { background: linear-gradient(135deg, #d8f6ec, #f0fbf7); } .ecd-box { width: 24px; height: 22px; border-radius: 5px; background: #2f6bff; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); } .ecd-img--b .ecd-box { background: #f52549; } .ecd-img--c .ecd-box { background: #2fd3a3; } .ecd-prod u { display: block; height: 5px; border-radius: 3px; background: #c4cde3; } .ecd-prod u.s { width: 60%; } .ecd-price { height: 12px; width: 44%; border-radius: 6px; background: #0b1a3f; opacity: .85; } .ecd-add { display: block; text-align: center; padding: 3px 0; border-radius: 6px; background: #0a3589; color: #fff; font-size: .55rem; font-weight: 800; animation: ecd-press 7s ease-in-out infinite; } .ecd-prod--hot { animation: ecd-hot 7s ease-in-out infinite; } .ecd-prod--hot .ecd-box { animation: ecd-lift 7s ease-in-out infinite; } .ecd-fly { position: absolute; left: 14%; top: 42%; width: 14px; height: 14px; border-radius: 4px; background: #2f6bff; opacity: 0; animation: ecd-fly 7s ease-in infinite; } .ecd-pay { right: 0; bottom: 4%; width: 52%; padding: .75rem .85rem .85rem; animation: aa-chipfloat 6.4s ease-in-out -2s infinite; z-index: 2; } .ecd-pay-h { display: flex; justify-content: space-between; align-items: baseline; color: #fff; font-size: .85rem; margin-bottom: .55rem; } .ecd-pay-h span { font-size: .66rem; color: rgba(255, 255, 255, .6); } .ecd-steps { display: flex; gap: 4px; margin-bottom: .6rem; } .ecd-steps i { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .2); } .ecd-steps i.on { background: #2f6bff; } .ecd-last { animation: ecd-step 7s ease-in-out infinite; } .ecd-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .ecd-row span { width: 46%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); } .ecd-row b { width: 22%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); } .ecd-btn { position: relative; height: 28px; margin-top: .55rem; border-radius: 8px; background: #f52549; color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; animation: ecd-pay 7s ease-in-out infinite; overflow: hidden; } .ecd-btn-t, .ecd-btn-ok { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .3rem; } .ecd-btn-t { animation: ecd-t1 7s steps(1) infinite; } .ecd-btn-ok { opacity: 0; animation: ecd-t2 7s steps(1) infinite; } .ecd-ord { left: 2%; bottom: 8%; width: 36%; padding: .6rem .8rem; color: #fff; font-size: .7rem; display: grid; gap: 2px; animation: aa-chipfloat 5.6s ease-in-out -1s infinite; } .ecd-ord b { font-size: 1.15rem; font-family: var(--font-display); color: #7ff0cd; } .ecd-ord svg { display: block; width: 100%; margin-top: 2px; } .ecd-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ecd-draw 7s ease-in-out infinite; } .ecd-b { width: 40px; height: 40px; } .ecd-b--1 { right: 4%; top: 2%; background: #f52549; } .ecd-b--2 { left: 44%; top: 56%; background: #0a3589; animation-delay: -2s; } .ecd-coin { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .7rem; color: #7a4b00; background: #ffd166; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .6); opacity: 0; animation: ecd-coin 7s ease-in infinite; } .ecd-coin--1 { right: 18%; bottom: 36%; } .ecd-coin--2 { right: 8%; bottom: 40%; animation-delay: .25s; } @keyframes ecd-hot { 0%, 22% { box-shadow: none; } 28%, 40% { box-shadow: 0 0 0 3px #f52549; } 48%, 100% { box-shadow: none; } } @keyframes ecd-lift { 0%, 28% { transform: none; } 40% { transform: translateY(-6px) scale(1.15); } 48%, 100% { transform: none; } } @keyframes ecd-press { 0%, 36% { transform: scale(1); background: #0a3589; } 40% { transform: scale(.92); background: #f52549; } 46%, 100% { transform: scale(1); background: #0a3589; } } @keyframes ecd-fly { 0%, 40% { opacity: 0; transform: translate(0, 0) scale(1); } 42% { opacity: 1; } 56% { opacity: 1; transform: translate(150px, -92px) scale(.5); } 58%, 100% { opacity: 0; transform: translate(150px, -92px) scale(.2); } } @keyframes ecd-cartpop { 0%, 54% { transform: scale(1); } 60% { transform: scale(1.25); } 66%, 100% { transform: scale(1); } } @keyframes ecd-n { 0%, 56% { content: "0"; } 57%, 97% { content: "1"; } 98%, 100% { content: "0"; } } @keyframes ecd-step { 0%, 62% { background: rgba(255, 255, 255, .2); } 70%, 94% { background: #2fd3a3; } 100% { background: rgba(255, 255, 255, .2); } } @keyframes ecd-pay { 0%, 74% { background: #f52549; transform: scale(1); } 78% { transform: scale(.95); } 82%, 94% { background: #2fd3a3; transform: scale(1); } 100% { background: #f52549; } } @keyframes ecd-t1 { 0%, 79% { opacity: 1; } 80%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } } @keyframes ecd-t2 { 0%, 79% { opacity: 0; } 80%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes ecd-draw { 0%, 20% { stroke-dashoffset: 1; } 70%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes ecd-coin { 0%, 80% { opacity: 0; transform: translateY(10px) scale(.6); } 86% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) scale(1); } } @media (max-width: 560px) { .ecd-ord { width: 40%; } .ecd-add { font-size: .48rem; } } @media (prefers-reduced-motion: reduce) { .ecd, .ecd * { animation: none !important; } .ecd-count::before { content: "1"; } .ecd-line { stroke-dashoffset: 0; } .ecd-fly, .ecd-coin, .ecd-btn-t { display: none; } .ecd-btn-ok { opacity: 1; } .ecd-btn { background: #2fd3a3; } } /* Platforms: one row of brand cards that fill with the brand colour */ .cm-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.1rem; } .cm-card { position: relative; height: 100%; display: grid; justify-items: center; align-content: start; gap: .6rem; padding: 1.8rem 1.2rem 1.5rem; text-align: center; border-radius: 24px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 20px 36px -30px rgba(10, 53, 137, .55); overflow: hidden; transition: background .4s var(--ease), color .4s, transform .4s var(--ease), box-shadow .4s, border-color .4s; outline: 0; } .cm-row li { --c: #0a3589; } .cm-logo { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); border: 2px dashed color-mix(in srgb, var(--c) 45%, #fff); transition: background .4s, border-color .4s, transform .6s var(--ease); } .cm-logo i { width: 38px; height: 38px; background: var(--c); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background .4s; } .cm-logo b { font-family: var(--font-display); font-size: 1.8rem; color: var(--c); } .cm-card h3 { margin: .3rem 0 0; font-size: 1.1rem; color: var(--color-dark); transition: color .4s; } .cm-card p { margin: 0; font-size: .9rem; line-height: 1.55; color: #5d667f; transition: color .4s; } .cm-best { margin-top: auto; padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: .76rem; font-weight: 700; transition: background .4s, color .4s; } .cm-card:hover, .cm-card:focus-visible { background: var(--c); border-color: var(--c); transform: translateY(-8px); box-shadow: 0 30px 46px -26px var(--c); } .cm-card:hover h3, .cm-card:focus-visible h3 { color: #fff; } .cm-card:hover p, .cm-card:focus-visible p { color: rgba(255, 255, 255, .9); } .cm-card:hover .cm-logo, .cm-card:focus-visible .cm-logo { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); transform: rotate(8deg) scale(1.06); } .cm-card:hover .cm-logo i, .cm-card:focus-visible .cm-logo i { background: #fff; } .cm-card:hover .cm-logo b, .cm-card:focus-visible .cm-logo b { color: #fff; } .cm-card:hover .cm-best, .cm-card:focus-visible .cm-best { background: rgba(255, 255, 255, .2); color: #fff; } @media (max-width: 900px) { .cm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .cm-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .cm-card, .cm-logo { transition: none; } .cm-card:hover, .cm-card:focus-visible { transform: none; } } /* Stacked services: sticky cards that pile up while scrolling */ .sk { list-style: none; margin: 0; padding: 0 0 2rem; display: block; } .sk-card { --a: #0a3589; --b: #2f6bff; position: sticky; top: calc(96px + var(--i) * 20px); display: grid; grid-template-columns: 230px 1fr; margin-bottom: 1.6rem; border-radius: 26px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 -10px 30px -14px rgba(10, 53, 137, .25), 0 30px 50px -34px rgba(10, 53, 137, .6); overflow: hidden; min-height: 240px; } .sk-card--1 { --a: #5b2fc9; --b: #8d6bff; } .sk-card--2 { --a: #0b7a5b; --b: #2fd3a3; } .sk-card--3 { --a: #c4143a; --b: #f5526c; } .sk-card--4 { --a: #b45f06; --b: #ffb020; } .sk-card--5 { --a: #0a1f4d; --b: #0a3589; } .sk-side { position: relative; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; color: #fff; background: linear-gradient(150deg, var(--a), var(--b)); overflow: hidden; } .sk-side::after { content: ""; position: absolute; width: 200px; height: 200px; right: -90px; bottom: -90px; border-radius: 50%; background: rgba(255, 255, 255, .14); } .sk-num { position: absolute; left: 1.2rem; top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .08em; opacity: .85; } .sk-ic { position: relative; z-index: 1; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 26px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); transition: transform .5s var(--ease); } .sk-card:hover .sk-ic { transform: rotate(-8deg) scale(1.08); } .sk-main { display: grid; align-content: center; gap: .7rem; padding: 2rem 2.2rem; } .sk-main h3 { margin: 0; font-size: 1.6rem; color: var(--color-dark); } .sk-main p { margin: 0; color: #5d667f; line-height: 1.7; max-width: 62ch; } .sk-tags { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .sk-tags li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--a) 9%, #fff); color: var(--a); font-size: .82rem; font-weight: 700; } @media (max-width: 760px) { .sk-card { grid-template-columns: 1fr; top: calc(76px + var(--i) * 12px); min-height: 0; } .sk-side { grid-auto-flow: column; justify-content: start; padding: 1rem 1.2rem; } .sk-num { position: static; } .sk-ic { width: 52px; height: 52px; border-radius: 16px; } .sk-ic svg { width: 26px; height: 26px; } .sk-main { padding: 1.3rem; } .sk-main h3 { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .sk-card { position: static; } .sk-ic { transition: none; } } /* Industries: index list layout */ .in-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; counter-reset: row; } .in-row { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1rem; padding: 1.1rem .2rem; border: 0; border-bottom: 1px solid rgba(10, 53, 137, .14); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--color-dark); } .in-row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, #2f6bff, #f52549); transition: width .5s var(--ease); } .in-row-n { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #9aa6c6; transition: color .3s; } .in-row-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; transition: transform .4s var(--ease), color .3s; } .in-row-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f1f5ff; color: #0a3589; transition: background .3s, color .3s, transform .4s var(--ease); } .in-row-desc { grid-column: 2 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .in-row-desc > span { overflow: hidden; color: #5d667f; font-size: .94rem; line-height: 1.55; opacity: 0; transition: opacity .35s; } .in-row:hover::after, .in-row:focus-visible::after, .in-row[aria-expanded="true"]::after { width: 100%; } .in-row:hover .in-row-name, .in-row:focus-visible .in-row-name, .in-row[aria-expanded="true"] .in-row-name { transform: translateX(8px); color: #0a3589; } .in-row:hover .in-row-n, .in-row[aria-expanded="true"] .in-row-n { color: #f52549; } .in-row:hover .in-row-ic, .in-row:focus-visible .in-row-ic, .in-row[aria-expanded="true"] .in-row-ic { background: #f52549; color: #fff; transform: rotate(-8deg) scale(1.08); } .in-row:hover .in-row-desc, .in-row:focus-visible .in-row-desc, .in-row[aria-expanded="true"] .in-row-desc { grid-template-rows: 1fr; } .in-row:hover .in-row-desc > span, .in-row:focus-visible .in-row-desc > span, .in-row[aria-expanded="true"] .in-row-desc > span { opacity: 1; padding-top: .5rem; } @media (max-width: 760px) { .in-list { grid-template-columns: 1fr; } .in-row-name { font-size: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .in-row::after, .in-row-name, .in-row-ic, .in-row-desc, .in-row-desc > span { transition: none; } } .in-row-desc { grid-template-rows: 1fr; transition: none; } .in-row-desc > span { min-height: 2.9em; padding-top: .35rem; transform: translateY(-4px); transition: opacity .35s, transform .35s var(--ease); } .in-row:hover .in-row-desc > span, .in-row:focus-visible .in-row-desc > span, .in-row[aria-expanded="true"] .in-row-desc > span { padding-top: .35rem; transform: none; } /* Ecommerce Development page: flat alternating backgrounds */ .postid-54 .ov-sec, .postid-54 .cm-sec, .postid-54 .ap-sec, .postid-54 .faq-svc, .postid-54 .cl-sec { background: #fff; background-image: none; } .postid-54 .sk-sec, .postid-54 .in-sec, .postid-54 .section--tint { background: #f3f6fc; background-image: none; } /* Working method: winding route */ .mth { position: relative; height: 520px; margin-top: 1rem; } .mth-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .mth-path path { stroke: #9db3e6; stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; animation: mth-flow 1.6s linear infinite; } .mth-list { list-style: none; margin: 0; padding: 0; } .mth-node { position: absolute; width: 0; height: 0; } .mth-dot { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; color: #0a3589; background: #fff; cursor: default; outline: 0; transition: transform .4s var(--ease), box-shadow .4s, background .4s, color .4s; } .mth-node--main .mth-dot { width: 96px; height: 96px; border: 3px solid var(--mc, #2f6bff); box-shadow: 0 0 0 10px color-mix(in srgb, var(--mc, #2f6bff) 12%, transparent), 0 22px 34px -18px rgba(10, 53, 137, .5); } .mth-node--sub .mth-dot { width: 54px; height: 54px; border: 2px solid #0a1f4d; box-shadow: 0 14px 24px -14px rgba(10, 53, 137, .55); } .mth-node:nth-child(4n+1) { --mc: #2f6bff; } .mth-node:nth-child(4n+3) { --mc: #f52549; } .mth-node:nth-child(4n+2), .mth-node:nth-child(4n) { --mc: #0fb58a; } .mth-dot em { position: absolute; right: -4px; top: -4px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: var(--mc, #0a1f4d); color: #fff; font: 700 .72rem/24px var(--font-display); text-align: center; font-style: normal; } .mth-node--sub .mth-dot em { background: #0a1f4d; min-width: 20px; height: 20px; font-size: .62rem; line-height: 20px; } .mth-node:hover .mth-dot, .mth-dot:focus-visible { transform: translate(-50%, -50%) scale(1.1); background: var(--mc, #0a1f4d); color: #fff; } .mth-node--sub:hover .mth-dot, .mth-node--sub .mth-dot:focus-visible { background: #0a1f4d; } .mth-lab { position: absolute; left: 0; width: 150px; transform: translateX(-50%); text-align: center; display: grid; gap: .25rem; } .mth-node--main .mth-lab { top: 62px; } .mth-node--sub .mth-lab { top: 40px; } .mth-lab b { font-family: var(--font-display); font-size: .95rem; color: var(--color-dark); } .mth-lab span { font-size: .76rem; line-height: 1.4; color: #5d667f; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; } .mth-node:hover .mth-lab span, .mth-node:focus-within .mth-lab span { max-height: 120px; opacity: 1; } .mth-node:hover, .mth-node:focus-within { z-index: 3; } .mth-node.is-bot .mth-lab { top: auto; bottom: 62px; } .mth-node--sub.is-bot .mth-lab { bottom: 40px; } .mth-node.is-bot .mth-lab { display: flex; flex-direction: column-reverse; } @keyframes mth-flow { to { stroke-dashoffset: -24; } } @media (max-width: 899px) { .mth { height: auto; } .mth-path { display: none; } .mth-list { display: grid; gap: 1rem; position: relative; padding-left: 1.2rem; } .mth-list::before { content: ""; position: absolute; left: 41px; top: 20px; bottom: 20px; border-left: 3px dotted #9db3e6; } .mth-node { position: relative; left: auto !important; top: auto !important; width: auto; height: auto; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: .9rem; } .mth-node--sub { padding-left: 12px; } .mth-dot, .mth-node:hover .mth-dot, .mth-dot:focus-visible { position: relative; transform: none; } .mth-node--main .mth-dot { width: 64px; height: 64px; box-shadow: none; } .mth-node--main .mth-dot svg { width: 26px; height: 26px; } .mth-node--sub .mth-dot { width: 46px; height: 46px; margin-left: 9px; } .mth-lab, .mth-node.is-bot .mth-lab, .mth-node--main .mth-lab, .mth-node--sub .mth-lab { position: static; transform: none; width: auto; text-align: left; display: grid; top: auto; bottom: auto; } .mth-lab span { max-height: none; opacity: 1; font-size: .86rem; } } @media (prefers-reduced-motion: reduce) { .mth-path path { animation: none; } .mth-dot, .mth-lab span { transition: none; } } @media (min-width: 900px) { .mth-node.is-top .mth-lab, .mth-node--main.is-top .mth-lab { top: auto; bottom: 62px; display: flex; flex-direction: column-reverse; } .mth-node--sub.is-top .mth-lab { bottom: 40px; } .mth-node.is-bot .mth-lab, .mth-node--main.is-bot .mth-lab { bottom: auto; top: 62px; display: grid; flex-direction: row; } .mth-node--sub.is-bot .mth-lab { top: 40px; } } .cl-sec { padding-bottom: clamp(5.5rem, 10vw, 8.5rem); } .site-footer { box-shadow: 0 -10px 28px -22px rgba(0, 36, 107, .22); } .site-footer::after { background-size: 48px 48px; } /* Shopify Development hero illustration */ .shp { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .shp-ed { left: 0; top: 6%; width: 74%; padding: .7rem .75rem .8rem; animation: aa-chipfloat 7s ease-in-out infinite; } .shp-top { display: flex; align-items: center; gap: 8px; margin-bottom: .6rem; color: #fff; font-size: .74rem; } .shp-logo { width: 22px; height: 22px; background: #95bf47; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .shp-top em { margin-left: auto; font-style: normal; font-size: .6rem; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: #5e8e3e; color: #fff; animation: shp-save 8s ease-in-out infinite; } .shp-body { display: grid; grid-template-columns: 56px 1fr; gap: 8px; } .shp-side { list-style: none; margin: 0; padding: 6px; display: grid; gap: 6px; align-content: start; border-radius: 8px; background: rgba(255, 255, 255, .1); } .shp-side li { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 5px; opacity: .55; } .shp-side i { width: 8px; height: 8px; border-radius: 2px; background: #95bf47; } .shp-side u { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); } .shp-side li.a { animation: shp-act1 8s steps(1) infinite; } .shp-side li.b { animation: shp-act2 8s steps(1) infinite; } .shp-side li.c { animation: shp-act3 8s steps(1) infinite; } .shp-prev { display: grid; gap: 6px; padding: 7px; border-radius: 8px; background: #fff; align-content: start; min-height: 150px; } .shp-sec { opacity: 0; transform: translateY(8px); animation: shp-build 8s var(--ease) infinite; } .shp-sec--hero { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 6px; background: #f1f5ea; animation-delay: 0s; } .shp-pic { height: 44px; border-radius: 6px; background: linear-gradient(135deg, #95bf47, #5e8e3e); } .shp-copy u { display: block; height: 6px; border-radius: 3px; background: #0b1a3f; margin-bottom: 4px; } .shp-copy u.s { width: 60%; background: #c4cde3; height: 4px; } .shp-copy em { display: block; width: 28px; height: 9px; border-radius: 5px; background: #5e8e3e; margin-top: 6px; } .shp-sec--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; animation-delay: .8s; } .shp-sec--grid i { height: 30px; border-radius: 5px; background: #e9eef9; border-bottom: 3px solid #95bf47; } .shp-sec--rev { animation-delay: 1.6s; padding: 5px; border-radius: 6px; background: #fff7e0; } .shp-sec--rev u { display: block; height: 5px; border-radius: 3px; background: #ffd166; margin-bottom: 4px; } .shp-sec--rev u.s { width: 55%; background: #ead9a5; } .shp-apps { right: 0; top: 2%; width: 40%; padding: .65rem .75rem; animation: aa-chipfloat 6.2s ease-in-out -2s infinite; z-index: 2; } .shp-apps-h { display: flex; justify-content: space-between; align-items: baseline; color: #fff; font-size: .78rem; margin-bottom: .45rem; } .shp-apps-h span { font-size: .6rem; color: rgba(255, 255, 255, .6); } .shp-app { display: flex; align-items: center; gap: 7px; padding: 5px 0; } .shp-ai { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; } .shp-app u { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); text-decoration: none; } .shp-sw { position: relative; width: 26px; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .25); animation: shp-sw 8s steps(1) infinite; } .shp-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: shp-knob 8s steps(1) infinite; } .shp-app--2 .shp-sw, .shp-app--2 .shp-sw::after { animation-delay: .6s; } .shp-app--3 .shp-sw, .shp-app--3 .shp-sw::after { animation-delay: 1.2s; } .shp-note { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; color: #fff; font-size: .78rem; font-weight: 700; opacity: 0; z-index: 3; } .shp-note i { display: block; font-style: normal; font-weight: 500; font-size: .62rem; color: rgba(255, 255, 255, .65); } .shp-dollar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #95bf47; color: #12230a; font-weight: 800; } .shp-note--1 { right: 2%; bottom: 30%; animation: shp-toast 8s ease-in-out infinite; } .shp-note--2 { left: 4%; bottom: 6%; animation: shp-toast 8s ease-in-out 1.4s infinite; } .shp-b { width: 40px; height: 40px; } .shp-b--1 { right: 6%; bottom: 8%; background: #5e8e3e; } .shp-b--2 { left: 48%; top: 0; background: #f52549; animation-delay: -2s; } @keyframes shp-build { 0% { opacity: 0; transform: translateY(8px); } 8%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px); } } @keyframes shp-save { 0%, 50% { transform: scale(1); } 56% { transform: scale(1.2); } 62%, 100% { transform: scale(1); } } @keyframes shp-act1 { 0%, 24% { opacity: 1; background: rgba(149, 191, 71, .25); } 25%, 100% { opacity: .55; background: none; } } @keyframes shp-act2 { 0%, 24% { opacity: .55; } 25%, 49% { opacity: 1; background: rgba(149, 191, 71, .25); } 50%, 100% { opacity: .55; background: none; } } @keyframes shp-act3 { 0%, 49% { opacity: .55; } 50%, 80% { opacity: 1; background: rgba(149, 191, 71, .25); } 81%, 100% { opacity: .55; background: none; } } @keyframes shp-sw { 0%, 12% { background: rgba(255, 255, 255, .25); } 13%, 90% { background: #95bf47; } 91%, 100% { background: rgba(255, 255, 255, .25); } } @keyframes shp-knob { 0%, 12% { transform: none; } 13%, 90% { transform: translateX(12px); } 91%, 100% { transform: none; } } @keyframes shp-toast { 0%, 40% { opacity: 0; transform: translateY(14px) scale(.9); } 48%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-8px) scale(.96); } } @media (max-width: 560px) { .shp-note i { display: none; } } @media (prefers-reduced-motion: reduce) { .shp, .shp * { animation: none !important; } .shp-sec { opacity: 1; transform: none; } .shp-sw { background: #95bf47; } .shp-sw::after { transform: translateX(12px); } .shp-note--2 { display: none; } .shp-note--1 { opacity: 1; } } .shp-ed { width: 66%; top: 10%; } .shp-apps { width: 38%; top: 0; } .shp-b--2 { left: 30%; top: 0; } /* Industries: colour mosaic layout */ .in-mo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 132px; grid-auto-flow: dense; gap: .9rem; } .in-mo-i { display: block; } .in-mo-i--0 { grid-column: span 2; grid-row: span 2; } .in-mo-i--5 { grid-column: span 2; } .in-mo-i--9 { grid-column: span 3; } .in-mo-b { --c1: #0a3589; --c2: #2f6bff; position: relative; width: 100%; height: 100%; display: grid; align-content: end; justify-items: start; gap: .25rem; padding: 1.1rem 1.2rem; border: 0; border-radius: 22px; background: linear-gradient(140deg, var(--c1), var(--c2)); color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; } .in-mo-i:nth-child(10n+2) .in-mo-b { --c1: #c4143a; --c2: #f5526c; } .in-mo-i:nth-child(10n+3) .in-mo-b { --c1: #5b2fc9; --c2: #8d6bff; } .in-mo-i:nth-child(10n+4) .in-mo-b { --c1: #0b7a5b; --c2: #2fd3a3; } .in-mo-i:nth-child(10n+5) .in-mo-b { --c1: #0a1f4d; --c2: #0a3589; } .in-mo-i:nth-child(10n+6) .in-mo-b { --c1: #b45f06; --c2: #ffb020; } .in-mo-i:nth-child(10n+7) .in-mo-b { --c1: #0a6fa8; --c2: #38bdf8; } .in-mo-i:nth-child(10n+8) .in-mo-b { --c1: #9d174d; --c2: #ec4899; } .in-mo-i:nth-child(10n+9) .in-mo-b { --c1: #0b7a5b; --c2: #0a3589; } .in-mo-i:nth-child(10n+10) .in-mo-b { --c1: #5b2fc9; --c2: #f52549; } .in-mo-b::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform .6s var(--ease); } .in-mo-ic { position: absolute; right: 1rem; top: 1rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .2); z-index: 1; transition: transform .5s var(--ease); } .in-mo-t { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; position: relative; z-index: 1; } .in-mo-i--0 .in-mo-t { font-size: 1.6rem; } .in-mo-d { position: relative; z-index: 1; max-height: 0; opacity: 0; overflow: hidden; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .92); transition: max-height .45s var(--ease), opacity .35s; } .in-mo-b:hover, .in-mo-b:focus-visible, .in-mo-b.is-open { transform: translateY(-5px); box-shadow: 0 26px 40px -24px var(--c1); } .in-mo-b:hover .in-mo-d, .in-mo-b:focus-visible .in-mo-d, .in-mo-b.is-open .in-mo-d { max-height: 90px; opacity: 1; } .in-mo-b:hover::after, .in-mo-b.is-open::after { transform: scale(1.6); } .in-mo-b:hover .in-mo-ic, .in-mo-b.is-open .in-mo-ic { transform: rotate(-8deg) scale(1.08); } @media (max-width: 900px) { .in-mo { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; } .in-mo-i--0 { grid-column: span 2; grid-row: span 1; } .in-mo-i--5, .in-mo-i--9 { grid-column: span 2; } } @media (prefers-reduced-motion: reduce) { .in-mo-b, .in-mo-b::after, .in-mo-ic, .in-mo-d { transition: none; } .in-mo-b:hover { transform: none; } } /* Expanding panels */ .xp { display: grid; gap: 1rem; } .xp-row { display: flex; gap: 1rem; height: 250px; } .xp-p { --a: #eef3ff; --b: #dbe6ff; --k: #0a3589; position: relative; flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: .6rem; padding: 1.3rem 1.3rem; border-radius: 24px; background: linear-gradient(150deg, var(--a), var(--b)); color: var(--color-dark); overflow: hidden; outline: 0; transition: flex-grow .55s var(--ease), box-shadow .4s; } .xp-p--1 { --a: #fff3e6; --b: #ffe2c2; --k: #b45f06; } .xp-p--2 { --a: #eafaf4; --b: #c9f1e2; --k: #0b7a5b; } .xp-n { position: absolute; right: 1.2rem; top: .9rem; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--k) 35%, transparent); } .xp-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #fff; color: var(--k); box-shadow: 0 12px 20px -14px var(--k); transition: transform .5s var(--ease), background .3s, color .3s; } .xp-p h3 { margin: 0; font-size: 1.12rem; padding-right: 2.5rem; } .xp-p p { margin: 0; font-size: .95rem; line-height: 1.6; color: #3d4764; opacity: 0; transform: translateY(8px); transition: opacity .4s .1s, transform .4s var(--ease) .1s; } .xp-row .xp-p:first-child { flex-grow: 2.4; } .xp-row:has(.xp-p:hover) .xp-p, .xp-row:has(.xp-p:focus-visible) .xp-p { flex-grow: 1; } .xp-row .xp-p:hover, .xp-row .xp-p:focus-visible { flex-grow: 2.4; box-shadow: 0 26px 40px -28px var(--k); } .xp-row .xp-p:first-child p, .xp-row .xp-p:hover p, .xp-row .xp-p:focus-visible p { opacity: 1; transform: none; } .xp-row:has(.xp-p:hover) .xp-p:first-child:not(:hover) p, .xp-row:has(.xp-p:focus-visible) .xp-p:first-child:not(:focus-visible) p { opacity: 0; transform: translateY(8px); } .xp-p:hover .xp-ic, .xp-p:focus-visible .xp-ic { background: var(--k); color: #fff; transform: rotate(-8deg) scale(1.06); } @media (max-width: 899px) { .xp-row { flex-direction: column; height: auto; } .xp-p { flex: none !important; } .xp-p p { opacity: 1 !important; transform: none !important; } .xp-p:hover, .xp-p:focus-visible { box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .xp-p, .xp-p p, .xp-ic { transition: none; } } /* Shopify Development page: flat alternating backgrounds */ .postid-55 .ov-sec, .postid-55 .in-sec, .postid-55 .faq-svc, .postid-55 .cl-sec { background: #fff; background-image: none; } .postid-55 .xp-sec, .postid-55 .ap-sec, .postid-55 .section--tint { background: #f3f6fc; background-image: none; } /* Journey: scroll-driven token on a rail (dark section) */ .jr-sec { position: relative; background: linear-gradient(170deg, #050d1f, #0a1f4d); color: #fff; overflow: hidden; } .jr-glow { position: absolute; width: 520px; height: 520px; left: 50%; top: -200px; margin-left: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 107, 255, .35), transparent); pointer-events: none; } .jr-sec .section-heading h2 { color: #fff; } .jr-sec .lead { color: rgba(255, 255, 255, .8); max-width: 78ch; margin-inline: auto; } .jr-sec .eyebrow { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); } .jr-sec .vt-grad { background-image: linear-gradient(90deg, #8ec5ff, #c9b6ff 50%, #ff9db3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .jr { --p: 0; position: relative; margin-top: 2.5rem; padding-top: 1rem; } .jr-rail { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 53px; height: 0; border-top: 3px dotted rgba(255, 255, 255, .25); } .jr-fill { position: absolute; left: 0; top: -3px; height: 3px; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #2f6bff, #f52549); box-shadow: 0 0 14px rgba(245, 37, 73, .7); border-radius: 3px; } .jr-token { position: absolute; top: -17px; left: calc(var(--p) * 100%); width: 34px; height: 34px; margin-left: -17px; display: grid; place-items: center; border-radius: 50%; background: #f52549; color: #fff; box-shadow: 0 0 0 6px rgba(245, 37, 73, .25), 0 0 24px rgba(245, 37, 73, .8); } .jr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1rem; position: relative; } .jr-step { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 0 .6rem; } .jr-node { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .7); backdrop-filter: blur(8px); transition: background .5s, border-color .5s, color .5s, transform .5s var(--ease), box-shadow .5s; } .jr-node em { position: absolute; right: -2px; top: -2px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #0a3589; color: #fff; font: 700 .74rem var(--font-display); font-style: normal; transition: background .5s; } .jr-step h3 { margin: .5rem 0 0; font-size: 1.05rem; color: rgba(255, 255, 255, .7); transition: color .5s; } .jr-step p { margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(255, 255, 255, .5); transition: color .5s; } .jr-step.is-lit .jr-node { background: linear-gradient(135deg, #2f6bff, #f52549); border-color: transparent; color: #fff; transform: scale(1.1); box-shadow: 0 0 0 8px rgba(245, 37, 73, .16), 0 20px 34px -12px rgba(245, 37, 73, .7); } .jr-step.is-lit .jr-node em { background: #fff; color: #0a1f4d; } .jr-step.is-lit h3 { color: #fff; } .jr-step.is-lit p { color: rgba(255, 255, 255, .82); } @media (max-width: 899px) { .jr-rail { left: 41px; right: auto; top: 0; bottom: 0; height: auto; width: 0; border-top: 0; border-left: 3px dotted rgba(255, 255, 255, .25); } .jr-fill { left: -3px; top: 0; width: 3px; height: calc(var(--p) * 100%); } .jr-token { left: -17px; top: calc(var(--p) * 100%); margin: -17px 0 0; } .jr-list { grid-template-columns: 1fr; gap: 1.6rem; } .jr-step { grid-template-columns: 84px 1fr; justify-items: start; text-align: left; column-gap: 1rem; row-gap: .15rem; padding: 0; align-items: center; } .jr-node { grid-row: 1 / span 2; } .jr-step h3 { margin: 0; align-self: end; } .jr-step p { align-self: start; } } @media (prefers-reduced-motion: reduce) { .jr-node, .jr-step h3, .jr-step p { transition: none; } } .postid-55 .jr-sec { background: linear-gradient(170deg, #050d1f, #0a1f4d); } .jr-step.is-lit .jr-node { background: #f52549; box-shadow: 0 0 0 8px rgba(245, 37, 73, .16), 0 18px 30px -14px rgba(245, 37, 73, .6); } .jr-fill { background: #f52549; } /* Custom Development hero illustration */ .cdv { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .cdv-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .cdv-l { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .5; stroke-dasharray: 1.2 1.6; } .cdv-p { fill: none; stroke: #2fd3a3; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; animation: cdv-flow 3s linear infinite; filter: drop-shadow(0 0 1.2px #2fd3a3); } .cdv-p--2 { stroke: #f52549; animation-delay: -.8s; filter: drop-shadow(0 0 1.2px #f52549); } .cdv-p--3 { animation-delay: -1.6s; } .cdv-p--4 { stroke: #ffd166; animation-delay: -2.2s; filter: drop-shadow(0 0 1.2px #ffd166); } .cdv-core { left: 50%; top: 48%; width: 34%; padding: 1rem .8rem; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .5rem; text-align: center; color: #fff; z-index: 2; animation: cdv-pulse 4s ease-in-out infinite; background: rgba(47, 107, 255, .22); border-color: rgba(142, 197, 255, .5); } .cdv-core b { font-family: var(--font-display); font-size: .9rem; } .cdv-core-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: #f52549; color: #fff; box-shadow: 0 14px 24px -10px rgba(245, 37, 73, .8); } .cdv-bar { display: block; width: 80%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; } .cdv-bar u { display: block; height: 100%; width: 40%; background: #2fd3a3; border-radius: 3px; animation: cdv-load 3s ease-in-out infinite; } .cdv-n { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; color: #fff; font-size: .78rem; font-weight: 700; z-index: 2; animation: aa-chipfloat 6s ease-in-out infinite; } .cdv-n svg { color: #8ec5ff; } .cdv-n--db { left: 2%; top: 8%; } .cdv-n--api { right: 2%; top: 8%; animation-delay: -2s; } .cdv-n--portal { left: 0; top: 56%; animation-delay: -3s; } .cdv-n--int { right: 0; top: 54%; animation-delay: -1s; } .cdv-term { left: 50%; bottom: 0; width: 56%; margin-left: -28%; padding: .6rem .8rem; background: rgba(6, 14, 34, .8); animation: aa-chipfloat 6.6s ease-in-out -2.5s infinite; z-index: 3; } .cdv-t-h { display: flex; align-items: center; gap: 4px; margin-bottom: .35rem; } .cdv-t-h i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .cdv-t-h span { margin-left: 6px; font-size: .62rem; color: rgba(255, 255, 255, .65); } .cdv-term pre { margin: 0; font: 600 .66rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfd8f3; white-space: pre; } .cdv-term .l { display: block; overflow: hidden; width: 0; white-space: nowrap; animation: cdv-type 6s steps(22) infinite; } .cdv-term .l2 { animation-delay: .6s; } .cdv-term .l3 { animation-delay: 1.4s; } .cdv-term .ok { color: #7ff0cd; } @keyframes cdv-flow { to { stroke-dashoffset: 0; } } @keyframes cdv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 107, 255, .35); } 50% { box-shadow: 0 0 0 16px rgba(47, 107, 255, 0); } } @keyframes cdv-load { 0%, 100% { width: 30%; } 50% { width: 92%; } } @keyframes cdv-type { 0% { width: 0; } 16%, 82% { width: 100%; } 94%, 100% { width: 0; } } @media (max-width: 560px) { .cdv-n { font-size: .68rem; padding: .45rem .6rem; } .cdv-term pre { font-size: .58rem; } } @media (prefers-reduced-motion: reduce) { .cdv, .cdv * { animation: none !important; } .cdv-term .l { width: 100%; } .cdv-p { display: none; } } /* Growth steps: staircase */ .sp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1rem; align-items: end; } .sp-step { --bg: #e8efff; --fg: var(--color-dark); --mut: #4a5575; --ac: #0a3589; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(300px + var(--i) * 70px); } .sp-step--1 { --bg: #cfdcff; } .sp-step--2 { --bg: #0a3589; --fg: #fff; --mut: rgba(255, 255, 255, .82); --ac: #fff; } .sp-step--3 { --bg: #0a1f4d; --fg: #fff; --mut: rgba(255, 255, 255, .82); --ac: #fff; } .sp-card { position: relative; flex: 1; display: grid; align-content: start; gap: .6rem; padding: 1.5rem 1.3rem 1.4rem; border-radius: 24px 24px 0 0; background: var(--bg); color: var(--fg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; box-shadow: 0 24px 40px -34px rgba(10, 53, 137, .7); } .sp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #f52549; } .sp-step:hover .sp-card { transform: translateY(-8px); box-shadow: 0 34px 50px -30px rgba(10, 53, 137, .8); } .sp-tag { justify-self: start; padding: .22rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .7); color: #0a3589; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .sp-step--2 .sp-tag, .sp-step--3 .sp-tag { background: rgba(255, 255, 255, .16); color: #fff; } .sp-ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: #fff; color: var(--ac); } .sp-step--2 .sp-ic, .sp-step--3 .sp-ic { background: rgba(255, 255, 255, .14); color: #fff; } .sp-card h3 { margin: .2rem 0 0; font-size: 1.2rem; color: var(--fg); } .sp-card p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--mut); } .sp-num { position: absolute; right: 1rem; bottom: .3rem; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 22%, transparent); pointer-events: none; } .sp-card { padding-bottom: 3.6rem; } @media (max-width: 899px) { .sp { grid-template-columns: 1fr; align-items: stretch; } .sp-step { min-height: 0; } .sp-card { border-radius: 22px; padding-bottom: 1.6rem; } .sp-num { top: .6rem; bottom: auto; font-size: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .sp-card { transition: none; } .sp-step:hover .sp-card { transform: none; } } /* Industries: chip selector layout */ .in-ch-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; } .in-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 999px; border: 1px solid rgba(10, 53, 137, .18); background: #fff; color: var(--color-dark); font: inherit; font-weight: 600; font-size: .94rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; } .in-chip svg { color: #0a3589; transition: color .3s; } .in-chip:hover { border-color: #f52549; transform: translateY(-2px); } .in-chip.is-on { background: #0a3589; border-color: #0a3589; color: #fff; box-shadow: 0 16px 26px -14px rgba(10, 53, 137, .8); } .in-chip.is-on svg { color: #fff; } .in-ch-panel { position: relative; max-width: 760px; min-height: 130px; margin: 1.8rem auto 0; display: grid; } .in-ch-d { grid-area: 1 / 1; display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 1.6rem; border-radius: 22px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); border-left: 6px solid #f52549; box-shadow: 0 24px 40px -32px rgba(10, 53, 137, .6); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .in-ch-d.is-on { opacity: 1; transform: none; pointer-events: auto; } .in-ch-ic { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: #f52549; color: #fff; } .in-ch-d b { display: block; margin-bottom: .3rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--color-dark); } .in-ch-d p { margin: 0; color: #5d667f; line-height: 1.6; } @media (max-width: 560px) { .in-ch-d { flex-direction: column; align-items: flex-start; } .in-ch-panel { min-height: 190px; } } @media (prefers-reduced-motion: reduce) { .in-chip, .in-ch-d { transition: none; } } /* Custom Development page: flat alternating backgrounds */ .postid-56 .ov-sec, .postid-56 .in-sec, .postid-56 .faq-svc, .postid-56 .cl-sec { background: #fff; background-image: none; } .postid-56 .sp-sec, .postid-56 .ap-sec, .postid-56 .section--tint { background: #f3f6fc; background-image: none; } /* Process columns */ .pc-sec { background-image: repeating-linear-gradient(135deg, rgba(10, 53, 137, .035) 0 2px, transparent 2px 22px); } .pc { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); } .pc-col { position: relative; display: grid; align-content: start; gap: .7rem; padding: 3.6rem 1.6rem 2.2rem; outline: 0; } .pc-col::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(10, 53, 137, .22); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease); transition-delay: calc(var(--i) * .12s); } .pc.is-in .pc-col::before { transform: scaleY(1); } .pc-col:last-child::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(10, 53, 137, .22); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .7s; } .pc.is-in .pc-col:last-child::after { transform: scaleY(1); } .pc-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 5vw, 5rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(10, 53, 137, .3); transition: color .4s, -webkit-text-stroke-color .4s, transform .5s var(--ease); } .pc-col h3 { margin: .4rem 0 0; font-size: 1.1rem; color: var(--color-dark); } .pc-col p { margin: 0; font-size: .9rem; line-height: 1.6; color: #5d667f; } .pc-bar { position: absolute; left: 1.6rem; bottom: 0; height: 3px; width: 0; background: #f52549; transition: width .5s var(--ease); } .pc-col:hover .pc-num, .pc-col:focus-visible .pc-num { color: #f52549; -webkit-text-stroke-color: #f52549; transform: translateX(6px); } .pc-col:hover .pc-bar, .pc-col:focus-visible .pc-bar { width: calc(100% - 3.2rem); } @media (max-width: 899px) { .pc { grid-template-columns: 1fr; } .pc-col { padding: 1.8rem 1.4rem 1.8rem 1.6rem; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: start; } .pc-num { grid-row: 1 / span 2; font-size: 3rem; } .pc-col::before { top: 0; bottom: 0; } .pc-col:last-child::after { display: none; } .pc-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .pc-col::before, .pc-col:last-child::after, .pc-num, .pc-bar { transition: none; } .pc-col::before, .pc-col:last-child::after { transform: none; } } .postid-56 .pc-sec { background-color: #f3f6fc; } /* Service grid: hairline cells with a pointer spotlight */ .sg { --mx: -999px; --my: -999px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 26px; background: #fff; border: 1px solid rgba(10, 53, 137, .14); box-shadow: 0 30px 50px -40px rgba(10, 53, 137, .6); overflow: hidden; } .sg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx) var(--my), rgba(47, 107, 255, .13), transparent 70%); pointer-events: none; z-index: 1; transition: opacity .3s; } .sg-cell { position: relative; border-right: 1px solid rgba(10, 53, 137, .12); border-bottom: 1px solid rgba(10, 53, 137, .12); } .sg-cell:nth-child(3n) { border-right: 0; } .sg-cell:nth-last-child(-n+3) { border-bottom: 0; } .sg-in { position: relative; display: grid; align-content: start; gap: .65rem; height: 100%; padding: 2rem 1.8rem 1.8rem; color: inherit; text-decoration: none; transition: background .3s; } .sg-in::after { content: ""; position: absolute; left: 1.8rem; top: 0; width: 0; height: 3px; background: #f52549; transition: width .45s var(--ease); } .sg-cell:hover .sg-in::after { width: 44px; } .sg-cell:hover .sg-in { background: rgba(244, 247, 255, .8); } .sg-mark { width: 58px; height: 58px; display: grid; place-items: center; color: #0a3589; transition: transform .45s var(--ease), color .3s; } .sg-mark i { width: 46px; height: 46px; background: #0a3589; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background .3s; } .sg-mark svg { width: 44px; height: 44px; } .sg-cell:hover .sg-mark { transform: translateY(-4px) scale(1.06); color: #f52549; } .sg-cell:hover .sg-mark i { background: #f52549; } .sg-in h3 { margin: 0; font-size: 1.2rem; color: var(--color-dark); } .sg-in p { margin: 0; font-size: .92rem; line-height: 1.65; color: #5d667f; } .sg-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-weight: 700; font-size: .88rem; color: #0a3589; transition: gap .3s, color .3s; } .sg-cell:hover .sg-more { gap: .7rem; color: #f52549; } @media (max-width: 900px) { .sg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-cell:nth-child(3n) { border-right: 1px solid rgba(10, 53, 137, .12); } .sg-cell:nth-child(2n) { border-right: 0; } .sg-cell:nth-last-child(-n+3) { border-bottom: 1px solid rgba(10, 53, 137, .12); } .sg-cell:nth-last-child(-n+1) { border-bottom: 0; } } @media (max-width: 560px) { .sg { grid-template-columns: 1fr; } .sg-cell { border-right: 0 !important; border-bottom: 1px solid rgba(10, 53, 137, .12) !important; } .sg-cell:last-child { border-bottom: 0 !important; } } @media (hover: none) { .sg::before { display: none; } } @media (prefers-reduced-motion: reduce) { .sg-mark, .sg-in::after, .sg-more, .sg-in { transition: none; } .sg-cell:hover .sg-mark { transform: none; } } .postid-56 .sg-sec, .postid-56 .pc-sec { background-color: #fff; background-image: none; } .postid-56 .sp-sec, .postid-56 .in-sec { background: #f3f6fc; background-image: none; } /* Custom Development page: final strictly alternating backgrounds (ov W, sg T, sp W, in T, pc W) */ .postid-56 .ov-sec, .postid-56 .sp-sec, .postid-56 .pc-sec, .postid-56 .faq-svc, .postid-56 .cl-sec { background-color: #fff; background-image: none; } .postid-56 .sg-sec, .postid-56 .in-sec, .postid-56 .section--tint { background-color: #f3f6fc; background-image: none; } .mega-col li a:hover, .mega-col li a:focus-visible { background: #dbe6fb; color: #0a3589; box-shadow: inset 3px 0 0 #f52549; } /* Web Development category hero illustration */ .wdv { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .wdv-ring { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .22); } .wdv-orbit { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: wdv-spin 28s linear infinite; } .wdv-sat { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; } .wdv-sat--1 { left: 50%; top: 0; } .wdv-sat--2 { left: 100%; top: 50%; } .wdv-sat--3 { left: 50%; top: 100%; } .wdv-sat--4 { left: 0; top: 50%; } .wdv-in { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #0a3589; box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .6); animation: wdv-unspin 28s linear infinite; } .wdv-sat--2 .wdv-in { color: #5e8e3e; } .wdv-sat--1 .wdv-in { color: #21759b; } .wdv-sat--4 .wdv-in { color: #f52549; } .wdv-logo { display: block; width: 26px; height: 26px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .wdv-win { left: 50%; top: 50%; width: 62%; transform: translate(-50%, -50%); padding: .6rem .65rem .7rem; animation: wdv-float 7s ease-in-out infinite; z-index: 2; } .wdv-top { display: flex; align-items: center; gap: 5px; margin-bottom: .5rem; } .wdv-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); } .wdv-url { flex: 1; height: 11px; border-radius: 6px; background: rgba(255, 255, 255, .15); margin-left: 5px; } .wdv-page { display: grid; gap: 6px; padding: 6px; border-radius: 8px; background: #fff; min-height: 138px; align-content: start; } .wdv-b { opacity: 0; transform: translateY(8px); animation: wdv-build 7s var(--ease) infinite; } .wdv-b--nav { display: flex; align-items: center; gap: 5px; } .wdv-b--nav b { width: 18px; height: 7px; border-radius: 4px; background: #0a3589; margin-right: auto; } .wdv-b--nav u { width: 13px; height: 4px; border-radius: 2px; background: #c4cde3; } .wdv-b--nav em { width: 18px; height: 8px; border-radius: 4px; background: #f52549; } .wdv-b--hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px; align-items: center; animation-delay: .6s; } .wdv-h u { display: block; height: 6px; border-radius: 3px; background: #0b1a3f; margin-bottom: 4px; } .wdv-h u.s { width: 62%; height: 4px; background: #c4cde3; } .wdv-h em { display: block; width: 26px; height: 8px; border-radius: 4px; background: #0a3589; margin-top: 5px; } .wdv-pic { height: 40px; border-radius: 7px; background: #2f6bff; position: relative; overflow: hidden; } .wdv-pic::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #f52549; right: -4px; bottom: -6px; } .wdv-b--cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; animation-delay: 1.2s; } .wdv-b--cards i { height: 26px; border-radius: 5px; background: #e9eef9; border-top: 3px solid #2f6bff; } .wdv-b--cards i:nth-child(2) { border-color: #f52549; } .wdv-b--cards i:nth-child(3) { border-color: #2fd3a3; } .wdv-chip { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; color: #fff; font-size: .76rem; font-weight: 700; z-index: 3; } .wdv-chip i { display: block; font-style: normal; font-weight: 500; font-size: .62rem; color: rgba(255, 255, 255, .65); } .wdv-chip--speed { left: 0; bottom: 6%; animation: aa-chipfloat 6s ease-in-out -1s infinite; } .wdv-chip--rank { right: 0; top: 6%; animation: aa-chipfloat 6.4s ease-in-out -3s infinite; } .wdv-g { position: relative; width: 34px; height: 34px; display: grid; place-items: center; } .wdv-g svg { position: absolute; inset: 0; } .wdv-g b { font-size: .72rem; font-family: var(--font-display); } .wdv-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wdv-gauge 7s ease-in-out infinite; } .wdv-up { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #2fd3a3; color: #04261c; animation: wdv-hop 2.4s ease-in-out infinite; } @keyframes wdv-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes wdv-unspin { to { transform: rotate(-360deg); } } @keyframes wdv-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 7px)); } } @keyframes wdv-build { 0% { opacity: 0; transform: translateY(8px); } 8%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px); } } @keyframes wdv-gauge { 0%, 15% { stroke-dashoffset: .85; } 45%, 85% { stroke-dashoffset: .04; } 100% { stroke-dashoffset: .85; } } @keyframes wdv-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (max-width: 560px) { .wdv-chip i { display: none; } .wdv-sat { width: 42px; height: 42px; margin: -21px 0 0 -21px; } .wdv-logo { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { .wdv, .wdv * { animation: none !important; } .wdv-b { opacity: 1; transform: none; } .wdv-arc { stroke-dashoffset: .04; } .wdv-win { transform: translate(-50%, -50%); } } /* Parent service overview: elegant intro + "What is included" list */ .po-sec { position: relative; background: #fff; } .po { align-items: center; gap: clamp(2rem, 5vw, 4rem); } .po-copy .section-heading { margin-bottom: 1rem; text-align: left; } .po-prose p { color: #3d4764; line-height: 1.8; font-size: 1.04rem; } .po-prose p:first-child { font-size: 1.14rem; color: var(--color-dark); } .po-cta { margin-top: 1.4rem; } .po-card { position: relative; padding: 1.6rem 1.5rem 1.2rem; border-radius: 26px; background: #06152f; color: #fff; box-shadow: 0 34px 60px -38px rgba(6, 21, 47, .9); overflow: hidden; } .po-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #2f6bff, #f52549, #7dd3fc, transparent); background-size: 200% 100%; animation: footer-line 8s linear infinite; } .po-card::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 37, 73, .28), transparent); pointer-events: none; } .po-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; position: relative; z-index: 1; } .po-head h2 { margin: 0; font-size: 1.25rem; color: #fff; } .po-count { padding: .25rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #cfe0ff; font-size: .74rem; font-weight: 700; } .po-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; } .po-list li { border-top: 1px solid rgba(255, 255, 255, .1); } .po-list a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .9rem; padding: .95rem .6rem; margin-inline: -.6rem; border-radius: 14px; color: #fff; text-decoration: none; transition: background .3s, transform .35s var(--ease); } .po-n { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #7f93bd; transition: color .3s; } .po-t { display: grid; gap: .15rem; min-width: 0; } .po-t b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: #fff; } .po-t em { font-style: normal; font-size: .82rem; color: #9fb2d6; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .po-go { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cfe0ff; transition: background .3s, color .3s, transform .35s var(--ease); } .po-list a:hover, .po-list a:focus-visible { background: rgba(255, 255, 255, .08); transform: translateX(6px); } .po-list a:hover .po-n, .po-list a:focus-visible .po-n { color: #f52549; } .po-list a:hover .po-go, .po-list a:focus-visible .po-go { background: #f52549; color: #fff; transform: translateX(4px); } @media (min-width: 960px) { .po-card { position: sticky; top: 110px; } } @media (prefers-reduced-motion: reduce) { .po-card::before { animation: none; } .po-list a, .po-go { transition: none; } .po-list a:hover { transform: none; } } /* Digital Marketing hero illustration: channels -> funnel -> results */ .dmk { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .dmk-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .dmk-s { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: .5; stroke-dasharray: 1.2 1.6; } .dmk-p { fill: none; stroke: #ffd166; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; animation: dmk-flow 3s linear infinite; filter: drop-shadow(0 0 1.2px #ffd166); } .dmk-p--2 { animation-delay: -.7s; stroke: #7dd3fc; filter: drop-shadow(0 0 1.2px #7dd3fc); } .dmk-p--3 { animation-delay: -1.4s; stroke: #ff9db3; filter: drop-shadow(0 0 1.2px #ff9db3); } .dmk-p--4 { animation-delay: -2.1s; stroke: #7ff0cd; filter: drop-shadow(0 0 1.2px #7ff0cd); } .dmk-ch { position: absolute; left: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; } .dmk-ch em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .dmk-ch--1 { top: 3%; } .dmk-ch--2 { top: 25%; } .dmk-ch--3 { top: 47%; } .dmk-ch--4 { top: 69%; } .dmk-b { position: relative; width: 46px; height: 46px; background: rgba(255, 255, 255, .95); color: #0a3589; animation-duration: 5.4s; } .dmk-ch--1 .dmk-b { color: #0a3589; } .dmk-ch--2 .dmk-b { color: #7a4bff; animation-delay: -1s; } .dmk-ch--3 .dmk-b { color: #f52549; animation-delay: -2s; } .dmk-ch--4 .dmk-b { color: #0fb58a; animation-delay: -3s; } .dmk-funnel { position: absolute; left: 40%; top: 28%; width: 24%; height: 44%; } .dmk-f { position: absolute; left: 0; right: 0; height: 33%; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); border-radius: 4px; } .dmk-f--1 { top: 0; background: rgba(125, 211, 252, .55); } .dmk-f--2 { top: 36%; left: 12%; right: 12%; background: rgba(201, 182, 255, .65); } .dmk-f--3 { top: 72%; left: 24%; right: 24%; background: #f52549; clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); animation: dmk-glow 3s ease-in-out infinite; } .dmk-drop { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; opacity: 0; animation: dmk-drop 3s ease-in infinite; } .dmk-drop--2 { animation-delay: -1s; margin-left: -10px; } .dmk-drop--3 { animation-delay: -2s; margin-left: 4px; } .dmk-res { right: 0; top: 14%; width: 40%; padding: .7rem .8rem; animation: aa-chipfloat 6.4s ease-in-out -1.5s infinite; z-index: 2; } .dmk-res-h { display: flex; justify-content: space-between; align-items: baseline; color: #fff; font-size: .78rem; margin-bottom: .45rem; } .dmk-res-h span { font-size: .6rem; color: rgba(255, 255, 255, .6); } .dmk-kpis { display: flex; gap: .8rem; color: #fff; } .dmk-kpis span { display: grid; } .dmk-kpis i { font-style: normal; font-size: .58rem; color: rgba(255, 255, 255, .6); } .dmk-kpis b { font-family: var(--font-display); font-size: 1.05rem; } .dmk-up { color: #7ff0cd; } .dmk-count::before { content: "0"; animation: dmk-n 6s steps(1) infinite; } .dmk-res svg { display: block; width: 100%; margin-top: .35rem; overflow: visible; } .dmk-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmk-draw 6s ease-in-out infinite; } .dmk-area, .dmk-dot { opacity: 0; animation: dmk-fade 6s ease-in-out infinite; } .dmk-coin { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .7rem; color: #7a4b00; background: #ffd166; box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .6); opacity: 0; animation: dmk-coin 3s ease-out infinite; } .dmk-coin--1 { left: 50%; top: 72%; } .dmk-coin--2 { left: 58%; top: 74%; animation-delay: -1.5s; } @keyframes dmk-flow { to { stroke-dashoffset: 0; } } @keyframes dmk-glow { 0%, 100% { box-shadow: none; filter: none; } 50% { filter: drop-shadow(0 0 8px rgba(245, 37, 73, .9)); } } @keyframes dmk-drop { 0% { opacity: 0; transform: translateY(0) scale(1); } 15% { opacity: 1; } 85% { opacity: 1; transform: translateY(90px) scale(.5); } 100% { opacity: 0; transform: translateY(100px) scale(.3); } } @keyframes dmk-coin { 0%, 50% { opacity: 0; transform: translate(0, 0) scale(.6); } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, -34px) scale(1); } } @keyframes dmk-n { 0% { content: "0"; } 12% { content: "24"; } 24% { content: "51"; } 36% { content: "87"; } 50%, 90% { content: "128"; } 100% { content: "0"; } } @keyframes dmk-draw { 0%, 8% { stroke-dashoffset: 1; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes dmk-fade { 0%, 40% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 560px) { .dmk-ch { width: 44px; } .dmk-b { width: 38px; height: 38px; } .dmk-ch em { font-size: .55rem; } .dmk-res { width: 46%; } } @media (prefers-reduced-motion: reduce) { .dmk, .dmk * { animation: none !important; } .dmk-count::before { content: "128"; } .dmk-line { stroke-dashoffset: 0; } .dmk-area, .dmk-dot { opacity: 1; } .dmk-p, .dmk-drop, .dmk-coin { display: none; } } /* Android App Development hero illustration */ .adr { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .adr-phone { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: .5; transform: translate(-50%, -50%); border-radius: 26px; background: #0b1226; border: 3px solid #2a3558; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); padding: 7px; animation: adr-float 7s ease-in-out infinite; z-index: 3; } .adr-cam { position: absolute; left: 50%; top: 10px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #1b2548; z-index: 2; } .adr-screen { position: relative; height: 100%; border-radius: 20px; background: #f4f7ff; padding: 20px 8px 8px; display: grid; gap: 7px; align-content: start; overflow: hidden; } .adr-status { position: absolute; left: 12px; right: 12px; top: 4px; display: flex; justify-content: space-between; font-size: .46rem; font-weight: 700; color: #0b1a3f; } .adr-status i { width: 14px; height: 6px; border-radius: 3px; background: #0b1a3f; opacity: .6; } .adr-appbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px; border-radius: 12px; background: #3ddc84; } .adr-appbar b { width: 38%; height: 7px; border-radius: 4px; background: #0b2a17; } .adr-av { width: 14px; height: 14px; border-radius: 50%; background: #fff; } .adr-item { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 6px 12px -8px rgba(10, 53, 137, .5); opacity: 0; transform: translateY(14px); animation: adr-in 8s var(--ease) infinite; } .adr-item--2 { animation-delay: .6s; } .adr-item--3 { animation-delay: 1.2s; } .adr-ico { flex: none; width: 24px; height: 24px; border-radius: 8px; background: #2f6bff; } .adr-ico--b { background: #f52549; } .adr-ico--c { background: #ffb020; } .adr-tx { flex: 1; display: grid; gap: 4px; } .adr-tx u { display: block; height: 5px; border-radius: 3px; background: #0b1a3f; opacity: .8; text-decoration: none; } .adr-tx u.s { width: 60%; background: #c4cde3; opacity: 1; height: 4px; } .adr-fab { position: absolute; right: 9px; bottom: 9px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #0a3589; color: #fff; box-shadow: 0 10px 16px -6px rgba(10, 53, 137, .8); animation: adr-fab 8s ease-in-out infinite; } .adr-tab { left: 0; top: 14%; width: 40%; aspect-ratio: 1.3; padding: .5rem; display: grid; gap: 5px; align-content: start; animation: aa-chipfloat 7s ease-in-out -2s infinite; z-index: 1; } .adr-tab-bar { height: 8px; border-radius: 4px; background: #3ddc84; width: 50%; } .adr-tab-l { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); } .adr-tab-l.s { width: 60%; } .adr-tab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .adr-tab-grid i { height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .16); } .adr-tab-grid i:first-child { background: rgba(47, 107, 255, .6); } .adr-robot { position: absolute; left: 33%; top: 3%; width: 54px; height: 54px; background: #3ddc84; animation: adr-bob 4.4s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; z-index: 4; } .adr-code { right: 0; top: 6%; width: 44%; padding: .55rem .7rem; background: rgba(6, 14, 34, .82); animation: aa-chipfloat 6.4s ease-in-out -1s infinite; z-index: 2; } .adr-dots { display: flex; align-items: center; gap: 4px; margin-bottom: .35rem; } .adr-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .adr-dots span { margin-left: 5px; font-size: .56rem; color: rgba(255, 255, 255, .65); } .adr-code pre { margin: 0; font: 600 .62rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfd8f3; white-space: pre; } .adr-code .l { display: block; overflow: hidden; width: 0; white-space: nowrap; animation: adr-type 8s steps(18) infinite; } .adr-code .l2 { animation-delay: .6s; } .adr-code .l3 { animation-delay: 1.2s; } .adr-code b { color: #3ddc84; font-weight: 600; } .adr-code em { color: #7fb2ff; font-style: normal; } .adr-code i { color: #ffd166; font-style: normal; } .adr-test { left: 0; bottom: 8%; display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; color: #fff; font-size: .74rem; font-weight: 700; animation: aa-chipfloat 5.8s ease-in-out -3s infinite; z-index: 4; } .adr-test i { display: block; font-style: normal; font-weight: 500; font-size: .6rem; color: rgba(255, 255, 255, .65); } .adr-chk { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #3ddc84; color: #04261c; animation: adr-pop 4s ease-in-out infinite; } .adr-play { right: 0; bottom: 6%; width: 42%; padding: .6rem .75rem; color: #fff; animation: aa-chipfloat 6.2s ease-in-out -2s infinite; z-index: 4; } .adr-play-h { display: flex; align-items: center; gap: .4rem; font-size: .74rem; } .adr-play-h em { margin-left: auto; font-style: normal; font-size: .58rem; color: rgba(255, 255, 255, .6); } .adr-tri { width: 0; height: 0; border-left: 12px solid #3ddc84; border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(0 0 4px rgba(61, 220, 132, .7)); } .adr-roll { height: 6px; margin: .5rem 0 .35rem; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; } .adr-roll u { display: block; height: 100%; width: 0; background: #3ddc84; border-radius: 3px; animation: adr-roll 8s ease-in-out infinite; } .adr-live { position: relative; height: 14px; font-size: .62rem; font-weight: 800; } .adr-wait, .adr-done { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; } .adr-wait { color: rgba(255, 255, 255, .7); animation: adr-t1 8s steps(1) infinite; } .adr-done { color: #3ddc84; opacity: 0; animation: adr-t2 8s steps(1) infinite; } @keyframes adr-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } } @keyframes adr-in { 0% { opacity: 0; transform: translateY(14px); } 8%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(14px); } } @keyframes adr-fab { 0%, 35% { transform: scale(0); } 42%, 80% { transform: scale(1); } 90%, 100% { transform: scale(0); } } @keyframes adr-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } } @keyframes adr-type { 0% { width: 0; } 14%, 80% { width: 100%; } 94%, 100% { width: 0; } } @keyframes adr-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes adr-roll { 0%, 15% { width: 6%; } 70%, 92% { width: 100%; } 100% { width: 6%; } } @keyframes adr-t1 { 0%, 69% { opacity: 1; } 70%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } } @keyframes adr-t2 { 0%, 69% { opacity: 0; } 70%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } } @media (max-width: 560px) { .adr-test i { display: none; } .adr-code pre { font-size: .52rem; } .adr-robot { width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .adr, .adr * { animation: none !important; } .adr-item { opacity: 1; transform: none; } .adr-code .l { width: 100%; } .adr-roll u { width: 100%; } .adr-wait { display: none; } .adr-done { opacity: 1; } .adr-phone { transform: translate(-50%, -50%); } } /* Phone showcase */ .ph { display: grid; grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr); grid-template-areas: "l d r"; gap: 1.6rem; align-items: center; } .ph-col--0 { grid-area: l; } .ph-col--1 { grid-area: r; } .ph-device { grid-area: d; } .ph-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .ph-item { --c: #0a3589; position: relative; width: 100%; display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid rgba(10, 53, 137, .12); background: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 28px -26px rgba(10, 53, 137, .55); transition: border-color .35s, box-shadow .35s, transform .4s var(--ease), background .35s; } .ph-ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); transition: background .35s, color .35s; } .ph-tx { display: grid; gap: .25rem; } .ph-tx b { font-family: var(--font-display); font-size: 1.02rem; color: var(--color-dark); } .ph-tx span { font-size: .86rem; line-height: 1.55; color: #5d667f; } .ph-item.is-on { border-color: var(--c); box-shadow: 0 24px 40px -26px var(--c); transform: translateY(-3px); } .ph-item.is-on .ph-ic { background: var(--c); color: #fff; } .ph-col--0 .ph-item.is-on { transform: translate(8px, -3px); } .ph-col--1 .ph-item.is-on { transform: translate(-8px, -3px); } .ph-device { display: grid; place-items: center; } .ph-phone { position: relative; width: 230px; aspect-ratio: .5; border-radius: 34px; background: #0b1226; border: 4px solid #2a3558; padding: 9px; box-shadow: 0 40px 60px -26px rgba(10, 31, 77, .8), 0 0 0 1px rgba(255, 255, 255, .06); } .ph-cam { position: absolute; left: 50%; top: 13px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #1b2548; z-index: 2; } .ph-screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #f4f7ff; } .ph-s { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.6rem; text-align: center; color: #fff; background: var(--c); opacity: 0; transform: translateX(40px) scale(.96); transition: opacity .5s var(--ease), transform .55s var(--ease); } .ph-s.is-on { opacity: 1; transform: none; } .ph-s-ic { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 26px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4); } .ph-s b { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; } .ph-s-l { display: grid; gap: 6px; width: 100%; margin-top: .6rem; } .ph-s-l u { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .45); } .ph-s-l u.s { width: 60%; justify-self: center; } .ph-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 5px; z-index: 2; } .ph-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: width .3s, background .3s; } .ph-dots i.is-on { width: 18px; border-radius: 3px; background: #fff; } @media (max-width: 1000px) { .ph { grid-template-columns: 1fr; grid-template-areas: "l" "r"; } .ph-device { display: none; } .ph-col--0 .ph-item.is-on, .ph-col--1 .ph-item.is-on { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .ph-item, .ph-s, .ph-ic { transition: none; } } /* Industries: Android app-launcher layout */ .in-ln { display: flex; justify-content: center; } .in-ln-phone { position: relative; width: min(100%, 760px); padding: 1.1rem 1.4rem 1.6rem; border-radius: 34px; background: #0b1226; border: 4px solid #2a3558; box-shadow: 0 40px 70px -34px rgba(10, 31, 77, .85); } .in-ln-status { display: flex; justify-content: space-between; align-items: center; padding: 0 .4rem .9rem; color: #cfd8f3; font-size: .78rem; font-weight: 700; } .in-ln-sb { display: inline-flex; gap: 4px; } .in-ln-sb i { width: 12px; height: 7px; border-radius: 2px; background: #8ea2c4; } .in-ln-sb i:last-child { width: 18px; background: #3ddc84; } .in-ln-widget { position: relative; display: grid; margin-bottom: 1.4rem; } .in-ln-w { grid-area: 1 / 1; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 24px; background: #fff; color: var(--color-dark); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .4s var(--ease), transform .45s var(--ease); pointer-events: none; min-height: 112px; } .in-ln-w.is-on { opacity: 1; transform: none; pointer-events: auto; } .in-ln-wi { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: #3ddc84; color: #04261c; } .in-ln-w small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5d667f; } .in-ln-w b { display: block; font-family: var(--font-display); font-size: 1.15rem; margin: .1rem 0 .2rem; } .in-ln-w p { margin: 0; font-size: .9rem; line-height: 1.5; color: #3d4764; } .in-ln-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem .6rem; } .in-ln-app { --c: #2f6bff; width: 100%; display: grid; justify-items: center; gap: .45rem; padding: .3rem 0; border: 0; background: none; color: #dbe6ff; font: inherit; cursor: pointer; } .in-ln-app--1 { --c: #f52549; } .in-ln-app--2 { --c: #7a4bff; } .in-ln-app--3 { --c: #0fb58a; } .in-ln-app--4 { --c: #ffb020; } .in-ln-app--5 { --c: #38bdf8; } .in-ln-ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--c); color: #fff; box-shadow: 0 12px 20px -10px var(--c); transition: transform .4s var(--ease), box-shadow .4s, border-radius .4s; } .in-ln-n { font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center; max-width: 9ch; } .in-ln-app:hover .in-ln-ic, .in-ln-app:focus-visible .in-ln-ic { transform: translateY(-4px) scale(1.06); } .in-ln-app.is-on .in-ln-ic { border-radius: 50%; transform: scale(1.1); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 16px 26px -10px var(--c); } .in-ln-app.is-on .in-ln-n { color: #fff; } .in-ln-bar { display: block; width: 36%; height: 5px; margin: 1.4rem auto 0; border-radius: 3px; background: rgba(255, 255, 255, .5); } @media (max-width: 640px) { .in-ln-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .in-ln-ic { width: 50px; height: 50px; } .in-ln-w { min-height: 130px; } } @media (prefers-reduced-motion: reduce) { .in-ln-w, .in-ln-ic { transition: none; } } /* Android App Development page: flat alternating backgrounds */ .postid-57 .ov-sec, .postid-57 .in-sec, .postid-57 .faq-svc, .postid-57 .cl-sec { background: #fff; background-image: none; } .postid-57 .ph-sec, .postid-57 .ap-sec, .postid-57 .section--tint { background: #f3f6fc; background-image: none; } /* Why choose us (settings): Android-style rows with toggles */ .st { max-width: 980px; margin: 2rem auto 0; border-radius: 30px; background: #fff; border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 34px 60px -44px rgba(10, 53, 137, .6); overflow: hidden; } .st-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.6rem; background: #eef3ff; color: #0a3589; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .st-top i { width: 34px; height: 8px; border-radius: 4px; background: #c4cde3; } .st-list { list-style: none; margin: 0; padding: .4rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 1rem; align-items: center; padding: 1.15rem 1.6rem; border-bottom: 1px solid rgba(10, 53, 137, .08); } .st-row:nth-child(odd) { border-right: 1px solid rgba(10, 53, 137, .08); } .st-row:nth-last-child(-n+2) { border-bottom: 0; } .st-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #e8efff; color: #0a3589; transition: background .5s, color .5s; transition-delay: calc(var(--i) * .22s + .15s); } .st-tx { display: grid; gap: .2rem; } .st-tx b { font-family: var(--font-display); font-size: 1.04rem; color: var(--color-dark); } .st-tx span { font-size: .88rem; line-height: 1.55; color: #5d667f; } .st-sw { position: relative; flex: none; width: 52px; height: 30px; border-radius: 15px; background: #c9d3ea; border: 2px solid #aab6d3; transition: background .4s, border-color .4s; transition-delay: calc(var(--i) * .22s + .15s); } .st-sw i { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .4s var(--ease), width .3s, height .3s, top .3s; transition-delay: calc(var(--i) * .22s + .15s); } .st.is-in .st-sw { background: #0a3589; border-color: #0a3589; } .st.is-in .st-sw i { transform: translateX(22px); width: 20px; height: 20px; top: 3px; } .st.is-in .st-ic { background: #0a3589; color: #fff; } @media (max-width: 800px) { .st-list { grid-template-columns: 1fr; } .st-row:nth-child(odd) { border-right: 0; } .st-row:nth-last-child(2) { border-bottom: 1px solid rgba(10, 53, 137, .08); } .st-row { padding: 1rem 1.2rem; grid-template-columns: 46px 1fr auto; gap: .8rem; } .st-ic { width: 46px; height: 46px; } } @media (prefers-reduced-motion: reduce) { .st-ic, .st-sw, .st-sw i { transition: none; } } /* Build log: terminal-style process */ .bl-sec { background: linear-gradient(170deg, #050d1f, #0a1f4d); color: #fff; } .bl-sec .section-heading h2 { color: #fff; } .bl-sec .lead { color: rgba(255, 255, 255, .8); } .bl-sec .eyebrow { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); } .bl-sec .vt-grad { background-image: linear-gradient(90deg, #8ec5ff, #c9b6ff 50%, #ff9db3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .bl { max-width: 900px; margin: 2rem auto 0; border-radius: 22px; background: #0b1226; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .bl-bar { display: flex; align-items: center; gap: 6px; padding: .8rem 1rem; background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .1); } .bl-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .bl-bar i:first-child { background: #f52549; } .bl-bar i:nth-child(2) { background: #ffb020; } .bl-bar i:nth-child(3) { background: #3ddc84; } .bl-bar span { margin-left: 10px; font-size: .8rem; color: #8ea2c4; } .bl-list { list-style: none; margin: 0; padding: 1.2rem 1.4rem .4rem; display: grid; gap: 1.1rem; } .bl-task { display: grid; gap: .35rem; } .bl-line { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .8rem; } .bl-n { color: #5d7bb5; font-size: .85rem; } .bl-line b { color: #fff; font-size: .98rem; font-weight: 600; white-space: nowrap; } .bl-prog { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; min-width: 40px; } .bl-prog u { display: block; height: 100%; width: 0; background: #3ddc84; border-radius: 3px; text-decoration: none; transition: width .8s var(--ease); transition-delay: calc(var(--i) * .85s); } .bl-ok { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 6px; background: rgba(61, 220, 132, .15); color: #3ddc84; font-size: .74rem; font-weight: 800; opacity: .25; transition: opacity .4s; transition-delay: calc(var(--i) * .85s + .7s); } .bl-task p { margin: 0; padding-left: 2.1rem; font-family: var(--font-body, system-ui, sans-serif); font-size: .9rem; line-height: 1.6; color: #9fb2d6; } .bl.is-in .bl-prog u { width: 100%; } .bl.is-in .bl-ok { opacity: 1; } .bl-done { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.4rem 1.3rem; color: #3ddc84; font-weight: 800; font-size: .9rem; letter-spacing: .04em; } .bl-done em { font-style: normal; color: #8ea2c4; font-weight: 500; } .bl-ok2 { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #3ddc84; color: #04261c; } .bl-cur { width: 8px; height: 16px; background: #3ddc84; animation: dmk-blink 1s steps(1) infinite; } @keyframes dmk-blink { 50% { opacity: 0; } } @media (max-width: 640px) { .bl-line { grid-template-columns: auto 1fr auto; } .bl-prog { grid-column: 1 / -1; order: 5; } .bl-line b { white-space: normal; } .bl-task p { padding-left: 0; } .bl-list { padding: 1rem 1rem .3rem; } } @media (prefers-reduced-motion: reduce) { .bl-prog u, .bl-ok { transition: none; } .bl-cur { animation: none; } } .postid-57 .st-sec { background: #f3f6fc; } /* iOS App Development hero illustration */ .ios { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .ios-phone { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: .49; transform: translate(-50%, -50%); border-radius: 34px; background: #0b0f1d; border: 3px solid #3a4468; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 2px #151b33; padding: 7px; animation: ios-float 7s ease-in-out infinite; z-index: 3; } .ios-island { position: absolute; left: 50%; top: 12px; width: 34%; height: 12px; margin-left: -17px; border-radius: 8px; background: #000; z-index: 2; } .ios-screen { position: relative; height: 100%; border-radius: 28px; background: #f2f2f7; padding: 30px 8px 8px; display: grid; gap: 6px; align-content: start; overflow: hidden; } .ios-nav { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; } .ios-nav b { width: 46%; height: 9px; border-radius: 5px; background: #0b1a3f; } .ios-pill { width: 18px; height: 10px; border-radius: 5px; background: #0a84ff; } .ios-card { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); opacity: 0; transform: translateY(14px) scale(.97); animation: ios-in 8s var(--ease) infinite; } .ios-card--2 { animation-delay: .6s; } .ios-card--3 { animation-delay: 1.2s; } .ios-ic { flex: none; width: 24px; height: 24px; border-radius: 7px; background: #0a84ff; } .ios-ic--b { background: #ff453a; } .ios-ic--c { background: #30d158; } .ios-tx { flex: 1; display: grid; gap: 4px; } .ios-tx u { display: block; height: 5px; border-radius: 3px; background: #0b1a3f; opacity: .8; text-decoration: none; } .ios-tx u.s { width: 58%; background: #c7c7cc; opacity: 1; height: 4px; } .ios-tog { position: relative; flex: none; width: 24px; height: 14px; border-radius: 8px; background: #d1d1d6; animation: ios-tog 8s steps(1) infinite; } .ios-tog i { position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); animation: ios-knob 8s steps(1) infinite; } .ios-card--2 .ios-tog, .ios-card--2 .ios-tog i { animation-delay: .5s; } .ios-card--3 .ios-tog, .ios-card--3 .ios-tog i { animation-delay: 1s; } .ios-tabs { position: absolute; left: 10px; right: 10px; bottom: 16px; display: flex; justify-content: space-around; padding: 7px 4px; border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .4); } .ios-tabs i { width: 14px; height: 14px; border-radius: 4px; background: #c7c7cc; } .ios-tabs i.on { background: #0a84ff; animation: ios-tab 8s ease-in-out infinite; } .ios-home { position: absolute; left: 50%; bottom: 5px; width: 34%; height: 4px; margin-left: -17%; border-radius: 3px; background: #0b0f1d; opacity: .7; } .ios-ring { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; margin: -60% 0 0 -60%; border-radius: 50%; border: 2px solid rgba(10, 132, 255, .5); opacity: 0; animation: ios-haptic 8s ease-out infinite; pointer-events: none; } .ios-pad { left: 0; top: 14%; width: 40%; aspect-ratio: 1.25; padding: .55rem; display: grid; gap: 6px; align-content: start; animation: aa-chipfloat 7s ease-in-out -2s infinite; z-index: 1; } .ios-pad-bar { height: 8px; width: 46%; border-radius: 4px; background: #0a84ff; } .ios-pad-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .ios-pad-row i { height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .18); } .ios-pad-row i:first-child { background: rgba(10, 132, 255, .6); } .ios-pad-l { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); } .ios-pad-l.s { width: 60%; } .ios-logo { position: absolute; left: 34%; top: 2%; width: 44px; height: 44px; background: #fff; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); animation: ios-bob 4.4s ease-in-out infinite; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; z-index: 4; } .ios-code { right: 0; top: 6%; width: 44%; padding: .55rem .7rem; background: rgba(6, 14, 34, .82); animation: aa-chipfloat 6.4s ease-in-out -1s infinite; z-index: 2; } .ios-dots { display: flex; align-items: center; gap: 4px; margin-bottom: .35rem; } .ios-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .ios-dots span { margin-left: 5px; font-size: .56rem; color: rgba(255, 255, 255, .65); } .ios-code pre { margin: 0; font: 600 .6rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfd8f3; white-space: pre; } .ios-code .l { display: block; overflow: hidden; width: 0; white-space: nowrap; animation: ios-type 8s steps(24) infinite; } .ios-code .l2 { animation-delay: .6s; } .ios-code .l3 { animation-delay: 1.2s; } .ios-code b { color: #ff7ab2; font-weight: 600; } .ios-code em { color: #7fd1ff; font-style: normal; } .ios-code i { color: #ffd166; font-style: normal; } .ios-hig { left: 0; bottom: 8%; display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; color: #fff; font-size: .74rem; font-weight: 700; animation: aa-chipfloat 5.8s ease-in-out -3s infinite; z-index: 4; } .ios-hig i { display: block; font-style: normal; font-weight: 500; font-size: .6rem; color: rgba(255, 255, 255, .65); } .ios-chk { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #30d158; color: #04261c; animation: ios-pop 4s ease-in-out infinite; } .ios-store { right: 0; bottom: 6%; width: 42%; padding: .6rem .75rem; color: #fff; animation: aa-chipfloat 6.2s ease-in-out -2s infinite; z-index: 4; } .ios-store-h { display: flex; align-items: center; gap: .4rem; font-size: .74rem; } .ios-store-h em { margin-left: auto; font-style: normal; font-size: .58rem; color: rgba(255, 255, 255, .6); } .ios-a { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #0a84ff; color: #fff; font-weight: 800; font-size: .72rem; } .ios-steps { display: flex; gap: 4px; margin: .5rem 0 .4rem; } .ios-steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); animation: ios-step 8s steps(1) infinite; } .ios-steps i.b { animation-name: ios-step2; } .ios-steps i.c { animation-name: ios-step3; } .ios-state { position: relative; height: 14px; font-size: .62rem; font-weight: 800; } .ios-wait, .ios-ok { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; } .ios-wait { color: rgba(255, 255, 255, .7); animation: ios-t1 8s steps(1) infinite; } .ios-ok { color: #30d158; opacity: 0; animation: ios-t2 8s steps(1) infinite; } @keyframes ios-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } } @keyframes ios-in { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 8%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(14px) scale(.97); } } @keyframes ios-tog { 0%, 14% { background: #d1d1d6; } 15%, 90% { background: #30d158; } 91%, 100% { background: #d1d1d6; } } @keyframes ios-knob { 0%, 14% { transform: none; } 15%, 90% { transform: translateX(10px); } 91%, 100% { transform: none; } } @keyframes ios-tab { 0%, 100% { transform: scale(1); } 45%, 55% { transform: scale(1.25); } } @keyframes ios-haptic { 0%, 38% { opacity: 0; transform: scale(.7); } 42% { opacity: .8; } 60%, 100% { opacity: 0; transform: scale(1.1); } } @keyframes ios-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } } @keyframes ios-type { 0% { width: 0; } 14%, 80% { width: 100%; } 94%, 100% { width: 0; } } @keyframes ios-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes ios-step { 0%, 14% { background: rgba(255, 255, 255, .18); } 15%, 95% { background: #0a84ff; } 96%, 100% { background: rgba(255, 255, 255, .18); } } @keyframes ios-step2 { 0%, 38% { background: rgba(255, 255, 255, .18); } 39%, 95% { background: #0a84ff; } 96%, 100% { background: rgba(255, 255, 255, .18); } } @keyframes ios-step3 { 0%, 64% { background: rgba(255, 255, 255, .18); } 65%, 95% { background: #30d158; } 96%, 100% { background: rgba(255, 255, 255, .18); } } @keyframes ios-t1 { 0%, 64% { opacity: 1; } 65%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } } @keyframes ios-t2 { 0%, 64% { opacity: 0; } 65%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } } @media (max-width: 560px) { .ios-hig i { display: none; } .ios-code pre { font-size: .5rem; } .ios-logo { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .ios, .ios * { animation: none !important; } .ios-card { opacity: 1; transform: none; } .ios-code .l { width: 100%; } .ios-tog { background: #30d158; } .ios-tog i { transform: translateX(10px); } .ios-wait { display: none; } .ios-ok { opacity: 1; } .ios-steps i { background: #30d158; } .ios-phone { transform: translate(-50%, -50%); } } /* App cards: App Store listing style */ .ap2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } .ap2-card { --a: #0a84ff; --b: #64b5ff; height: 100%; display: grid; grid-template-rows: auto 1fr; border-radius: 26px; background: #fff; border: 1px solid rgba(10, 53, 137, .1); box-shadow: 0 24px 40px -32px rgba(10, 53, 137, .6); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; } .ap2-card:hover { transform: scale(1.02) translateY(-4px); box-shadow: 0 36px 50px -30px rgba(10, 53, 137, .7); } .ap2-art { position: relative; height: 150px; display: grid; place-items: center; background: var(--a); overflow: hidden; } .ap2-blob { position: absolute; width: 190px; height: 190px; right: -60px; top: -70px; border-radius: 50%; background: var(--b); opacity: .55; transition: transform .7s var(--ease); } .ap2-art::after { content: ""; position: absolute; width: 120px; height: 120px; left: -40px; bottom: -60px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .ap2-bigic { position: relative; z-index: 1; color: #fff; transition: transform .6s var(--ease); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); } .ap2-card:hover .ap2-blob { transform: scale(1.3); } .ap2-card:hover .ap2-bigic { transform: scale(1.12) rotate(-6deg); } .ap2-body { display: grid; align-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem 1.2rem; } .ap2-body p { margin: 0; font-size: .88rem; line-height: 1.6; color: #5d667f; } .ap2-row { display: flex; align-items: center; gap: .65rem; padding-top: .85rem; border-top: 1px solid rgba(10, 53, 137, .1); } .ap2-app { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, var(--b), var(--a)); color: #fff; } .ap2-name { flex: 1; min-width: 0; display: grid; } .ap2-name b { font-size: .9rem; line-height: 1.2; color: var(--color-dark); } .ap2-name em { font-style: normal; font-size: .72rem; color: #8a93ab; } .ap2-get { flex: none; padding: .35rem .9rem; border-radius: 999px; background: #eef2fb; color: #0a84ff; font-weight: 800; font-size: .76rem; text-decoration: none; transition: background .25s, color .25s; } .ap2-get:hover { background: #0a84ff; color: #fff; } @media (max-width: 1100px) { .ap2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .ap2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .ap2 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ap2-card, .ap2-blob, .ap2-bigic { transition: none; } .ap2-card:hover { transform: none; } } /* Industries: Spotlight-style search list (iOS) */ .in-sp { display: flex; justify-content: center; } .in-sp-box { width: min(100%, 720px); padding: 1rem; border-radius: 28px; background: rgba(244, 247, 255, .9); border: 1px solid rgba(10, 53, 137, .12); box-shadow: 0 34px 60px -40px rgba(10, 53, 137, .7); backdrop-filter: blur(10px); } .in-sp-search { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 14px; background: rgba(120, 130, 160, .16); color: #6b7490; } .in-sp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1rem; color: var(--color-dark); } .in-sp-search:focus-within { box-shadow: 0 0 0 3px rgba(10, 132, 255, .35); } .in-sp-list { list-style: none; margin: .8rem 0 0; padding: 0; max-height: 440px; overflow-y: auto; display: grid; gap: 2px; border-radius: 16px; background: #fff; } .in-sp-list li[hidden] { display: none; } .in-sp-i { --c: #0a84ff; width: 100%; display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; border-bottom: 1px solid rgba(10, 53, 137, .07); transition: background .25s; } .in-sp-i--1 { --c: #ff9f0a; } .in-sp-i--2 { --c: #30d158; } .in-sp-i--3 { --c: #ff375f; } .in-sp-i--4 { --c: #bf5af2; } .in-sp-i--5 { --c: #40c8e0; } .in-sp-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; } .in-sp-t { flex: 1; min-width: 0; display: grid; gap: .1rem; } .in-sp-t b { font-size: .98rem; color: var(--color-dark); } .in-sp-t span { font-size: .82rem; line-height: 1.45; color: #6b7490; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s; } .in-sp-go { flex: none; color: #b5bccf; transform: rotate(-90deg); transition: transform .3s var(--ease), color .3s; } .in-sp-i:hover, .in-sp-i.is-on { background: #eef4ff; } .in-sp-i.is-on .in-sp-t span, .in-sp-i:hover .in-sp-t span, .in-sp-i:focus-visible .in-sp-t span { max-height: 60px; opacity: 1; } .in-sp-i.is-on .in-sp-go { color: #0a84ff; transform: rotate(0); } .in-sp-none { margin: 1rem 0 .4rem; text-align: center; color: #6b7490; font-size: .92rem; } @media (prefers-reduced-motion: reduce) { .in-sp-t span, .in-sp-go, .in-sp-i { transition: none; } } .postid-58 .ap2-sec, .postid-58 .in-sec { background-image: none; } .ap2-app { background: var(--a); } /* iOS App Development page: flat alternating backgrounds */ .postid-58 .ov-sec, .postid-58 .in-sec, .postid-58 .ap-sec, .postid-58 .faq-svc, .postid-58 .cl-sec { background: #fff; background-image: none; } .postid-58 .ap2-sec, .postid-58 .bn-sec, .postid-58 .section--tint { background: #f3f6fc; background-image: none; } .postid-58 .ap-sec { background: #f3f6fc; background-image: none; } /* Contact page: "Let's Connect" panel */ .cn { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 28px; background: #06152f; color: #fff; box-shadow: 0 34px 60px -40px rgba(6, 21, 47, .9); position: relative; overflow: hidden; } .cn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #2f6bff, #f52549, #7dd3fc, transparent); background-size: 200% 100%; animation: footer-line 8s linear infinite; } .cn-title { margin: 0 0 .8rem; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; color: #dbe6ff; } .cn-text { margin: 0 0 1.8rem; font-size: 1.08rem; line-height: 1.65; color: #b8c6e2; max-width: 46ch; } .cn-links { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; } .cn-links a { display: grid; justify-items: center; gap: .6rem; width: 84px; color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem; text-align: center; } .cn-ic { width: 52px; height: 52px; display: block; transition: transform .35s var(--ease), filter .35s; } .cn-ic svg { display: block; width: 100%; height: 100%; } .cn-links a:hover .cn-ic, .cn-links a:focus-visible .cn-ic { transform: translateY(-6px) scale(1.08); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); } .cn-links a:hover .cn-lb, .cn-links a:focus-visible .cn-lb { text-decoration: underline; text-underline-offset: 4px; } .cn-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .12); } .cn-stats > div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: .35rem; padding: 1.4rem .6rem; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .12); } .cn-stats > div:not(:nth-child(3n+1)) { border-left: 1px solid rgba(255, 255, 255, .12); } .cn-stats > div:nth-last-child(-n+3) { border-bottom: 0; } .cn-stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #fff; } .cn-stats dt { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #b8c6e2; } @media (max-width: 520px) { .cn-links { justify-content: space-between; } .cn-links a { width: 64px; font-size: .8rem; } .cn-ic { width: 46px; height: 46px; } .cn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cn-stats > div:not(:nth-child(3n+1)) { border-left: 0; } .cn-stats > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .12); } .cn-stats > div:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, .12); } .cn-stats > div:nth-last-child(-n+2) { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .cn::before { animation: none; } .cn-ic { transition: none; } .cn-links a:hover .cn-ic { transform: none; } } .cn-links { justify-content: space-between; gap: 1rem .5rem; } .cn-links a { width: 68px; font-size: .86rem; } /* Contact "Let's Connect": compact, no underline */ .cn { padding: clamp(1.1rem, 2.4vw, 1.6rem); } .cn-title { margin-bottom: .5rem; font-size: clamp(1.9rem, 3.2vw, 2.5rem); } .cn-text { margin-bottom: 1.1rem; font-size: 1rem; line-height: 1.55; } .cn-links { margin-bottom: 1.1rem; } .cn-links a, .cn-links a:hover, .cn-links a:focus-visible, .cn-links a:hover .cn-lb { text-decoration: none; } .cn-ic { width: 46px; height: 46px; } .cn-stats > div { padding: .85rem .5rem; gap: .25rem; } .cn-stats dd { font-size: clamp(1.3rem, 2vw, 1.7rem); } .cn-stats dt { font-size: .64rem; } @media (min-width: 960px) { .office-map { aspect-ratio: 2 / 1; } } .cn-stats > div { padding: .65rem .4rem; } /* Wallet process: stacked passes */ .wl { --strip: 66px; --h: 232px; position: relative; max-width: 760px; margin: 2rem auto 0; height: calc(var(--strip) * (var(--n) - 1) + var(--h)); } .wl-card { --c: #0a84ff; position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--strip) + var(--shift, 0) * (var(--h) - var(--strip))); height: var(--h); z-index: calc(var(--i) + 1); border-radius: 24px; background: var(--c); color: #fff; box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .35), 0 24px 34px -26px rgba(10, 31, 77, .65); overflow: hidden; transition: top .6s var(--ease); } .wl-head { width: 100%; height: var(--strip); display: flex; align-items: center; gap: .9rem; padding: 0 1.3rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .wl-n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); font-family: var(--font-display); font-weight: 700; } .wl-t { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; } .wl-step { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .wl-body { padding: .2rem 1.5rem 1.2rem calc(1.3rem + 36px + .9rem); display: grid; gap: .8rem; align-content: start; opacity: 0; transform: translateY(8px); transition: opacity .4s .12s, transform .45s var(--ease) .12s; } .wl-body p { margin: 0; line-height: 1.65; font-size: .98rem; color: rgba(255, 255, 255, .94); } .wl-out { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .22); font-weight: 700; font-size: .8rem; } .wl-card.is-on .wl-body { opacity: 1; transform: none; } .wl-head:focus-visible { outline: 3px solid #fff; outline-offset: -4px; border-radius: 24px; } @media (max-width: 640px) { .wl { --h: 310px; --strip: 62px; } .wl-step { display: none; } .wl-body { padding-left: 1.3rem; } .wl-t { font-size: 1.02rem; } } @media (prefers-reduced-motion: reduce) { .wl-card, .wl-body { transition: none; } } .postid-58 .wl-sec { background: #f3f6fc; background-image: none; } /* Home service cards: solid Learn more buttons (no gradient) */ .cap .link-arrow { background: #0a3589; background-image: none; color: #fff; border-color: #0a3589; box-shadow: 0 12px 22px -14px rgba(10, 53, 137, .7); } .cap .link-arrow:hover, .cap:hover .link-arrow:hover, .cap .link-arrow:focus-visible { background: #f52549; background-image: none; color: #fff; border-color: #f52549; box-shadow: 0 14px 26px -12px rgba(245, 37, 73, .55); } /* App Development category hero illustration */ .apd { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.05; margin-inline: auto; animation: rise 1s var(--ease) .2s both; } .apd-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .apd-l { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .5; stroke-dasharray: 1.2 1.6; } .apd-p { fill: none; stroke: #ffd166; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; animation: dmk-flow 3s linear infinite; filter: drop-shadow(0 0 1.2px #ffd166); } .apd-p--2 { animation-delay: -.8s; stroke: #7dd3fc; filter: drop-shadow(0 0 1.2px #7dd3fc); } .apd-p--3 { animation-delay: -1.5s; stroke: #7ff0cd; filter: drop-shadow(0 0 1.2px #7ff0cd); } .apd-p--4 { animation-delay: -2.2s; stroke: #ff9db3; filter: drop-shadow(0 0 1.2px #ff9db3); } .apd-cloud { left: 50%; top: 3%; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; color: #fff; font-size: .8rem; font-weight: 700; z-index: 3; animation: apd-cloud 5s ease-in-out infinite; } .apd-cloud i, .apd-rel i.apd-st { display: block; font-style: normal; font-weight: 500; font-size: .62rem; color: rgba(255, 255, 255, .65); } .apd-cl-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #2f6bff; color: #fff; } .apd-phone { position: absolute; top: 24%; width: 33%; aspect-ratio: .49; border-radius: 30px; background: #0b0f1d; border: 3px solid #3a4468; padding: 6px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); z-index: 2; } .apd-phone--ios { left: 6%; transform: rotate(-6deg); animation: apd-fl1 7s ease-in-out infinite; } .apd-phone--and { right: 6%; transform: rotate(6deg); animation: apd-fl2 7s ease-in-out -3s infinite; border-radius: 24px; } .apd-isl { position: absolute; left: 50%; top: 9px; width: 34%; height: 10px; margin-left: -17%; border-radius: 6px; background: #000; z-index: 2; } .apd-isl--dot { width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; } .apd-scr { position: relative; height: 100%; border-radius: 24px; background: #f2f2f7; padding: 26px 7px 7px; display: grid; gap: 5px; align-content: start; overflow: hidden; } .apd-phone--and .apd-scr { border-radius: 18px; background: #f4f7ff; } .apd-bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 3px; } .apd-bar b { width: 46%; height: 8px; border-radius: 4px; background: #0b1a3f; } .apd-bar i { width: 16px; height: 9px; border-radius: 5px; background: #0a84ff; } .apd-bar--a { background: #3ddc84; border-radius: 10px; padding: 6px; } .apd-bar--a b { background: #0b2a17; } .apd-bar--a i { background: #fff; width: 12px; height: 12px; border-radius: 50%; } .apd-it { display: flex; align-items: center; gap: 5px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); opacity: 0; transform: translateY(12px); animation: apd-in 8s var(--ease) infinite; } .apd-it--2 { animation-delay: .6s; } .apd-it--3 { animation-delay: 1.2s; } .ap-i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #0a84ff; } .ap-i--b { background: #ff453a; } .ap-i--c { background: #30d158; } .ap-i--g { background: #3ddc84; } .apd-it u { flex: 1; height: 5px; border-radius: 3px; background: #0b1a3f; opacity: .75; text-decoration: none; } .apd-tab { position: absolute; left: 9px; right: 9px; bottom: 12px; height: 18px; border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 5px 10px -6px rgba(0, 0, 0, .4); } .apd-fab { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #0a3589; color: #fff; animation: apd-fab 8s ease-in-out infinite; } .apd-os { position: absolute; bottom: -34px; left: 50%; width: 30px; height: 30px; margin-left: -15px; background: #fff; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); } .apd-os--and { background: #3ddc84; } .apd-rel { display: flex; align-items: center; gap: .55rem; padding: .5rem .75rem; color: #fff; font-size: .74rem; font-weight: 700; z-index: 4; } .apd-rel--play { left: 0; bottom: 4%; animation: aa-chipfloat 5.8s ease-in-out -2s infinite; } .apd-rel--store { right: 0; bottom: 4%; animation: aa-chipfloat 6.2s ease-in-out -4s infinite; } .apd-tri { width: 0; height: 0; border-left: 12px solid #3ddc84; border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(0 0 4px rgba(61, 220, 132, .7)); } .apd-a { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #0a84ff; color: #fff; font-weight: 800; font-size: .76rem; } .apd-st { position: relative; height: 12px; } .apd-st b { position: absolute; left: 0; top: 0; font-weight: 800; font-size: .62rem; } .apd-st .w { color: rgba(255, 255, 255, .7); animation: ios-t1 8s steps(1) infinite; } .apd-st .l { color: #3ddc84; opacity: 0; animation: ios-t2 8s steps(1) infinite; } .apd-rel--store .apd-st .w, .apd-rel--store .apd-st .l { animation-delay: .8s; } .apd-dl { left: 50%; bottom: 0; margin-left: -62px; width: 124px; display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; color: #fff; font-size: .7rem; font-weight: 700; z-index: 5; animation: aa-chipfloat 5.4s ease-in-out -1s infinite; } .apd-dl i { display: block; font-style: normal; font-weight: 500; font-size: .58rem; color: rgba(255, 255, 255, .65); } .apd-dl-ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #30d158; color: #04261c; animation: apd-hop 2.4s ease-in-out infinite; } @keyframes apd-fl1 { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-8px); } } @keyframes apd-fl2 { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-8px); } } @keyframes apd-cloud { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } } @keyframes apd-in { 0% { opacity: 0; transform: translateY(12px); } 8%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(12px); } } @keyframes apd-fab { 0%, 35% { transform: scale(0); } 42%, 80% { transform: scale(1); } 90%, 100% { transform: scale(0); } } @keyframes apd-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @media (max-width: 560px) { .apd-cloud i, .apd-rel i.apd-st, .apd-dl i { display: none; } .apd-os { width: 24px; height: 24px; margin-left: -12px; bottom: -28px; } .apd-dl { width: 104px; margin-left: -52px; } } @media (prefers-reduced-motion: reduce) { .apd, .apd * { animation: none !important; } .apd-it { opacity: 1; transform: none; } .apd-st .w { display: none; } .apd-st .l { opacity: 1; } .apd-p { display: none; } .apd-cloud { transform: translateX(-50%); } } html.smooth-scroll { scroll-behavior: auto; } /* Footer wordmark: no costly SVG filter while the letters are moving; applied once they have settled */ .footer-word:not(.is-set) { filter: none; } .footer-word.is-set { filter: url(#smac-round); } @media (max-width: 1100px) { .footer-word.is-set { filter: url(#smac-round-md); } } @media (max-width: 640px) { .footer-word.is-set { filter: url(#smac-round-sm); } } /* Logo from Settings > Brand: fitted without stretching, whatever size or shape was uploaded */ .logo-custom { width: min(var(--lw, 190px), 100%) !important; height: auto !important; aspect-ratio: auto !important; max-width: 100%; object-fit: contain; border-radius: 0 !important; } .site-logo img.logo-custom { max-height: 56px; width: auto !important; max-width: var(--lw, 190px); } @media (max-width: 1100px) { .site-logo img.logo-custom { max-width: min(var(--lw, 190px), 160px); } } .footer-brand .logo-plate img.logo-custom { max-height: 60px; width: auto !important; max-width: var(--lw, 200px); } .mobile-nav-head .logo-plate img.logo-custom { max-height: 42px; width: auto !important; max-width: var(--lw, 130px); }