/*
Master stylesheet for every self-hosted reveal.js guided-notes deck
(assets/presentations/*.html). One shared file so a palette or layout
change here applies to every deck site-wide — decks should not
redeclare these rules inline.
Usage in a deck's , after reveal.css:
Typography: Inter (body) + Instrument Serif (headings) — the same two
fonts as the Jekyll site itself and the worksheet PDFs, self-hosted via
assets/css/site-fonts.css so all three surfaces stay in sync.
*/
@import url("/assets/css/site-fonts.css");
/*
Palette: a muted red/gold/blue triad on a warm paper ground, inspired
by Johannes Itten's Farbenkugel color wheel (desaturated, not the
vivid original). This is the same palette used site-wide — see
_sass/custom/setup.scss (page chrome) and the button/component CSS in
_includes/head_custom.html. Keep all three in sync if this changes.
Variable names below are historical ("navy"/"ice"/"white") but now
hold the new hex values — renaming them would mean touching every
deck HTML file, which all reference these by var(), so the names
stay put and only the values change.
*/
:root {
--navy: #2E5A73; /* muted blue — structural accent, badges, links */
--navy-deep: #24475C; /* deep blue — dark-slide background */
--ice: #E3CD8C; /* muted gold — light accent text on dark-blue slides */
--white: #F7F2E4; /* very light paper — light-slide background */
--dark-text: #2A2118; /* warm dark ink — body text */
--muted: #6B6255; /* warm gray — secondary/hint text */
--card-bg: #FBF7EC; /* paper-light — card surfaces */
--card-border: #E4D9BC;/* paper border */
--red: #AE5038; /* muted red — reveal-word emphasis, CTAs */
}
html, body { height: 100%; }
/*
Base font-size and the deck's 1000x562 (16:9) logical canvas (set via
Reveal.initialize) are chosen together: 16:9 exactly matches the site's
.presentation-embed container (see _includes/head_custom.html), so the
deck fills it edge to edge with no letterboxing, and reveal.js's CSS
transform then scales this base size down/up by that same fixed ratio.
At the container's max embedded width (640px), that works out to a
0.64x scale — so every deck's SMALLEST text class must stay at 0.62em
or larger here, or it renders below the site's own body-text size once
embedded (non-fullscreen) on the page. Don't add a class smaller than
that without re-checking this math.
*/
.reveal { font-family: "Inter", system-ui, sans-serif; font-size: 44px; color: var(--dark-text); }
.reveal .slides { text-align: left; }
.reveal .slides section {
height: 562px;
padding: 40px 56px;
box-sizing: border-box;
}
.reveal .slides section.present {
position: relative;
display: flex !important;
flex-direction: column;
justify-content: center;
}
.reveal h1, .reveal h2, .reveal h3 {
font-family: "Instrument Serif", Georgia, serif;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
.slide-dark { background: var(--navy); color: var(--white); }
.slide-light { background: var(--white); color: var(--dark-text); }
.eyebrow {
font-family: "Inter", system-ui, sans-serif;
font-size: 0.62em;
font-weight: bold;
letter-spacing: 0.12em;
color: var(--navy);
margin-bottom: 0.3em;
}
.slide-dark .eyebrow { color: var(--ice); }
.big-title { font-size: 1.7em; margin: 0 0 0.35em 0; }
.slide-dark .big-title { color: var(--white); }
.subtitle {
font-family: "Inter", system-ui, sans-serif;
font-style: italic;
font-size: 0.68em;
color: var(--muted);
margin: 0 0 0.6em 0;
}
.slide-dark .subtitle { color: var(--ice); }
.callout-box {
background: var(--navy-deep);
border: 1px solid var(--ice);
border-radius: 8px;
padding: 0.5em 0.7em;
font-weight: bold;
font-size: 0.62em;
display: inline-block;
margin-top: 0.4em;
}
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.55em 0.75em;
font-size: 0.62em;
line-height: 1.45;
margin-top: 0.5em;
}
.hint {
font-family: "Inter", system-ui, sans-serif;
font-style: italic;
font-size: 0.62em;
color: var(--muted);
margin-top: 0.4em;
}
.word-grid {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
margin-top: 0.5em;
}
.word-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.35em 0.9em;
font-family: "Instrument Serif", Georgia, serif;
font-size: 0.8em;
color: var(--navy);
}
.num-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: var(--navy);
color: var(--white);
font-family: "Inter", system-ui, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 1;
margin-right: 0.35em;
vertical-align: middle;
}
.reveal-word {
font-family: "Instrument Serif", Georgia, serif;
font-size: 1.9em;
color: var(--red);
margin: 0.2em 0 0.4em 0;
}
.footer-tag {
position: absolute;
bottom: 0.5em;
right: 0.9em;
font-size: 0.62em;
color: var(--muted);
}
.slide-dark .footer-tag { color: var(--ice); }
/* Fullscreen toggle control, injected by /assets/js/revealjs-deck-common.js */
.deck-fullscreen-btn {
position: fixed;
top: 14px;
right: 14px;
z-index: 40;
width: 34px;
height: 34px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(36, 71, 92, 0.65);
color: #F1E8D0;
border: 1px solid rgba(241, 232, 208, 0.4);
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
}
.deck-fullscreen-btn:hover { background: rgba(36, 71, 92, 0.9); }
.deck-fullscreen-btn svg { width: 18px; height: 18px; display: block; }