/* Base reveal.js styles — Cloudflare Design System * * Copy this file as styles.css for each new presentation. * * TWO STYLES * ────────── * Default: Cloudflare 2026 Template * - White background, black text, cool-grey borders * - Primary font: Inter * - Tangerine (#F6821F) is THE brand constant — must appear in every layout * - Ruby (#FF6633) is for eyebrows only (small uppercase labels) * - Dawn gradient: Ruby → Tangerine → Mango * - Type sizes per CF brand spec: headline 22pt, body 17pt * - Use for: business presentations, customer decks, all-hands, corporate slides * * Opt-in: workers.dev Style — apply class="theme-workers" to * - Warm parchment background, reddish-brown text, sandy-beige borders * - Primary font: FT Kunst Grotesk * - Use for: developer/technical announcements, feature launches, diagrams * * FONTS * ───── * Inter (400/500/600/700) — primary for 2026 template * FT Kunst Grotesk (400/500) — primary for workers.dev style; display font in 2026 * Apercu Mono Pro (400) — code, labels, badges, diagram nodes (both styles) * Fallbacks: DM Sans + DM Mono (Google Fonts, loaded automatically) * * IMPORTANT: All font sizes use pt (points) for predictable sizing. */ /* =========================================== FONTS =========================================== */ @font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "FT Kunst Grotesk"; src: url("fonts/Kunst Grotesk Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "FT Kunst Grotesk"; src: url("fonts/Kunst Grotesk Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Apercu Mono Pro"; src: url("fonts/Apercu Mono Pro Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* Google Fonts fallback — loaded when brand fonts are unavailable */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=DM+Mono&display=swap'); /* =========================================== CSS VARIABLES — Cloudflare 2026 Template (default) Brand color names per CF brand guide: Tangerine #F6821F — THE brand constant, must appear in every layout Ruby #FF6633 — eyebrow text ONLY (small uppercase labels) Mango #FBAD41 — gradient partner with Tangerine Lemon #FFD43C — secondary / diagram use Blueberry #3E74FF — secondary / diagram use Raspberry #CE2F55 — secondary / diagram use Blackberry #0F006B — secondary / diagram use Cherry #960C3E — secondary / diagram use Dawn gradient (used in every 2026 layout): linear-gradient(to right, #FF6633, #F6821F, #FBAD41) =========================================== */ :root { /* --- Backgrounds (2026: white/grey) --- */ --cf-bg-page: #ffffff; --cf-bg-content: #f0f0f0; --cf-bg-card: #f0f0f0; --cf-bg-active: #e8e8e8; /* --- Text (2026: black/grey) --- */ --cf-text: #000000; --cf-text-muted: #9e9e9e; --cf-text-subtle: #747474; /* --- Borders (2026: cool grey) --- */ --cf-border: #dfdfdf; --cf-border-light: #dfdfdf80; /* --- Primary brand colors (named per CF brand guide) --- */ --cf-tangerine: #F6821F; /* THE brand constant — use in every layout */ --cf-tangerine-light: #F6821F10; --cf-ruby: #FF6633; /* Eyebrows ONLY — small uppercase labels */ --cf-ruby-light: #FF663310; --cf-mango: #FBAD41; /* Gradient partner with Tangerine */ /* Dawn gradient — use on cover/divider bars and accent elements */ --cf-dawn: linear-gradient(to right, #FF6633, #F6821F, #FBAD41); /* --- Convenience aliases (for code that used --cf-orange) --- */ --cf-orange: var(--cf-tangerine); /* alias — prefer --cf-tangerine in new code */ --cf-orange-light: var(--cf-tangerine-light); /* --- Secondary colors (diagrams, charts, illustrations — not primary graphics) --- */ --cf-blueberry: #3E74FF; /* Blueberry */ --cf-blueberry-mid: #A8CBFF; --cf-blueberry-light: #E0ECFF; --cf-lemon: #FFD43C; /* Lemon */ --cf-lemon-light: #FFEF9B; --cf-raspberry: #CE2F55; /* Raspberry */ --cf-raspberry-mid: #FC3D2E; --cf-raspberry-light: #FCA39C; --cf-blackberry: #0F006B; /* Blackberry */ --cf-cherry: #960C3E; /* Cherry */ /* Green family (success / storage) */ --cf-green: #12523D; --cf-green-mid: #57CF7D; --cf-green-light: #BCECCB; /* Purple family (experimental) */ --cf-purple: #4D1470; --cf-purple-mid: #941FBA; --cf-purple-light: #F2D6F4; /* --- Convenience aliases for semantic accent usage --- */ --cf-blue: var(--cf-blueberry); --cf-blue-mid: var(--cf-blueberry-mid); --cf-blue-light: var(--cf-blueberry-light); --cf-yellow: var(--cf-lemon); --cf-yellow-light: var(--cf-lemon-light); --cf-red: var(--cf-raspberry); --cf-red-mid: var(--cf-raspberry-mid); --cf-red-light: var(--cf-raspberry-light); --cf-navy: var(--cf-blackberry); --cf-pink: var(--cf-raspberry); --cf-pink-dark: var(--cf-cherry); --cf-accent-orange: var(--cf-tangerine); --cf-accent-orange-light: var(--cf-tangerine-light); /* --- Typography --- 2026 template: Inter is primary. Kunst Grotesk available as --display-font. */ --heading-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display-font: "FT Kunst Grotesk", "DM Sans", Helvetica, sans-serif; --mono-font: "Apercu Mono Pro", "DM Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --inter-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --base-font-size: 32px; /* Only px value — sets reveal.js base */ /* Type sizes per CF 2026 brand spec (canvas: 1200×675px) */ --cover-title-size: 38pt; /* Cover/divider slides — SemiBold */ --h1-size: 38pt; /* Alias for cover/divider */ --h2-size: 22pt; /* Content slide headline — SemiBold */ --h3-size: 17pt; /* Sub-headline — Medium */ --text-size: 17pt; /* Body — Regular */ --eyebrow-size: 9pt; /* Eyebrow — SemiBold, ALL CAPS, Ruby, +5% tracking */ --footnote-size: 9pt; /* --- Layout --- */ --slide-padding: 60px; --slide-padding-top: 40px; --content-gap: 30px; --box-radius: 8px; } /* =========================================== WORKERS.DEV STYLE — opt-in via class="theme-workers" The workers.dev style is the first-class alternative for developer/technical content — feature announcements, architecture diagrams, code-heavy slides. Inspired by the visual language of workers.cloudflare.com. Apply class="theme-workers" to to activate. =========================================== */ .theme-workers { --cf-bg-page: #F5F1EB; /* Parchment */ --cf-bg-content: #FFFBF5; /* Floral White */ --cf-bg-card: #FFFDFB; /* Baby Powder */ --cf-bg-active: #FEF7ED; /* Seashell */ --cf-text: #521000; --cf-text-muted: #52100099; --cf-text-subtle: #52100060; --cf-border: #EBD5C1; /* Sandy beige */ --cf-border-light: #EBD5C180; /* In workers.dev style, Tangerine/Ruby roles are less strict — --cf-tangerine is used freely as the primary orange accent */ --cf-tangerine: #FF6633; --cf-tangerine-light:#FF663310; --cf-ruby: #FF6633; --cf-orange: #FF6633; --cf-orange-light: #FF663310; --cf-accent-orange: #F6821F; --cf-accent-orange-light: #F6821F10; /* workers.dev accent colours */ --cf-blue: #0A95FF; --cf-blue-light: #0A95FF10; --cf-blue-mid: #0A95FF80; --cf-blueberry: #0A95FF; --cf-blueberry-light: #0A95FF10; --cf-purple: #9333EA; --cf-purple-light: #9333EA10; --cf-purple-mid: #9333EA80; --cf-green: #19B006; --cf-green-light: #19B00610; --cf-green-mid: #19B00680; /* workers.dev uses Kunst Grotesk as the primary typeface */ --heading-font: "FT Kunst Grotesk", "DM Sans", Helvetica, sans-serif; --body-font: "FT Kunst Grotesk", "DM Sans", Helvetica, sans-serif; /* workers.dev type sizes (larger, developer-friendly) */ --h1-size: 48pt; --h2-size: 36pt; --h3-size: 24pt; --text-size: 16pt; } /* =========================================== BASE STYLES — Override reveal.js defaults =========================================== */ .reveal { font-family: var(--body-font); font-size: var(--base-font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .reveal strong, .reveal b { font-weight: 600; } .reveal-viewport { background-color: var(--cf-bg-page); } .reveal-viewport.is-section-divider .slide-background.present { background-color: var(--cf-bg-page) !important; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-family: var(--heading-font); text-transform: none; color: var(--cf-text); font-weight: 600; line-height: 1.2; } .reveal h1 { font-size: var(--cover-title-size); } .reveal h2 { font-size: var(--h2-size); margin-bottom: 0; } .reveal h3 { font-size: var(--h3-size); font-weight: 500; } .reveal p, .reveal li, .reveal td, .reveal th, .reveal blockquote { font-size: var(--text-size); color: var(--cf-text); line-height: 1.5; } .reveal code, .reveal pre { font-family: var(--mono-font); } /* =========================================== LISTS =========================================== */ .reveal ul { list-style: none; padding-left: 0; margin: 15px 0; } .reveal ul li { position: relative; padding-left: 25px; margin-bottom: 10px; } .reveal ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--cf-text); border-radius: 50%; } .reveal ul ul li::before { background: var(--cf-text-muted); width: 6px; height: 6px; } .reveal blockquote p { font-size: inherit; } /* =========================================== SLIDE LAYOUT =========================================== */ .reveal .slides section { height: 100%; display: flex !important; flex-direction: column !important; padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important; box-sizing: border-box; text-align: left; } .reveal .slides section.stack { padding: 0 !important; } .reveal .slides section > .content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: var(--content-gap); text-align: left; } .reveal .slides section > .footnote { position: absolute; bottom: 15px; left: var(--slide-padding); right: var(--slide-padding); font-size: var(--footnote-size); color: var(--cf-text-muted); } /* =========================================== SECTION DIVIDERS — Centered title slides =========================================== */ .reveal .slides section.section-divider { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center; } .reveal .slides section.section-divider h1 { font-size: var(--cover-title-size); text-align: center; } .reveal .slides section.section-divider p { font-size: var(--h3-size); color: var(--cf-text-muted); } /* =========================================== DAWN GRADIENT BAR The 2026 template uses a Dawn gradient accent bar on many layouts. Apply to a thin
for a header rule, or use as a border-image. =========================================== */ .dawn-bar { height: 4px; background: var(--cf-dawn); border: none; width: 100%; } /* =========================================== TEXT SIZE UTILITIES Base text is 17pt (2026) or 16pt (workers.dev). Use these to scale UP when slides have less content. =========================================== */ .text-sm { font-size: 9pt !important; } .text-base { font-size: 17pt !important; } .text-lg { font-size: 18pt !important; } .text-xl { font-size: 20pt !important; } .text-2xl { font-size: 24pt !important; } .text-3xl { font-size: 28pt !important; } .text-4xl { font-size: 32pt !important; } .text-cover { font-size: 38pt !important; } .text-muted { color: var(--cf-text-muted) !important; } .text-center { text-align: center !important; } .text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-mono { font-family: var(--mono-font) !important; } .font-inter { font-family: var(--inter-font) !important; } .font-display { font-family: var(--display-font) !important; } /* =========================================== EYEBROW Per CF 2026 brand spec: - 9pt, SemiBold, ALL CAPS, letter-spacing +5% - Color: ALWAYS Ruby (#FF6633) — no exceptions - Use for section labels, slide sub-categories, small uppercase lead-ins =========================================== */ .eyebrow { font-family: var(--heading-font); font-size: var(--eyebrow-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #FF6633; /* Ruby — hardcoded per brand spec, never overridden */ line-height: 1; display: block; margin-bottom: 8px; } /* =========================================== TANGERINE ACCENT UTILITIES Tangerine (#F6821F) must appear in every 2026 layout. Use these to satisfy that requirement on slides where the Dawn gradient or a Tangerine card isn't used. =========================================== */ .tangerine-rule { border: none; border-top: 2px solid var(--cf-tangerine); margin: 0; } .text-tangerine { color: var(--cf-tangerine) !important; } .bg-tangerine { background: var(--cf-tangerine) !important; color: #fff !important; } /* =========================================== PROGRESS BAR =========================================== */ .reveal .progress { height: 4px; background: var(--cf-border); } .reveal .progress span { background: var(--cf-tangerine); transition: width 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); } /* =========================================== BLOCKQUOTES =========================================== */ .reveal blockquote { border-left: 4px solid var(--cf-tangerine); padding-left: 20px; margin: 20px 0; font-style: italic; background: none; box-shadow: none; width: 100%; max-width: none; } .reveal blockquote cite { display: block; margin-top: 10px; font-style: normal; color: var(--cf-text-muted); } /* =========================================== CARDS & CONTAINERS .card — default: content background, dashed border .card-solid — solid border variant .card-dawn — Dawn gradient left border (Tangerine accent, satisfies brand constant rule) .card-orange — Tangerine accent (use --cf-tangerine, not Ruby) .card-blue — Blueberry / compute .card-purple — Purple / experimental .card-green — Green / storage / success .card-red — Raspberry / danger / error .card-yellow — Lemon / caution =========================================== */ .card { background: var(--cf-bg-content); border: 1px dashed var(--cf-border); border-radius: var(--box-radius); padding: 20px; } .card-solid { background: var(--cf-bg-content); border: 1px solid var(--cf-border); border-radius: var(--box-radius); padding: 20px; } .card-dawn { background: var(--cf-bg-content); border: 1px solid var(--cf-border); border-left: 4px solid var(--cf-tangerine); border-radius: var(--box-radius); padding: 20px; } .card-orange { background: var(--cf-tangerine-light); border: 1px solid var(--cf-tangerine); border-radius: var(--box-radius); padding: 20px; } .card-blue { background: var(--cf-blueberry-light); border: 1px dashed var(--cf-blueberry); border-radius: var(--box-radius); padding: 20px; } .card-purple { background: var(--cf-purple-light); border: 1px dashed var(--cf-purple); border-radius: var(--box-radius); padding: 20px; } .card-green { background: var(--cf-green-light); border: 1px dashed var(--cf-green); border-radius: var(--box-radius); padding: 20px; } .card-red { background: var(--cf-raspberry-light); border: 1px dashed var(--cf-raspberry); border-radius: var(--box-radius); padding: 20px; } .card-yellow { background: var(--cf-lemon-light); border: 1px dashed var(--cf-lemon); border-radius: var(--box-radius); padding: 20px; } /* =========================================== BADGES .badge — Tangerine (default — satisfies brand constant) .badge-blue — Blueberry / compute .badge-purple — Purple / experimental .badge-green — Green / storage / success .badge-red — Raspberry / danger =========================================== */ .badge { display: inline-block; font-family: var(--mono-font); font-size: 10pt; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--cf-tangerine-light); color: var(--cf-tangerine); border: 1px solid var(--cf-tangerine); } .badge-blue { background: var(--cf-blueberry-light); color: var(--cf-blueberry); border-color: var(--cf-blueberry); } .badge-purple { background: var(--cf-purple-light); color: var(--cf-purple); border-color: var(--cf-purple); } .badge-green { background: var(--cf-green-light); color: var(--cf-green); border-color: var(--cf-green); } .badge-red { background: var(--cf-raspberry-light); color: var(--cf-raspberry); border-color: var(--cf-raspberry); } /* =========================================== BORDER UTILITIES .border-dashed-long — long-dash horizontal border (12px dash / 8px gap) .border-dashed-long-v — long-dash vertical border =========================================== */ .border-dashed-long { border-style: dashed; border-image: repeating-linear-gradient( 90deg, var(--cf-border) 0, var(--cf-border) 12px, transparent 12px, transparent 20px ) 1; } .border-dashed-long-v { border-style: dashed; border-image: repeating-linear-gradient( 0deg, var(--cf-border) 0, var(--cf-border) 12px, transparent 12px, transparent 20px ) 1; } /* =========================================== GRADIENT MASK UTILITIES =========================================== */ .mask-t-from-0 { mask-image: linear-gradient(to top, black, transparent); -webkit-mask-image: linear-gradient(to top, black, transparent); } .mask-l-from-0 { mask-image: linear-gradient(to left, black, transparent); -webkit-mask-image: linear-gradient(to left, black, transparent); } .mask-tl-from-0 { mask-image: linear-gradient(to top left, black 30%, transparent 70%); -webkit-mask-image: linear-gradient(to top left, black 30%, transparent 70%); } .mask-br-to-tl { mask-image: linear-gradient(to top left, black 0%, transparent 60%); -webkit-mask-image: linear-gradient(to top left, black 0%, transparent 60%); } /* =========================================== ANIMATIONS =========================================== */ @keyframes float-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .animate-float-subtle { animation: float-subtle 3s ease-in-out infinite; } .animate-float-subtle-delayed { animation: float-subtle 3s ease-in-out infinite; animation-delay: 1s; } @keyframes bar-pulse { 0%, 100% { transform: scaleY(1); opacity: 0.6; } 50% { transform: scaleY(1.3); opacity: 1; } } .animate-bar-pulse { animation: bar-pulse 1.2s ease-in-out infinite; } /* =========================================== CODE BLOCKS =========================================== */ .code-block { background: var(--cf-bg-content); border: 1px solid var(--cf-border); border-radius: var(--box-radius); overflow: hidden; } .code-block .tab { display: inline-block; font-family: var(--mono-font); font-size: 10pt; color: var(--cf-text-muted); background: var(--cf-bg-active); border-bottom: 1px solid var(--cf-border); padding: 5px 14px; } .reveal .code-block pre { margin: 0; padding: 16px; background: transparent; box-shadow: none; font-family: var(--mono-font); font-size: 13pt; line-height: 1.6; } .reveal .code-block code .token.keyword, .reveal .code-block code .token.module, .reveal .code-block code .token.imports, .reveal .code-block code .token.exports { color: #FF500A; } .reveal .code-block code .token.string, .reveal .code-block code .token.url, .reveal .code-block code .token.variable { color: #0A95FF; } .reveal .code-block code .token.function, .reveal .code-block code .token.property, .reveal .code-block code .token.class-name { color: #9616FF; } .reveal .code-block code .token.number, .reveal .code-block code .token.operator, .reveal .code-block code .token.tag { color: #ffab70; } .reveal .code-block code .token.comment, .reveal .code-block code .token.punctuation { color: #52100050; } .reveal .code-block code .token.attr-name { color: #79b8ff; } /* =========================================== HIGHLIGHT.JS — Cloudflare syntax theme =========================================== */ .reveal pre code.hljs { background: var(--cf-bg-content); color: var(--cf-text); padding: 16px; font-family: var(--mono-font); font-size: 13pt; line-height: 1.6; } .reveal .hljs-keyword, .reveal .hljs-type, .reveal .hljs-module-access, .reveal .hljs-import { color: #FF500A; } .reveal .hljs-string, .reveal .hljs-template-variable, .reveal .hljs-template-tag { color: #0A95FF; } .reveal .hljs-title, .reveal .hljs-title.function_, .reveal .hljs-title.class_ { color: #9616FF; } .reveal .hljs-number, .reveal .hljs-literal { color: #ffab70; } .reveal .hljs-comment { color: #52100050; } .reveal .hljs-built_in, .reveal .hljs-attr { color: #79b8ff; } .reveal .hljs-variable, .reveal .hljs-params { color: var(--cf-text); } .reveal .hljs-punctuation, .reveal .hljs-operator { color: #52100080; } .reveal .hljs-property { color: #9616FF; } /* =========================================== OPTIONAL: DOT-GRID PATTERN BACKGROUND Add class="pattern-bg" to a slide
. Requires: pattern.png copied alongside the presentation. =========================================== */ /* .reveal .slides section.pattern-bg::before { content: ''; position: absolute; inset: 0; background-image: url('pattern.png'); background-repeat: repeat; opacity: 0.3; pointer-events: none; z-index: 0; } .reveal .slides section.pattern-bg > * { position: relative; z-index: 1; } */ /* =========================================== OPTIONAL: COVER ORANGE BACKGROUND Add class="cover-bg" to a cover/title slide
. Requires: cover-orange.png copied alongside the presentation. On orange backgrounds always use the white logo variant. =========================================== */ /* .reveal .slides section.cover-bg { background-image: url('cover-orange.png'); background-size: cover; background-position: center; } .reveal .slides section.cover-bg h1, .reveal .slides section.cover-bg h2, .reveal .slides section.cover-bg p, .reveal .slides section.cover-bg li { color: #ffffff; } */ /* =========================================== OPTIONAL: TITLE WITH UNDERLINE =========================================== */ /* .reveal .slides section > h1, .reveal .slides section > h2 { flex-shrink: 0; margin: 0; padding-bottom: 15px; border-bottom: 2px solid var(--cf-border); } */