i/* ════════════════════════════════════════════════════════════════ siso.css — Unified Siso Document Stylesheet ──────────────────────────────────────────────────────────────── Two themes, one component library. Usage ───── Add the theme class to your or any wrapper element: ← Gold / Siso Classic ← Crimson / Siso Technical All content classes (book-header, chapter, tip, …) are written once and inherit their colours and shapes from the active theme's CSS custom properties. Switching theme = changing one class. ════════════════════════════════════════════════════════════════ */ /* ── Scoped reset ──────────────────────────────────────────────── */ .siso-doc *, .siso-doc *::before, .siso-doc *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ════════════════════════════════════════════════════════════════ THEME 1 — Siso Gold (Classic warmth) Accent: #FFD700 · Font: Georgia ════════════════════════════════════════════════════════════════ */ .siso-1 { /* ── Typography ── */ --font-body: 'Georgia', 'Times New Roman', serif; --font-mono: 'Courier New', monospace; --line-height: 1.8; --color-text: #333; --color-text-dim: #555; --color-text-muted: #666; /* ── Surfaces ── */ --color-bg: #fff; --color-bg-tint: #f9f9f9; /* ── Accent ── */ --accent: #FFD700; --accent-text: #000; /* ── Links ── */ --color-link: #0066cc; /* ── Geometry ── */ --radius: 4px; --divider: #ddd; /* ── Chapter h2: left gold bar ── */ --ch2-border-left: 5px solid var(--accent); --ch2-border-bottom: none; --ch2-padding-left: 15px; --ch2-padding-bottom: 0px; /* ── h3: bottom rule ── */ --h3-border-left: none; --h3-border-bottom: 1px solid #ddd; --h3-padding-left: 0px; --h3-padding-bottom: 8px; /* ── Part block ── */ --part-border-left: none; --part-padding: 0px; --part-bg: transparent; /* ── TOC ── */ --toc-border: none; --toc-padding: 0px; --toc-bg: transparent; --toc-h2-border: 2px solid #000; /* ── Chapter wrapper ── */ --chapter-bg: transparent; --chapter-padding: 0px; /* ── Tables ── */ --table-border: #ddd; --th-bg: #FFD700; --th-border-bottom: none; /* ── Footer / HR ── */ --footer-border: 2px solid #000; --hr-border: 2px solid #FFD700; /* ── Box labels ── */ --box-label-size: 1.1em; --box-label-transform: none; --box-label-spacing: normal; --box-radius: 4px; /* ── Callout boxes ── */ --callout-accent: #FFD700; --callout-bg: #FFFACD; --note-accent: #FFD700; --note-bg: #FFFACD; --tip-accent: #28a745; --tip-bg: #e8f5e9; --warning-accent: #dc3545; --warning-bg: #ffe6e6; --remember-accent: #007bff; --remember-bg: #e7f3ff; --technical-accent: #6f42c1; --technical-bg: #f3e5f5; --sidebar-accent: #FFD700; --sidebar-bg: #FFFACD; --sidebar-border: 2px solid #FFD700; } /* ════════════════════════════════════════════════════════════════ THEME 2 — Siso Crimson (Technical authority) Accent: #C41E3A · Font: Palatino / Garamond ════════════════════════════════════════════════════════════════ */ .siso-2 { /* ── Typography ── */ --font-body: 'Palatino', 'Garamond', serif; --font-mono: 'Courier New', 'Courier', monospace; --line-height: 1.7; --color-text: #1a1a1a; --color-text-dim: #555; --color-text-muted: #666; /* ── Surfaces ── */ --color-bg: #fafaf8; --color-bg-tint: #f5f5f0; /* ── Accent ── */ --accent: #C41E3A; --accent-text: #fff; /* ── Links ── */ --color-link: #C41E3A; /* ── Geometry ── */ --radius: 0px; --divider: #ccc; /* ── Chapter h2: bottom rule ── */ --ch2-border-left: none; --ch2-border-bottom: 1px solid #ddd; --ch2-padding-left: 0px; --ch2-padding-bottom: 10px; /* ── h3: left accent bar ── */ --h3-border-left: 3px solid var(--accent); --h3-border-bottom: none; --h3-padding-left: 10px; --h3-padding-bottom: 0px; /* ── Part block ── */ --part-border-left: 8px solid var(--accent); --part-padding: 30px; --part-bg: white; /* ── TOC ── */ --toc-border: 1px solid #ddd; --toc-padding: 30px; --toc-bg: white; --toc-h2-border: 2px solid var(--accent); /* ── Chapter wrapper ── */ --chapter-bg: white; --chapter-padding: 30px; /* ── Tables ── */ --table-border: #000; --th-bg: #f0f0f0; --th-border-bottom: 2px solid #000; /* ── Footer / HR ── */ --footer-border: 2px solid var(--accent); --hr-border: 1px solid var(--accent); /* ── Box labels ── */ --box-label-size: 1em; --box-label-transform: uppercase; --box-label-spacing: 1px; --box-radius: 0px; /* ── Callout boxes ── */ --callout-accent: #C41E3A; --callout-bg: #f5f5f0; --note-accent: #C41E3A; --note-bg: #f5f5f0; --tip-accent: #2E7D32; --tip-bg: #f1f8f5; --warning-accent: #8B0000; --warning-bg: #fff5f5; --remember-accent: #C41E3A; --remember-bg: #f5f5f0; --technical-accent: #6f42c1; --technical-bg: #f3e5f5; --sidebar-accent: #C41E3A; --sidebar-bg: #f0f0f0; --sidebar-border: 2px solid #C41E3A; } /* ════════════════════════════════════════════════════════════════ PAGE CHROME — Gray side gutters + raised reading surface ════════════════════════════════════════════════════════════════ */ html:has(.siso-doc) { background-color: #e2e2e0; /* warm-neutral gray page background */ min-height: 100%; } .siso-doc { min-height: 100vh; /* white body always fills the viewport */ } .siso-1 { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), /* hairline edge separation */ 0 2px 6px rgba(0, 0, 0, 0.06), /* close lift */ 0 8px 32px rgba(0, 0, 0, 0.08); /* ambient depth */ } .siso-2 { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.10); } /* ════════════════════════════════════════════════════════════════ DOCUMENT WRAPPER ════════════════════════════════════════════════════════════════ */ .siso-doc { font-family: var(--font-body); line-height: var(--line-height); color: var(--color-text); background-color: var(--color-bg); padding: 40px; max-width: 900px; margin: 0 auto; } /* ════════════════════════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════════════════════════ */ .siso-doc p { margin-bottom: 15px; text-align: justify; } .siso-doc h3 { font-size: 1.5em; color: var(--color-text); margin-top: 25px; margin-bottom: 15px; border-left: var(--h3-border-left); border-bottom: var(--h3-border-bottom); padding-left: var(--h3-padding-left); padding-bottom: var(--h3-padding-bottom); } .siso-doc h4 { font-size: 1.2em; color: var(--color-text); margin-top: 15px; margin-bottom: 10px; font-weight: bold; } .siso-doc ul, .siso-doc ol { margin-left: 30px; margin-bottom: 15px; } .siso-doc li { margin-bottom: 8px; } .siso-doc a { color: var(--color-link); text-decoration: none; } .siso-doc dt { font-weight: bold; margin-top: 10px; } .siso-doc dd { margin-left: 30px; margin-bottom: 10px; } /* ════════════════════════════════════════════════════════════════ BOOK STRUCTURE ════════════════════════════════════════════════════════════════ */ /* ── Book Header / Title Page ── */ .siso-doc .book-header { text-align: center; padding-bottom: 30px; margin-bottom: 40px; page-break-after: always; } .siso-1 .book-header { border-bottom: 4px solid #000; } .siso-2 .book-header { border: 3px solid #000; padding: 40px; background-color: white; } .siso-doc .book-header h1 { font-size: 2.8em; color: #000; margin-bottom: 10px; font-weight: bold; } .siso-2 .book-header h1 { letter-spacing: 2px; } .siso-doc .book-header .subtitle { font-size: 1.4em; color: var(--color-text-muted); margin-bottom: 20px; font-style: italic; } /* Tagline badge (CSS1) */ .siso-doc .book-header .tagline { font-size: 1.2em; color: var(--accent-text); background-color: var(--accent); padding: 10px 20px; display: inline-block; margin-top: 20px; } /* O'Reilly imprint line (CSS2) */ .siso-doc .book-header .oreilly-mark { font-size: 0.9em; color: var(--accent); font-weight: bold; margin-top: 20px; letter-spacing: 1px; } /* Book spine graphic (CSS2) */ .siso-doc .book-cover { width: 200px; height: 280px; margin: 0 auto 30px; border: 2px solid #000; background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2em; font-weight: bold; text-align: center; padding: 20px; box-shadow: 5px 5px 15px rgba(0,0,0,0.3); } /* ── Table of Contents ── */ .siso-doc .toc { page-break-after: always; margin-bottom: 40px; border: var(--toc-border); padding: var(--toc-padding); background-color: var(--toc-bg); } .siso-doc .toc h2 { font-size: 1.8em; color: #000; margin-bottom: 20px; border-bottom: var(--toc-h2-border); padding-bottom: 10px; } .siso-doc .toc ul { list-style: none; margin-left: 0; } .siso-1 .toc > ul, .siso-1 .toc ul ul { margin-left: 20px; } .siso-doc .toc li { margin-bottom: 8px; font-size: 1em; padding-left: 20px; } .siso-1 .toc li { font-size: 1.1em; padding-left: 0; } .siso-doc .toc li strong { color: var(--accent); } .siso-doc .toc a { color: var(--color-link); text-decoration: none; } /* ── Parts ── */ .siso-doc .part { page-break-before: always; margin-top: 60px; margin-bottom: 40px; background-color: var(--part-bg); border-left: var(--part-border-left); padding: var(--part-padding); } .siso-doc .part-number { font-size: 2em; color: var(--accent); font-weight: bold; text-transform: var(--box-label-transform); letter-spacing: var(--box-label-spacing); } .siso-1 .part-number { font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } .siso-doc .part-title { font-size: 2.2em; color: #000; margin-bottom: 15px; font-weight: bold; } .siso-1 .part-title { font-size: 2.5em; margin-bottom: 20px; } .siso-doc .part-intro { font-size: 1em; color: var(--color-text-dim); font-style: italic; } .siso-1 .part-intro { font-size: 1.1em; } /* ── Chapters ── */ .siso-doc .chapter { page-break-before: always; margin-top: 50px; margin-bottom: 30px; background-color: var(--chapter-bg); padding: var(--chapter-padding); } .siso-doc .chapter-number { font-size: 1.4em; color: var(--accent); font-weight: bold; text-transform: var(--box-label-transform); letter-spacing: var(--box-label-spacing); } .siso-1 .chapter-number { color: #666; font-size: 1.5em; text-transform: none; letter-spacing: normal; } .siso-doc .chapter h2 { font-size: 1.9em; color: #000; margin-top: 0; margin-bottom: 10px; font-weight: bold; border-left: var(--ch2-border-left); border-bottom: var(--ch2-border-bottom); padding-left: var(--ch2-padding-left); padding-bottom: var(--ch2-padding-bottom); } .siso-1 .chapter h2 { font-size: 2em; } /* ════════════════════════════════════════════════════════════════ CALLOUT BOXES All seven types share structure; colour comes from theme vars. ════════════════════════════════════════════════════════════════ */ /* Shared structure */ .siso-doc .callout, .siso-doc .note, .siso-doc .tip, .siso-doc .warning, .siso-doc .remember, .siso-doc .technical, .siso-doc .sidebar { padding: 15px; margin: 20px 0; border-radius: var(--box-radius); } .siso-doc .callout p, .siso-doc .note p, .siso-doc .tip p, .siso-doc .warning p, .siso-doc .remember p, .siso-doc .technical p, .siso-doc .sidebar p { margin-bottom: 8px; font-size: 0.95em; } .siso-doc .callout p:last-child, .siso-doc .note p:last-child, .siso-doc .tip p:last-child, .siso-doc .warning p:last-child, .siso-doc .remember p:last-child, .siso-doc .technical p:last-child, .siso-doc .sidebar p:last-child { margin-bottom: 0; } /* Shared title */ .siso-doc .callout-title, .siso-doc .note-title, .siso-doc .tip-title, .siso-doc .warning-title, .siso-doc .remember-title, .siso-doc .technical-title, .siso-doc .sidebar-title { font-weight: bold; font-size: var(--box-label-size); margin-bottom: 8px; text-transform: var(--box-label-transform); letter-spacing: var(--box-label-spacing); } /* Callout — gold highlight / crimson note */ .siso-doc .callout { border-left: 5px solid var(--callout-accent); background-color: var(--callout-bg); } .siso-doc .callout-title { color: var(--callout-accent); } /* Note */ .siso-doc .note { border-left: 5px solid var(--note-accent); background-color: var(--note-bg); } .siso-doc .note-title { color: var(--note-accent); } /* Tip */ .siso-doc .tip { border-left: 5px solid var(--tip-accent); background-color: var(--tip-bg); } .siso-doc .tip-title { color: var(--tip-accent); } /* Warning */ .siso-doc .warning { border-left: 5px solid var(--warning-accent); background-color: var(--warning-bg); } .siso-doc .warning-title { color: var(--warning-accent); } /* Remember */ .siso-doc .remember { border-left: 5px solid var(--remember-accent); background-color: var(--remember-bg); } .siso-doc .remember-title { color: var(--remember-accent); } /* Technical */ .siso-doc .technical { border-left: 5px solid var(--technical-accent); background-color: var(--technical-bg); } .siso-doc .technical-title { color: var(--technical-accent); } /* Sidebar — uses a full border instead of a left stripe */ .siso-doc .sidebar { border: var(--sidebar-border); background-color: var(--sidebar-bg); } .siso-doc .sidebar-title { color: var(--sidebar-accent); } /* ════════════════════════════════════════════════════════════════ CODE ════════════════════════════════════════════════════════════════ */ .siso-doc code { background-color: var(--color-bg-tint); padding: 2px 6px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.95em; } .siso-doc pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: inherit; color: inherit; } .siso-1 code { color: #d63384; } .siso-2 code { color: #000; } .siso-doc pre { background-color: var(--color-bg-tint); border: 1px solid var(--divider); border-radius: var(--radius); padding: 15px; margin: 15px 0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.9em; line-height: 1.4; color: var(--color-text); } /* Syntax highlighting */ .siso-doc .syntax-keyword { color: #000; font-weight: bold; } .siso-doc .syntax-string { color: #666; } .siso-doc .syntax-comment { color: #999; font-style: italic; } /* ════════════════════════════════════════════════════════════════ TABLES ════════════════════════════════════════════════════════════════ */ .siso-doc table { width: 100%; border-collapse: collapse; margin: 20px 0; } .siso-doc table, .siso-doc th, .siso-doc td { border: 1px solid var(--table-border); } .siso-doc th { background-color: var(--th-bg); padding: 12px; text-align: left; font-weight: bold; border-bottom: var(--th-border-bottom); } .siso-doc td { padding: 10px; } .siso-doc tr:nth-child(even) { background-color: var(--color-bg-tint); } /* ════════════════════════════════════════════════════════════════ FIGURES ════════════════════════════════════════════════════════════════ */ .siso-doc .figure { margin: 30px 0; text-align: center; page-break-inside: avoid; } .siso-doc .figure-frame { border: 1px solid var(--table-border); padding: 10px; background-color: var(--color-bg-tint); display: inline-block; max-width: 100%; } .siso-1 .figure-frame { border: 3px solid #333; border-radius: 8px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .siso-doc .figure img { max-width: 100%; height: auto; display: block; } .siso-1 .figure img { border: 1px solid #ddd; border-radius: 4px; } .siso-doc .figure-caption { font-size: 0.85em; color: var(--color-text-muted); margin-top: 10px; font-style: italic; } .siso-1 .figure-caption { margin-top: 12px; font-weight: 500; } .siso-doc .figure-number { font-size: 0.8em; color: var(--color-text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .siso-2 .figure-number { font-weight: bold; } /* ════════════════════════════════════════════════════════════════ STEP-BY-STEP (CSS1 primary; available in both) ════════════════════════════════════════════════════════════════ */ .siso-doc .steps { margin: 20px 0; } .siso-doc .step { margin-bottom: 15px; padding-left: 40px; position: relative; } .siso-doc .step-number { position: absolute; left: 0; top: 0; width: 30px; height: 30px; background-color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--accent-text); } .siso-doc .step-content strong { color: #000; } /* ════════════════════════════════════════════════════════════════ COMPONENT SHOWCASE (CSS2 primary; available in both) ════════════════════════════════════════════════════════════════ */ .siso-doc .component-showcase { background-color: var(--color-bg-tint); border: 1px solid var(--divider); padding: 15px; margin: 20px 0; border-radius: var(--box-radius); } .siso-doc .component-showcase h4 { color: var(--accent); margin-top: 0; } /* ════════════════════════════════════════════════════════════════ FOOTER & HR ════════════════════════════════════════════════════════════════ */ .siso-doc .footer { margin-top: 50px; padding-top: 20px; border-top: var(--footer-border); text-align: center; color: var(--color-text-muted); font-size: 0.9em; } .siso-doc hr { border: none; border-top: var(--hr-border); margin: 30px 0; } /* ════════════════════════════════════════════════════════════════ PRINT ════════════════════════════════════════════════════════════════ */ @page { margin: 35mm 25mm 35mm 40mm; /* Top Right Bottom Left */ } @media print { .siso-doc { padding: 0; /* Reset padding for print as @page handles margins */ background-color: white; max-width: none; margin: 0; } .page-break { display: block; page-break-after: always; break-after: page; } .siso-doc .page-break { page-break-after: always; } .siso-doc a { color: #000; text-decoration: none; } .floating-controls { display: none !important; } } /* ════════════════════════════════════════════════════════════════ FLOATING CONTROLS ──────────────────────────────────────────────────────────────── Persistent buttons for print and navigation. ════════════════════════════════════════════════════════════════ */ .floating-controls { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999; } .print-btn { width: 56px; height: 56px; border-radius: 50%; background-color: var(--accent); color: var(--accent-text); border: 2px solid #000; cursor: pointer; box-shadow: 4px 4px 0px rgba(0,0,0,1); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.2s ease; text-decoration: none; } .siso-1 .print-btn { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .print-btn:hover { transform: translateY(-3px); box-shadow: 6px 6px 0px rgba(0,0,0,1); } .siso-1 .print-btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.3); } .print-btn:active { transform: translateY(1px); box-shadow: 2px 2px 0px rgba(0,0,0,1); } .siso-1 .print-btn:active { box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .print-btn i { pointer-events: none; }