/*
* MHA slides.css. Consumes academy/design-system/tokens.css (+ components.css
* when a device card is embedded inside a slide, e.g. .mha-3w).
*
* No JavaScript. Navigation is scroll-snap: each section.slide is one
* scroll-snap stop, so scrolling the deck advances one slide at a time.
*
* ============================================================================
* MARKUP CONTRACT
* ============================================================================
*
*
*
*
* MATERIAL HANDLING ACADEMY
* DRIVING QUESTION
* ...
*
*
*
*
*
*
...
* ...device card, e.g. .mha-3w...
*
*
*
*
*
* EDUCATE. ELEVATE. ENGINEER EXCELLENCE.
*
*
*
*/
html {
scroll-snap-type: y mandatory;
/* overrides tokens.css cream so the canvas beyond body stays deck-dark */
background: #111;
}
body.deck {
margin: 0;
background: #111;
scroll-behavior: smooth;
}
.slide {
scroll-snap-align: start;
scroll-snap-stop: always;
width: 1280px;
height: 720px;
margin: 48px auto;
background: var(--mha-cream);
color: var(--mha-ink);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.slide-header {
background: var(--mha-navy);
color: var(--mha-text-on-navy);
padding: 1.5rem 3rem;
font-size: 16px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.slide-body {
flex: 1;
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}
.slide h2 {
font-size: 44px;
margin: 0;
}
.slide p,
.slide li {
font-size: 26px;
line-height: 1.4;
}
/* Device components on slides: scale up from print sizing */
.slide .mha-3w > div { font-size: 22px; line-height: 1.45; }
.slide .mha-3w > div > span:first-child { font-size: 14px; }
.slide .mha-field-insight p, .slide .mha-riverside .rv-body,
.slide .mha-common-mistake p, .slide .mha-pro-tip p,
.slide .mha-stop-think p { font-size: 24px; line-height: 1.5; }
.slide .mha-label { font-size: 15px; }
.slide-footer {
background: var(--mha-gold);
color: var(--mha-navy);
padding: 1rem 3rem;
font-size: 16px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
/* ---- title variant: full navy, gold driving question, centered ---- */
.slide.title {
background: var(--mha-navy);
color: var(--mha-text-on-navy);
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem;
gap: 2rem;
}
.slide.title .slide-word {
color: var(--mha-gold);
font-size: 22px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.slide.title .slide-dq {
background: var(--mha-gold);
color: var(--mha-navy);
border-radius: var(--r);
padding: 2rem 3rem;
max-width: 900px;
margin: 0;
}
.slide.title .slide-dq .mha-label { color: var(--mha-navy); }
.slide.title .slide-dq strong {
display: block;
font-size: 44px;
font-weight: 800;
margin-top: .5rem;
text-transform: none;
letter-spacing: 0;
}
/* ---- closing variant: navy, big centered tagline ---- */
.slide.closing {
background: var(--mha-navy);
color: var(--mha-gold);
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem;
}
.slide.closing .slide-tagline {
font-size: 44px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
max-width: 1000px;
margin: 0;
}