1296 lines
76 KiB
HTML
1296 lines
76 KiB
HTML
<!DOCTYPE html><!-- Last Published: Mon May 12 2025 05:05:09 GMT+0000 (Coordinated Universal Time) -->
|
||
<html data-wf-page="680a666174ef49844f7177b8" data-wf-site="680a666174ef49844f717753">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ABforAbortion | It's Your Choice.</title>
|
||
<meta content="Volunteer-led, community-funded. This campaign is a love letter to all Albertans, because everyone deserves the freedom to choose." name="description">
|
||
<meta content="ABforAbortion | It's Your Choice." property="og:title">
|
||
<meta content="Volunteer-led, community-funded. This campaign is a love letter to all Albertans, because everyone deserves the freedom to choose." property="og:description">
|
||
<meta content="https://cdn.prod.website-files.com/680a666174ef49844f717753/681bdb4eee5e0d3bb71023d6_AB4A_URLPreview.png" property="og:image">
|
||
<meta content="ABforAbortion | It's Your Choice." property="twitter:title">
|
||
<meta content="Volunteer-led, community-funded. This campaign is a love letter to all Albertans, because everyone deserves the freedom to choose." property="twitter:description">
|
||
<meta property="og:type" content="website">
|
||
<meta content="summary_large_image" name="twitter:card">
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<link href="css/normalize.css" rel="stylesheet" type="text/css">
|
||
<link href="css/webflow.css" rel="stylesheet" type="text/css">
|
||
<link href="css/ab-for-abortion-39af11.webflow.css" rel="stylesheet" type="text/css">
|
||
<link href="https://fonts.googleapis.com" rel="preconnect">
|
||
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
|
||
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
|
||
<script type="text/javascript">WebFont.load({ google: { families: ["Inter:300,regular,500,600,300italic,italic,500italic","Inter Tight:300,regular,500,300italic,italic,500italic","Inter:700,700italic"] }});</script>
|
||
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
|
||
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
|
||
<link href="images/webclip.png" rel="apple-touch-icon"><!-- Keep this css code to improve the font quality -->
|
||
<style>
|
||
* {
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
-o-font-smoothing: antialiased;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page-wrapper">
|
||
<div class="global-styles">
|
||
<div class="custom-css w-embed">
|
||
<style>
|
||
/* One Page Nav */
|
||
.progress-nav__indicator {
|
||
transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.progress-nav__btn-text {
|
||
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||
transform: translateY(0%) rotate(0.001deg);
|
||
}
|
||
.progress-nav__btn:hover .progress-nav__btn-text,
|
||
.progress-nav__contact-btn:hover .progress-nav__btn-text{
|
||
transform: translateY(-100%) rotate(0.001deg);
|
||
}
|
||
/* Clamps size of hero flowers */
|
||
.hero_img-bottom-left {
|
||
size: clamp(3.25rem, 7.5vw, 10rem);
|
||
}
|
||
/* Clamps size of hero flowers */
|
||
.hero_img-bottom-right {
|
||
size: clamp(3.25rem, 7.5vw, 10rem);
|
||
}
|
||
/* CSS Keyframe Animation */
|
||
@keyframes translateX {
|
||
to {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
[data-css-marquee-list] {
|
||
animation: translateX 30s linear;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
/* Filter Button */
|
||
.filter-btn {
|
||
transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
|
||
}
|
||
.filter-btn[data-filter-status="active"] {
|
||
background-color: #131313;
|
||
color: #EFEEEC;
|
||
}
|
||
/* Filter List Item */
|
||
.filter-list__item[data-filter-status="active"] {
|
||
transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
|
||
transform: scale(1) rotate(0.001deg);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
position: relative;
|
||
}
|
||
.filter-list__item[data-filter-status="transition-out"] {
|
||
transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
|
||
transform: scale(0.9) rotate(0.001deg);
|
||
opacity: 0;
|
||
visibility: visible;
|
||
}
|
||
.filter-list__item[data-filter-status="not-active"] {
|
||
transform: scale(0.9) rotate(0.001deg);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
position: absolute;
|
||
}
|
||
</style>
|
||
</div>
|
||
<div class="style-overrides w-embed">
|
||
<style>
|
||
/* Ensure all elements inherit the color from its parent */
|
||
a,
|
||
.w-input,
|
||
.w-select,
|
||
.w-tab-link,
|
||
.w-nav-link,
|
||
.w-nav-brand,
|
||
.w-dropdown-btn,
|
||
.w-dropdown-toggle,
|
||
.w-slider-arrow-left,
|
||
.w-slider-arrow-right,
|
||
.w-dropdown-link {
|
||
color: inherit;
|
||
text-decoration: inherit;
|
||
font-size: inherit;
|
||
}
|
||
/* Focus state style for keyboard navigation for the focusable elements */
|
||
*[tabindex]:focus-visible,
|
||
input[type="file"]:focus-visible {
|
||
outline: 0.125rem solid #4d65ff;
|
||
outline-offset: 0.125rem;
|
||
}
|
||
/* Get rid of top margin on first element in any rich text element */
|
||
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
|
||
margin-top: 0 !important;
|
||
}
|
||
/* Get rid of bottom margin on last element in any rich text element */
|
||
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
/* Prevent all click and hover interaction with an element */
|
||
.pointer-events-off {
|
||
pointer-events: none;
|
||
}
|
||
/* Enables all click and hover interaction with an element */
|
||
.pointer-events-on {
|
||
pointer-events: auto;
|
||
}
|
||
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
|
||
.div-square::after {
|
||
content: "";
|
||
display: block;
|
||
padding-bottom: 100%;
|
||
}
|
||
/* Make sure containers never lose their center alignment */
|
||
.container-medium,.container-small, .container-large {
|
||
margin-right: auto !important;
|
||
margin-left: auto !important;
|
||
}
|
||
/* Apply "..." after 3 lines of text */
|
||
.text-style-3lines {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
/* Apply "..." after 2 lines of text */
|
||
.text-style-2lines {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
/* Adds inline flex display */
|
||
.display-inlineflex {
|
||
display: inline-flex;
|
||
}
|
||
/* These classes are never overwritten */
|
||
.hide {
|
||
display: none !important;
|
||
}
|
||
/* Remove default Webflow chevron from form select */
|
||
select{
|
||
-webkit-appearance:none;
|
||
}
|
||
@media screen and (max-width: 991px) {
|
||
.hide, .hide-tablet {
|
||
display: none !important;
|
||
}
|
||
}
|
||
@media screen and (max-width: 767px) {
|
||
.hide-mobile-landscape{
|
||
display: none !important;
|
||
}
|
||
}
|
||
@media screen and (max-width: 479px) {
|
||
.hide-mobile{
|
||
display: none !important;
|
||
}
|
||
}
|
||
.margin-0 {
|
||
margin: 0rem !important;
|
||
}
|
||
.padding-0 {
|
||
padding: 0rem !important;
|
||
}
|
||
.spacing-clean {
|
||
padding: 0rem !important;
|
||
margin: 0rem !important;
|
||
}
|
||
.margin-top {
|
||
margin-right: 0rem !important;
|
||
margin-bottom: 0rem !important;
|
||
margin-left: 0rem !important;
|
||
}
|
||
.padding-top {
|
||
padding-right: 0rem !important;
|
||
padding-bottom: 0rem !important;
|
||
padding-left: 0rem !important;
|
||
}
|
||
.margin-right {
|
||
margin-top: 0rem !important;
|
||
margin-bottom: 0rem !important;
|
||
margin-left: 0rem !important;
|
||
}
|
||
.padding-right {
|
||
padding-top: 0rem !important;
|
||
padding-bottom: 0rem !important;
|
||
padding-left: 0rem !important;
|
||
}
|
||
.margin-bottom {
|
||
margin-top: 0rem !important;
|
||
margin-right: 0rem !important;
|
||
margin-left: 0rem !important;
|
||
}
|
||
.padding-bottom {
|
||
padding-top: 0rem !important;
|
||
padding-right: 0rem !important;
|
||
padding-left: 0rem !important;
|
||
}
|
||
.margin-left {
|
||
margin-top: 0rem !important;
|
||
margin-right: 0rem !important;
|
||
margin-bottom: 0rem !important;
|
||
}
|
||
.padding-left {
|
||
padding-top: 0rem !important;
|
||
padding-right: 0rem !important;
|
||
padding-bottom: 0rem !important;
|
||
}
|
||
.margin-horizontal {
|
||
margin-top: 0rem !important;
|
||
margin-bottom: 0rem !important;
|
||
}
|
||
.padding-horizontal {
|
||
padding-top: 0rem !important;
|
||
padding-bottom: 0rem !important;
|
||
}
|
||
.margin-vertical {
|
||
margin-right: 0rem !important;
|
||
margin-left: 0rem !important;
|
||
}
|
||
.padding-vertical {
|
||
padding-right: 0rem !important;
|
||
padding-left: 0rem !important;
|
||
}
|
||
/* Apply "..." at 100% width */
|
||
.truncate-width {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
/* Removes native scrollbar */
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
overflow: -moz-scrollbars-none;
|
||
}
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</div>
|
||
<div class="fonts w-embed">
|
||
<style>@import url('https://fonts.googleapis.com/css?family=Inter:400')</style>
|
||
<style>@import url('https://fonts.googleapis.com/css?family=Inter:400,500')</style>
|
||
</div>
|
||
<div class="color-schemes w-embed">
|
||
<style>
|
||
.color-scheme-1 {}
|
||
.color-scheme-2 {
|
||
--color-scheme-1--text: var(--color-scheme-2--text);
|
||
--color-scheme-1--background: var(--color-scheme-2--background);
|
||
--color-scheme-1--foreground: var(--color-scheme-2--foreground);
|
||
--color-scheme-1--border: var(--color-scheme-2--border);
|
||
--color-scheme-1--accent: var(--color-scheme-2--accent);
|
||
}
|
||
.color-scheme-3 {
|
||
--color-scheme-1--text: var(--color-scheme-3--text);
|
||
--color-scheme-1--background: var(--color-scheme-3--background);
|
||
--color-scheme-1--foreground: var(--color-scheme-3--foreground);
|
||
--color-scheme-1--border: var(--color-scheme-3--border);
|
||
--color-scheme-1--accent: var(--color-scheme-3--accent);
|
||
}
|
||
.color-scheme-4 {
|
||
--color-scheme-1--text: var(--color-scheme-4--text);
|
||
--color-scheme-1--background: var(--color-scheme-4--background);
|
||
--color-scheme-1--foreground: var(--color-scheme-4--foreground);
|
||
--color-scheme-1--border: var(--color-scheme-4--border);
|
||
--color-scheme-1--accent: var(--color-scheme-4--accent);
|
||
}
|
||
.color-scheme-5 {
|
||
--color-scheme-1--text: var(--color-scheme-5--text);
|
||
--color-scheme-1--background: var(--color-scheme-5--background);
|
||
--color-scheme-1--foreground: var(--color-scheme-5--foreground);
|
||
--color-scheme-1--border: var(--color-scheme-5--border);
|
||
--color-scheme-1--accent: var(--color-scheme-5--accent);
|
||
}
|
||
.w-slider-dot {
|
||
background-color: var(--color-scheme-1--text);
|
||
opacity: 0.20;
|
||
}
|
||
.w-slider-dot.w-active {
|
||
background-color: var(--color-scheme-1--text);
|
||
opacity: 1;
|
||
}
|
||
/* Override .w-slider-nav-invert styles */
|
||
.w-slider-nav-invert .w-slider-dot {
|
||
background-color: var(--color-scheme-1--text) !important;
|
||
opacity: 0.20 !important;
|
||
}
|
||
.w-slider-nav-invert .w-slider-dot.w-active {
|
||
background-color: var(--color-scheme-1--text) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
</style>
|
||
</div>
|
||
</div>
|
||
<main class="main-wrapper">
|
||
<div class="resource-group">
|
||
<nav class="progress-nav">
|
||
<div class="progress-nav__inner">
|
||
<a href="#top" class="progress-nav__logo w-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="250" height="42" viewbox="0 0 250 42" fill="none" class="progress-nav__logo-svg">
|
||
<path d="M6.19.86h11.56l5.44,40.28h-8.42l-.84-8.08h-4.21l-.79,8.08H.8L6.19.86ZM11.07,19.43l-.67,6.73h2.86l-.67-6.73-.73-7.57h-.11l-.67,7.57Z" fill="currentColor"></path>
|
||
<path d="M24.81,41.14V.86h11c3.14,0,5.5.73,7.07,2.13,1.57,1.46,2.36,3.59,2.36,6.45v5.16c0,1.4-.34,2.64-.95,3.7-.67,1.07-1.57,1.85-2.75,2.24,1.23.5,2.19,1.29,2.92,2.36.73,1.07,1.07,2.3,1.07,3.65v6c0,2.86-.79,4.99-2.36,6.39-1.57,1.46-3.93,2.19-7.07,2.19h-11.28ZM36.7,10.29c0-.73-.17-1.23-.45-1.63s-.73-.56-1.29-.56h-1.63v8.75h1.63c.56,0,1.01-.17,1.29-.56.28-.39.45-.9.45-1.63v-4.38ZM36.93,26.33c0-.79-.17-1.4-.5-1.8-.34-.39-.84-.56-1.51-.56h-1.57v9.93h1.8c.62,0,1.07-.17,1.35-.56.28-.39.45-.9.45-1.63v-5.39Z" fill="currentColor"></path>
|
||
<path d="M54.27.86h1.57v4.15h-.67c-1.4,0-2.08.67-2.08,1.96v3.53h2.75v4.15h-2.75v26.48h-4.6V14.66h-1.85v-4.15h1.85v-4.21c0-3.65,2.47-5.44,5.78-5.44Z" fill="currentColor"></path>
|
||
<path d="M63.88,10.06c3.59,0,6.17,2.19,6.17,5.95v19.63c0,3.76-2.58,5.95-6.17,5.95s-6.17-2.19-6.17-5.95v-19.63c0-3.76,2.58-5.95,6.17-5.95ZM62.31,16.68v18.29c0,1.63.56,2.36,1.57,2.36s1.57-.73,1.57-2.36v-18.29c0-1.63-.56-2.36-1.57-2.36s-1.57.73-1.57,2.36Z" fill="currentColor"></path>
|
||
<path d="M80.39,15.05c-1.85,0-3.09.79-3.09,2.41v23.67h-4.6V10.51h4.6v2.02c.56-1.23,2.02-2.24,3.42-2.24.5,0,.9.06,1.23.17v4.66c-.73-.06-1.01-.06-1.57-.06Z" fill="currentColor"></path>
|
||
<path d="M86.91.86h11.56l5.44,40.28h-8.42l-.84-8.08h-4.21l-.79,8.08h-8.13L86.91.86ZM91.79,19.43l-.67,6.73h2.86l-.67-6.73-.73-7.57h-.11l-.67,7.57Z" fill="currentColor"></path>
|
||
<path d="M105.53,41.14V.86h11c3.14,0,5.5.73,7.07,2.13,1.57,1.46,2.36,3.59,2.36,6.45v5.16c0,1.4-.34,2.64-.95,3.7-.67,1.07-1.57,1.85-2.75,2.24,1.23.5,2.19,1.29,2.92,2.36.73,1.07,1.07,2.3,1.07,3.65v6c0,2.86-.79,4.99-2.36,6.39-1.57,1.46-3.93,2.19-7.07,2.19h-11.28ZM117.42,10.29c0-.73-.17-1.23-.45-1.63-.28-.39-.73-.56-1.29-.56h-1.63v8.75h1.63c.56,0,1.01-.17,1.29-.56.28-.39.45-.9.45-1.63v-4.38ZM117.65,26.33c0-.79-.17-1.4-.5-1.8-.34-.39-.84-.56-1.51-.56h-1.57v9.93h1.8c.62,0,1.07-.17,1.35-.56.28-.39.45-.9.45-1.63v-5.39Z" fill="currentColor"></path>
|
||
<path d="M145.98,2.94c1.85,1.74,2.81,3.98,2.81,6.79v22.55c0,2.8-.95,5.05-2.81,6.73-1.91,1.74-4.43,2.58-7.57,2.58s-5.67-.84-7.52-2.58c-1.91-1.68-2.86-3.93-2.86-6.73V9.72c0-2.8.95-5.05,2.86-6.79,1.85-1.68,4.38-2.52,7.52-2.52s5.67.84,7.57,2.52ZM137.12,8.27c-.34.39-.5.95-.5,1.68v22.1c0,.73.17,1.29.5,1.68.28.39.73.62,1.29.62s1.01-.22,1.29-.62c.28-.39.45-.95.45-1.68V9.95c0-.73-.17-1.35-.45-1.74-.28-.39-.73-.56-1.29-.56s-1.01.22-1.29.62Z" fill="currentColor"></path>
|
||
<path d="M159.48,24.87v16.27h-8.58V.86h11.33c3.14,0,5.5.73,7.07,2.13,1.57,1.46,2.36,3.59,2.36,6.45v5.67c0,1.4-.34,2.64-.95,3.7-.67,1.07-1.57,1.85-2.75,2.24,1.18.45,2.08,1.18,2.69,2.19.62,1.07.9,2.3.9,3.81v8.7c0,1.29.06,2.41.17,3.25.06.84.22,1.57.45,2.13h-8.58c-.22-.5-.39-1.18-.45-2.02-.11-.84-.17-1.85-.17-3.09v-8.81c0-.79-.17-1.4-.5-1.8-.34-.39-.84-.56-1.46-.56h-1.51ZM163.01,10.45c0-.67-.17-1.23-.45-1.63s-.73-.56-1.29-.56h-1.8v9.2h1.8c.56,0,1.01-.17,1.29-.56.28-.39.45-.9.45-1.63v-4.82Z" fill="currentColor"></path>
|
||
<path d="M193.16,8.55h-5.61v32.59h-8.64V8.55h-5.61V.86h19.86v7.69Z" fill="currentColor"></path>
|
||
<path d="M203.66.86v40.28h-8.7V.86h8.7Z" fill="currentColor"></path>
|
||
<path d="M223.7,2.94c1.85,1.74,2.81,3.98,2.81,6.79v22.55c0,2.8-.95,5.05-2.81,6.73-1.91,1.74-4.43,2.58-7.57,2.58s-5.67-.84-7.52-2.58c-1.91-1.68-2.86-3.93-2.86-6.73V9.72c0-2.8.95-5.05,2.86-6.79,1.85-1.68,4.38-2.52,7.52-2.52s5.67.84,7.57,2.52ZM214.84,8.27c-.34.39-.5.95-.5,1.68v22.1c0,.73.17,1.29.5,1.68.28.39.73.62,1.29.62s1.01-.22,1.29-.62c.28-.39.45-.95.45-1.68V9.95c0-.73-.17-1.35-.45-1.74-.28-.39-.73-.56-1.29-.56s-1.01.22-1.29.62Z" fill="currentColor"></path>
|
||
<path d="M236.41,19.43h-.11l.11,8.25v13.46h-7.8V.86h8.36l4.43,19.18h.11l-.11-8.58V.86h7.8v40.28h-7.35l-5.44-21.71Z" fill="currentColor"></path>
|
||
</svg></a>
|
||
<div class="progress-nav__wrapper hide-mobile-landscape">
|
||
<div data-progress-nav-list="" class="progress-nav__list">
|
||
<div class="progress-nav__indicator"></div>
|
||
<div data-progress-nav-target="#top" class="progress-nav__btn is--before"></div>
|
||
<a data-progress-nav-target="#story" href="#story" class="progress-nav__btn w-inline-block"><span class="progress-nav__btn-text">Our Story</span><span class="progress-nav__btn-text is--duplicate">Our Story</span></a>
|
||
<a data-progress-nav-target="#billboard" href="#billboard" class="progress-nav__btn w-inline-block"><span class="progress-nav__btn-text">Billboard</span><span class="progress-nav__btn-text is--duplicate">Billboard</span></a>
|
||
<a data-progress-nav-target="#facts" href="#facts" class="progress-nav__btn w-inline-block"><span class="progress-nav__btn-text">The Facts</span><span class="progress-nav__btn-text is--duplicate">The Facts</span></a>
|
||
<a data-progress-nav-target="#resources" href="#resources" class="progress-nav__btn w-inline-block"><span class="progress-nav__btn-text">Resources</span><span class="progress-nav__btn-text is--duplicate">Resources</span></a>
|
||
<a data-progress-nav-target="#share" href="#share" class="progress-nav__btn hide w-inline-block"><span class="progress-nav__btn-text">Share</span><span class="progress-nav__btn-text is--duplicate">Share</span></a>
|
||
<div data-progress-nav-target="#bottom" class="progress-nav__btn is--after"></div>
|
||
</div>
|
||
</div>
|
||
<div class="cta_btn-wrapper">
|
||
<a href="https://www.gofundme.com/f/help-us-get-a-prochoice-billboard-up-in-alberta" target="_blank" class="progress-nav__contact-btn donate w-inline-block"><span class="progress-nav__btn-text">Donate</span><span class="progress-nav__btn-text is--duplicate">Donate</span></a>
|
||
<a href="https://www.theweathernetwork.com/en/city/ca/alberta/edmonton/current" class="progress-nav__contact-btn w-inline-block"><span class="progress-nav__btn-text">Quick exit</span><span class="progress-nav__btn-text is--duplicate">Quick exit</span></a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<header id="story" data-progress-nav-anchor="" data-w-id="ee8ba09f-17c4-42a8-33e3-889ac181efd9" class="section_hero text-color-white">
|
||
<div class="hero_floral-section">
|
||
<div class="floral-section_container"><img src="images/AB4A-Hero_AB-foliage-symmetrical_1.avif" loading="lazy" sizes="(max-width: 2832px) 100vw, 2832px" srcset="images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 500w, images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 800w, images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 1080w, images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 1600w, images/AB4A-Hero_AB-foliage-symmetrical_1.avif 2832w" alt="" class="hero_img-top"><img src="images/AB4A_flower-bottom-right_1.avif" loading="lazy" sizes="100vw" srcset="images/AB4A_flower-bottom-right_1AB4A_flower-bottom-right.avif 500w, images/AB4A_flower-bottom-right_1AB4A_flower-bottom-right.avif 800w, images/AB4A_flower-bottom-right_1AB4A_flower-bottom-right.avif 1080w, images/AB4A_flower-bottom-right_1.avif 2335w" alt="" class="hero_img-bottom-right hide"></div>
|
||
</div>
|
||
<div class="padding-global">
|
||
<div class="container-large">
|
||
<div class="hero_content">
|
||
<div class="padding-section-large">
|
||
<div class="text-align-center">
|
||
<div class="max-width-large align-center">
|
||
<h1 class="heading-style-h1">Abortion is <span class="text-color-pink">your</span> choice</h1>
|
||
</div>
|
||
<div class="spacer-xhuge"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero_content intro-card">
|
||
<div class="hero_content_card color-scheme-1">
|
||
<div class="padding-section-large">
|
||
<div class="spacer-huge"></div>
|
||
<div class="text-align-center">
|
||
<div class="max-width-large align-center">
|
||
<div class="margin-bottom margin-small">
|
||
<h2 class="heading-style-h2">This land grows wild, not silent.</h2>
|
||
</div>
|
||
<p class="text-size-large">Albertans — the choice to have an abortion is yours. It’s your right to decide about your body, your future, and your care. No permission. No apologies.</p>
|
||
<div class="margin-top margin-medium">
|
||
<div class="button-group is-center">
|
||
<a href="#facts" class="button is-tertiary w-button">Know the facts</a>
|
||
<a href="#resources" class="button is-link is-icon w-inline-block">
|
||
<div>Find resources</div>
|
||
<div class="icon-embed-xxsmall w-embed"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 3L11 8L6 13" stroke="CurrentColor" stroke-width="1.5"></path>
|
||
</svg></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spacer-huge"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spacer-xxhuge"></div>
|
||
</div>
|
||
</div><img src="images/AB4A_flower-bottom-left_1.avif" loading="lazy" sizes="(max-width: 2335px) 100vw, 2335px" srcset="images/AB4A_flower-bottom-left_1AB4A_flower-bottom-left.avif 500w, images/AB4A_flower-bottom-left_1AB4A_flower-bottom-left.avif 800w, images/AB4A_flower-bottom-left_1AB4A_flower-bottom-left.avif 1080w, images/AB4A_flower-bottom-left_1.avif 2335w" alt="" class="hero_img-flower"><img src="images/AB4A_flower-bottom-right_1.avif" loading="lazy" sizes="(max-width: 2335px) 100vw, 2335px" srcset="images/AB4A_flower-bottom-right_1AB4A_flower-bottom-right.avif 500w, images/AB4A_flower-bottom-right_1AB4A_flower-bottom-right.avif 800w, images/AB4A_flower-bottom-right_1AB4A_flower-bottom-right.avif 1080w, images/AB4A_flower-bottom-right_1.avif 2335w" alt="" class="hero_img-flower right">
|
||
</header>
|
||
<a data-css-marquee="" href="https://www.gofundme.com/f/help-us-get-a-prochoice-billboard-up-in-alberta" target="_blank" class="marquee-css hide-tablet w-inline-block">
|
||
<div data-css-marquee-list="" class="marquee-css__list">
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
</div>
|
||
<div data-css-marquee-list="" class="marquee-css__list is--duplicate">
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="https://www.gofundme.com/f/help-us-get-a-prochoice-billboard-up-in-alberta" target="_blank" class="donation_tablet hide-desktop w-inline-block">
|
||
<div class="donation_list">
|
||
<div class="donation_item">
|
||
<p class="donation_item-text">🌸 $35 a day keeps the billboard blooming <span>🌸 Donate here 🌸</span></p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<section id="billboard" data-progress-nav-anchor="" class="section_billboard color-scheme-4">
|
||
<div class="padding-global">
|
||
<div class="container-large">
|
||
<div class="padding-section-large">
|
||
<div class="cta39_component">
|
||
<div class="w-layout-grid cta39_card">
|
||
<div class="cta39_card-content">
|
||
<div class="cta39_card-content-top">
|
||
<div class="margin-bottom margin-small">
|
||
<h2 class="heading-style-h2">A Rose Grows on the QEII</h2>
|
||
</div>
|
||
<p class="text-size-medium">Highway 2 <em>(also known as the Queen Elizabeth II Highway)</em> has echoed with the same tired message for years. Anti-choice billboards have lined this stretch of land, fueling stigma, shame and disinformation.</p>
|
||
<p class="text-size-medium">But today, the message is changing.</p>
|
||
<p class="text-size-medium">Thanks to local fundraising and community support, Alberta now has its first-ever pro-choice billboard on this route. This is a bold, public sign of care, resistance and truth.<br></p>
|
||
<p class="text-size-medium">The billboard is just the beginning. With your help, we can continue to spread the message and grow the campaign.</p>
|
||
</div>
|
||
<div class="margin-top margin-xsmall">
|
||
<div class="button-group">
|
||
<a href="https://www.gofundme.com/f/help-us-get-a-prochoice-billboard-up-in-alberta" target="_blank" class="button is-tertiary w-button">Donate Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cta39_image-wrapper"><img sizes="(max-width: 1000px) 100vw, 1000px" srcset="images/QE2-Aerial_1QE2-Aerial.avif 500w, images/QE2-Aerial_1.avif 1000w" alt="" src="images/QE2-Aerial_1.avif" loading="eager" class="cta39_image"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="facts" data-progress-nav-anchor="" class="section_facts color-scheme-1">
|
||
<div class="padding-global">
|
||
<div class="container-large">
|
||
<div class="padding-section-large">
|
||
<div class="layout396_component">
|
||
<div class="margin-bottom margin-xxlarge">
|
||
<div class="text-align-center">
|
||
<div class="align-center">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<div class="text-style-tagline text-size-large">Through the thorns, truth blooms</div>
|
||
</div>
|
||
<h2 class="heading-style-h2">Understanding abortion in Canada</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-layout-grid layout396_grid-list">
|
||
<div id="w-node-ee8ba09f-17c4-42a8-33e3-889ac181f026-4f7177b8" class="w-layout-grid layout396_row">
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">Abortion is part of our public health care system.</h3>
|
||
</div>
|
||
<p>Abortion is a legal, publicly funded healthcare service in Canada. While access may vary by province, you have the right to safe and accessible care.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.abortionaccesstracker.ca/" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">Abortion is a safe medical procedure.</h3>
|
||
</div>
|
||
<p>Abortion is rooted in science and proven safe with fewer risks than wisdom tooth removal or childbirth. There is no evidence that abortion causes cancer, infertility, or any long-term health issues.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://sogc.org/en/en/content/events/HUB-Pages/Abortion.aspx" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">You’re not alone if you choose abortion.</h3>
|
||
</div>
|
||
<p>It’s estimated that 1 in 3 Canadians who can become pregnant will have an abortion in their lifetime. People of all ages, backgrounds, and life experiences may seek abortion care.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.arcc-cdac.ca/media/position-papers/52-Statistics-Demographics.pdf" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">Late-term abortion is rare.</h3>
|
||
</div>
|
||
<p>The majority of abortions occur within the first 12 weeks. In Alberta, abortions after 24 weeks are only allowed in extreme cases where there is a serious or fatal risk and involve additional medical approval.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.ctvnews.ca/calgary/article/misleading-late-term-abortion-claim-circulated-alberta-government-wont-comment/" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">Legal rights begin at birth.</h3>
|
||
</div>
|
||
<p>The Supreme Court of Canada affirms that a pregnant person and their fetus are considered one legal person. Under Canadian law, legal rights begin at birth.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.arcc-cdac.ca/media/position-papers/63-fetal-rights-in-canada.pdf" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">Get the facts, avoid the myths. </h3>
|
||
</div>
|
||
<p>Understanding the facts can help you avoid disinformation and organizations that seek to create fear, mislead, and shame abortion based on personal or religious beliefs.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.actioncanadashr.org/finding-pro-choice-pregnancy-supports" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">No-cost abortion pills in Alberta.</h3>
|
||
</div>
|
||
<p>In Alberta, Mifegymiso (the abortion pill) is available at no cost through Alberta Health Services. You can access it via your healthcare provider, virtual abortion clinics, or select clinics in Edmonton and Calgary.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.shorecentre.ca/wp-content/uploads/NEW-Mifegymiso-Information-Brochure-min.pdf" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">Help navigating barriers to care.</h3>
|
||
</div>
|
||
<p>While Alberta Health covers abortion care, many people still face barriers, like limited provider availability, the cost of travel, stigma, and a lack of culturally relevant support.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://abortioncarecanada.ca/" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Get support</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_05683da2-fd6e-24ec-ea61-ba8ddccb8ee9-dccb8ee9" class="layout396_card">
|
||
<div class="layout396_card-content">
|
||
<div class="layout396_card-content-top">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h3 class="heading-style-h4">It’s your choice.</h3>
|
||
</div>
|
||
<p>You don’t need a reason, permission, or apology. Your body, your choice—that's freedom. Decisions about pregnancy are personal and belong to the person who is pregnant.</p>
|
||
</div>
|
||
<div class="layout396_card-content-bottom margin-top margin-small">
|
||
<a href="https://www.pregnancyoptions.info/" target="_blank" class="button is-link underline w-inline-block">
|
||
<div>Learn more</div>
|
||
<div class="icon_embed-wrap hide">
|
||
<div class="icon-embed-xsmall w-embed"><svg width="currentWidth" height="currentHeight" id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="resources" data-progress-nav-anchor="" class="section_resources color-scheme-1">
|
||
<div class="padding-global padding-section-large">
|
||
<div class="container-large">
|
||
<div class="resources_component">
|
||
<div class="margin-bottom margin-small">
|
||
<div class="max-width-large">
|
||
<div class="margin-bottom margin-small">
|
||
<h2 class="heading-style-h2">Resources</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div role="group" data-filter-group="" class="filter-group">
|
||
<div class="filter-buttons">
|
||
<div class="filter-prompt">
|
||
<p class="text-size-large text-size-regular-tablet">I’m looking for:</p>
|
||
</div>
|
||
<div class="filter-buttons_wrapper"><button data-filter-target="all" data-filter-status="active" aria-pressed="true" aria-controls="filter-list" class="filter-btn">All Resources</button><button data-filter-target="Clinic" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Clinics</button><button data-filter-target="Hotline" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Hotlines</button><button data-filter-target="Education" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Education</button><button data-filter-target="Support" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Support</button></div>
|
||
</div>
|
||
<div class="filter-wrapper w-dyn-list">
|
||
<div aria-live="polite" role="list" class="filter-list w-dyn-items">
|
||
<div role="listitem" data-filter-name="" data-filter-status="active" id="w-node-_2a7f61a0-efb9-c8e0-f880-622d55a72842-4f7177b8" class="filter-list__item w-dyn-item">
|
||
<a data-w-id="abaa157a-e169-f568-b2b1-61f56d7b3def" href="#" class="item_link w-inline-block">
|
||
<div class="resources_item-content-top">
|
||
<div class="tag hotline">
|
||
<div class="w-dyn-bind-empty"></div>
|
||
</div>
|
||
</div>
|
||
<div class="resources_item-content">
|
||
<div class="heading-style-h5 w-dyn-bind-empty"></div>
|
||
<p class="w-dyn-bind-empty"></p>
|
||
</div>
|
||
<div class="resources_play-button">
|
||
<div class="icon-embed-medium w-embed"><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 80 80">
|
||
<defs>
|
||
<style>
|
||
.st0 {
|
||
fill: currentColor;
|
||
}
|
||
</style>
|
||
</defs>
|
||
<polygon class="st0" points="1.1 0 1.1 7.6 67 7.6 0 74.6 5.4 80 72.4 12.9 72.4 78.9 80 78.9 80 0 1.1 0">
|
||
</polygon></svg></div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="w-dyn-empty">
|
||
<div>No items found.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="spacer-medium"></div>
|
||
<div class="resources_submit">
|
||
<div class="contact1_component color-scheme-2 no-background">
|
||
<div class="submit_content">
|
||
<div class="margin-bottom margin-xsmall">
|
||
<h2 class="heading-style-h2">Let's keep the conversation blooming</h2>
|
||
</div>
|
||
<div class="margin-bottom margin-small">
|
||
<p>Join our mailing list.</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact1_form-block w-form">
|
||
<form id="wf-form-Mailing-List" name="wf-form-Mailing-List" data-name="Mailing List" method="get" class="contact1_form" data-wf-page-id="680a666174ef49844f7177b8" data-wf-element-id="ee8ba09f-17c4-42a8-33e3-889ac181f0e8">
|
||
<div class="form_field-wrapper"><label for="Name" class="form_field-label">Name</label><input class="form_input w-input" maxlength="256" name="Name" data-name="Name" placeholder="name" type="text" id="Name" required=""></div>
|
||
<div class="form_field-wrapper"><label for="Postal-Code" class="form_field-label">Postal Code</label><input class="form_input w-input" maxlength="256" name="Postal-Code" data-name="Postal Code" placeholder="T0A 0A0" type="text" id="Postal-Code" required=""></div>
|
||
<div id="w-node-ee8ba09f-17c4-42a8-33e3-889ac181f0ed-4f7177b8" class="form_field-wrapper"><label for="Email" class="form_field-label">Email</label><input class="form_input w-input" maxlength="256" name="Email" data-name="Email" placeholder="email address" type="email" id="Email" required=""></div><input type="submit" data-wait="Please wait..." id="w-node-ee8ba09f-17c4-42a8-33e3-889ac181f0fa-4f7177b8" class="button contact-btn w-button" value="Submit">
|
||
</form>
|
||
<div class="form_message-success-wrapper w-form-done">
|
||
<div class="form_message-success">
|
||
<div class="success-text">Thank you! Your resource has been submitted!</div>
|
||
</div>
|
||
</div>
|
||
<div class="form_message-error-wrapper w-form-fail">
|
||
<div class="form_message-error">
|
||
<div class="error-text">Oops! There was an error submitting your resource.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_11abc28b-e728-8c00-3509-b4cab814eb3a-4f7177b8" class="contact1_component color-scheme-3 nah">
|
||
<div class="nah_content">
|
||
<h2 class="heading-style-h2">National Abortion Hotline</h2>
|
||
<p>The National Abortion Hotline is the largest national, toll-free, multi-lingual Hotline for abortion provider information and financial assistance in the U.S. and Canada.</p>
|
||
<div class="nah_hotline-wrap">
|
||
<h2>1-800-772-9100</h2>
|
||
</div>
|
||
<div class="component_hours-wrapper">
|
||
<div class="hours_column">
|
||
<div class="text-weight-semibold">Monday–Friday</div>
|
||
<div>8AM – 7PM ET</div>
|
||
</div>
|
||
<div class="hours_column">
|
||
<div class="text-weight-semibold">Saturday & Sunday</div>
|
||
<div>8AM – 4PM ET</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<header id="share" data-progress-nav-anchor="" class="section_share">
|
||
<section data-sticky-title="wrap" class="sticky-title-wrapper">
|
||
<div class="sticky-title-container">
|
||
<div class="sticky-title-inner">
|
||
<h1 data-sticky-title="heading" class="sticky-title-el">Alberta,<br>Wild Roses are pink<br>and blooming is brave.</h1>
|
||
<h1 data-sticky-title="heading" class="sticky-title-el is--stacked">We're pushing through silence,<br>So choice can be safe.</h1>
|
||
</div>
|
||
</div>
|
||
<div class="spacer-xhuge"></div><img src="images/AB4A-Hero_AB-foliage-symmetrical_1.avif" loading="lazy" sizes="(max-width: 2832px) 100vw, 2832px" srcset="images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 500w, images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 800w, images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 1080w, images/AB4A-Hero_AB-foliage-symmetrical_1AB4A-Hero_AB-foliage-symmetrical.avif 1600w, images/AB4A-Hero_AB-foliage-symmetrical_1.avif 2832w" alt="" class="footer_img-sticky">
|
||
</section>
|
||
<div class="share_download hide">
|
||
<div class="padding-global padding-section-large">
|
||
<div class="download_container hide">
|
||
<div class="container-large">
|
||
<div class="padding-section-large">
|
||
<div class="max-width-large align-center">
|
||
<div class="text-align-center">
|
||
<div class="align-center">
|
||
<h2 class="heading-style-h2">Put Your Truth Into Verse</h2>
|
||
<div class="spacer-medium"></div>
|
||
<p class="text-size-large">Roses are more than sweet — they’re sharp, wild, and deeply rooted. Just like us. You’ve heard the poem. Now it’s your turn.</p>
|
||
<p class="text-size-large">Download our ready-to-share graphics, or create your own four-line poem using our template.</p>
|
||
<div class="spacer-large"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="download_card-wrap">
|
||
<div id="w-node-bae4bfdc-2d83-87a1-43ad-fe62fc69631c-fc69631c" class="share_card">
|
||
<div class="download_card-content">
|
||
<div class="card-content_img-wrap"><img src="images/Placeholder-Image.png" loading="lazy" alt="" class="card-content_img"></div>
|
||
<div class="share_card-content-bottom">
|
||
<p class="heading-style-h6">Description</p>
|
||
<a href="#" class="button is-outline w-inline-block">
|
||
<div class="text-size-small text-style-allcaps">Download</div>
|
||
<div class="icon-embed-xsmall w-embed"><svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 11.5L12 17.5L18 11.5" stroke="black" stroke-miterlimit="10"></path>
|
||
<path d="M12 17.5V2.5" stroke="black" stroke-miterlimit="10"></path>
|
||
<path d="M3 21H21" stroke="black" stroke-miterlimit="10"></path>
|
||
</svg></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-bae4bfdc-2d83-87a1-43ad-fe62fc69631c-fc69631c" class="share_card">
|
||
<div class="download_card-content">
|
||
<div class="card-content_img-wrap"><img src="images/Placeholder-Image.png" loading="lazy" alt="" class="card-content_img"></div>
|
||
<div class="share_card-content-bottom">
|
||
<p class="heading-style-h6">Description</p>
|
||
<a href="#" class="button is-outline w-inline-block">
|
||
<div class="text-size-small text-style-allcaps">Download</div>
|
||
<div class="icon-embed-xsmall w-embed"><svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 11.5L12 17.5L18 11.5" stroke="black" stroke-miterlimit="10"></path>
|
||
<path d="M12 17.5V2.5" stroke="black" stroke-miterlimit="10"></path>
|
||
<path d="M3 21H21" stroke="black" stroke-miterlimit="10"></path>
|
||
</svg></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-bae4bfdc-2d83-87a1-43ad-fe62fc69631c-fc69631c" class="share_card">
|
||
<div class="download_card-content">
|
||
<div class="card-content_img-wrap"><img src="images/Placeholder-Image.png" loading="lazy" alt="" class="card-content_img"></div>
|
||
<div class="share_card-content-bottom">
|
||
<p class="heading-style-h6">Description</p>
|
||
<a href="#" class="button is-outline w-inline-block">
|
||
<div class="text-size-small text-style-allcaps">Download</div>
|
||
<div class="icon-embed-xsmall w-embed"><svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 11.5L12 17.5L18 11.5" stroke="black" stroke-miterlimit="10"></path>
|
||
<path d="M12 17.5V2.5" stroke="black" stroke-miterlimit="10"></path>
|
||
<path d="M3 21H21" stroke="black" stroke-miterlimit="10"></path>
|
||
</svg></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<a data-css-marquee="" href="https://www.gofundme.com/f/help-us-get-a-prochoice-billboard-up-in-alberta" target="_blank" class="marquee-css hide-tablet w-inline-block">
|
||
<div data-css-marquee-list="" class="marquee-css__list">
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
</div>
|
||
<div data-css-marquee-list="" class="marquee-css__list is--duplicate">
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">$35 a day keeps the billboard blooming</p>
|
||
</div>
|
||
<div class="marquee-css__item">
|
||
<p class="marquee-css__item-p">🌸 Donate here 🌸</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="https://www.gofundme.com/f/help-us-get-a-prochoice-billboard-up-in-alberta" target="_blank" class="donation_tablet hide-desktop w-inline-block">
|
||
<div class="donation_list">
|
||
<div class="donation_item">
|
||
<p class="donation_item-text">🌸 $35 a day keeps the billboard blooming <span>🌸 Donate here 🌸</span></p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div data-collapse="medium" data-animation="default" data-duration="400" fs-scrolldisable-element="smart-nav" data-easing="ease" data-easing2="ease" role="banner" class="navbar1_component color-scheme-1 w-nav">
|
||
<div class="navbar1_container">
|
||
<a href="#" class="navbar1_logo-link w-nav-brand"><img loading="lazy" src="images/Logo-wide.svg" alt="" class="navbar1_logo"></a>
|
||
<nav role="navigation" class="navbar1_menu is-page-height-tablet w-nav-menu">
|
||
<div class="navbar1_menu-links">
|
||
<a href="#" class="navbar1_link w-nav-link">Our Story</a>
|
||
<a href="#" class="navbar1_link w-nav-link">The Facts</a>
|
||
<a href="#" class="navbar1_link w-nav-link">Resources</a>
|
||
</div>
|
||
<div class="navbar1_menu-buttons">
|
||
<a href="#" class="button is-secondary is-small w-button">Contact</a>
|
||
<a href="#" class="button is-small w-button">Hightail it</a>
|
||
</div>
|
||
</nav>
|
||
<div class="navbar1_menu-button w-nav-button">
|
||
<div class="menu-icon1">
|
||
<div class="menu-icon1_line-top"></div>
|
||
<div class="menu-icon1_line-middle">
|
||
<div class="menu-icon1_line-middle-inner"></div>
|
||
</div>
|
||
<div class="menu-icon1_line-bottom"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<footer class="footer11_component color-scheme-5">
|
||
<div class="padding-global">
|
||
<div class="container-large">
|
||
<div class="padding-vertical padding-xxlarge">
|
||
<div class="w-layout-grid footer_top-wrapper">
|
||
<div id="w-node-_11455089-1114-6fdd-99f6-ed0d0ce5e4ba-0ce5e4b5" class="footer_left-wrapper">
|
||
<div class="margin-bottom margin-medium"><svg xmlns="http://www.w3.org/2000/svg" width="250" height="42" viewbox="0 0 250 42" fill="none" class="footer_logo-svg">
|
||
<path d="M6.19.86h11.56l5.44,40.28h-8.42l-.84-8.08h-4.21l-.79,8.08H.8L6.19.86ZM11.07,19.43l-.67,6.73h2.86l-.67-6.73-.73-7.57h-.11l-.67,7.57Z" fill="currentColor"></path>
|
||
<path d="M24.81,41.14V.86h11c3.14,0,5.5.73,7.07,2.13,1.57,1.46,2.36,3.59,2.36,6.45v5.16c0,1.4-.34,2.64-.95,3.7-.67,1.07-1.57,1.85-2.75,2.24,1.23.5,2.19,1.29,2.92,2.36.73,1.07,1.07,2.3,1.07,3.65v6c0,2.86-.79,4.99-2.36,6.39-1.57,1.46-3.93,2.19-7.07,2.19h-11.28ZM36.7,10.29c0-.73-.17-1.23-.45-1.63s-.73-.56-1.29-.56h-1.63v8.75h1.63c.56,0,1.01-.17,1.29-.56.28-.39.45-.9.45-1.63v-4.38ZM36.93,26.33c0-.79-.17-1.4-.5-1.8-.34-.39-.84-.56-1.51-.56h-1.57v9.93h1.8c.62,0,1.07-.17,1.35-.56.28-.39.45-.9.45-1.63v-5.39Z" fill="currentColor"></path>
|
||
<path d="M54.27.86h1.57v4.15h-.67c-1.4,0-2.08.67-2.08,1.96v3.53h2.75v4.15h-2.75v26.48h-4.6V14.66h-1.85v-4.15h1.85v-4.21c0-3.65,2.47-5.44,5.78-5.44Z" fill="currentColor"></path>
|
||
<path d="M63.88,10.06c3.59,0,6.17,2.19,6.17,5.95v19.63c0,3.76-2.58,5.95-6.17,5.95s-6.17-2.19-6.17-5.95v-19.63c0-3.76,2.58-5.95,6.17-5.95ZM62.31,16.68v18.29c0,1.63.56,2.36,1.57,2.36s1.57-.73,1.57-2.36v-18.29c0-1.63-.56-2.36-1.57-2.36s-1.57.73-1.57,2.36Z" fill="currentColor"></path>
|
||
<path d="M80.39,15.05c-1.85,0-3.09.79-3.09,2.41v23.67h-4.6V10.51h4.6v2.02c.56-1.23,2.02-2.24,3.42-2.24.5,0,.9.06,1.23.17v4.66c-.73-.06-1.01-.06-1.57-.06Z" fill="currentColor"></path>
|
||
<path d="M86.91.86h11.56l5.44,40.28h-8.42l-.84-8.08h-4.21l-.79,8.08h-8.13L86.91.86ZM91.79,19.43l-.67,6.73h2.86l-.67-6.73-.73-7.57h-.11l-.67,7.57Z" fill="currentColor"></path>
|
||
<path d="M105.53,41.14V.86h11c3.14,0,5.5.73,7.07,2.13,1.57,1.46,2.36,3.59,2.36,6.45v5.16c0,1.4-.34,2.64-.95,3.7-.67,1.07-1.57,1.85-2.75,2.24,1.23.5,2.19,1.29,2.92,2.36.73,1.07,1.07,2.3,1.07,3.65v6c0,2.86-.79,4.99-2.36,6.39-1.57,1.46-3.93,2.19-7.07,2.19h-11.28ZM117.42,10.29c0-.73-.17-1.23-.45-1.63-.28-.39-.73-.56-1.29-.56h-1.63v8.75h1.63c.56,0,1.01-.17,1.29-.56.28-.39.45-.9.45-1.63v-4.38ZM117.65,26.33c0-.79-.17-1.4-.5-1.8-.34-.39-.84-.56-1.51-.56h-1.57v9.93h1.8c.62,0,1.07-.17,1.35-.56.28-.39.45-.9.45-1.63v-5.39Z" fill="currentColor"></path>
|
||
<path d="M145.98,2.94c1.85,1.74,2.81,3.98,2.81,6.79v22.55c0,2.8-.95,5.05-2.81,6.73-1.91,1.74-4.43,2.58-7.57,2.58s-5.67-.84-7.52-2.58c-1.91-1.68-2.86-3.93-2.86-6.73V9.72c0-2.8.95-5.05,2.86-6.79,1.85-1.68,4.38-2.52,7.52-2.52s5.67.84,7.57,2.52ZM137.12,8.27c-.34.39-.5.95-.5,1.68v22.1c0,.73.17,1.29.5,1.68.28.39.73.62,1.29.62s1.01-.22,1.29-.62c.28-.39.45-.95.45-1.68V9.95c0-.73-.17-1.35-.45-1.74-.28-.39-.73-.56-1.29-.56s-1.01.22-1.29.62Z" fill="currentColor"></path>
|
||
<path d="M159.48,24.87v16.27h-8.58V.86h11.33c3.14,0,5.5.73,7.07,2.13,1.57,1.46,2.36,3.59,2.36,6.45v5.67c0,1.4-.34,2.64-.95,3.7-.67,1.07-1.57,1.85-2.75,2.24,1.18.45,2.08,1.18,2.69,2.19.62,1.07.9,2.3.9,3.81v8.7c0,1.29.06,2.41.17,3.25.06.84.22,1.57.45,2.13h-8.58c-.22-.5-.39-1.18-.45-2.02-.11-.84-.17-1.85-.17-3.09v-8.81c0-.79-.17-1.4-.5-1.8-.34-.39-.84-.56-1.46-.56h-1.51ZM163.01,10.45c0-.67-.17-1.23-.45-1.63s-.73-.56-1.29-.56h-1.8v9.2h1.8c.56,0,1.01-.17,1.29-.56.28-.39.45-.9.45-1.63v-4.82Z" fill="currentColor"></path>
|
||
<path d="M193.16,8.55h-5.61v32.59h-8.64V8.55h-5.61V.86h19.86v7.69Z" fill="currentColor"></path>
|
||
<path d="M203.66.86v40.28h-8.7V.86h8.7Z" fill="currentColor"></path>
|
||
<path d="M223.7,2.94c1.85,1.74,2.81,3.98,2.81,6.79v22.55c0,2.8-.95,5.05-2.81,6.73-1.91,1.74-4.43,2.58-7.57,2.58s-5.67-.84-7.52-2.58c-1.91-1.68-2.86-3.93-2.86-6.73V9.72c0-2.8.95-5.05,2.86-6.79,1.85-1.68,4.38-2.52,7.52-2.52s5.67.84,7.57,2.52ZM214.84,8.27c-.34.39-.5.95-.5,1.68v22.1c0,.73.17,1.29.5,1.68.28.39.73.62,1.29.62s1.01-.22,1.29-.62c.28-.39.45-.95.45-1.68V9.95c0-.73-.17-1.35-.45-1.74-.28-.39-.73-.56-1.29-.56s-1.01.22-1.29.62Z" fill="currentColor"></path>
|
||
<path d="M236.41,19.43h-.11l.11,8.25v13.46h-7.8V.86h8.36l4.43,19.18h.11l-.11-8.58V.86h7.8v40.28h-7.35l-5.44-21.71Z" fill="currentColor"></path>
|
||
</svg></div>
|
||
<div class="footer_details-wrapper">
|
||
<div class="margin-bottom margin-tiny">
|
||
<div class="text-size-small">AB for Abortion is a volunteer-led, community-funded initiative. This campaign is a love letter to all Albertans, because everyone deserves the freedom to choose.</div>
|
||
</div>
|
||
<a href="#" class="text-size-small hide">info@abforabortion.com</a>
|
||
</div>
|
||
</div>
|
||
<div id="w-node-_11455089-1114-6fdd-99f6-ed0d0ce5e4c9-0ce5e4b5" class="w-layout-grid footer_menu-wrapper">
|
||
<div id="w-node-_11455089-1114-6fdd-99f6-ed0d0ce5e4ca-0ce5e4b5" class="footer_link-list">
|
||
<a href="#story" class="footer11_link">Our Story</a>
|
||
<a href="#billboard" class="footer11_link">Billboard</a>
|
||
<a href="#facts" class="footer11_link">The Facts</a>
|
||
<a href="#resources" class="footer11_link">Resources</a>
|
||
<a href="#share" class="footer11_link hide">Share</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="padding-top padding-medium">
|
||
<div class="footer11_bottom-wrapper">
|
||
<div class="footer11_credit-text">© 2025 AB for Abortion. All rights reserved.</div>
|
||
<div class="w-layout-grid footer11_legal-list hide">
|
||
<a href="#" class="footer11_legal-link">Privacy Policy</a>
|
||
<a href="#" class="footer11_legal-link">Terms of Use</a>
|
||
<a href="#" class="footer11_legal-link">Cookie Settings</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=680a666174ef49844f717753" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||
<script src="js/webflow.js" type="text/javascript"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.css">
|
||
<!-- JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>
|
||
<script>
|
||
// Register GSAP Plugins
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
function initProgressNavigation() {
|
||
// Cache the parent container
|
||
let navProgress = document.querySelector('[data-progress-nav-list]');
|
||
// Create or select the moving indicator
|
||
let indicator = navProgress.querySelector('.progress-nav__indicator');
|
||
if (!indicator) {
|
||
indicator = document.createElement('div');
|
||
indicator.className = 'progress-nav__indicator';
|
||
navProgress.appendChild(indicator);
|
||
}
|
||
// Function to update the indicator based on the active nav link
|
||
function updateIndicator(activeLink) {
|
||
let parentWidth = navProgress.offsetWidth;
|
||
let parentHeight = navProgress.offsetHeight;
|
||
// Get the active link's position relative to the parent
|
||
let parentRect = navProgress.getBoundingClientRect();
|
||
let linkRect = activeLink.getBoundingClientRect();
|
||
let linkPos = {
|
||
left: linkRect.left - parentRect.left,
|
||
top: linkRect.top - parentRect.top
|
||
};
|
||
let linkWidth = activeLink.offsetWidth;
|
||
let linkHeight = activeLink.offsetHeight;
|
||
// Calculate percentage values relative to parent dimensions
|
||
let leftPercent = (linkPos.left / parentWidth) * 100;
|
||
let topPercent = (linkPos.top / parentHeight) * 100;
|
||
let widthPercent = (linkWidth / parentWidth) * 100;
|
||
let heightPercent = (linkHeight / parentHeight) * 100;
|
||
// Update the indicator with a smooth CSS transition (set in your CSS)
|
||
indicator.style.left = leftPercent + '%';
|
||
indicator.style.top = topPercent + '%';
|
||
indicator.style.width = widthPercent + '%';
|
||
indicator.style.height = heightPercent + '%';
|
||
}
|
||
// Get all anchor sections
|
||
let progressAnchors = gsap.utils.toArray('[data-progress-nav-anchor]');
|
||
progressAnchors.forEach((progressAnchor) => {
|
||
let anchorID = progressAnchor.getAttribute('id');
|
||
ScrollTrigger.create({
|
||
trigger: progressAnchor,
|
||
start: '0% 50%',
|
||
end: '100% 50%',
|
||
onEnter: () => {
|
||
let activeLink = navProgress.querySelector('[data-progress-nav-target="#' + anchorID + '"]');
|
||
activeLink.classList.add('is--active');
|
||
// Remove 'is--active' class from sibling links
|
||
let siblings = navProgress.querySelectorAll('[data-progress-nav-target]');
|
||
siblings.forEach((sib) => {
|
||
if (sib !== activeLink) {
|
||
sib.classList.remove('is--active');
|
||
}
|
||
});
|
||
updateIndicator(activeLink);
|
||
},
|
||
onEnterBack: () => {
|
||
let activeLink = navProgress.querySelector('[data-progress-nav-target="#' + anchorID + '"]');
|
||
activeLink.classList.add('is--active');
|
||
// Remove 'is--active' class from sibling links
|
||
let siblings = navProgress.querySelectorAll('[data-progress-nav-target]');
|
||
siblings.forEach((sib) => {
|
||
if (sib !== activeLink) {
|
||
sib.classList.remove('is--active');
|
||
}
|
||
});
|
||
updateIndicator(activeLink);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
// Initialize One Page Progress Navigation
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initProgressNavigation();
|
||
});
|
||
</script>
|
||
<script>
|
||
const documentTitleStore = document.title;
|
||
const documentTitleOnBlur = "The Weather Network | Alberta, Canada"; // Define your custom title here
|
||
// Set original title if user is on the site
|
||
window.addEventListener("focus", () => {
|
||
document.title = documentTitleStore;
|
||
});
|
||
// If user leaves tab, set the alternative title
|
||
window.addEventListener("blur", () => {
|
||
document.title = documentTitleOnBlur;
|
||
});
|
||
</script>
|
||
<script>
|
||
function initCSSMarquee() {
|
||
const pixelsPerSecond = 75; // Set the marquee speed (pixels per second)
|
||
const marquees = document.querySelectorAll('[data-css-marquee]');
|
||
// Duplicate each [data-css-marquee-list] element inside its container
|
||
marquees.forEach(marquee => {
|
||
marquee.querySelectorAll('[data-css-marquee-list]').forEach(list => {
|
||
const duplicate = list.cloneNode(true);
|
||
marquee.appendChild(duplicate);
|
||
});
|
||
});
|
||
// Create an IntersectionObserver to check if the marquee container is in view
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
entry.target.querySelectorAll('[data-css-marquee-list]').forEach(list =>
|
||
list.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused'
|
||
);
|
||
});
|
||
}, { threshold: 0 });
|
||
// Calculate the width and set the animation duration accordingly
|
||
marquees.forEach(marquee => {
|
||
marquee.querySelectorAll('[data-css-marquee-list]').forEach(list => {
|
||
list.style.animationDuration = (list.offsetWidth / pixelsPerSecond) + 's';
|
||
list.style.animationPlayState = 'paused';
|
||
});
|
||
observer.observe(marquee);
|
||
});
|
||
}
|
||
// Initialize CSS Marquee
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
initCSSMarquee();
|
||
});
|
||
</script>
|
||
<script>
|
||
// Basic Filter Setup
|
||
function initFilterBasic() {
|
||
// Find all filter groups on the page
|
||
const groups = document.querySelectorAll('[data-filter-group]');
|
||
groups.forEach((group) => {
|
||
const buttons = group.querySelectorAll('[data-filter-target]');
|
||
const items = group.querySelectorAll('[data-filter-name]');
|
||
const transitionDelay = 300; // Delay for transition effect (in milliseconds)
|
||
// Function to update the status and accessibility attributes of items
|
||
const updateStatus = (element, shouldBeActive) => {
|
||
// If the item should be active, set it to "active", otherwise "not-active"
|
||
element.setAttribute('data-filter-status', shouldBeActive ? 'active' : 'not-active');
|
||
element.setAttribute('aria-hidden', shouldBeActive ? 'false' : 'true');
|
||
};
|
||
// Function to handle filtering logic when a button is clicked
|
||
const handleFilter = (target) => {
|
||
// Loop through all items and ensure every item transitions out first
|
||
items.forEach((item) => {
|
||
const shouldBeActive = target === 'all' || item.getAttribute('data-filter-name') === target;
|
||
const currentStatus = item.getAttribute('data-filter-status');
|
||
// Only transition items currently visible (status: active)
|
||
if (currentStatus === 'active') {
|
||
item.setAttribute('data-filter-status', 'transition-out');
|
||
// After the transition delay, set the final status
|
||
setTimeout(() => updateStatus(item, shouldBeActive), transitionDelay);
|
||
} else {
|
||
// For items not currently visible, simply update their status after the delay
|
||
setTimeout(() => updateStatus(item, shouldBeActive), transitionDelay);
|
||
}
|
||
});
|
||
// Update the active status for all buttons
|
||
buttons.forEach((button) => {
|
||
const isActive = button.getAttribute('data-filter-target') === target;
|
||
button.setAttribute('data-filter-status', isActive ? 'active' : 'not-active');
|
||
button.setAttribute('aria-pressed', isActive ? 'true' : 'false'); // Accessibility: indicate active state
|
||
});
|
||
};
|
||
// Attach click event listeners to each button
|
||
buttons.forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
const target = button.getAttribute('data-filter-target');
|
||
// If the button is already active, do nothing
|
||
if (button.getAttribute('data-filter-status') === 'active') return;
|
||
// Trigger the filter logic with the selected target
|
||
handleFilter(target);
|
||
});
|
||
});
|
||
});
|
||
}
|
||
// Initialize Basic Filter Setup
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initFilterBasic();
|
||
});
|
||
</script>
|
||
<script>
|
||
gsap.registerPlugin(ScrollTrigger, SplitText)
|
||
function initStickyTitleScroll() {
|
||
const wraps = document.querySelectorAll('[data-sticky-title="wrap"]');
|
||
wraps.forEach(wrap => {
|
||
const headings = Array.from(wrap.querySelectorAll('[data-sticky-title="heading"]'));
|
||
const masterTl = gsap.timeline({
|
||
scrollTrigger: {
|
||
trigger: wrap,
|
||
start: "top 40%",
|
||
end: "bottom bottom",
|
||
scrub: true,
|
||
}
|
||
});
|
||
const revealDuration = 0.7,
|
||
fadeOutDuration = 0.7,
|
||
overlapOffset = 0.15;
|
||
headings.forEach((heading, index) => {
|
||
// Save original heading content for screen readers
|
||
heading.setAttribute("aria-label", heading.textContent);
|
||
const split = new SplitText(heading, { type: "words,chars" });
|
||
// Hide all the separate words from screenreader
|
||
split.words.forEach(word => word.setAttribute("aria-hidden", "true"));
|
||
// Reset visibility on the 'stacked' headings
|
||
gsap.set(heading, { visibility: "visible" });
|
||
const headingTl = gsap.timeline();
|
||
headingTl.from(split.chars, {
|
||
autoAlpha: 0,
|
||
stagger: { amount: revealDuration, from: "start" },
|
||
duration: revealDuration
|
||
});
|
||
// Animate fade-out for every heading except the last one.
|
||
if (index < headings.length - 1) {
|
||
headingTl.to(split.chars, {
|
||
autoAlpha: 0,
|
||
stagger: { amount: fadeOutDuration, from: "end" },
|
||
duration: fadeOutDuration
|
||
});
|
||
}
|
||
// Overlap the start of fade-in of the new heading a little bit
|
||
if (index === 0) {
|
||
masterTl.add(headingTl);
|
||
} else {
|
||
masterTl.add(headingTl, `-=${overlapOffset}`);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
// Initialize Sticky Title Scroll Effect
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
initStickyTitleScroll();
|
||
});
|
||
</script>
|
||
<script>
|
||
// Lenis
|
||
const lenis = new Lenis({
|
||
autoRaf: true,
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |