/* Art2link — Glass Style v3 For the WordPress / DIVI Code-module embed. All selectors are scoped under .a2l-glass to prevent collisions with DIVI / theme CSS. --------------------------------------------------------------------- */ /* Art2link — Vision Pro / spatial direction ----------------------------------------- */ :root { /* Warm-grey graphite foundation — Art2link brand greys */ --bg-0: #0E1413; --bg-1: #131A18; --bg-2: #1A2220; --ink-0: #ffffff; --ink-1: rgba(255, 255, 255, 0.92); --ink-2: rgba(255, 255, 255, 0.66); --ink-3: rgba(255, 255, 255, 0.42); --ink-4: rgba(255, 255, 255, 0.22); --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --glass: rgba(255, 255, 255, 0.06); --glass-2: rgba(255, 255, 255, 0.10); /* Green primary, blue secondary — gradient runs green→blue */ --accent-1: #30D158; /* art2link green */ --accent-2: #0A84FF; /* azure blue */ --accent-3: #64D2FF; /* cyan accent */ --accent-grad: linear-gradient(135deg, #30D158 0%, #0A84FF 100%); --accent-grad-soft: linear-gradient(135deg, rgba(48,209,88,0.20) 0%, rgba(10,132,255,0.20) 100%); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 32px; --shadow-glass: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 -1px 0 0 rgba(255,255,255,0.04) inset, 0 30px 60px -20px rgba(0,0,0,0.6); --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-text: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; } /* =========================================================================== PERFORMANCE PASS — 2026-05-09 (revision 2) Heavy backdrop-filter usage was choking scroll on mid-tier devices. - backdrop-filter is now retained ONLY on .nav (sticky over scroll content, where the live blur of underlying content is the whole point). - .pipeline-stage and every other glass panel rely on a layered translucent gradient + inset top-edge highlight + soft drop-shadow ("fake-glass"). Looks ~95% identical over the dark cosmos backdrop, costs essentially nothing to paint. - Original declarations are PRESERVED in /* PERF-OFF: ... *\/ comments for easy rollback or A/B comparison. - .lite (toggled on from a tiny device-tier detector) strips the last backdrop-filter on .nav and disables ambient animations entirely. =========================================================================== */ /* Stronger background fill compensates for the missing blur on disabled panels — the eye reads the bright top edge + dark interior as glass. */ .a2l-glass .glass, .a2l-glass .fcard, .a2l-glass .tcard, .a2l-glass .case, .a2l-glass .compare-card, .a2l-glass .lineage-step, .a2l-glass .lineage-img, .a2l-glass .imgph-real, .a2l-glass .ai-stage, .a2l-glass .blog-card, .a2l-glass .blog-filters, .a2l-glass .blog-subscribe { background-color: rgba(255,255,255,0.055); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.04), 0 24px 60px -20px rgba(0,0,0,0.55); } /* Limit paint area for any panel that was previously expensive */ .a2l-glass .glass, .a2l-glass .fcard, .a2l-glass .tcard, .a2l-glass .case, .a2l-glass .lineage-step, .a2l-glass .blog-card { contain: layout paint; } .a2l-glass * { box-sizing: border-box; } .a2l-glass { margin: 0; padding: 0; background: var(--bg-0); color: var(--ink-1); font-family: var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .a2l-glass a { color: inherit; text-decoration: none; } .a2l-glass button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* Cosmic background — fixed, sits behind everything */ .a2l-glass .cosmos { position: fixed; inset: 0; z-index: 0; background: radial-gradient(1200px 800px at 15% -10%, rgba(48,209,88,0.30), transparent 60%), radial-gradient(1000px 700px at 90% 10%, rgba(10,132,255,0.32), transparent 60%), radial-gradient(900px 700px at 50% 100%, rgba(100,210,255,0.22), transparent 60%), radial-gradient(700px 500px at 80% 80%, rgba(48,209,88,0.18), transparent 60%), var(--bg-0); pointer-events: none; } .a2l-glass .cosmos::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 17% 22%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(1px 1px at 83% 14%, rgba(255,255,255,0.5), transparent 50%), radial-gradient(1px 1px at 47% 78%, rgba(255,255,255,0.5), transparent 50%), radial-gradient(1px 1px at 9% 64%, rgba(255,255,255,0.4), transparent 50%), radial-gradient(1px 1px at 71% 88%, rgba(255,255,255,0.35), transparent 50%), radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,0.45), transparent 50%), radial-gradient(1px 1px at 92% 53%, rgba(255,255,255,0.55), transparent 50%); } /* Generic */ .a2l-glass .app { position: relative; z-index: 1; } .a2l-glass .section { padding: 140px 32px; position: relative; content-visibility: auto; contain-intrinsic-size: 1px 800px; } .a2l-glass .container { max-width: 1240px; margin: 0 auto; } .a2l-glass .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); padding: 14px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); /* PERF-OFF: backdrop-filter: blur(14px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(14px); */ } .a2l-glass .eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-grad); box-shadow: 0 0 10px rgba(48,209,88,0.8); } .a2l-glass h1, .a2l-glass h2, .a2l-glass h3, .a2l-glass h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink-0); } .a2l-glass h1 { font-size: clamp(42px, 5.5vw, 78px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; } .a2l-glass h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.035em; } .a2l-glass h3 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; } .a2l-glass .sub { color: var(--ink-2); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; max-width: 680px; } .a2l-glass .gradient-text { background: linear-gradient(135deg, #ffffff 0%, #b8f0d0 40%, #7ec5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Buttons */ .a2l-glass .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--font-text); font-weight: 500; font-size: 15px; transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease; } .a2l-glass .btn-primary { color: white; background: var(--accent-grad); box-shadow: 0 10px 30px -10px rgba(48,209,88,0.6), 0 0 0 1px rgba(255,255,255,0.12) inset; } .a2l-glass .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -10px rgba(48,209,88,0.8), 0 0 0 1px rgba(255,255,255,0.2) inset; } .a2l-glass .btn-ghost { color: var(--ink-1); background: var(--glass); border: 1px solid var(--line-2); /* PERF-OFF: backdrop-filter: blur(20px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(20px); */ } .a2l-glass .btn-ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,0.28); } .a2l-glass .btn .arrow { transition: transform 0.2s ease; } .a2l-glass .btn:hover .arrow { transform: translateX(3px); } /* Glass panel */ .a2l-glass .glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); /* PERF-OFF: backdrop-filter: blur(24px) saturate(1.4); */ /* PERF-OFF: -webkit-backdrop-filter: blur(24px) saturate(1.4); */ box-shadow: var(--shadow-glass); } /* Nav */ .a2l-glass .nav-wrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; } .a2l-glass .nav { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(10,10,24,0.55); border: 1px solid var(--line-2); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.7); width: min(1080px, 100%); } .a2l-glass .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; padding: 6px 8px; } .a2l-glass .nav-logo .mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-grad); box-shadow: 0 4px 12px -2px rgba(48,209,88,0.7), 0 0 0 1px rgba(255,255,255,0.15) inset; position: relative; } .a2l-glass .nav-logo .mark::after { content: ""; position: absolute; inset: 4px; border-radius: 4px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), transparent 55%); } .a2l-glass .nav-links { display: flex; gap: 2px; margin-left: 18px; flex: 1; } .a2l-glass .nav-link { padding: 8px 14px; font-size: 14px; color: var(--ink-2); border-radius: 999px; transition: color 0.2s ease, background 0.2s ease; cursor: pointer; } .a2l-glass .nav-link:hover { color: var(--ink-0); background: rgba(255,255,255,0.05); } .a2l-glass .nav-link.active { color: var(--ink-0); background: rgba(255,255,255,0.08); } .a2l-glass .nav-cta { padding: 9px 18px; font-size: 14px; font-weight: 500; background: var(--accent-grad); color: white; border-radius: 999px; box-shadow: 0 6px 18px -4px rgba(48,209,88,0.6); } /* Hero */ .a2l-glass .hero { padding-top: 120px; padding-bottom: 80px; position: relative; isolation: isolate; } .a2l-glass .hero-inner { max-width: 1240px; margin: 0 auto; padding: 90px 32px 0; position: relative; z-index: 2; } /* Hero immersive background */ .a2l-glass .hero-bg { position: absolute; inset: -60px 0 -120px 0; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; } .a2l-glass .hero-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 600px at 12% 20%, rgba(48,209,88,0.32), transparent 60%), radial-gradient(1100px 700px at 85% 35%, rgba(10,132,255,0.30), transparent 65%), radial-gradient(700px 500px at 50% 110%, rgba(100,210,255,0.20), transparent 60%); filter: saturate(1.1); } .a2l-glass .hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1400px 700px at 35% 30%, transparent 0%, rgba(8,16,22,0.35) 75%); } /* Perspective grid floor */ .a2l-glass .hero-grid { position: absolute; inset: auto 0 -40px 0; height: 60%; background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.9) 70%, transparent 100%), radial-gradient(ellipse 70% 80% at 50% 100%, black 30%, transparent 80%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.9) 70%, transparent 100%), radial-gradient(ellipse 70% 80% at 50% 100%, black 30%, transparent 80%); mask-composite: intersect; transform: perspective(900px) rotateX(56deg) translateY(20px) scale(2.0); transform-origin: 50% 100%; opacity: 0.55; } /* Drifting glass orbs */ .a2l-glass .hero-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.6; mix-blend-mode: screen; will-change: transform; } .a2l-glass .hero-orb.orb-1 { width: 460px; height: 460px; top: 8%; left: 4%; background: radial-gradient(circle, rgba(48,209,88,0.65) 0%, rgba(48,209,88,0) 65%); animation: heroOrbA 12s ease-in-out infinite; } .a2l-glass .hero-orb.orb-2 { width: 540px; height: 540px; top: 12%; right: 2%; background: radial-gradient(circle, rgba(10,132,255,0.7) 0%, rgba(10,132,255,0) 65%); animation: heroOrbB 15s ease-in-out infinite; } .a2l-glass .hero-orb.orb-3 { width: 360px; height: 360px; bottom: 18%; left: 38%; background: radial-gradient(circle, rgba(100,210,255,0.5) 0%, rgba(100,210,255,0) 65%); animation: heroOrbC 18s ease-in-out infinite; } @keyframes heroOrbA { 0% { transform: translate(0px, 0px) scale(1); opacity: 0.55; } 25% { transform: translate(320px, -140px) scale(1.18); opacity: 0.75; } 50% { transform: translate(440px, 160px) scale(1.04); opacity: 0.40; } 75% { transform: translate(140px, 280px) scale(1.22); opacity: 0.72; } 100% { transform: translate(0px, 0px) scale(1); opacity: 0.55; } } @keyframes heroOrbB { 0% { transform: translate(0px, 0px) scale(1); opacity: 0.55; } 25% { transform: translate(-340px, 180px) scale(1.16); opacity: 0.72; } 50% { transform: translate(-480px, -120px) scale(1.03); opacity: 0.38; } 75% { transform: translate(-180px, -260px) scale(1.20); opacity: 0.75; } 100% { transform: translate(0px, 0px) scale(1); opacity: 0.55; } } @keyframes heroOrbC { 0% { transform: translate(0px, 0px) scale(1); opacity: 0.50; } 33% { transform: translate(-200px, -180px) scale(1.22); opacity: 0.70; } 66% { transform: translate(220px, -100px) scale(1.10); opacity: 0.42; } 100% { transform: translate(0px, 0px) scale(1); opacity: 0.50; } } /* Layered mesh gradient */ .a2l-glass .hero-mesh { position: absolute; top: -10%; right: -10%; width: 70%; aspect-ratio: 1; background: conic-gradient(from 220deg at 60% 40%, rgba(48,209,88,0) 0deg, rgba(48,209,88,0.18) 60deg, rgba(10,132,255,0.20) 160deg, rgba(100,210,255,0.10) 240deg, rgba(48,209,88,0) 360deg); filter: blur(60px); border-radius: 50%; opacity: 0.7; mix-blend-mode: screen; animation: heroMesh 40s linear infinite; } @keyframes heroMesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Flowing connective lines */ .a2l-glass .hero-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .a2l-glass .hero-orb, .a2l-glass .hero-mesh { animation: none; } } .a2l-glass .hero h1 { margin-top: 24px; max-width: 1100px; } .a2l-glass .hero h1 .accent { background: linear-gradient(135deg, #6df0a0 0%, #5ab1ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .a2l-glass .hero-sub { margin-top: 28px; max-width: 720px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink-2); } .a2l-glass .hero-cta { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; } .a2l-glass .hero-meta { margin-top: 64px; display: flex; gap: 32px; flex-wrap: wrap; align-items: center; color: var(--ink-3); font-size: 13px; } .a2l-glass .hero-meta .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; } /* Pipeline diagram (hero) */ .a2l-glass .pipeline-stage { margin-top: 80px; position: relative; border-radius: var(--radius-xl); /* Tuned by Jorge — fake-glass with no backdrop-filter */ background: linear-gradient(180deg, rgb(20 20 40 / 51%) 0%, rgb(10 10 24 / 55%) 100%); border: 1px solid var(--line-2); box-shadow: 0 60px 120px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) inset; overflow: hidden; padding: 28px; } .a2l-glass .pipeline-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 50% 0%, rgba(48,209,88,0.18), transparent 70%); pointer-events: none; } .a2l-glass .pipeline-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .a2l-glass .pipeline-tabs { display: flex; gap: 4px; } .a2l-glass .pipeline-tab { padding: 6px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .a2l-glass .pipeline-tab.active { background: rgba(255,255,255,0.06); color: var(--ink-1); border: 1px solid var(--line); } .a2l-glass .pipeline-status { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); } .a2l-glass .pipeline-status .live { display: inline-flex; align-items: center; gap: 6px; } .a2l-glass .pipeline-status .live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #30D158; box-shadow: 0 0 10px rgba(48,209,88,0.8); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } /* Trust bar — marquee */ .a2l-glass .trust { padding: 60px 0 20px; overflow: hidden; } .a2l-glass .trust-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .a2l-glass .trust-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); text-align: center; } .a2l-glass .marquee { margin-top: 32px; position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); } .a2l-glass .marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; } .a2l-glass .marquee:hover .marquee-track { animation-play-state: paused; } .a2l-glass .marquee-cell { background: linear-gradient(122deg, rgb(255 255 255 / 48%) 0%, rgb(255 255 255 / 79%) 50%, rgba(199, 219, 240, 0.71) 100%); flex: 0 0 auto; width: 160px; height: 90px; margin: 0 8px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 2px solid rgb(255 255 255 / 12%); color: var(--ink-2); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: 19px; } .a2l-glass .marquee-cell.logo-pill img { width: 50%; height: auto; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Section header */ .a2l-glass .sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin-bottom: 64px; } .a2l-glass .sec-head .sub { color: var(--ink-2); } /* Feature grid */ .a2l-glass .feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .a2l-glass .fcard { grid-column: span 4; padding: 28px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); /* PERF-OFF: backdrop-filter: blur(20px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(20px); */ position: relative; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; transition: transform 0.3s ease, border-color 0.3s ease; } .a2l-glass .fcard:hover { transform: translateY(-2px); border-color: var(--line-2); } .a2l-glass .fcard.wide { grid-column: span 8; } .a2l-glass .fcard.tall { min-height: 380px; } .a2l-glass .fcard-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .a2l-glass .fcard h3 { margin-bottom: 12px; } .a2l-glass .fcard p { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0; } .a2l-glass .fcard .visual { margin-top: auto; padding-top: 24px; } /* Stat */ .a2l-glass .stat { display: flex; flex-direction: column; gap: 6px; } .a2l-glass .stat .num { font-family: var(--font-display); font-weight: 600; font-size: 64px; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(180deg, #fff 0%, #b8f0d0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .a2l-glass .stat .label { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } /* BizTalk migration */ .a2l-glass .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .a2l-glass .compare-card { padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--glass); /* PERF-OFF: backdrop-filter: blur(20px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(20px); */ } .a2l-glass .compare-card.before { opacity: 0.78; } .a2l-glass .compare-card.after { border-color: rgba(48,209,88,0.4); background: linear-gradient(180deg, rgba(48,209,88,0.12), rgba(10,132,255,0.06)); box-shadow: 0 0 0 1px rgba(48,209,88,0.15); } .a2l-glass .compare-card .tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; } .a2l-glass .compare-card.before .tag { background: rgba(255,255,255,0.06); color: var(--ink-3); border: 1px solid var(--line); } .a2l-glass .compare-card.after .tag { background: var(--accent-grad); color: white; } .a2l-glass .compare-card ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; } .a2l-glass .compare-card li { color: var(--ink-2); font-size: 15px; padding-left: 26px; position: relative; } .a2l-glass .compare-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 999px; background: rgba(255,255,255,0.08); } .a2l-glass .compare-card.before li::before { background: rgba(255,255,255,0.06); } .a2l-glass .compare-card.after li::before { background: var(--accent-grad); box-shadow: 0 0 0 3px rgba(48,209,88,0.18); } .a2l-glass .compare-card.after li::after { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 3px; border-left: 1.6px solid white; border-bottom: 1.6px solid white; transform: rotate(-45deg); } /* AI builder */ .a2l-glass .ai-stage { margin-top: 56px; border-radius: var(--radius-xl); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(20,20,40,0.6), rgba(10,10,24,0.4)); /* PERF-OFF: backdrop-filter: blur(28px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(28px); */ box-shadow: 0 60px 120px -40px rgba(0,0,0,0.7); overflow: hidden; display: grid; grid-template-columns: 1fr 1.4fr; } .a2l-glass .ai-prompt { padding: 36px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; } .a2l-glass .ai-prompt .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .a2l-glass .ai-prompt .input { background: rgba(0,0,0,0.3); border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: 18px; font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--ink-1); letter-spacing: -0.01em; min-height: 140px; } .a2l-glass .ai-prompt .input .caret { display: inline-block; width: 2px; height: 1.2em; background: var(--accent-2); vertical-align: middle; animation: blink 1s steps(2) infinite; margin-left: 2px; } @keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } .a2l-glass .ai-prompt .examples { display: flex; flex-direction: column; gap: 8px; } .a2l-glass .ai-prompt .example { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font-size: 13px; cursor: pointer; transition: all 0.2s ease; text-align: left; } .a2l-glass .ai-prompt .example:hover { color: var(--ink-1); border-color: var(--line-2); } .a2l-glass .ai-output { padding: 36px; position: relative; min-height: 460px; } .a2l-glass .ai-output .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .a2l-glass .ai-output .label .gen-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-2); box-shadow: 0 0 12px rgba(10,132,255,0.9); animation: pulse 1.4s ease-in-out infinite; } /* Testimonial */ .a2l-glass .testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .a2l-glass .tcard { padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--glass); /* PERF-OFF: backdrop-filter: blur(18px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(18px); */ display: flex; flex-direction: column; min-height: 280px; } .a2l-glass .tcard .quote { font-family: var(--font-display); font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-1); flex: 1; } .a2l-glass .tcard .quote::before { content: "\201C"; display: block; font-size: 56px; line-height: 0.6; margin-bottom: 12px; color: var(--accent-1); opacity: 0.6; } .a2l-glass .tcard .who { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .a2l-glass .tcard .avatar { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); display: grid; place-items: center; font-weight: 600; color: white; font-size: 14px; } .a2l-glass .tcard .who-meta { display: flex; flex-direction: column; } .a2l-glass .tcard .name { font-size: 14px; font-weight: 500; } .a2l-glass .tcard .role { font-size: 12px; color: var(--ink-3); } /* Case studies */ .a2l-glass .cases { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .a2l-glass .case { grid-column: span 6; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--glass); /* PERF-OFF: backdrop-filter: blur(18px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(18px); */ position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; } .a2l-glass .case .industry { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); } .a2l-glass .case h3 { margin: 14px 0 12px; } .a2l-glass .case .summary { color: var(--ink-2); font-size: 15px; line-height: 1.55; } .a2l-glass .case .metrics { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .a2l-glass .case .metric .v { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; } .a2l-glass .case .metric .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } /* CTA strip */ .a2l-glass .cta-strip { padding: 80px 56px; border-radius: var(--radius-xl); background: radial-gradient(800px 400px at 0% 0%, rgba(48,209,88,0.32), transparent 70%), radial-gradient(800px 400px at 100% 100%, rgba(10,132,255,0.32), transparent 70%), rgba(14,30,28,0.55); border: 1px solid var(--line-2); /* PERF-OFF: backdrop-filter: blur(30px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(30px); */ text-align: center; position: relative; overflow: hidden; } .a2l-glass .cta-strip h2 { max-width: 820px; margin: 0 auto; } .a2l-glass .cta-strip p { margin: 20px auto 32px; color: var(--ink-2); max-width: 580px; } /* Footer */ .a2l-glass .footer { padding: 80px 32px 40px; border-top: 1px solid var(--line); margin-top: 100px; } .a2l-glass .footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; } .a2l-glass .footer h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 20px; } .a2l-glass .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .a2l-glass .footer li { font-size: 14px; color: var(--ink-2); cursor: pointer; } .a2l-glass .footer li:hover { color: var(--ink-0); } .a2l-glass .footer-brand p { color: var(--ink-3); font-size: 14px; line-height: 1.6; max-width: 280px; margin: 16px 0 0; } .a2l-glass .footer-bottom { max-width: 1240px; margin: 64px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); } /* Image placeholder */ .a2l-glass .imgph { position: relative; border-radius: var(--radius-md); overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 12px, rgba(255,255,255,0.06) 12px 24px), linear-gradient(180deg, rgba(48,209,88,0.12), rgba(10,132,255,0.06)); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: center; } .a2l-glass .imgph::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(255,255,255,0.10); border-radius: 12px; pointer-events: none; } .a2l-glass .imgph::after { content: ""; position: relative; width: 44px; height: 32px; border-radius: 6px; border: 1.4px solid rgba(255,255,255,0.18); background: radial-gradient(circle at 70% 35%, rgba(255,255,255,0.22) 0 4px, transparent 5px), linear-gradient(135deg, transparent 55%, rgba(48,209,88,0.35) 56%, rgba(48,209,88,0.35) 70%, transparent 71%), linear-gradient(135deg, transparent 70%, rgba(10,132,255,0.35) 71%, rgba(10,132,255,0.35) 86%, transparent 87%), rgba(255,255,255,0.04); } .a2l-glass .imgph .imgph-label { position: relative; padding: 0 18px; max-width: 80%; } .a2l-glass .imgph.aspect-16-9 { aspect-ratio: 16 / 9; } .a2l-glass .imgph.aspect-4-3 { aspect-ratio: 4 / 3; } .a2l-glass .imgph.aspect-3-2 { aspect-ratio: 3 / 2; } .a2l-glass .imgph.aspect-1-1 { aspect-ratio: 1 / 1; } /* Real image variant */ .a2l-glass .imgph-real { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.16); border-radius: 18px; padding: 14px; overflow: hidden; /* PERF-OFF: -webkit-backdrop-filter: blur(22px) saturate(1.5); */ /* PERF-OFF: backdrop-filter: blur(22px) saturate(1.5); */ box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.06), 0 28px 60px -20px rgba(0,0,0,0.7), 0 8px 24px -10px rgba(48,209,88,0.18); } .a2l-glass .imgph-real::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); z-index: 3; pointer-events: none; } .a2l-glass .imgph-real::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(140% 70% at 0% 0%, rgba(48,209,88,0.18), transparent 55%), radial-gradient(140% 70% at 100% 100%, rgba(10,132,255,0.18), transparent 55%); mix-blend-mode: screen; z-index: 2; } .a2l-glass .imgph-real img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 18px -6px rgba(0,0,0,0.55); } /* Lineage / Evolution */ /* align-items: stretch lets all three cards equalize to the tallest row, and lets the auto-width arrow cells stretch with them. The arrow itself already uses display:flex + align-items:center inside .lineage-arrow, so it centers vertically once the cell is tall. */ .a2l-glass .lineage { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; } .a2l-glass .lineage-step { padding: 28px 24px 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--glass); /* PERF-OFF: backdrop-filter: blur(18px); */ /* PERF-OFF: -webkit-backdrop-filter: blur(18px); */ position: relative; overflow: hidden; } .a2l-glass .lineage-step .era { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .a2l-glass .lineage-step .name { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; } .a2l-glass .lineage-step .desc { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-top: 10px; } .a2l-glass .lineage-img { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04)); /* PERF-OFF: -webkit-backdrop-filter: blur(22px) saturate(1.5); */ /* PERF-OFF: backdrop-filter: blur(22px) saturate(1.5); */ box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.06), 0 28px 60px -20px rgba(0,0,0,0.7), 0 8px 24px -10px rgba(48,209,88,0.18); padding: 14px; aspect-ratio: 16 / 10; max-width: 100%; } .a2l-glass .lineage-img::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); z-index: 3; pointer-events: none; } .a2l-glass .lineage-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(140% 70% at 0% 0%, rgba(48,209,88,0.18), transparent 55%), radial-gradient(140% 70% at 100% 100%, rgba(10,132,255,0.18), transparent 55%); mix-blend-mode: screen; z-index: 2; } .a2l-glass .lineage-img img, .a2l-glass .lineage-img svg { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 18px -6px rgba(0,0,0,0.55); } .a2l-glass .lineage-step.current { background: linear-gradient(180deg, rgba(48,209,88,0.14), rgba(10,132,255,0.08)); } .a2l-glass .lineage-arrow { display: flex; align-items: center; justify-content: center; padding: 0 14px; color: var(--ink-3); } @media (max-width: 760px) { .a2l-glass .lineage { grid-template-columns: 1fr; } .a2l-glass .lineage-arrow { transform: rotate(90deg); padding: 12px 0; } } /* Era accent styling */ .a2l-glass .lineage-step .era-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; } .a2l-glass .lineage-step .era-glow { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; } .a2l-glass .lineage-step.era-1 .era-accent { background: linear-gradient(90deg, rgba(255,159,10,0.5), rgba(255,159,10,0.1)); } .a2l-glass .lineage-step.era-1 .era-glow { background: radial-gradient(ellipse at 25% 0%, rgba(255,159,10,0.09), transparent 65%); } .a2l-glass .lineage-step.era-1 { border-color: rgba(255,159,10,0.1); } .a2l-glass .lineage-step.era-2 .era-accent { background: linear-gradient(90deg, rgba(10,132,255,0.15), rgba(10,132,255,0.5), rgba(10,132,255,0.15)); } .a2l-glass .lineage-step.era-2 .era-glow { background: radial-gradient(ellipse at 70% 0%, rgba(10,132,255,0.09), transparent 65%); } .a2l-glass .lineage-step.era-2 { border-color: rgba(10,132,255,0.1); } .a2l-glass .lineage-step.era-3 .era-accent { background: linear-gradient(90deg, rgba(48,209,88,0.15), rgba(48,209,88,0.6), rgba(10,132,255,0.3)); } .a2l-glass .lineage-step.era-3 .era-glow { background: radial-gradient(ellipse at 50% 0%, rgba(48,209,88,0.12), transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(10,132,255,0.06), transparent 50%); } .a2l-glass .lineage-step.era-3 { border-color: rgba(48,209,88,0.14); } /* Image gallery row */ .a2l-glass .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .a2l-glass .gallery .imgph { min-height: 180px; } .a2l-glass .gallery .g-1 { grid-column: span 8; min-height: 320px; } .a2l-glass .gallery .g-2 { grid-column: span 4; min-height: 320px; } .a2l-glass .gallery .g-3 { grid-column: span 4; } .a2l-glass .gallery .g-4 { grid-column: span 4; } .a2l-glass .gallery .g-5 { grid-column: span 4; } @media (max-width: 960px) { .a2l-glass .gallery > * { grid-column: span 12 !important; } } /* Glass label chip on real images */ .a2l-glass .imgph-tag { position: absolute; top: 22px; left: 22px; z-index: 4; padding: 6px 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.92); background: rgba(10,15,31,0.55); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; /* PERF-OFF: -webkit-backdrop-filter: blur(14px) saturate(1.4); */ /* PERF-OFF: backdrop-filter: blur(14px) saturate(1.4); */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 18px -6px rgba(0,0,0,0.55); white-space: nowrap; pointer-events: none; } .a2l-glass .imgph-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; border-radius: 999px; background: #30D158; box-shadow: 0 0 8px rgba(48,209,88,0.85); } /* Microsoft Solutions Partner logo frame */ .a2l-glass .ms-logo-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: radial-gradient(60% 70% at 50% 40%, rgba(10,132,255,0.22), transparent 65%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); /* PERF-OFF: -webkit-backdrop-filter: blur(20px) saturate(1.4); */ /* PERF-OFF: backdrop-filter: blur(20px) saturate(1.4); */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.05), 0 28px 60px -20px rgba(0,0,0,0.7), 0 8px 24px -10px rgba(10,132,255,0.18); display: flex; align-items: center; justify-content: center; } .a2l-glass .ms-logo-frame::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); pointer-events: none; z-index: 2; } .a2l-glass .ms-logo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; padding: 0; border-radius: 22px; filter: none; } /* MID BAND — distinct background for Evolution + What-is-it */ .a2l-glass .mid-band { position: relative; isolation: isolate; margin: 40px 0; } .a2l-glass .mid-band > .section { position: relative; z-index: 1; } .a2l-glass .mid-band-bg { position: absolute; inset: -80px 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1.4px) 0 0 / 28px 28px, radial-gradient(900px 600px at 8% 12%, rgba(48,209,88,0.18), transparent 60%), radial-gradient(1100px 700px at 92% 88%, rgba(10,132,255,0.20), transparent 62%), linear-gradient(180deg, rgba(14,20,19,0.92), rgba(10,16,15,0.98)); } /* Page transitions */ .a2l-glass .page { animation: fadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================== SCROLL ANIMATIONS — Directional reveals ========================================================== */ /* Reveal on scroll — base (default upward rise) */ .a2l-glass .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1); } .a2l-glass .reveal.in { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Directional variants */ .a2l-glass .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1); } .a2l-glass .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1); } .a2l-glass .reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1); } /* Bold variant — pipeline diagram hero moment */ .a2l-glass .reveal-bold { opacity: 0; transform: scale(0.82) translateY(40px); transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1), transform 1.4s cubic-bezier(0.16,1,0.3,1); } /* All variants resolve to the same end state */ .a2l-glass .reveal-left.in, .a2l-glass .reveal-right.in, .a2l-glass .reveal-scale.in, .a2l-glass .reveal-bold.in { opacity: 1; transform: translateX(0) translateY(0) scale(1); } /* Stagger delays */ .a2l-glass .reveal-d1 { transition-delay: 0.1s; } .a2l-glass .reveal-d2 { transition-delay: 0.2s; } .a2l-glass .reveal-d3 { transition-delay: 0.3s; } .a2l-glass .reveal-d4 { transition-delay: 0.4s; } .a2l-glass .reveal-d5 { transition-delay: 0.5s; } /* ---------------------------------------- Blog ---------------------------------------- */ .a2l-glass .blog-meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); } .a2l-glass .blog-meta .blog-cat { color: var(--ink-1); background: var(--accent-grad-soft); border: 1px solid rgba(48,209,88,0.28); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; } .a2l-glass .blog-meta .blog-dot { color: var(--ink-4); } /* Featured editorial hero */ .a2l-glass .blog-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--glass); border: 1px solid var(--line-2); /* PERF-OFF: backdrop-filter: blur(28px) saturate(1.4); */ /* PERF-OFF: -webkit-backdrop-filter: blur(28px) saturate(1.4); */ cursor: pointer; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset; } .a2l-glass .blog-featured:hover { transform: translateY(-3px); border-color: rgba(48,209,88,0.35); box-shadow: 0 80px 140px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(48,209,88,0.20) inset; } .a2l-glass .blog-featured-cover { position: relative; min-height: 100%; } .a2l-glass .blog-featured-cover .image-ph { height: 100%; border-radius: 0; border: 0; border-right: 1px solid var(--line); } .a2l-glass .blog-featured-tag { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: white; background: rgba(8,16,22,0.7); border: 1px solid rgba(255,255,255,0.18); /* PERF-OFF: backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); */ } .a2l-glass .blog-featured-tag .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-grad); box-shadow: 0 0 10px rgba(48,209,88,0.8); animation: pulse 1.6s ease-in-out infinite; } .a2l-glass .blog-featured-body { padding: 56px 56px 56px 48px; display: flex; flex-direction: column; justify-content: center; } .a2l-glass .blog-read { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink-1); letter-spacing: -0.01em; } .a2l-glass .blog-featured:hover .blog-read svg { transform: translateX(3px); } .a2l-glass .blog-read svg { transition: transform 0.2s ease; } /* Filter bar */ .a2l-glass .blog-grid-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 48px; } .a2l-glass .blog-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); /* PERF-OFF: backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); */ } .a2l-glass .blog-filter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-family: var(--font-text); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: color 0.2s ease, background 0.2s ease; } .a2l-glass .blog-filter:hover { color: var(--ink-0); } .a2l-glass .blog-filter.active { color: white; background: var(--accent-grad); box-shadow: 0 4px 14px -4px rgba(48,209,88,0.6); } .a2l-glass .blog-filter-count { font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.10); color: inherit; opacity: 0.75; } .a2l-glass .blog-filter.active .blog-filter-count { background: rgba(255,255,255,0.22); opacity: 1; } /* Technical journal grid */ .a2l-glass .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .a2l-glass .blog-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--glass); border: 1px solid var(--line); /* PERF-OFF: backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); */ transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .a2l-glass .blog-card:hover { transform: translateY(-3px); border-color: rgba(48,209,88,0.32); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(48,209,88,0.18) inset; } .a2l-glass .blog-card-cover { border-bottom: 1px solid var(--line); } .a2l-glass .blog-card-cover .image-ph { border: 0; border-radius: 0; } .a2l-glass .blog-card-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .a2l-glass .blog-card-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-0); margin: 0; } .a2l-glass .blog-card-summary { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; } .a2l-glass .blog-empty { padding: 80px 32px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--radius-lg); } /* Subscribe band */ .a2l-glass .blog-subscribe { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 56px 56px; border-radius: var(--radius-xl); background: var(--glass); border: 1px solid var(--line-2); /* PERF-OFF: backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); */ } .a2l-glass .blog-subscribe-form { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(0,0,0,0.25); border: 1px solid var(--line); } .a2l-glass .blog-subscribe-form input { flex: 1; background: transparent; border: 0; outline: 0; padding: 12px 18px; font-family: var(--font-text); font-size: 14px; color: var(--ink-0); } .a2l-glass .blog-subscribe-form input::placeholder { color: var(--ink-3); } @media (max-width: 1080px) { .a2l-glass .blog-grid { grid-template-columns: repeat(2, 1fr); } .a2l-glass .blog-grid-head { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 720px) { .a2l-glass .blog-grid { grid-template-columns: 1fr; } .a2l-glass .blog-featured { grid-template-columns: 1fr; } .a2l-glass .blog-featured-body { padding: 32px; } .a2l-glass .blog-subscribe { grid-template-columns: 1fr; padding: 32px; } .a2l-glass .blog-subscribe-form { flex-direction: column; border-radius: var(--radius-md); } .a2l-glass .blog-subscribe-form .btn { width: 100%; justify-content: center; } } /* Site-wide ambient connection lines */ .a2l-glass .flow-lines-host { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .a2l-glass .flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; mix-blend-mode: screen; will-change: transform; } @keyframes flowDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -2000; } } @media (prefers-reduced-motion: reduce) { .a2l-glass .flow-lines path[style] { animation: none !important; } } /* ---------------------------------------- Color moments — full-bleed immersive bands ---------------------------------------- */ .a2l-glass .section-moment { position: relative; isolation: isolate; } .a2l-glass .section-moment::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 100vw; z-index: -1; background: radial-gradient(900px 500px at 20% 30%, rgba(48,209,88,0.28), transparent 60%), radial-gradient(1000px 600px at 85% 70%, rgba(10,132,255,0.32), transparent 65%), radial-gradient(700px 400px at 50% 0%, rgba(100,210,255,0.18), transparent 60%), linear-gradient(180deg, rgba(8,16,22,0.6) 0%, rgba(6,18,28,0.85) 50%, rgba(8,16,22,0.6) 100%); } .a2l-glass .section-moment::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%); } .a2l-glass .section-moment::after { top: 0; } .a2l-glass .section-moment.moment-bottom-edge::before { bottom: -1px; } .a2l-glass .section-moment .moment-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%); z-index: -1; } .a2l-glass .section-moment.moment-deep::before { background: radial-gradient(800px 500px at 15% 50%, rgba(10,132,255,0.40), transparent 60%), radial-gradient(900px 600px at 85% 50%, rgba(48,209,88,0.30), transparent 65%), radial-gradient(600px 400px at 50% 100%, rgba(100,210,255,0.22), transparent 65%), linear-gradient(180deg, rgba(4,12,20,0.85) 0%, rgba(2,10,18,1) 100%); } .a2l-glass .section-moment.moment-emerald::before { background: radial-gradient(900px 600px at 70% 30%, rgba(48,209,88,0.38), transparent 60%), radial-gradient(800px 500px at 20% 80%, rgba(10,132,255,0.26), transparent 65%), radial-gradient(500px 350px at 50% 50%, rgba(100,210,255,0.14), transparent 60%), linear-gradient(180deg, rgba(6,18,16,0.8) 0%, rgba(4,14,12,0.95) 100%); } /* MS Badge */ .a2l-glass .ms-badge { display: inline-flex; align-items: center; gap: 20px; padding: 6px 35px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); } .a2l-glass .ms-mark { display: inline-grid; grid-template: repeat(2, 12px) / repeat(2, 12px); gap: 3px; } .a2l-glass .ms-mark span { border-radius: 1.5px; } .a2l-glass .ms-mark span:nth-child(1) { background: #F25022; } .a2l-glass .ms-mark span:nth-child(2) { background: #7FBA00; } .a2l-glass .ms-mark span:nth-child(3) { background: #00A4EF; } .a2l-glass .ms-mark span:nth-child(4) { background: #FFB900; } .a2l-glass .ms-text { display: flex; flex-direction: column; } .a2l-glass .ms-text small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .a2l-glass .ms-text strong { font-size: 13px; color: var(--ink-1); } /* ============================================================ RESPONSIVE — Tablet (<=960px) ============================================================ */ @media (max-width: 960px) { .a2l-glass .section { padding: 80px 24px; } .a2l-glass .section-moment { padding-top: 80px !important; padding-bottom: 80px !important; } .a2l-glass .hero { padding: 100px 24px 60px; } .a2l-glass .hero-inner { text-align: center; align-items: center; } .a2l-glass .hero-meta { justify-content: center; } .a2l-glass .hero-cta { justify-content: center; } .a2l-glass .pipeline-stage { margin-top: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .a2l-glass .pipeline-stage svg { min-width: 700px; } .a2l-glass .feature-grid .fcard { grid-column: span 12; } .a2l-glass .feature-grid .fcard.wide { grid-column: span 12; } .a2l-glass .compare { grid-template-columns: 1fr; } .a2l-glass .ai-stage { grid-template-columns: 1fr; } .a2l-glass .ai-prompt { border-right: 0; border-bottom: 1px solid var(--line); } .a2l-glass .testimonials { grid-template-columns: 1fr; } .a2l-glass .cases .case { grid-column: span 12; } .a2l-glass .footer-inner { grid-template-columns: 1fr 1fr; } .a2l-glass .trust-row { grid-template-columns: repeat(3, 1fr); } .a2l-glass .nav-links { display: none; } .a2l-glass .a2l-ms-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 32px !important; } .a2l-glass .ms-logo-frame { aspect-ratio: 16 / 9; max-width: 400px; margin: 0 auto; } .a2l-glass .a2l-mapping-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .a2l-glass .a2l-company-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ============================================================ RESPONSIVE — Mobile (<=640px) ============================================================ */ @media (max-width: 640px) { .a2l-glass .section { padding: 56px 16px; } .a2l-glass .section-moment { padding-top: 56px !important; padding-bottom: 56px !important; } .a2l-glass .container { padding: 0; } .a2l-glass h1 { font-size: clamp(32px, 8vw, 42px) !important; line-height: 1.1 !important; } .a2l-glass h2 { font-size: clamp(26px, 6vw, 36px) !important; line-height: 1.15 !important; } .a2l-glass h3 { font-size: clamp(20px, 5vw, 26px) !important; } .a2l-glass .sec-head { margin-bottom: 40px; } .a2l-glass .hero-sub { font-size: 16px !important; } .a2l-glass .hero { padding: 180px 16px 40px; } .a2l-glass .hero-meta { gap: 12px; } .a2l-glass .hero-meta .chip { font-size: 11px; padding: 4px 10px; } .a2l-glass .hero-cta { flex-direction: column; width: 100%; } .a2l-glass .hero-cta .btn { width: 100%; justify-content: center; text-align: center; } .a2l-glass .pipeline-stage { display: none; } .a2l-glass .ms-badge { transform: scale(0.85); transform-origin: left center; } .a2l-glass .marquee-cell { width: 140px !important; height: 52px !important; } .a2l-glass .lineage { gap: 12px !important; } .a2l-glass .lineage-step { padding: 20px 18px 24px !important; } .a2l-glass .lineage-step .name { font-size: 20px !important; } .a2l-glass .fcard { padding: 22px !important; min-height: auto !important; } .a2l-glass .fcard.tall { min-height: auto !important; } .a2l-glass .fcard h3 { font-size: 22px !important; } .a2l-glass .btn { font-size: 14px; padding: 12px 20px; } .a2l-glass .eyebrow { font-size: 10px; padding: 8px 14px; } .a2l-glass .a2l-ms-grid { padding: 24px !important; gap: 24px !important; } .a2l-glass .ms-logo-frame { max-width: 100%; } .a2l-glass .a2l-mapping-grid { padding: 0 !important; } .a2l-glass .a2l-company-stats { grid-template-columns: 1fr !important; } .a2l-glass .tcard { padding: 24px; } .a2l-glass .tcard .quote { font-size: 16px; } .a2l-glass .cta-strip { padding: 40px 24px; } .a2l-glass .cta-strip .btn { width: 100%; justify-content: center; } .a2l-glass .a2l-mapping-grid ~ div[style] { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .a2l-glass .trust { padding: 40px 0 16px; } .a2l-glass .a2l-company-stats .glass { padding: 20px !important; } .a2l-glass .stat .num { font-size: clamp(36px, 10vw, 48px) !important; } /* Reduce directional animation travel on mobile */ .a2l-glass .reveal-left { transform: translateX(-20px); } .a2l-glass .reveal-right { transform: translateX(20px); } .a2l-glass .reveal-bold { transform: scale(0.9) translateY(24px); } } /* ============================================================ RESPONSIVE — Small mobile (<=420px) ============================================================ */ @media (max-width: 420px) { .a2l-glass h1 { font-size: 28px !important; } .a2l-glass h2 { font-size: 24px !important; } .a2l-glass .marquee-cell { width: 120px !important; height: 44px !important; } .a2l-glass .marquee-cell.logo-pill img { max-width: 90%; max-height: 75%; } .a2l-glass .hero-meta .ms-badge { transform: scale(0.75); /* =========================================================================== .lite mode — toggled from inline JS when device looks mid/low-tier (deviceMemory < 4, hardwareConcurrency < 4, or saveData = true) =========================================================================== */ html.lite .a2l-glass .nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(10,10,24,0.92); } html.lite .a2l-glass .hero-orb, html.lite .a2l-glass .hero-mesh, html.lite .a2l-glass .flow-lines, html.lite .a2l-glass .cosmos::after { animation: none !important; } html.lite .a2l-glass .reveal, html.lite .a2l-glass .reveal-left, html.lite .a2l-glass .reveal-right, html.lite .a2l-glass .reveal-scale, html.lite .a2l-glass .reveal-bold { opacity: 1 !important; transform: none !important; transition: none !important; } html.lite .a2l-glass video[autoplay] { display: none; } html.lite .a2l-glass .hero-video-poster { display: block; } /* Respect explicit user preference */ @media (prefers-reduced-motion: reduce) { .a2l-glass .hero-orb, .a2l-glass .hero-mesh, .a2l-glass .flow-lines, .a2l-glass .cosmos::after, .a2l-glass .reveal, .a2l-glass .reveal-left, .a2l-glass .reveal-right, .a2l-glass .reveal-scale, .a2l-glass .reveal-bold { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-data: reduce) { .a2l-glass video[autoplay] { display: none; } } /* =========================================================================== HOVER PASS — 2026-05-09 (revision 3) Glass-reflection feel on every interactive panel: - Background fill brightens (~0.055 → ~0.10 white on dark cosmos) - Top-edge inset highlight intensifies — the "lit edge" reading as glass - Subtle 2px lift, deeper drop shadow for depth - A soft diagonal sheen sweeps across panels that have ::after available (sheen is suppressed on .lite and prefers-reduced-motion) GPU-only: only background-color, transform, box-shadow, opacity transition. No backdrop-filter, no filter, no expensive paints. =========================================================================== */ /* Smooth transitions on every glass-y panel */ .a2l-glass .glass, .a2l-glass .fcard, .a2l-glass .tcard, .a2l-glass .case, .a2l-glass .compare-card, .a2l-glass .lineage-step, .a2l-glass .lineage-img, .a2l-glass .imgph-real, .a2l-glass .ai-stage, .a2l-glass .blog-card, .a2l-glass .blog-subscribe, .a2l-glass .blog-filters, .a2l-glass .ms-logo-frame { transition: background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease; } /* Universal hover state — brighter glass, lifted, deeper shadow */ .a2l-glass .glass:hover, .a2l-glass .fcard:hover, .a2l-glass .tcard:hover, .a2l-glass .case:hover, .a2l-glass .compare-card:hover, .a2l-glass .lineage-step:hover, .a2l-glass .lineage-img:hover, .a2l-glass .imgph-real:hover, .a2l-glass .ai-stage:hover, .a2l-glass .blog-card:hover, .a2l-glass .blog-subscribe:hover, .a2l-glass .blog-filters:hover, .a2l-glass .ms-logo-frame:hover { background-color: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), /* brighter "lit edge" — the glass reflection */ inset 0 -1px 0 rgba(255,255,255,0.05), 0 36px 80px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06); } /* Diagonal sheen sweep — only on panels where ::after is free. .lineage-img, .imgph-real, .ms-logo-frame already use ::after / ::before, so they get the lighten effect above but no sheen. */ .a2l-glass .glass, .a2l-glass .fcard, .a2l-glass .tcard, .a2l-glass .case, .a2l-glass .compare-card, .a2l-glass .lineage-step, .a2l-glass .ai-stage, .a2l-glass .blog-card, .a2l-glass .blog-subscribe, .a2l-glass .blog-filters { position: relative; overflow: hidden; } .a2l-glass .glass::after, .a2l-glass .fcard::after, .a2l-glass .tcard::after, .a2l-glass .case::after, .a2l-glass .compare-card::after, .a2l-glass .lineage-step::after, .a2l-glass .ai-stage::after, .a2l-glass .blog-card::after, .a2l-glass .blog-subscribe::after, .a2l-glass .blog-filters::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65% ); transform: translateX(-150%); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; z-index: 1; } .a2l-glass .glass:hover::after, .a2l-glass .fcard:hover::after, .a2l-glass .tcard:hover::after, .a2l-glass .case:hover::after, .a2l-glass .compare-card:hover::after, .a2l-glass .lineage-step:hover::after, .a2l-glass .ai-stage:hover::after, .a2l-glass .blog-card:hover::after, .a2l-glass .blog-subscribe:hover::after, .a2l-glass .blog-filters:hover::after { transform: translateX(150%); } /* (Sheen is mostly transparent and pointer-events: none, so it passes over content briefly without obstructing clicks or readability — no need to force position/z-index on children, which would break decorative absolutely-positioned descendants like .era-accent / .era-glow.) */ /* Disable the sheen sweep in .lite mode and when the user prefers reduced motion */ html.lite .a2l-glass .glass::after, html.lite .a2l-glass .fcard::after, html.lite .a2l-glass .tcard::after, html.lite .a2l-glass .case::after, html.lite .a2l-glass .compare-card::after, html.lite .a2l-glass .lineage-step::after, html.lite .a2l-glass .ai-stage::after, html.lite .a2l-glass .blog-card::after, html.lite .a2l-glass .blog-subscribe::after, html.lite .a2l-glass .blog-filters::after { display: none; } @media (prefers-reduced-motion: reduce) { .a2l-glass .glass::after, .a2l-glass .fcard::after, .a2l-glass .tcard::after, .a2l-glass .case::after, .a2l-glass .compare-card::after, .a2l-glass .lineage-step::after, .a2l-glass .ai-stage::after, .a2l-glass .blog-card::after, .a2l-glass .blog-subscribe::after, .a2l-glass .blog-filters::after { display: none; } /* keep the static lighten on hover, just lose the sweep + the lift */ .a2l-glass .glass:hover, .a2l-glass .fcard:hover, .a2l-glass .tcard:hover, .a2l-glass .case:hover, .a2l-glass .compare-card:hover, .a2l-glass .lineage-step:hover, .a2l-glass .lineage-img:hover, .a2l-glass .imgph-real:hover, .a2l-glass .ai-stage:hover, .a2l-glass .blog-card:hover, .a2l-glass .blog-subscribe:hover, .a2l-glass .blog-filters:hover, .a2l-glass .ms-logo-frame:hover { transform: none !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } } /* =========================================================================== NATIVE control: appearance reset, custom SVG caret, padding for the caret, light color-scheme for the OS popup chrome. -------------------------------------------------------------------------- The OPENED popup styling (option background/color, :checked highlight, disabled state) lives in functions.php Section 2b as an inline wp_head