/* =========================================================================== * alvio-polish.css — azure-static-owned enhancement layer (2026-08-06, Agust) * * Loaded AFTER theme.css. Isolated here so the shared Power Pages theme.css * (source of truth for the PP track) is never mutated by the static build. * * Design tooling: * - Open Props (MIT, github.com/argyleink/open-props) — a curated subset of * tokens (shadows, spring easings, gradients) inlined as --alv-op-* so we * add ZERO runtime dependency and no external request. * - Fluent-family line icons (24px, 1.75 stroke) to match the site's existing * Lucide iconography, used in the Microsoft capability band. * * Purpose: strengthen two messages — (1) Microsoft Copilot / Copilot Studio * expertise, (2) AI deployment — plus a light polish pass site-wide. * ========================================================================= */ :root { /* ---- Open Props subset (inlined, MIT) --------------------------------- */ --alv-op-shadow-2: 0 3px 5px -2px rgba(11,15,20,.10), 0 7px 14px -5px rgba(11,15,20,.10); --alv-op-shadow-3: 0 -1px 3px 0 rgba(11,15,20,.06), 0 1px 2px -5px rgba(11,15,20,.10), 0 3px 5px -5px rgba(11,15,20,.10), 0 6px 12px -5px rgba(11,15,20,.10), 0 12px 24px -5px rgba(11,15,20,.10); --alv-op-shadow-4: 0 -2px 5px 0 rgba(11,15,20,.06), 0 1px 1px -2px rgba(11,15,20,.08), 0 2px 2px -2px rgba(11,15,20,.10), 0 5px 5px -3px rgba(11,15,20,.10), 0 9px 9px -5px rgba(11,15,20,.10), 0 16px 16px -8px rgba(11,15,20,.12); --alv-op-ease-spring: linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.017 55%,1.006 72.5%,1); --alv-op-ease-3: cubic-bezier(.25,0,.3,1); --alv-op-ease-out-4: cubic-bezier(.05,.7,.1,1); --alv-op-grad-ms: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%); } /* ========================================================================== * Reveal-on-scroll — progressive enhancement. No motion until JS adds * .alv-reveal-ready to ; fully visible when JS is off or reduced-motion. * ======================================================================== */ html.alv-reveal-ready .alv-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--alv-op-ease-out-4), transform .7s var(--alv-op-ease-out-4); transition-delay: var(--alv-reveal-delay, 0ms); will-change: opacity, transform; } html.alv-reveal-ready .alv-reveal.is-revealed { opacity: 1; transform: none; } .alv-reveal--d1 { --alv-reveal-delay: 80ms; } .alv-reveal--d2 { --alv-reveal-delay: 100ms; } .alv-reveal--d3 { --alv-reveal-delay: 180ms; } @media (prefers-reduced-motion: reduce) { html.alv-reveal-ready .alv-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== * Microsoft capability band — the marquee "Microsoft-fluent" signal. * Reinforces Copilot / Copilot Studio expertise with named products + icons. * ======================================================================== */ .alv-ms-band { background: var(--bg-dark); color: var(--alv-onDark-text-100); border-top: 1px solid var(--alv-onDark-border-soft); border-bottom: 1px solid var(--alv-onDark-border-soft); padding: clamp(2.75rem, 6vw, 4rem) 0; } .alv-ms-band__head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; max-width: 46rem; } .alv-ms-band__title { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0; color: var(--alv-white); } .alv-ms-band__title .grad { background: var(--grad-text-accent, var(--alv-op-grad-ms)); -webkit-background-clip: text; background-clip: text; color: transparent; } .alv-ms-band__sub { color: var(--alv-onDark-text-70); font-size: 1.05rem; margin: 0; } .alv-ms-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .alv-ms-chip { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.15rem; background: var(--alv-onDark-surface-06); border: 1px solid var(--alv-onDark-border); border-radius: 12px; transition: transform .35s var(--alv-op-ease-spring), border-color .3s var(--alv-op-ease-3), background .3s var(--alv-op-ease-3); } .alv-ms-chip:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.55); background: var(--alv-onDark-surface-10); } .alv-ms-chip__icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--alv-op-grad-ms); color: #fff; } .alv-ms-chip__icon svg { width: 22px; height: 22px; } .alv-ms-chip__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .alv-ms-chip__name { font-weight: 700; font-size: .98rem; color: var(--alv-white); } .alv-ms-chip__role { font-size: .8rem; color: var(--alv-onDark-text-60); } /* ========================================================================== * AI deployment standout — lifts the message out of hero alt-text into a * designed, staged band: People · Process · Governance · Controls → Deliver. * ======================================================================== */ .alv-deploy { position: relative; overflow: hidden; background: var(--grad-hero); color: var(--alv-white); padding: clamp(3.5rem, 8vw, 6rem) 0; } .alv-deploy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 82% 8%, rgba(56,189,248,.16), transparent 70%), radial-gradient(50% 50% at 12% 98%, rgba(37,99,235,.20), transparent 72%); } .alv-deploy > .alv-container { position: relative; } .alv-deploy__eyebrow { color: var(--alv-blue-500); } .alv-deploy__headline { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: .5rem 0 .75rem; max-width: 20ch; color: var(--alv-white); } .alv-deploy__headline .grad { background: var(--grad-text-accent, var(--alv-op-grad-ms)); -webkit-background-clip: text; background-clip: text; color: transparent; } .alv-deploy__lede { color: var(--alv-onDark-text-80); font-size: 1.15rem; line-height: 1.6; max-width: 44rem; margin: 0 0 2.5rem; } .alv-deploy__flow { list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: alvstep; } .alv-deploy__step { position: relative; padding: 1.4rem 1.35rem; background: var(--alv-onDark-surface-06); border: 1px solid var(--alv-onDark-border); border-radius: 14px; } .alv-deploy__step::before { counter-increment: alvstep; content: counter(alvstep, decimal-leading-zero); font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--alv-blue-500); } .alv-deploy__step h3 { font-size: 1.12rem; font-weight: 700; margin: .35rem 0 .35rem; color: var(--alv-white); } .alv-deploy__step p { font-size: .95rem; line-height: 1.55; color: var(--alv-onDark-text-70); margin: 0; } .alv-deploy__motto { display: inline-flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding: .85rem 1.4rem; border-radius: 999px; background: var(--alv-onDark-surface-08); border: 1px solid var(--alv-onDark-border); font-weight: 700; letter-spacing: .02em; } .alv-deploy__motto b { color: var(--alv-white); } .alv-deploy__motto .sep { color: var(--alv-blue-500); font-size: 1.2rem; line-height: 1; } .alv-deploy__motto .muted { color: var(--alv-onDark-text-60); font-weight: 600; } /* ========================================================================== * Light polish — elevation + motion on existing components (Open Props). * ======================================================================== */ .alv-card { transition: transform .4s var(--alv-op-ease-spring), box-shadow .4s var(--alv-op-ease-3), border-color .3s var(--alv-op-ease-3); } .alv-card:hover { transform: translateY(-5px); box-shadow: var(--alv-op-shadow-4); } .alv-cta--primary { transition: transform .3s var(--alv-op-ease-spring), box-shadow .3s var(--alv-op-ease-3); } .alv-cta--primary:hover { transform: translateY(-2px); box-shadow: var(--alv-op-shadow-3); } .alv-cta--large:hover { box-shadow: var(--alv-op-shadow-4); }