/* Menu styles */ #menu { overflow: hidden; /* Put the header margins inside the so the #menu background extends to the edges. */ } #menu, #attempts { background-image: url(../numbers-dark.png); } .menu-topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 4rem; padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid oklch(0.48 0.09 305); background-color: oklch(0.2 0.045 295 / 96%); box-shadow: 0 2px 12px oklch(0 0 0 / 30%); backdrop-filter: blur(12px); } .menu-topbar-without-points { grid-template-columns: minmax(0, 1fr) auto; } .menu-topbar-brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: white; font-size: 1.2rem; font-weight: 700; text-decoration: none; } .menu-topbar-logo { width: 3rem; height: 3rem; flex: none; object-fit: contain; } .menu-topbar-points { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.9rem; border: 1px solid oklch(0.78 0.15 83); border-radius: 999px; background-color: oklch(0.31 0.075 80); color: oklch(0.94 0.13 90); font-weight: 700; white-space: nowrap; } .menu-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } #menu .menu-topbar div { margin: 0; } .theme-switch { position: static; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; aspect-ratio: 1; padding: 0; border: 1px solid oklch(0.66 0.03 295); border-radius: 50%; background-color: oklch(0.28 0.03 295); color: white; box-shadow: none; font-size: 1.35rem; line-height: 1; cursor: pointer; } .menu-auth-button { padding: 0.55rem 1rem; border: 1px solid oklch(0.72 0.13 303); border-radius: 999px; color: white; font-weight: 700; text-decoration: none; white-space: nowrap; } .menu-auth-button[hidden] { display: none; } .menu-login-button { background-color: oklch(0.52 0.18 303); } .menu-login-button:hover, .menu-login-button:focus-visible { background-color: oklch(0.59 0.19 303); } .menu-settings-button { background-color: transparent; color: oklch(0.86 0.09 303); } .menu-settings-button:hover, .menu-settings-button:focus-visible { background-color: oklch(0.52 0.18 303 / 18%); } .menu-auth-label-short { display: none; } @media (max-width: 42rem) { .menu-topbar { gap: 0.5rem; padding-inline: 0.6rem; } .menu-topbar-brand span, .menu-topbar-points-label { display: none; } .menu-topbar-actions { gap: 0.5rem; } .menu-auth-button { padding-inline: 0.75rem; } .menu-auth-label-full { display: none; } .menu-auth-label-short { display: inline; } } @media (max-width: 28rem) { .menu-auth-label-short { display: none; } } .menu-header-1 { font-size: 40px; background-color: oklch(36.798% 0.17021 323.06); text-align: center; font-weight: bold; margin: none; padding: 0.3em; text-shadow: 3px 3px black; } .menu-header-2 { font-size: 30px; border-radius: 0px; border: 0px; width: 16em; max-width: 100%; } #menu div { margin: 0.5em; } #jump-back-in { max-width: 80rem; margin: var(--space-jump-xl) auto; padding-inline: clamp(0.75rem, 3vw, var(--space-jump-xl)); } #jump-back-in-heading { margin: 0 0 var(--space-jump-md); font-size: clamp(1.7rem, 3vw, 2.25rem); font-style: normal; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-align: start; } #menu #jump-back-in div { margin: 0; } .jump-back-in-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-jump-md); } .jump-back-in-card { display: grid; min-width: 0; min-height: 18rem; box-sizing: border-box; grid-template-rows: auto auto minmax(var(--space-jump-lg), 1fr) auto auto; padding: clamp(var(--space-jump-lg), 4vw, var(--space-jump-xl)); border: var(--rule-jump) solid var(--color-jump-border); border-radius: var(--radius-jump-card); background-color: color-mix( in oklch, var(--section-color) calc(20% + var(--jump-proficiency, 0) * 0.8%), transparent ); color: var(--color-jump-ink); text-decoration: none; text-shadow: none; box-shadow: none; transition: transform var(--dur-jump-fast) var(--ease-jump-out); } .jump-back-in-card.is-finished :is(.jump-back-in-time, .jump-back-in-label, .jump-back-in-points) { color: oklch(89.974% 0.00765 260.877); } .jump-back-in-card:focus-visible { outline: 3px solid var(--color-jump-focus); outline-offset: 3px; } .jump-back-in-card:active { transform: translateY(1px); } .jump-back-in-time { color: var(--color-jump-muted); font-size: var(--text-jump-meta); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-transform: none; } .jump-back-in-title { min-width: 0; margin-top: var(--space-jump-sm) !important; font-size: var(--text-jump-title); font-style: normal; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; overflow-wrap: anywhere; } .jump-back-in-details { display: grid; grid-row: 4; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-jump-md); } .jump-back-in-proficiency { display: grid; gap: 0; } .jump-back-in-value { font-size: var(--text-jump-stat); font-weight: 800; letter-spacing: -0.06em; line-height: 0.95; } .jump-back-in-label, .jump-back-in-points { color: var(--color-jump-muted); font-size: var(--text-jump-body); font-weight: 500; line-height: 1.25; } .jump-back-in-points { padding-bottom: 0.1rem; text-align: end; white-space: nowrap; } .jump-back-in-action { display: flex; grid-row: 5; align-items: center; justify-content: space-between; margin-top: var(--space-jump-lg) !important; padding-top: var(--space-jump-lg); border-top: var(--rule-jump) solid var(--color-jump-rule); font-size: 1.08rem; font-weight: 800; line-height: 1; white-space: nowrap; } .jump-back-in-arrow { font-size: 1.6rem; font-weight: 500; line-height: 0.8; transition: transform var(--dur-jump-fast) var(--ease-jump-out); } #menu button:not(.theme-toggle) { text-shadow: 1px 1px black; /*Not sure why the following is not giving us border on the menu buttons. */ border: 1px white; margin-top: 0.2em; } div button { /*The following line changes the shape of the menu buttons from rounded to square border-radius: 0.5em; */ border-radius: 1em; } :is(#menu, #attempts) .lesson-practice-decks { --section-color: oklch(0.62 0.24 345); } :is(#menu, #attempts) .test-decks { --section-color: oklch(0.62 0.24 345); } :is(#menu, #attempts) .free-decks { --section-color: oklch(0.591 0.293 322.896); } :is(#menu, #attempts) .basic-counting-decks { --section-color: oklch(0.558 0.288 302.321); } :is(#menu, #attempts) .skip-counting-decks { --section-color: oklch(44.228% 0.26211 282.154); } :is(#menu, #attempts) .addition-and-subtraction-decks { --section-color: oklch(48.608% 0.27015 264.404); } :is(#menu, #attempts) .multiplication-and-division-decks { --section-color: oklch(53.024% 0.1334 245.093); } :is(#menu, #attempts) .negative-numbers { --section-color: hsl(181, 99%, 34%); } :is(#menu, #attempts) .fractions-decks { --section-color: oklch(0.511 0.096 186.391); } :is(#menu, #attempts) .decimals-decks { --section-color: oklch(63.194% 0.18663 147.202); } :is(#menu, #attempts) .percents-decks { --section-color: oklch(47.095% 0.15248 140.288); } :is(#menu, #attempts) .divisibility-tests { --section-color: oklch(59.415% 0.14429 122.319); } :is(#menu, #attempts) .factors-and-multiples { --section-color: hsl(51, 96%, 34%); } :is(#menu, #attempts) .powers-and-roots { --section-color: oklch(65.415% 0.13669 76.423); } :is(#menu, #attempts) .geometry { --section-color: oklch(56.009% 0.13968 54.173); } :is(#menu, #attempts) .binary { --section-color: oklch(63.217% 0.20875 37.349); } :is(#menu, #attempts) .statistics-and-probability-decks { --section-color: oklch(53.905% 0.21256 30.369); } :is(#menu, #attempts) .weights-and-measures-decks { --section-color: oklch(42.909% 0.16846 17.944); } :is(#menu, #attempts) .challenging-math { --section-color: oklch(50.554% 0.20167 357.639); } :is(#menu, #attempts) .xy-plane { --section-color: oklch(47.55% 0.20831 333.356); } .menu-section button { background-color: var(--section-color); } @media (min-width: 48rem) { #menu #jump-back-in .jump-back-in-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; } } @media (hover: hover) and (pointer: fine) { .jump-back-in-card:hover { transform: translateY(-2px); } .jump-back-in-card:hover .jump-back-in-arrow { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .jump-back-in-card, .jump-back-in-arrow { transition-duration: 0.01ms; } } .theme-toggle:not(.theme-switch) { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 10; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid currentcolor; border-radius: 50%; background-color: oklch(0.2 0 0 / 85%); color: white; font-size: 1.5rem; line-height: 1; box-shadow: 0 2px 8px oklch(0 0 0 / 35%); }