@font-face {
font-family: "Lexend";
font-style: normal;
font-weight: 100 900;
font-display: fallback;
src: url("/fonts/lexend-100-900.woff2") format("woff2");
}
:root {
--raspberry: hsl(333 72% 37%);
--raspberry_dark: hsl(333 74% 29%);
--plum: hsl(305 26% 14%);
--plum_tile: hsl(305 21% 22%);
--plum_text: hsl(305 12% 36%);
--sunflower: hsl(45 89% 61%);
--blush: hsl(340 60% 97%);
--blush_deep: hsl(338 45% 92%);
--white: hsl(0 0% 100%);
--card_shadow: 0 0.0625rem 0.25rem hsl(305 26% 14% / 0.06), 0 0.75rem 2rem hsl(305 26% 14% / 0.09);
--round: 1.25rem;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--white);
color: var(--plum);
font-family: "Lexend", "Segoe UI", system-ui, sans-serif;
font-size: 1.125rem;
line-height: 1.65;
}
img, picture, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: var(--raspberry);
text-decoration-thickness: 0.0625rem;
text-underline-offset: 0.2rem;
}
a:hover {
color: var(--raspberry_dark);
text-decoration-thickness: 0.125rem;
}
:focus-visible {
outline: 0.1875rem solid var(--raspberry);
outline-offset: 0.1875rem;
}
main:focus {
outline: none;
}
h1, h2, h3 {
margin: 0 0 1rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
text-wrap: balance;
}
h1 {
font-size: 2.25rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.25rem;
line-height: 1.3;
}
p, ul, ol, dl {
margin: 0 0 1rem;
}
p {
max-width: 68ch;
}
ul, ol {
padding-left: 1.25rem;
}
li {
margin-bottom: 0.375rem;
}
li::marker {
color: var(--raspberry);
}
strong {
font-weight: 700;
}
.page_width {
width: min(100% - 2rem, 75rem);
margin-inline: auto;
}
.visually_hidden {
position: absolute;
width: 0.0625rem;
height: 0.0625rem;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip_link {
position: absolute;
top: -6rem;
left: 1rem;
z-index: 20;
padding: 0.75rem 1.25rem;
border-radius: 99rem;
background: var(--plum);
color: var(--white);
font-weight: 600;
text-decoration: none;
}
.skip_link:focus {
top: 1rem;
color: var(--white);
}
.action_button, .outline_action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3rem;
padding: 0.625rem 1.5rem;
border-radius: 99rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.action_button {
border: 0.125rem solid var(--raspberry);
background: var(--raspberry);
color: var(--white);
}
.action_button:hover {
border-color: var(--raspberry_dark);
background: var(--raspberry_dark);
color: var(--white);
}
.outline_action {
border: 0.125rem solid var(--plum);
background: transparent;
color: var(--plum);
}
.outline_action:hover {
background: var(--plum);
color: var(--white);
}
.button_row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.button_row .action_button, .button_row .outline_action {
flex: 1 1 auto;
min-height: 3.5rem;
padding-inline: 1.75rem;
font-size: 1.0625rem;
}
.plum_band {
background: var(--plum);
color: var(--white);
}
.plum_band a {
color: var(--sunflower);
}
.plum_band a:hover {
color: var(--white);
}
.plum_band :focus-visible {
outline-color: var(--sunflower);
}
.plum_band .action_button {
border-color: var(--sunflower);
background: var(--sunflower);
color: var(--plum);
}
.plum_band .action_button:hover {
border-color: var(--white);
background: var(--white);
color: var(--plum);
}
.plum_band .outline_action {
border-color: var(--white);
color: var(--white);
}
.plum_band .outline_action:hover {
background: var(--white);
color: var(--plum);
}
.blush_band {
background: var(--blush);
}
.band_intro {
max-width: 60ch;
font-size: 1.125rem;
}
.site_header {
position: relative;
z-index: 5;
background: var(--white);
}
.header_row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 4.75rem;
}
.brand_link {
display: inline-flex;
align-items: center;
gap: 0.625rem;
color: var(--plum);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
}
.brand_link:hover {
color: var(--plum);
}
.brand_link img {
width: 2.5rem;
height: 2.5rem;
}
.menu_button, .menu_close {
min-height: 2.75rem;
padding: 0 1.25rem;
border: 0.125rem solid var(--plum);
border-radius: 99rem;
background: var(--white);
color: var(--plum);
font: inherit;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.menu_close {
display: block;
margin: 0 0 0.75rem auto;
}
.site_menu:popover-open {
position: fixed;
inset: 0.75rem 0.75rem auto;
width: auto;
max-height: calc(100dvh - 1.5rem);
margin: 0;
padding: 1.25rem 1.25rem 1.5rem;
overflow: auto;
border: 0;
border-radius: var(--round);
background: var(--white);
color: var(--plum);
box-shadow: var(--card_shadow);
}
.site_menu::backdrop {
background: hsl(305 26% 14% / 0.5);
}
.menu_links {
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
}
.menu_links li {
margin: 0;
}
.menu_links a {
display: block;
padding: 0.75rem 0.75rem;
border-radius: 0.75rem;
color: var(--plum);
font-size: 1.25rem;
font-weight: 600;
text-decoration: none;
}
.menu_links a:hover, .menu_links a[aria-current] {
background: var(--blush);
}
.menu_actions {
display: grid;
gap: 0.75rem;
}
.school_run {
padding-block: 2.5rem 3.5rem;
background: var(--blush);
}
.school_run_grid {
display: grid;
gap: 2.5rem;
align-items: center;
}
.school_run h1 {
margin-bottom: 1.25rem;
font-size: 2.5rem;
line-height: 1.08;
}
.school_run_line {
max-width: 36ch;
font-size: 1.25rem;
line-height: 1.55;
}
.school_run_photo img {
width: 100%;
border-radius: 2rem;
box-shadow: var(--card_shadow);
}
.schedule_band, .career_section, .match_section, .hire_band, .state_section, .support_band, .question_section {
padding-block: 3.5rem;
}
.schedule_tiles, .job_cards, .support_items, .link_cards {
display: grid;
gap: 1rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.schedule_tiles {
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.schedule_tile {
position: relative;
margin: 0;
padding: 1.5rem 1.5rem 1.75rem;
border-radius: var(--round);
background: var(--plum_tile);
}
.schedule_tile h3 {
margin-bottom: 0.5rem;
font-size: 1.375rem;
}
.schedule_tile h3 a {
color: var(--sunflower);
text-decoration: none;
}
.schedule_tile p {
margin: 0;
color: var(--white);
}
.schedule_tile:hover {
background: hsl(305 21% 27%);
}
.schedule_tile:hover h3 a {
color: var(--sunflower);
text-decoration: underline;
}
.job_cards {
grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
gap: 1.25rem;
}
.job_card, .link_card {
position: relative;
margin: 0;
padding: 1.5rem;
border-radius: var(--round);
}
.job_card {
background: var(--blush);
}
.job_card h3, .link_card h3 {
margin-bottom: 0.375rem;
font-size: 1.1875rem;
}
.job_card h3 a, .link_card h3 a {
color: var(--plum);
text-decoration: none;
}
.schedule_tile h3 a::after, .job_card h3 a::after, .link_card h3 a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--round);
}
.job_card:hover {
background: var(--white);
box-shadow: var(--card_shadow);
}
.job_card:hover h3 a, .link_card:hover h3 a {
color: var(--raspberry);
text-decoration: underline;
}
.schedule_tile:focus-within, .job_card:focus-within, .link_card:focus-within {
outline: 0.1875rem solid var(--raspberry);
outline-offset: 0.1875rem;
}
.schedule_tile:focus-within {
outline-color: var(--sunflower);
}
.schedule_tile h3 a:focus-visible, .job_card h3 a:focus-visible, .link_card h3 a:focus-visible {
outline: none;
}
.job_card p {
margin: 0 0 0.75rem;
font-size: 1rem;
}
.job_card .job_hours {
margin: 0;
color: var(--plum_text);
font-size: 0.875rem;
}
.split_grid {
display: grid;
gap: 2.5rem;
align-items: center;
}
.split_grid picture img {
width: 100%;
border-radius: var(--round);
}
.match_steps, .step_list {
display: grid;
gap: 1.25rem;
margin: 1.5rem 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.match_steps li, .step_list li {
position: relative;
min-height: 2.75rem;
margin: 0;
padding-left: 3.75rem;
counter-increment: step;
}
.match_steps li::before, .step_list li::before {
content: counter(step);
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 99rem;
background: var(--raspberry);
color: var(--white);
font-weight: 700;
}
.step_list li {
padding-top: 0.4rem;
}
.match_steps h3 {
margin-bottom: 0.25rem;
font-size: 1.1875rem;
}
.match_steps p {
margin: 0;
}
.hire_band {
background: var(--blush);
}
.hire_points {
display: grid;
gap: 1rem;
margin: 1.5rem 0 2rem;
padding: 0;
list-style: none;
}
.hire_points li {
margin: 0;
padding: 1.25rem 1.5rem;
border-radius: var(--round);
background: var(--white);
box-shadow: var(--card_shadow);
}
.hire_points h3 {
margin-bottom: 0.25rem;
font-size: 1.125rem;
}
.hire_points p {
margin: 0;
font-size: 1rem;
}
.state_layout {
display: grid;
gap: 2.5rem;
align-items: start;
margin-top: 2rem;
}
.state_map {
width: 100%;
height: auto;
font-family: "Lexend", "Segoe UI", system-ui, sans-serif;
font-weight: 600;
}
.state_tile rect {
fill: var(--raspberry);
}
.state_tile text {
fill: var(--white);
}
.state_tile:hover rect {
fill: var(--raspberry_dark);
}
.state_tile:focus-visible {
outline: none;
}
.state_tile:focus-visible rect {
stroke: var(--plum);
stroke-width: 0.3125rem;
}
.other_tile rect {
fill: var(--blush_deep);
}
.other_tile text {
fill: var(--plum_text);
}
.state_index h3 {
font-size: 1.125rem;
}
.state_list {
margin: 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: 1.5rem;
}
.state_list li {
margin: 0;
break-inside: avoid;
}
.state_list a {
display: inline-block;
padding-block: 0.45rem;
}
.support_items {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.support_items li {
margin: 0;
padding: 1.5rem;
border-radius: var(--round);
background: var(--plum_tile);
}
.support_items h3 {
color: var(--sunflower);
font-size: 1.25rem;
}
.support_items p {
margin: 0 0 0.75rem;
font-size: 1rem;
}
.support_items p:last-child {
margin: 0;
}
.question_list {
display: grid;
gap: 0.75rem;
max-width: 52rem;
}
.question_list details {
border-radius: 1rem;
background: var(--blush);
}
.question_list summary {
padding: 1.125rem 1.5rem;
font-weight: 600;
line-height: 1.45;
cursor: pointer;
}
.question_list summary::marker {
color: var(--raspberry);
}
.question_list details p {
margin: 0;
padding: 0 1.5rem 1.25rem;
}
.page_band {
padding-block: 1.25rem 2.75rem;
background: var(--blush);
}
.band_inner {
display: grid;
gap: 2rem;
align-items: center;
}
.crumb_trail ol {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
margin: 0 0 1.5rem;
padding: 0;
font-size: 0.9375rem;
list-style: none;
}
.crumb_trail li {
margin: 0;
}
.crumb_trail li + li::before {
content: "/";
margin-right: 0.5rem;
color: var(--plum_text);
}
.crumb_trail a {
color: var(--plum);
}
.crumb_trail [aria-current] {
color: var(--plum_text);
}
.page_band h1 {
font-size: 2.25rem;
line-height: 1.1;
}
.band_summary {
max-width: 54ch;
font-size: 1.1875rem;
line-height: 1.55;
}
.band_photo img {
width: 100%;
border-radius: 1.75rem;
box-shadow: var(--card_shadow);
}
.page_columns {
display: grid;
gap: 2.5rem;
padding-block: 2.5rem 3.5rem;
}
.glance_card {
align-self: start;
padding: 1.75rem;
border-radius: var(--round);
background: var(--white);
box-shadow: var(--card_shadow);
}
.glance_card h2 {
font-size: 1.375rem;
}
.glance_card dl {
display: grid;
gap: 1rem;
margin: 0;
}
.glance_card dt {
color: var(--plum_text);
font-size: 0.9375rem;
}
.glance_card dd {
margin: 0.125rem 0 0;
font-weight: 600;
line-height: 1.45;
}
.page_text {
min-width: 0;
}
.text_section {
margin-bottom: 2.75rem;
}
.text_section:last-child {
margin-bottom: 0;
}
.info_cards {
display: grid;
gap: 1rem;
margin: 1.5rem 0;
}
.info_card {
padding: 1.5rem;
border-radius: var(--round);
background: var(--blush);
}
.info_card h3 {
font-size: 1.1875rem;
}
.info_card p, .info_card li {
font-size: 1rem;
}
.info_card > :last-child {
margin-bottom: 0;
}
.table_wrap {
margin: 1.5rem 0;
overflow-x: auto;
border-radius: var(--round);
background: var(--white);
box-shadow: var(--card_shadow);
}
.table_wrap table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
.table_wrap caption {
padding: 1.125rem 1.25rem 0.75rem;
font-weight: 700;
text-align: left;
}
.table_wrap th, .table_wrap td {
padding: 0.75rem 1.25rem;
text-align: left;
vertical-align: top;
}
.table_wrap thead th {
background: var(--plum);
color: var(--white);
font-weight: 600;
}
.table_wrap tbody tr:nth-child(even) {
background: var(--blush);
}
.table_wrap tbody th {
font-weight: 600;
}
.week_wrap {
margin: 1.5rem 0 1rem;
padding: 1.25rem 1rem 1rem;
overflow-x: auto;
border-radius: var(--round);
background: var(--plum);
color: var(--white);
}
.week_grid {
width: 100%;
min-width: 36rem;
border-collapse: separate;
border-spacing: 0.375rem;
font-size: 0.875rem;
}
.week_grid caption {
padding: 0 0.375rem 0.5rem;
color: var(--white);
font-size: 1.0625rem;
font-weight: 700;
text-align: left;
}
.week_grid thead th {
padding: 0.25rem;
color: var(--sunflower);
font-weight: 600;
text-align: center;
}
.week_grid tbody th {
width: 7.5rem;
padding: 0.5rem 0.25rem;
color: var(--white);
font-weight: 500;
line-height: 1.3;
text-align: left;
}
.week_grid td {
height: 3.75rem;
padding: 0.5rem 0.375rem;
border-radius: 0.75rem;
line-height: 1.3;
text-align: center;
vertical-align: middle;
}
.week_grid .corner_cell {
height: auto;
}
.hours_cell {
background: var(--raspberry);
color: var(--white);
font-weight: 600;
}
.home_cell {
background: var(--plum_tile);
color: hsl(0 0% 100% / 0.88);
}
.week_note, .page_date {
color: var(--plum_text);
font-size: 0.9375rem;
}
.related_section {
padding-block: 3rem;
}
.link_cards {
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.link_card {
background: var(--white);
box-shadow: var(--card_shadow);
}
.link_card p {
margin: 0;
font-size: 1rem;
}
.closing_band {
padding-block: 3.5rem;
}
.closing_band h2 {
font-size: 2rem;
}
.closing_band p {
font-size: 1.125rem;
}
.form_section {
margin: 1.5rem 0 0;
padding: 1.5rem 1.25rem;
border-radius: var(--round);
background: var(--blush);
}
.form_frame {
min-height: 50.6875rem;
overflow: hidden;
border-radius: 1rem;
background: var(--white);
}
.form_frame iframe {
display: block;
width: 100%;
min-height: 50.6875rem;
}
.missing_page {
padding-block: 4rem 5rem;
}
.site_footer {
padding-block: 3.5rem 2rem;
font-size: 0.9375rem;
}
.footer_name {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.75rem;
font-size: 1.125rem;
font-weight: 700;
}
.footer_name img {
width: 2.5rem;
height: 2.5rem;
}
.footer_lead p {
max-width: 46ch;
}
.link_columns {
display: grid;
gap: 2rem;
margin: 2.5rem 0;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.link_columns h2 {
margin-bottom: 0.5rem;
color: var(--sunflower);
font-size: 1rem;
letter-spacing: 0;
}
.link_columns ul, .legal_line ul {
margin: 0;
padding: 0;
list-style: none;
}
.link_columns li, .legal_line li {
margin: 0;
}
.link_columns a, .legal_line a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--white);
text-decoration: none;
}
.link_columns a:hover, .legal_line a:hover {
color: var(--white);
text-decoration: underline;
}
.state_column ul, .career_column ul {
columns: 2;
column-gap: 1rem;
}
.legal_line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 2rem;
padding-top: 1.25rem;
border-top: 0.0625rem solid hsl(0 0% 100% / 0.22);
}
.legal_line p {
margin: 0;
}
.legal_line ul {
display: flex;
flex-wrap: wrap;
gap: 0 1.5rem;
}
@media (min-width: 40em) {
h1 {
font-size: 2.75rem;
}
h2 {
font-size: 2rem;
}
.school_run h1 {
font-size: 3.25rem;
}
.page_band h1 {
font-size: 2.75rem;
}
.info_cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form_section {
padding: 2rem;
}
.button_row .action_button, .button_row .outline_action {
flex: 0 0 auto;
}
.week_wrap {
padding: 1.5rem 1.25rem 1.25rem;
}
}
@media (min-width: 62em) {
.menu_button, .menu_close {
display: none;
}
.site_menu, .site_menu:popover-open {
position: static;
inset: auto;
display: flex;
align-items: center;
gap: 1.25rem;
width: auto;
height: auto;
max-height: none;
margin: 0;
padding: 0;
overflow: visible;
border: 0;
background: transparent;
color: inherit;
box-shadow: none;
}
.brand_link {
font-size: 1.0625rem;
}
.menu_links {
display: flex;
gap: 1.125rem;
margin: 0;
}
.menu_links a {
padding: 0.5rem 0;
border-radius: 0;
font-size: 0.9375rem;
font-weight: 500;
}
.menu_links a:hover, .menu_links a[aria-current] {
background: none;
color: var(--raspberry);
text-decoration: underline;
text-decoration-thickness: 0.125rem;
text-underline-offset: 0.45rem;
}
.menu_actions {
display: flex;
gap: 0.5rem;
}
.career_column ul {
columns: 1;
}
.menu_actions a {
min-height: 2.75rem;
padding: 0.5rem 1rem;
font-size: 0.9375rem;
}
.school_run {
padding-block: 4.5rem 5.5rem;
}
.school_run_grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 4rem;
}
.school_run h1 {
font-size: 3.75rem;
}
.schedule_band, .career_section, .match_section, .hire_band, .state_section, .support_band, .question_section {
padding-block: 5rem;
}
.split_grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 4.5rem;
}
.state_layout {
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: 3.5rem;
}
.page_band {
padding-block: 1.5rem 3.5rem;
}
.band_with_photo {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 3.5rem;
}
.page_band h1 {
font-size: 3.25rem;
}
.page_columns {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 3.5rem;
padding-block: 4rem 4.5rem;
}
.page_text {
grid-column: 1;
grid-row: 1;
}
.glance_card {
position: sticky;
top: 1.5rem;
grid-column: 2;
grid-row: 1;
}
.related_section {
padding-block: 4rem;
}
.closing_band {
padding-block: 4.5rem;
}
.closing_band h2 {
font-size: 2.5rem;
}
}