.elementor-396 .elementor-element.elementor-element-a77cacd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-396 .elementor-element.elementor-element-17e564e{left:0px;}body.rtl .elementor-396 .elementor-element.elementor-element-17e564e{right:0px;}.elementor-396 .elementor-element.elementor-element-17e564e{top:0px;z-index:-99;}.elementor-396 .elementor-element.elementor-element-2c7f6de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-396 .elementor-element.elementor-element-97a6a32{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-396 .elementor-element.elementor-element-d55a829{left:0px;}body.rtl .elementor-396 .elementor-element.elementor-element-d55a829{right:0px;}.elementor-396 .elementor-element.elementor-element-d55a829{top:0px;z-index:-99;}.elementor-396 .elementor-element.elementor-element-ea3fa03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-83e59b4 *//* ============================================================
Digital Alberta — About Us Hero
Fonts (Inter) come from the site-wide tag.
Do NOT add a font to this widget.
============================================================ */
#da-about-hero * { box-sizing: border-box; margin: 0; padding: 0; }
/* ── section ──
Background photo was plain http:// (mixed content on an https page) AND the
full 2560px / 180KB original, which MD5 showed is byte-identical to
hero-mountains.jpg. Now https, and sized: image-set lets the browser pick
the 1536px file for standard displays and 2048px for retina, instead of
always shipping 2560px. */
#da-about-hero {
position: relative;
overflow: hidden;
contain: layout paint style;
min-height: 520px;
display: flex;
align-items: center;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 60px clamp(24px, 6vw, 80px);
background-color: #051f49;
background-image:
linear-gradient(90deg, rgba(5, 31, 73, 0.94) 0%, rgba(5, 31, 73, 0.78) 48%, rgba(5, 31, 73, 0.48) 100%),
url("https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg");
background-image:
linear-gradient(90deg, rgba(5, 31, 73, 0.94) 0%, rgba(5, 31, 73, 0.78) 48%, rgba(5, 31, 73, 0.48) 100%),
image-set(
url("https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg") 1x,
url("https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-2048x1093.jpg") 2x
);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* ── pixel transition overlay ── */
#da-about-pixel-overlay {
position: absolute;
inset: 0;
z-index: 30;
pointer-events: none;
display: grid;
gap: 0;
contain: strict;
}
/* No will-change here on purpose. This grid is 28x14 = 392 cells, and
will-change: opacity, transform would ask the compositor to promote all 392
to their own layers and hold that memory for the entire life of the page.
Opacity and transform are already composited properties; the promotion buys
nothing and costs a great deal of GPU memory. */
.da-about-pixel-cell {
background: #051f49;
transition:
opacity var(--da-about-pixel-duration, 500ms) var(--da-about-pixel-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--da-about-pixel-duration, 500ms) var(--da-about-pixel-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.da-about-pixel-cell.is-out {
opacity: 0;
transform: scale(1.6);
}
/* ── grid layout ── */
.da-about-grid {
position: relative;
z-index: 2;
width: min(1800px, 100%);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
/* ── left column ── */
.da-about-left {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 860px;
}
.da-about-breadcrumb {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
gap: 6px;
}
.da-about-breadcrumb a { color: rgba(255, 255, 255, 0.45); text-decoration: none; }
.da-about-breadcrumb a:hover { color: rgba(255, 255, 255, 0.7); }
.da-about-breadcrumb a:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 3px;
border-radius: 2px;
}
.da-about-breadcrumb [aria-current] { color: #a78bfa; }
.da-about-breadcrumb .da-about-crumb-sep { color: rgba(255, 255, 255, 0.32); }
.da-about-heading {
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #fff;
text-wrap: balance;
opacity: 0;
transform: translateY(20px);
animation: da-slide-up 0.7s ease-out 0.2s forwards;
}
.da-about-accent {
width: 56px;
height: 4px;
border-radius: 4px;
background: linear-gradient(90deg, #e040fb, #8b5cff);
opacity: 0;
animation: da-fade 0.5s ease-out 0.5s forwards;
}
.da-about-lead {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.5;
color: rgba(255, 255, 255, 0.92);
text-wrap: pretty;
opacity: 0;
transform: translateY(20px);
animation: da-slide-up 0.7s ease-out 0.4s forwards;
}
.da-about-body {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(206, 216, 244, 0.82);
max-width: 68ch;
text-wrap: pretty;
opacity: 0;
transform: translateY(20px);
animation: da-slide-up 0.7s ease-out 0.55s forwards;
}
/* ── keyframes ── */
@keyframes da-slide-up {
to { opacity: 1; transform: translateY(0); }
}
@keyframes da-fade {
to { opacity: 1; }
}
/* ── reduced motion ──
Critical, not cosmetic: the heading, lead and body all start at opacity 0
and are only made visible by the animation's `forwards` fill. Suppressing
animation without restoring opacity would leave the entire hero copy
permanently invisible for anyone with reduced motion enabled. */
@media (prefers-reduced-motion: reduce) {
.da-about-heading,
.da-about-accent,
.da-about-lead,
.da-about-body {
animation: none;
opacity: 1;
transform: none;
}
.da-about-pixel-cell {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-17e564e *//* ============================================================
Digital Alberta — About Us Hero
Fonts (Inter) come from the site-wide tag.
Do NOT add a font to this widget.
============================================================ */
#da-about-hero * { box-sizing: border-box; margin: 0; padding: 0; }
/* ── section ──
Background photo was plain http:// (mixed content on an https page) AND the
full 2560px / 180KB original, which MD5 showed is byte-identical to
hero-mountains.jpg. Now https, and sized: image-set lets the browser pick
the 1536px file for standard displays and 2048px for retina, instead of
always shipping 2560px. */
#da-about-hero {
position: relative;
overflow: hidden;
contain: layout paint style;
min-height: 520px;
display: flex;
align-items: center;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 60px clamp(24px, 6vw, 80px);
background-color: #051f49;
background-image:
linear-gradient(90deg, rgba(5, 31, 73, 0.94) 0%, rgba(5, 31, 73, 0.78) 48%, rgba(5, 31, 73, 0.48) 100%),
url("https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg");
background-image:
linear-gradient(90deg, rgba(5, 31, 73, 0.94) 0%, rgba(5, 31, 73, 0.78) 48%, rgba(5, 31, 73, 0.48) 100%),
image-set(
url("https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg") 1x,
url("https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-2048x1093.jpg") 2x
);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* ── pixel transition overlay ── */
#da-about-pixel-overlay {
position: absolute;
inset: 0;
z-index: 30;
pointer-events: none;
display: grid;
gap: 0;
contain: strict;
}
/* No will-change here on purpose. This grid is 28x14 = 392 cells, and
will-change: opacity, transform would ask the compositor to promote all 392
to their own layers and hold that memory for the entire life of the page.
Opacity and transform are already composited properties; the promotion buys
nothing and costs a great deal of GPU memory. */
.da-about-pixel-cell {
background: #051f49;
transition:
opacity var(--da-about-pixel-duration, 500ms) var(--da-about-pixel-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1),
transform var(--da-about-pixel-duration, 500ms) var(--da-about-pixel-delay, 0ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.da-about-pixel-cell.is-out {
opacity: 0;
transform: scale(1.6);
}
/* ── grid layout ── */
.da-about-grid {
position: relative;
z-index: 2;
width: min(1800px, 100%);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
/* ── left column ── */
.da-about-left {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 860px;
}
.da-about-breadcrumb {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
gap: 6px;
}
.da-about-breadcrumb a { color: rgba(255, 255, 255, 0.45); text-decoration: none; }
.da-about-breadcrumb a:hover { color: rgba(255, 255, 255, 0.7); }
.da-about-breadcrumb a:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 3px;
border-radius: 2px;
}
.da-about-breadcrumb [aria-current] { color: #a78bfa; }
.da-about-breadcrumb .da-about-crumb-sep { color: rgba(255, 255, 255, 0.32); }
.da-about-heading {
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #fff;
text-wrap: balance;
opacity: 0;
transform: translateY(20px);
animation: da-slide-up 0.7s ease-out 0.2s forwards;
}
.da-about-accent {
width: 56px;
height: 4px;
border-radius: 4px;
background: linear-gradient(90deg, #e040fb, #8b5cff);
opacity: 0;
animation: da-fade 0.5s ease-out 0.5s forwards;
}
.da-about-lead {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.5;
color: rgba(255, 255, 255, 0.92);
text-wrap: pretty;
opacity: 0;
transform: translateY(20px);
animation: da-slide-up 0.7s ease-out 0.4s forwards;
}
.da-about-body {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(206, 216, 244, 0.82);
max-width: 68ch;
text-wrap: pretty;
opacity: 0;
transform: translateY(20px);
animation: da-slide-up 0.7s ease-out 0.55s forwards;
}
/* ── keyframes ── */
@keyframes da-slide-up {
to { opacity: 1; transform: translateY(0); }
}
@keyframes da-fade {
to { opacity: 1; }
}
/* ── reduced motion ──
Critical, not cosmetic: the heading, lead and body all start at opacity 0
and are only made visible by the animation's `forwards` fill. Suppressing
animation without restoring opacity would leave the entire hero copy
permanently invisible for anyone with reduced motion enabled. */
@media (prefers-reduced-motion: reduce) {
.da-about-heading,
.da-about-accent,
.da-about-lead,
.da-about-body {
animation: none;
opacity: 1;
transform: none;
}
.da-about-pixel-cell {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1620034 *//* ============================================================
Digital Alberta — About Us: Purpose / Vision / Mission
Three cards, rainbow border on hover.
Fonts (Inter, Poppins) come from the site-wide tag.
Do NOT add a font to this widget.
============================================================ */
.da-benefits-section *,
.da-benefits-section *::before,
.da-benefits-section *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.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;
contain: layout paint style;
}
/* ── Background layers ── */
.da-bg-base {
position: absolute; inset: 0;
background: #f5f9ff;
z-index: -3;
}
/* Was plain http:// (mixed content on an https page) and the full 2560px /
180KB original. It renders at opacity 0.12, so a 1024px file is visually
indistinguishable here. */
.da-bg-mountain {
position: absolute; inset: 0;
background-image: url('https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg');
background-image: image-set(
url('https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg') 1x,
url('https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg') 2x
);
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;
contain: strict;
}
.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; transform: scale(1.4); }
/* ── 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: 56px;
text-wrap: balance;
}
.da-heading-accent { color: #e70185; }
/* ── Grid ── */
.da-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ── Card wrapper — 1px border ring, rainbow on hover ──
The original animated `background-position` across a 400%-sized gradient.
background-position is a PAINT property, not a composited one, so every
frame re-rasterised a ten-stop gradient. This version paints the gradient
once onto a pseudo-element and animates `transform` instead, which the
compositor can handle without repainting. Same sliding rainbow, far cheaper.
The pseudo-element fills the whole wrapper but is covered by .da-card, so
only the 1px padding ring shows through. */
.da-card-wrap {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 16px;
padding: 1px;
background: #2476e2;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.da-card-wrap::before {
content: '';
position: absolute;
z-index: 0;
top: -100%;
left: -50%;
width: 200%;
height: 300%;
opacity: 0;
transition: opacity 0.3s ease;
/* ten stops = the five-colour sequence twice, so shifting by exactly half
the width lands on an identical frame and the loop is seamless */
background: linear-gradient(45deg,
#fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
#fb0094, #0000ff, #00ff00, #ffff00, #ff0000
);
}
.da-card-wrap:hover,
.da-card-wrap:focus-within {
transform: translateY(-5px);
box-shadow: 0 24px 56px rgba(7, 31, 75, 0.16);
}
.da-card-wrap:hover::before,
.da-card-wrap:focus-within::before {
opacity: 1;
animation: da-rb-slide 8s linear infinite;
}
@keyframes da-rb-slide {
to { transform: translateX(50%); }
}
/* ── Card inner ── */
.da-card {
position: relative;
z-index: 1;
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);
text-wrap: pretty;
flex: 1;
}
/* ── Section CTA ── */
.da-benefits-actions {
display: flex;
justify-content: center;
margin-top: clamp(34px, 4vw, 58px);
}
.da-benefits-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding: 0 32px;
overflow: hidden;
border-radius: 999px;
background: #e70185;
color: #ffffff;
text-decoration: none;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
box-shadow: 0 18px 45px rgba(231, 1, 133, 0.28);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.da-benefits-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-benefits-button span,
.da-benefits-button svg { position: relative; z-index: 2; }
.da-benefits-button svg { width: 20px; height: 20px; fill: currentColor; transition: transform 220ms ease; }
.da-benefits-button:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(231,1,133,0.40); color: #fff; }
.da-benefits-button:hover::after { transform: translate(55%, -45%) scale(1.35); }
.da-benefits-button:hover svg { transform: translateX(3px); }
.da-benefits-button:focus-visible { outline: 3px solid #2476e2; outline-offset: 4px; }
/* ── Reveal animation ──
Stagger now lives here rather than in inline style attributes on each
element in the markup. */
.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-heading.da-reveal { transition-delay: 0.08s; }
.da-grid .da-card-wrap:nth-child(1).da-reveal { transition-delay: 0.22s; }
.da-grid .da-card-wrap:nth-child(2).da-reveal { transition-delay: 0.30s; }
.da-grid .da-card-wrap:nth-child(3).da-reveal { transition-delay: 0.38s; }
.da-benefits-actions.da-reveal { transition-delay: 0.48s; }
.da-card-wrap.da-reveal { transform: translateY(32px) scale(0.98); }
.da-card-wrap.da-reveal.in { transform: translateY(0) scale(1); }
/* Once revealed, hand the transition back to the fast hover timing. Without
this the .da-reveal rule keeps winning and the hover lift runs at 0.65s
with a stagger delay attached, so cards lagged noticeably on hover. */
.da-card-wrap.da-reveal.in {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition-delay: 0s;
}
/* ── 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; }
.da-benefits-actions { margin-top: 30px; }
.da-benefits-button { width: 100%; max-width: 280px; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.da-reveal,
.da-card-wrap.da-reveal,
.da-card-wrap.da-reveal.in {
opacity: 1;
transform: none;
transition-duration: 0.01ms;
transition-delay: 0s;
}
.da-card-wrap:hover,
.da-card-wrap:focus-within { transform: none; }
.da-card-wrap:hover::before,
.da-card-wrap:focus-within::before { animation: none; }
.da-pixel-cell { transition: none; }
.da-benefits-button,
.da-benefits-button svg,
.da-benefits-button::after { transition: none; }
.da-benefits-button:hover { transform: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d55a829 *//* ============================================================
Digital Alberta — About Us: Purpose / Vision / Mission
Three cards, rainbow border on hover.
Fonts (Inter, Poppins) come from the site-wide tag.
Do NOT add a font to this widget.
============================================================ */
.da-benefits-section *,
.da-benefits-section *::before,
.da-benefits-section *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.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;
contain: layout paint style;
}
/* ── Background layers ── */
.da-bg-base {
position: absolute; inset: 0;
background: #f5f9ff;
z-index: -3;
}
/* Was plain http:// (mixed content on an https page) and the full 2560px /
180KB original. It renders at opacity 0.12, so a 1024px file is visually
indistinguishable here. */
.da-bg-mountain {
position: absolute; inset: 0;
background-image: url('https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg');
background-image: image-set(
url('https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1024x546.jpg') 1x,
url('https://digitalalberta.com/wp-content/uploads/2026/08/hero-mountains-1536x820.jpg') 2x
);
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;
contain: strict;
}
.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; transform: scale(1.4); }
/* ── 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: 56px;
text-wrap: balance;
}
.da-heading-accent { color: #e70185; }
/* ── Grid ── */
.da-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ── Card wrapper — 1px border ring, rainbow on hover ──
The original animated `background-position` across a 400%-sized gradient.
background-position is a PAINT property, not a composited one, so every
frame re-rasterised a ten-stop gradient. This version paints the gradient
once onto a pseudo-element and animates `transform` instead, which the
compositor can handle without repainting. Same sliding rainbow, far cheaper.
The pseudo-element fills the whole wrapper but is covered by .da-card, so
only the 1px padding ring shows through. */
.da-card-wrap {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 16px;
padding: 1px;
background: #2476e2;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.da-card-wrap::before {
content: '';
position: absolute;
z-index: 0;
top: -100%;
left: -50%;
width: 200%;
height: 300%;
opacity: 0;
transition: opacity 0.3s ease;
/* ten stops = the five-colour sequence twice, so shifting by exactly half
the width lands on an identical frame and the loop is seamless */
background: linear-gradient(45deg,
#fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
#fb0094, #0000ff, #00ff00, #ffff00, #ff0000
);
}
.da-card-wrap:hover,
.da-card-wrap:focus-within {
transform: translateY(-5px);
box-shadow: 0 24px 56px rgba(7, 31, 75, 0.16);
}
.da-card-wrap:hover::before,
.da-card-wrap:focus-within::before {
opacity: 1;
animation: da-rb-slide 8s linear infinite;
}
@keyframes da-rb-slide {
to { transform: translateX(50%); }
}
/* ── Card inner ── */
.da-card {
position: relative;
z-index: 1;
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);
text-wrap: pretty;
flex: 1;
}
/* ── Section CTA ── */
.da-benefits-actions {
display: flex;
justify-content: center;
margin-top: clamp(34px, 4vw, 58px);
}
.da-benefits-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding: 0 32px;
overflow: hidden;
border-radius: 999px;
background: #e70185;
color: #ffffff;
text-decoration: none;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
box-shadow: 0 18px 45px rgba(231, 1, 133, 0.28);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.da-benefits-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-benefits-button span,
.da-benefits-button svg { position: relative; z-index: 2; }
.da-benefits-button svg { width: 20px; height: 20px; fill: currentColor; transition: transform 220ms ease; }
.da-benefits-button:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(231,1,133,0.40); color: #fff; }
.da-benefits-button:hover::after { transform: translate(55%, -45%) scale(1.35); }
.da-benefits-button:hover svg { transform: translateX(3px); }
.da-benefits-button:focus-visible { outline: 3px solid #2476e2; outline-offset: 4px; }
/* ── Reveal animation ──
Stagger now lives here rather than in inline style attributes on each
element in the markup. */
.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-heading.da-reveal { transition-delay: 0.08s; }
.da-grid .da-card-wrap:nth-child(1).da-reveal { transition-delay: 0.22s; }
.da-grid .da-card-wrap:nth-child(2).da-reveal { transition-delay: 0.30s; }
.da-grid .da-card-wrap:nth-child(3).da-reveal { transition-delay: 0.38s; }
.da-benefits-actions.da-reveal { transition-delay: 0.48s; }
.da-card-wrap.da-reveal { transform: translateY(32px) scale(0.98); }
.da-card-wrap.da-reveal.in { transform: translateY(0) scale(1); }
/* Once revealed, hand the transition back to the fast hover timing. Without
this the .da-reveal rule keeps winning and the hover lift runs at 0.65s
with a stagger delay attached, so cards lagged noticeably on hover. */
.da-card-wrap.da-reveal.in {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition-delay: 0s;
}
/* ── 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; }
.da-benefits-actions { margin-top: 30px; }
.da-benefits-button { width: 100%; max-width: 280px; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.da-reveal,
.da-card-wrap.da-reveal,
.da-card-wrap.da-reveal.in {
opacity: 1;
transform: none;
transition-duration: 0.01ms;
transition-delay: 0s;
}
.da-card-wrap:hover,
.da-card-wrap:focus-within { transform: none; }
.da-card-wrap:hover::before,
.da-card-wrap:focus-within::before { animation: none; }
.da-pixel-cell { transition: none; }
.da-benefits-button,
.da-benefits-button svg,
.da-benefits-button::after { transition: none; }
.da-benefits-button:hover { transform: none; }
}/* End custom CSS */