.text-layers { opacity: 1; } .current_percent { opacity: 0; } .timeline_heading { opacity: 0; } .line_current { width: 0em; } .cta-wrapper { opacity: 0; } .first_section_content_2 { opacity: 0; } .navbar { transform: translateY(-150%); } .words { display: inline !important; } [inner-fixed-load] { z-index: 3; position: absolute; } [inner-fixed-load-background] { display: block; } [home-trigger] { z-index: 9; } .stage { container-type: inline-size; } .cutout { position: absolute; inset: 0; background: white; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat; mask: url("data:image/svg+xml;utf8,") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .gradient-blur canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; z-index: 2; } .hero_first_section { --mouse-x: 50%; --mouse-y: 50%; transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } .hero_heading { margin: 0; will-change: mask-position; transform: translateZ(0); contain: layout style; } .absolute { position: absolute; top: 0; left: 0; width: 100%; } .sharp { background-color: #298dff; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; --text-x: 50%; --text-y: 50%; background-image: radial-gradient( circle at var(--text-x) var(--text-y), #ffffff 0%, #ffffff 44%, #298dff 85%, rgba(41,141,255,0.1) 95% ); background-size: 100% 100%; background-repeat: no-repeat; transform: translateZ(0); backface-visibility: hidden; will-change: background-image; } .gradient-blur { position: absolute; inset: 0; pointer-events: none; z-index: 5; contain: layout style paint; transform: translateZ(0); } .gradient-blur > div { position: absolute; inset: 0; transform: translate3d(0, 0, 0); backface-visibility: hidden; } .gradient-blur > div:nth-of-type(1) { backdrop-filter: blur(2.8px); -webkit-backdrop-filter: blur(2.8px); mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 14%, black 20%); -webkit-mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 14%, black 20%); } .gradient-blur > div:nth-of-type(2) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 16%, black 38%); -webkit-mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 16%, black 38%); } .gradient-blur > div:nth-of-type(3) { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 18%, black 50%); -webkit-mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 18%, black 50%); } .first_section_content_2 { isolation: isolate; position: relative; z-index: 11; pointer-events: none; } .first_section_content_2 * { pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .sharp { transition: none; } .gradient-blur > div { backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (hover: none) and (min-width: 769px) { .gradient-blur > div { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); mask: none; -webkit-mask: none; } } @media (max-width: 768px) { .gradient-blur > div:nth-of-type(1) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); mask: linear-gradient(to right, black 0%, black 35%, transparent 50%, transparent 65%, black 80%, black 100%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 14%, black 20%); -webkit-mask: linear-gradient(to right, black 0%, black 35%, transparent 50%, transparent 65%, black 80%, black 100%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 14%, black 20%); mask-composite: intersect; -webkit-mask-composite: source-in; } .gradient-blur > div:nth-of-type(2) { backdrop-filter: blur(2.6px); -webkit-backdrop-filter: blur(2.6px); mask: linear-gradient(to right, black 0%, black 30%, transparent 47%, transparent 68%, black 85%, black 100%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 16%, black 38%); -webkit-mask: linear-gradient(to right, black 0%, black 30%, transparent 47%, transparent 68%, black 85%, black 100%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 16%, black 38%); mask-composite: intersect; -webkit-mask-composite: source-in; } .gradient-blur > div:nth-of-type(3) { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); mask: linear-gradient(to right, black 0%, black 25%, transparent 45%, transparent 70%, black 90%, black 100%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 18%, black 50%); -webkit-mask: linear-gradient(to right, black 0%, black 25%, transparent 45%, transparent 70%, black 90%, black 100%), radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 18%, black 50%); mask-composite: intersect; -webkit-mask-composite: source-in; } .sharp { background-image: radial-gradient( circle at var(--text-x) var(--text-y), #ffffff 0%, #ffffff 41%, #298dff 93%, rgba(41,141,255,0.1) 100% ); } } .safari-16-17 .blue_overlay { mix-blend-mode: soft-light; opacity: 0.8; }

Sign in or create an account