.elementor-7871 .elementor-element.elementor-element-29eff23{--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-7871 .elementor-element.elementor-element-fefa8e3{left:0px;}body.rtl .elementor-7871 .elementor-element.elementor-element-fefa8e3{right:0px;}.elementor-7871 .elementor-element.elementor-element-fefa8e3{top:0px;z-index:-99;}.elementor-7871 .elementor-element.elementor-element-8b49070{--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-7871 .elementor-element.elementor-element-4dbfa03{--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-7871 .elementor-element.elementor-element-b1ad76f{left:0px;}body.rtl .elementor-7871 .elementor-element.elementor-element-b1ad76f{right:0px;}.elementor-7871 .elementor-element.elementor-element-b1ad76f{top:0px;z-index:-99;}.elementor-7871 .elementor-element.elementor-element-23fed9b{--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-7871 .elementor-element.elementor-element-4162bf5{left:0px;}body.rtl .elementor-7871 .elementor-element.elementor-element-4162bf5{right:0px;}.elementor-7871 .elementor-element.elementor-element-4162bf5{top:0px;z-index:-99;}@media(min-width:768px){.elementor-7871 .elementor-element.elementor-element-4dbfa03{--width:66.6666%;}.elementor-7871 .elementor-element.elementor-element-23fed9b{--width:33.3333%;}}/* Start custom CSS for html, class: .elementor-element-6afc16e *//* ============================================================ Digital Alberta — Single Post Hero Category badge and title. Featured image as background. Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. ============================================================ */ #da-sp-hero * { box-sizing: border-box; margin: 0; padding: 0; } /* Background was plain http:// — mixed content on an https page. */ #da-sp-hero { position: relative; overflow: hidden; contain: layout paint style; background: 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://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/06/contactus-bg.jpg") center center / cover no-repeat, #051f49; min-height: 520px; display: flex; align-items: center; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; padding: 100px clamp(24px, 6vw, 80px) 80px; } /* ── Pixel overlay ── */ #da-sp-pixel-overlay { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; gap: 0; contain: strict; } /* No will-change. This grid is 28x14 = 392 cells; promoting every one to its own compositor layer for the life of the page costs significant GPU memory and buys nothing — opacity and transform are already composited. */ .da-sp-pixel-cell { background: #051f49; transition: opacity var(--dur, 500ms) var(--del, 0ms) cubic-bezier(0.4,0,0.2,1), transform var(--dur, 500ms) var(--del, 0ms) cubic-bezier(0.4,0,0.2,1); } .da-sp-pixel-cell.is-out { opacity: 0; transform: scale(1.6); } /* ── Layout ── */ .da-sp-grid { position: relative; z-index: 2; width: min(1800px, 100%); margin: 0 auto; } .da-sp-inner { display: flex; flex-direction: column; gap: 16px; max-width: 900px; } /* ── Category badge ── */ .da-sp-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; padding: 8px 20px !important; /* !important retained: beats theme resets */ opacity: 0; animation: da-sp-fade 0.5s ease-out 0.1s forwards; width: fit-content; } /* ── Title ── */ .da-sp-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; opacity: 0; transform: translateY(20px); animation: da-sp-slide-up 0.7s ease-out 0.2s forwards; } /* ── Accent bar ── */ .da-sp-accent { width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #e040fb, #8b5cff); opacity: 0; animation: da-sp-fade 0.5s ease-out 0.45s forwards; } /* ── Skeleton while loading ── */ .da-sp-skel { height: 1em; border-radius: 4px; background: rgba(255,255,255,0.15); animation: da-sp-pulse 1.4s ease-in-out infinite; } .da-sp-skel-title { width: 65%; height: clamp(2rem, 4.5vw, 3.4rem); border-radius: 8px; } .da-sp-skel-cat { width: 90px; height: 22px; border-radius: 20px; } @keyframes da-sp-slide-up { to { opacity: 1; transform: translateY(0); } } @keyframes da-sp-fade { to { opacity: 1; } } @keyframes da-sp-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Responsive ── */ @media (max-width: 1024px) { #da-sp-hero { min-height: 440px; padding: 90px clamp(20px, 5vw, 60px) 70px; } .da-sp-inner { max-width: 100%; gap: 14px; } } @media (max-width: 768px) { #da-sp-hero { min-height: 380px; padding: 80px 24px 60px; align-items: flex-end; } .da-sp-inner { gap: 12px; } .da-sp-title { letter-spacing: -0.02em; line-height: 1.12; } } @media (max-width: 480px) { #da-sp-hero { min-height: 340px; padding: 72px 20px 52px; } .da-sp-cat { font-size: 10px; padding: 7px 16px !important; } .da-sp-accent { width: 40px; } } /* ── Reduced motion ── Not cosmetic: the badge, title and accent all start at opacity 0 and are only made visible by each animation's `forwards` fill. Suppressing the animations without restoring opacity would leave the entire hero blank. */ @media (prefers-reduced-motion: reduce) { .da-sp-cat, .da-sp-title, .da-sp-accent { animation: none; opacity: 1; transform: none; } .da-sp-skel { animation: none; } .da-sp-pixel-cell { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-fefa8e3 *//* ============================================================ Digital Alberta — Single Post Hero Category badge, title, author + date. Featured image as background. Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. ============================================================ */ #da-sp-hero * { box-sizing: border-box; margin: 0; padding: 0; } /* Background was plain http:// — mixed content on an https page. */ #da-sp-hero { position: relative; overflow: hidden; contain: layout paint style; background: 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://sandbox.digitalalberta.host3.alchemysvr.com/wp-content/uploads/2026/06/contactus-bg.jpg") center center / cover no-repeat, #051f49; min-height: 520px; display: flex; align-items: center; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; padding: 100px clamp(24px, 6vw, 80px) 80px; } /* ── Pixel overlay ── */ #da-sp-pixel-overlay { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; gap: 0; contain: strict; } /* No will-change. This grid is 28x14 = 392 cells; promoting every one to its own compositor layer for the life of the page costs significant GPU memory and buys nothing — opacity and transform are already composited. */ .da-sp-pixel-cell { background: #051f49; transition: opacity var(--dur, 500ms) var(--del, 0ms) cubic-bezier(0.4,0,0.2,1), transform var(--dur, 500ms) var(--del, 0ms) cubic-bezier(0.4,0,0.2,1); } .da-sp-pixel-cell.is-out { opacity: 0; transform: scale(1.6); } /* ── Layout ── */ .da-sp-grid { position: relative; z-index: 2; width: min(1800px, 100%); margin: 0 auto; } .da-sp-inner { display: flex; flex-direction: column; gap: 16px; max-width: 900px; } /* ── Category badge ── */ .da-sp-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; padding: 8px 20px !important; /* !important retained: beats theme resets */ opacity: 0; animation: da-sp-fade 0.5s ease-out 0.1s forwards; width: fit-content; } /* ── Title ── */ .da-sp-title { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; opacity: 0; transform: translateY(20px); animation: da-sp-slide-up 0.7s ease-out 0.2s forwards; } /* ── Accent bar ── */ .da-sp-accent { width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #e040fb, #8b5cff); opacity: 0; animation: da-sp-fade 0.5s ease-out 0.45s forwards; } /* ── Meta: author + date ── The original markup reserved a skeleton row for this and the file header promised it, but render() never emitted any meta — so the placeholder simply vanished when the post loaded. */ .da-sp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; color: rgba(226, 234, 255, 0.78); opacity: 0; transform: translateY(14px); animation: da-sp-slide-up 0.6s ease-out 0.55s forwards; } .da-sp-meta-item { display: inline-flex; align-items: center; gap: 7px; } .da-sp-meta-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; } .da-sp-meta-sep { color: rgba(255,255,255,0.28); } .da-sp-author { font-weight: 600; color: #fff; } /* ── Skeleton while loading ── */ .da-sp-skel { height: 1em; border-radius: 4px; background: rgba(255,255,255,0.15); animation: da-sp-pulse 1.4s ease-in-out infinite; } .da-sp-skel-title { width: 65%; height: clamp(2rem, 4.5vw, 3.4rem); border-radius: 8px; } .da-sp-skel-cat { width: 90px; height: 22px; border-radius: 20px; } .da-sp-skel-meta { width: 200px; height: 14px; } @keyframes da-sp-slide-up { to { opacity: 1; transform: translateY(0); } } @keyframes da-sp-fade { to { opacity: 1; } } @keyframes da-sp-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Responsive ── */ @media (max-width: 1024px) { #da-sp-hero { min-height: 440px; padding: 90px clamp(20px, 5vw, 60px) 70px; } .da-sp-inner { max-width: 100%; gap: 14px; } } @media (max-width: 768px) { #da-sp-hero { min-height: 380px; padding: 80px 24px 60px; align-items: flex-end; } .da-sp-inner { gap: 12px; } .da-sp-title { letter-spacing: -0.02em; line-height: 1.12; } } @media (max-width: 480px) { #da-sp-hero { min-height: 340px; padding: 72px 20px 52px; } .da-sp-cat { font-size: 10px; padding: 7px 16px !important; } .da-sp-accent { width: 40px; } .da-sp-meta { font-size: 13px; gap: 6px 12px; } } /* ── Reduced motion ── Not cosmetic: the badge, title, accent and meta all start at opacity 0 and are only made visible by each animation's `forwards` fill. Suppressing the animations without restoring opacity would leave the entire hero blank. */ @media (prefers-reduced-motion: reduce) { .da-sp-cat, .da-sp-title, .da-sp-accent, .da-sp-meta { animation: none; opacity: 1; transform: none; } .da-sp-skel { animation: none; } .da-sp-pixel-cell { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6eed646 *//* ============================================================ Digital Alberta — Single Post LEFT (Content) Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. NOTE ON !important: the .da-spl-content rules below keep theirs on purpose. They exist to beat Elementor/Hello theme defaults on WP-rendered post HTML, which is not under our control. Removing them is not safe without visually diffing real posts. ============================================================ */ #da-spl-root, #da-spl-root * { box-sizing: border-box; margin: 0; } #da-spl-root { --da-text: #0d0d1a; --da-muted: rgba(7,31,75,0.55); --da-border: rgba(7,31,75,0.10); --da-blue: #2476e2; --da-pink: #e70185; --da-bg: #f5f9ff; --da-card: #ffffff; width: 100%; font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--da-text); } /* ── Article shell ── height/min-height: 100% removed. In normal flow the parent has auto height, so a percentage height resolves against nothing and either no-ops or collapses the card. */ .da-spl-article { background: var(--da-card); border: 1px solid rgba(7,31,75,0.08); border-radius: 24px; box-shadow: 0 8px 48px rgba(7,31,75,0.10); overflow: hidden; } /* ── Post content typography ── */ .da-spl-content { padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px); opacity: 0; animation: da-spl-up 0.6s ease-out 0.2s forwards; } .da-spl-content > *:first-child { margin-top: 0 !important; } .da-spl-content p { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.025rem, 1.35vw, 1.125rem) !important; font-weight: 400 !important; line-height: 1.95 !important; color: var(--da-text) !important; margin: 0 0 1.8em 0 !important; padding: 0 !important; } .da-spl-content h1, .da-spl-content h2, .da-spl-content h3, .da-spl-content h4, .da-spl-content h5, .da-spl-content h6 { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; color: var(--da-text) !important; margin: 2.5em 0 0.8em 0 !important; padding: 0 !important; } .da-spl-content h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem) !important; } .da-spl-content h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem) !important; } .da-spl-content h4 { font-size: 1.15rem !important; } .da-spl-content a { color: var(--da-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: color 0.2s; } .da-spl-content a:hover { color: var(--da-pink) !important; } .da-spl-content ul, .da-spl-content ol { padding-left: 1.8em !important; margin: 0 0 1.8em 0 !important; } .da-spl-content li { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.025rem, 1.35vw, 1.125rem) !important; line-height: 1.85 !important; margin-bottom: 0.55em !important; color: var(--da-text) !important; } .da-spl-content blockquote { border-left: 4px solid var(--da-blue) !important; margin: 3em 0 !important; padding: 28px 36px !important; background: rgba(36,118,226,0.05) !important; border-radius: 0 14px 14px 0 !important; } .da-spl-content blockquote p { font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important; font-style: italic !important; font-weight: 500 !important; line-height: 1.75 !important; color: var(--da-text) !important; margin-bottom: 0 !important; } /* height:auto stops WP width/height attributes from squashing the aspect ratio once max-width kicks in on narrow screens. */ .da-spl-content img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; display: block !important; margin: 2em auto !important; } .da-spl-content figure { margin: 2em 0 !important; } .da-spl-content figcaption { font-size: 13px !important; text-align: center !important; color: var(--da-muted) !important; margin-top: 10px !important; line-height: 1.5 !important; } .da-spl-content hr { border: none !important; border-top: 1px solid var(--da-border) !important; margin: 3em 0 !important; } .da-spl-content pre, .da-spl-content code { font-family: 'Courier New', Courier, monospace !important; font-size: 0.88rem !important; } .da-spl-content pre { background: #f0f4fa !important; border-radius: 10px !important; padding: 20px 24px !important; overflow-x: auto !important; margin-bottom: 1.8em !important; line-height: 1.6 !important; } .da-spl-content :not(pre) > code { background: #eef3fb !important; border-radius: 4px !important; padding: 2px 7px !important; color: var(--da-blue) !important; } /* Long URLs in post copy would otherwise force horizontal page scroll. */ .da-spl-content p, .da-spl-content li { overflow-wrap: break-word; } /* Embedded videos/iframes shouldn't overflow the card. */ .da-spl-content iframe, .da-spl-content video { max-width: 100% !important; border-radius: 12px !important; } /* ── Prev / Next navigation ── */ .da-spl-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 clamp(28px, 5vw, 56px) clamp(32px, 5vw, 56px); margin-top: 8px; } .da-spl-postnav-link { display: flex; flex-direction: column; border: 1px solid var(--da-border); border-radius: 16px; text-decoration: none; color: var(--da-text); background: var(--da-bg); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; min-width: 0; } /* The JS emitted this class but no rule existed for it. When there is no previous post, the next card now holds the right-hand column instead of needing an empty filler
. */ .da-spl-postnav-link.is-next { grid-column: 2; } @media (max-width: 600px) { .da-spl-postnav-link.is-next { grid-column: auto; } } .da-spl-postnav-link:hover { border-color: var(--da-blue); box-shadow: 0 8px 28px rgba(36,118,226,0.12); transform: translateY(-3px); } .da-spl-postnav-link:focus-visible { outline: 3px solid var(--da-blue); outline-offset: 3px; } .da-spl-postnav-thumb { width: 100%; height: 160px; object-fit: cover; display: block; flex-shrink: 0; background: var(--da-bg); } .da-spl-postnav-thumb-placeholder { width: 100%; height: 160px; flex-shrink: 0; background: linear-gradient(135deg, rgba(36,118,226,0.10), rgba(105,50,196,0.10)); display: flex; align-items: center; justify-content: center; } .da-spl-postnav-info { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; } .da-spl-postnav-dir { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--da-blue); } .da-spl-postnav-title { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--da-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 600px) { .da-spl-postnav { grid-template-columns: 1fr; } } /* ── Tags row ── */ .da-spl-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 clamp(28px, 5vw, 56px); padding-top: 40px; border-top: 1px solid var(--da-border); } .da-spl-tag { font-size: 12px; font-weight: 600; color: var(--da-muted); background: var(--da-bg); border: 1px solid var(--da-border); border-radius: 20px; padding: 6px 16px; text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; } .da-spl-tag:hover { color: var(--da-blue); border-color: var(--da-blue); background: rgba(36,118,226,0.06); } .da-spl-tag:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 2px; } /* ── Back link ── */ .da-spl-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--da-muted); text-decoration: none; margin-bottom: 20px; padding: 9px 16px 9px 12px; border: 1px solid var(--da-border); border-radius: 20px; background: transparent; transition: color 0.2s, border-color 0.2s; opacity: 0; animation: da-spl-fade 0.4s ease-out 0s forwards; } .da-spl-back:hover { color: var(--da-blue); border-color: var(--da-blue); } .da-spl-back:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 2px; } /* ── Error state ── (was an inline style attribute) */ .da-spl-error { color: var(--da-muted); font-size: 14px; text-align: center; padding: 40px 24px; } /* ── Skeleton ── Sizes were ten inline style attributes in the markup; they live here now. */ .da-spl-skeleton { padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px); } .da-spl-skel { border-radius: 6px; background: rgba(7,31,75,0.07); animation: da-spl-pulse 1.4s ease-in-out infinite; } .da-spl-skel--pill { width: 90px; height: 22px; border-radius: 20px; margin-bottom: 28px; } .da-spl-skel--h1 { width: 80%; height: 36px; margin-bottom: 10px; } .da-spl-skel--h2 { width: 55%; height: 36px; margin-bottom: 28px; } .da-spl-skel--btn { width: 200px; height: 44px; border-radius: 50px; margin-bottom: 32px; } .da-spl-skel--img { width: 100%; height: 320px; border-radius: 12px; margin-bottom: 36px; } .da-spl-skel--line { height: 14px; margin-bottom: 10px; } .da-spl-skel--w100 { width: 100%; } .da-spl-skel--w95 { width: 95%; } .da-spl-skel--w90 { width: 90%; } .da-spl-skel--w97 { width: 97%; } .da-spl-skel--w60 { width: 60%; margin-bottom: 0; } /* ── Animations ── */ @keyframes da-spl-up { to { opacity: 1; transform: translateY(0); } } @keyframes da-spl-fade { to { opacity: 1; } } @keyframes da-spl-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Reduced motion ── Load-bearing, not cosmetic: .da-spl-content and .da-spl-back both start at opacity 0 and are only revealed by their animation's `forwards` fill. Suppressing the animation without restoring opacity would leave the entire article body invisible. */ @media (prefers-reduced-motion: reduce) { .da-spl-content, .da-spl-back { animation: none; opacity: 1; transform: none; } .da-spl-skel { animation: none; } .da-spl-postnav-link { transition: none; } .da-spl-postnav-link:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b1ad76f *//* ============================================================ Digital Alberta — Single Post LEFT (Content) Fonts (Inter, Poppins) come from the site-wide tag. Do NOT add a font to this widget. NOTE ON !important: the .da-spl-content rules below keep theirs on purpose. They exist to beat Elementor/Hello theme defaults on WP-rendered post HTML, which is not under our control. Removing them is not safe without visually diffing real posts. ============================================================ */ #da-spl-root, #da-spl-root * { box-sizing: border-box; margin: 0; } #da-spl-root { --da-text: #0d0d1a; --da-muted: rgba(7,31,75,0.55); --da-border: rgba(7,31,75,0.10); --da-blue: #2476e2; --da-pink: #e70185; --da-bg: #f5f9ff; --da-card: #ffffff; width: 100%; font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--da-text); } /* ── Article shell ── height/min-height: 100% removed. In normal flow the parent has auto height, so a percentage height resolves against nothing and either no-ops or collapses the card. */ .da-spl-article { background: var(--da-card); border: 1px solid rgba(7,31,75,0.08); border-radius: 24px; box-shadow: 0 8px 48px rgba(7,31,75,0.10); overflow: hidden; } /* ── Post content typography ── */ .da-spl-content { padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px); opacity: 0; animation: da-spl-up 0.6s ease-out 0.2s forwards; } .da-spl-content > *:first-child { margin-top: 0 !important; } .da-spl-content p { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.025rem, 1.35vw, 1.125rem) !important; font-weight: 400 !important; line-height: 1.95 !important; color: var(--da-text) !important; margin: 0 0 1.8em 0 !important; padding: 0 !important; } .da-spl-content h1, .da-spl-content h2, .da-spl-content h3, .da-spl-content h4, .da-spl-content h5, .da-spl-content h6 { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; color: var(--da-text) !important; margin: 2.5em 0 0.8em 0 !important; padding: 0 !important; } .da-spl-content h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem) !important; } .da-spl-content h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem) !important; } .da-spl-content h4 { font-size: 1.15rem !important; } .da-spl-content a { color: var(--da-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: color 0.2s; } .da-spl-content a:hover { color: var(--da-pink) !important; } .da-spl-content ul, .da-spl-content ol { padding-left: 1.8em !important; margin: 0 0 1.8em 0 !important; } .da-spl-content li { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.025rem, 1.35vw, 1.125rem) !important; line-height: 1.85 !important; margin-bottom: 0.55em !important; color: var(--da-text) !important; } .da-spl-content blockquote { border-left: 4px solid var(--da-blue) !important; margin: 3em 0 !important; padding: 28px 36px !important; background: rgba(36,118,226,0.05) !important; border-radius: 0 14px 14px 0 !important; } .da-spl-content blockquote p { font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important; font-style: italic !important; font-weight: 500 !important; line-height: 1.75 !important; color: var(--da-text) !important; margin-bottom: 0 !important; } /* height:auto stops WP width/height attributes from squashing the aspect ratio once max-width kicks in on narrow screens. */ .da-spl-content img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; display: block !important; margin: 2em auto !important; } .da-spl-content figure { margin: 2em 0 !important; } .da-spl-content figcaption { font-size: 13px !important; text-align: center !important; color: var(--da-muted) !important; margin-top: 10px !important; line-height: 1.5 !important; } .da-spl-content hr { border: none !important; border-top: 1px solid var(--da-border) !important; margin: 3em 0 !important; } .da-spl-content pre, .da-spl-content code { font-family: 'Courier New', Courier, monospace !important; font-size: 0.88rem !important; } .da-spl-content pre { background: #f0f4fa !important; border-radius: 10px !important; padding: 20px 24px !important; overflow-x: auto !important; margin-bottom: 1.8em !important; line-height: 1.6 !important; } .da-spl-content :not(pre) > code { background: #eef3fb !important; border-radius: 4px !important; padding: 2px 7px !important; color: var(--da-blue) !important; } /* Long URLs in post copy would otherwise force horizontal page scroll. */ .da-spl-content p, .da-spl-content li { overflow-wrap: break-word; } /* Embedded videos/iframes shouldn't overflow the card. */ .da-spl-content iframe, .da-spl-content video { max-width: 100% !important; border-radius: 12px !important; } /* ── Prev / Next navigation ── */ .da-spl-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 clamp(28px, 5vw, 56px) clamp(32px, 5vw, 56px); margin-top: 8px; } .da-spl-postnav-link { display: flex; flex-direction: column; border: 1px solid var(--da-border); border-radius: 16px; text-decoration: none; color: var(--da-text); background: var(--da-bg); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; min-width: 0; } /* The JS emitted this class but no rule existed for it. When there is no previous post, the next card now holds the right-hand column instead of needing an empty filler
. */ .da-spl-postnav-link.is-next { grid-column: 2; } @media (max-width: 600px) { .da-spl-postnav-link.is-next { grid-column: auto; } } .da-spl-postnav-link:hover { border-color: var(--da-blue); box-shadow: 0 8px 28px rgba(36,118,226,0.12); transform: translateY(-3px); } .da-spl-postnav-link:focus-visible { outline: 3px solid var(--da-blue); outline-offset: 3px; } .da-spl-postnav-thumb { width: 100%; height: 160px; object-fit: cover; display: block; flex-shrink: 0; background: var(--da-bg); } .da-spl-postnav-thumb-placeholder { width: 100%; height: 160px; flex-shrink: 0; background: linear-gradient(135deg, rgba(36,118,226,0.10), rgba(105,50,196,0.10)); display: flex; align-items: center; justify-content: center; } .da-spl-postnav-info { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; } .da-spl-postnav-dir { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--da-blue); } .da-spl-postnav-title { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--da-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 600px) { .da-spl-postnav { grid-template-columns: 1fr; } } /* ── Tags row ── */ .da-spl-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 clamp(28px, 5vw, 56px); padding-top: 40px; border-top: 1px solid var(--da-border); } .da-spl-tag { font-size: 12px; font-weight: 600; color: var(--da-muted); background: var(--da-bg); border: 1px solid var(--da-border); border-radius: 20px; padding: 6px 16px; text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; } .da-spl-tag:hover { color: var(--da-blue); border-color: var(--da-blue); background: rgba(36,118,226,0.06); } .da-spl-tag:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 2px; } /* ── Back link ── */ .da-spl-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--da-muted); text-decoration: none; margin-bottom: 20px; padding: 9px 16px 9px 12px; border: 1px solid var(--da-border); border-radius: 20px; background: transparent; transition: color 0.2s, border-color 0.2s; opacity: 0; animation: da-spl-fade 0.4s ease-out 0s forwards; } .da-spl-back:hover { color: var(--da-blue); border-color: var(--da-blue); } .da-spl-back:focus-visible { outline: 2px solid var(--da-blue); outline-offset: 2px; } /* ── Error state ── (was an inline style attribute) */ .da-spl-error { color: var(--da-muted); font-size: 14px; text-align: center; padding: 40px 24px; } /* ── Skeleton ── Sizes were ten inline style attributes in the markup; they live here now. */ .da-spl-skeleton { padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px); } .da-spl-skel { border-radius: 6px; background: rgba(7,31,75,0.07); animation: da-spl-pulse 1.4s ease-in-out infinite; } .da-spl-skel--pill { width: 90px; height: 22px; border-radius: 20px; margin-bottom: 28px; } .da-spl-skel--h1 { width: 80%; height: 36px; margin-bottom: 10px; } .da-spl-skel--h2 { width: 55%; height: 36px; margin-bottom: 28px; } .da-spl-skel--btn { width: 200px; height: 44px; border-radius: 50px; margin-bottom: 32px; } .da-spl-skel--img { width: 100%; height: 320px; border-radius: 12px; margin-bottom: 36px; } .da-spl-skel--line { height: 14px; margin-bottom: 10px; } .da-spl-skel--w100 { width: 100%; } .da-spl-skel--w95 { width: 95%; } .da-spl-skel--w90 { width: 90%; } .da-spl-skel--w97 { width: 97%; } .da-spl-skel--w60 { width: 60%; margin-bottom: 0; } /* ── Animations ── */ @keyframes da-spl-up { to { opacity: 1; transform: translateY(0); } } @keyframes da-spl-fade { to { opacity: 1; } } @keyframes da-spl-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Reduced motion ── Load-bearing, not cosmetic: .da-spl-content and .da-spl-back both start at opacity 0 and are only revealed by their animation's `forwards` fill. Suppressing the animation without restoring opacity would leave the entire article body invisible. */ @media (prefers-reduced-motion: reduce) { .da-spl-content, .da-spl-back { animation: none; opacity: 1; transform: none; } .da-spl-skel { animation: none; } .da-spl-postnav-link { transition: none; } .da-spl-postnav-link:hover { transform: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-baf27a1 *//* ============================================================ 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-4162bf5 *//* ============================================================ 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 */