/* rollout brand v1 — tri-color geometric. * * Theme-aware: mdbook switches the class between * `light` / `rust` (light bg) and `navy` / `coal` / `ayu` (dark bg) * based on user preference. Brand accents that rely on low-alpha * tints would vanish on dark themes if applied unconditionally, * so dark-theme selectors below bump alpha and shift the link-hover * to a lighter magenta for legibility. */ :root { --rollout-orange-500: #f97316; --rollout-orange-400: #fb923c; --rollout-magenta-500: #db2777; --rollout-magenta-400: #f472b6; --rollout-purple-600: #7c3aed; --rollout-purple-800: #5b21b6; --rollout-purple-300: #a78bfa; --rollout-gradient: linear-gradient( 90deg, var(--rollout-orange-500) 0%, var(--rollout-magenta-500) 50%, var(--rollout-purple-800) 100% ); } /* Gradient text — works on any background, applies to every theme. */ .content h1:first-of-type, .menu-title { background: var(--rollout-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -0.5px; } /* Blockquote rail — gradient border applies to every theme. */ blockquote { border-left: 4px solid transparent; border-image: var(--rollout-gradient) 1; } /* --------------------------------------------------------------------------- * LIGHT THEMES (light, rust) — low-alpha tints read on white/cream. * --------------------------------------------------------------------------- */ html.light a:hover, html.rust a:hover, html.light .content a:hover, html.rust .content a:hover { color: var(--rollout-magenta-500); } html.light code:not(pre > code), html.rust code:not(pre > code) { color: var(--rollout-orange-500); background: rgba(249, 115, 22, 0.08); border-radius: 3px; padding: 0.05em 0.32em; } html.light blockquote, html.rust blockquote { background: rgba(124, 58, 237, 0.04); } html.light table thead, html.rust table thead { background: rgba(219, 39, 119, 0.06); } /* --------------------------------------------------------------------------- * DARK THEMES (navy, coal, ayu) — higher alpha + lighter accents. * --------------------------------------------------------------------------- */ html.navy a:hover, html.coal a:hover, html.ayu a:hover, html.navy .content a:hover, html.coal .content a:hover, html.ayu .content a:hover { color: var(--rollout-magenta-400); } html.navy code:not(pre > code), html.coal code:not(pre > code), html.ayu code:not(pre > code) { color: var(--rollout-orange-400); background: rgba(251, 146, 60, 0.16); border-radius: 3px; padding: 0.05em 0.32em; } html.navy blockquote, html.coal blockquote, html.ayu blockquote { background: rgba(167, 139, 250, 0.10); } html.navy table thead, html.coal table thead, html.ayu table thead { background: rgba(244, 114, 182, 0.12); }