style.css

/* EveryPolitician-branded reveal.js theme — basics only */

@font-face {
    font-family: 'Mona Sans';
    src: url('fonts/Mona-Sans.woff2') format('woff2');
    font-weight: 200 900;
    font-display: swap;
}

:root {
    --ep-primary: #004eeb;
    --ep-accent: #0040c1;
    --ep-cta: #ffb020;
    --ep-text: #171717;

    --r-background-color: #fff;
    --r-main-font: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --r-main-color: var(--ep-text);
    --r-heading-font: var(--r-main-font);
    --r-heading-color: var(--ep-primary);
    --r-heading-font-weight: 700;
    --r-heading-line-height: 1.2;
    --r-heading-text-transform: none;
    --r-link-color: var(--ep-primary);
}

/* White text on accent-colored slides */
.reveal section.on-accent,
.reveal section.on-accent h1,
.reveal section.on-accent h2,
.reveal section.on-accent h3,
.reveal section.on-accent p,
.reveal section.on-accent li {
    color: #fff;
}

.reveal section.on-accent a {
    color: #fff;
    text-decoration: underline;
}

/* One consistent left edge; group with space, not alignment */
.reveal .slides section {
    text-align: left;
}

.reveal ul,
.reveal ol {
    display: block;
    margin-left: 1.2em;
}

.reveal .byline {
    margin-top: 2em;
}

/* Corner logo on every slide (element sits outside .slides). Bottom-left:
   bottom-right belongs to the navigation arrows. .logo-on-dark on .reveal
   (toggled by the script) swaps in the all-white variant. */
.reveal .slide-logo {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 240px;
    z-index: 30;
}

