{"id":612696,"date":"2026-04-21T10:37:09","date_gmt":"2026-04-21T14:37:09","guid":{"rendered":"https:\/\/www.earthrangers.com\/EN\/CA\/?page_id=612696"},"modified":"2026-04-29T12:29:00","modified_gmt":"2026-04-29T16:29:00","slug":"missions","status":"publish","type":"page","link":"https:\/\/www.earthrangers.com\/EN\/CA\/missions\/","title":{"rendered":"Earth Rangers Missions"},"content":{"rendered":"<div id=\"tdi_1\" class=\"tdc-zone\"><div class=\"tdc_zone tdi_2  wpb_row td-pb-row\"  >\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_2{\r\n                    min-height: 0;\r\n                }\n<\/style><div id=\"tdi_3\" class=\"tdc-row stretch_row_content td-stretch-content\"><div class=\"vc_row tdi_4  wpb_row td-pb-row\" >\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_4,\r\n                .tdi_4 .tdc-columns{\r\n                    min-height: 0;\r\n                }.tdi_4,\r\n\t\t\t\t.tdi_4 .tdc-columns{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_4 .tdc-columns{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_4:before,\r\n\t\t\t\t.tdi_4:after{\r\n\t\t\t\t    display: table;\r\n\t\t\t\t}\n<\/style><div class=\"vc_column tdi_6  wpb_column vc_column_container tdc-column td-pb-span12\">\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_6{\r\n                    vertical-align: baseline;\r\n                }.tdi_6 > .wpb_wrapper,\r\n\t\t\t\t.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .vc_row_inner{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t    height: auto;\r\n\t\t\t\t}\n<\/style><div class=\"wpb_wrapper\" ><div class=\"wpb_wrapper td_block_wrap vc_raw_html tdi_8 \">\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_8{\nmargin-bottom:0px !important;\n}\n\n<\/style><div class=\"td-fix-index\"><style>\n    \n     \n    \/* ============================================\n   Earth Rangers \u2013 Missions Landing Page\n   Font: Roboto Condensed\n   ============================================ *\/\n:root {\n  --container-max: 1200px;\n  --container-pad: 24px;\n  --color-bg: #ffffff;\n  --color-text: #2d2d2d;\n  --color-heading: #1a1a1a;\n  --color-muted: #555;\n  --color-primary: #8DC63F;\n  --color-primary-dark: #6fa82a;\n  --color-accent: #FFB400;\n  --color-blue: #2083E5;\n  --color-mission: #0B6E2F;\n  --radius-card: 22px;\n  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.08);\n  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.16);\n}\n\/* --- Reset & Base --- *\/\n*,\n*::before,\n*::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\nh2 {\n  margin-top: 0 !important;\n}\nhtml {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  scroll-behavior: smooth;\n}\nbody {\n  font-family: 'Roboto Condensed', 'Roboto', sans-serif;\n  color: var(--color-text);\n  background: var(--color-bg);\n  line-height: 1.6;\n  overflow-x: hidden;\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\na {\n  text-decoration: none;\n  color: inherit;\n}\n\/* --- Layout --- *\/\n.section-wrap {\n  max-width: var(--container-max);\n  margin: 0 auto;\n  padding: 0 var(--container-pad);\n  width: 100%;\n}\n\/* Skip-link for keyboard users (a11y) *\/\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 8px;\n  background: #fff;\n  color: var(--color-heading);\n  padding: 8px 14px;\n  border-radius: 6px;\n  z-index: 100;\n  font-weight: 700;\n}\n.skip-link:focus {\n  top: 8px;\n}\n\/* ============================================\n   ROW 1 \u2013 Hero\n   ============================================ *\/\n.hero {\n  background: url('https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/image-6.jpeg') center center \/ cover no-repeat;\n  padding: 140px 0 56px;\n  text-align: left;\n  position: relative;\n  overflow: hidden;\n}\n\/* Dark overlay for text readability *\/\n.hero-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  pointer-events: none;\n  z-index: 0;\n}\n.hero-inner {\n  position: relative;\n  z-index: 1;\n}\n.hero h1 {\n  font-weight: 900;\n  font-size: clamp(2.2rem, 5vw, 3.6rem);\n  color: #fff;\n  line-height: 1.05;\n  letter-spacing: -0.02em;\n  text-transform: uppercase;\n  margin-bottom: 14px;\n  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);\n}\n.hero-subtitle {\n  font-size: clamp(1rem, 1.4vw, 1.2rem);\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.92);\n  line-height: 1.45;\n  max-width: 820px;\n}\n\/* ============================================\n   ROW 2 \u2013 Ranger Quest Banner\n   ============================================ *\/\n.banner {\n  display: block;\n  text-decoration: none;\n  color: inherit;\n  position: relative;\n  width: 100%;\n  height: 260px;\n  cursor: pointer;\n}\n.banner-clip {\n  position: absolute;\n  inset: 0;\n  border-radius: 20px;\n  overflow: hidden;\n}\n.banner-bg {\n  position: absolute;\n  top: -20px;\n  left: -20px;\n  width: calc(140%);\n  height: calc(140%);\n  background: url('https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/quest-bg.webp') center center \/ cover no-repeat;\n  will-change: transform;\n}\n.banner-inner {\n  position: absolute;\n  inset: 0;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n.banner-characters {\n  position: absolute;\n  bottom: -20px;\n  left: 4%;\n  height: calc(140%);\n  will-change: transform;\n  z-index: 9;\n}\n.banner-characters img {\n  height: 100%;\n  width: auto;\n  display: block;\n}\n.banner-content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-20%, -50%);\n  text-align: left;\n  will-change: transform;\n  z-index: 2;\n}\n.banner-content h2 {\n  color: #ffffff;\n  font-size: 34px;\n  font-weight: 700;\n  line-height: 1.25;\n  margin-bottom: 18px;\n  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);\n  max-width: 1000px;\n}\n.banner-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  background: #8DC63F;\n  color: #0E3500;\n  font-size: 21px;\n  font-weight: 800;\n  font-family: 'Roboto Condensed', sans-serif;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  padding: 16px 22px 16px 36px;\n  border: none;\n  border-radius: 14px;\n  cursor: pointer;\n  text-decoration: none;\n  transition: background 0.2s;\n  will-change: transform;\n}\n.banner-cta:hover {\n  background: #9dd44f;\n}\n.banner-cta-icon {\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n  display: block;\n}\n.banner-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);\n  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);\n  border-radius: 20px;\n  z-index: 1;\n  pointer-events: none;\n}\n.quest-section {\n  margin: 80px auto;\n}\n\/* Banner stacked layout \u2014 tablet & mobile *\/\n@media (max-width: 960px) {\n  .banner {\n    height: 560px;\n  }\n  .banner-inner {\n    position: relative;\n    inset: auto;\n    max-width: 100%;\n    margin: 0;\n    padding: 32px 24px 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    height: 100%;\n  }\n  .banner-content {\n    position: relative;\n    top: auto;\n    left: auto;\n    transform: none !important;\n    text-align: center;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 14px;\n    max-width: 600px;\n    z-index: 3;\n  }\n  .banner-content h2 {\n    font-size: clamp(30px, 3.4vw, 28px);\n    line-height: 1.2;\n    margin-bottom: 0;\n    max-width: 95%;\n    font-family: 'Roboto Condensed', sans-serif;\n  }\n  .banner-cta {\n    font-size: 20px;\n    padding: 14px 20px 14px 28px;\n  }\n  .banner-characters {\n    position: absolute;\n    inset: 0;\n    transform: none !important;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    margin: 0;\n    z-index: 2;\n    pointer-events: none;\n    bottom: -2.4vw;\n  }\n  .banner-characters img {\n    object-fit: contain;\n    object-position: bottom;\n    height: 78%;\n    max-height: 78%;\n    width: auto;\n    display: block;\n  }\n}\n@media (max-width: 600px) {\n  .banner {\n    height: 560px;\n  }\n  .banner-characters img {\n    height: 70%;\n    max-height: 70%;\n  }\n}\n\/* ============================================\n   ROW 3 \u2013 Missions\n   ============================================ *\/\n.section-missions {\n  padding: 72px 0 80px;\n  background: #ffffff;\n}\n.section-heading {\n  font-weight: 800;\n  font-size: clamp(1.7rem, 3vw, 2.2rem);\n  color: var(--color-heading);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 12px;\n}\n.section-description {\n  font-size: 1.05rem;\n  color: var(--color-muted);\n  margin-top: 40px;\n  line-height: 1.65;\n}\n\/* Force 3-column grid for missions *\/\n.section-missions .custom-card-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 28px;\n  margin: 0;\n  padding: 0;\n}\n\/* Kid-friendly mission cards *\/\n.section-missions .custom-card {\n  position: relative;\n  display: block;\n  background: #fff;\n  border-radius: var(--radius-card);\n  overflow: hidden;\n  box-shadow: var(--shadow-card);\n  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;\n  outline: none;\n}\n.section-missions .custom-card:hover,\n.section-missions .custom-card:focus-visible {\n  transform: translateY(-6px) rotate(-0.4deg);\n  box-shadow: var(--shadow-card-hover);\n}\n.section-missions .custom-card:focus-visible {\n  outline: 3px solid var(--color-primary);\n  outline-offset: 3px;\n}\n\/* Force vertical layout at all breakpoints \u2014 overrides the third-party\n   category-cards.css which switches to a horizontal row layout at \u2264600px.\n   The third-party rules use `.custom-card-grid:not(.mobile-slider) .custom-card-*`\n   so we match that specificity here. *\/\n.section-missions .custom-card-grid:not(.mobile-slider) .custom-card-content {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n.section-missions .custom-card-grid:not(.mobile-slider) .custom-card-image-wrapper {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  max-width: none;\n  flex: none;\n  background: #eee;\n}\n.section-missions .custom-card-grid:not(.mobile-slider) .custom-card-image {\n  width: 100%;\n  height: 200px;\n  min-height: 0;\n  max-height: none;\n  border-radius: 0;\n  object-fit: cover;\n}\n.section-missions .custom-card-grid:not(.mobile-slider) .custom-card-footer {\n  width: 100%;\n  padding: 20px 22px 22px;\n}\n.section-missions .custom-card-image {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.4s ease;\n}\n.section-missions .custom-card:hover .custom-card-image {\n  transform: scale(1.05);\n}\n\/* Play button \u2014 sits on the seam between image and footer, on the right.\n   Positioned relative to the card (not the image-wrapper) so the button can\n   straddle the seam without being clipped by the wrapper's overflow:hidden. *\/\n.section-missions .custom-card-content {\n  position: relative;\n}\n\/* Outer white ring *\/\n.card-play-btn {\n  position: absolute;\n  top: 200px;\n  right: 20px;\n  transform: translateY(-50%);\n  width: 68px;\n  height: 68px;\n  border-radius: 50%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 10;\n  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\/* Inner green circle \u2014 only this carries the drop shadow *\/\n.card-play-btn::before {\n  content: \"\";\n  position: absolute;\n  inset: 4px;\n  border-radius: 50%;\n  background: var(--color-primary);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.19);\n  transition: background 0.2s;\n}\n.card-play-btn svg {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  margin-left: 3px;\n  color: #fff;\n  z-index: 1;\n}\n.section-missions .custom-card:hover .card-play-btn,\n.section-missions .custom-card:focus-visible .card-play-btn {\n  transform: translateY(-50%) scale(1.1);\n}\n.section-missions .custom-card:hover .card-play-btn::before,\n.section-missions .custom-card:focus-visible .card-play-btn::before {\n  background: var(--color-primary-dark);\n}\n.section-missions .custom-card-title {\n  font-family: 'Roboto Condensed', sans-serif;\n  font-size: 1.3rem;\n  font-weight: 800;\n  color: var(--color-heading);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n.section-missions .custom-card-excerpt {\n  font-family: 'Roboto Condensed', sans-serif;\n  font-size: 0.95rem;\n  color: var(--color-muted);\n  line-height: 1.55;\n  margin-top: 8px;\n}\n.section-missions .custom-card-footer {\n  padding: 20px 22px 22px;\n}\n.card-play-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 16px;\n  font-weight: 800;\n  font-size: 0.95rem;\n  color: var(--color-primary-dark);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: gap 0.2s ease;\n}\n.section-missions .custom-card:hover .card-play-label {\n  gap: 14px;\n}\n\/* ============================================\n   ROW 3.5 \u2013 Kids Testimonials\n   ============================================ *\/\n.section-testimonials {\n  padding: 35px 0 85px;\n  background: #D6E8F5;\n}\n.testimonials-heading {\n  font-weight: 800;\n  font-size: clamp(1.7rem, 3vw, 2.2rem);\n  color: var(--color-heading);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  text-align: center;\n  margin-bottom: 24px;\n}\n.testimonials-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  align-items: stretch;\n  gap: 28px;\n  padding-top: 70px;\n}\n\/* Card-style speech bubble \u2014 photo pops out the top *\/\n.testimonial {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 76px 24px 28px;\n  background: #fff;\n  border-radius: 22px;\n  text-align: left;\n  box-shadow: 0 8px 24px rgba(11, 110, 47, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);\n}\n\/* Photo: circular, overlapping the top of the card *\/\n.testimonial-photo {\n  position: absolute;\n  top: -60px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  overflow: hidden;\n  border: 5px solid #fff;\n  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);\n  background: #fff;\n}\n.testimonial-photo img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: scale(1.2);\n}\n.testimonial-quote {\n  flex: 1;\n  font-size: 1rem;\n  font-style: normal;\n  color: var(--color-text);\n  line-height: 1.55;\n  margin: 0 0 22px;\n  border: none;\n  padding: 0;\n  quotes: none;\n}\n.testimonial figcaption {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  padding-top: 16px;\n  border-top: 1px solid rgba(11, 110, 47, 0.12);\n}\n.testimonial-name {\n  font-weight: 800;\n  font-size: 1.05rem;\n  color: var(--color-heading);\n  margin: 0;\n}\n.testimonial-mission {\n  font-size: 0.85rem;\n  font-weight: 700;\n  color: var(--color-mission);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin: 0;\n}\n\/* ============================================\n   ROW 4 \u2013 App Call Out\n   ============================================ *\/\n.section-app {\n  padding: 72px 0 88px;\n  background: #f5f5f5;\n}\n.app-callout {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 48px;\n  align-items: center;\n}\n.app-callout-left {\n  text-align: left;\n}\n.app-callout-header {\n  display: flex;\n  gap: 24px;\n  margin-bottom: 28px;\n  align-items: center;\n}\n.app-callout-header-text {\n  flex: 1;\n}\n.app-callout-icon {\n  flex-shrink: 0;\n}\n.app-callout-icon img {\n  width: 80px;\n  height: 80px;\n  border-radius: 18px;\n  object-fit: cover;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n}\n.app-callout-heading {\n  font-weight: 800;\n  font-size: clamp(1.6rem, 3vw, 2rem);\n  color: var(--color-heading);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.app-callout-text {\n  font-size: 1.05rem;\n  color: var(--color-muted);\n  line-height: 1.65;\n  margin-bottom: 0;\n}\n.app-btn {\n  display: inline-block;\n  background: var(--color-blue);\n  color: #fff;\n  font-family: 'Roboto Condensed', sans-serif;\n  font-size: 1.1rem;\n  font-weight: 800;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  padding: 16px 36px;\n  border-radius: 10px;\n  text-decoration: none;\n  transition: background 0.2s, transform 0.2s;\n}\n.app-btn:hover,\n.app-btn:focus-visible {\n  background: #3a94ea;\n  transform: translateY(-2px);\n}\n\/* QR Code column *\/\n.app-callout-right {\n  text-align: center;\n}\n.qr-code img {\n  width: 160px;\n  height: 160px;\n  border-radius: 12px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n}\n.qr-label {\n  font-size: 0.9rem;\n  color: var(--color-muted);\n  font-weight: 600;\n  margin-top: 12px;\n}\n\/* ============================================\n   Responsive\n   ============================================ *\/\n@media (max-width: 960px) {\n  .section-missions .custom-card-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .section-missions .custom-card-grid > .custom-card:last-child {\n    grid-column: 1 \/ -1;\n    max-width: 48%;\n    margin: 0 auto;\n  }\n  .testimonials-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 70px 24px;\n  }\n}\n@media (max-width: 768px) {\n  .hero {\n    padding: 72px 0 56px;\n  }\n  .section-missions {\n    padding: 48px 0 56px;\n  }\n  .section-description {\n    margin-top: 32px;\n  }\n  .section-app {\n    padding: 56px 0 64px;\n  }\n  .app-callout {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n  .app-callout-left {\n    text-align: center;\n  }\n  .app-callout-header {\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    text-align: center;\n  }\n  .qr-code img {\n    width: 140px;\n    height: 140px;\n  }\n  .testimonials-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 70px 24px;\n  }\n  .section-testimonials {\n    padding: 48px 0 56px;\n  }\n  .quest-section {\n    margin: 48px auto;\n  }\n}\n@media (max-width: 600px) {\n  .section-missions .custom-card-grid,\n  .section-missions .custom-card-grid:not(.mobile-slider) {\n    grid-template-columns: 1fr;\n    gap: 24px 0;\n    margin: 0;\n    padding: 0;\n  }\n  .section-missions .custom-card-grid > .custom-card:last-child {\n    max-width: 100%;\n  }\n  .section-missions .custom-card-grid:not(.mobile-slider) .custom-card-image {\n    height: 220px;\n  }\n  .card-play-btn {\n    top: 220px;\n  }\n  .testimonials-grid {\n    grid-template-columns: 1fr;\n    gap: 70px;\n  }\n  .testimonial {\n    padding: 75px 20px 24px;\n  }\n}\n@media (max-width: 480px) {\n  .testimonial-photo {\n    width: 110px;\n    height: 110px;\n    top: -55px;\n  }\n  .testimonial-quote {\n    font-size: 0.95rem;\n  }\n  .card-play-btn {\n    width: 60px;\n    height: 60px;\n  }\n  .card-play-btn svg {\n    width: 26px;\n    height: 26px;\n  }\n}\n\/* Respect users who prefer reduced motion *\/\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n  <\/style>\n<\/div><\/div><div class=\"wpb_wrapper td_block_wrap vc_raw_html tdi_10 \"><div class=\"td-fix-index\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Earth Rangers Missions \u2014 Fun, Hands-On Adventures for Kids<\/title>\n  <meta name=\"description\" content=\"Earth Rangers Missions give kids fun, hands-on ways to take action for the planet. Explore the outdoors, protect habitats, and get ready for anything.\">\n  <meta name=\"theme-color\" content=\"#8DC63F\">\n  <link rel=\"canonical\" href=\"https:\/\/www.earthrangers.com\/missions\/\">\n\n  <!-- Open Graph \/ social -->\n  <meta property=\"og:type\" content=\"website\">\n  <meta property=\"og:title\" content=\"Earth Rangers Missions \u2014 Fun, Hands-On Adventures for Kids\">\n  <meta property=\"og:description\" content=\"Fun, hands-on missions that turn kids' curiosity into real-world action for the planet.\">\n  <meta property=\"og:image\" content=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/image-6.jpeg\">\n  <meta property=\"og:url\" content=\"https:\/\/www.earthrangers.com\/missions\/\">\n  <meta name=\"twitter:card\" content=\"summary_large_image\">\n\n  <!-- Performance: preconnect to image\/font hosts -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link rel=\"preconnect\" href=\"https:\/\/www.earthrangers.com\">\n\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap\" rel=\"stylesheet\">\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n  <link rel=\"stylesheet\" href=\"https:\/\/www.earthrangers.com\/mission\/category-cards.css\">\n\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"WebPage\",\n    \"name\": \"Earth Rangers Missions\",\n    \"description\": \"Fun, hands-on missions that give kids the chance to take action for the planet.\",\n    \"url\": \"https:\/\/www.earthrangers.com\/missions\/\",\n    \"audience\": { \"@type\": \"PeopleAudience\", \"suggestedMinAge\": 6, \"suggestedMaxAge\": 12 }\n  }\n  <\/script>\n<\/head>\n<body>\n  <main id=\"main\">\n  <!-- Row 1: Hero -->\n  <section class=\"hero\" aria-labelledby=\"hero-heading\">\n    <div class=\"hero-overlay\"><\/div>\n    <div class=\"section-wrap hero-inner\">\n      <h1 id=\"hero-heading\">Earth Rangers Missions<\/h1>\n      <p class=\"hero-subtitle\">Now live on the web and easier to dive in than ever before, Earth Rangers Missions give kids the chance to take action for the planet in fun, hands-on ways. Whether they're cutting energy use at home, heading outside on a mini adventure, or cracking the code on climate and extreme weather, every Mission turns curiosity into real-world action.<\/p>\n    <\/div>\n  <\/section>\n\n  <!-- Row 2: Missions -->\n  <section class=\"section-missions\" aria-labelledby=\"missions-heading\">\n    <div class=\"section-wrap\">\n      <h2 class=\"section-heading\" id=\"missions-heading\">Missions<\/h2>\n\n      <div class=\"custom-card-grid\">\n\n        <a href=\"https:\/\/www.earthrangers.com\/mission\/readyforanything\/\" class=\"custom-card\" aria-label=\"Play the Ready for Anything mission\">\n          <div class=\"custom-card-content\">\n            <div class=\"custom-card-image-wrapper\">\n              <img class=\"custom-card-image\" src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/RFA.jpg\" alt=\"Ready for Anything Mission\" loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/quest-bg.webp'\">\n            <\/div>\n            <span class=\"card-play-btn\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n            <\/span>\n            <div class=\"custom-card-footer\">\n              <h3 class=\"custom-card-title\">Ready for Anything<\/h3>\n              <div class=\"custom-card-excerpt\">Get ready to become a preparedness pro! Learn how to handle extreme and sometimes unexpected weather with fun activities that help you stay calm, confident, and ready for anything.<\/div>\n              <span class=\"card-play-label\">Start mission <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i><\/span>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.earthrangers.com\/mission\/outdoorexplorer\/\" class=\"custom-card\" aria-label=\"Play the Outdoor Explorer mission\">\n          <div class=\"custom-card-content\">\n            <div class=\"custom-card-image-wrapper\">\n              <img class=\"custom-card-image\" src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/Outdoor-Explorer-Tile.jpg\" alt=\"Outdoor Explorer Mission\" loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/quest-bg.webp'\">\n            <\/div>\n            <span class=\"card-play-btn\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n            <\/span>\n            <div class=\"custom-card-footer\">\n              <h3 class=\"custom-card-title\">Outdoor Explorer<\/h3>\n              <div class=\"custom-card-excerpt\">Ready to explore? Discover the amazing nature all around you through fun challenges that spark curiosity, boost your observation skills, and turn every outdoor walk into an adventure!<\/div>\n              <span class=\"card-play-label\">Start mission <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i><\/span>\n            <\/div>\n          <\/div>\n        <\/a>\n\n        <a href=\"https:\/\/www.earthrangers.com\/mission\/habitathero\" class=\"custom-card\" aria-label=\"Play the Habitat Hero mission\">\n          <div class=\"custom-card-content\">\n            <div class=\"custom-card-image-wrapper\">\n              <img class=\"custom-card-image\" src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/HH3.jpg\" alt=\"Habitat Hero Mission\" loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/quest-bg.webp'\">\n            <\/div>\n            <span class=\"card-play-btn\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" focusable=\"false\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n            <\/span>\n            <div class=\"custom-card-footer\">\n              <h3 class=\"custom-card-title\">Habitat Hero<\/h3>\n              <div class=\"custom-card-excerpt\">Build, explore, and protect! Learn how animal habitats work and why they matter through fun, hands-on challenges that help you become a true Habitat Hero.<\/div>\n              <span class=\"card-play-label\">Start mission <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i><\/span>\n            <\/div>\n          <\/div>\n        <\/a>\n\n      <\/div>\n\n      <p class=\"section-description\">Earth Rangers members have already completed over a million environmental activities\u2026 so we decided it was time to level things up. Discover a whole new way to learn, play, and explore the world around you. These interactive missions turn eco action into mini adventures, packed with challenges, discoveries, and real-world impact. Each mission is designed to spark curiosity, build practical skills, and inspire positive action for the planet. From exploring nature to learning how to protect wildlife and prepare for environmental challenges, there's always something new to discover. Jump in, complete a mission, and share your experience to earn points, unlock rewards, and become part of a community of young environmental heroes!<\/p>\n    <\/div>\n  <\/section>\n\n  <!-- Row 3: Kids Testimonials -->\n  <section class=\"section-testimonials\" aria-labelledby=\"testimonials-heading\">\n    <div class=\"section-wrap\">\n      <h2 class=\"testimonials-heading\" id=\"testimonials-heading\">What Kids Think<\/h2>\n      <div class=\"testimonials-grid\">\n        <figure class=\"testimonial\">\n          <div class=\"testimonial-photo\">\n            <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/KarinHabitatHeroQuote.jpg\" alt=\"Earth Ranger Karin\" loading=\"lazy\" decoding=\"async\">\n          <\/div>\n          <blockquote class=\"testimonial-quote\">\"It\u2019s important to protect animals in your neighbourhood so animals have a good life.\"<\/blockquote>\n          <figcaption>\n            <p class=\"testimonial-name\">Earth Ranger Karin<\/p>\n            <p class=\"testimonial-mission\">Habitat Hero<\/p>\n          <\/figcaption>\n        <\/figure>\n        <figure class=\"testimonial\">\n          <div class=\"testimonial-photo\">\n            <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/JasmineHabitatHero.jpeg\" alt=\"Earth Ranger Jasmine\" loading=\"lazy\" decoding=\"async\">\n          <\/div>\n          <blockquote class=\"testimonial-quote\">\"It was so much fun working with my Dad on this butterfly habitat. I hope to see some soon.\"<\/blockquote>\n          <figcaption>\n            <p class=\"testimonial-name\">Earth Ranger Jasmine<\/p>\n            <p class=\"testimonial-mission\">Habitat Hero<\/p>\n          <\/figcaption>\n        <\/figure>\n        <figure class=\"testimonial\">\n          <div class=\"testimonial-photo\">\n            <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/SamanthaOutdoorExplorer.jpeg\" alt=\"Earth Ranger Samantha\" loading=\"lazy\" decoding=\"async\">\n          <\/div>\n          <blockquote class=\"testimonial-quote\">\"I picked it because I love exploring the woods and seeing the amazing things around me!\"<\/blockquote>\n          <figcaption>\n            <p class=\"testimonial-name\">Earth Ranger Samantha<\/p>\n            <p class=\"testimonial-mission\">Outdoor Explorer<\/p>\n          <\/figcaption>\n        <\/figure>\n        <figure class=\"testimonial\">\n          <div class=\"testimonial-photo\">\n            <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/JacobReadyForAnything.jpeg\" alt=\"Earth Ranger Jacob\" loading=\"lazy\" decoding=\"async\">\n          <\/div>\n          <blockquote class=\"testimonial-quote\">\"I like that I have something ready to go if anything bad happens.\"<\/blockquote>\n          <figcaption>\n            <p class=\"testimonial-name\">Earth Ranger Jacob<\/p>\n            <p class=\"testimonial-mission\">Ready for Anything<\/p>\n          <\/figcaption>\n        <\/figure>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- Row 4: Quest -->\n  <section class=\"quest-section\" aria-label=\"Earth Rangers Quest\">\n    <div class=\"section-wrap\">\n      <a href=\"https:\/\/www.earthrangers.com\/ranger-quest\" class=\"banner\" id=\"banner\">\n        <div class=\"banner-clip\">\n          <div class=\"banner-bg\" id=\"bg\"><\/div>\n          <div class=\"banner-overlay\"><\/div>\n        <\/div>\n        <div class=\"banner-inner\">\n          <div class=\"banner-characters\" id=\"characters\">\n            <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/quest-characters.webp\" alt=\"Earth Rangers animal characters\" loading=\"lazy\" decoding=\"async\">\n          <\/div>\n          <div class=\"banner-content\" id=\"content\">\n            <h2>Play the Earth Rangers Quest game and meet your animal guide!<\/h2>\n            <span class=\"banner-cta\" id=\"cta\">Start Your Adventure\n              <svg class=\"banner-cta-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n            <\/span>\n          <\/div>\n        <\/div>\n      <\/a>\n    <\/div>\n  <\/section>\n\n\n\n\n  <!-- Row 5: App Call Out -->\n  <section class=\"section-app\" aria-labelledby=\"app-heading\">\n    <div class=\"section-wrap\">\n      <div class=\"app-callout\">\n        <div class=\"app-callout-left\">\n          <div class=\"app-callout-header\">\n            <div class=\"app-callout-icon\">\n              <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/download.webp\" alt=\"Earth Rangers App icon\" loading=\"lazy\" decoding=\"async\" width=\"80\" height=\"80\">\n            <\/div>\n            <div class=\"app-callout-header-text\">\n              <h2 class=\"app-callout-heading\" id=\"app-heading\">Get the Earth Rangers App<\/h2>\n              <p class=\"app-callout-text\">The Earth Rangers App is currently available on mobile devices and Chromebooks. Please download the app on an Apple or Android phone, tablet, or Chromebook from the App Store or Google Play. You can also download the app from the Amazon App Store.<\/p>\n            <\/div>\n          <\/div>\n          <a href=\"https:\/\/www.earthrangers.com\/getapp\/\" class=\"app-btn\">Download the App<\/a>\n        <\/div>\n        <div class=\"app-callout-right\">\n          <div class=\"qr-code\">\n            <img src=\"https:\/\/www.earthrangers.com\/EN\/CA\/wp-content\/uploads\/QR.png\" alt=\"QR code linking to the Earth Rangers App download page\" loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"160\">\n          <\/div>\n          <p class=\"qr-label\">Scan to download<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  <\/main>\n\n  <!-- Banner parallax -->\n  <script>\n    \/\/ Vanilla JS parallax for the banner - no jQuery dependency\n    (function() {\n      var banner = document.getElementById('banner');\n      var bg = document.getElementById('bg');\n      var characters = document.getElementById('characters');\n      var content = document.getElementById('content');\n      var cta = document.getElementById('cta');\n\n      if (!banner) return;\n\n      var intensity = { bg: 20, characters: 10, content: 8, cta: 5 };\n      var ease = 0.08;\n      var target = { x: 0, y: 0 };\n      var current = { x: 0, y: 0 };\n      var animating = false;\n\n      function lerp(a, b, t) { return a + (b - a) * t; }\n\n      function animate() {\n        current.x = lerp(current.x, target.x, ease);\n        current.y = lerp(current.y, target.y, ease);\n\n        bg.style.transform = 'translate(' + (-current.x * intensity.bg) + 'px,' + (-current.y * intensity.bg) + 'px)';\n        characters.style.transform = 'translateX(' + (current.x * intensity.characters) + 'px)';\n\n        var isMobile = window.innerWidth <= 960;\n        if (!isMobile) {\n          content.style.transform = 'translate(calc(-20% + ' + (current.x * intensity.content) + 'px), -50%)';\n        }\n        cta.style.transform = 'translateX(' + (current.x * intensity.cta) + 'px)';\n\n        if (Math.abs(current.x - target.x) > 0.01 || Math.abs(current.y - target.y) > 0.01) {\n          requestAnimationFrame(animate);\n        } else {\n          current.x = target.x;\n          current.y = target.y;\n          animating = false;\n        }\n      }\n\n      function startAnimation() {\n        if (!animating) {\n          animating = true;\n          requestAnimationFrame(animate);\n        }\n      }\n\n      banner.addEventListener('mousemove', function(e) {\n        var rect = banner.getBoundingClientRect();\n        target.x = ((e.clientX - rect.left) \/ rect.width - 0.5) * 2;\n        target.y = ((e.clientY - rect.top) \/ rect.height - 0.5) * 2;\n        startAnimation();\n      });\n\n      banner.addEventListener('mouseleave', function() {\n        target.x = 0;\n        target.y = 0;\n        startAnimation();\n      });\n    })();\n  <\/script>\n\n\n<\/body>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":217462,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-612696","page","type-page","status-publish"],"pp_force_visibility":null,"pp_subpost_visibility":null,"pp_inherited_force_visibility":null,"pp_inherited_subpost_visibility":null,"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/pages\/612696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/users\/217462"}],"replies":[{"embeddable":true,"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/comments?post=612696"}],"version-history":[{"count":40,"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/pages\/612696\/revisions"}],"predecessor-version":[{"id":612871,"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/pages\/612696\/revisions\/612871"}],"wp:attachment":[{"href":"https:\/\/www.earthrangers.com\/EN\/CA\/wp-json\/wp\/v2\/media?parent=612696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}