.elementor-86 .elementor-element.elementor-element-69bdda8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-86 .elementor-element.elementor-element-bfeba03{left:0px;}body.rtl .elementor-86 .elementor-element.elementor-element-bfeba03{right:0px;}.elementor-86 .elementor-element.elementor-element-bfeba03{top:0px;z-index:-99;}.elementor-86 .elementor-element.elementor-element-2d6953c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-86 .elementor-element.elementor-element-d3077a0{left:0px;}body.rtl .elementor-86 .elementor-element.elementor-element-d3077a0{right:0px;}.elementor-86 .elementor-element.elementor-element-d3077a0{top:0px;z-index:-99;}.elementor-86 .elementor-element.elementor-element-deb8588{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-86 .elementor-element.elementor-element-9051f36{left:0px;}body.rtl .elementor-86 .elementor-element.elementor-element-9051f36{right:0px;}.elementor-86 .elementor-element.elementor-element-9051f36{top:-99px;}.elementor-86 .elementor-element.elementor-element-54c9f29{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-86 .elementor-element.elementor-element-2593dba{left:0px;}body.rtl .elementor-86 .elementor-element.elementor-element-2593dba{right:0px;}.elementor-86 .elementor-element.elementor-element-2593dba{top:0px;z-index:-99;}.elementor-86 .elementor-element.elementor-element-b9954f8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-86 .elementor-element.elementor-element-11d2534{left:0px;}body.rtl .elementor-86 .elementor-element.elementor-element-11d2534{right:0px;}.elementor-86 .elementor-element.elementor-element-11d2534{top:0px;z-index:-99;}.elementor-86 .elementor-element.elementor-element-76f547f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-86 .elementor-element.elementor-element-76f547f:not(.elementor-motion-effects-element-type-background), .elementor-86 .elementor-element.elementor-element-76f547f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}body:not(.rtl) .elementor-86 .elementor-element.elementor-element-0dce3e0{left:0px;}body.rtl .elementor-86 .elementor-element.elementor-element-0dce3e0{right:0px;}.elementor-86 .elementor-element.elementor-element-0dce3e0{top:0px;z-index:-99;}.elementor-86 .elementor-element.elementor-element-e39b365{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-04e2281 */.rkh3-hero,.rkh3-hero *{box-sizing:border-box} .rkh3-hero{ --reveal:clamp(54px,5.2vw,76px);position:relative;isolation:isolate;overflow:hidden; height:calc(100svh - var(--reveal));min-height:560px;padding:clamp(42px,6vw,78px) 20px 0; background:#051f49; color:#f5fbff;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; contain:layout paint style; } /* background photo */ .rkh3-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center} .rkh3-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#051f49 0%,rgba(5,31,73,.82) 28%,rgba(5,31,73,.38) 52%,transparent 72%),linear-gradient(180deg,rgba(0,0,0,.12),transparent 40%,rgba(0,0,0,.22))} /* glows: radial-gradient instead of filter:blur() — no per-frame filter pass while animating */ .rkh3-glow{position:absolute;z-index:1;border-radius:50%;pointer-events:none;transform:translateZ(0)} .rkh3-glow-a{width:380px;height:380px;left:-130px;top:8%;background:radial-gradient(circle closest-side,rgba(36,118,226,.62),rgba(36,118,226,.28) 55%,transparent 78%);animation:rkh3FloatA 12s ease-in-out infinite alternate} .rkh3-glow-b{width:470px;height:470px;right:-185px;bottom:9%;background:radial-gradient(circle closest-side,rgba(105,50,196,.6),rgba(105,50,196,.26) 55%,transparent 78%);animation:rkh3FloatB 14s ease-in-out infinite alternate} .rkh3-inner{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;width:min(1180px,100%);height:100%;margin:auto} .rkh3-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1040px;text-align:center} .rkh3-logo{display:block;width:clamp(390px,36vw,520px);max-width:min(700px,78vw);height:auto;margin:0 auto 28px;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));opacity:0;transform:translateY(10px)} .rkh3-title{width:100%;margin:0;font:600 clamp(36px,4.1vw,50px)/1.18 Poppins,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 4px 16px rgba(0,0,0,.72),0 12px 40px rgba(0,0,0,.55)} .rkh3-title span{display:block;padding-bottom:.08em;opacity:0;transform:translateY(105%)} .rkh3-actions{display:flex;justify-content:center;margin-top:34px;opacity:0;transform:translateY(18px)} .rkh3-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;overflow:hidden;border-radius:999px;background:#e70185;color:#fff;text-decoration:none;font-weight:500;letter-spacing:.01em;box-shadow:0 18px 45px rgba(0,0,0,.32);transition:transform .22s ease,box-shadow .22s ease} .rkh3-button::after{content:"";position:absolute;left:-30%;bottom:-70%;width:80%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.2);transition:transform .32s ease} .rkh3-button span,.rkh3-button svg{position:relative;z-index:1}.rkh3-button svg{width:20px;height:20px;fill:currentColor;transition:transform .22s ease} .rkh3-button:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.38);color:#fff}.rkh3-button:hover::after{transform:translate(55%,-45%) scale(1.35)}.rkh3-button:hover svg{transform:translateX(3px)} .rkh3-button:focus-visible{outline:3px solid #fff;outline-offset:4px} .rkh3-marquee-shell{position:absolute;z-index:1;top:-12vh;right:clamp(18px,5vw,96px);display:grid;width:50vw;min-height:124vh;grid-template-columns:repeat(2,minmax(150px,1fr));gap:clamp(12px,1.55vw,22px);opacity:.78;transform:rotate(-6deg) scale(1.045);pointer-events:none} .rkh3-marquee{overflow:hidden;min-height:124vh}.rkh3-track{--track-gap:clamp(12px,1.55vw,22px);display:flex;flex-direction:column;gap:var(--track-gap);transform:translate3d(0,0,0)} .rkh3-up .rkh3-track{animation:rkh3Up 32s linear infinite}.rkh3-down .rkh3-track{animation:rkh3Down 34s linear infinite} .rkh3-shot{position:relative;flex:0 0 clamp(260px,30vh,420px);margin:0;overflow:hidden;border-radius:24px;background:#071f3b;box-shadow:0 24px 64px rgba(0,0,0,.3);contain:strict} .rkh3-shot.rkh3-tall{flex-basis:clamp(340px,40vh,540px)} /* height:100% + cover means the intrinsic attrs never drive layout — they only stop CLS */ .rkh3-shot img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.035)} .rkh3-hero.is-visible .rkh3-logo{opacity:1;transform:none;transition:opacity .65s ease,transform .75s cubic-bezier(.22,1,.36,1)} .rkh3-hero.is-visible .rkh3-title span{opacity:1;transform:none;transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .65s ease} .rkh3-hero.is-visible .rkh3-title span:first-child{transition-delay:.08s}.rkh3-hero.is-visible .rkh3-title span:nth-child(2){transition-delay:.18s} .rkh3-hero.is-visible .rkh3-actions{opacity:1;transform:none;transition:transform .75s .25s cubic-bezier(.22,1,.36,1),opacity .65s .25s ease} @keyframes rkh3Up{to{transform:translate3d(0,calc(-50% - var(--track-gap)/2),0)}}@keyframes rkh3Down{from{transform:translate3d(0,calc(-50% - var(--track-gap)/2),0)}} @keyframes rkh3FloatA{to{transform:translate3d(40px,24px,0) scale(1.1)}}@keyframes rkh3FloatB{to{transform:translate3d(-45px,-20px,0) scale(1.07)}} @media(max-width:980px){.rkh3-hero{--reveal:58px;min-height:540px;padding-top:40px}.rkh3-marquee-shell{top:-10vh;right:-10vw;width:50vw;min-height:122vh;opacity:.48;transform:rotate(-6deg) scale(1.06)}.rkh3-marquee{min-height:122vh}} @media(max-width:640px){.rkh3-hero{--reveal:54px;min-height:520px;padding-inline:16px}.rkh3-title{font-size:clamp(31px,8.8vw,44px)}.rkh3-logo{width:clamp(170px,58vw,230px);margin-bottom:20px}.rkh3-marquee-shell{top:-8vh;right:-58vw;width:104vw;min-height:118vh;gap:12px;opacity:.42;transform:rotate(-5deg) scale(1.08)}.rkh3-marquee{min-height:118vh}.rkh3-track{--track-gap:12px}.rkh3-shot{flex-basis:210px;border-radius:20px}.rkh3-shot.rkh3-tall{flex-basis:280px}} @media(prefers-reduced-motion:reduce){.rkh3-glow,.rkh3-track{animation:none!important}.rkh3-logo,.rkh3-title span,.rkh3-actions{opacity:1;transform:none;transition:none!important}.rkh3-button{transition:none}}/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bfeba03 */.rkh3-hero,.rkh3-hero *{box-sizing:border-box} .rkh3-hero{ position:relative;isolation:isolate;overflow:hidden; /* Full viewport. 100vh is the fallback; 100svh wins where supported and is the safer unit on mobile — plain 100vh measures against the LARGEST viewport, so the bottom of the hero sits under the browser UI until the user scrolls. svh uses the smallest viewport, so nothing is ever clipped and it does not resize mid-scroll the way dvh does. */ height:100vh;height:100svh;min-height:560px;padding:clamp(42px,6vw,78px) 20px 0; background:#051f49; color:#f5fbff;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; contain:layout paint style; } /* background photo */ .rkh3-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center} .rkh3-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#051f49 0%,rgba(5,31,73,.82) 28%,rgba(5,31,73,.38) 52%,transparent 72%),linear-gradient(180deg,rgba(0,0,0,.12),transparent 40%,rgba(0,0,0,.22))} /* glows: radial-gradient instead of filter:blur() — no per-frame filter pass while animating */ .rkh3-glow{position:absolute;z-index:1;border-radius:50%;pointer-events:none;transform:translateZ(0)} .rkh3-glow-a{width:380px;height:380px;left:-130px;top:8%;background:radial-gradient(circle closest-side,rgba(36,118,226,.62),rgba(36,118,226,.28) 55%,transparent 78%);animation:rkh3FloatA 12s ease-in-out infinite alternate} .rkh3-glow-b{width:470px;height:470px;right:-185px;bottom:9%;background:radial-gradient(circle closest-side,rgba(105,50,196,.6),rgba(105,50,196,.26) 55%,transparent 78%);animation:rkh3FloatB 14s ease-in-out infinite alternate} .rkh3-inner{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;width:min(1180px,100%);height:100%;margin:auto} .rkh3-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1040px;text-align:center} .rkh3-logo{display:block;width:clamp(390px,36vw,520px);max-width:min(700px,78vw);height:auto;margin:0 auto 28px;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));opacity:0;transform:translateY(10px)} .rkh3-title{width:100%;margin:0;font:600 clamp(36px,4.1vw,50px)/1.18 Poppins,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 4px 16px rgba(0,0,0,.72),0 12px 40px rgba(0,0,0,.55)} .rkh3-title span{display:block;padding-bottom:.08em;opacity:0;transform:translateY(105%)} .rkh3-actions{display:flex;justify-content:center;margin-top:34px;opacity:0;transform:translateY(18px)} .rkh3-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;overflow:hidden;border-radius:999px;background:#e70185;color:#fff;text-decoration:none;font-weight:500;letter-spacing:.01em;box-shadow:0 18px 45px rgba(0,0,0,.32);transition:transform .22s ease,box-shadow .22s ease} .rkh3-button::after{content:"";position:absolute;left:-30%;bottom:-70%;width:80%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.2);transition:transform .32s ease} .rkh3-button span,.rkh3-button svg{position:relative;z-index:1}.rkh3-button svg{width:20px;height:20px;fill:currentColor;transition:transform .22s ease} .rkh3-button:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.38);color:#fff}.rkh3-button:hover::after{transform:translate(55%,-45%) scale(1.35)}.rkh3-button:hover svg{transform:translateX(3px)} .rkh3-button:focus-visible{outline:3px solid #fff;outline-offset:4px} .rkh3-marquee-shell{position:absolute;z-index:1;top:-12vh;right:clamp(18px,5vw,96px);display:grid;width:50vw;min-height:124vh;grid-template-columns:repeat(2,minmax(150px,1fr));gap:clamp(12px,1.55vw,22px);opacity:.78;transform:rotate(-6deg) scale(1.045);pointer-events:none} .rkh3-marquee{overflow:hidden;min-height:124vh}.rkh3-track{--track-gap:clamp(12px,1.55vw,22px);display:flex;flex-direction:column;gap:var(--track-gap);transform:translate3d(0,0,0)} .rkh3-up .rkh3-track{animation:rkh3Up 32s linear infinite}.rkh3-down .rkh3-track{animation:rkh3Down 34s linear infinite} .rkh3-shot{position:relative;flex:0 0 clamp(260px,30vh,420px);margin:0;overflow:hidden;border-radius:24px;background:#071f3b;box-shadow:0 24px 64px rgba(0,0,0,.3);contain:strict} .rkh3-shot.rkh3-tall{flex-basis:clamp(340px,40vh,540px)} /* height:100% + cover means the intrinsic attrs never drive layout — they only stop CLS */ .rkh3-shot img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.035)} .rkh3-hero.is-visible .rkh3-logo{opacity:1;transform:none;transition:opacity .65s ease,transform .75s cubic-bezier(.22,1,.36,1)} .rkh3-hero.is-visible .rkh3-title span{opacity:1;transform:none;transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .65s ease} .rkh3-hero.is-visible .rkh3-title span:first-child{transition-delay:.08s}.rkh3-hero.is-visible .rkh3-title span:nth-child(2){transition-delay:.18s} .rkh3-hero.is-visible .rkh3-actions{opacity:1;transform:none;transition:transform .75s .25s cubic-bezier(.22,1,.36,1),opacity .65s .25s ease} @keyframes rkh3Up{to{transform:translate3d(0,calc(-50% - var(--track-gap)/2),0)}}@keyframes rkh3Down{from{transform:translate3d(0,calc(-50% - var(--track-gap)/2),0)}} @keyframes rkh3FloatA{to{transform:translate3d(40px,24px,0) scale(1.1)}}@keyframes rkh3FloatB{to{transform:translate3d(-45px,-20px,0) scale(1.07)}} @media(max-width:980px){.rkh3-hero{min-height:540px;padding-top:40px}.rkh3-marquee-shell{top:-10vh;right:-10vw;width:50vw;min-height:122vh;opacity:.48;transform:rotate(-6deg) scale(1.06)}.rkh3-marquee{min-height:122vh}} @media(max-width:640px){.rkh3-hero{min-height:520px;padding-inline:16px}.rkh3-title{font-size:clamp(31px,8.8vw,44px)}.rkh3-logo{width:clamp(170px,58vw,230px);margin-bottom:20px}.rkh3-marquee-shell{top:-8vh;right:-58vw;width:104vw;min-height:118vh;gap:12px;opacity:.42;transform:rotate(-5deg) scale(1.08)}.rkh3-marquee{min-height:118vh}.rkh3-track{--track-gap:12px}.rkh3-shot{flex-basis:210px;border-radius:20px}.rkh3-shot.rkh3-tall{flex-basis:280px}} @media(prefers-reduced-motion:reduce){.rkh3-glow,.rkh3-track{animation:none!important}.rkh3-logo,.rkh3-title span,.rkh3-actions{opacity:1;transform:none;transition:none!important}.rkh3-button{transition:none}}/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-baf4434 *//* ── Reset ── */ .da-benefits-four-section *, .da-benefits-four-section *::before, .da-benefits-four-section *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Section shell ── */ .da-benefits-four-section { position: relative; width: 100%; overflow: hidden; padding: 90px 40px 100px; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; } .da-benefits-four-eyebrow, .da-benefits-four-heading, .da-benefits-four-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } .da-benefits-four-sub, .da-benefits-four-card-body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ── Background layers ── */ .da-benefits-four-bg-base { position: absolute; inset: 0; background: #f5f9ff; z-index: -3; } .da-benefits-four-bg-mountain { position: absolute; inset: 0; background-image: url('http://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/06/homeImageMountains2-1-scaled.jpg'); background-size: cover; background-position: center right; opacity: 0.12; z-index: -2; } .da-benefits-four-bg-gradient { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.92) 42%, rgba(226, 240, 255, 0.82) 68%, rgba(248, 232, 248, 0.88) 100% ); z-index: -1; } /* ── Pixel overlay ── */ .da-benefits-four-pixel-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: grid; gap: 0; } /* ── Inner ── */ .da-benefits-four-inner { max-width: 1800px; margin: 0 auto; position: relative; z-index: 5; } /* ── Card grid ── */ .da-benefits-four-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* ── Border wrapper — static blue, rainbow on hover ── */ .da-benefits-four-card-wrap { border-radius: 16px; padding: 1px; background: #2476e2; transition: transform 0.3s ease, box-shadow 0.3s ease; } .da-benefits-four-card-wrap:hover { background: linear-gradient( 45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000 ); background-size: 400%; animation: da-rb-rainbow 20s linear infinite; transform: translateY(-5px); box-shadow: 0 24px 56px rgba(7, 31, 75, 0.16); } /* ── Card inner ── */ .da-benefits-four-card { border-radius: 14px; padding: 32px 28px 36px; background: #ffffff; cursor: default; height: 100%; } @keyframes da-rb-rainbow { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } /* ── Icon circle ── */ .da-benefits-four-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; position: relative; overflow: hidden; } .da-benefits-four-card-wrap:nth-child(1) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #2563c4 0%, #4f3fa0 100%); } .da-benefits-four-card-wrap:nth-child(2) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #5a2ca0 0%, #7c3ab8 100%); } .da-benefits-four-card-wrap:nth-child(3) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #1e4db0 0%, #5a2ca0 100%); } .da-benefits-four-card-wrap:nth-child(4) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #7a2090 0%, #b02080 100%); } .da-benefits-four-icon-wrap svg { position: relative; z-index: 1; } /* ── Card title ── */ .da-benefits-four-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #0D0D0D; line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.01em; } .da-benefits-four-card-title::after { content: ''; display: block; width: 32px; height: 2px; background: #bf2796; border-radius: 2px; margin-top: 10px; } /* ── Card body ── */ .da-benefits-four-card-body { font-size: 16px; line-height: 1.65; color: rgba(7, 31, 75, 0.70); } /* ── Responsive ── */ @media (max-width: 1024px) { .da-benefits-four-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .da-benefits-four-section { padding: 60px 20px 70px; } .da-benefits-four-grid { grid-template-columns: 1fr; gap: 16px; } } /* ── Pixel dissolve ── */ .da-benefits-four-pixel-cell { background: #f5f9ff; transition: opacity var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1), transform var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1); } .da-benefits-four-pixel-cell.revealed { opacity: 0 !important; transform: scale(1.4); } /* ── Content reveal ── */ .da-benefits-four-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .da-benefits-four-reveal.in { opacity: 1; transform: translateY(0); } .da-benefits-four-card-wrap.da-benefits-four-reveal { transform: translateY(32px) scale(0.98); } .da-benefits-four-card-wrap.da-benefits-four-reveal.in { transform: translateY(0) scale(1); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d3077a0 *//* ── Reset ── */ .da-benefits-four-section *, .da-benefits-four-section *::before, .da-benefits-four-section *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Section shell ── */ .da-benefits-four-section { position: relative; width: 100%; overflow: hidden; padding: 90px 40px 100px; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; } .da-benefits-four-eyebrow, .da-benefits-four-heading, .da-benefits-four-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } .da-benefits-four-sub, .da-benefits-four-card-body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ── Background layers ── */ .da-benefits-four-bg-base { position: absolute; inset: 0; background: #f5f9ff; z-index: -3; } .da-benefits-four-bg-mountain { position: absolute; inset: 0; background-image: url('http://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/06/homeImageMountains2-1-scaled.jpg'); background-size: cover; background-position: center right; opacity: 0.12; z-index: -2; } .da-benefits-four-bg-gradient { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.92) 42%, rgba(226, 240, 255, 0.82) 68%, rgba(248, 232, 248, 0.88) 100% ); z-index: -1; } /* ── Pixel overlay ── */ .da-benefits-four-pixel-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: grid; gap: 0; } /* ── Inner ── */ .da-benefits-four-inner { max-width: 1800px; margin: 0 auto; position: relative; z-index: 5; } /* ── Card grid ── */ .da-benefits-four-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* ── Border wrapper — static blue, rainbow on hover ── */ .da-benefits-four-card-wrap { border-radius: 16px; padding: 1px; background: #2476e2; transition: transform 0.3s ease, box-shadow 0.3s ease; } .da-benefits-four-card-wrap:hover { background: linear-gradient( 45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000 ); background-size: 400%; animation: da-rb-rainbow 20s linear infinite; transform: translateY(-5px); box-shadow: 0 24px 56px rgba(7, 31, 75, 0.16); } /* ── Card inner ── */ .da-benefits-four-card { border-radius: 14px; padding: 32px 28px 36px; background: #ffffff; cursor: default; height: 100%; } @keyframes da-rb-rainbow { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } /* ── Icon circle ── */ .da-benefits-four-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; position: relative; overflow: hidden; } .da-benefits-four-card-wrap:nth-child(1) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #2563c4 0%, #4f3fa0 100%); } .da-benefits-four-card-wrap:nth-child(2) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #5a2ca0 0%, #7c3ab8 100%); } .da-benefits-four-card-wrap:nth-child(3) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #1e4db0 0%, #5a2ca0 100%); } .da-benefits-four-card-wrap:nth-child(4) .da-benefits-four-icon-wrap { background: linear-gradient(135deg, #7a2090 0%, #b02080 100%); } .da-benefits-four-icon-wrap svg { position: relative; z-index: 1; } /* ── Card title ── */ .da-benefits-four-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #0D0D0D; line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.01em; } .da-benefits-four-card-title::after { content: ''; display: block; width: 32px; height: 2px; background: #bf2796; border-radius: 2px; margin-top: 10px; } /* ── Card body ── */ .da-benefits-four-card-body { font-size: 16px; line-height: 1.65; color: rgba(7, 31, 75, 0.70); } /* ── Responsive ── */ @media (max-width: 1024px) { .da-benefits-four-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .da-benefits-four-section { padding: 60px 20px 70px; } .da-benefits-four-grid { grid-template-columns: 1fr; gap: 16px; } } /* ── Pixel dissolve ── */ .da-benefits-four-pixel-cell { background: #f5f9ff; transition: opacity var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1), transform var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1); } .da-benefits-four-pixel-cell.revealed { opacity: 0 !important; transform: scale(1.4); } /* ── Content reveal ── */ .da-benefits-four-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .da-benefits-four-reveal.in { opacity: 1; transform: translateY(0); } .da-benefits-four-card-wrap.da-benefits-four-reveal { transform: translateY(32px) scale(0.98); } .da-benefits-four-card-wrap.da-benefits-four-reveal.in { transform: translateY(0) scale(1); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-36b6759 *//* ===== 04 WELCOME (motion shader background, per-word reveal) ===== */ /* scoped to .da-gw to avoid bleeding into page */ .da-gw *, .da-gw *::before, .da-gw *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── container ── The photo is gone. The base gradient below now IS the background, so it has to carry the whole section on its own — hence the extra colour stops. Deep navy at the corners keeps the long body copy readable; the brand blues and violet lift through the middle. Costs zero bytes and zero requests. */ .da-gw { position: relative; width: 100%; min-height: 60vh; overflow: hidden; display: flex; align-items: center; justify-content: center; contain: layout paint; background: radial-gradient(ellipse 85% 70% at 15% 12%, rgba(0, 214, 230, 0.34) 0%, rgba(0, 190, 205, 0) 58%), radial-gradient(ellipse 80% 75% at 88% 88%, rgba(255, 46, 160, 0.30) 0%, rgba(231, 1, 133, 0) 60%), linear-gradient(158deg, #0b2e7a 0%, #1250b5 24%, #1f5ab8 44%, #5442d4 64%, #7a3bc4 82%, #3a1f7a 100%); } /* ── vignette: darkens the edges so white type never sits on a bright band ── Static, no blend mode, sits under the shader. */ .da-gw-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 82% 72% at 50% 50%, rgba(4, 9, 28, 0) 48%, rgba(4, 9, 28, 0.30) 100%), linear-gradient(180deg, rgba(4, 9, 28, 0.22) 0%, rgba(4, 9, 28, 0) 32%, rgba(4, 9, 28, 0) 70%, rgba(4, 9, 28, 0.28) 100%); } /* ── shader: four slow-drifting colour fields ── With the photo gone this is the only thing moving, so alphas are nudged up slightly and a fourth violet field added — there is no photo texture left for them to compete with. Timings stay long (46-64s) so it reads as ambient rather than animated. Deliberately built to be cheap. Each field is a plain radial-gradient on its own promoted layer and ONLY `transform` animates, so the browser composites a cached texture instead of repainting. No filter: blur() (that re-runs every frame) and no mix-blend-mode (that forces a re-blend of the whole region every frame) — both were jank sources elsewhere on this site. The soft edge comes from the gradient's own falloff. */ .da-gw-shader { position: absolute; inset: -18%; z-index: 2; pointer-events: none; overflow: hidden; } .da-gw-shader span { position: absolute; display: block; border-radius: 50%; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; } /* teal — top left */ .da-gw-shader span:nth-child(1) { width: 66%; height: 66%; top: -8%; left: -10%; /* Alpha capped at 0.22 and the gradient's lightest stop darkened to #1f5ab8. This teal is very light (38,226,240), so at 0.30 over the old #2568cc stop it pushed white body copy down to 3.58:1 — below the 4.5:1 WCAG AA floor. Lowering alpha alone was not enough (it plateaus around 4.29:1); the stop had to come down too. Now 4.62:1, and 4.59:1 where it overlaps the blue field. Raising either value again will break that — recheck if you do. */ background: radial-gradient(circle closest-side, rgba(38, 226, 240, 0.22) 0%, rgba(0, 190, 205, 0.10) 48%, rgba(0, 190, 205, 0) 76%); animation: daGwDriftA 46s ease-in-out infinite alternate; } /* magenta — bottom right */ .da-gw-shader span:nth-child(2) { width: 72%; height: 72%; right: -14%; bottom: -12%; background: radial-gradient(circle closest-side, rgba(255, 64, 175, 0.28) 0%, rgba(231, 1, 133, 0.13) 48%, rgba(231, 1, 133, 0) 76%); animation: daGwDriftB 58s ease-in-out infinite alternate; } /* blue — centre */ .da-gw-shader span:nth-child(3) { width: 58%; height: 58%; top: 24%; left: 36%; background: radial-gradient(circle closest-side, rgba(36, 118, 226, 0.28) 0%, rgba(36, 118, 226, 0.12) 50%, rgba(36, 118, 226, 0) 78%); animation: daGwDriftC 52s ease-in-out infinite alternate; } /* violet — upper right, the new field */ .da-gw-shader span:nth-child(4) { width: 50%; height: 50%; top: -4%; right: 8%; background: radial-gradient(circle closest-side, rgba(150, 92, 255, 0.24) 0%, rgba(122, 59, 196, 0.10) 50%, rgba(122, 59, 196, 0) 78%); animation: daGwDriftD 64s ease-in-out infinite alternate; } @keyframes daGwDriftA { to { transform: translate3d(14%, 10%, 0) scale(1.14); } } @keyframes daGwDriftB { to { transform: translate3d(-12%, -9%, 0) scale(1.10); } } @keyframes daGwDriftC { to { transform: translate3d(-9%, 12%, 0) scale(1.18); } } @keyframes daGwDriftD { to { transform: translate3d(-14%, 14%, 0) scale(1.12); } } /* Set by the existing IntersectionObserver — stops compositing off-screen and releases the promoted layers so they aren't holding GPU memory. */ .da-gw.da-gw-idle .da-gw-shader span { animation-play-state: paused; will-change: auto; } /* ── content ── */ .da-gw-content { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; padding: 60px clamp(24px, 6vw, 100px); display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; text-align: center; } /* ── Logo mark ── */ .da-gw-logo { position: relative; z-index: 25; width: clamp(100px, 22vw, 120px); max-width: 92vw; height: auto; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin: 0 auto 34px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1 !important; visibility: visible !important; transform: none !important; } .da-gw-logo img { display: block !important; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; opacity: 1 !important; visibility: visible !important; } /* reveal animation */ .da-gw-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .da-gw-reveal.in { opacity: 1; transform: none; } /* ── Framer-style per-WORD entrance ── Was per-character. An inline-block on every single letter lets the browser break a line between any two letters, which is why copy was rendering as "interac / tive" and "the s / ervices". Wrapping whole words keeps each word atomic, so normal word-wrapping rules apply again. It is also ~4x cheaper: this section went from roughly 380 animated elements to roughly 90. */ .da-gw-word { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1), transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), filter 0.62s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--da-word-index, 0) * 42ms); } .da-gw-reveal.in .da-gw-word { opacity: 1; transform: translateY(0); filter: blur(0); } .da-gw-reveal:not(.in) .da-gw-word { transition-delay: 0ms; } /* ── Scroll-based H4 word reveal ── */ .da-gw-scroll-copy .da-gw-word { transition-delay: 0ms; } /* No blur here on purpose. The entrance above animates filter once, which is fine; this one is driven continuously by scroll position, and re-evaluating a blur on ~90 elements every scroll frame is exactly the per-frame filter cost that caused jank elsewhere on this site. Opacity and translate are composited, so they stay smooth. */ .da-gw-scroll-copy.is-scroll-controlled .da-gw-word { opacity: var(--da-word-opacity, 0); transform: translateY(var(--da-word-y, 18px)); filter: none; transition: opacity 120ms linear, transform 120ms linear; } /* eyebrow */ .da-gw-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(215, 228, 255, 0.8); margin-bottom: 20px; text-align: center; transition-delay: 0s; } /* h2 */ .da-gw-h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(36px, 4.1vw, 50px); line-height: 1.18; letter-spacing: -0.025em; color: #ffffff; margin-bottom: 28px; text-align: center; text-wrap: balance; text-shadow: 0 2px 24px rgba(4, 10, 32, 0.45); transition-delay: 0.1s; } /* h4 */ .da-gw-h4 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(15px, 1.8vw, 20px); line-height: 1.5; letter-spacing: -0.01em; color: rgba(238, 243, 255, 0.94); max-width: 62ch; margin: 0 auto 24px; text-align: center; /* `balance` is for short headings — browsers cap it at ~6 lines and it is the wrong tool for a full paragraph. `pretty` optimises the last lines and prevents orphans, which is what this needs now it flows as one block. */ text-wrap: pretty; text-shadow: 0 1px 16px rgba(4, 10, 32, 0.5); transition-delay: 0.2s; } /* description */ .da-gw-desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; color: rgba(224, 232, 255, 0.8); max-width: 56ch; margin: 0 auto; text-align: center; transition-delay: 0.3s; } /* ── pixel dissolve overlay ── */ .da-gw-pixels { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; contain: strict; } .da-gw-pixel { background: #0b2e7a; /* matches the gradient's first stop so the seam is invisible */ transition: opacity var(--px-dur, 480ms) var(--px-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1), transform var(--px-dur, 480ms) var(--px-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1); } .da-gw-pixel.out { opacity: 0 !important; transform: scale(1.6); } /* responsive */ @media (max-width: 600px) { .da-gw { min-height: auto; } .da-gw-content { padding: 48px 24px 56px; } } /* reduced motion — colour stays, movement stops */ @media (prefers-reduced-motion: reduce) { .da-gw-shader span { animation: none !important; transform: none !important; will-change: auto; } .da-gw-word, .da-gw-reveal { transition-duration: 0.01ms !important; } /* words must not stay stuck at opacity 0 when the scroll driver is muted */ .da-gw-scroll-copy.is-scroll-controlled .da-gw-word { opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-9051f36 *//* ===== 04 WELCOME (motion shader background, no imagery) ===== */ /* scoped to .da-gw to avoid bleeding into page */ .da-gw *, .da-gw *::before, .da-gw *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── container ── The photo is gone. The base gradient below now IS the background, so it has to carry the whole section on its own — hence the extra colour stops. Deep navy at the corners keeps the long body copy readable; the brand blues and violet lift through the middle. Costs zero bytes and zero requests. */ .da-gw { position: relative; width: 100%; min-height: 60vh; overflow: hidden; display: flex; align-items: center; justify-content: center; contain: layout paint; background: radial-gradient(ellipse 85% 70% at 15% 12%, rgba(0, 214, 230, 0.34) 0%, rgba(0, 190, 205, 0) 58%), radial-gradient(ellipse 80% 75% at 88% 88%, rgba(255, 46, 160, 0.30) 0%, rgba(231, 1, 133, 0) 60%), linear-gradient(158deg, #0b2e7a 0%, #1250b5 24%, #1f5ab8 44%, #5442d4 64%, #7a3bc4 82%, #3a1f7a 100%); } /* ── vignette: darkens the edges so white type never sits on a bright band ── Static, no blend mode, sits under the shader. */ .da-gw-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 82% 72% at 50% 50%, rgba(4, 9, 28, 0) 48%, rgba(4, 9, 28, 0.30) 100%), linear-gradient(180deg, rgba(4, 9, 28, 0.22) 0%, rgba(4, 9, 28, 0) 32%, rgba(4, 9, 28, 0) 70%, rgba(4, 9, 28, 0.28) 100%); } /* ── shader: four slow-drifting colour fields ── With the photo gone this is the only thing moving, so alphas are nudged up slightly and a fourth violet field added — there is no photo texture left for them to compete with. Timings stay long (46-64s) so it reads as ambient rather than animated. Deliberately built to be cheap. Each field is a plain radial-gradient on its own promoted layer and ONLY `transform` animates, so the browser composites a cached texture instead of repainting. No filter: blur() (that re-runs every frame) and no mix-blend-mode (that forces a re-blend of the whole region every frame) — both were jank sources elsewhere on this site. The soft edge comes from the gradient's own falloff. */ .da-gw-shader { position: absolute; inset: -18%; z-index: 2; pointer-events: none; overflow: hidden; } .da-gw-shader span { position: absolute; display: block; border-radius: 50%; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; } /* teal — top left */ .da-gw-shader span:nth-child(1) { width: 66%; height: 66%; top: -8%; left: -10%; /* Alpha capped at 0.22 and the gradient's lightest stop darkened to #1f5ab8. This teal is very light (38,226,240), so at 0.30 over the old #2568cc stop it pushed white body copy down to 3.58:1 — below the 4.5:1 WCAG AA floor. Lowering alpha alone was not enough (it plateaus around 4.29:1); the stop had to come down too. Now 4.62:1, and 4.59:1 where it overlaps the blue field. Raising either value again will break that — recheck if you do. */ background: radial-gradient(circle closest-side, rgba(38, 226, 240, 0.22) 0%, rgba(0, 190, 205, 0.10) 48%, rgba(0, 190, 205, 0) 76%); animation: daGwDriftA 46s ease-in-out infinite alternate; } /* magenta — bottom right */ .da-gw-shader span:nth-child(2) { width: 72%; height: 72%; right: -14%; bottom: -12%; background: radial-gradient(circle closest-side, rgba(255, 64, 175, 0.28) 0%, rgba(231, 1, 133, 0.13) 48%, rgba(231, 1, 133, 0) 76%); animation: daGwDriftB 58s ease-in-out infinite alternate; } /* blue — centre */ .da-gw-shader span:nth-child(3) { width: 58%; height: 58%; top: 24%; left: 36%; background: radial-gradient(circle closest-side, rgba(36, 118, 226, 0.28) 0%, rgba(36, 118, 226, 0.12) 50%, rgba(36, 118, 226, 0) 78%); animation: daGwDriftC 52s ease-in-out infinite alternate; } /* violet — upper right, the new field */ .da-gw-shader span:nth-child(4) { width: 50%; height: 50%; top: -4%; right: 8%; background: radial-gradient(circle closest-side, rgba(150, 92, 255, 0.24) 0%, rgba(122, 59, 196, 0.10) 50%, rgba(122, 59, 196, 0) 78%); animation: daGwDriftD 64s ease-in-out infinite alternate; } @keyframes daGwDriftA { to { transform: translate3d(14%, 10%, 0) scale(1.14); } } @keyframes daGwDriftB { to { transform: translate3d(-12%, -9%, 0) scale(1.10); } } @keyframes daGwDriftC { to { transform: translate3d(-9%, 12%, 0) scale(1.18); } } @keyframes daGwDriftD { to { transform: translate3d(-14%, 14%, 0) scale(1.12); } } /* Set by the existing IntersectionObserver — stops compositing off-screen and releases the promoted layers so they aren't holding GPU memory. */ .da-gw.da-gw-idle .da-gw-shader span { animation-play-state: paused; will-change: auto; } /* ── content ── */ .da-gw-content { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; padding: 60px clamp(24px, 6vw, 100px); display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; text-align: center; } /* ── Logo mark ── */ .da-gw-logo { position: relative; z-index: 25; width: clamp(100px, 22vw, 120px); max-width: 92vw; height: auto; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin: 0 auto 34px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1 !important; visibility: visible !important; transform: none !important; } .da-gw-logo img { display: block !important; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; opacity: 1 !important; visibility: visible !important; } /* reveal animation */ .da-gw-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .da-gw-reveal.in { opacity: 1; transform: none; } /* ── Framer-style per-letter entrance ── */ .da-gw-char { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1), transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), filter 0.62s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--da-char-index, 0) * 16ms); } .da-gw-reveal.in .da-gw-char { opacity: 1; transform: translateY(0); filter: blur(0); } .da-gw-reveal:not(.in) .da-gw-char { transition-delay: 0ms; } /* ── Scroll-based H4 letter reveal ── */ .da-gw-scroll-copy .da-gw-char { transition-delay: 0ms; } .da-gw-scroll-copy.is-scroll-controlled .da-gw-char { opacity: var(--da-char-opacity, 0); transform: translateY(var(--da-char-y, 18px)); filter: blur(var(--da-char-blur, 5px)); transition: opacity 120ms linear, transform 120ms linear, filter 120ms linear; } /* eyebrow */ .da-gw-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(215, 228, 255, 0.8); margin-bottom: 20px; text-align: center; transition-delay: 0s; } /* h2 */ .da-gw-h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(36px, 4.1vw, 50px); line-height: 1.18; letter-spacing: -0.025em; color: #ffffff; margin-bottom: 28px; text-align: center; text-wrap: balance; text-shadow: 0 2px 24px rgba(4, 10, 32, 0.45); transition-delay: 0.1s; } /* h4 */ .da-gw-h4 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(15px, 1.8vw, 20px); line-height: 1.5; letter-spacing: -0.01em; color: rgba(238, 243, 255, 0.94); max-width: 58ch; margin: 0 auto 24px; text-align: center; text-wrap: balance; text-shadow: 0 1px 16px rgba(4, 10, 32, 0.5); transition-delay: 0.2s; } /* description */ .da-gw-desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; color: rgba(224, 232, 255, 0.8); max-width: 56ch; margin: 0 auto; text-align: center; transition-delay: 0.3s; } /* ── pixel dissolve overlay ── */ .da-gw-pixels { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; contain: strict; } .da-gw-pixel { background: #0b2e7a; /* matches the gradient's first stop so the seam is invisible */ transition: opacity var(--px-dur, 480ms) var(--px-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1), transform var(--px-dur, 480ms) var(--px-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1); } .da-gw-pixel.out { opacity: 0 !important; transform: scale(1.6); } /* responsive */ @media (max-width: 600px) { .da-gw { min-height: auto; } .da-gw-content { padding: 48px 24px 56px; } } /* reduced motion — colour stays, movement stops */ @media (prefers-reduced-motion: reduce) { .da-gw-shader span { animation: none !important; transform: none !important; will-change: auto; } .da-gw-char, .da-gw-reveal { transition-duration: 0.01ms !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-2376998 *//* ── Reset ── */ .da-benefits-section *, .da-benefits-section *::before, .da-benefits-section *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Section shell ── */ .da-benefits-section { position: relative; width: 100%; overflow: hidden; padding: 90px 40px 100px; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; } .da-eyebrow, .da-heading, .da-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } .da-sub, .da-card-body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ── Background layers ── */ .da-bg-base { position: absolute; inset: 0; background: #f5f9ff; z-index: -3; } .da-bg-mountain { position: absolute; inset: 0; background-image: url('http://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/06/homeImageMountains2-1-scaled.jpg'); background-size: cover; background-position: center right; opacity: 0.12; z-index: -2; } .da-bg-gradient { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.92) 42%, rgba(226, 240, 255, 0.82) 68%, rgba(248, 232, 248, 0.88) 100% ); z-index: -1; } /* ── Pixel overlay ── */ .da-pixel-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: grid; gap: 0; } /* ── Inner ── */ .da-inner { max-width: 1800px; margin: 0 auto; position: relative; z-index: 5; } /* ── Heading ── */ .da-heading { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: clamp(32px, 4.5vw, 58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #0D0D0D; max-width: 15em; margin-bottom: 40px; } .da-heading-accent { color: #e70185; } /* ── Card grid ── */ .da-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Rainbow border wrapper — static blue, rainbow on hover ── */ .da-card-wrap { border-radius: 16px; padding: 1px; background: #2476e2; transition: transform 0.3s ease, box-shadow 0.3s ease; } .da-card-wrap:hover { background: linear-gradient( 45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000 ); background-size: 400%; animation: da-rb-rainbow 20s linear infinite; transform: translateY(-5px); box-shadow: 0 24px 56px rgba(7, 31, 75, 0.16); } @keyframes da-rb-rainbow { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } /* ── Card inner ── */ .da-card { border-radius: 14px; padding: 32px 28px 36px; background: #ffffff; height: 100%; display: flex; flex-direction: column; cursor: default; } /* ── Icon circle ── */ .da-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; position: relative; overflow: hidden; flex-shrink: 0; } .da-card-wrap:nth-child(1) .da-icon-wrap { background: linear-gradient(135deg, #2563c4 0%, #4f3fa0 100%); } .da-card-wrap:nth-child(2) .da-icon-wrap { background: linear-gradient(135deg, #5a2ca0 0%, #7c3ab8 100%); } .da-card-wrap:nth-child(3) .da-icon-wrap { background: linear-gradient(135deg, #1e4db0 0%, #5a2ca0 100%); } .da-icon-wrap svg { position: relative; z-index: 1; } /* ── Card title ── */ .da-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #0D0D0D; line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.01em; } .da-card-title::after { content: ''; display: block; width: 32px; height: 2px; background: #bf2796; border-radius: 2px; margin-top: 10px; } /* ── Card body ── */ .da-card-body { font-size: 16px; line-height: 1.65; color: rgba(7, 31, 75, 0.70); margin-bottom: 24px; } /* ── Card CTA button ── */ .da-card-button { position: relative; display: inline-flex; margin-top: auto; align-self: flex-start; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; overflow: hidden; border-radius: 999px; background: #e70185; color: #ffffff; text-decoration: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); transition: transform 220ms ease, box-shadow 220ms ease; } .da-card-button::after { content: ""; position: absolute; inset: auto auto -70% -30%; width: 80%; aspect-ratio: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.20); transition: transform 320ms ease; } .da-card-button span, .da-card-button svg { position: relative; z-index: 2; } .da-card-button svg { width: 20px; height: 20px; fill: currentColor; transition: transform 220ms ease; } .da-card-button:hover { transform: translateY(-3px); background: #e70185; color: #ffffff; box-shadow: 0 24px 60px rgba(231, 1, 133, 0.32); } .da-card-button:hover::after { transform: translate(55%, -45%) scale(1.35); } .da-card-button:hover svg { transform: translateX(3px); } /* ── Responsive ── */ @media (max-width: 1024px) { .da-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .da-benefits-section { padding: 60px 20px 70px; } .da-grid { grid-template-columns: 1fr; gap: 16px; } } /* ── Pixel dissolve ── */ .da-pixel-cell { background: #f5f9ff; transition: opacity var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1), transform var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1); } .da-pixel-cell.revealed { opacity: 0 !important; transform: scale(1.4); } /* ── Content reveal ── */ .da-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .da-reveal.in { opacity: 1; transform: translateY(0); } .da-card-wrap.da-reveal { transform: translateY(32px) scale(0.98); } .da-card-wrap.da-reveal.in { transform: translateY(0) scale(1); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-2593dba *//* ── Reset ── */ .da-benefits-section *, .da-benefits-section *::before, .da-benefits-section *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Section shell ── */ .da-benefits-section { position: relative; width: 100%; overflow: hidden; padding: 90px 40px 100px; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; } .da-eyebrow, .da-heading, .da-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } .da-sub, .da-card-body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ── Background layers ── */ .da-bg-base { position: absolute; inset: 0; background: #f5f9ff; z-index: -3; } .da-bg-mountain { position: absolute; inset: 0; background-image: url('http://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/06/homeImageMountains2-1-scaled.jpg'); background-size: cover; background-position: center right; opacity: 0.12; z-index: -2; } .da-bg-gradient { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.92) 42%, rgba(226, 240, 255, 0.82) 68%, rgba(248, 232, 248, 0.88) 100% ); z-index: -1; } /* ── Pixel overlay ── */ .da-pixel-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: grid; gap: 0; } /* ── Inner ── */ .da-inner { max-width: 1800px; margin: 0 auto; position: relative; z-index: 5; } /* ── Heading ── */ .da-heading { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: clamp(32px, 4.5vw, 58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #0D0D0D; max-width: 15em; margin-bottom: 40px; } .da-heading-accent { color: #e70185; } /* ── Card grid ── */ .da-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ── Rainbow border wrapper — static blue, rainbow on hover ── */ .da-card-wrap { border-radius: 16px; padding: 1px; background: #2476e2; transition: transform 0.3s ease, box-shadow 0.3s ease; } .da-card-wrap:hover { background: linear-gradient( 45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000 ); background-size: 400%; animation: da-rb-rainbow 20s linear infinite; transform: translateY(-5px); box-shadow: 0 24px 56px rgba(7, 31, 75, 0.16); } @keyframes da-rb-rainbow { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } /* ── Card inner ── */ .da-card { border-radius: 14px; padding: 32px 28px 36px; background: #ffffff; height: 100%; display: flex; flex-direction: column; cursor: default; } /* ── Icon circle ── */ .da-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; position: relative; overflow: hidden; flex-shrink: 0; } .da-card-wrap:nth-child(1) .da-icon-wrap { background: linear-gradient(135deg, #2563c4 0%, #4f3fa0 100%); } .da-card-wrap:nth-child(2) .da-icon-wrap { background: linear-gradient(135deg, #5a2ca0 0%, #7c3ab8 100%); } .da-card-wrap:nth-child(3) .da-icon-wrap { background: linear-gradient(135deg, #1e4db0 0%, #5a2ca0 100%); } .da-icon-wrap svg { position: relative; z-index: 1; } /* ── Card title ── */ .da-card-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #0D0D0D; line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.01em; } .da-card-title::after { content: ''; display: block; width: 32px; height: 2px; background: #bf2796; border-radius: 2px; margin-top: 10px; } /* ── Card body ── */ .da-card-body { font-size: 16px; line-height: 1.65; color: rgba(7, 31, 75, 0.70); margin-bottom: 24px; } /* ── Card CTA button ── */ .da-card-button { position: relative; display: inline-flex; margin-top: auto; align-self: flex-start; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; overflow: hidden; border-radius: 999px; background: #e70185; color: #ffffff; text-decoration: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); transition: transform 220ms ease, box-shadow 220ms ease; } .da-card-button::after { content: ""; position: absolute; inset: auto auto -70% -30%; width: 80%; aspect-ratio: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.20); transition: transform 320ms ease; } .da-card-button span, .da-card-button svg { position: relative; z-index: 2; } .da-card-button svg { width: 20px; height: 20px; fill: currentColor; transition: transform 220ms ease; } .da-card-button:hover { transform: translateY(-3px); background: #e70185; color: #ffffff; box-shadow: 0 24px 60px rgba(231, 1, 133, 0.32); } .da-card-button:hover::after { transform: translate(55%, -45%) scale(1.35); } .da-card-button:hover svg { transform: translateX(3px); } /* ── Responsive ── */ @media (max-width: 1024px) { .da-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .da-benefits-section { padding: 60px 20px 70px; } .da-grid { grid-template-columns: 1fr; gap: 16px; } } /* ── Pixel dissolve ── */ .da-pixel-cell { background: #f5f9ff; transition: opacity var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1), transform var(--d) var(--delay) cubic-bezier(0.4, 0, 0.2, 1); } .da-pixel-cell.revealed { opacity: 0 !important; transform: scale(1.4); } /* ── Content reveal ── */ .da-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .da-reveal.in { opacity: 1; transform: translateY(0); } .da-card-wrap.da-reveal { transform: translateY(32px) scale(0.98); } .da-card-wrap.da-reveal.in { transform: translateY(0) scale(1); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-cda5d1d */.arc-hero-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 15%, rgba(36, 118, 226, 0.28), transparent 34%), radial-gradient(circle at 88% 22%, rgba(231, 1, 133, 0.24), transparent 34%), linear-gradient(180deg, #09090b 0%, #051f49 52%, #09090b 100%); color: #fff; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', ui-sans-serif, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; } .arc-hero-section::before { content: ""; position: absolute; inset: 0; z-index: -2; /* Was the full 2560px original (180KB) over plain http:// — mixed content on an https page. It renders at 18% opacity under a screen blend, so a small variant is visually indistinguishable here. */ background-image: url("https://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg"); background-image: image-set( url("https://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg") 1x, url("https://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg") 2x ); background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: screen; } .arc-hero-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 9, 11, 0.68) 0%, rgba(5, 31, 73, 0.72) 44%, rgba(9, 9, 11, 0.92) 100%); pointer-events: none; } .arc-hero-ring { position: relative; z-index: 4; width: 100%; flex-shrink: 0; pointer-events: auto; } .arc-hero-pivot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .arc-card-wrap { position: absolute; opacity: 0; will-change: transform, opacity; pointer-events: auto; } .arc-card-wrap::before { content: ""; position: absolute; inset: -24px; z-index: 2; border-radius: 26px; pointer-events: auto; } .arc-hero-section.arc-gallery-inview .arc-card-wrap { animation: arc-fade-up 0.62s cubic-bezier(0.16, 1, 0.3, 1) var(--arc-delay, 0ms) both; } .arc-hero-section.arc-gallery-inview .arc-hero-content { animation: arc-fade-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) 520ms both; } .arc-card-wrap:hover, .arc-card-wrap.arc-card-active { z-index: 99999 !important; } .arc-card-inner { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease; transform: rotate(var(--arc-card-rotation, 0deg)); will-change: transform; } .arc-card-wrap:hover .arc-card-inner, .arc-card-wrap.arc-card-active .arc-card-inner { transform: rotate(var(--arc-card-rotation, 0deg)) scale(1.08) !important; border-color: rgba(231, 1, 133, 0.52); box-shadow: 0 28px 68px rgba(0,0,0,0.52), 0 0 34px rgba(231, 1, 133, 0.22); } .arc-card-inner img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; } .arc-hero-content { position: relative; z-index: 10; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 24px 90px; opacity: 0; } .arc-hero-inner { text-align: center; max-width: 980px; width: min(980px, 100%); margin: 0 auto; padding: clamp(28px, 4vw, 52px); border-radius: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .arc-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: rgba(255, 255, 255, 0.86); font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; } .arc-kicker::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #e70185; box-shadow: 0 0 20px rgba(231, 1, 133, 0.85); } .arc-hero-inner h1 { max-width: 15em; margin: 0 auto 20px; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: clamp(32px, 4.5vw, 58px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: #ffffff; text-wrap: balance; } .arc-title-accent { color: #e70185; } .arc-hero-inner p { max-width: 760px; margin: 0 auto 30px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; color: rgba(255,255,255,0.82); } .arc-event-meta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 auto 30px; } .arc-event-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.90); font-size: 13px; font-weight: 600; line-height: 1; } .arc-event-pill strong { color: #ffffff; } .arc-event-pill svg { width: 17px; height: 17px; color: #e70185; flex: 0 0 auto; } .arc-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; } .arc-btn-primary { padding: 14px 28px; border-radius: 999px; background: #e70185; color: #fff; font-size: 14px; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 18px 45px rgba(231, 1, 133, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; display: inline-block; letter-spacing: -0.01em; } .arc-btn-primary:hover { transform: translateY(-2px); color: #ffffff; box-shadow: 0 24px 60px rgba(231, 1, 133, 0.38); } .arc-btn-secondary { padding: 14px 28px; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.86); font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,0.20); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; letter-spacing: -0.01em; text-decoration: none; } .arc-btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); color: #fff; } .arc-btn-gamecon { padding: 14px 28px; border-radius: 999px; background: linear-gradient(135deg, rgba(36, 118, 226, 0.95), rgba(105, 50, 196, 0.95)); color: #ffffff; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,0.20); cursor: pointer; box-shadow: 0 18px 45px rgba(36, 118, 226, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; text-decoration: none; display: inline-block; letter-spacing: -0.01em; } .arc-btn-gamecon:hover { transform: translateY(-2px); color: #ffffff; filter: brightness(1.06); box-shadow: 0 24px 60px rgba(105, 50, 196, 0.34); } @keyframes arc-fade-up { from { opacity: 0; transform: translate(-50%, 56%) scale(0.96); } to { opacity: 1; transform: translate(-50%, 50%) scale(1); } } @keyframes arc-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 760px) { .arc-hero-content { padding: 0 16px 64px; } .arc-hero-inner { padding: 26px 18px; } .arc-hero-btns { flex-direction: column; } .arc-btn-primary, .arc-btn-secondary { width: 100%; text-align: center; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-11d2534 */.arc-hero-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 15%, rgba(36, 118, 226, 0.28), transparent 34%), radial-gradient(circle at 88% 22%, rgba(231, 1, 133, 0.24), transparent 34%), linear-gradient(180deg, #09090b 0%, #051f49 52%, #09090b 100%); color: #fff; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', ui-sans-serif, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; } .arc-hero-section::before { content: ""; position: absolute; inset: 0; z-index: -2; /* Was the full 2560px original (180KB) over plain http:// — mixed content on an https page. It renders at 18% opacity under a screen blend, so a small variant is visually indistinguishable here. */ background-image: url("https://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg"); background-image: image-set( url("https://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg") 1x, url("https://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg") 2x ); background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: screen; } .arc-hero-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 9, 11, 0.68) 0%, rgba(5, 31, 73, 0.72) 44%, rgba(9, 9, 11, 0.92) 100%); pointer-events: none; } .arc-hero-ring { position: relative; z-index: 4; width: 100%; flex-shrink: 0; pointer-events: auto; } .arc-hero-pivot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .arc-card-wrap { position: absolute; opacity: 0; will-change: transform, opacity; pointer-events: auto; } .arc-card-wrap::before { content: ""; position: absolute; inset: -24px; z-index: 2; border-radius: 26px; pointer-events: auto; } .arc-hero-section.arc-gallery-inview .arc-card-wrap { animation: arc-fade-up 0.62s cubic-bezier(0.16, 1, 0.3, 1) var(--arc-delay, 0ms) both; } .arc-hero-section.arc-gallery-inview .arc-hero-content { animation: arc-fade-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) 520ms both; } .arc-card-wrap:hover, .arc-card-wrap.arc-card-active { z-index: 99999 !important; } .arc-card-inner { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease; transform: rotate(var(--arc-card-rotation, 0deg)); will-change: transform; } .arc-card-wrap:hover .arc-card-inner, .arc-card-wrap.arc-card-active .arc-card-inner { transform: rotate(var(--arc-card-rotation, 0deg)) scale(1.08) !important; border-color: rgba(231, 1, 133, 0.52); box-shadow: 0 28px 68px rgba(0,0,0,0.52), 0 0 34px rgba(231, 1, 133, 0.22); } .arc-card-inner img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; } .arc-hero-content { position: relative; z-index: 10; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 24px 90px; opacity: 0; } .arc-hero-inner { text-align: center; max-width: 980px; width: min(980px, 100%); margin: 0 auto; padding: clamp(28px, 4vw, 52px); border-radius: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .arc-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: rgba(255, 255, 255, 0.86); font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; } .arc-kicker::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #e70185; box-shadow: 0 0 20px rgba(231, 1, 133, 0.85); } .arc-hero-inner h1 { max-width: 15em; margin: 0 auto 20px; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: clamp(32px, 4.5vw, 58px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: #ffffff; text-wrap: balance; } .arc-title-accent { color: #e70185; } .arc-hero-inner p { max-width: 760px; margin: 0 auto 30px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; color: rgba(255,255,255,0.82); } .arc-event-meta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 auto 30px; } .arc-event-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.90); font-size: 13px; font-weight: 600; line-height: 1; } .arc-event-pill strong { color: #ffffff; } .arc-event-pill svg { width: 17px; height: 17px; color: #e70185; flex: 0 0 auto; } .arc-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; } .arc-btn-primary { padding: 14px 28px; border-radius: 999px; background: #e70185; color: #fff; font-size: 14px; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 18px 45px rgba(231, 1, 133, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; display: inline-block; letter-spacing: -0.01em; } .arc-btn-primary:hover { transform: translateY(-2px); color: #ffffff; box-shadow: 0 24px 60px rgba(231, 1, 133, 0.38); } .arc-btn-secondary { padding: 14px 28px; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.86); font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,0.20); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; letter-spacing: -0.01em; text-decoration: none; } .arc-btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); color: #fff; } .arc-btn-gamecon { padding: 14px 28px; border-radius: 999px; background: linear-gradient(135deg, rgba(36, 118, 226, 0.95), rgba(105, 50, 196, 0.95)); color: #ffffff; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,0.20); cursor: pointer; box-shadow: 0 18px 45px rgba(36, 118, 226, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; text-decoration: none; display: inline-block; letter-spacing: -0.01em; } .arc-btn-gamecon:hover { transform: translateY(-2px); color: #ffffff; filter: brightness(1.06); box-shadow: 0 24px 60px rgba(105, 50, 196, 0.34); } @keyframes arc-fade-up { from { opacity: 0; transform: translate(-50%, 56%) scale(0.96); } to { opacity: 1; transform: translate(-50%, 50%) scale(1); } } @keyframes arc-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 760px) { .arc-hero-content { padding: 0 16px 64px; } .arc-hero-inner { padding: 26px 18px; } .arc-hero-btns { flex-direction: column; } .arc-btn-primary, .arc-btn-secondary { width: 100%; text-align: center; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0ad3498 */.da-partners-cloud,.da-partners-cloud *{box-sizing:border-box} .da-partners-cloud{--gap:clamp(18px,2.2vw,34px);position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:64px 0;overflow:hidden;background:#fff;color:#09090b;font-family:Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased} .da-partners-cloud__title{margin:0 auto 28px;padding:0 20px;text-align:center;font-size:clamp(20px,3vw,32px);font-weight:600;line-height:1.25;letter-spacing:-.03em} .da-partners-cloud__rule{width:min(420px,80%);height:1px;margin:0 auto 24px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 15% 85%,transparent)} .da-partners-cloud__viewport{width:100%;padding:18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7% 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7% 93%,transparent)} .da-partners-cloud__track{display:flex;align-items:center;width:max-content;will-change:transform;animation:daPartnersScroll 42s linear infinite} .da-partners-cloud__group{display:flex;flex:0 0 auto;align-items:center;gap:var(--gap);padding-right:var(--gap)} .da-partners-cloud__logo{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:clamp(220px,18vw,340px);height:clamp(118px,10vw,178px);padding:clamp(6px,.7vw,12px)} .da-partners-cloud__logo img{display:block;width:auto;max-width:100%;height:auto;max-height:126px;object-fit:contain;filter:saturate(1.04) contrast(1.08) brightness(1.02)} .da-partners-cloud__status{width:100vw;padding:50px 24px;text-align:center;color:#686874} .da-partners-cloud__bottom{height:1px;margin-top:24px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 15% 85%,transparent)} @keyframes daPartnersScroll{to{transform:translate3d(calc(-50% - var(--gap)/2),0,0)}} @media(max-width:767px){.da-partners-cloud{padding:48px 0}.da-partners-cloud__track{animation-duration:34s}.da-partners-cloud__logo{width:205px;height:112px;padding:6px}.da-partners-cloud__logo img{max-height:86px}} @media(prefers-reduced-motion:reduce){.da-partners-cloud__track{animation:none;transform:none;will-change:auto}.da-partners-cloud__viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0dce3e0 */.da-partners-cloud,.da-partners-cloud *{box-sizing:border-box} .da-partners-cloud{--gap:clamp(18px,2.2vw,34px);position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:64px 0;overflow:hidden;background:#fff;color:#09090b;font-family:Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased} .da-partners-cloud__title{margin:0 auto 28px;padding:0 20px;text-align:center;font-size:clamp(20px,3vw,32px);font-weight:600;line-height:1.25;letter-spacing:-.03em} .da-partners-cloud__rule{width:min(420px,80%);height:1px;margin:0 auto 24px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 15% 85%,transparent)} .da-partners-cloud__viewport{width:100%;padding:18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7% 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7% 93%,transparent)} .da-partners-cloud__track{display:flex;align-items:center;width:max-content;will-change:transform;animation:daPartnersScroll 42s linear infinite} .da-partners-cloud__group{display:flex;flex:0 0 auto;align-items:center;gap:var(--gap);padding-right:var(--gap)} .da-partners-cloud__logo{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:clamp(220px,18vw,340px);height:clamp(118px,10vw,178px);padding:clamp(6px,.7vw,12px)} .da-partners-cloud__logo img{display:block;width:auto;max-width:100%;height:auto;max-height:126px;object-fit:contain;filter:saturate(1.04) contrast(1.08) brightness(1.02)} .da-partners-cloud__status{width:100vw;padding:50px 24px;text-align:center;color:#686874} .da-partners-cloud__bottom{height:1px;margin-top:24px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 15% 85%,transparent)} @keyframes daPartnersScroll{to{transform:translate3d(calc(-50% - var(--gap)/2),0,0)}} @media(max-width:767px){.da-partners-cloud{padding:48px 0}.da-partners-cloud__track{animation-duration:34s}.da-partners-cloud__logo{width:205px;height:112px;padding:6px}.da-partners-cloud__logo img{max-height:86px}} @media(prefers-reduced-motion:reduce){.da-partners-cloud__track{animation:none;transform:none;will-change:auto}.da-partners-cloud__viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-61f23c4 *//* ── reset scoped ── */ .da-news-blog *, .da-news-blog *::before, .da-news-blog *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── section wrapper ── */ .da-news-blog { width: 100%; padding: 80px clamp(20px, 5vw, 80px); background: #09090b; font-family: 'Inter', ui-sans-serif, sans-serif; -webkit-font-smoothing: antialiased; } /* ── grid ── */ .da-news-blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1800px; margin: 0 auto; } /* ── card ── */ .da-news-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); opacity: 0; transform: translateY(28px); } .da-news-card.in { opacity: 1; transform: translateY(0); } .da-news-card:hover { border-color: rgba(139,92,255,0.5); box-shadow: 0 20px 60px rgba(139,92,255,0.12); transform: translateY(-4px); } /* ── image wrapper ── */ .da-news-card-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; } .da-news-card-img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); background: rgba(255,255,255,0.06); } .da-news-card:hover .da-news-card-img { transform: scale(1.1); } .da-news-card-img-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,9,11,0.8) 0%, transparent 60%); opacity: 0.6; transition: opacity 0.3s; pointer-events: none; } .da-news-card:hover .da-news-card-img-grad { opacity: 0.4; } /* ── tags ── */ .da-news-card-tags { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; } .da-news-tag { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; background: rgba(9,9,11,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.12); letter-spacing: 0.03em; } /* ── hover overlay CTA ── */ .da-news-card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(9,9,11,0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .da-news-card:hover .da-news-card-overlay { opacity: 1; pointer-events: auto; } .da-news-read-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px; background: #8b5cff; color: #fff; font-size: 13px; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(139,92,255,0.35); transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease; text-decoration: none; letter-spacing: -0.01em; } .da-news-read-btn:hover { transform: scale(1.06); color: #ffffff; box-shadow: 0 12px 32px rgba(139,92,255,0.5); } .da-news-read-btn:active { transform: scale(0.96); } .da-news-read-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* ── card body ── */ .da-news-card-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; padding: 20px; position: relative; z-index: 5; } .da-news-card-title-link { position: relative; z-index: 8; text-decoration: none; display: block; pointer-events: auto; } .da-news-card-title { position: relative; z-index: 9; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: #fafafa; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .da-news-card-title-link:hover .da-news-card-title { color: #a78bfa; } .da-news-card-excerpt { font-size: 13px; line-height: 1.65; color: rgba(161,161,170,0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; margin-bottom: 0; } /* ── skeleton loader ── */ .da-news-skeleton { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; } .da-news-skeleton-img { aspect-ratio: 16/9; background: rgba(255,255,255,0.06); animation: da-pulse 1.4s ease-in-out infinite; } .da-news-skeleton-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .da-news-skeleton-line { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.06); animation: da-pulse 1.4s ease-in-out infinite; } .da-news-skeleton-line.short { width: 55%; } .da-news-skeleton-line.med { width: 80%; } @keyframes da-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ── responsive ── */ @media (max-width: 900px) { .da-news-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .da-news-blog-grid { grid-template-columns: 1fr; } .da-news-blog { padding: 48px 20px; } } /* ── stagger delays ── */ .da-news-card:nth-child(1) { transition-delay: 0s; } .da-news-card:nth-child(2) { transition-delay: 0.1s; } .da-news-card:nth-child(3) { transition-delay: 0.2s; } .da-news-card:nth-child(4) { transition-delay: 0.3s; } /* ── View All button ── */ .da-news-blog-actions { width: min(1800px, 100%); max-width: 1800px; margin: clamp(34px, 4vw, 58px) auto 0; display: flex; justify-content: center; } .da-news-blog-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 30px; overflow: hidden; border-radius: 999px; background: #e70185; color: #ffffff; text-decoration: none; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 18px 45px rgba(231, 1, 133, 0.26), 0 8px 24px rgba(0, 0, 0, 0.28); transition: transform 220ms ease, box-shadow 220ms ease; } .da-news-blog-button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 46%; background: rgba(255, 255, 255, 0.16); clip-path: polygon(0 0, 82% 0, 58% 100%, 0% 100%); pointer-events: none; } .da-news-blog-button::after { content: ""; position: absolute; inset: auto auto -70% -30%; width: 80%; aspect-ratio: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: transform 320ms ease; pointer-events: none; } .da-news-blog-button span, .da-news-blog-button svg { position: relative; z-index: 2; } .da-news-blog-button svg { width: 20px; height: 20px; fill: currentColor; transition: transform 220ms ease; } .da-news-blog-button:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(231, 1, 133, 0.32), 0 12px 32px rgba(0, 0, 0, 0.34); color: #ffffff; } .da-news-blog-button:hover::after { transform: translate(55%, -45%) scale(1.35); } .da-news-blog-button:hover svg { transform: translateX(4px); } @media (max-width: 560px) { .da-news-blog-actions { margin-top: 30px; } .da-news-blog-button { width: 100%; max-width: 300px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c1c4916 */.da-news-read-time{display: none !important;}/* End custom CSS */