/* ============================================================
MAX GRIMALDI — newsite.css
============================================================ */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Poppins", sans-serif;
background-color: #EFE6D9;
color: #3E2E24;
}
/* ============================================================
HOME PAGE
============================================================ */
.page {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.left-column {
flex: 1 1 320px;
min-width: 0;
}
.right-column {
flex: 1 1 380px;
min-width: 0;
}
/* ---------- TITLE ---------- */
.title-block {
display: inline-block;
background-color: #D9C6AE;
padding: 24px 32px;
margin: 40px 0 0 40px;
max-width: calc(100% - 40px);
}
.title-block h1 {
margin: 0;
font-size: 32px;
font-weight: 700;
color: #3E2E24;
}
/* ---------- SIDEBAR ---------- */
.sidebar {
padding: 20px 40px;
max-width: 360px;
}
.sidebar-section {
margin-bottom: 28px;
}
.sidebar-section h2 {
display: inline-block;
background-color: #D9C6AE;
color: #3E2E24;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 6px 14px;
margin: 0 0 12px;
}
.sidebar-section p {
margin: 4px 0;
font-size: 14px;
color: #5A4A3E;
}
.sidebar-section ul {
margin: 4px 0;
padding-left: 18px;
}
.sidebar-section li {
font-size: 14px;
color: #5A4A3E;
margin-bottom: 4px;
}
/* ---------- PHOTO ---------- */
.photo {
margin: 40px 40px 0 0;
padding: 10px;
background-color: #D9C6AE;
border: 2px solid #3E2E24;
}
.photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
max-height: 560px;
object-fit: cover;
object-position: 50% 15%;
border: 2px solid #3E2E24;
}
/* ---------- EXPERIENCE PANEL ---------- */
.dark-panel {
margin: 24px 40px 0 0;
background-color: #3E2E24;
color: #EDE4D8;
padding: 28px 32px;
}
.dark-panel h2 {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 18px;
}
.exp-item {
margin-bottom: 18px;
}
.exp-item h3 {
font-size: 16px;
margin: 0 0 4px;
}
.exp-meta {
font-size: 13px;
color: #C9B8A6;
margin: 0;
}
/* ---------- SUBJECTS I TEACH ---------- */
.subjects {
max-width: 1200px;
margin: 0 auto;
padding: 50px 40px 80px;
}
.subject-group {
scroll-margin-top: 24px;
}
.subject-group + .subject-group {
margin-top: 48px;
}
.subject-group h4 {
display: inline-block;
background-color: #D9C6AE;
color: #3E2E24;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 6px 14px;
margin: 0 0 20px;
}
.subject-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 14px;
align-items: start;
}
.class-box {
min-width: 0;
background-color: #F7F1E7;
border: 2px solid #3E2E24;
}
.class-box summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 18px;
font-size: 15px;
font-weight: 600;
color: #3E2E24;
cursor: pointer;
list-style: none;
transition: background-color 0.2s ease;
}
.class-box summary:hover {
background-color: #E7DCCB;
}
.class-box summary::-webkit-details-marker {
display: none;
}
.class-box summary::after {
content: "+";
content: "+" / "";
font-size: 22px;
line-height: 1;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.class-box[open] summary {
background-color: #D9C6AE;
}
.class-box[open] summary::after {
transform: rotate(45deg);
}
.class-box ul {
margin: 0;
padding: 12px 18px 14px;
list-style: none;
}
.class-box li {
padding: 7px 0;
font-size: 14px;
color: #5A4A3E;
border-bottom: 1px solid rgba(62, 46, 36, 0.15);
}
.class-box li:last-child {
border-bottom: none;
}
.class-box li a {
color: #3E2E24;
text-decoration: none;
border-bottom: 1px solid rgba(62, 46, 36, 0.35);
transition: border-color 0.2s ease;
}
.class-box li a:hover {
border-bottom-color: #3E2E24;
}
/* ---------- ABOUT ---------- */
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
gap: 32px;
align-items: start;
}
.about-text p {
max-width: 640px;
margin: 0 0 16px;
font-size: 15px;
line-height: 1.75;
color: #5A4A3E;
}
.about-text p:first-child {
font-size: 17px;
color: #3E2E24;
}
.about-list {
max-width: 640px;
margin: 0;
padding-left: 20px;
font-size: 15px;
line-height: 1.6;
color: #5A4A3E;
}
.about-list li + li {
margin-top: 8px;
}
.about-list li::marker {
color: #A08D78;
}
.about-list strong {
color: #3E2E24;
}
.about-side {
display: grid;
gap: 16px;
}
.about-card {
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.about-card h3 {
margin: 0;
padding: 12px 16px;
background-color: #D9C6AE;
border-bottom: 2px solid #3E2E24;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #3E2E24;
}
.about-card ul {
list-style: none;
margin: 0;
padding: 6px 16px 10px;
}
.about-card li {
padding: 8px 0;
font-size: 14px;
line-height: 1.5;
color: #5A4A3E;
border-bottom: 1px solid rgba(62, 46, 36, 0.15);
}
.about-card li:last-child {
border-bottom: none;
}
.about-card li strong {
display: block;
color: #3E2E24;
}
.about-card li span {
display: block;
font-size: 13px;
color: #8A7A6B;
}
@media (max-width: 900px) {
.about-grid {
grid-template-columns: 1fr;
}
}
/* ---------- HOME SECTIONS: subjects I tutor, methods of payment ---------- */
.home-section {
max-width: 1200px;
margin: 0 auto;
padding: 48px 40px 0;
scroll-margin-top: 24px;
}
/* the last section on the home page carries the bottom margin the study grid used to */
.home-section:last-of-type {
padding-bottom: 80px;
}
.section-heading {
display: inline-block;
margin: 0 0 12px;
padding: 10px 18px;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
}
.section-subheading {
margin: 4px 0 10px;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: #3E2E24;
}
.section-intro {
max-width: 640px;
margin: 0 0 24px;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.section-intro a {
color: #3E2E24;
white-space: nowrap;
}
.nowrap {
white-space: nowrap;
}
/* four subject blocks, every course a link to the booking page */
.tutor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
.tutor-block {
min-width: 0;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.tutor-block > summary,
.service-card > summary,
.pay-card h3 {
margin: 0;
padding: 12px 16px;
background-color: #D9C6AE;
border-bottom: 2px solid #3E2E24;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #3E2E24;
}
/* the block header is a dropdown toggle */
.tutor-block > summary,
.service-card > summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-bottom: none;
cursor: pointer;
list-style: none;
transition: background-color 0.2s ease;
}
.tutor-block > summary::-webkit-details-marker,
.service-card > summary::-webkit-details-marker {
display: none;
}
.tutor-block > summary h3,
.service-card > summary h3 {
margin: 0;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
.tutor-block > summary::after,
.service-card > summary::after {
content: "+";
content: "+" / "";
flex-shrink: 0;
font-size: 22px;
line-height: 1;
transition: transform 0.25s ease;
}
.tutor-block > summary:hover,
.service-card > summary:hover {
background-color: #E7DCCB;
}
.tutor-block[open] > summary,
.service-card[open] > summary {
border-bottom: 2px solid #3E2E24;
}
.tutor-block[open] > summary::after,
.service-card[open] > summary::after {
transform: rotate(45deg);
}
/* every dropdown slides open and shut the same way (the script at the bottom of
index.html wraps the content in .dd-body and animates its height) */
.dd-body {
overflow: hidden;
}
.dd-body.is-animating {
transition: height 0.25s ease, opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
.dd-body.is-animating {
transition: none;
}
.tutor-block > summary::after,
.class-box summary::after,
.service-card > summary::after {
transition: none;
}
}
.tutor-block ul {
margin: 0;
padding: 4px 0;
list-style: none;
}
.tutor-block li {
display: flex;
}
.tutor-block li a {
position: relative;
display: block;
flex: 1 1 auto;
padding: 9px 36px 9px 16px;
font-size: 14px;
line-height: 1.4;
color: #3E2E24;
text-decoration: none;
border-top: 1px solid rgba(62, 46, 36, 0.12);
transition: background-color 0.15s ease;
}
.tutor-block li:first-child a {
border-top: none;
}
.tutor-block li a::after {
content: "\2192";
position: absolute;
right: 14px;
top: 50%;
transform: translate(-4px, -50%);
color: #8A7A6B;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.tutor-block li a:hover,
.tutor-block li a:focus-visible {
background-color: #F2EADC;
}
.tutor-block li a:hover::after,
.tutor-block li a:focus-visible::after {
opacity: 1;
transform: translate(0, -50%);
}
.tutor-book {
display: block;
padding: 12px 16px;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease;
}
.tutor-book:hover {
background-color: #2B2019;
}
/* two columns of courses inside each block while the blocks sit two across */
@media (min-width: 700px) and (max-width: 1339px) {
.tutor-block ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tutor-block li:nth-child(-n+2) a {
border-top: none;
}
.tutor-block li:nth-child(odd) a {
border-right: 1px solid rgba(62, 46, 36, 0.12);
}
}
@media (min-width: 1340px) {
.tutor-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.tutor-grid {
grid-template-columns: 1fr;
}
}
/* big Book Now banner under the subject blocks */
.book-banner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px 32px;
margin-top: 24px;
padding: 26px 32px;
background-color: #3E2E24;
color: #EDE4D8;
border: 2px solid #3E2E24;
text-decoration: none;
transition: background-color 0.2s ease;
}
.book-banner:hover {
background-color: #2B2019;
}
.book-banner-title {
font-size: 28px;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 2px;
white-space: nowrap;
}
.book-banner-text {
font-size: 14px;
line-height: 1.6;
color: #C9B8A6;
}
.book-banner-cta {
padding: 13px 24px;
background-color: #D9C6AE;
color: #3E2E24;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.book-banner:hover .book-banner-cta {
background-color: #E7DCCB;
}
@media (max-width: 1100px) {
.book-banner {
grid-template-columns: 1fr;
gap: 12px;
padding: 24px;
}
.book-banner-cta {
justify-self: start;
}
}
/* case management: certificate and two destination blocks */
.case-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.cert {
margin: 0;
padding: 10px;
background-color: #D9C6AE;
border: 2px solid #3E2E24;
}
.cert-svg {
display: block;
width: 100%;
height: auto;
background-color: #FBF7EF;
border: 2px solid #3E2E24;
}
.cert-open {
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: zoom-in;
}
.cert-open.is-static {
cursor: default;
}
.cert-open:focus-visible {
outline: 3px solid #3E2E24;
outline-offset: 3px;
}
.cert-dialog {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.cert-dialog::backdrop {
background-color: rgba(43, 32, 25, 0.94);
}
.cert-stage {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: zoom-out;
}
.cert-stage svg {
display: block;
flex-shrink: 0;
width: min(94vw, calc(88vh * 1.449));
max-width: none;
height: auto;
background-color: #FBF7EF;
border: 2px solid #3E2E24;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
cursor: default;
}
.cert-close {
position: fixed;
top: 12px;
right: 12px;
z-index: 1;
width: 44px;
height: 44px;
border: 2px solid #EDE4D8;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.cert-close:hover {
background-color: #2B2019;
}
.cert-hint {
position: fixed;
left: 16px;
right: 16px;
bottom: 14px;
margin: 0;
text-align: center;
font-size: 13px;
color: #C9B8A6;
pointer-events: none;
}
/* on a portrait phone the certificate turns sideways to use the long edge of the screen */
@media (orientation: portrait) and (max-width: 820px) {
.cert-stage svg {
width: min(92vh, calc(96vw * 1.449));
transform: rotate(90deg);
}
.cert-hint {
display: none;
}
}
/* academic case management: service cards */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
align-items: start;
margin-bottom: 24px;
}
.service-card {
min-width: 0;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.service-card p {
margin: 0;
padding: 14px 16px 16px;
font-size: 14px;
line-height: 1.65;
color: #5A4A3E;
}
.service-card ul {
margin: 0;
padding: 12px 16px 14px 34px;
font-size: 14px;
line-height: 1.5;
color: #5A4A3E;
}
.service-card li + li {
margin-top: 6px;
}
.service-card li::marker {
color: #A08D78;
}
.case-blocks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.case-block {
display: block;
padding: 24px;
background-color: #3E2E24;
color: #EDE4D8;
border: 2px solid #3E2E24;
text-decoration: none;
transition: background-color 0.2s ease;
}
.case-block:hover {
background-color: #2B2019;
}
.case-block strong {
display: block;
margin-bottom: 8px;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.case-block span {
display: block;
font-size: 14px;
line-height: 1.6;
color: #C9B8A6;
}
.case-block em {
display: inline-block;
margin-top: 14px;
padding: 9px 16px;
background-color: #D9C6AE;
color: #3E2E24;
font-size: 13px;
font-style: normal;
font-weight: 700;
transition: background-color 0.2s ease;
}
.case-block:hover em {
background-color: #E7DCCB;
}
/* payment cards: Zelle, Venmo, Cash App */
.pay-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.pay-card {
min-width: 0;
background-color: #F7F1E7;
border: 2px solid #3E2E24;
text-align: center;
}
.pay-qr {
width: 212px;
max-width: calc(100% - 32px);
margin: 24px auto 0;
padding: 8px;
background-color: #D9C6AE;
border: 2px solid #3E2E24;
}
.pay-qr img {
display: block;
width: 100%;
height: auto;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.pay-handle {
margin: 18px 16px 2px;
font-size: 18px;
font-weight: 700;
color: #3E2E24;
overflow-wrap: anywhere;
}
.pay-meta {
margin: 0 16px;
font-size: 13px;
line-height: 1.6;
color: #5A4A3E;
}
.pay-btn {
display: inline-block;
margin: 16px 16px 24px;
padding: 11px 20px;
background-color: #3E2E24;
color: #EDE4D8;
border: 2px solid #3E2E24;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease;
}
.pay-btn:hover {
background-color: #2B2019;
}
.pay-note {
max-width: 640px;
margin: 20px 0 0;
font-size: 13px;
line-height: 1.6;
color: #5A4A3E;
}
.pay-note a {
color: #3E2E24;
white-space: nowrap;
}
@media (max-width: 820px) {
.home-section {
padding: 36px 24px 0;
}
.section-heading {
font-size: 14px;
letter-spacing: 1.5px;
}
}
/* ---------- BOOK NOW BLOCK ---------- */
.book-block {
display: block;
margin-top: 4px;
padding: 18px 20px;
background-color: #3E2E24;
color: #EDE4D8;
text-decoration: none;
border: 2px solid #3E2E24;
transition: background-color 0.2s ease;
}
.book-block:hover {
background-color: #2B2019;
}
.book-block strong {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 700;
}
.book-block span {
display: block;
font-size: 13px;
line-height: 1.5;
color: #C9B8A6;
}
/* ---------- BOOKING AND GET IN TOUCH BOXES ON THE HOME PAGE ---------- */
.home-section > .booking-panel {
max-width: 800px;
}
.home-section > .booking-panel[hidden] {
display: none;
}
.contact-form .step-title {
margin-bottom: 20px;
}
.contact-form .booking-note {
margin-top: 18px;
}
/* ---------- STUDENT RESOURCES SHOWCASE (bottom of the home page) ---------- */
/* an automatic slideshow of screenshots from the sheets; every slide links to Miscellaneous.html */
.showcase {
max-width: 1000px;
}
.showcase-stage {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: #FBF7EF;
border: 2px solid #3E2E24;
}
.showcase-slide {
position: absolute;
inset: 0;
display: block;
color: #EDE4D8;
text-decoration: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.showcase-slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 0.9s ease, visibility 0s;
z-index: 1;
}
.showcase-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 6s linear;
}
.showcase-slide.is-active img {
transform: scale(1.04);
}
.showcase-slide:focus-visible {
outline: 3px solid #3E2E24;
outline-offset: -3px;
}
.showcase-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "title cta" "text cta";
align-items: center;
column-gap: 24px;
padding: 16px 22px 18px;
background-color: rgba(43, 32, 25, 0.92);
transform: translateY(12px);
transition: transform 0.9s ease;
}
.showcase-slide.is-active .showcase-caption {
transform: none;
}
.showcase-caption strong {
grid-area: title;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.showcase-caption > span {
grid-area: text;
margin-top: 4px;
font-size: 14px;
line-height: 1.55;
color: #C9B8A6;
}
.showcase-caption em {
grid-area: cta;
padding: 10px 16px;
background-color: #D9C6AE;
color: #3E2E24;
font-size: 13px;
font-style: normal;
font-weight: 700;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.showcase-slide:hover .showcase-caption em {
background-color: #E7DCCB;
}
.showcase-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 14px;
}
.showcase-arrow {
width: 36px;
height: 36px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s ease;
}
.showcase-arrow:hover {
background-color: #E7DCCB;
}
.showcase-dots {
display: flex;
gap: 10px;
}
.showcase-dot {
width: 12px;
height: 12px;
padding: 0;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
cursor: pointer;
transition: background-color 0.2s ease;
}
.showcase-dot.is-active {
background-color: #3E2E24;
}
.showcase-dot:focus-visible,
.showcase-arrow:focus-visible {
outline: 3px solid #D9C6AE;
outline-offset: 2px;
}
.showcase-cta {
margin-top: 28px;
}
/* phones: a taller stage, and the caption keeps only the title and the button so the picture stays visible */
@media (max-width: 640px) {
.showcase-stage {
aspect-ratio: 4 / 3;
}
.showcase-caption {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "title cta";
column-gap: 12px;
padding: 12px 14px;
}
.showcase-caption strong {
font-size: 15px;
}
.showcase-caption > span {
display: none;
}
.showcase-caption em {
padding: 8px 12px;
font-size: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.showcase-slide,
.showcase-slide.is-active,
.showcase-slide img,
.showcase-caption {
transition: none;
}
.showcase-slide.is-active img {
transform: none;
}
}
/* ---------- DSM-5 CHEAT SHEET: one disorder per card ---------- */
.dsm-card {
margin: 0 0 18px;
padding: 16px 18px 6px;
background-color: #FFFDF8;
border: 1.5px solid #3E2E24;
}
.dsm-card h3 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #3E2E24;
}
.dsm-time {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: #6B5A4C;
}
/* ---------- GENERAL PSYCHOLOGY PRACTICE QUESTIONS (quiz tab) ---------- */
.quiz-setup {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px 18px;
margin: 0 0 14px;
padding: 16px 18px;
background-color: #FFFDF8;
border: 1.5px solid #3E2E24;
}
.quiz-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 180px;
flex: 1 1 220px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6B5A4C;
}
.quiz-field select {
width: 100%;
padding: 9px 10px;
border: 1.5px solid #B8A088;
background-color: #FFFDF8;
color: #2B2019;
font: inherit;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
}
.quiz-setup[hidden],
.quiz-next[hidden] {
display: none;
}
.quiz-setup .btn-primary {
margin-top: 0;
padding: 11px 26px;
}
.quiz-stage,
.quiz-summary {
margin: 0 0 20px;
padding: 18px 20px 16px;
background-color: #FFFDF8;
border: 1.5px solid #3E2E24;
}
.quiz-bar {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6B5A4C;
}
.quiz-track {
height: 6px;
margin: 10px 0 16px;
background-color: #EDE4D8;
overflow: hidden;
}
.quiz-track span {
display: block;
height: 100%;
background-color: #3E2E24;
transition: width 300ms ease;
}
.quiz-unit {
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8C7A6A;
}
.quiz-question {
margin: 0 0 16px;
font-size: 17px;
font-weight: 600;
line-height: 1.5;
color: #2B2019;
}
.quiz-options {
display: grid;
gap: 10px;
margin: 0 0 16px;
}
.quiz-option {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 11px 14px;
border: 1.5px solid #B8A088;
background-color: #FFFDF8;
color: #2B2019;
font: inherit;
font-size: 15px;
line-height: 1.5;
text-align: left;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease;
}
.quiz-option:hover:not(:disabled),
.quiz-option:focus-visible {
background-color: #F2EADC;
border-color: #3E2E24;
outline: none;
}
.quiz-option:disabled {
cursor: default;
}
.quiz-key {
flex: 0 0 24px;
height: 24px;
margin-top: 1px;
border: 1.5px solid #B8A088;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
line-height: 21px;
text-align: center;
color: #6B5A4C;
}
.quiz-option.is-correct {
background-color: #E3EFE0;
border-color: #2F6B3A;
}
.quiz-option.is-correct .quiz-key {
background-color: #2F6B3A;
border-color: #2F6B3A;
color: #FFFDF8;
}
.quiz-option.is-wrong {
background-color: #F2DAD0;
border-color: #8C3B2E;
}
.quiz-option.is-wrong .quiz-key {
background-color: #8C3B2E;
border-color: #8C3B2E;
color: #FFFDF8;
}
.quiz-verdict {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
}
.quiz-verdict.is-right,
.quiz-ma .is-right {
color: #2F6B3A;
}
.quiz-verdict.is-miss,
.quiz-ma .is-miss {
color: #8C3B2E;
}
.quiz-explain {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.quiz-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: 8px;
}
.quiz-actions .btn-primary,
.quiz-actions .btn-secondary {
margin-top: 0;
padding: 10px 22px;
}
.quiz-quit,
.quiz-link {
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 13px;
color: #6B5A4C;
text-decoration: underline;
cursor: pointer;
}
.quiz-quit:hover,
.quiz-link:hover {
color: #2B2019;
}
.quiz-summary h3 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #3E2E24;
}
.quiz-summary h3 + .quiz-missed,
.quiz-actions-end {
margin-bottom: 20px;
}
.quiz-result {
margin: 0 0 14px;
font-size: 16px;
line-height: 1.6;
color: #2B2019;
}
.quiz-missed {
margin: 0;
padding-left: 22px;
}
.quiz-missed li {
margin: 0 0 14px;
padding: 0 0 12px;
border-bottom: 1px solid #EDE4D8;
}
.quiz-missed li:last-child {
border-bottom: 0;
}
.quiz-mq {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: #2B2019;
}
.quiz-ma {
margin: 0 0 2px;
font-size: 14px;
line-height: 1.6;
color: #5A4A3E;
}
.quiz-ma span {
font-weight: 600;
}
.doc-page .quiz-table td:last-child,
.doc-page .quiz-table th:last-child {
text-align: right;
}
@media (max-width: 640px) {
.quiz-stage,
.quiz-summary,
.quiz-setup {
padding: 14px;
}
.quiz-question {
font-size: 16px;
}
.quiz-option {
font-size: 14px;
}
}
/* ---------- HTML TEMPLATE PAGE ---------- */
.template-actions {
margin: 0 0 6px;
}
.template-actions .btn-secondary {
margin-top: 12px;
padding: 9px 16px;
font-size: 13px;
}
/* ---------- CADC SUPERVISION PAGE ---------- */
.page-jumps {
margin-top: 14px;
font-size: 14px;
}
.page-jumps a {
color: #3E2E24;
font-weight: 600;
}
.home-section > .support-layout {
margin-top: 0;
padding: 0;
}
.home-section > .cadc-topic {
max-width: 816px;
}
.home-section > .cadc-topic + .cadc-topic {
margin-top: 24px;
}
.cadc-topic > .step-title {
margin-bottom: 22px;
}
.cadc-topic > .doc-section:last-child {
margin-bottom: 0;
}
/* ---------- BOOKING PAGE ---------- */
.booking-main {
padding-bottom: 80px;
}
.booking-header {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.booking-header .title-block {
margin-left: 0;
}
.booking-intro {
max-width: 640px;
margin: 20px 0 0;
font-size: 15px;
line-height: 1.7;
color: #5A4A3E;
}
.booking-topic {
display: inline-block;
margin: 18px 0 0;
padding: 10px 16px;
background-color: #D9C6AE;
font-size: 14px;
font-weight: 600;
}
.booking-topic[hidden] {
display: none;
}
.booking-layout {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 32px;
align-items: start;
max-width: 1200px;
margin: 36px auto 0;
padding: 0 40px;
}
.booking-side .sidebar-section a {
color: #3E2E24;
}
.booking-side .sidebar-section .book-block {
color: #EDE4D8;
}
.booking-panel .doc-note a {
color: #3E2E24;
}
.booking-phone a {
font-size: 22px;
font-weight: 700;
text-decoration: none;
}
.booking-steps {
margin: 4px 0;
padding-left: 18px;
}
.booking-steps li {
margin-bottom: 6px;
font-size: 14px;
line-height: 1.5;
color: #5A4A3E;
}
.booking-panel {
padding: 28px 32px;
background-color: #F7F1E7;
border: 2px solid #3E2E24;
}
.booking-step:not([hidden]) ~ .booking-step:not([hidden]) {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid rgba(62, 46, 36, 0.2);
}
.step-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.step-title span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 13px;
}
.step-title small {
font-size: 14px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #5A4A3E;
}
/* calendar */
.cal {
max-width: 520px;
}
.cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.cal-month {
font-size: 15px;
font-weight: 600;
}
.cal-nav {
width: 36px;
height: 36px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.cal-nav:hover {
background-color: #E7DCCB;
}
.cal-nav:disabled {
border-color: #D9C6AE;
color: #B8A088;
cursor: not-allowed;
}
.cal-weekdays,
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.cal-weekdays span {
padding-bottom: 4px;
text-align: center;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #8A7A6B;
}
.cal-day {
position: relative;
aspect-ratio: 1 / 1;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.cal-day:hover {
background-color: #E7DCCB;
}
.cal-day.is-empty {
border-color: transparent;
background-color: transparent;
cursor: default;
}
.cal-day:disabled {
border-color: #D9C6AE;
background-color: #F2EADC;
color: #B8A088;
cursor: not-allowed;
}
.cal-day.is-full {
text-decoration: line-through;
}
.cal-day.is-today::after {
content: "";
position: absolute;
left: 50%;
bottom: 5px;
width: 5px;
height: 5px;
margin-left: -2.5px;
border-radius: 50%;
background-color: currentColor;
}
.cal-day.is-selected,
.cal-day.is-selected:hover {
background-color: #3E2E24;
color: #EDE4D8;
}
/* time zone the hours are shown in (sits under the calendar grid) */
.tz-switch {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
}
.tz-label {
margin-right: 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #8A7A6B;
}
.tz-btn {
padding: 7px 12px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.tz-btn small {
font-size: 11px;
font-weight: 400;
opacity: 0.75;
}
.tz-btn:hover {
background-color: #E7DCCB;
}
.tz-btn.is-selected,
.tz-btn.is-selected:hover {
background-color: #3E2E24;
color: #EDE4D8;
}
/* hourly slots */
.slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.slot {
padding: 12px 10px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.slot:hover {
background-color: #E7DCCB;
}
.slot.is-selected,
.slot.is-selected:hover {
background-color: #3E2E24;
color: #EDE4D8;
}
.slot:disabled {
border-color: #D9C6AE;
background-color: #F2EADC;
color: #B8A088;
cursor: not-allowed;
text-decoration: line-through;
}
.slot:disabled.is-booked {
text-decoration: none;
}
.slot.is-booked::after {
content: "\00a0\00b7\00a0Booked";
font-weight: 400;
}
.slot .slot-day {
display: block;
font-size: 12px;
font-weight: 400;
}
/* intake form */
.mode-switch {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 18px;
}
.mode-btn {
padding: 10px 18px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.mode-btn:hover {
background-color: #E7DCCB;
}
.mode-btn.is-selected,
.mode-btn.is-selected:hover {
background-color: #3E2E24;
color: #EDE4D8;
}
.selection-summary {
margin: -6px 0 20px;
padding: 12px 16px;
background-color: #D9C6AE;
font-size: 14px;
font-weight: 600;
}
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.field-grid[hidden] {
display: none;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #3E2E24;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 10px 12px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 14px;
font-weight: 400;
}
.field textarea {
resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: 3px solid #D9C6AE;
outline-offset: 1px;
}
.field-wide {
grid-column: 1 / -1;
}
.field-check {
flex-direction: row;
align-items: flex-start;
gap: 10px;
font-weight: 400;
color: #5A4A3E;
}
.field-check input {
width: 18px;
height: 18px;
margin-top: 1px;
}
.hp {
position: absolute;
left: -9999px;
}
.btn-primary,
.btn-secondary {
display: inline-block;
margin-top: 20px;
padding: 13px 24px;
border: 2px solid #3E2E24;
font: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
background-color: #3E2E24;
color: #EDE4D8;
}
.btn-primary:hover {
background-color: #2B2019;
}
.btn-primary:disabled {
opacity: 0.6;
cursor: wait;
}
.btn-secondary {
background-color: #FFFDF8;
color: #3E2E24;
}
.btn-secondary:hover {
background-color: #E7DCCB;
}
.form-error {
margin: 14px 0 0;
padding: 10px 14px;
background-color: #F2DAD0;
border-left: 4px solid #8C3B2E;
color: #5A2A20;
font-size: 14px;
}
.booking-note {
margin: 16px 0 0;
font-size: 13px;
line-height: 1.6;
color: #8A7A6B;
}
.booking-note a {
color: #3E2E24;
}
.done-text {
margin: 0 0 4px;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.done-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 900px) {
.booking-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.booking-header,
.booking-layout {
padding: 0 24px;
}
.booking-header .title-block {
margin-top: 24px;
}
.booking-panel {
padding: 20px;
}
.field-grid {
grid-template-columns: 1fr;
}
.slots {
grid-template-columns: 1fr 1fr;
}
}
/* ---------- SITE MENU (home page) ---------- */
html {
scroll-behavior: smooth;
}
.site-nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 292px;
overflow-y: auto;
padding: 30px 0 40px;
background-color: #2B2019;
border-right: 1px solid #1E1611;
}
.nav-brand {
display: block;
margin: 0 22px 26px;
font-size: 18px;
font-weight: 700;
color: #EDE4D8;
text-decoration: none;
}
.nav-brand:hover {
color: #F7F1E7;
}
.nav-tabs {
list-style: none;
margin: 0 0 26px;
padding: 0;
}
.nav-tabs a {
display: block;
padding: 10px 22px;
font-size: 13px;
line-height: 1.45;
color: #D6C7B4;
text-decoration: none;
border-left: 3px solid transparent;
transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.nav-tabs a:hover {
background-color: #3E2E24;
color: #F7F1E7;
}
.nav-tabs a.is-active {
background-color: #3E2E24;
color: #F7F1E7;
border-left-color: #D9C6AE;
}
/* on the home page the active bar is one element that glides between tabs */
.site-nav.has-indicator .nav-tabs a.is-active {
border-left-color: transparent;
}
.nav-indicator {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 0;
background-color: #D9C6AE;
opacity: 0;
pointer-events: none;
transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1), height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.nav-indicator.is-visible {
opacity: 1;
}
.site-main {
margin-left: 292px;
}
@media (max-width: 900px) {
.site-nav {
position: static;
width: auto;
padding: 18px 0 6px;
border-right: none;
border-bottom: 1px solid #1E1611;
}
.nav-brand {
margin-bottom: 14px;
}
.nav-label {
margin-bottom: 6px;
border-bottom: none;
}
.nav-tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 0 12px;
}
.nav-tabs a {
padding: 8px 10px;
border-left: none;
border-bottom: 3px solid transparent;
}
.nav-tabs a.is-active,
.site-nav.has-indicator .nav-tabs a.is-active {
border-bottom-color: #D9C6AE;
}
.nav-indicator {
display: none;
}
.site-main {
margin-left: 0;
}
}
/* ---------- SITE MENU ON PHONES ----------
site.js adds .js-nav to , builds a fixed top bar with a Menu button
and turns the sidebar into a drawer that slides in from the left. Without
JavaScript the stacked menu above is what people get. */
.nav-toggle-bar,
.nav-scrim {
display: none;
}
@media (max-width: 900px) {
.js-nav .nav-toggle-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
padding: 0 10px 0 18px;
background-color: #2B2019;
border-bottom: 1px solid #1E1611;
}
.js-nav .nav-toggle-brand {
font-size: 16px;
font-weight: 700;
color: #EDE4D8;
text-decoration: none;
}
.js-nav .nav-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin: 0;
padding: 0 12px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #EDE4D8;
background: none;
border: 1px solid #4A382C;
border-radius: 4px;
cursor: pointer;
}
.js-nav .nav-toggle:active {
background-color: #3E2E24;
}
.js-nav .nav-toggle svg {
display: block;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.js-nav .nav-toggle .nav-toggle-close,
.js-nav.nav-open .nav-toggle .nav-toggle-open {
display: none;
}
.js-nav.nav-open .nav-toggle .nav-toggle-close {
display: block;
}
.js-nav .site-nav {
position: fixed;
top: 56px;
bottom: 0;
left: 0;
z-index: 60;
width: min(320px, 86vw);
padding: 22px 0 40px;
border-right: 1px solid #1E1611;
border-bottom: none;
transform: translateX(-100%);
visibility: hidden;
}
/* the slide only animates once the page has painted, so the drawer never slides out on load */
.js-nav.nav-ready .site-nav {
transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.js-nav.nav-open .site-nav {
transform: none;
visibility: visible;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}
.js-nav.nav-ready.nav-open .site-nav {
transition: transform 0.3s ease, visibility 0s;
}
/* the top bar already shows the name */
.js-nav .site-nav .nav-brand {
display: none;
}
.js-nav .nav-label {
margin-bottom: 14px;
border-bottom: 1px solid #3E2E24;
}
.js-nav .nav-tabs {
display: block;
margin-bottom: 26px;
padding: 0;
}
.js-nav .nav-tabs a {
padding: 12px 22px;
font-size: 14px;
border-left: 3px solid transparent;
border-bottom: none;
}
.js-nav .nav-tabs a.is-active {
border-left-color: #D9C6AE;
}
.js-nav .site-nav.has-indicator .nav-tabs a.is-active {
border-left-color: transparent;
}
.js-nav .nav-indicator {
display: block;
}
.js-nav .nav-scrim {
display: block;
position: fixed;
top: 56px;
right: 0;
bottom: 0;
left: 0;
z-index: 55;
background-color: rgba(30, 22, 17, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.js-nav.nav-open .nav-scrim {
opacity: 1;
pointer-events: auto;
}
.js-nav .site-main {
margin-left: 0;
padding-top: 56px;
}
/* anchors scroll to just below the fixed bar */
.js-nav [id] {
scroll-margin-top: 70px;
}
html.js-nav.nav-open,
html.js-nav.nav-open body {
overflow: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.js-nav.nav-ready .site-nav,
.js-nav.nav-ready.nav-open .site-nav,
.js-nav .nav-scrim {
transition: none;
}
}
/* ---------- ADDITIONAL RESOURCES (Additional_Resources.html) ---------- */
.resource-section {
max-width: 1200px;
margin: 0 auto;
padding: 40px 40px 0;
}
.resource-intro {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.7;
color: #5A4636;
}
.game-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
max-width: 1040px;
}
.game-card {
display: block;
overflow: hidden;
background-color: #FFFDF8;
border: 1px solid #D9C6AE;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(62, 46, 36, 0.08);
color: #3E2E24;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.game-card:hover,
.game-card:focus-visible {
transform: translateY(-3px);
border-color: #3E2E24;
box-shadow: 0 10px 24px rgba(62, 46, 36, 0.18);
outline: none;
}
.game-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid #D9C6AE;
transition: transform 0.4s ease;
}
.game-card:hover img {
transform: scale(1.02);
}
.game-card-text {
display: block;
padding: 18px 22px 20px;
}
.game-card-text strong {
display: block;
font-size: 18px;
font-weight: 700;
}
.game-card-text span {
display: block;
margin-top: 6px;
font-size: 14px;
line-height: 1.6;
color: #5A4636;
}
.game-card-text em {
display: inline-block;
margin-top: 12px;
font-style: normal;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #3E2E24;
border-bottom: 2px solid #D9C6AE;
}
@media (max-width: 820px) {
.resource-section {
padding: 28px 24px 0;
}
.game-grid {
gap: 20px;
}
}
/* ============================================================
FORMULA SHEET PAGES
Google Doc proportions: 8.5in page = 816px, 1in margin = 78px
============================================================ */
.stats-page {
background-color: #EFE6D9;
}
.doc-shell {
display: block;
}
/* radios drive the tabs; keep them reachable but invisible */
.doc-shell > input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* ---------- FIXED TAB RAIL ---------- */
.tab-nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 292px;
overflow-y: auto;
padding: 30px 0 40px;
background-color: #2B2019;
border-right: 1px solid #1E1611;
}
.nav-home {
margin: 0 0 26px;
padding: 0 22px;
font-size: 13px;
}
.nav-home a {
color: #A08D78;
text-decoration: none;
transition: color 0.2s ease;
}
.nav-home a:hover {
color: #EDE4D8;
}
.nav-label {
margin: 0 0 14px;
padding: 0 22px 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: #7A6754;
border-bottom: 1px solid #3E2E24;
}
.tab-nav label {
display: block;
padding: 9px 22px;
font-size: 13px;
line-height: 1.45;
color: #D6C7B4;
cursor: pointer;
border-left: 3px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tab-nav label:hover {
background-color: #3E2E24;
color: #F7F1E7;
}
.nav-solo {
margin: 0;
}
.nav-group {
margin: 0;
}
.nav-group > summary {
display: flex;
align-items: center;
list-style: none;
cursor: pointer;
}
.nav-group > summary::-webkit-details-marker {
display: none;
}
.nav-arrow {
flex-shrink: 0;
width: 22px;
padding-left: 10px;
font-size: 9px;
color: #7A6754;
transition: transform 0.2s ease;
}
.nav-arrow::before {
content: "\25B6";
}
.nav-group[open] > summary .nav-arrow {
transform: rotate(90deg);
}
.nav-group > summary label {
flex: 1;
padding-left: 0;
font-weight: 600;
color: #EDE4D8;
letter-spacing: 0.2px;
}
.nav-group ul {
list-style: none;
margin: 0 0 6px;
padding: 0;
}
.nav-group ul label {
padding-left: 44px;
font-size: 12.5px;
color: #B9A793;
}
/* ---------- CONTENT AREA ---------- */
.doc-main {
margin-left: 292px;
padding: 46px 40px 90px;
}
.doc-page {
max-width: 816px;
margin: 0 auto;
padding: 62px;
background-color: #FBF7EF;
border: 1px solid #E2D6C3;
}
/* ---------- TAB PANELS ---------- */
.tab-panel {
display: none;
}
.doc-title {
margin: 0 0 6px;
font-size: 30px;
font-weight: 700;
}
.doc-subtitle {
margin: 0 0 44px;
padding-bottom: 20px;
font-size: 14px;
color: #8A7A6B;
border-bottom: 2px solid #D9C6AE;
}
/* ---------- SECTION ---------- */
.doc-section {
margin-bottom: 52px;
}
.doc-section > h2 {
background-color: #3E2E24;
color: #EDE4D8;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding: 12px 18px;
margin: 0 0 20px;
}
.doc-section > h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #8A7A6B;
margin: 32px 0 12px;
}
.doc-note {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.75;
color: #5A4A3E;
}
.doc-note strong {
color: #3E2E24;
}
.doc-note.center {
text-align: center;
font-size: 16px;
padding: 14px 12px;
background-color: #F2EADC;
}
/* ---------- CALLOUT ---------- */
.doc-flag {
margin: 0 0 20px;
padding: 12px 16px;
background-color: #F2EADC;
border-left: 4px solid #B8A088;
font-size: 13px;
line-height: 1.7;
color: #5A4A3E;
}
.doc-flag strong {
color: #3E2E24;
}
/* ---------- DOC TABLE ---------- */
.doc-table {
display: grid;
margin-bottom: 24px;
}
.doc-table.cols-2 {
grid-template-columns: 1fr 1fr;
}
.doc-table.cols-1 {
grid-template-columns: 1fr;
}
.doc-head {
background-color: #D9C6AE;
border: 2px solid #3E2E24;
padding: 14px 16px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #3E2E24;
}
.doc-head > span {
display: block;
margin-top: 4px;
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #6B5847;
}
.doc-cell {
background-color: #FFFDF8;
border: 2px solid #3E2E24;
border-top: none;
padding: 18px 16px;
}
/* halve the shared vertical border in 2-column tables */
.cols-2 .doc-head:nth-child(odd),
.cols-2 .doc-cell:nth-child(odd) {
border-right-width: 1px;
}
.cols-2 .doc-head:nth-child(even),
.cols-2 .doc-cell:nth-child(even) {
border-left-width: 1px;
}
/* ---------- INSIDE A CELL ---------- */
.cell-title {
text-align: center;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.5;
color: #3E2E24;
margin: 0 0 16px;
}
.eq {
text-align: center;
font-size: 16px;
line-height: 2.4;
color: #3E2E24;
margin: 0 0 20px;
}
.eq.small {
font-size: 14px;
line-height: 2.2;
margin-bottom: 12px;
}
.doc-cell h4 {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #3E2E24;
margin: 20px 0 10px;
padding-bottom: 3px;
border-bottom: 1px solid #3E2E24;
}
.doc-cell h4:first-child {
margin-top: 0;
}
.doc-cell ol {
margin: 0;
padding-left: 18px;
}
.doc-cell ol li {
font-size: 13px;
line-height: 1.8;
color: #5A4A3E;
padding: 1px 0;
}
.var-list {
list-style: none;
margin: 0;
padding: 0;
}
.var-list li {
font-size: 13px;
line-height: 1.8;
color: #5A4A3E;
padding: 5px 0;
border-bottom: 1px solid #F2EADC;
}
.task-list > li {
padding: 8px 0;
}
.task-list > li .sym {
display: block;
margin-bottom: 2px;
}
.task-list ul {
margin: 0;
padding-left: 20px;
}
.task-list ul li {
padding: 1px 0;
line-height: 1.6;
list-style: disc;
border-bottom: none;
}
.task-list ul li::marker {
color: #A08D78;
}
.var-list li:last-child {
border-bottom: none;
}
.var-list .sym {
font-weight: 600;
color: #3E2E24;
}
.note-sm {
font-size: 12px;
line-height: 1.7;
color: #8A7A6B;
margin: 12px 0 0;
}
/* ---------- FLOWCHART ---------- */
.flow {
margin: 20px 0;
}
.flow svg {
display: block;
width: 100%;
height: auto;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.flow figcaption {
margin-top: 8px;
font-size: 12px;
line-height: 1.6;
color: #8A7A6B;
}
/* ---------- FIGURES ---------- */
.fig {
margin: 20px 0;
}
.fig img {
display: block;
width: 100%;
height: auto;
background-color: #FBF7EF;
border: 1px solid #E2D6C3;
}
.fig figcaption {
margin-top: 8px;
font-size: 12px;
line-height: 1.6;
color: #8A7A6B;
}
.doc-cell .fig {
margin: 0 0 16px;
}
.doc-cell .fig:last-child {
margin-bottom: 0;
}
/* ---------- FRACTIONS ---------- */
.frac {
display: inline-flex;
flex-direction: column;
vertical-align: middle;
text-align: center;
margin: 0 3px;
}
.frac .num {
border-bottom: 1.5px solid currentColor;
padding: 0 6px 2px;
}
.frac .den {
padding: 2px 6px 0;
}
/* ---------- BINOMIAL COEFFICIENTS AND BIG PARENTHESES ---------- */
.binom,
.bigp {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0 2px;
}
.binom::before,
.bigp::before,
.binom::after,
.bigp::after {
content: "(";
font-size: 2.1em;
font-weight: 300;
line-height: 0.9;
transform: scaleX(0.7);
}
.binom::after,
.bigp::after {
content: ")";
}
.binom .stack {
display: inline-flex;
flex-direction: column;
text-align: center;
line-height: 1.15;
padding: 0 2px;
}
.binom .stack span {
display: block;
}
/* ---------- MATRICES (AP Precalculus sheet) ---------- */
.mat {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0 2px;
}
.mat::before,
.mat::after {
content: "[";
font-size: 2.1em;
font-weight: 300;
line-height: 0.9;
transform: scaleX(0.6);
}
.mat::after {
content: "]";
}
.mat.det::before,
.mat.det::after {
content: "|";
transform: none;
font-weight: 400;
}
.mat .grid {
display: inline-grid;
gap: 2px 14px;
text-align: center;
line-height: 1.3;
padding: 0 4px;
}
.mat .grid .aug {
border-left: 1.5px solid currentColor;
padding-left: 12px;
margin-left: -6px;
}
.score-pts {
display: inline-block;
min-width: 2.2em;
padding: 1px 8px;
border: 1.5px solid #3E2E24;
background-color: #F2EADC;
font-size: 12px;
font-weight: 600;
text-align: center;
}
/* ---------- INTEGRAL SIGNS (Calculus sheet) ---------- */
.intg {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0 3px 0 1px;
}
.intg .sign {
font-size: 1.9em;
line-height: 1;
font-weight: 300;
}
.intg .lims {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
height: 2.3em;
margin-left: 2px;
font-size: 0.72em;
line-height: 1.1;
}
.intg .lims span:last-child {
margin-top: auto;
}
.eval {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0 2px;
}
.eval .bar {
display: inline-block;
width: 1.5px;
height: 2.2em;
background: currentColor;
margin: 0 2px;
}
/* ---------- RADICALS ---------- */
.sqrt {
display: inline-flex;
align-items: stretch;
vertical-align: middle;
}
.sqrt .rad {
font-size: 1.15em;
line-height: 1;
align-self: flex-end;
}
.sqrt .under {
border-top: 1.5px solid currentColor;
padding: 3px 5px 0;
}
/* ---------- TRIG SHEET ---------- */
.fig svg {
display: block;
width: 100%;
height: auto;
}
.fig.narrow {
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.graph-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 20px 0;
}
.graph-grid figure {
margin: 0;
}
.graph-grid svg {
display: block;
width: 100%;
height: auto;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.graph-grid figcaption {
margin-top: 8px;
font-size: 12px;
line-height: 1.6;
color: #8A7A6B;
}
.polar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 16px 0 20px;
}
.polar-grid figure {
margin: 0;
text-align: center;
}
.polar-grid svg {
display: block;
width: 100%;
height: auto;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.polar-grid figcaption {
margin-top: 8px;
font-size: 13px;
line-height: 1.6;
color: #3E2E24;
}
.polar-grid figcaption small {
display: block;
font-size: 12px;
color: #8A7A6B;
}
.uc-table {
width: 100%;
margin: 16px 0;
border-collapse: collapse;
font-size: 13px;
}
.uc-table th,
.uc-table td {
padding: 7px 10px;
border: 1px solid #D9C6AE;
text-align: center;
}
.uc-table th {
background-color: #D9C6AE;
color: #3E2E24;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.uc-table td:first-child {
font-weight: 600;
}
.uc-table tr:nth-child(even) td {
background-color: #FBF7EF;
}
.prob-level {
margin: 36px 0 14px;
padding: 10px 16px;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.prob-level small {
display: block;
margin-top: 4px;
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #C9B8A6;
}
.prob {
margin-bottom: 10px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
}
.prob summary {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
font-size: 14px;
color: #3E2E24;
cursor: pointer;
list-style: none;
}
.prob summary::-webkit-details-marker {
display: none;
}
.prob-n {
flex-shrink: 0;
min-width: 34px;
font-weight: 700;
color: #8A7A6B;
}
.prob-q {
flex: 1;
line-height: 1.7;
}
.prob summary::after {
content: "Show answer";
flex-shrink: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #8A7A6B;
}
.prob[open] summary::after {
content: "Hide answer";
}
.prob[open] summary {
background-color: #F2EADC;
}
.prob-a {
padding: 12px 16px 14px 64px;
border-top: 1px solid #E2D6C3;
font-size: 14px;
line-height: 1.9;
color: #5A4A3E;
}
.prob-a strong {
color: #3E2E24;
}
/* ---------- HTML SHEET: code, demos, badges ---------- */
.code-wrap {
position: relative;
margin: 14px 0;
}
.code-label {
margin: 0 0 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #8A7A6B;
}
.code {
margin: 0;
padding: 14px 16px;
overflow-x: auto;
background-color: #2B2019;
border: 2px solid #3E2E24;
color: #EDE4D8;
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.6;
tab-size: 4;
}
.code code {
font: inherit;
color: inherit;
background: none;
padding: 0;
}
.copy-btn {
position: absolute;
top: 0;
right: 0;
padding: 5px 12px;
border: 2px solid #3E2E24;
background-color: #D9C6AE;
color: #3E2E24;
font: inherit;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
.copy-btn + .code {
padding-right: 76px;
}
.code-label + .copy-btn {
top: 24px;
}
.copy-btn:hover {
background-color: #E7DCCB;
}
.doc-page code {
padding: 1px 5px;
background-color: #F2EADC;
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 0.92em;
color: #3E2E24;
}
.doc-page pre.code code {
padding: 0;
background: none;
color: inherit;
font-size: inherit;
}
.code {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ---------- CONSOLE OUTPUT BLOCKS (R sheet) ---------- */
.code.out {
margin-top: 0;
border-top: 0;
background-color: #F7F1E7;
color: #5A4A3E;
}
.code.out::before {
content: "output";
display: block;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #8A7A6B;
}
.doc-page pre.code.out code {
color: inherit;
}
.pair > div,
.doc-table > div {
min-width: 0;
}
.doc-cell .pair {
grid-template-columns: 1fr;
}
.pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 14px 0;
}
.pair .code-wrap {
margin: 0;
}
.pair-label {
margin: 0 0 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #8A7A6B;
}
.demo {
padding: 12px 14px;
background-color: #FFFDF8;
border: 2px dashed #B8A088;
color: #222222;
font-family: "Times New Roman", Times, serif;
font-size: 15px;
line-height: 1.4;
}
.demo h1, .demo h2, .demo h3, .demo h4, .demo h5, .demo h6 {
display: block;
margin: 0.4em 0;
padding: 0;
background: none;
border: none;
color: #222222;
font-family: inherit;
font-weight: 700;
letter-spacing: 0;
text-align: left;
text-transform: none;
}
.demo h1 { font-size: 2em; }
.demo h2 { font-size: 1.5em; }
.demo h3 { font-size: 1.17em; }
.demo h4 { font-size: 1em; }
.demo h5 { font-size: 0.83em; }
.demo h6 { font-size: 0.67em; }
.demo p { margin: 0.8em 0; }
.demo p:first-child { margin-top: 0; }
.demo p:last-child { margin-bottom: 0; }
.demo ul, .demo ol {
margin: 0.5em 0;
padding-left: 32px;
list-style: disc;
}
.demo ol { list-style: decimal; }
.demo li {
margin: 0;
padding: 0;
border: none;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.demo dl { margin: 0; }
.demo dd { margin: 0 0 0 32px; }
.demo blockquote { margin: 0.5em 32px; }
.demo hr {
margin: 0.6em 0;
border: none;
border-top: 1px solid #888888;
}
.demo a { color: #0000EE; text-decoration: underline; }
.demo abbr { text-decoration: underline dotted; cursor: help; }
.demo table { font-size: 14px; }
.demo td, .demo th { padding: 1px 3px; }
.badge {
display: inline-block;
margin-right: 4px;
padding: 1px 7px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
vertical-align: middle;
}
.badge.ok { background-color: #D9C6AE; color: #3E2E24; }
.badge.old { background-color: #3E2E24; color: #EDE4D8; }
.badge.css { background-color: #F2EADC; color: #6B5847; border: 1px solid #D9C6AE; }
.uc-table.ref td {
text-align: left;
vertical-align: top;
}
.uc-table.ref td:first-child {
white-space: nowrap;
}
.swatch {
display: inline-block;
width: 44px;
height: 20px;
border: 1px solid #8A7A6B;
vertical-align: middle;
}
/* ---------- NARROW SCREENS ---------- */
@media (max-width: 900px) {
.tab-nav {
position: static;
width: auto;
max-height: 300px;
padding: 22px 0;
border-right: none;
}
.doc-main {
margin-left: 0;
padding: 24px 0 60px;
}
.doc-page {
padding: 32px 22px;
border: none;
}
.doc-title {
font-size: 24px;
}
.doc-table.cols-2 {
grid-template-columns: 1fr;
}
.graph-grid,
.polar-grid {
grid-template-columns: 1fr 1fr;
}
.pair {
grid-template-columns: 1fr;
}
.prob-a {
padding-left: 16px;
}
.cols-2 .doc-head,
.cols-2 .doc-cell {
border-left-width: 2px;
border-right-width: 2px;
}
.cols-2 .doc-head {
border-top-width: 2px;
}
}
@media (max-width: 820px) {
.title-block {
margin: 24px 0 0 24px;
padding: 18px 24px;
}
.title-block h1 {
font-size: 26px;
}
.sidebar {
padding: 20px 24px;
max-width: 100%;
}
.photo {
margin: 24px 24px 0;
}
.dark-panel {
margin: 20px 24px 0;
padding: 24px;
}
.subjects {
padding: 36px 24px 60px;
}
}
/* ======================================================================
ACADEMIC INTAKE (Academic_Intake.html)
====================================================================== */
.intake .doc-section {
margin-bottom: 40px;
}
.intake .field-grid {
margin-bottom: 4px;
}
.intake-hint {
font-style: normal;
font-weight: 400;
color: #8A7A6B;
}
.intake .doc-flag {
grid-column: 1 / -1;
}
/* pill choices for radio and checkbox groups */
.choice-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.choice {
position: relative;
display: inline-flex;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.field .choice input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
.choice span {
display: inline-block;
padding: 7px 13px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
line-height: 1.3;
transition: background-color 0.15s ease, color 0.15s ease;
}
.choice:hover span {
background-color: #E7DCCB;
}
.choice input:checked + span {
background-color: #3E2E24;
color: #EDE4D8;
}
.choice input:focus-visible + span {
outline: 3px solid #D9C6AE;
outline-offset: 1px;
}
/* numbered lines (favorite courses, strengths, wishes) */
.line-list {
display: grid;
gap: 8px;
}
.line-list.numbered input {
padding-left: 34px;
}
.line-list.numbered > input:nth-child(1) { background: #FFFDF8 url("data:image/svg+xml;utf8,") no-repeat left center; }
.line-list.numbered > input:nth-child(2) { background: #FFFDF8 url("data:image/svg+xml;utf8,") no-repeat left center; }
.line-list.numbered > input:nth-child(3) { background: #FFFDF8 url("data:image/svg+xml;utf8,") no-repeat left center; }
.line-list.numbered > input:nth-child(4) { background: #FFFDF8 url("data:image/svg+xml;utf8,") no-repeat left center; }
.line-list.numbered > input:nth-child(5) { background: #FFFDF8 url("data:image/svg+xml;utf8,") no-repeat left center; }
/* grids of inputs (parents, siblings, medications) */
.table-scroll {
overflow-x: auto;
}
.intake-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
font-weight: 400;
}
.intake-table th {
padding: 0 6px 6px 6px;
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #8A7A6B;
text-align: left;
border-bottom: 2px solid #D9C6AE;
}
.intake-table td {
padding: 4px 3px;
}
.intake-table td.rownum {
width: 24px;
padding-left: 0;
font-size: 12px;
color: #8A7A6B;
text-align: center;
}
.field .intake-table input {
padding: 7px 9px;
font-size: 13px;
}
/* previous / next */
.intake-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
padding-top: 24px;
border-top: 2px solid #D9C6AE;
}
.intake-nav .btn-primary,
.intake-nav .btn-secondary,
.sample-actions .btn-primary,
.sample-actions .btn-secondary {
margin-top: 0;
}
.sample-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 6px;
}
/* the sample picture on the first tab */
.sample-figure {
margin: 0 0 44px;
}
.sample-figure a {
display: block;
border: 1px solid #D9C6AE;
background-color: #FFFFFF;
box-shadow: 0 14px 34px rgba(62, 46, 36, 0.16);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sample-figure a:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(62, 46, 36, 0.22);
}
.sample-figure img {
display: block;
width: 100%;
height: auto;
}
.sample-figure figcaption {
margin-top: 12px;
font-size: 13px;
text-align: center;
color: #8A7A6B;
}
.sample-figure figcaption a {
display: inline;
border: 0;
box-shadow: none;
color: #3E2E24;
}
.contents-grid .doc-cell h4 {
margin: 0 0 8px;
}
.contents-grid .var-list .sym {
min-width: 22px;
}
/* completion list on the last tab */
.completion {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}
.completion label {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.completion label:hover .comp-name {
text-decoration: underline;
text-underline-offset: 3px;
}
.completion .comp-count {
font-weight: 400;
color: #8A7A6B;
}
.progress-bar {
height: 8px;
background-color: #E2D6C3;
}
.progress-bar span {
display: block;
height: 100%;
background-color: #3E2E24;
transition: width 0.3s ease;
}
/* "saved" pill */
.save-pill {
position: fixed;
right: 18px;
bottom: 18px;
padding: 8px 14px;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
z-index: 20;
}
.save-pill.show {
opacity: 1;
transform: none;
}
@media (max-width: 700px) {
.intake .field-grid {
grid-template-columns: 1fr;
}
}
@media print {
.intake-page .tab-nav,
.intake-page .intake-nav,
.intake-page .p-sample,
.intake-page .p-finish,
.save-pill {
display: none !important;
}
.intake-page .doc-main {
margin: 0;
padding: 0;
}
.intake-page .doc-page {
max-width: none;
padding: 0;
border: 0;
background: #fff;
}
.intake-page .tab-panel {
display: block !important;
page-break-before: always;
}
.intake-page .tab-panel:first-of-type {
page-break-before: auto;
}
.intake-page .field input,
.intake-page .field select,
.intake-page .field textarea {
border-width: 1px;
}
}
/* ======================================================================
EXPECTED VALUE CALCULATOR (Expected_Value_Calculator.html)
====================================================================== */
.calc-howto {
margin: 0 0 18px;
padding-left: 22px;
}
.calc-howto li {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.calc-howto strong {
color: #3E2E24;
}
.calc-table {
min-width: 440px;
}
.calc-table th:last-child {
width: 48px;
}
.calc-table td {
padding: 5px 4px;
}
.calc-table input {
width: 100%;
padding: 10px 12px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 15px;
}
.calc-table input:focus {
outline: 3px solid #D9C6AE;
outline-offset: 1px;
}
.calc-table input.is-bad {
border-color: #8C3B2E;
background-color: #F7E7E2;
}
.calc-remove {
text-align: center;
}
.row-x {
width: 34px;
height: 34px;
border: 2px solid #3E2E24;
border-radius: 50%;
background-color: #FFFDF8;
color: #3E2E24;
font: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease;
}
.row-x:hover {
background-color: #E7DCCB;
}
.calc-controls {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px 24px;
margin-top: 14px;
}
.calc-controls .btn-secondary {
margin-top: 0;
}
.calc-decimals {
width: 160px;
}
.calc-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.calc-actions .btn-primary,
.calc-actions .btn-secondary {
margin-top: 0;
}
.calc-actions .btn-primary {
min-width: 220px;
text-align: center;
}
.calc-answer {
padding: 22px 26px;
background-color: #F2EADC;
border-left: 4px solid #3E2E24;
}
.calc-kicker {
margin: 0 0 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #8A7A6B;
}
.calc-main {
margin: 0 0 12px;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
color: #3E2E24;
}
.calc-sub {
display: flex;
flex-wrap: wrap;
gap: 8px 40px;
margin-bottom: 10px;
font-size: 15px;
color: #3E2E24;
}
.calc-sub p {
margin: 0;
}
.calc-sentence {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.calc-steps-wrap {
position: relative;
}
.calc-steps-wrap > .copy-btn {
top: -4px;
}
.calc-steps-wrap > .doc-note {
padding-right: 90px;
}
.calc-step {
padding: 18px 0;
border-bottom: 1px solid rgba(62, 46, 36, 0.15);
}
.calc-step:last-child {
border-bottom: none;
}
.calc-step h3 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: #3E2E24;
}
.calc-step p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.calc-math {
padding: 10px 14px;
background-color: #F7F1E7;
border: 1px solid #E2D6C3;
font-size: 15px;
line-height: 1.8;
color: #3E2E24;
overflow-x: auto;
white-space: pre-wrap;
}
.calc-work {
margin: 8px 0 14px;
}
.calc-work th {
text-transform: none;
letter-spacing: 0.3px;
}
.calc-work th.num,
.calc-work td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.calc-work tr.total td {
font-weight: 600;
border-top: 2px solid #3E2E24;
}
@media (max-width: 700px) {
.calc-main {
font-size: 24px;
}
.calc-actions .btn-primary {
min-width: 0;
width: 100%;
}
}
/* ======================================================================
DISTRIBUTION TABLES (Distribution_Tables.html)
====================================================================== */
.dist-shell {
max-width: 1200px;
margin: 28px auto 0;
padding: 0 40px;
}
.dist-shell > input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* the four tables, chosen with binder tabs along the top of the panel */
.dist-tabs {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: flex-end;
gap: 6px;
padding: 14px 0 0;
background-color: #EFE6D9;
border-bottom: 2px solid #3E2E24;
}
.dist-tabs label {
flex: 1 1 0;
display: block;
margin: 8px 0 -2px;
padding: 9px 10px 10px;
border: 2px solid #3E2E24;
border-bottom: 2px solid #3E2E24;
border-radius: 9px 9px 0 0;
background-color: #D9C6AE;
color: #3E2E24;
font-size: 14px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: background-color 0.15s ease, margin-top 0.15s ease, padding 0.15s ease;
}
.dist-tabs label small {
display: block;
margin-top: 2px;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #6B5847;
}
.dist-tabs label:hover {
background-color: #E7DCCB;
}
#d-z:checked ~ .dist-tabs label[for="d-z"],
#d-t:checked ~ .dist-tabs label[for="d-t"],
#d-f:checked ~ .dist-tabs label[for="d-f"],
#d-chi:checked ~ .dist-tabs label[for="d-chi"] {
margin-top: 0;
padding: 12px 10px 14px;
background-color: #F7F1E7;
border-bottom-color: #F7F1E7;
font-size: 15px;
position: relative;
z-index: 1;
}
#d-z:checked ~ .dist-tabs label[for="d-z"] small,
#d-t:checked ~ .dist-tabs label[for="d-t"] small,
#d-f:checked ~ .dist-tabs label[for="d-f"] small,
#d-chi:checked ~ .dist-tabs label[for="d-chi"] small {
color: #8A7A6B;
}
.dist-panel {
display: none;
margin-top: 0;
border-top: none;
}
#d-z:checked ~ .dist-panels .p-z,
#d-t:checked ~ .dist-panels .p-t,
#d-f:checked ~ .dist-panels .p-f,
#d-chi:checked ~ .dist-panels .p-chi {
display: block;
}
.dist-panel .doc-section {
margin-bottom: 44px;
}
.dist-panel .doc-section:last-child {
margin-bottom: 8px;
}
.dist-caption {
margin: 22px 0 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8A7A6B;
}
/* the tables themselves */
.dist-table {
margin: 8px 0 4px;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.dist-table th,
.dist-table td {
padding: 5px 7px;
text-align: center;
white-space: nowrap;
}
.dist-table th {
font-size: 11px;
text-transform: none;
letter-spacing: 0.3px;
}
.dist-table th.corner {
background-color: #3E2E24;
color: #EDE4D8;
}
.dist-table .th-sub {
display: block;
font-size: 9px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
color: #D6C7B4;
}
.dist-table td:first-child {
position: sticky;
left: 0;
background-color: #F2EADC;
font-weight: 600;
}
.dist-table tbody tr:hover td {
background-color: #E7DCCB;
}
.dist-table td.hit {
background-color: #3E2E24 !important;
color: #EDE4D8;
font-weight: 600;
}
.dist-table .hit-head {
background-color: #B8A088 !important;
}
/* z look-up */
.dist-lookup {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 16px;
margin: 0 0 8px;
}
.dist-lookup .field {
width: 220px;
}
.dist-lookup .btn-secondary {
margin-top: 0;
}
.lookup-out {
flex-basis: 100%;
min-height: 1.4em;
margin: 0;
font-size: 14px;
color: #3E2E24;
}
/* calculators */
.dist-calc .mode-switch {
margin-bottom: 16px;
}
.calc-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px 18px;
}
.calc-fields[hidden] {
display: none;
}
.dist-calc .calc-actions {
margin-top: 18px;
}
.dist-calc .calc-answer {
margin-top: 18px;
}
.dist-calc .calc-main {
font-size: 26px;
}
.alpha-field {
margin: 0 0 6px;
}
/* pictures */
.plot-box {
padding: 18px 20px 20px;
background-color: #FBF7EF;
border: 1px solid #E2D6C3;
}
.plot-out {
margin: 0 0 10px;
font-size: 16px;
font-weight: 600;
color: #3E2E24;
font-variant-numeric: tabular-nums;
}
.plot {
display: block;
width: 100%;
height: auto;
}
.plot-curve {
fill: none;
stroke: #3E2E24;
stroke-width: 2.2;
stroke-linejoin: round;
}
.plot-ghost {
fill: none;
stroke: #8A7A6B;
stroke-width: 1.4;
stroke-dasharray: 5 5;
}
.plot-area {
fill: #D9C6AE;
stroke: none;
}
.plot-mark {
stroke: #8C3B2E;
stroke-width: 1.5;
stroke-dasharray: 3 3;
}
.plot-axis {
stroke: #3E2E24;
stroke-width: 1.5;
}
.plot-tick {
stroke: #3E2E24;
stroke-width: 1;
}
.plot-label {
font-family: "Poppins", system-ui, sans-serif;
font-size: 11px;
fill: #8A7A6B;
}
.plot-marklabel {
font-family: "Poppins", system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
fill: #8C3B2E;
}
.plot-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.plot-tile {
padding: 10px 14px 12px;
background-color: #F2EADC;
border-left: 4px solid #3E2E24;
}
.plot-tile p {
margin: 0;
}
.plot-tile .k {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8A7A6B;
}
.plot-tile .v {
margin: 2px 0;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: #3E2E24;
font-variant-numeric: tabular-nums;
}
.plot-tile .s {
font-size: 12px;
line-height: 1.4;
color: #5A4A3E;
}
/* the main slider sits under the graph, lined up with its axis */
.plot-slider-wrap {
padding: 4px 2.5% 0 6.25%;
}
.plot-slider-wrap input[type="range"] {
display: block;
width: 100%;
margin: 0;
accent-color: #3E2E24;
cursor: pointer;
}
.plot-ticks {
position: relative;
height: 18px;
margin-top: 2px;
font-size: 11px;
color: #8A7A6B;
font-variant-numeric: tabular-nums;
}
.plot-ticks span {
position: absolute;
top: 0;
transform: translateX(-50%);
}
.plot-box .plot-out {
margin: 12px 0 0;
font-size: 14px;
}
.plot-controls {
display: grid;
gap: 14px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #E2D6C3;
}
.plot-controls .mode-switch {
margin: 0;
}
.dist-slider {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
align-items: center;
gap: 14px;
font-size: 14px;
font-weight: 600;
color: #3E2E24;
font-variant-numeric: tabular-nums;
}
.dist-slider input[type="range"] {
width: 100%;
accent-color: #3E2E24;
cursor: pointer;
}
.plot-check {
font-size: 13px;
}
@media (max-width: 900px) {
.dist-shell {
padding: 0 24px;
}
.dist-tabs label {
padding-left: 4px;
padding-right: 4px;
font-size: 13px;
}
.dist-tabs label small {
display: none;
}
.plot-stats {
grid-template-columns: 1fr;
}
.dist-table td:first-child {
position: static;
}
.dist-slider {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* ======================================================================
TEST FLOW CHART (Test_Flow_Chart.html)
====================================================================== */
.flow-shell {
max-width: 1200px;
margin: 28px auto 0;
padding: 0 40px;
}
.flow-panel .doc-section {
margin-bottom: 44px;
}
.flow-panel .doc-section:last-child {
margin-bottom: 8px;
}
.flow-panel code {
padding: 1px 5px;
background-color: #F2EADC;
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 0.92em;
}
.flow-panel .code code,
.flow-panel .flip-back code {
padding: 0;
background: none;
}
.flow-caption {
margin: 34px 0 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8A7A6B;
}
.flow-subcaption {
margin: 20px 0 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: #3E2E24;
}
.flow-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 18px;
}
.flip-sample {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 14px;
border: 2px solid #3E2E24;
background-color: #FFFDF8;
font-size: 12.5px;
font-weight: 600;
color: #3E2E24;
}
/* ---------- the tree ---------- */
.tree-scroll {
overflow-x: auto;
padding: 4px 0 10px;
}
.tree {
width: max-content;
margin: 0 auto;
}
.tree ul {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0;
padding: 22px 0 0;
list-style: none;
}
.tree > ul {
padding-top: 0;
}
.tree li {
position: relative;
padding: 22px 5px 0;
text-align: center;
}
.tree > ul > li {
padding-top: 0;
}
/* connectors: each child draws its half of the bar and the drop to its box */
.tree li::before,
.tree li::after {
content: "";
position: absolute;
top: 0;
right: 50%;
width: 50%;
height: 22px;
border-top: 2px solid #3E2E24;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 2px solid #3E2E24;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
.tree li:last-child::before {
border-right: 2px solid #3E2E24;
}
/* a single child gets one straight drop line, drawn on the same side as the
parent's drop so the two segments meet with no step (must follow the first/last rules) */
.tree li:only-child::before {
display: none;
}
.tree li:only-child::after {
display: block;
border: 0 none;
border-left: 2px solid #3E2E24;
}
.tree > ul > li::before,
.tree > ul > li::after {
display: none;
}
.tree ul ul::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 22px;
border-left: 2px solid #3E2E24;
}
.node {
display: inline-block;
max-width: 150px;
padding: 8px 12px;
border: 2px solid #3E2E24;
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
color: #3E2E24;
text-decoration: none;
}
.node-q {
background-color: #FFFDF8;
border-radius: 12px;
}
.node-c {
background-color: #F2EADC;
border-radius: 4px;
font-weight: 500;
}
.node-link {
background-color: #D9C6AE;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.node-link::after {
content: " \2193";
}
.node-link:hover {
background-color: #3E2E24;
color: #EDE4D8;
}
/* ---------- flip cards ---------- */
.flip {
width: 150px;
height: 150px;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
text-align: center;
vertical-align: top;
cursor: pointer;
perspective: 900px;
}
.flip-inner {
position: relative;
display: block;
width: 100%;
height: 100%;
transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.flip.is-flipped .flip-inner {
transform: rotateY(180deg);
}
.flip-front,
.flip-back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 10px;
border: 2px solid #3E2E24;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-front {
background-color: #FFFDF8;
color: #3E2E24;
transition: background-color 0.15s ease;
}
.flip:hover .flip-front {
background-color: #F2EADC;
}
.flip-back {
background-color: #2B2019;
color: #EDE4D8;
transform: rotateY(180deg);
}
.flip:focus-visible {
outline: 3px solid #D9C6AE;
outline-offset: 2px;
}
.flip-tag {
font-size: 9px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8A7A6B;
}
.flip-back .flip-tag {
color: #B9A793;
}
.flip-name {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}
.flip-back code {
display: block;
max-width: 100%;
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 10.5px;
line-height: 1.45;
color: #EDE4D8;
text-align: left;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.flip-hint {
font-size: 10px;
color: #8A7A6B;
}
.flip-back .flip-hint {
color: #B9A793;
}
/* ---------- the one big chart: zoom + pan viewport ---------- */
.chart-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 14px 24px;
margin-bottom: 14px;
}
.chart-zoom {
display: flex;
align-items: center;
gap: 8px;
}
.chart-btn {
min-width: 44px;
margin-top: 0;
padding: 9px 14px;
text-align: center;
}
.chart-level {
min-width: 54px;
font-size: 13px;
font-weight: 600;
text-align: center;
color: #3E2E24;
font-variant-numeric: tabular-nums;
}
.chart-find {
width: 320px;
max-width: 100%;
}
.chart-viewport {
position: relative;
height: 72vh;
overflow: auto;
background-color: #FBF7EF;
border: 2px solid #3E2E24;
cursor: grab;
}
.chart-viewport.is-dragging {
cursor: grabbing;
user-select: none;
}
.chart-viewport:focus-visible {
outline: 3px solid #D9C6AE;
outline-offset: 2px;
}
.chart-canvas {
position: relative;
}
.chart-canvas .tree {
margin: 0;
padding: 28px 28px 32px;
transform-origin: top left;
}
.tree-big .flip {
width: 138px;
height: 138px;
}
.tree-big .flip-name {
font-size: 12.5px;
}
.tree-big .flip-back code {
font-size: 10px;
}
/* ---------- formula cards (Stats Test Flow Chart) ---------- */
.flip-back .fml {
display: block;
max-width: 100%;
font-size: 11.5px;
line-height: 1.5;
color: #EDE4D8;
text-align: center;
overflow-wrap: anywhere;
}
.flip-back .fml .frac,
.flip-back .fml .sqrt {
font-size: 11px;
}
.flow-hyp {
display: grid;
gap: 6px;
margin: 0 0 14px;
}
.flow-hyp p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #3E2E24;
}
.flow-hyp .sym {
display: inline-block;
min-width: 30px;
margin-right: 6px;
font-weight: 600;
}
.flow-formula {
margin: 0 0 16px;
padding: 18px 20px;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
font-size: 17px;
line-height: 2.3;
text-align: center;
color: #3E2E24;
overflow-x: auto;
}
.flow-formula .frac {
margin: 0 4px;
line-height: 1.5;
}
.flow-formula .frac .frac {
font-size: 0.9em;
}
.flow-formula .sqrt {
margin: 0 2px;
}
.flow-formula sub,
.flow-formula sup {
line-height: 0;
}
.flow-where {
margin-bottom: 16px;
}
.flow-cheat .fml-cell {
font-size: 12.5px;
line-height: 1.6;
}
/* ---------- selected test ---------- */
.flow-detail {
padding: 20px 24px 22px;
background-color: #F2EADC;
border-left: 4px solid #3E2E24;
}
.flow-detail-empty {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #5A4A3E;
}
.flow-detail-kicker {
margin: 0 0 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #8A7A6B;
}
.flow-detail-name {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: #3E2E24;
}
.flow-detail-use {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.6;
color: #5A4A3E;
}
.flow-detail .code-wrap {
margin: 10px 0 18px;
}
.flow-detail-notes .doc-cell p {
margin: 0;
}
.flow-cheat td code {
white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
.flip-inner {
transition: none;
}
}
@media (max-width: 900px) {
.flow-shell {
padding: 0 24px;
}
.node {
max-width: 140px;
font-size: 12px;
}
.flip {
width: 142px;
height: 142px;
}
.chart-viewport {
height: 62vh;
}
}
/* ======================================================================
CALCULUS II (Calculus_2.html)
Binder tabs reuse the Distribution Tables shell; the big flip blocks
and the 100 problems are new.
====================================================================== */
#c-seq:checked ~ .dist-tabs label[for="c-seq"],
#c-ser:checked ~ .dist-tabs label[for="c-ser"],
#c-tests:checked ~ .dist-tabs label[for="c-tests"],
#c-lim:checked ~ .dist-tabs label[for="c-lim"],
#c-prob:checked ~ .dist-tabs label[for="c-prob"] {
margin-top: 0;
padding: 12px 10px 14px;
background-color: #F7F1E7;
border-bottom-color: #F7F1E7;
font-size: 15px;
position: relative;
z-index: 1;
}
#c-seq:checked ~ .dist-tabs label[for="c-seq"] small,
#c-ser:checked ~ .dist-tabs label[for="c-ser"] small,
#c-tests:checked ~ .dist-tabs label[for="c-tests"] small,
#c-lim:checked ~ .dist-tabs label[for="c-lim"] small,
#c-prob:checked ~ .dist-tabs label[for="c-prob"] small {
color: #8A7A6B;
}
#c-seq:checked ~ .dist-panels .p-seq,
#c-ser:checked ~ .dist-panels .p-ser,
#c-tests:checked ~ .dist-panels .p-tests,
#c-lim:checked ~ .dist-panels .p-lim,
#c-prob:checked ~ .dist-panels .p-prob {
display: block;
}
.calc2-shell {
max-width: 1240px;
}
.calc2-practice a {
color: #8C3B2E;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.calc2-practice a:hover {
color: #3E2E24;
}
/* math set by KaTeX (Calculus II and III): match the page's ink and keep long lines scrollable */
.math-page .katex {
font-size: 1.08em;
color: #3E2E24;
}
.math-page .katex-display {
margin: 10px 0 12px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 0 6px;
}
.calc2-tabs .tab-short {
display: none;
}
/* ---- the big flip blocks ---- */
.cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 22px;
}
.big-flip {
position: relative;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
perspective: 1600px;
-webkit-tap-highlight-color: transparent;
}
.big-flip:focus-visible {
outline: 3px solid #D9C6AE;
outline-offset: 3px;
}
.bf-inner {
display: grid;
width: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.big-flip.is-flipped .bf-inner {
transform: rotateY(180deg);
}
.bf-face {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
min-height: 280px;
padding: 22px 24px 20px;
border: 2px solid #3E2E24;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.bf-front {
background-color: #FFFDF8;
color: #3E2E24;
transition: background-color 0.15s ease;
}
.big-flip:hover .bf-front {
background-color: #F2EADC;
}
.bf-back {
background-color: #2B2019;
color: #EDE4D8;
transform: rotateY(180deg);
}
.bf-tag {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #8A7A6B;
}
.bf-back .bf-tag {
color: #D9C6AE;
}
.bf-title {
display: block;
margin-top: -4px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.bf-def {
display: block;
font-size: 14px;
line-height: 1.65;
color: #5A4A3E;
}
.bf-def em {
font-style: italic;
color: #3E2E24;
}
.bf-formula {
display: block;
margin: 2px 0 0;
padding: 10px 14px;
background-color: #F7F1E7;
border: 1px solid #D9C6AE;
}
.bf-formula .katex-display {
margin: 0;
}
.bf-hint {
display: block;
margin-top: auto;
padding-top: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #8A7A6B;
}
.bf-back .bf-hint {
color: #8A7A6B;
}
.bf-block {
display: block;
font-size: 13.5px;
line-height: 1.65;
color: #EDE4D8;
}
.bf-block strong {
display: block;
margin-bottom: 3px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #D9C6AE;
}
.bf-block em {
font-style: italic;
color: #FFFDF8;
}
.bf-warn {
margin-top: 2px;
padding: 10px 12px;
border-left: 3px solid #D9C6AE;
background-color: rgba(255, 253, 248, 0.06);
}
.bf-warn strong {
color: #E8B9AE;
}
.bf-back .katex {
color: #FFFDF8;
}
/* ---- the 100 problems ---- */
.math-page .prob-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px 24px;
margin: 6px 0 10px;
padding: 16px 18px;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
}
.math-page .prob-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.math-page .prob-actions .btn-secondary {
margin-top: 0;
padding: 9px 16px;
font-size: 13px;
background-color: #FFFDF8;
color: #3E2E24;
}
.math-page .prob-actions .btn-secondary:hover {
background-color: #3E2E24;
color: #EDE4D8;
}
.math-page .prob-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.math-page .prob-jump a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1px solid #3E2E24;
background-color: #F7F1E7;
color: #3E2E24;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.15s ease;
}
.math-page .prob-jump a:hover {
background-color: #D9C6AE;
}
.math-page .prob-jump-range {
padding: 1px 6px;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 11px;
letter-spacing: 0.5px;
}
.math-page .prob-group {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
margin-top: 40px;
padding-bottom: 8px;
border-bottom: 2px solid #3E2E24;
scroll-margin-top: 90px;
text-transform: none;
letter-spacing: 0;
font-size: 18px;
color: #3E2E24;
}
.math-page .prob-group-range {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8A7A6B;
}
.math-page .prob {
margin: 12px 0 0;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
scroll-margin-top: 90px;
}
.math-page .prob > summary {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px 14px 14px;
list-style: none;
cursor: pointer;
transition: background-color 0.15s ease;
}
.math-page .prob > summary::-webkit-details-marker {
display: none;
}
.math-page .prob > summary:hover {
background-color: #F2EADC;
}
.math-page .prob[open] > summary {
background-color: #F7F1E7;
border-bottom: 1px solid rgba(62, 46, 36, 0.25);
}
.math-page .prob-num {
flex: 0 0 auto;
min-width: 36px;
padding: 5px 0;
background-color: #3E2E24;
color: #EDE4D8;
font-size: 13px;
font-weight: 700;
text-align: center;
line-height: 1.2;
}
.math-page .prob-q {
flex: 1 1 auto;
min-width: 0;
padding-top: 3px;
font-size: 15px;
line-height: 1.65;
color: #3E2E24;
}
.math-page .prob-chev {
display: none;
flex: 0 0 auto;
width: 10px;
height: 10px;
margin: 10px 4px 0 0;
border-right: 2px solid #3E2E24;
border-bottom: 2px solid #3E2E24;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.math-page .prob[open] > summary .prob-chev {
transform: rotate(225deg);
margin-top: 14px;
}
.math-page .prob summary::after {
padding-top: 4px;
}
.math-page .prob-sol {
padding: 14px 18px 18px 64px;
font-size: 14.5px;
line-height: 1.75;
color: #5A4A3E;
}
.math-page .prob-sol p {
margin: 0 0 8px;
}
.math-page .prob-sol p:last-child {
margin-bottom: 0;
}
.math-page .prob-sol strong {
color: #3E2E24;
}
.math-page .prob-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #8A7A6B;
}
.math-page .prob-ans {
display: inline-block;
margin-top: 4px;
padding: 8px 12px;
background-color: #F2EADC;
border-left: 3px solid #8C3B2E;
color: #3E2E24;
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.bf-inner {
transition: none;
}
}
@media (max-width: 900px) {
.cards {
grid-template-columns: 1fr;
gap: 16px;
}
.bf-face {
min-height: 0;
padding: 18px 16px 16px;
}
.bf-title {
font-size: 21px;
}
.calc2-tabs {
gap: 3px;
}
.calc2-tabs label {
min-width: 0;
padding-left: 1px;
padding-right: 1px;
font-size: 10.5px;
letter-spacing: -0.1px;
white-space: nowrap;
}
#c-seq:checked ~ .calc2-tabs label[for="c-seq"],
#c-ser:checked ~ .calc2-tabs label[for="c-ser"],
#c-tests:checked ~ .calc2-tabs label[for="c-tests"],
#c-lim:checked ~ .calc2-tabs label[for="c-lim"],
#c-prob:checked ~ .calc2-tabs label[for="c-prob"] {
padding: 10px 1px 12px;
font-size: 11px;
}
.calc2-tabs .tab-long {
display: none;
}
.calc2-tabs .tab-short {
display: inline;
}
.bf-formula {
padding: 8px 10px;
}
.bf-formula .katex {
font-size: 1em;
}
.math-page .prob-sol {
padding-left: 16px;
}
.math-page .prob > summary {
gap: 10px;
padding-right: 12px;
}
.math-page .prob summary::after {
content: none;
}
.math-page .prob-chev {
display: block;
}
}
@media (max-width: 360px) {
.calc2-tabs {
gap: 2px;
}
.calc2-tabs label {
font-size: 10px;
}
#c-seq:checked ~ .calc2-tabs label[for="c-seq"],
#c-ser:checked ~ .calc2-tabs label[for="c-ser"],
#c-tests:checked ~ .calc2-tabs label[for="c-tests"],
#c-lim:checked ~ .calc2-tabs label[for="c-lim"],
#c-prob:checked ~ .calc2-tabs label[for="c-prob"] {
font-size: 10.5px;
}
}
/* ======================================================================
CALCULUS III (Calculus_3.html)
The Calculus I sheet layout with KaTeX-set math inside the cells.
====================================================================== */
.math-page .doc-cell p {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.8;
color: #5A4A3E;
}
.math-page .doc-cell p:last-child {
margin-bottom: 0;
}
.math-page .doc-cell p.note-sm {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.7;
color: #8A7A6B;
}
.math-page .doc-cell p strong,
.math-page .doc-cell li strong {
color: #3E2E24;
}
.math-page .doc-cell .katex-display {
margin: 6px 0 14px;
padding: 2px 0 4px;
}
.math-page .doc-cell .katex-display:last-child {
margin-bottom: 0;
}
.math-page .doc-cell .katex {
font-size: 1.04em;
}
.math-page .doc-cell ol li,
.math-page .doc-cell .var-list li {
line-height: 1.8;
}
.math-page .doc-cell ol li {
margin-bottom: 4px;
}
.math-page .doc-note .katex,
.math-page .doc-flag .katex {
font-size: 1.02em;
}
.math-page .doc-flag {
margin-top: 18px;
}
.calc3-page .doc-subtitle {
margin-bottom: 34px;
}
/* wider sheet so two columns of formulas fit; long display formulas may wrap at relations */
.calc3-page .doc-page,
.bcalc-page .doc-page {
max-width: 1040px;
}
.math-page .doc-cell .katex-display > .katex,
.math-page .doc-cell .katex-display > .katex > .katex-html,
.math-page .prob-sol .katex-display > .katex,
.math-page .prob-sol .katex-display > .katex > .katex-html,
.math-page .fml-box .katex-display > .katex,
.math-page .fml-box .katex-display > .katex > .katex-html {
white-space: normal;
}
.math-page .doc-cell .katex-display .base,
.math-page .prob-sol .katex-display .base {
margin-bottom: 4px;
}
.calc3-pager {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 24px;
margin: -12px 0 10px;
padding-top: 18px;
border-top: 2px solid #D9C6AE;
}
.calc3-pager label {
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #8C3B2E;
text-decoration: underline;
text-underline-offset: 3px;
}
.calc3-pager label:hover {
color: #3E2E24;
}
.calc3-pager label:last-child {
margin-left: auto;
text-align: right;
}
@media (max-width: 900px) {
.math-page .doc-table.cols-2 .doc-head:nth-child(1) { order: 1; }
.math-page .doc-table.cols-2 .doc-cell:nth-child(3) { order: 2; margin-bottom: 14px; }
.math-page .doc-table.cols-2 .doc-head:nth-child(2) { order: 3; }
.math-page .doc-table.cols-2 .doc-cell:nth-child(4) { order: 4; }
.math-page .doc-table.cols-2 .doc-head,
.math-page .doc-table.cols-2 .doc-cell {
border-left-width: 2px;
border-right-width: 2px;
}
.calc3-page .doc-page {
padding: 28px 16px;
}
}
/* ---- practice problems on the Calculus III sheet ---- */
.calc3-practice {
margin: 16px 0 0;
font-size: 13px;
line-height: 1.7;
color: #5A4A3E;
}
.calc3-practice strong {
color: #3E2E24;
}
.calc3-practice a,
.prob-link {
color: #8C3B2E;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.calc3-practice a:hover,
.prob-link:hover {
color: #3E2E24;
}
.math-page .prob-sol p.prob-topic {
margin-top: 12px;
font-size: 12px;
color: #8A7A6B;
}
.prob-topic label {
cursor: pointer;
color: #8C3B2E;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.prob-topic label:hover {
color: #3E2E24;
}
.calc3-page .prob {
scroll-margin-top: 20px;
}
.calc3-page .prob-toolbar {
margin-bottom: 14px;
}
.calc3-page .prob-q {
font-size: 14px;
}
.nav-practice > summary label {
color: #E8D9C2;
}
/* ======================================================================
BUSINESS CALCULUS (Business_Calculus_1.html)
Sheet layout with big, isolated formula boxes and a "why it's missed"
note on each practice problem.
====================================================================== */
.nav-title {
margin: 0 0 18px;
padding: 0 24px;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: #EDE4D8;
}
.fml-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 18px;
}
.fml-box {
min-width: 0;
padding: 20px 22px 18px;
background-color: #FFFDF8;
border: 2px solid #3E2E24;
text-align: center;
}
.fml-box.wide {
grid-column: 1 / -1;
}
.fml-label {
display: block;
margin-bottom: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #8A7A6B;
}
.math-page .fml-box .katex-display {
margin: 10px 0 12px;
padding: 4px 0 6px;
}
.fml-box .katex {
font-size: 1.75em;
color: #3E2E24;
}
.fml-where {
display: block;
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid #EDE4D8;
font-size: 13px;
line-height: 1.65;
text-align: left;
color: #5A4A3E;
}
.fml-where .katex {
font-size: 1.04em;
}
.math-page .prob-sol p.prob-slip {
margin: 12px 0 10px;
padding: 10px 12px;
background-color: #F7F1E7;
border-left: 3px solid #D9C6AE;
font-size: 13.5px;
line-height: 1.65;
color: #5A4A3E;
}
.math-page .prob-sol p.prob-slip strong {
color: #3E2E24;
}
@media (max-width: 900px) {
.fml-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.fml-box {
padding: 16px 14px 14px;
}
.fml-box .katex {
font-size: 1.3em;
}
.fml-where .katex {
font-size: 1.04em;
}
}
/* ============================================================
READABILITY
Bigger, darker body text on the pages that carry the sidebar and on
the intake. Formula sheets keep their denser reference sizes.
============================================================ */
.home .section-intro,
.home .booking-intro,
.home .doc-note,
.home .about-text p,
.home .about-list,
.home .service-card ul,
.home .booking-steps li,
.home .class-box li,
.home .sidebar-section p,
.home .resource-intro,
.home .game-card-text span,
.home .done-text,
.home .pay-note,
.home .booking-panel p {
font-size: 16px;
line-height: 1.6;
color: #3E2E24;
}
.home .section-intro {
max-width: 62ch;
}
.home .about-text p:first-child {
font-size: 19px;
font-weight: 600;
}
.home .var-list li,
.home .doc-cell ol li,
.home .tutor-block li a,
.home .doc-flag,
.home .selection-summary {
font-size: 15px;
line-height: 1.6;
}
.home .var-list li,
.home .doc-cell ol li {
color: #3E2E24;
}
.home .booking-note,
.home .doc-subtitle,
.home .note-sm,
.home .cert-hint,
.home .doc-cell h4 {
font-size: 14px;
}
.home .booking-note,
.home .doc-subtitle,
.home .note-sm {
color: #6B5A4C;
}
.home .case-block span,
.home .book-banner-text {
font-size: 15px;
color: #E3D6C4;
}
.home .nav-tabs a {
font-size: 14px;
}
.intake-page .doc-note,
.intake-page .var-list li,
.intake-page .doc-cell ol li {
font-size: 15px;
line-height: 1.6;
color: #3E2E24;
}
.home .book-block span,
.home .about-roles span {
font-size: 14px;
color: #E3D6C4;
}
.home .about-roles span {
color: #6B5A4C;
}
/* Academic forms under For Me (home sidebar). */
.site-nav .forms-menu { color: #EDE4D8; margin: 0 12px 8px; }
.site-nav .forms-menu > summary { cursor: pointer; padding: 12px 10px; font-size: 13px; font-weight: 600; }
.site-nav .forms-menu .nav-tabs { margin: 0 0 14px; }
.site-nav .forms-menu .nav-tabs a { padding: 9px 12px 9px 25px; font-size: 12px; }