/* DaBro Editorial v2 — Tweaks * Extracted from Claude Design bundle (2026-04-17) * * Data-driven overrides on : * theme: paper (default) | dark | sepia * density: comfortable (default) | compact | spacious * accent: green (default) | violet * h1: mark-highlight (default) | underline | box-frame * toc: sticky (default) | inline | hidden * cta: inverse (default) | paper | minimal * * Plus floating tweaks panel UI (hidden by default, * toggled with .tweaks-open on ). */ /* ========================================================================= TWEAKS — theme / density / accent / H1 treatment / TOC / CTA All driven by data-* attributes on . ========================================================================= */ /* ---- THEME ---------------------------------------------------------- */ /* Default = paper. These overrides don't fight the tokens file — they rebind the same variables at the :root level. */ html[data-theme="dark"] { --paper: #0a0a0a; --paper-2: #171717; --paper-3: #222; --paper-edge: #2e2e2e; --fg-1: #fbfaf5; --fg-2: #b5b5a8; --fg-3: #7d7d72; --rule: #2e2e2e; --callout-info-bg: #0e2133; --callout-tip-bg: #0e2316; --callout-warn-bg: #2a1e08; --callout-myth-bg: #1f152e; --highlight-bg: #06f806; --highlight-fg: #0a0a0a; --link: #06f806; --link-hover: #9cff9c; } html[data-theme="dark"] .topnav { background: color-mix(in srgb, #0a0a0a 86%, transparent); } html[data-theme="dark"] .related__card-img { background: #171717; } html[data-theme="sepia"] { --paper: #f4ecd8; --paper-2: #ebe0c4; --paper-3: #dfd2b0; --paper-edge: #c8b78e; --fg-1: #2a1e08; --fg-2: #5c4a2a; --fg-3: #8a7856; --rule: #2a1e08; --ink: #2a1e08; --ink-2: #3a2a14; --ink-3: #4a3620; --ink-edge: #5a4530; --callout-info-bg: #e4e6d0; --callout-tip-bg: #dfe8cc; --callout-warn-bg: #edd9b4; --callout-myth-bg: #e8dcd0; } /* ---- DENSITY -------------------------------------------------------- */ html[data-density="compact"] { --flow-paragraph: 0.85em; --flow-block: var(--space-5); --flow-h2: var(--space-6); --flow-h3: var(--space-5); --lh-body: 1.5; } html[data-density="compact"] body { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem); } html[data-density="spacious"] { --flow-paragraph: 1.4em; --flow-block: var(--space-8); --flow-h2: var(--space-10); --flow-h3: var(--space-7); --lh-body: 1.8; } /* ---- ACCENT SWAP --------------------------------------------------- */ /* Default = green primary. Violet-primary flips the roles. */ html[data-accent="violet"] { --accent-green: #bb06f8; --link: #8a04b8; --link-hover: #6d0394; --highlight-bg: #d6c2ff; --highlight-fg: #2a0e70; --quote-bar: #bb06f8; --callout-tip-edge: #bb06f8; --callout-tip-bg: #f8ecfe; --callout-myth-edge: #06f806; --callout-myth-bg: #e8fff0; } html[data-accent="violet"] .toc-desktop a.active { border-color: #bb06f8; } html[data-accent="violet"] .toc-desktop a.active::before, html[data-accent="violet"] .article h2::before, html[data-accent="violet"] .hero__eyebrow, html[data-accent="violet"] .cta-block__eyebrow { color: #c4b3ff; } html[data-accent="violet"] .hero__h1 mark, html[data-accent="violet"] .cta-block__h2 mark { background: #bb06f8; color: #fbfaf5; } html[data-accent="violet"] .cta-block__btn { background: #bb06f8; color: #fbfaf5; border-color: #bb06f8; box-shadow: 4px 4px 0 0 #bb06f8; } html[data-accent="violet"] .cta-block__btn:hover { box-shadow: 2px 2px 0 0 #bb06f8; } html[data-accent="violet"] .stat__num .unit { color: #c4b3ff; } html[data-accent="violet"] .tag--green { background: #bb06f8; color: #fbfaf5; } /* ---- H1 TREATMENT -------------------------------------------------- */ /* mark-highlight is default — defined already. */ html[data-h1="underline"] .hero__h1 mark { background: transparent; color: var(--accent-green); padding: 0; text-decoration: underline; text-decoration-color: var(--accent-green); text-decoration-thickness: 8px; text-underline-offset: 4px; } html[data-h1="box-frame"] .hero__h1 mark { background: transparent; color: var(--fg-on-ink-1); box-shadow: inset 0 0 0 4px var(--accent-green); padding: 0.05em 0.15em; } /* ---- TOC STYLE ----------------------------------------------------- */ html[data-toc="inline"] .toc-desktop { display: none; } html[data-toc="inline"] .layout { grid-template-columns: 1fr; } html[data-toc="inline"] .toc-mobile { display: block; } html[data-toc="hidden"] .toc-desktop, html[data-toc="hidden"] .toc-mobile { display: none; } html[data-toc="hidden"] .layout { grid-template-columns: 1fr; } /* ---- CTA VARIANT --------------------------------------------------- */ html[data-cta="paper"] .cta-block { background: var(--paper-2); color: var(--fg-1); border-top: 3px solid var(--rule); border-image: none; } html[data-cta="paper"] .cta-block__eyebrow { color: var(--link); } html[data-cta="paper"] .cta-block__h2 { color: var(--fg-1); } html[data-cta="paper"] .cta-block__h2 mark { background: var(--highlight-bg); color: var(--fg-1); } html[data-cta="paper"] .cta-block__dek { color: var(--fg-2); } html[data-cta="paper"] .cta-block__btn { box-shadow: 4px 4px 0 0 var(--ink); border-color: var(--ink); } html[data-cta="paper"] .cta-block__btn:hover { box-shadow: 2px 2px 0 0 var(--ink); } html[data-cta="minimal"] .cta-block { background: transparent; color: var(--fg-1); border-top: 1px solid var(--rule); border-image: none; } html[data-cta="minimal"] .cta-block__inner { padding: 48px 24px; grid-template-columns: 1fr; text-align: left; } html[data-cta="minimal"] .cta-block__visual { display: none; } html[data-cta="minimal"] .cta-block__h2 { color: var(--fg-1); font-size: clamp(28px, 4vw, 40px); } html[data-cta="minimal"] .cta-block__h2 mark { background: var(--highlight-bg); color: var(--fg-1); } html[data-cta="minimal"] .cta-block__eyebrow { color: var(--link); } html[data-cta="minimal"] .cta-block__dek { color: var(--fg-2); max-width: 52ch; } html[data-cta="minimal"] .cta-block__btn { box-shadow: none; border-color: var(--ink); background: var(--ink); color: var(--paper); } html[data-cta="minimal"] .cta-block__btn:hover { background: var(--accent-green); color: var(--ink); } /* ========================================================================= TWEAKS PANEL UI — hidden by default; host iframe toggles .tweaks-open ========================================================================= */ .tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 200; background: var(--paper); color: var(--fg-1); border: 1.5px solid var(--ink); border-radius: var(--radius-3); box-shadow: 6px 6px 0 0 var(--ink); width: 280px; padding: 16px 18px 14px; font-family: var(--font-sans); display: none; } html.tweaks-open .tweaks { display: block; } .tweaks__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--fg-2); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; } .tweaks__title::before { content: "/ Tweaks"; color: var(--accent-green); background: var(--ink); padding: 2px 6px; border-radius: 2px; font-size: 10px; } .tweaks__row { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; } .tweaks__label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg-2); text-transform: uppercase; } .tweaks__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--paper-edge); border-radius: var(--radius-2); overflow: hidden; } .tweaks__seg button { border: 0; background: transparent; padding: 6px 4px; font: 500 11px/1 var(--font-sans); color: var(--fg-1); cursor: pointer; border-right: 1px solid var(--paper-edge); transition: all var(--t-fast); } .tweaks__seg button:last-child { border-right: 0; } .tweaks__seg button:hover { background: var(--paper-2); } .tweaks__seg button[aria-pressed="true"] { background: var(--ink); color: var(--accent-green); }