.reveal .slide-logo img {
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.reveal .slide-logo .logo-white,
.reveal.logo-on-dark .slide-logo .logo-color {
    display: none;
}

.reveal.logo-on-dark .slide-logo .logo-white {
    display: block;
}

/* Slides with class="no-logo" (e.g. full-bleed screenshots) hide the corner
   logo entirely. */
.reveal.logo-hidden .slide-logo {
    display: none;
}

/* Title slide: giant hemicycle watermark bleeding off the right edge */
.reveal .title-slide .title-logo {
    position: absolute;
    top: 50%;
    right: -18%;
    transform: translateY(-50%);
    width: 75%;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    opacity: 0.22;
}

/* Text paints above the watermark */
.reveal .title-slide .title-content {
    position: relative;
}

.reveal .title-slide h1 {
    font-weight: 900;
}

/* Small source/citation line at the bottom of a content slide */
.reveal .source-note {
    font-size: 0.45em;
    opacity: 0.6;
    margin-top: 1.5em;
}

/* ---------- photo slides (story time) ---------- */

/* A single portrait photo, centered, with the name under it and a small
   author credit. The height cap keeps portrait images inside reveal's
   960x700 slide box. */
.reveal .photo-slide {
    text-align: center;
}

.reveal .photo-slide img {
    display: block;
    max-height: 480px;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}

/* Big red X crossing out an image: the wrapper shrink-wraps the image and
   the SVG stretches over it corner to corner. */
.reveal .photo-slide .img-x {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.reveal .photo-slide .img-x img {
    margin: 0;
}

.reveal .photo-slide .x-mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.reveal .photo-slide .x-mark line {
    stroke: #e02020;
    stroke-width: 14px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.reveal .photo-slide .photo-name {
    font-weight: 700;
    margin: 0.4em 0 0;
}

.reveal .photo-slide .photo-credit {
    font-size: 0.4em;
    opacity: 0.6;
    margin: 0.2em 0 0;
}

/* ---------- quote slides (story time) ---------- */

/* One big pull quote per slide; <mark> highlights the core issue, in the
   same yellow as the verbatim-quote highlights in the diagrams. */
.reveal .quote-slide blockquote {
    width: 100%;
    margin: 0;
    padding: 0 0 0 0.8em;
    border-left: 0.18em solid var(--ep-primary);
    background: none;
    box-shadow: none;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.45;
}

.reveal .quote-slide mark {
    background: #ffe58f;
    color: inherit;
    padding: 0 0.1em;
    font-weight: 700;
}

/* ---------- live poll slides ---------- */

/* Two-column layout: question and bars left, QR right — all in normal
   flow, so the QR can never overlap the content. */
.reveal .poll-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5em;
    align-items: start;
}

.reveal .poll-layout h2 {
    font-size: 1.5em;
    margin-top: 0;
}

.reveal .poll-bars {
    display: grid;
    gap: 0.35em;
    margin-top: 1em;
}

.reveal .bar-row {
    display: grid;
    grid-template-columns: 30% 1fr 2.2em;
    align-items: center;
    gap: 0.6em;
    font-size: 0.7em;
}

.reveal .bar-label {
    font-weight: 600;
}

.reveal .bar-track {
    background: #eee;
    border-radius: 0.3em;
    height: 1.4em;
    overflow: hidden;
}

.reveal .bar-fill {
    background: var(--ep-primary);
    height: 100%;
    width: 0;
    transition: width 0.25s ease;
    border-radius: 0.3em;
}

.reveal .bar-count {
    text-align: right;
    font-weight: 800;
    color: var(--ep-primary);
}

.reveal .poll-total {
    font-size: 0.6em;
    opacity: 0.7;
    margin: 0.6em 0 0;
}

.reveal .poll-qr {
    width: 130px;
    text-align: center;
}

/* The intro slide is where everyone joins: big code, big URL */
.reveal .poll-intro .poll-qr {
    width: 280px;
}

.reveal .poll-intro .poll-url {
    font-size: 0.7em;
}

.reveal .poll-qr .qr svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.reveal .poll-caption,
.reveal .poll-url,
.reveal .poll-status {
    font-size: 0.45em;
    margin: 0.3em 0 0;
}

.reveal .poll-url {
    font-weight: 600;
    word-break: break-all;
}

.reveal .poll-status {
    opacity: 0.55;
}

.reveal .poll-status .dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: #999;
    margin-right: 0.4em;
}

.reveal .poll-status .dot.on {
    background: #1a9e4b;
}

/* ---------- how-it-works diagrams (inline SVG) ---------- */

/* The PoliLoom explainer slides carry inline SVG diagrams instead of
   bullet lists. Inline (not <img>) so they inherit Mona Sans and the
   brand colors from the CSS variables above. */
.reveal svg.diagram {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.1em auto 0;
}

.reveal svg.diagram text {
    font-family: var(--r-main-font);
    fill: var(--ep-text);
}

/* boxes */
.reveal svg.diagram .d-box {
    fill: #fff;
    stroke: #dfe5ec;
    stroke-width: 1.5;
}

.reveal svg.diagram .d-box-blue {
    fill: #f2f6ff;
    stroke: #c9d8f8;
    stroke-width: 1.5;
}

.reveal svg.diagram .d-box-green {
    fill: #f2fbf5;
    stroke: #1a9e4b;
    stroke-width: 2;
}

.reveal svg.diagram .d-box-dash {
    fill: #fff;
    stroke: #aab2bd;
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

/* connectors */
.reveal svg.diagram .d-flow,
.reveal svg.diagram .d-flow-green,
.reveal svg.diagram .d-flow-gray {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reveal svg.diagram .d-flow {
    stroke: var(--ep-primary);
    stroke-width: 3;
}

.reveal svg.diagram .d-flow-green {
    stroke: #1a9e4b;
    stroke-width: 3;
}

.reveal svg.diagram .d-flow-gray {
    stroke: #aab2bd;
    stroke-width: 2.5;
    stroke-dasharray: 7 6;
}

.reveal svg.diagram .d-stroke {
    stroke: var(--ep-primary);
}

/* text roles */
.reveal svg.diagram .d-h { font-size: 24px; font-weight: 700; }
.reveal svg.diagram .d-t { font-size: 19px; }
.reveal svg.diagram .d-t2 { font-size: 17.5px; }
.reveal svg.diagram .d-s { font-size: 14.5px; opacity: 0.6; }
.reveal svg.diagram .d-cap { font-size: 16.5px; opacity: 0.7; }
.reveal svg.diagram .d-bold { font-weight: 700; }
.reveal svg.diagram .d-q { font-size: 17.5px; font-style: italic; }
.reveal svg.diagram .d-quote { font-style: italic; }
.reveal svg.diagram .d-code { font-size: 13px; font-weight: 700; fill: #6b7280; }
.reveal svg.diagram .d-tag { font-size: 14.5px; }
.reveal svg.diagram .d-qid { font-size: 13.5px; font-weight: 600; fill: var(--ep-primary); }
.reveal svg.diagram .d-src { font-size: 13px; fill: var(--ep-primary); }
.reveal svg.diagram .d-btn { font-size: 16.5px; font-weight: 700; fill: #fff; }
.reveal svg.diagram .d-lblgreen { font-size: 14px; font-weight: 700; fill: #1a9e4b; }
.reveal svg.diagram .d-lblgray { font-size: 14px; font-weight: 700; fill: #8a939e; }

/* colored shapes */
.reveal svg.diagram .d-blue { fill: var(--ep-primary); }
.reveal svg.diagram .d-cta { fill: var(--ep-cta); }
.reveal svg.diagram .d-green { fill: #1a9e4b; }
.reveal svg.diagram .d-red { fill: #e02020; }
.reveal svg.diagram .d-hl { fill: #ffe58f; }   /* verbatim-quote highlight */
.reveal svg.diagram .d-line { fill: #e4e9f0; }  /* fake text lines */
.reveal svg.diagram .d-pill { fill: #eef1f5; }

/* ---------- closing slide: speaker socials ---------- */

/* Two side-by-side cards (stacks if the slide gets narrow), each with
   the QR next to name + link. */
.reveal .socials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1em;
    margin-top: 1.2em;
}

.reveal .social {
    display: grid;
    grid-template-columns: 3em 1fr;
    align-items: center;
    gap: 0.7em;
}

.reveal .social .qr svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.reveal .social .social-text {
    font-size: 0.55em;
}

.reveal .social .social-name {
    font-weight: 700;
    margin: 0 0 0.2em;
}