.elementor-555 .elementor-element.elementor-element-bb623c9{--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-555 .elementor-element.elementor-element-52a4e72{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5%;--padding-bottom:5%;--padding-left:2%;--padding-right:2%;}.elementor-555 .elementor-element.elementor-element-656d14d{--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;}.elementor-555 .elementor-element.elementor-element-5fd3ef4{--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;}body:not(.rtl) .elementor-555 .elementor-element.elementor-element-05d3a9b{left:0px;}body.rtl .elementor-555 .elementor-element.elementor-element-05d3a9b{right:0px;}.elementor-555 .elementor-element.elementor-element-05d3a9b{top:0px;z-index:-99;}@media(min-width:768px){.elementor-555 .elementor-element.elementor-element-656d14d{--width:66.6666%;}.elementor-555 .elementor-element.elementor-element-5fd3ef4{--width:33.3333%;}}@media(max-width:767px){.elementor-555 .elementor-element.elementor-element-52a4e72{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}}/* Start custom CSS for html, class: .elementor-element-ada0115 *//* ============================================================ Digital Alberta — Blog Mobile Search Bar Visible only at <=1040px. Dispatches 'da:filter' CustomEvents. Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. ============================================================ */ .da-mob-search, .da-mob-search * { box-sizing: border-box; margin: 0; padding: 0; } .da-mob-search { --da-bg: #f5f9ff; --da-card: #ffffff; --da-border: rgba(7, 31, 75, 0.10); --da-text: #0d0d1a; --da-muted: rgba(7, 31, 75, 0.60); --da-blue: #2476e2; --da-pink: #e70185; display: none; /* hidden on desktop; the sidebar handles search there */ width: 100%; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } @media (max-width: 1040px) { .da-mob-search { display: block; } } .da-mob-search-inner { background: var(--da-card); border: 1px solid var(--da-border); border-radius: 18px; padding: 20px 18px; box-shadow: 0 4px 18px rgba(7, 31, 75, 0.06); } /* real , so tapping the word focuses the field */ .da-mob-search-title { display: block; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-muted); margin-bottom: 14px; cursor: pointer; } .da-mob-search-wrap { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--da-border); border-radius: 10px; background: var(--da-bg); transition: border-color 0.2s, box-shadow 0.2s; } .da-mob-search-wrap:focus-within { border-color: var(--da-blue); box-shadow: 0 0 0 3px rgba(36, 118, 226, 0.12); } /* was an inline style attribute on the tag. Do NOT add a font to this widget. ============================================================ */ .da-mob-search, .da-mob-search * { box-sizing: border-box; margin: 0; padding: 0; } .da-mob-search { --da-bg: #f5f9ff; --da-card: #ffffff; --da-border: rgba(7, 31, 75, 0.10); --da-text: #0d0d1a; --da-muted: rgba(7, 31, 75, 0.60); --da-blue: #2476e2; --da-pink: #e70185; display: none; /* hidden on desktop; the sidebar handles search there */ width: 100%; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } @media (max-width: 1040px) { .da-mob-search { display: block; } } .da-mob-search-inner { background: var(--da-card); border: 1px solid var(--da-border); border-radius: 18px; padding: 20px 18px; box-shadow: 0 4px 18px rgba(7, 31, 75, 0.06); } /* real , so tapping the word focuses the field */ .da-mob-search-title { display: block; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-muted); margin-bottom: 14px; cursor: pointer; } .da-mob-search-wrap { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--da-border); border-radius: 10px; background: var(--da-bg); transition: border-color 0.2s, box-shadow 0.2s; } .da-mob-search-wrap:focus-within { border-color: var(--da-blue); box-shadow: 0 0 0 3px rgba(36, 118, 226, 0.12); } /* was an inline style attribute on the tag. Do NOT add a font to this widget. ============================================================ */ .da-blog-left, .da-blog-left * { box-sizing: border-box; margin: 0; padding: 0; } .da-blog-left a { color: inherit; text-decoration: none; } .da-blog-left { --da-bg: #f5f9ff; --da-bg-2: #edf2fb; --da-card: #ffffff; --da-border: rgba(7, 31, 75, 0.10); --da-border-soft: rgba(7, 31, 75, 0.07); --da-text: #0d0d1a; --da-muted: rgba(7, 31, 75, 0.62); --da-muted-2: rgba(7, 31, 75, 0.42); --da-blue: #2476e2; --da-purple: #6932c4; --da-pink: #e70185; width: 100%; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--da-text); } /* ── grid ── */ .da-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.4vw, 22px); } .da-blog-state { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; color: var(--da-muted); font-size: 15px; text-align: center; } /* ── footer bar ── */ .da-blog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .da-blog-count { font-size: 13px; color: var(--da-muted-2); } /* ── load more button ── */ .da-blog-load-more { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 28px; border-radius: 999px; border: 1.5px solid rgba(36, 118, 226, 0.35); background: #ffffff; color: var(--da-blue); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; overflow: hidden; transition: border-color 0.25s, color 0.25s, background-color 0.25s, transform 0.25s, box-shadow 0.25s; } /* The original set color:#fff on hover but never changed the background, so the label went white-on-white and vanished. Filling the button fixes it. */ .da-blog-load-more:hover { border-color: var(--da-pink); background: var(--da-pink); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(231, 1, 133, 0.22); } .da-blog-load-more:focus-visible { outline: 3px solid var(--da-blue); outline-offset: 3px; } .da-blog-load-more:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .da-blog-load-more.loading .da-lm-label { opacity: 0; } .da-blog-load-more.loading .da-lm-spinner { opacity: 1; } .da-lm-label { transition: opacity 0.2s; } .da-lm-spinner { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; /* centred by margin, so the spin transform is free */ border: 2px solid rgba(36, 118, 226, 0.25); border-top-color: currentColor; border-radius: 50%; opacity: 0; animation: da-spin 0.7s linear infinite; transition: opacity 0.2s; } /* Rotating only — the old keyframe re-applied translate(-50%,-50%) on every frame purely to hold position, which the margin above now does for free. */ @keyframes da-spin { to { transform: rotate(360deg); } } /* ── card ── */ .da-blog-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--da-border); background: var(--da-card); display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(7, 31, 75, 0.07); opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Entrance stagger is a CSS delay driven by --i, set once per card in JS. The old version fired one setTimeout per card. */ .da-blog-card.in { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i, 0) * 55ms); } .da-blog-card:hover { border-color: rgba(231, 1, 133, 0.38); box-shadow: 0 16px 48px rgba(7, 31, 75, 0.13); transform: translateY(-4px); transition-delay: 0s; /* never inherit the entrance delay on hover */ } /* card image */ .da-blog-card-img-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--da-bg-2); contain: paint; } .da-blog-card-img { width: 100%; height: 100% !important; object-fit: cover; display: block; /* Static saturate only. The original also transitioned `filter` on hover, which re-runs the filter every frame while the image is scaling. */ filter: saturate(1.04); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .da-blog-card:hover .da-blog-card-img { transform: scale(1.07); } .da-blog-card-img-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(7, 16, 37, 0.38) 100%); } .da-blog-card-tags { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; } /* Opaque-ish white instead of backdrop-filter: blur(). A backdrop blur has to re-sample everything beneath it, and this sits on top of an image that scales on hover — so it was re-blurring every frame of that animation. */ .da-blog-tag { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.92); color: var(--da-blue); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .da-blog-card-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 22, 54, 0.34); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; } .da-blog-card:hover .da-blog-card-overlay, .da-blog-card:focus-within .da-blog-card-overlay { opacity: 1; pointer-events: auto; } .da-blog-read-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #e70185; color: #ffffff !important; font-size: 13px; font-weight: 800; box-shadow: 0 10px 28px rgba(231, 1, 133, 0.30); transition: transform 0.2s ease, box-shadow 0.2s ease; } .da-blog-read-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 16px 40px rgba(231, 1, 133, 0.42); } .da-blog-read-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .da-blog-read-btn svg { width: 14px; height: 14px; } /* card body */ .da-blog-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 1.1vw, 22px); } .da-blog-card-title-link { display: block; } .da-blog-card-title { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: clamp(15px, 1.05vw, 19px); font-weight: 700; line-height: 1.25; letter-spacing: -0.022em; color: var(--da-text); transition: color 0.2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .da-blog-card-title-link:hover .da-blog-card-title { color: var(--da-pink); } .da-blog-card-excerpt { color: var(--da-muted); font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── skeletons ── */ .da-blog-skeleton { min-height: 340px; border-radius: 16px; border: 1px solid var(--da-border-soft); background: #ffffff; overflow: hidden; contain: strict; } .da-blog-skeleton-img { aspect-ratio: 16 / 10; background: var(--da-bg-2); animation: da-bl-pulse 1.4s ease-in-out infinite; } .da-blog-skeleton-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; } .da-blog-skeleton-line { height: 12px; border-radius: 999px; background: var(--da-bg-2); animation: da-bl-pulse 1.4s ease-in-out infinite; } .da-blog-skeleton-line.short { width: 46%; } .da-blog-skeleton-line.med { width: 78%; } @keyframes da-bl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.44; } } /* ── responsive ── */ @media (max-width: 900px) { .da-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .da-blog-grid { grid-template-columns: 1fr; } .da-blog-footer { flex-direction: column; align-items: flex-start; } } /* Hover reveal is unreachable without a pointer, so on touch the overlay is always on — otherwise the Read Article button can never be tapped. */ @media (hover: none) { .da-blog-card-overlay { opacity: 1; pointer-events: auto; background: rgba(10, 22, 54, 0.22); } .da-blog-card:hover { transform: none; } .da-blog-card:hover .da-blog-card-img { transform: none; } } @media (prefers-reduced-motion: reduce) { .da-blog-card, .da-blog-card.in { opacity: 1; transform: none; transition-duration: 0.01ms; transition-delay: 0s; } .da-blog-card:hover { transform: none; } .da-blog-card:hover .da-blog-card-img { transform: none; } .da-blog-skeleton-img, .da-blog-skeleton-line { animation: none; } .da-lm-spinner { animation-duration: 1.4s; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-77e7512 *//* ============================================================ Digital Alberta — Blog Archive LEFT PANEL Receives filter events from the right panel via window CustomEvent. Fonts (Inter 400-700, Poppins 500-700) come from the site-wide tag. Do NOT add a font to this widget. ============================================================ */ .da-blog-left, .da-blog-left * { box-sizing: border-box; margin: 0; padding: 0; } .da-blog-left a { color: inherit; text-decoration: none; } .da-blog-left { --da-bg: #f5f9ff; --da-bg-2: #edf2fb; --da-card: #ffffff; --da-border: rgba(7, 31, 75, 0.10); --da-border-soft: rgba(7, 31, 75, 0.07); --da-text: #0d0d1a; --da-muted: rgba(7, 31, 75, 0.62); --da-muted-2: rgba(7, 31, 75, 0.42); --da-blue: #2476e2; --da-purple: #6932c4; --da-pink: #e70185; width: 100%; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--da-text); } /* ── grid ── */ .da-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.4vw, 22px); } .da-blog-state { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; color: var(--da-muted); font-size: 15px; text-align: center; } /* ── footer bar ── */ .da-blog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .da-blog-count { font-size: 13px; color: var(--da-muted-2); } /* ── load more button ── */ .da-blog-load-more { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 28px; border-radius: 999px; border: 1.5px solid rgba(36, 118, 226, 0.35); background: #ffffff; color: var(--da-blue); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; overflow: hidden; transition: border-color 0.25s, color 0.25s, background-color 0.25s, transform 0.25s, box-shadow 0.25s; } /* The original set color:#fff on hover but never changed the background, so the label went white-on-white and vanished. Filling the button fixes it. */ .da-blog-load-more:hover { border-color: var(--da-pink); background: var(--da-pink); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(231, 1, 133, 0.22); } .da-blog-load-more:focus-visible { outline: 3px solid var(--da-blue); outline-offset: 3px; } .da-blog-load-more:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .da-blog-load-more.loading .da-lm-label { opacity: 0; } .da-blog-load-more.loading .da-lm-spinner { opacity: 1; } .da-lm-label { transition: opacity 0.2s; } .da-lm-spinner { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; /* centred by margin, so the spin transform is free */ border: 2px solid rgba(36, 118, 226, 0.25); border-top-color: currentColor; border-radius: 50%; opacity: 0; animation: da-spin 0.7s linear infinite; transition: opacity 0.2s; } /* Rotating only — the old keyframe re-applied translate(-50%,-50%) on every frame purely to hold position, which the margin above now does for free. */ @keyframes da-spin { to { transform: rotate(360deg); } } /* ── card ── */ .da-blog-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--da-border); background: var(--da-card); display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(7, 31, 75, 0.07); opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Entrance stagger is a CSS delay driven by --i, set once per card in JS. The old version fired one setTimeout per card. */ .da-blog-card.in { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i, 0) * 55ms); } .da-blog-card:hover { border-color: rgba(231, 1, 133, 0.38); box-shadow: 0 16px 48px rgba(7, 31, 75, 0.13); transform: translateY(-4px); transition-delay: 0s; /* never inherit the entrance delay on hover */ } /* card image */ .da-blog-card-img-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--da-bg-2); contain: paint; } .da-blog-card-img { width: 100%; height: 100% !important; object-fit: cover; display: block; /* Static saturate only. The original also transitioned `filter` on hover, which re-runs the filter every frame while the image is scaling. */ filter: saturate(1.04); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .da-blog-card:hover .da-blog-card-img { transform: scale(1.07); } .da-blog-card-img-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(7, 16, 37, 0.38) 100%); } .da-blog-card-tags { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; } /* Opaque-ish white instead of backdrop-filter: blur(). A backdrop blur has to re-sample everything beneath it, and this sits on top of an image that scales on hover — so it was re-blurring every frame of that animation. */ .da-blog-tag { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.92); color: var(--da-blue); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .da-blog-card-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 22, 54, 0.34); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; } .da-blog-card:hover .da-blog-card-overlay, .da-blog-card:focus-within .da-blog-card-overlay { opacity: 1; pointer-events: auto; } .da-blog-read-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #e70185; color: #ffffff; font-size: 13px; font-weight: 800; box-shadow: 0 10px 28px rgba(231, 1, 133, 0.30); transition: transform 0.2s ease, box-shadow 0.2s ease; } .da-blog-read-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 16px 40px rgba(231, 1, 133, 0.42); } .da-blog-read-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .da-blog-read-btn svg { width: 14px; height: 14px; } /* card body */ .da-blog-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 1.1vw, 22px); } .da-blog-card-title-link { display: block; } .da-blog-card-title { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: clamp(15px, 1.05vw, 19px); font-weight: 700; line-height: 1.25; letter-spacing: -0.022em; color: var(--da-text); transition: color 0.2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .da-blog-card-title-link:hover .da-blog-card-title { color: var(--da-pink); } .da-blog-card-excerpt { color: var(--da-muted); font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── skeletons ── */ .da-blog-skeleton { min-height: 340px; border-radius: 16px; border: 1px solid var(--da-border-soft); background: #ffffff; overflow: hidden; contain: strict; } .da-blog-skeleton-img { aspect-ratio: 16 / 10; background: var(--da-bg-2); animation: da-bl-pulse 1.4s ease-in-out infinite; } .da-blog-skeleton-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; } .da-blog-skeleton-line { height: 12px; border-radius: 999px; background: var(--da-bg-2); animation: da-bl-pulse 1.4s ease-in-out infinite; } .da-blog-skeleton-line.short { width: 46%; } .da-blog-skeleton-line.med { width: 78%; } @keyframes da-bl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.44; } } /* ── responsive ── */ @media (max-width: 900px) { .da-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .da-blog-grid { grid-template-columns: 1fr; } .da-blog-footer { flex-direction: column; align-items: flex-start; } } /* Hover reveal is unreachable without a pointer, so on touch the overlay is always on — otherwise the Read Article button can never be tapped. */ @media (hover: none) { .da-blog-card-overlay { opacity: 1; pointer-events: auto; background: rgba(10, 22, 54, 0.22); } .da-blog-card:hover { transform: none; } .da-blog-card:hover .da-blog-card-img { transform: none; } } @media (prefers-reduced-motion: reduce) { .da-blog-card, .da-blog-card.in { opacity: 1; transform: none; transition-duration: 0.01ms; transition-delay: 0s; } .da-blog-card:hover { transform: none; } .da-blog-card:hover .da-blog-card-img { transform: none; } .da-blog-skeleton-img, .da-blog-skeleton-line { animation: none; } .da-lm-spinner { animation-duration: 1.4s; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6f6d166 *//* ============================================================ Digital Alberta — Blog Archive RIGHT PANEL (Sidebar) Dispatches 'da:filter' CustomEvents consumed by blog-left.js. Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. ============================================================ */ .da-blog-right, .da-blog-right * { box-sizing: border-box; margin: 0; padding: 0; } .da-blog-right a { color: inherit; text-decoration: none; } .da-blog-right { --da-bg: #f5f9ff; --da-card: #ffffff; --da-border: rgba(7, 31, 75, 0.10); --da-border-soft: rgba(7, 31, 75, 0.06); --da-text: #0d0d1a; --da-muted: rgba(7, 31, 75, 0.60); --da-muted-2: rgba(7, 31, 75, 0.42); --da-blue: #2476e2; --da-pink: #e70185; --da-purple: #6932c4; width: 100%; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--da-text); display: flex; flex-direction: column; gap: 18px; } /* No sticky positioning and no inner scroll: the sidebar is taller than the viewport once categories, tags and archives are populated, so pinning it would leave the lower widgets permanently unreachable. It flows with the page instead, and every filter is visible by scrolling normally. */ /* Nothing in this column may be compressed to fit. This matters specifically because .da-br-cta sets overflow:hidden. A flex item's automatic minimum size (min-height:auto) only protects it while overflow is visible — once it is hidden, the item's minimum collapses to 0 and the CTA gets squashed to a sliver with its content clipped, which is exactly what happened. The .da-br-widget cards have no overflow set, so they kept their intrinsic height and hid the problem. */ .da-blog-right > * { flex-shrink: 0; min-height: auto; } /* ── Widget card shell ── */ .da-br-widget { position: relative; background: var(--da-card); border: 1px solid var(--da-border); border-radius: 18px; padding: 22px 20px; box-shadow: 0 4px 18px rgba(7, 31, 75, 0.06); } /* Thin brand rule under each heading — gives the stack a rhythm the flat uppercase labels alone did not have. */ .da-br-widget-title { display: flex; align-items: center; gap: 10px; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--da-muted-2); margin: 0 0 16px; } .da-br-widget-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--da-border) 0%, transparent 100%); } /* ── Search ── */ /* The dedicated mobile search widget already covers <=1040px. Without this both render and the page shows two search boxes stacked. */ @media (max-width: 1040px) { .da-br-widget--search { display: none; } } .da-br-search-wrap { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--da-border); border-radius: 10px; background: var(--da-bg); transition: border-color 0.2s, box-shadow 0.2s; } .da-br-search-wrap:focus-within { border-color: var(--da-blue); box-shadow: 0 0 0 3px rgba(36, 118, 226, 0.12); } .da-br-search-icon { flex-shrink: 0; color: var(--da-muted); width: 15px; height: 15px; display: block; } .da-br-search-input { flex: 1; height: 100%; border: none; background: transparent; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; /* 16px: anything smaller makes iOS Safari force-zoom on focus */ font-size: 16px; color: var(--da-text); outline: none; min-width: 0; appearance: none; -webkit-appearance: none; } .da-br-search-input::placeholder { color: var(--da-muted); font-size: 14px; } .da-br-search-input::-webkit-search-cancel-button, .da-br-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .da-br-search-clear { flex-shrink: 0; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: rgba(7, 31, 75, 0.10); border-radius: 50%; cursor: pointer; color: var(--da-muted); font-size: 11px; line-height: 1; transition: background 0.2s, color 0.2s; } .da-br-search-clear:hover { background: rgba(231, 1, 133, 0.15); color: var(--da-pink); } .da-br-search-clear:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 2px; } .da-br-search-clear.visible { display: flex; } /* ── Filter lists ── */ .da-br-filter-list { display: flex; flex-direction: column; gap: 2px; } .da-br-filter-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; border: none; border-left: 3px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 14px; color: var(--da-muted); text-align: left; transition: background 0.15s, color 0.15s, border-color 0.15s; } .da-br-filter-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .da-br-filter-btn:hover { background: rgba(36, 118, 226, 0.07); color: var(--da-blue); } .da-br-filter-btn:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 1px; } .da-br-filter-btn.is-active { background: rgba(36, 118, 226, 0.13); color: var(--da-blue); font-weight: 700; border-left-color: var(--da-blue); } .da-br-filter-count { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(7, 31, 75, 0.07); color: var(--da-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; transition: background 0.15s, color 0.15s; } .da-br-filter-btn.is-active .da-br-filter-count { background: rgba(36, 118, 226, 0.18); color: var(--da-blue); } /* ── Tags cloud ── */ .da-br-tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .da-br-tag-btn { padding: 6px 13px; border: 1px solid var(--da-border); border-radius: 999px; background: var(--da-bg); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--da-muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; } .da-br-tag-btn:hover { background: rgba(105, 50, 196, 0.08); border-color: rgba(105, 50, 196, 0.35); color: var(--da-purple); transform: translateY(-1px); } .da-br-tag-btn:focus-visible { outline: 2px solid var(--da-purple); outline-offset: 2px; } .da-br-tag-btn.is-active { background: var(--da-purple); border-color: var(--da-purple); color: #fff; box-shadow: 0 4px 14px rgba(105, 50, 196, 0.28); } /* ── Loading placeholder ── */ .da-br-skeleton-line { height: 11px; border-radius: 999px; background: rgba(7, 31, 75, 0.07); animation: da-br-pulse 1.4s ease-in-out infinite; margin-bottom: 10px; } @keyframes da-br-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .da-br-empty { font-size: 13px; color: var(--da-muted); padding: 4px 10px; } /* ── Active filter / reset row ── */ .da-br-reset-row { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(231, 1, 133, 0.06); border: 1px dashed rgba(231, 1, 133, 0.30); font-size: 13px; color: var(--da-pink); } .da-br-reset-row.visible { display: flex; } #da-br-filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .da-br-reset-btn { border: none; background: none; color: var(--da-pink); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 2px; display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .da-br-reset-btn:hover { text-decoration: underline; } .da-br-reset-btn:focus-visible { outline: 2px solid var(--da-pink); outline-offset: 2px; border-radius: 4px; } /* ── CTA card ── */ .da-br-cta { border-radius: 18px; overflow: hidden; position: relative; isolation: isolate; padding: 32px 24px; background: linear-gradient(135deg, #051f49 0%, #2476e2 55%, #6932c4 100%); color: #ffffff; text-align: center; } .da-br-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* soft corner glow, adds depth without a blur filter */ .da-br-cta::after { content: ''; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; top: -22%; right: -18%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, rgba(231, 1, 133, 0.42), transparent 72%); } .da-br-cta-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.72; margin-bottom: 10px; } .da-br-cta-title { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 10px; text-wrap: balance; } .da-br-cta-sub { font-size: 13px; line-height: 1.6; opacity: 0.82; margin-bottom: 22px; text-wrap: pretty; } .da-br-cta-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: 999px; background: #e70185; color: #ffffff; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 800; box-shadow: 0 8px 28px rgba(231, 1, 133, 0.38); transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; } .da-br-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(231, 1, 133, 0.50); color: #fff; } .da-br-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .da-br-skeleton-line { animation: none; } .da-br-tag-btn, .da-br-cta-btn { transition: none; } .da-br-tag-btn:hover, .da-br-cta-btn:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-05d3a9b *//* ============================================================ Digital Alberta — Blog Archive RIGHT PANEL (Sidebar) Dispatches 'da:filter' CustomEvents consumed by blog-left.js. Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. ============================================================ */ .da-blog-right, .da-blog-right * { box-sizing: border-box; margin: 0; padding: 0; } .da-blog-right a { color: inherit; text-decoration: none; } .da-blog-right { --da-bg: #f5f9ff; --da-card: #ffffff; --da-border: rgba(7, 31, 75, 0.10); --da-border-soft: rgba(7, 31, 75, 0.06); --da-text: #0d0d1a; --da-muted: rgba(7, 31, 75, 0.60); --da-muted-2: rgba(7, 31, 75, 0.42); --da-blue: #2476e2; --da-pink: #e70185; --da-purple: #6932c4; width: 100%; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--da-text); display: flex; flex-direction: column; gap: 18px; } /* Follows the reader down long archive pages instead of stranding the filters at the top. Only above the breakpoint — on mobile it stacks normally. */ @media (min-width: 1041px) { .da-blog-right { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(7, 31, 75, 0.22) transparent; padding-right: 4px; } .da-blog-right::-webkit-scrollbar { width: 6px; } .da-blog-right::-webkit-scrollbar-thumb { background: rgba(7, 31, 75, 0.18); border-radius: 999px; } .da-blog-right::-webkit-scrollbar-track { background: transparent; } } /* ── Widget card shell ── */ .da-br-widget { position: relative; background: var(--da-card); border: 1px solid var(--da-border); border-radius: 18px; padding: 22px 20px; box-shadow: 0 4px 18px rgba(7, 31, 75, 0.06); } /* Thin brand rule under each heading — gives the stack a rhythm the flat uppercase labels alone did not have. */ .da-br-widget-title { display: flex; align-items: center; gap: 10px; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--da-muted-2); margin: 0 0 16px; } .da-br-widget-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--da-border) 0%, transparent 100%); } /* ── Search ── */ /* The dedicated mobile search widget already covers <=1040px. Without this both render and the page shows two search boxes stacked. */ @media (max-width: 1040px) { .da-br-widget--search { display: none; } } .da-br-search-wrap { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--da-border); border-radius: 10px; background: var(--da-bg); transition: border-color 0.2s, box-shadow 0.2s; } .da-br-search-wrap:focus-within { border-color: var(--da-blue); box-shadow: 0 0 0 3px rgba(36, 118, 226, 0.12); } .da-br-search-icon { flex-shrink: 0; color: var(--da-muted); width: 15px; height: 15px; display: block; } .da-br-search-input { flex: 1; height: 100%; border: none; background: transparent; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; /* 16px: anything smaller makes iOS Safari force-zoom on focus */ font-size: 16px; color: var(--da-text); outline: none; min-width: 0; appearance: none; -webkit-appearance: none; } .da-br-search-input::placeholder { color: var(--da-muted); font-size: 14px; } .da-br-search-input::-webkit-search-cancel-button, .da-br-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .da-br-search-clear { flex-shrink: 0; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: rgba(7, 31, 75, 0.10); border-radius: 50%; cursor: pointer; color: var(--da-muted); font-size: 11px; line-height: 1; transition: background 0.2s, color 0.2s; } .da-br-search-clear:hover { background: rgba(231, 1, 133, 0.15); color: var(--da-pink); } .da-br-search-clear:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 2px; } .da-br-search-clear.visible { display: flex; } /* ── Filter lists ── */ .da-br-filter-list { display: flex; flex-direction: column; gap: 2px; } /* Long category/archive lists get their own scroll rather than pushing the CTA far below the fold. */ .da-br-filter-list--scroll { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -6px; padding-right: 6px; } .da-br-filter-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; border: none; border-left: 3px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 14px; color: var(--da-muted); text-align: left; transition: background 0.15s, color 0.15s, border-color 0.15s; } .da-br-filter-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .da-br-filter-btn:hover { background: rgba(36, 118, 226, 0.07); color: var(--da-blue); } .da-br-filter-btn:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 1px; } .da-br-filter-btn.is-active { background: rgba(36, 118, 226, 0.13); color: var(--da-blue); font-weight: 700; border-left-color: var(--da-blue); } .da-br-filter-count { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(7, 31, 75, 0.07); color: var(--da-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; transition: background 0.15s, color 0.15s; } .da-br-filter-btn.is-active .da-br-filter-count { background: rgba(36, 118, 226, 0.18); color: var(--da-blue); } /* ── Tags cloud ── */ .da-br-tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .da-br-tag-btn { padding: 6px 13px; border: 1px solid var(--da-border); border-radius: 999px; background: var(--da-bg); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--da-muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; } .da-br-tag-btn:hover { background: rgba(105, 50, 196, 0.08); border-color: rgba(105, 50, 196, 0.35); color: var(--da-purple); transform: translateY(-1px); } .da-br-tag-btn:focus-visible { outline: 2px solid var(--da-purple); outline-offset: 2px; } .da-br-tag-btn.is-active { background: var(--da-purple); border-color: var(--da-purple); color: #fff; box-shadow: 0 4px 14px rgba(105, 50, 196, 0.28); } /* ── Loading placeholder ── */ .da-br-skeleton-line { height: 11px; border-radius: 999px; background: rgba(7, 31, 75, 0.07); animation: da-br-pulse 1.4s ease-in-out infinite; margin-bottom: 10px; } @keyframes da-br-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .da-br-empty { font-size: 13px; color: var(--da-muted); padding: 4px 10px; } /* ── Active filter / reset row ── */ .da-br-reset-row { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(231, 1, 133, 0.06); border: 1px dashed rgba(231, 1, 133, 0.30); font-size: 13px; color: var(--da-pink); } .da-br-reset-row.visible { display: flex; } #da-br-filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .da-br-reset-btn { border: none; background: none; color: var(--da-pink); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 2px; display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .da-br-reset-btn:hover { text-decoration: underline; } .da-br-reset-btn:focus-visible { outline: 2px solid var(--da-pink); outline-offset: 2px; border-radius: 4px; } /* ── CTA card ── */ .da-br-cta { border-radius: 18px; overflow: hidden; position: relative; isolation: isolate; padding: 32px 24px; background: linear-gradient(135deg, #051f49 0%, #2476e2 55%, #6932c4 100%); color: #ffffff; text-align: center; } .da-br-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* soft corner glow, adds depth without a blur filter */ .da-br-cta::after { content: ''; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; top: -22%; right: -18%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, rgba(231, 1, 133, 0.42), transparent 72%); } .da-br-cta-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.72; margin-bottom: 10px; } .da-br-cta-title { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 10px; text-wrap: balance; } .da-br-cta-sub { font-size: 13px; line-height: 1.6; opacity: 0.82; margin-bottom: 22px; text-wrap: pretty; } .da-br-cta-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: 999px; background: #e70185; color: #ffffff; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 800; box-shadow: 0 8px 28px rgba(231, 1, 133, 0.38); transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; } .da-br-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(231, 1, 133, 0.50); color: #fff; } .da-br-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .da-br-skeleton-line { animation: none; } .da-br-tag-btn, .da-br-cta-btn { transition: none; } .da-br-tag-btn:hover, .da-br-cta-btn:hover { transform: none; } }/* End custom CSS */