/* ====================================================================== * NSF NCAR / RAL — Unified brand theme for reveal.js * Ported from NCAR/ral-revealjs-slide-template. Applied OVER the built-in * "black" theme. Dark/light switching via data-theme="dark|light" on . * Press T during presentation to toggle. * ====================================================================== */ /* 1. Brand palette */ :root { --ncar-blue: #0057c2; --ncar-dark-blue: #00357a; --ncar-space: #011837; --ncar-light-blue: #42c0ff; --ncar-light-gray: #f1f0ee; --ncar-white: #ffffff; --ncar-orange: #faa119; --ncar-yellow: #ffdd31; --font-display: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* 2a. Dark theme (default) */ :root, [data-theme="dark"] { --bg-viewport: var(--ncar-space); --bg-section: var(--ncar-dark-blue); --text-primary: var(--ncar-light-gray); --text-h3h4: var(--ncar-light-blue); --text-link: var(--ncar-light-blue); --text-accent: var(--ncar-orange); --cover-eyebrow: var(--ncar-light-blue); --table-header: var(--ncar-light-blue); --table-stripe: var(--ncar-light-gray); --text-contrast: var(--ncar-space); --logo-color-display: none; --logo-white-display: block; --wave-bg: url("assets/waves/wide-fills-d-color.svg"); --statement-lead: var(--ncar-light-blue); --statement-body: var(--ncar-white); --box-bg: rgba(0, 87, 194, 0.25); --box-border: rgba(66, 192, 255, 0.35); --card-bg: rgba(1, 24, 55, 0.82); --card-border: rgba(66, 192, 255, 0.35); --fragment-note-bg: rgba(66, 192, 255, 0.15); --shadow-code: rgba(0, 0, 0, 0.45); } /* 2b. Light theme */ [data-theme="light"] { --bg-viewport: var(--ncar-light-gray); --bg-section: var(--ncar-white); --text-primary: var(--ncar-dark-blue); --text-h3h4: var(--ncar-blue); --text-link: var(--ncar-blue); --text-accent: var(--ncar-orange); --cover-eyebrow: var(--ncar-blue); --table-header: var(--ncar-blue); --table-stripe: var(--ncar-dark-blue); --text-contrast: var(--ncar-light-gray); --logo-color-display: block; --logo-white-display: none; --wave-bg: url("assets/waves/wide-fills-a-white.svg"); --statement-lead: var(--ncar-blue); --statement-body: var(--ncar-dark-blue); --box-bg: rgba(0, 87, 194, 0.08); --box-border: rgba(0, 87, 194, 0.2); --card-bg: rgba(255, 255, 255, 0.92); --card-border: rgba(0, 87, 194, 0.2); --fragment-note-bg: rgba(0, 87, 194, 0.1); --shadow-code: rgba(0, 0, 0, 0.12); } /* 3. Utils */ .h-separator { margin: 36px 0 36px 0; width: 128px; border-bottom: 4px solid var(--cover-eyebrow); } .v-separator { margin: 0 24px 0 20px; border-left: 4px solid var(--cover-eyebrow); } /* 4. Reveal base overrides */ .reveal { font-family: var(--font-display); color: var(--text-primary); } .reveal .slides { text-align: left; } .reveal .slides section { box-sizing: border-box; height: 100%; } .reveal-viewport, .reveal { background: var(--bg-viewport); } .reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: var(--font-display); color: var(--text-primary); text-transform: none; font-weight: 700; } .reveal h3, .reveal h4 { color: var(--text-h3h4); } .reveal a { color: var(--text-link); } .reveal ul li::marker { color: var(--ncar-orange); } .reveal .slide-number { background: transparent; color: var(--text-primary); font-family: var(--font-display); position: absolute; left: 24px; bottom: 24px; text-transform: uppercase; } .opt-footer-name { margin-left: 32px; padding-left: 32px; border-left: 4px solid var(--text-primary); } /* 5. Brand furniture */ .brand-bar img { height: 200px; width: auto; } .slide-title-bar { position: relative; display: flex; align-items: center; gap: 40px; z-index: 5; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 3px solid var(--text-primary); } .slide-title-bar h2 { flex: 1; min-width: 0; margin-bottom: 0; } .slide-title-bar img { height: 67px; width: auto; flex-shrink: 0; } .slide-title-bar--statement { border-bottom: none; padding-bottom: 0; justify-content: flex-end; } .slide-title-bar--statement h2 { display: none; } .slide-title-bar--statement img { height: 88px; } .brand-bar .logo-color, .slide-title-bar .logo-color { display: var(--logo-color-display); } .brand-bar .logo-white, .slide-title-bar .logo-white { display: var(--logo-white-display); } @media (max-width: 750px) { .slide-title-bar { flex-direction: column-reverse; align-items: flex-start; gap: 16px; } } /* 6. Cover slides */ .slide-cover { overflow: hidden; } .slide-cover .eyebrow { color: var(--cover-eyebrow); padding-top: 72px; font-size: 27px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .slide-cover .presenter-block { font-weight: 300; } .slide-cover .presenter-block .name { font-weight: 700; } .slide-cover .credit-team { margin-top: 28px; font-size: 20px; letter-spacing: 0.08em; font-weight: 100; } .slide-cover .credit-intro { text-transform: uppercase; } .slide-footnote--pinned { opacity: 0.7; font-size: 17px; font-style: italic; font-weight: 100; position: absolute; padding-right: 150px; bottom: 2px; line-height: 1.4; } /* 7. Content slides */ .wave-bg { background-image: var(--wave-bg); background-repeat: no-repeat; background-size: contain; background-position: center; } .slide-content h2 .accent { color: var(--text-accent); font-weight: 500; } .slide-content .intro { font-size: 64px; font-weight: 700; padding-top: 72px; margin-bottom: 28px; } .slide-content.two-col .body, .slide-content.three-col .body, .slide-content.four-col .body { padding-top: 72px; display: grid; gap: 40px; } .slide-content.two-col .body { grid-template-columns: 1fr 1fr; } .slide-content.three-col .body { grid-template-columns: 1fr 1fr 1fr; } .slide-content.four-col .body { grid-template-columns: 1fr 1fr 1fr 1fr; } .slide-content .body p, .slide-content .body li { line-height: 1.45; } .slide-content .body h3 { margin-bottom: 28px; border-left: 4px solid var(--ncar-orange); padding-left: 14px; font-weight: 700; } /* Stat boxes */ .stat-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .stat-boxes .box { background: var(--box-bg); border: 1px solid var(--box-border); border-radius: 6px; padding: 14px 18px; } .stat-boxes .box .label { color: var(--text-accent); font-weight: 600; display: block; margin-bottom: 4px; font-size: xx-large; } .stat-boxes .box .value { font-size: medium; } /* Content + image */ .slide-content .with-image { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; } .slide-content .with-image img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; } .slide-content ul { margin: 0 0 0.4em 1.2em; } .slide-content li { font-size: 40px; line-height: 1.35; margin-bottom: 4px; } /* Table */ .slide-table table { margin-top: 72px; border: 2px solid var(--ncar-yellow); } .slide-table thead { background-color: var(--table-header); color: var(--text-contrast); border-bottom: 1px solid var(--ncar-orange); } .slide-table th { padding-top: 88px; } .slide-table tr:nth-child(even) { border-bottom: none; background-color: var(--table-stripe); color: var(--text-contrast); } /* 8. Bolder statement */ .slide-bolder-statement .statement-lead { font-family: var(--font-display); font-size: 96px; line-height: 1.1; font-weight: 700; margin-top: 172px; padding-left: 72px; } /* 9. Demo slides */ .reveal pre { width: 100%; box-shadow: 0 6px 40px var(--shadow-code); border-radius: 6px; margin: 24px 0; } .slide-code .caption { color: var(--text-accent); font-size: 36px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 16px; } .slide-fragments .fragment.highlight-ncar-cyan.visible { color: var(--text-accent); } .slide-fragments .fragment-note { display: inline-block; margin-left: 12px; padding: 2px 10px; border-radius: 3px; background: var(--fragment-note-bg); color: var(--text-accent); font-family: "JetBrains Mono", Menlo, monospace; } .auto-animate-stack { display: flex; flex-direction: column; gap: 18px; margin-top: 40px; } .auto-animate-stack .chip { display: inline-block; padding: 14px 24px; background: var(--ncar-blue); color: var(--ncar-white); border-radius: 6px; font-size: 44px; font-weight: 500; align-self: flex-start; } .auto-animate-stack .chip.accent { background: var(--ncar-orange); color: var(--ncar-space); } .auto-animate-stack .chip.light-blue { background: var(--ncar-light-blue); } .auto-animate-stack .chip.dark-blue { background: var(--ncar-dark-blue); }