/** * Immersive Reader Mode — Agent Driven Development Blog * * Strips all site chrome for distraction-free reading. * Activated by toggling `addb-reader-mode` class on . * Loaded on singular post pages via functions.php. * * @package addb */ /* ================================================================ TOGGLE BUTTON ================================================================ */ .addb-reader-toggle { position: fixed; bottom: 2rem; right: 2rem; z-index: 1001; width: 44px; height: 44px; padding: 0; border: 1px solid var(--addb-color-border); border-radius: 4px; background: var(--addb-color-bg); color: var(--addb-color-text-muted); cursor: pointer; box-shadow: var(--addb-shadow-md); transition: color var(--addb-transition-fast) var(--addb-ease), border-color var(--addb-transition-fast) var(--addb-ease), box-shadow var(--addb-transition-fast) var(--addb-ease); display: flex; align-items: center; justify-content: center; } .addb-reader-toggle:hover { color: var(--addb-color-text-strong); border-color: var(--addb-color-text-muted); box-shadow: var(--addb-shadow-lg); } .addb-reader-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ================================================================ FONT SIZE CONTROLS ================================================================ */ .addb-reader-controls { position: fixed; bottom: 2rem; left: 2rem; z-index: 1001; display: none; flex-direction: row; gap: 0; border: 1px solid var(--addb-color-border); border-radius: 4px; background: var(--addb-color-bg); box-shadow: var(--addb-shadow-md); overflow: hidden; } html.addb-reader-mode .addb-reader-controls { display: flex; } .addb-reader-size { width: 40px; height: 40px; padding: 0; border: none; border-right: 1px solid var(--addb-color-border); background: transparent; color: var(--addb-color-text-muted); cursor: pointer; font-family: inherit; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color var(--addb-transition-fast) var(--addb-ease), background-color var(--addb-transition-fast) var(--addb-ease); } .addb-reader-size:last-child { border-right: none; } .addb-reader-size:hover { color: var(--addb-color-text-strong); background: var(--addb-color-surface); } .addb-reader-size.is-active { color: var(--addb-color-text-strong); background: var(--addb-color-surface-alt); } .addb-reader-size--small { font-size: 0.75rem; } .addb-reader-size--regular { font-size: 0.9375rem; } .addb-reader-size--large { font-size: 1.125rem; } /* ================================================================ READER MODE — FONT SIZE ON CONTENT ================================================================ */ html.addb-reader-mode .addb-single-content .wp-block-post-content, html.addb-reader-mode .add-book-chapter-content { font-size: var(--addb-reader-font-size, 1.125rem); } /* ================================================================ READER MODE — HEADER ================================================================ */ .addb-header { transition: transform 300ms var(--addb-ease); } html.addb-reader-mode .addb-header { transform: translateY(-100%); pointer-events: none; } /* Remove body padding that compensates for fixed header */ html.addb-reader-mode .addb-main { padding-top: 0; } /* ================================================================ READER MODE — SINGLE POST LAYOUT ================================================================ */ /* Hide sidebar (TOC) */ html.addb-reader-mode .addb-single-sidebar { display: none; } /* Collapse two-column layout to single column */ html.addb-reader-mode .addb-single-columns { display: block; } html.addb-reader-mode .addb-single-content { max-width: 100%; margin: 0 auto; padding: 0 6vw; flex-basis: unset; } /* Widen hero/title area to match expanded content */ html.addb-reader-mode .addb-single-hero { max-width: 100%; padding-left: 6vw; padding-right: 6vw; } /* Widen book chapter content container */ html.addb-reader-mode .add-interior-hero .wp-block-group { max-width: 100%; padding-left: 6vw; padding-right: 6vw; } /* Hide meta, category, author bio, newsletter CTA */ html.addb-reader-mode .addb-single-hero__cat { display: none; } html.addb-reader-mode .addb-single-hero__meta { display: none; } html.addb-reader-mode .addb-author-bio { display: none; } html.addb-reader-mode .addb-newsletter { display: none; } /* ================================================================ READER MODE — BOOK CHAPTER LAYOUT ================================================================ */ /* Strip dark hero aurora and grid overlay */ html.addb-reader-mode .add-interior-hero-aurora, html.addb-reader-mode .add-interior-hero-grid { display: none; } /* Simplify hero: plain background, tighter spacing */ html.addb-reader-mode .add-interior-hero { background: var(--addb-color-bg) !important; padding-top: 2rem; padding-bottom: 1rem; } /* Title readable in both light and dark */ html.addb-reader-mode .add-interior-title { color: var(--addb-color-text-strong) !important; } /* Fix post terms color on simplified hero */ html.addb-reader-mode .add-interior-hero .wp-block-post-terms { color: var(--addb-color-text-faint) !important; } html.addb-reader-mode .add-interior-hero .wp-block-post-terms a { color: var(--addb-color-text-faint) !important; } /* Fix post date color on simplified hero */ html.addb-reader-mode .add-interior-hero .wp-block-post-date { color: var(--addb-color-text-faint) !important; } /* Hide chapter navigation (plugin) */ html.addb-reader-mode .add-chapter-nav { display: none; } /* ================================================================ READER MODE — SHARED ================================================================ */ /* Footer — hide */ html.addb-reader-mode .addb-footer { display: none; } /* Progress bar — keep but pin to absolute top with no header offset */ html.addb-reader-mode .addb-progress-bar { top: 0; } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 600px) { .addb-reader-toggle { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); right: 1.25rem; width: 44px; height: 44px; } .addb-reader-toggle svg { width: 18px; height: 18px; } html.addb-reader-mode .addb-single-content, html.addb-reader-mode .addb-single-hero, html.addb-reader-mode .add-interior-hero .wp-block-group { padding-left: 1.25rem; padding-right: 1.25rem; } .addb-reader-controls { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); left: 1.25rem; } .addb-reader-size { width: 44px; height: 44px; } .addb-reader-size:active { background: var(--addb-color-surface-alt); color: var(--addb-color-text-strong); } } /* Large screens — more generous whitespace */ @media (min-width: 1600px) { html.addb-reader-mode .addb-single-content, html.addb-reader-mode .addb-single-hero, html.addb-reader-mode .add-interior-hero .wp-block-group { padding-left: 8vw; padding-right: 8vw; } } /* Ultra-wide — prevent unreadably long lines */ @media (min-width: 2200px) { html.addb-reader-mode .addb-single-content, html.addb-reader-mode .addb-single-hero, html.addb-reader-mode .add-interior-hero .wp-block-group { padding-left: 12vw; padding-right: 12vw; } } /* ================================================================ REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { .addb-header { transition: none; } html.addb-reader-mode .addb-header { display: none; } }