<!DOCTYPE html> <html lang="en" style="scrollbar-gutter: stable;"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="DiEiaRgiI1o0AHsGO2hne1QHHRMRBCEiwvRXIlh4fzJ2BP533kDcuMha"> <title data-suffix=" | MyCharlie"> Home | MyCharlie</title> <link rel="icon" href="/favicon/mbta_favicon-4c8cd2ac19bb981d310747516f30ebde.svg?vsn=d"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/mbta_favicon-4c8cd2ac19bb981d310747516f30ebde.svg?vsn=d"> <link rel="icon" sizes="32x32" href="/favicon/mbta_favicon-4c8cd2ac19bb981d310747516f30ebde.svg?vsn=d"> <link rel="icon" sizes="16x16" href="/favicon/mbta_favicon-4c8cd2ac19bb981d310747516f30ebde.svg?vsn=d"> <link phx-track-static rel="stylesheet" href="/assets/app-ea5fa319c0a21c33fe16bb8c6102c444.css?vsn=d"> <script defer phx-track-static type="text/javascript" src="/assets/app-a5037371b39bfc7e7d67529b3e5dc358.js?vsn=d"> </script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet"> <script src="https://js.chargify.com/latest/chargify.js"> </script> </head> <body class="min-h-screen bg-white"> <div class="min-h-screen bg-gray-light"> <header class=""> <a href="#main" class="top-[-1000px] focus:top-0 bg-white block fixed focus:underline h-10 hover:underline px-4 py-2 text-blue-500 z-[1000]" data-test="skip_to_main"> Skip to main content </a> <nav class="md:block hidden h-16 z-[950] fixed top-0 w-full bg-blue-600 text-white" id="desktop-nav" phx-window-keyup="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}]]" phx-key="Escape" phx-hook="DesktopNav" role="menubar" data-test="logged_out_desktop_navbar"> <section class="w-full items-center flex flex-row h-full"> <a href="/" data-phx-link="redirect" data-phx-link-state="push" class="text-lg flex items-center whitespace-nowrap mx-4 my-3 border-2 px-2 border-blue-600 focus:outline-none focus:border-yellow-500 "> <img src="/images/mbta-logo-d099168878d55d47fe5a51151ef06247.svg?vsn=d" class="text-white h-7 inline-block mr-1 " alt="MBTA Logo"> MyCharlie </a> <ul class="flex mx-3 my-3 grow" role="menu"> <li class="whitespace-nowrap"> <button phx-click="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}],["toggle",{"to":"#charlie_card_sub_menu_menu_container"}],["toggle",{"to":"#down_chevron_charlie_card_sub_menu"}],["toggle",{"to":"#up_chevron_charlie_card_sub_menu"}],["focus_first",{"to":"#charlie_card_sub_menu_menu_container"}]]" class="border-2 px-2 rounded-sm mr-4 border-[#A1C6ED] flex items-center focus:outline-none focus:border-yellow-500 fill-white stroke-white hover:bg-[#A1C6ED] hover:text-black" data-test="charlie_card_sub_menu_button"> CharlieCards <svg xmlns="http://www.w3.org/2000/svg" id="up_chevron_charlie_card_sub_menu" class="hidden w-4 inline ml-1 mt-[2px] up-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="down_chevron_charlie_card_sub_menu" class="w-4 inline ml-1 mt-[2px] down-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> </li> <div id="charlie_card_sub_menu_menu_container" class="hidden fixed w-full h-full top-16 left-0 bg-[#1C1E23]/75 sub-menu" phx-click="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}],["toggle",{"to":"#charlie_card_sub_menu_menu_container"}],["toggle",{"to":"#down_chevron_charlie_card_sub_menu"}],["toggle",{"to":"#up_chevron_charlie_card_sub_menu"}],["focus_first",{"to":"#charlie_card_sub_menu_menu_container"}]]"> <ul id="charlie_card_sub_menu_desktop" class="bg-[#E2ECF9]/100 whitespace-nowrap text-blue-600 w-full text-sm overflow-y-auto" role="menu"> <div id="charlie_card_sub_menu-wrap" phx-hook="Phoenix.FocusWrap"> <span id="charlie_card_sub_menu-wrap-start" tabindex="0" aria-hidden="true"></span> <li class="whitespace-nowrap"> <a href="/charliecards" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Your CharlieCards </a> </li> <li class="whitespace-nowrap"> <a href="/charliecards/register" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Register CharlieCard </a> </li> <li class="whitespace-nowrap"> <a href="/charliecards/replace" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Replace CharlieCard </a> </li> <span id="charlie_card_sub_menu-wrap-end" tabindex="0" aria-hidden="true"></span> </div> </ul> </div> <li class="whitespace-nowrap"> <button phx-click="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}],["toggle",{"to":"#auto_pay_sub_menu_menu_container"}],["toggle",{"to":"#down_chevron_auto_pay_sub_menu"}],["toggle",{"to":"#up_chevron_auto_pay_sub_menu"}],["focus_first",{"to":"#auto_pay_sub_menu_menu_container"}]]" class="border-2 px-2 rounded-sm mr-4 border-[#A1C6ED] flex items-center focus:outline-none focus:border-yellow-500 fill-white stroke-white hover:bg-[#A1C6ED] hover:text-black" data-test="auto_pay_sub_menu_button"> Auto-pay <svg xmlns="http://www.w3.org/2000/svg" id="up_chevron_auto_pay_sub_menu" class="hidden w-4 inline ml-1 mt-[2px] up-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="down_chevron_auto_pay_sub_menu" class="w-4 inline ml-1 mt-[2px] down-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> </li> <div id="auto_pay_sub_menu_menu_container" class="hidden fixed w-full h-full top-16 left-0 bg-[#1C1E23]/75 sub-menu" phx-click="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}],["toggle",{"to":"#auto_pay_sub_menu_menu_container"}],["toggle",{"to":"#down_chevron_auto_pay_sub_menu"}],["toggle",{"to":"#up_chevron_auto_pay_sub_menu"}],["focus_first",{"to":"#auto_pay_sub_menu_menu_container"}]]"> <ul id="auto_pay_sub_menu_desktop" class="bg-[#E2ECF9]/100 whitespace-nowrap text-blue-600 w-full text-sm overflow-y-auto" role="menu"> <div id="auto_pay_sub_menu-wrap" phx-hook="Phoenix.FocusWrap"> <span id="auto_pay_sub_menu-wrap-start" tabindex="0" aria-hidden="true"></span> <li class="whitespace-nowrap"> <a href="/auto-pay" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Your Auto-pay subscriptions </a> </li> <li class="whitespace-nowrap"> <a href="/auto-pay/add" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Add Auto-pay subscription </a> </li> <span id="auto_pay_sub_menu-wrap-end" tabindex="0" aria-hidden="true"></span> </div> </ul> </div> <li class="whitespace-nowrap"> <button phx-click="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}],["toggle",{"to":"#reduced_fares_sub_menu_menu_container"}],["toggle",{"to":"#down_chevron_reduced_fares_sub_menu"}],["toggle",{"to":"#up_chevron_reduced_fares_sub_menu"}],["focus_first",{"to":"#reduced_fares_sub_menu_menu_container"}]]" class="border-2 px-2 rounded-sm mr-4 border-[#A1C6ED] flex items-center focus:outline-none focus:border-yellow-500 fill-white stroke-white hover:bg-[#A1C6ED] hover:text-black" data-test="reduced_fares_sub_menu_button"> Reduced Fares <svg xmlns="http://www.w3.org/2000/svg" id="up_chevron_reduced_fares_sub_menu" class="hidden w-4 inline ml-1 mt-[2px] up-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="down_chevron_reduced_fares_sub_menu" class="w-4 inline ml-1 mt-[2px] down-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> </li> <div id="reduced_fares_sub_menu_menu_container" class="hidden fixed w-full h-full top-16 left-0 bg-[#1C1E23]/75 sub-menu" phx-click="[["dispatch",{"to":"#desktop-nav","event":"blur_nav_buttons"}],["hide",{"to":"#desktop-nav .sub-menu"}],["hide",{"to":"#desktop-nav .up-chevron"}],["show",{"to":"#desktop-nav .down-chevron"}],["toggle",{"to":"#reduced_fares_sub_menu_menu_container"}],["toggle",{"to":"#down_chevron_reduced_fares_sub_menu"}],["toggle",{"to":"#up_chevron_reduced_fares_sub_menu"}],["focus_first",{"to":"#reduced_fares_sub_menu_menu_container"}]]"> <ul id="reduced_fares_sub_menu_desktop" class="bg-[#E2ECF9]/100 whitespace-nowrap text-blue-600 w-full text-sm overflow-y-auto" role="menu"> <div id="reduced_fares_sub_menu-wrap" phx-hook="Phoenix.FocusWrap"> <span id="reduced_fares_sub_menu-wrap-start" tabindex="0" aria-hidden="true"></span> <li class="whitespace-nowrap"> <a href="/reduced" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> All Reduced Fares </a> </li> <li class="whitespace-nowrap"> <a href="/reduced/blind" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Blind </a> </li> <li class="whitespace-nowrap"> <a href="/reduced/disability" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Disability </a> </li> <li class="whitespace-nowrap"> <a href="/reduced/income-eligible" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Income-Eligible </a> </li> <li class="whitespace-nowrap"> <a href="/reduced/senior" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Senior </a> </li> <li class="whitespace-nowrap"> <a href="/reduced/free" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Free </a> </li> <li class="whitespace-nowrap"> <a href="/reduced/your-card" data-phx-link="redirect" data-phx-link-state="push" class="text-blue-600 inline-block py-3 w-full px-8 hover:bg-blue-300 focus:bg-blue-300 focus:outline-none border border-[#E2ECF9] hover:border-blue-300 focus:border-yellow-500 focus:outline-none focus:border-blue-500 focus:border" role="menuitem"> Your Reduced Fares Card </a> </li> <span id="reduced_fares_sub_menu-wrap-end" tabindex="0" aria-hidden="true"></span> </div> </ul> </div> </ul> <div class="p-1 mr-2 inline-block justify-center"> <div> <button type="button" class="inline-flex items-center justify-center w-full border-2 border-transparent rounded-md px-4 py-2 font-medium focus:outline-none focus:border-yellow-500 hover:bg-[#A1C6ED] hover:text-black" id="language-menu-button-desktop_navbar" aria-expanded="false" aria-haspopup="true" phx-click="[["toggle",{"to":"#language-menu-desktop_navbar"}]]"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64"/> </svg> Languages </button> </div> <div class="origin-top-right absolute mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" id="language-menu-desktop_navbar" role="menu" aria-orientation="vertical" aria-labelledby="language-menu-button-desktop_navbar" tabindex="-1"> <div class="py-1" role="none"> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-en" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"en"},"event":"set-locale"}]]"> English </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-es" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"es"},"event":"set-locale"}]]"> Español (Spanish) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-ht" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"ht"},"event":"set-locale"}]]"> Kreyòl Ayisyen (Haitian Creole) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-pt-BR" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"pt-BR"},"event":"set-locale"}]]"> Português (Portuguese) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-vi" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"vi"},"event":"set-locale"}]]"> Tiếng Việt (Vietnamese) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-zh-CN" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"zh-CN"},"event":"set-locale"}]]"> 中文简体 (Chinese Simplified) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-desktop_navbar-zh-TW" phx-click="[["dispatch",{"to":"#language-menu-desktop_navbar","detail":{"locale":"zh-TW"},"event":"set-locale"}]]"> 中文繁體 (Chinese Traditional) </a> </div> </div> </div> <a href="/sign-in" data-phx-link="redirect" data-phx-link-state="push" class="p-1 mr-8 flex items-center justify-center border-2 border-blue-600 focus:outline-none focus:border-yellow-500 hover:bg-[#A1C6ED] hover:text-black"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 inline mr-1" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/> </svg> Sign in </a> </section> </nav> <nav class="md:hidden" id="mobile-nav" phx-window-keyup="[["set_attr",{"attr":["disabled","true"],"to":"#close_nav_menu_btn"}],["show",{"display":"inline-block","to":"#open_nav_menu_btn"}],["hide",{"to":"#close_nav_menu_btn"}],["remove_attr",{"attr":"disabled","to":"#open_nav_menu_btn"}],["hide",{"to":"#side_nav_menu"}],["hide",{"to":"#side_nav_open_background_overlay"}]]" phx-key="Escape" data-test="logged_out_mobile_navbar"> <div class="fixed top-0 w-full bg-blue-600 py-3 px-4 text-white flex items-center h-16 z-[950]"> <button id="open_nav_menu_btn" phx-click="[["set_attr",{"attr":["disabled","true"],"to":"#open_nav_menu_btn"}],["hide",{"to":"#open_nav_menu_btn"}],["show",{"display":"inline-block","to":"#close_nav_menu_btn"}],["remove_attr",{"attr":"disabled","to":"#close_nav_menu_btn"}],["show",{"to":"#side_nav_menu"}],["show",{"to":"#side_nav_open_background_overlay"}],["focus_first",{"to":"#side_nav_menu"}]]" class="border-2 px-2 rounded-sm mr-4 border-[#A1C6ED] w-16 focus:outline-none focus:border-yellow-500 focus:border "> Menu </button> <button id="close_nav_menu_btn" phx-click="[["set_attr",{"attr":["disabled","true"],"to":"#close_nav_menu_btn"}],["show",{"display":"inline-block","to":"#open_nav_menu_btn"}],["hide",{"to":"#close_nav_menu_btn"}],["remove_attr",{"attr":"disabled","to":"#open_nav_menu_btn"}],["hide",{"to":"#side_nav_menu"}],["hide",{"to":"#side_nav_open_background_overlay"}]]" class="hidden border-2 px-2 rounded-sm mr-4 border-[#A1C6ED] w-16 focus:outline-none focus:border-yellow-500 focus:border "> Close </button> <div class="w-3/12 whitespace-nowrap"> <a href="/" data-phx-link="redirect" data-phx-link-state="push" class="text-lg inline-block flex items-center"> <img src="/images/mbta-logo-d099168878d55d47fe5a51151ef06247.svg?vsn=d" class="text-white h-7 inline-block mr-1 " alt="MBTA Logo"> </a> </div> </div> <div class="flex"> <aside id="side_nav_menu" class="md:hidden hidden fixed top-16 left-0 z-40 w-64 h-[calc(100vh-64px)] bg-blue-600 text-white overflow-y-auto" aria-label="Sidebar"> <div class="h-full py-4 overflow-y-auto"> <div id="mobile-menu-wrap" phx-hook="Phoenix.FocusWrap"> <span id="mobile-menu-wrap-start" tabindex="0" aria-hidden="true"></span> <ul> <li class="bg-[#165C96]"> <button class="py-3 px-4 flex justify-between w-full inline-block border border-[#165C96] focus:outline-none focus:border-yellow-500 focus:border" phx-click="[["toggle",{"to":"#charlie_card_sub_menu_inner_menu"}],["toggle",{"to":"#charlie_card_sub_menudown"}],["toggle",{"to":"#charlie_card_sub_menuup"}],["focus_first",{"to":"#charlie_card_sub_menu_inner_menu"}]]"> CharlieCards <svg xmlns="http://www.w3.org/2000/svg" id="charlie_card_sub_menuup" class="hidden inline justify-self-end w-4 up-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="charlie_card_sub_menudown" class=" inline w-4 down-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> </li> <li class="hidden" id="charlie_card_sub_menu_inner_menu"> <ul class="bg-[#E2ECF9]"> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/charliecards" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Your CharlieCards </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/charliecards/register" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Register CharlieCard </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/charliecards/replace" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Replace CharlieCard </a> </li> </ul> </li> <li class="bg-[#165C96]"> <button class="py-3 px-4 flex justify-between w-full inline-block border border-[#165C96] focus:outline-none focus:border-yellow-500 focus:border" phx-click="[["toggle",{"to":"#auto_pay_sub_menu_inner_menu"}],["toggle",{"to":"#auto_pay_sub_menudown"}],["toggle",{"to":"#auto_pay_sub_menuup"}],["focus_first",{"to":"#auto_pay_sub_menu_inner_menu"}]]"> Auto-pay <svg xmlns="http://www.w3.org/2000/svg" id="auto_pay_sub_menuup" class="hidden inline justify-self-end w-4 up-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="auto_pay_sub_menudown" class=" inline w-4 down-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> </li> <li class="hidden" id="auto_pay_sub_menu_inner_menu"> <ul class="bg-[#E2ECF9]"> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/auto-pay" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Your Auto-pay subscriptions </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/auto-pay/add" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Add Auto-pay subscription </a> </li> </ul> </li> <li class="bg-[#165C96]"> <button class="py-3 px-4 flex justify-between w-full inline-block border border-[#165C96] focus:outline-none focus:border-yellow-500 focus:border" phx-click="[["toggle",{"to":"#reduced_fares_sub_menu_inner_menu"}],["toggle",{"to":"#reduced_fares_sub_menudown"}],["toggle",{"to":"#reduced_fares_sub_menuup"}],["focus_first",{"to":"#reduced_fares_sub_menu_inner_menu"}]]"> Reduced Fares <svg xmlns="http://www.w3.org/2000/svg" id="reduced_fares_sub_menuup" class="hidden inline justify-self-end w-4 up-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="reduced_fares_sub_menudown" class=" inline w-4 down-chevron" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> </li> <li class="hidden" id="reduced_fares_sub_menu_inner_menu"> <ul class="bg-[#E2ECF9]"> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> All Reduced Fares </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced/blind" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Blind </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced/disability" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Disability </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced/income-eligible" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Income-Eligible </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced/senior" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Senior </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced/free" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Free </a> </li> <li class="hover:bg-blue-300 focus:bg-blue-300"> <a href="/reduced/your-card" data-phx-link="redirect" data-phx-link-state="push" class="whitespace-nowrap inline-block w-full text-blue-600 py-2.5 px-6 text-sm"> Your Reduced Fares Card </a> </li> </ul> </li> <div class="p-1 mr-2 inline-block justify-center"> <div> <button type="button" class="inline-flex items-center justify-center w-full border-2 border-transparent rounded-md px-4 py-2 font-medium focus:outline-none focus:border-yellow-500 hover:bg-[#A1C6ED] hover:text-black" id="language-menu-button-mobile_navbar" aria-expanded="false" aria-haspopup="true" phx-click="[["toggle",{"to":"#language-menu-mobile_navbar"}]]"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64"/> </svg> Languages </button> </div> <div class="origin-top-right absolute mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" id="language-menu-mobile_navbar" role="menu" aria-orientation="vertical" aria-labelledby="language-menu-button-mobile_navbar" tabindex="-1"> <div class="py-1" role="none"> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-en" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"en"},"event":"set-locale"}]]"> English </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-es" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"es"},"event":"set-locale"}]]"> Español (Spanish) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-ht" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"ht"},"event":"set-locale"}]]"> Kreyòl Ayisyen (Haitian Creole) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-pt-BR" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"pt-BR"},"event":"set-locale"}]]"> Português (Portuguese) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-vi" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"vi"},"event":"set-locale"}]]"> Tiếng Việt (Vietnamese) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-zh-CN" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"zh-CN"},"event":"set-locale"}]]"> 中文简体 (Chinese Simplified) </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" tabindex="-1" id="language-menu-item-mobile_navbar-zh-TW" phx-click="[["dispatch",{"to":"#language-menu-mobile_navbar","detail":{"locale":"zh-TW"},"event":"set-locale"}]]"> 中文繁體 (Chinese Traditional) </a> </div> </div> </div> <li> <a target="_blank" href="https://www.mbta.com" class="py-3 px-4 w-full inline-block border border-blue-600 focus:outline-none focus:border-yellow-500 focus:border"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 inline mr-1" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0 6.75 6.75M4.5 12l6.75-6.75"/> </svg> Back to MBTA.com </a> </li> <li> <a href="/sign-in" data-phx-link="redirect" data-phx-link-state="push" class="py-3 px-4 flex justify-between w-full inline-block border border-blue-600 focus:outline-none focus:border-yellow-500 focus:border"> <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 inline mr-1" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/> </svg> Sign in </span> </a> </li> </ul> <span id="mobile-menu-wrap-end" tabindex="0" aria-hidden="true"></span> </div> </div> </aside> <div id="side_nav_open_background_overlay" class="md:hidden hidden fixed top-16 right-0 z-40 w-[calc(100vw-256px)] h-[calc(100vh-64px)] bg-[#1C1E23]/75" phx-click="[["set_attr",{"attr":["disabled","true"],"to":"#close_nav_menu_btn"}],["show",{"display":"inline-block","to":"#open_nav_menu_btn"}],["hide",{"to":"#close_nav_menu_btn"}],["remove_attr",{"attr":"disabled","to":"#open_nav_menu_btn"}],["hide",{"to":"#side_nav_menu"}],["hide",{"to":"#side_nav_open_background_overlay"}]]"> </div> </div> </nav> </header> <main class="pt-20 px-4 py-4 bg-transparent" id="main"> <div class="lg:flex items-start"> <div class="bg-white px-2 lg:px-12 py-12 shadow-sm"> <h1 data-test="login_page_title" class="font-bold font-helvetica leading-10 text-4xl mb-4"> Manage Your CharlieCards from Anywhere </h1> <section role="alert" class="bg-yellow-old-light border-yellow-old border p-3 rounded-lg max-w-3xl mb-4 mx-auto" data-test="auto-pay-banner"> <h4 class="font-bold flex font-helvetica items-center leading-6 mb-2 text-lg"> <span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/> </svg></span> Trying to manage your contactless payments? </h4> <p> This site is for managing your CharlieCards or signing up for Auto-pay. For the MBTA's new contactless payment system, visit <a href="https://charlie.mbta.com" class="inline-flex text-blue-500 underline" target="_blank"> charlie.mbta.com <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 mt-1 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M15.75 2.25H21a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 1-1.5 0V4.81L8.03 17.03a.75.75 0 0 1-1.06-1.06L19.19 3.75h-3.44a.75.75 0 0 1 0-1.5Zm-10.5 4.5a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5a1.5 1.5 0 0 0 1.5-1.5V10.5a.75.75 0 0 1 1.5 0v8.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V8.25a3 3 0 0 1 3-3h8.25a.75.75 0 0 1 0 1.5H5.25Z" clip-rule="evenodd"/> </svg> </a> instead. </p> </section> <p> Sign up for MyCharlie to get all the benefits of online card management and protection. </p> <aside class="bg-slate-100 border p-2 flex gap-2 mt-4 mb-8"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-none text-primary mt-[2px]" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/> </svg> <div> <p> At this time, <span class="font-inter font-semibold"> only standard CharlieCards can be registered </span> to your account. <a href="#" class="items-center pl-0 pt-0 pb-0 underline" target="_self" phx-click="[["show",{"to":"#standard-charliecard-info"}],["show",{"to":"#standard-charliecard-info-bg","transition":[["transition-all","transform","ease-out","duration-300"],["opacity-0"],["opacity-100"]]}],["show",{"to":"#standard-charliecard-info-container","transition":[["transition-all","transform","ease-out","duration-300"],["opacity-0","translate-y-4","sm:translate-y-0","sm:scale-95"],["opacity-100","translate-y-0","sm:scale-100"]]}],["set_attr",{"attr":["aria-hidden","false"],"to":"#standard-charliecard-info-container"}],["add_class",{"names":["overflow-hidden"],"to":"body"}],["focus",{"to":"#standard-charliecard-info-content"}]]"> <span class="underline text-blue-500">What is a standard CharlieCard?</span> </a> </p> <div id="standard-charliecard-info" phx-remove="[["hide",{"to":"#standard-charliecard-info-bg","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100"],["opacity-0"]]}],["hide",{"time":200,"to":"#standard-charliecard-info-container","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100","translate-y-0","sm:scale-100"],["opacity-0","translate-y-4","sm:translate-y-0","sm:scale-95"]]}],["set_attr",{"attr":["aria-hidden","true"],"to":"#standard-charliecard-info-container"}],["hide",{"to":"#standard-charliecard-info","transition":[["block"],["block"],["hidden"]]}],["remove_class",{"names":["overflow-hidden"],"to":"body"}],["pop_focus",{}]]" class="hidden relative z-[1000]"> <div id="standard-charliecard-info-bg" class="bg-[#1C1E23]/75 fixed inset-0 transition-opacity" aria-hidden="true"></div> <div class="fixed top-16 inset-0 overflow-y-auto" aria-labelledby="standard-charliecard-info-title" aria-describedby="standard-charliecard-info-description" role="dialog" aria-modal="true" tabindex="0"> <div class="flex min-h-full items-center justify-center mt-12"> <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8"> <div id="standard-charliecard-info-container" phx-hook="Phoenix.FocusWrap" class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-sm bg-white p-4 shadow-lg ring-1 transition" aria-hidden phx-key="escape" phx-window-keydown="[["hide",{"to":"#standard-charliecard-info-bg","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100"],["opacity-0"]]}],["hide",{"time":200,"to":"#standard-charliecard-info-container","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100","translate-y-0","sm:scale-100"],["opacity-0","translate-y-4","sm:translate-y-0","sm:scale-95"]]}],["set_attr",{"attr":["aria-hidden","true"],"to":"#standard-charliecard-info-container"}],["hide",{"to":"#standard-charliecard-info","transition":[["block"],["block"],["hidden"]]}],["remove_class",{"names":["overflow-hidden"],"to":"body"}],["pop_focus",{}]]"> <span id="standard-charliecard-info-container-start" tabindex="0" aria-hidden="true"></span> <div class="absolute top-3 right-3 text-black"> <button phx-click="[["hide",{"to":"#standard-charliecard-info-bg","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100"],["opacity-0"]]}],["hide",{"time":200,"to":"#standard-charliecard-info-container","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100","translate-y-0","sm:scale-100"],["opacity-0","translate-y-4","sm:translate-y-0","sm:scale-95"]]}],["set_attr",{"attr":["aria-hidden","true"],"to":"#standard-charliecard-info-container"}],["hide",{"to":"#standard-charliecard-info","transition":[["block"],["block"],["hidden"]]}],["remove_class",{"names":["overflow-hidden"],"to":"body"}],["pop_focus",{}]]" type="button" class="-m-3 flex-none p-3 opacity-80 hover:opacity-100" aria-label="close" id="close_modal_btn_standard-charliecard-info"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/> </svg> </button> </div> <h1 class="mb-4 text-3xl pr-8 font-semibold"> What is a "Standard" CharlieCard? </h1> <div id="standard-charliecard-info-content" tabindex="-1"> <img class="mb-4" src="/images/charliecard.png" alt="Standard CharlieCard serial number starting with the number 5 and ending in 5 to 10 additional digits in lower left corner."> <p class="mb-4"> Standard CharlieCards are reusable cards that can be loaded with money or passes to pay bus and subway fares. They're available at fare vending machines, retailers, and municipal locations throughout Greater Boston. </p> <p class="mb-4"> Other types of cards, like <a class="text-blue-500 underline" href="https://www.mbta.com/fares/reduced" target="_blank"> reduced fare cards<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 ml-1 inline-block" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M15.75 2.25H21a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 1-1.5 0V4.81L8.03 17.03a.75.75 0 0 1-1.06-1.06L19.19 3.75h-3.44a.75.75 0 0 1 0-1.5Zm-10.5 4.5a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5a1.5 1.5 0 0 0 1.5-1.5V10.5a.75.75 0 0 1 1.5 0v8.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V8.25a3 3 0 0 1 3-3h8.25a.75.75 0 0 1 0 1.5H5.25Z" clip-rule="evenodd"/> </svg> </a> and <a class="text-blue-500 underline" href="https://www.mbta.com/pass-program" target="_blank">corporate program passes<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 ml-1 inline-block" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M15.75 2.25H21a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 1-1.5 0V4.81L8.03 17.03a.75.75 0 0 1-1.06-1.06L19.19 3.75h-3.44a.75.75 0 0 1 0-1.5Zm-10.5 4.5a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5a1.5 1.5 0 0 0 1.5-1.5V10.5a.75.75 0 0 1 1.5 0v8.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V8.25a3 3 0 0 1 3-3h8.25a.75.75 0 0 1 0 1.5H5.25Z" clip-rule="evenodd"/> </svg></a>, cannot be registered with MyCharlie at this time. </p> <div class="flex justify-end items-center gap-x-2"> <button type="button" class="flex-row items-center justify-center whitespace-nowrap disabled:cursor-not-allowed h-10 rounded-[3px] px-4 transition-colors text-base bg-brand-primary hover:bg-brand-primary-darkest active:bg-brand-primary-darkest text-white disabled:bg-gray-lighter disabled:text-white disabled:border-none flex" phx-click="[["hide",{"to":"#standard-charliecard-info-bg","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100"],["opacity-0"]]}],["hide",{"time":200,"to":"#standard-charliecard-info-container","transition":[["transition-all","transform","ease-in","duration-200"],["opacity-100","translate-y-0","sm:scale-100"],["opacity-0","translate-y-4","sm:translate-y-0","sm:scale-95"]]}],["set_attr",{"attr":["aria-hidden","true"],"to":"#standard-charliecard-info-container"}],["hide",{"to":"#standard-charliecard-info","transition":[["block"],["block"],["hidden"]]}],["remove_class",{"names":["overflow-hidden"],"to":"body"}],["pop_focus",{}]]"> Close </button> </div> </div> <span id="standard-charliecard-info-container-end" tabindex="0" aria-hidden="true"></span> </div> </div> </div> </div> </div> </div> </aside> <a href="/sign-up" class="flex-row items-center justify-center whitespace-nowrap disabled:cursor-not-allowed h-10 rounded-[3px] px-4 transition-colors text-base bg-brand-primary hover:bg-brand-primary-darkest active:bg-brand-primary-darkest text-white disabled:bg-gray-lighter disabled:text-white disabled:border-none inline-flex bg-blue-500 hover:bg-blue-600 inline-flex items-center justify-center py-2 px-3 rounded text-lg text-white transition-colors w-full" role="button"> Create your account </a> <div class="text-center mt-4 mb-2">Already have an account?</div> <a href="/sign-in" type="button" class="flex-row items-center justify-center whitespace-nowrap disabled:cursor-not-allowed h-10 rounded-[3px] px-4 transition-colors text-base bg-[white] hover:bg-brand-primary-lightest hover:text-brand-primary-darkest hover:border-brand-primary-darkest active:bg-brand-primary-lightest text-brand-primary border border-brand-primary disabled:bg-gray-lighter disabled:text-white disabled:border-none inline-flex py-2 px-3 text-lg w-full"> Sign in </a> <p class="mt-4"> <span class="font-inter font-semibold">Note:</span> Riders can no longer reload their CharlieCards online using MyCharlie. Commuter Rail, Ferry, and Express Bus passes on CharlieTickets are still available for <a class="text-blue-500 underline" href="https://commerce.mbta.com/Passes/"> online purchase. </a> </p> </div> <div class="px-2 lg:px-12 py-4 grid grid-cols-1 lg:grid-cols-2 gap-4"> <div> <div class="mb-2"> <span class="bg-blue-600 rounded-full inline-flex p-2"> <svg class="h-[1em] w-[1em] fill-current text-white text-xl lg:text-2xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">  <path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8l0 378.1C394 378 431.1 230.1 432 141.4L256 66.8s0 0 0 0z"></path> </svg> </span> </div> <h2 data-test="" class="font-bold font-helvetica leading-8 text-3xl mb-2"> No Worries Protection </h2> <div> If your CharlieCard gets lost, stolen, or damaged, we'll transfer the balance to a new one. </div> </div> <div> <div class="mb-2"> <span class="bg-blue-600 rounded-full inline-flex p-2"> <svg class="h-[1em] w-[1em] fill-current text-white text-xl lg:text-2xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">  <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path> </svg> </span> </div> <h2 data-test="" class="font-bold font-helvetica leading-8 text-3xl mb-2"> Hassle-free Replacement </h2> <div> Request a replacement with just a few clicks and get a new card in 7-10 business days. </div> </div> <div> <div class="mb-2"> <span class="bg-blue-600 rounded-full inline-flex p-2"> <svg class="h-[1em] w-[1em] fill-current text-white text-xl lg:text-2xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">  <path d="M326.7 403.7c-22.1 8-45.9 12.3-70.7 12.3s-48.7-4.4-70.7-12.3l-.8-.3c-30-11-56.8-28.7-78.6-51.4C70 314.6 48 263.9 48 208C48 93.1 141.1 0 256 0S464 93.1 464 208c0 55.9-22 106.6-57.9 144c-1 1-2 2.1-3 3.1c-21.4 21.4-47.4 38.1-76.3 48.6zM256 91.9c-11.1 0-20.1 9-20.1 20.1l0 6c-5.6 1.2-10.9 2.9-15.9 5.1c-15 6.8-27.9 19.4-31.1 37.7c-1.8 10.2-.8 20 3.4 29c4.2 8.8 10.7 15 17.3 19.5c11.6 7.9 26.9 12.5 38.6 16l2.2 .7c13.9 4.2 23.4 7.4 29.3 11.7c2.5 1.8 3.4 3.2 3.7 4c.3 .8 .9 2.6 .2 6.7c-.6 3.5-2.5 6.4-8 8.8c-6.1 2.6-16 3.9-28.8 1.9c-6-1-16.7-4.6-26.2-7.9c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-2.2-.7-4.3-1.5-6.4-2.1c-10.5-3.5-21.8 2.2-25.3 12.7s2.2 21.8 12.7 25.3c1.2 .4 2.7 .9 4.4 1.5c7.9 2.7 20.3 6.9 29.8 9.1l0 6.4c0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1l0-5.5c5.3-1 10.5-2.5 15.4-4.6c15.7-6.7 28.4-19.7 31.6-38.7c1.8-10.4 1-20.3-3-29.4c-3.9-9-10.2-15.6-16.9-20.5c-12.2-8.8-28.3-13.7-40.4-17.4l-.8-.2c-14.2-4.3-23.8-7.3-29.9-11.4c-2.6-1.8-3.4-3-3.6-3.5c-.2-.3-.7-1.6-.1-5c.3-1.9 1.9-5.2 8.2-8.1c6.4-2.9 16.4-4.5 28.6-2.6c4.3 .7 17.9 3.3 21.7 4.3c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-4.4-1.2-14.4-3.2-21-4.4l0-6.3c0-11.1-9-20.1-20.1-20.1zM48 352l16 0c19.5 25.9 44 47.7 72.2 64L64 416l0 32 192 0 192 0 0-32-72.2 0c28.2-16.3 52.8-38.1 72.2-64l16 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48z"></path> </svg> </span> </div> <h2 data-test="" class="font-bold font-helvetica leading-8 text-3xl mb-2"> Automatic Payments </h2> <div> Sign up for Auto-pay so you never have to worry about reloading your card again. Pause or cancel at any time. </div> </div> <div> <div class="mb-2"> <span class="bg-blue-600 rounded-full inline-flex p-2"> <svg class="h-[1em] w-[1em] fill-current text-white text-xl lg:text-2xl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">  <path d="M0 80L0 229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7L48 32C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path> </svg> </span> </div> <h2 data-test="" class="font-bold font-helvetica leading-8 text-3xl mb-2"> More Coming Soon </h2> <p> Reduced fare cardholders will be able to get reduced monthly passes automatically loaded onto a standard CharlieCard. </p> </div> </div> </div> </main> <footer class="bg-blue-old-deep py-4 lg:py-12 px-2 lg:px-12 text-white sticky top-[100vh] footer-links"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="max-w-prose text-pretty"> <p class="text-xl lg:text-2xl text-white">Need Help?</p> <p class="mb-3 text-white"> If you have questions about your reduced fare application or want to give us feedback, please fill out the MBTA <a class="text-blue-300" href="https://www.mbta.com/customer-support" target="_blank"> customer support </a> form. </p> <p class="mb-0 text-white"> For all other questions, call<br> <a class="text-blue-300" href="tel:1-888-844-0355" target="_blank">1-888-844-0355</a> or email <a class="text-blue-300" href="mailto:charliecardonline@mbta.com" target="_blank"> charliecardonline@mbta.com</a>. </p> </div> <div> <p class="text-xl lg:text-2xl text-white">Languages</p> <ul class="list-unstyled"> <li class="mt-2"> <a href="#" class="text-white font-bold no-underline" phx-click="[["dispatch",{"detail":{"locale":"en"},"event":"set-locale"}]]"> English </a> </li> <li class="mt-2"> <a href="#" class="text-blue-300 underline" phx-click="[["dispatch",{"detail":{"locale":"es"},"event":"set-locale"}]]"> Español (Spanish) </a> </li> <li class="mt-2"> <a href="#" class="text-blue-300 underline" phx-click="[["dispatch",{"detail":{"locale":"ht"},"event":"set-locale"}]]"> Kreyòl Ayisyen (Haitian Creole) </a> </li> <li class="mt-2"> <a href="#" class="text-blue-300 underline" phx-click="[["dispatch",{"detail":{"locale":"pt-BR"},"event":"set-locale"}]]"> Português (Portuguese) </a> </li> <li class="mt-2"> <a href="#" class="text-blue-300 underline" phx-click="[["dispatch",{"detail":{"locale":"vi"},"event":"set-locale"}]]"> Tiếng Việt (Vietnamese) </a> </li> <li class="mt-2"> <a href="#" class="text-blue-300 underline" phx-click="[["dispatch",{"detail":{"locale":"zh-CN"},"event":"set-locale"}]]"> 中文简体 (Chinese Simplified) </a> </li> <li class="mt-2"> <a href="#" class="text-blue-300 underline" phx-click="[["dispatch",{"detail":{"locale":"zh-TW"},"event":"set-locale"}]]"> 中文繁體 (Chinese Traditional) </a> </li> </ul> </div> </div> <div class="border !border-[#a1c6ed] mr-4 mt-4 mb-4"></div> <p class="text-xs mb-0 text-center lg:text-start"> © Massachusetts Bay Transportation Authority, all rights reserved. </p> <div class="text-center lg:text-start"> <a class="text-blue-300" href="https://www.mbta.com/policies/privacy-policy" target="_blank"> Privacy Policy </a> <a class="text-blue-300 ml-2" href="https://www.mbta.com/policies/terms-use" target="_blank"> Terms of Use </a> </div> </footer> </div> </body> </html>

CINXE.COM