/* ============================================================ 17-sidebar.css — sidebar widgets and the BB widget-box kit ============================================================ Ported 2026-09-15 from the pre-rebuild `css/_sidebar.css`, which the 2026-08-29 rebuild archived rather than carried forward. Recover the original with: git show 143df0c:css/_sidebar.css The colour tokens were ALREADY migrated by that commit (143df0c, "Colour tokens: migrate to semantic scale") — --primary-dark → --brand-dark, --primary-light → --brand, --secondary-color → --brand-light, --accent-primary → --accent, --grey-border → --border-strong, --grey-bg → --surface-alt. This file uses that mapping verbatim rather than re-deriving it, so a sidebar built on any other RadicalWebs site maps the same way. MUCH OF THIS FILE IS DORMANT ON THIS SITE. It is Simon's standard sidebar kit and the theme is meant to be a reusable template, so the whole thing is here rather than half of it. Every block that currently has no markup to style says so in its own comment, with the markup that would wake it up. Live on Agape today: .fl-sidebar base, the widget title cap, and the blog categories widget (which has span.count in its markup, so the pill treatment works as-is). Dormant: everything else. Loads after 16-blog.css, so where the two touch the same sidebar list this file wins — which is the intended direction. The three-rule stopgap that 16-blog.css carried for one afternoon was removed when this landed. */ /* ── Sidebar base ──────────────────────────────────────────── Offsets the sidebar from the top of the content column. Visible on /resources/ and every single post: the sidebar sits 20px lower than the first card. Deliberate and carried over as-is. */ .fl-sidebar { margin-top: 20px; } /* ── Widget titles ─────────────────────────────────────────── The dark cap that sits on top of a widget body, square-cornered where the two meet so the pair reads as one box. `h4.fl-widget-title` IS UNSCOPED, and that is how the original was written. It will therefore also catch a footer widget if one ever gets a title — today none has one (the footer runs a media_image and two custom_html widgets, all untitled), so there is nothing to see. Flagged rather than silently narrowed, because narrowing it to .fl-sidebar would also drop the .rw-widget-box-header case below, which is a builder module and need not sit in a sidebar at all. font-size is a flat 22px against 02-base.css's fluid h4 clamp (18px–24px). The flat value is the original's and is kept; 0-1-1 beats the bare `h4` at 0-0-1 so it lands without help. The `.rw-widget-box-header …` and `.fl-module-sidebar …` members of this selector are DORMANT — see the kit section below. */ .fl-widget .fl-widget-title, h4.fl-widget-title, .blog-categories.fl-widget h4.fl-widget-title, .rw-widget-box-header .fl-html h3.widgettitle, .fl-module-sidebar .widget_text h4.fl-widget-title, .fl-sidebar .widget_text h4.fl-widget-title { background-color: var(--brand-dark); padding: 15px 30px; margin: 0; border-radius: 5px 5px 0 0; font-size: 22px; color: var(--white); text-align: center; } /* ── Widget bodies ─────────────────────────────────────────── The bordered box under the cap. Square top corners meet the cap's square bottom ones. `.fl-sidebar .gform_wrapper` WAS IN THIS SELECTOR AND IS DELIBERATELY GONE. 07-forms.css themes Gravity Forms by assigning --gf-* custom properties and states in its own header that it contains no rule targeting a .gform_*, .gfield_* or .gform_wrapper element. Reinstating this one would make it the first, and it styles nothing here anyway — no sidebar on this site holds a form. If a sidebar form ever needs a box, give it one through --gf-* rather than by adding the selector back. */ .blog-categories.fl-widget ul, .rw-widget-box-header .fl-html .widgetbody, .fl-sidebar .textwidget { border: 1px solid var(--border-strong); background-color: var(--surface-alt); margin: 0; padding: 20px; border-radius: 0 0 5px 5px; } /* Two of the three take white rather than the tinted surface. */ .blog-categories.fl-widget ul, .fl-sidebar .textwidget { padding: 20px; background-color: var(--white); } /* ── Blog categories widget ────────────────────────────────── THE ONE FULLY LIVE COMPONENT IN THIS FILE. WordPress's categories widget emits the count inside `` here, which is what the pill below needs — verified in the served markup, not assumed, because the widget only emits that span when "Show post counts" is on. Each row is a flex pair: a link that takes all the width except the pill's 40px, and the pill itself. Hovering anywhere on the row swaps the pill to accent — the :hover is on the li, not the a, so the two move together. */ .blog-categories.fl-widget ul li:first-of-type { border-top: 1px solid var(--surface-alt); } .blog-categories.fl-widget ul li { position: relative; overflow: hidden; display: flex; flex-direction: row; border-bottom: 1px solid var(--surface-alt); margin-bottom: 0; } .blog-categories.fl-widget ul li a { padding: 10px 0 10px 15px; color: var(--text-muted); width: calc(100% - 40px); transition: var(--transition-base); } .blog-categories.fl-widget ul li a:hover { color: var(--accent); text-decoration: none; } .blog-categories.fl-widget ul li span.count { background-color: var(--surface-alt); color: var(--text-muted); border-radius: 50px; padding: 0; line-height: 1.4; font-size: 13px; margin: 6px 15px 6px 0; text-align: center; width: 40px; display: flex; justify-content: center; align-items: center; cursor: default; transition: var(--transition-base); } .blog-categories.fl-widget ul li:hover span.count { background-color: var(--accent); color: var(--white); } /* ── Sidebar nav menu ──────────────────────────────────────── DORMANT. Turns a nav-menu widget into a stack of full-width buttons with the current page lit. Wakes up when a `widget_nav_menu` is dropped into a sidebar or a BB sidebar module — there is none on this site (blog-sidebar holds a single categories widget). The original had `margin-bottom: 2px !important` on the li. The !important is dropped: at 0-3-0 this already outranks bb-theme's generic widget li margin, and the harness confines !important to 99-utilities.css. */ .fl-module-sidebar .widget_nav_menu li, .fl-sidebar .widget_nav_menu li { margin-bottom: 2px; } .fl-module-sidebar .widget_nav_menu li a, .fl-sidebar .widget_nav_menu li a { display: block; padding: 13px 20px; font-size: 15px; background: var(--surface-alt); border-radius: 3px; color: var(--brand); text-align: left; transition: var(--transition-base); } .fl-module-sidebar .widget_nav_menu li a:hover, .fl-sidebar .widget_nav_menu li a:hover { background: var(--brand); color: var(--white); text-decoration: none; } .fl-module-sidebar .widget_nav_menu li.current_page_item a, .fl-sidebar .widget_nav_menu li.current_page_item a { background: var(--brand); color: var(--white); text-decoration: none; } /* ── Builder widget-box kit ────────────────────────────────── ALL DORMANT. These style Beaver Builder HTML and rich-text modules that have been given a `rw-widget-box-header`, `rw-widget-box-no-header` or `rw-widget-no-box-no-header` class by hand in the module's CSS Class field. Zero uses on this site — confirmed against post_content and postmeta, and against the served markup. They are here because this theme is the template for future RadicalWebs sites and this is the kit those sites use. Nothing activates them by accident: every selector needs a class that has to be typed in. */ .rw-widget-box-header .fl-html .widgetbody p:last-of-type { margin-bottom: 0; } /* `.button` is the kit's own class, not this theme's `.btn`. Left as the original had it — a widget box on another site expects `.button`. */ .rw-widget-box-header .button { background-color: var(--brand-light); border-radius: 3px; color: var(--white); text-transform: uppercase; font-weight: 700; display: block; text-align: center; padding: 13px; } .rw-widget-box-no-header .fl-html, .rw-widget-box-no-header .fl-rich-text { border: 1px solid var(--border-strong); border-radius: 5px; background-color: var(--surface-alt); padding: 20px 30px; } .rw-widget-box-no-header h3, .rw-widget-no-box-no-header h3 { font-size: 22px; } /* ── Widget-box kit: responsive ────────────────────────────── ALSO DORMANT — every selector in both blocks is a rw-widget-box-* one, so these touch nothing on this site at any width. The pattern is a narrow tablet column (16px type, 10px side padding) opening back up at 1024px. Proved inert directly rather than by measuring around them: document.querySelectorAll() returns 0 for .rw-widget-box-header, .rw-widget-box-no-header, .rw-widget-no-box-no-header, .widget_nav_menu, .fl-module-sidebar, .fl-sidebar .textwidget and .fl-sidebar .gform_wrapper. CONSEQUENCE WORTH KNOWING: because this tablet block only ever shrinks `.rw-widget-box-header .fl-html h3.widgettitle`, it does NOT shrink the standard `h4.fl-widget-title`. So the blog sidebar's cap stays at 22px in a narrow tablet column and wraps to two lines at 768px (measured: 196px wide, 2 lines, no overflow; single line from ~900px up). That is faithful to the original and is left alone — but if the cap should shrink on tablet too, this block is where h4.fl-widget-title would be added. */ @media (min-width: 769px) { .rw-widget-box-header .fl-html h3.widgettitle { padding: 20px 10px; font-size: 16px; } .rw-widget-box-no-header h3 { font-size: 16px; } .rw-widget-box-header .fl-html .widgetbody, .rw-widget-box-header .fl-rich-text .widgetbody, .rw-widget-box-no-header .fl-html, .rw-widget-box-no-header .fl-rich-text { padding: 20px 10px; } .rw-widget-box-header .widgetbody ul, .rw-widget-box-no-header .fl-rich-text ul { padding-left: 30px; } .rw-widget-box-header .fl-html .widgetbody li, .rw-widget-box-header .fl-html .widgetbody p, .rw-widget-box-no-header .fl-rich-text p, .rw-widget-box-no-header .fl-rich-text li { font-size: 14px; } } @media (min-width: 1024px) { .rw-widget-box-header .fl-html h3.widgettitle { padding: 20px; font-size: 22px; } .rw-widget-box-no-header h3 { font-size: 22px; } .rw-widget-box-header .fl-html .widgetbody, .rw-widget-box-header .fl-rich-text .widgetbody, .rw-widget-box-no-header .fl-html, .rw-widget-box-no-header .fl-rich-text { padding: 20px; } .rw-widget-box-header .widgetbody ul, .rw-widget-box-no-header .fl-rich-text ul { padding-left: 40px; } .rw-widget-box-header .fl-html .widgetbody li, .rw-widget-box-header .fl-html .widgetbody p, .rw-widget-box-no-header .fl-rich-text p, .rw-widget-box-no-header .fl-rich-text li { font-size: 16px; } } /* ── Category chips below 992px ────────────────────────────── Below the lg breakpoint the sidebar is no use where it lands. TWO separate problems, fixed together: 1. THE COLUMN CLASSES DISAGREE. Content is `col-lg-8` (8/12 only at >=992px) while the sidebar is `col-md-4` (4/12 from 768px up), both emitted by the parent theme — FLTheme::content_class() and bb-theme's sidebar template. Between 768 and 991 that leaves the content full width and the sidebar a stranded 226px column underneath it, which is why the widget cap wrapped to two lines there. Neither class is ours to change, so the column is widened from here instead. 2. A CATEGORY LIST BELOW THE POSTS IS A FILTER PLACED AFTER THE THING IT FILTERS. Promoted above the list and laid out as chips, matching the filter buttons on /reviews/ so the site has ONE visual language for "narrow this list". SCOPED TO .fl-archive, AND THAT IS LOAD-BEARING. `.fl-archive` is emitted only by home.php, archive.php and search.php; a single post wraps its content in `.post-container` instead. So the promotion applies to archives and skips single posts for free, with no extra selector — which is also the behaviour we want: on an archive the list is a filter and belongs above, on a single post it is site navigation and belongs after the article. Single posts still get fix 1, just not the reordering. WRAPPING, NOT HORIZONTAL SCROLL. With a handful of categories a wrapping row shows every option at once, where a scroller hides some behind an affordance people miss. Past roughly ten categories that trade reverses — at which point swap the `flex-wrap` below for `nowrap` plus `overflow-x: auto`. The "All" chip is not core's; it comes from includes/blog-category-all.php, which prepends an
  • using core's own markup shape so the rules below need no special case for it. .98 on the query so it cannot overlap the `min-width: 992px` rules above. */ @media (max-width: 991.98px) { /* Fix 1 — full width, both templates. */ .fl-archive .fl-sidebar, .single .post-container .fl-sidebar { flex: 0 0 100%; max-width: 100%; } /* Fix 2 — archives only. .row is flex (base-4), so order works. */ .fl-archive .row > .fl-sidebar { order: -1; margin-top: 0; } /* The navy cap is far heavier than a single row of chips introduces, so on archives it becomes a plain label. Kept visible rather than hidden: it still says what the chips are for. Single posts keep the cap. */ .fl-archive .blog-categories.fl-widget h4.fl-widget-title { background-color: transparent; color: var(--text-muted); padding: 0 0 var(--spacing-sm); border-radius: 0; font-size: 0.9rem; letter-spacing: 0.1em; text-align: left; } /* The list sheds the box entirely and becomes the chip row. */ .fl-archive .blog-categories.fl-widget ul { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); border: 0; background-color: transparent; padding: 0; border-radius: 0; margin-bottom: var(--spacing-lg); } /* Each row becomes a chip: the dividers that make sense in a stacked list are wrong in a row, so both borders are replaced by the chip outline. `width: auto` undoes the desktop rule's calc(100% - 40px) on the link. */ .fl-archive .blog-categories.fl-widget ul li, .fl-archive .blog-categories.fl-widget ul li:first-of-type { border: 1px solid var(--border-strong); border-radius: var(--rw-small-radius); overflow: visible; transition: var(--transition-base); } .fl-archive .blog-categories.fl-widget ul li a { width: auto; padding: 4px 5px 4px 10px; font-size: 12px; } /* Inside a chip the filled pill reads as a badge on a badge. Reduced to a plain number that inherits the chip's colour, so it follows the chip through every state without needing its own rule for each. */ .fl-archive .blog-categories.fl-widget ul li span.count { background-color: var(--neutral-300); color: inherit; opacity: 0.6; width: 17px; margin: 0 10px 0 0; font-size: 10px; align-self: center; line-height: 16px; } /* Hover and current share one treatment — the same accent fill the review filters use, so the two rows read as the same control. */ .fl-archive .blog-categories.fl-widget ul li:hover, .fl-archive .blog-categories.fl-widget ul li:focus-within, .fl-archive .blog-categories.fl-widget ul li.current-cat { border-color: var(--accent); background-color: var(--accent); } .fl-archive .blog-categories.fl-widget ul li:hover a, .fl-archive .blog-categories.fl-widget ul li:focus-within a, .fl-archive .blog-categories.fl-widget ul li.current-cat a { color: var(--white); } /* On an accent chip the count inverts: white ground, accent letters — a cut-out rather than a tint. `opacity: 1` IS LOAD-BEARING, not tidying. The resting rule above sets opacity 0.6, which applies to the whole span including its background, so a white pill left at 0.6 over the accent chip composites to roughly #f29da9 — a pink badge with washed-out text, not the white-on-red this is meant to be. The colours alone do not get there. */ .fl-archive .blog-categories.fl-widget ul li:hover span.count, .fl-archive .blog-categories.fl-widget ul li:focus-within span.count, .fl-archive .blog-categories.fl-widget ul li.current-cat span.count { background-color: var(--white); color: var(--accent); opacity: 1; } }