/* theme.css — base presentation theme (fenzo.ai style: clean, serif headings) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --color-accent: #2563eb; --color-accent-dark: #1d4ed8; --color-text: #1f2328; --color-text-muted: #5a6270; --color-heading: #0f1419; --color-page-bg: #ffffff; --color-surface: #ffffff; --color-chrome: #ffffff; --color-border: #e5e7eb; --color-border-soft: #eef0f3; --color-code-bg: #f6f7f9; --color-active-bg: #f5f6f8; --color-table-stripe: #f9fafb; --logo-url: url('https://cdn.javarush.com/images/article/52406586-a329-4514-b7c5-b41e434e38b5/original.png'); --header-height: 64px; --content-max-width: 1080px; --content-padding: 0 40px 48px; --radius: 6px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: Charter, 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-mono: Menlo, Monaco, Consolas, 'Courier New', 'Ubuntu Mono', monospace; } /* Dark theme. slides.js (via inline FOUC-script in ) sets data-theme="light" | "dark" on after resolving system/OS-pref. */ :root[data-theme="dark"] { --color-accent: #60a5fa; --color-accent-dark: #3b82f6; --color-text: #d1d5db; --color-text-muted: #8a939f; --color-heading: #f3f4f6; --color-page-bg: #161a1f; --color-surface: #161a1f; --color-chrome: #0f1419; --color-border: #2d333b; --color-border-soft: #232930; --color-code-bg: #1e242b; --color-active-bg: #1f262e; --color-table-stripe: #1a2026; --logo-url: url('https://javarush.com/assets/images/site/logo/sidebar-jr-logo.svg'); } *, *::before, *::after { box-sizing: border-box; } html { background: var(--color-page-bg); } body { margin: 0; padding-top: var(--header-height); color: var(--color-text); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } /* Top header — built by slides.js, fixed at the top across the full width. Contains the JavaRush logo, a separator, and the level name (from the presentation's

). */ #site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; gap: 40px; padding: 0 20px; background: var(--color-chrome); border-bottom: 2px solid var(--color-border); z-index: 1100; } .site-header__logo { display: block; flex-shrink: 0; width: 160px; height: 50px; background-image: var(--logo-url); background-size: contain; background-position: left center; background-repeat: no-repeat; } /* Theme switch (Light / Dark) — on the right in the header. Global, not slide-mode-only. */ .theme-switch { margin-left: auto; display: inline-flex; gap: 0; padding: 3px; background: var(--color-active-bg); border: 1px solid var(--color-border-soft); border-radius: 999px; } .theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; color: var(--color-text-muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .theme-switch button:hover { color: var(--color-heading); } .theme-switch button[aria-checked="true"] { color: var(--color-heading); background: var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .theme-switch svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .content { max-width: var(--content-max-width); margin: 0 auto; padding: var(--content-padding); background: var(--color-surface); } /* Typography — all text Inter, headings only with a bolder weight */ h1, h2, h3 { color: var(--color-heading); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 1.8em 0 0.5em; } h1 { font-size: 2.4rem; font-weight: 700; margin-top: 0.3em; } h2 { font-size: 1.7rem; margin-top: 2em; } h3 { font-size: 1.2rem; font-weight: 600; } p { margin: 0 0 1rem; } b, strong { font-weight: 600; color: var(--color-heading); } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; } li { margin-bottom: 0.4rem; } /*
in HTML is used as a section boundary for slides.js — visually hidden */ hr { display: none; } /* Inline code */ code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-code-bg); color: var(--color-heading); padding: 0.15em 0.4em; border-radius: 4px; } /* Block code */ pre { position: relative; margin: 1rem 0 1.25rem; padding: 16px 18px; overflow: auto; background: var(--color-code-bg); border: 1px solid var(--color-border-soft); border-radius: var(--radius); font-family: var(--font-mono); font-size: 1.2rem; line-height: 1.55; } pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; } html pre[class*="language-"], html pre.line-numbers, html pre > code[class*="language-"], html pre[class*="language-"] > code[class*="language-"] { font-size: 1.2rem; line-height: 1.55; } /* Callout blocks. Author writes:
…
…
…
No icons — variants are distinguished by tinted background + border colour. --callout-rgb is the variant accent as an "R, G, B" triple so the same value drives both the background tint (rgba 10%) and the border (rgba 28%). */ .callout { --callout-rgb: 37, 99, 235; display: block; margin: 1.25rem 0; padding: 16px 20px; background: rgba(var(--callout-rgb), 0.1); border: 1px solid rgba(var(--callout-rgb), 0.28); border-radius: 8px; color: var(--color-text); } /* Collapse default margins of first/last block-level child for tighter look */ .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } /* Info — green */ .callout--info { --callout-rgb: 34, 197, 94; } /* Danger — red */ .callout--danger { --callout-rgb: 239, 68, 68; } /* Tip — blue */ .callout--tip { --callout-rgb: 59, 130, 246; } /* Copy button on code blocks (added by slides.js to pre with language-* code) */ .code-copy-btn { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; color: var(--color-text-muted); background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; opacity: 0.5; transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } pre:hover .code-copy-btn { opacity: 1; } .code-copy-btn:hover { color: var(--color-heading); background: var(--color-active-bg); border-color: var(--color-border); } .code-copy-btn.copied { color: var(--color-accent); opacity: 1; } .code-copy-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Tables */ table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: 0.95rem; } th, td { border-bottom: 1px solid var(--color-border-soft); padding: 10px 14px; text-align: left; vertical-align: top; } th { color: var(--color-heading); background: var(--color-active-bg); font-weight: 600; border-bottom-color: var(--color-border); } tbody tr:hover { background: var(--color-table-stripe); } /* Mermaid diagrams */ .mermaid { margin: 1.25rem 0; text-align: center; } /* Content images: always centered, click → open in lightbox */ db-content img { display: block; margin: 1.25rem auto; max-width: 100%; height: auto; border-radius: var(--radius); cursor: zoom-in; transition: transform 0.15s ease; } db-content img:hover { transform: translateY(-1px); } /* Lightbox — native , added by slides.js */ #image-lightbox { padding: 0; margin: auto; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; } #image-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #image-lightbox img { display: block; max-width: 95vw; max-height: 95vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: zoom-out; transform-origin: center center; transition: transform 0.18s ease; } .lightbox-zoom-controls { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1; } .lightbox-zoom-btn { width: 44px; height: 44px; padding: 0; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; font-family: inherit; font-size: 22px; font-weight: 500; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 0.15s ease, border-color 0.15s ease; } .lightbox-zoom-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); } #image-lightbox[open] { animation: lightbox-in 0.18s ease-out; } @keyframes lightbox-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* Footer hidden — JavaRush logo is now in the header */ .site-footer { display: none; } @media print { .code-copy-btn { display: none; } body { padding-top: 0; } #site-header { position: static; height: auto; border-bottom: 1px solid var(--color-border); } html { background: #fff; } .content { max-width: none; padding: 0; } hr { display: block; height: 1px; border: 0; background: var(--color-border); margin: 1.5rem 0; } }