would fight the hero sequence on the homepage */ .page-home #main { animation: none; } /* "backwards" fill: hidden during each delay, but no leftover styles afterwards (hover keeps working) */ .page-home.hero-go .site-header__inner { animation: hero-down 0.7s var(--ease) 0s backwards; } .page-home.hero-go .hero .badge:not(.badge--new) { animation: hero-fade 0.6s var(--ease) 0.08s backwards; } .page-home.hero-go .hero h1 { animation: hero-up 0.8s var(--ease) 0.2s backwards; } /* fallback when lines could not be split */ .page-home.hero-go .hero h1.is-split { animation: none; } .page-home.hero-go .hero .lead { animation: hero-up 0.7s var(--ease) 0.5s backwards; } .page-home.hero-go .hero__actions .btn--primary { animation: hero-left 0.7s var(--ease) 0.65s backwards; } .page-home.hero-go .hero__actions .btn--secondary { animation: hero-right 0.7s var(--ease) 0.65s backwards; } /* .hero__visual: load-in zoom + continuous float are declared together in the block at the end of this file */ .page-home.hero-go .hero__trust { animation: hero-fade 0.6s var(--ease) 0.9s backwards; } @keyframes hero-down { from { opacity: 0; transform: translateY(-18px); } } @keyframes hero-fade { from { opacity: 0; transform: translateY(8px); } } @keyframes hero-up { from { opacity: 0; transform: translateY(22px); } } @keyframes hero-left { from { opacity: 0; transform: translateX(-34px); } } @keyframes hero-right { from { opacity: 0; transform: translateX(34px); } } @keyframes hero-zoom { from { opacity: 0; transform: scale(0.93); } } /* Heading lines (created by site.js while the animation plays, then removed) */ .hl { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; } .hl__in { display: block; } .page-home:not(.hero-go) .hl__in { transform: translateY(105%); } .page-home.hero-go .hl__in { animation: hero-line 0.75s var(--ease) calc(0.2s + var(--i, 0) * 0.11s) backwards; } @keyframes hero-line { from { transform: translateY(105%); } } /* ========================================================================== Dashboard illustration: continuous, natural floating (Apple-style). Uses the individual translate / scale properties, so it composes with the load-in zoom (which uses transform) without conflict. Appearance is unchanged. - drift: 21s closed loop sampled from sine waves = 9px up/down (7s cycle) + 5px left/right (10.5s cycle) - breathe: gentle 1 -> 1.02 scale, 8s ease-in-out ========================================================================== */ .page-home.hero-go .hero__visual { animation: hero-zoom 0.95s var(--ease) 0.4s backwards, dash-drift 21s linear 1.4s infinite, dash-breathe 8s ease-in-out 1.4s infinite alternate; will-change: translate, scale; } .page-home.hero-go .hero__visual.is-paused { animation-play-state: paused; } @keyframes dash-drift { 0% { translate: 0px 0px; } 2.38% { translate: 1.47px -0.45px; } 4.76% { translate: 2.82px -1.69px; } 7.14% { translate: 3.91px -3.5px; } 9.52% { translate: 4.65px -5.5px; } 11.9% { translate: 4.99px -7.31px; } 14.29% { translate: 4.87px -8.55px; } 16.67% { translate: 4.33px -9px; } 19.05% { translate: 3.4px -8.55px; } 21.43% { translate: 2.17px -7.31px; } 23.81% { translate: 0.75px -5.5px; } 26.19% { translate: -0.75px -3.5px; } 28.57% { translate: -2.17px -1.69px; } 30.95% { translate: -3.4px -0.45px; } 33.33% { translate: -4.33px 0px; } 35.71% { translate: -4.87px -0.45px; } 38.1% { translate: -4.99px -1.69px; } 40.48% { translate: -4.65px -3.5px; } 42.86% { translate: -3.91px -5.5px; } 45.24% { translate: -2.82px -7.31px; } 47.62% { translate: -1.47px -8.55px; } 50% { translate: 0px -9px; } 52.38% { translate: 1.47px -8.55px; } 54.76% { translate: 2.82px -7.31px; } 57.14% { translate: 3.91px -5.5px; } 59.52% { translate: 4.65px -3.5px; } 61.9% { translate: 4.99px -1.69px; } 64.29% { translate: 4.87px -0.45px; } 66.67% { translate: 4.33px 0px; } 69.05% { translate: 3.4px -0.45px; } 71.43% { translate: 2.17px -1.69px; } 73.81% { translate: 0.75px -3.5px; } 76.19% { translate: -0.75px -5.5px; } 78.57% { translate: -2.17px -7.31px; } 80.95% { translate: -3.4px -8.55px; } 83.33% { translate: -4.33px -9px; } 85.71% { translate: -4.87px -8.55px; } 88.1% { translate: -4.99px -7.31px; } 90.48% { translate: -4.65px -5.5px; } 92.86% { translate: -3.91px -3.5px; } 95.24% { translate: -2.82px -1.69px; } 97.62% { translate: -1.47px -0.45px; } 100% { translate: 0px 0px; } } @keyframes dash-breathe { from { scale: 1; } to { scale: 1.02; } } /* ========================================================================== Our Founder section (About page). Scoped with .founder / .founder-card. Uses the site's tokens: colors, fonts, radii and easing are unchanged. ========================================================================== */ .founder { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(110px, 14vw, 200px); } /* extra room below for future founder details or team members */ /* Background: soft animated gradient glow + gentle floating shapes ---------- */ .founder__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .founder__glow { position: absolute; top: 4%; left: 50%; width: min(900px, 130%); height: 560px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 85, 149, 0.22), rgba(110, 151, 214, 0.1) 55%, transparent); filter: blur(40px); animation: fdr-glow 14s ease-in-out infinite alternate; } .founder__glow--2 { top: auto; bottom: -180px; left: 18%; width: 560px; height: 420px; background: radial-gradient(closest-side, rgba(110, 151, 214, 0.26), transparent); animation-duration: 18s; animation-delay: -6s; } @keyframes fdr-glow { 0% { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.85; } 100% { transform: translate3d(5%, 6%, 0) scale(1.12); opacity: 1; } } .founder__shape { position: absolute; border: 1.5px solid rgba(43, 85, 149, 0.2); animation: fdr-float 11s ease-in-out infinite alternate; } .founder__shape--ring { top: 14%; left: 8%; width: 96px; height: 96px; border-radius: 50%; } .founder__shape--ring2 { bottom: 20%; right: 9%; width: 140px; height: 140px; border-radius: 50%; border-color: rgba(110, 151, 214, 0.28); animation-duration: 14s; animation-delay: -4s; } .founder__shape--square { top: 38%; right: 13%; width: 54px; height: 54px; border-radius: 14px; rotate: 16deg; animation-duration: 12s; animation-delay: -7s; } .founder__shape--dot { bottom: 26%; left: 15%; width: 12px; height: 12px; border: 0; border-radius: 50%; background: rgba(43, 85, 149, 0.35); animation-duration: 9s; animation-delay: -2s; } .founder__shape--dot2 { top: 22%; right: 26%; width: 8px; height: 8px; border: 0; border-radius: 50%; background: rgba(110, 151, 214, 0.55); animation-duration: 10s; animation-delay: -5s; } @keyframes fdr-float { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(14px, -22px, 0); } } /* Fade-up when the section enters the viewport (hidden only once the script has armed it) */ .founder.is-armed:not(.is-in) .section-head, .founder.is-armed:not(.is-in) .founder-card { opacity: 0; } .founder.is-in .section-head { animation: fdr-up 0.9s var(--ease) backwards; } .founder.is-in .founder-card { animation: fdr-up 1s var(--ease) 0.25s backwards; } @keyframes fdr-up { from { opacity: 0; transform: translateY(32px); } } /* Members row: cards sit centered; more can be added and they will wrap neatly ---------- */ .founder__members { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } /* Founder card (glassmorphism) ------------------------------------------- */ .founder-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 420px); padding: clamp(40px, 5vw, 60px) clamp(24px, 4vw, 44px) clamp(36px, 4.5vw, 52px); text-align: center; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 32px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 1px 0 #fff, 0 30px 70px -36px rgba(27, 58, 107, 0.45), 0 2px 10px rgba(0, 0, 0, 0.04); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .founder-card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 #fff, 0 44px 90px -34px rgba(43, 85, 149, 0.55), 0 0 0 1px rgba(110, 151, 214, 0.16); } /* Photo: circular, empty placeholder. To use a real photo, put an inside .founder-card__photo. */ .founder-card__photo { position: relative; display: grid; place-items: center; width: clamp(160px, 20vw, 196px); aspect-ratio: 1; margin-bottom: 1.75rem; border-radius: 50%; padding: 6px; background: conic-gradient(from var(--angle), var(--c-blue), var(--c-blue-light), #fff 40%, var(--c-blue-light) 60%, var(--c-blue)); animation: fdr-ring 9s linear infinite; box-shadow: 0 18px 44px -14px rgba(43, 85, 149, 0.55); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } @keyframes fdr-ring { to { --angle: 360deg; } } .founder-card:hover .founder-card__photo { transform: scale(1.04); box-shadow: 0 24px 56px -14px rgba(43, 85, 149, 0.7); } .founder-card__photo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; } .founder-card__photo img { position: absolute; inset: 6px; z-index: 2; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; object-fit: cover; } .founder-card__ph { position: relative; z-index: 1; display: grid; place-items: center; width: calc(100% - 12px); height: calc(100% - 12px); overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%), linear-gradient(145deg, var(--c-blue-dark) 0%, var(--c-blue) 55%, var(--c-blue-light) 100%); } .founder-card__ph::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.9s var(--ease); } .founder-card:hover .founder-card__ph::after { transform: translateX(120%); } .founder-card__ph svg { position: relative; z-index: 1; width: 46%; height: 46%; fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .founder-card h3 { margin: 0 0 0.4rem; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: -0.03em; } .founder-card p { margin: 0; color: var(--c-blue); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; } /* ========================================================================== Mobile hardening. Loads last, so it can fine-tune small screens without changing the design on tablet/desktop. Nothing here alters colors, fonts or the overall layout — only spacing/size tweaks scoped to narrow widths, plus a couple of safety nets and performance trims for phone GPUs. ========================================================================== */ /* NOTE: an `html, body { overflow-x: hidden; }` safety net used to live here, added as a guard against decorative elements causing horizontal overflow. It was removed: setting overflow-x on / is a documented cause of exactly the "first swipe doesn't scroll" bug on iOS Safari, since it can interfere with the browser's native scroll-gesture recognition. Every section with large decorative shapes (hero, services, footer, founder, contact, page-hero, cards, carousels) already clips its own overflow individually, which is the correct, safe way to prevent horizontal scrollbars without touching html/body. */ /* Hero dashboard: keep it comfortable on the smallest phones (<400px wide) */ @media (max-width: 400px) { .dash { padding: 16px; } .dash__kpis { grid-template-columns: 1fr; gap: 10px; } .kpi { padding: 14px; } .kpi b { font-size: 1.375rem; } .bars { height: 96px; padding: 12px; } .float-chip { padding: 10px 14px; font-size: 0.8125rem; } .float-chip--a { top: -22px; } .float-chip--b { bottom: -16px; } } /* Performance: several sections layer heavy blur() + backdrop-filter for a glass/glow effect. That is fine on desktop GPUs; on phones it is trimmed a little so scrolling stays smooth, without changing how it looks. */ @media (max-width: 640px) { .hero__mesh span { filter: blur(60px); } .svc__blob { filter: blur(70px); } .svc__cursor { display: none; } /* cursor-follow glow only matters with a mouse anyway */ .founder__glow, .founder__glow--2 { filter: blur(26px); } .ft__glow { filter: blur(20px); } .ci__bg i { filter: blur(60px); } .page-hero--contact { animation: none; background-position: 30% 40%; } /* keep the gradient, skip the constant repaint */ } /* Touch targets: filter/tab pills are text-sized by default; guarantee the 40px minimum tap height on touch devices without changing their look. */ @media (pointer: coarse) { .svc-tabs button, .chips button, .filters button { min-height: 40px; } } /* Newsletter form (footer "Stay Updated" panel): on very narrow phones the email input and "Subscribe" button no longer both fit on one row, so the button gets squeezed past the edge of the screen. Stack them instead of letting the row overflow. */ @media (max-width: 479px) { .newsletter { flex-wrap: wrap; border-radius: var(--radius); } .newsletter input { flex-basis: 100%; padding: 10px 1rem; } .newsletter .btn { flex: 1 1 100%; justify-content: center; } }