/* Blogger Zia - public stylesheet. One file for the whole public site (blog, archives, search, tool pages, the community page and the confirm page). Every colour, size and radius reads from the tokens in :root. SELECTOR POLICY. Authored content is styled by element, scoped to where it lives: h1-h6, p, ul, table, dl, details... inside .bz-content or .bz-main > article, so an editor never has to add a class for it to look right. A class is used only where a component has its own design (buttons, the drawer, the tool controls) or where the editor deliberately writes a modifier (.bz-align-*, .bz-text-*, .bz-hl-*, .bz-btn, .is-block). Long-form design history lives in README.md, not here: this file is render-blocking on every page, so it carries only the "why" a maintainer needs next to the rule. */ /* Tokens */ :root { --bz-pad: clamp(15px, 6vw, 96px); --bz-fs-sm: 14px; --bz-fs-md: 16px; --bz-fs-body: 18px; --bz-fs-lg: 20px; --bz-fs-xs: 12px; --bz-lh-prose: 2; --bz-gap: 1.75em; --bz-bg: #fff; --bz-primary: #212121; --bz-primary-h: #121212; --bz-cta-h: 83px; --bz-muted: #555555; --bz-surface: #f5f5f5; --bz-line: #dddddd; --bz-border: 1px solid var(--bz-line); --bz-link: #1557b0; --bz-link-h: #0d3c7d; --bz-radius: 6px; /* the one corner radius: every box, field, button, image and tile reads it; only true circles use 50% */ --bz-radius-in: calc(var(--bz-radius) - 1px); /* a child that sits inside a 1px border of a --bz-radius box */ --bz-fs-h2: calc(var(--bz-fs-lg) * 1.25); /* A button's top/bottom padding, by size. A button is as tall as its label plus this, and the three sizes are the three places buttons appear (see the Buttons note further down): a lone button, one of a pair, and a full-width one. Each is a clamp() on the viewport, so a phone gets the small end and a desktop the large one. */ --bz-btn-py-s: clamp(8px, 1.8vw, 10px); --bz-btn-py-m: clamp(10px, 2.4vw, 13px); --bz-btn-py-l: clamp(13px, 3vw, 16px); --bz-btn-h-l: calc(1.3 * var(--bz-fs-md) + 2 * var(--bz-btn-py-l)); /* a large button's height, for what sits beside one */ --bz-transition: 0.18s ease; /* the one hover/focus feedback speed; slower motion (drawer slide, image zoom) keeps its own */ --bz-danger: #d32f2f; --bz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Kohinoor Bangla", "Nirmala UI", "Vrinda", "Hind Siliguri", "Noto Sans Bengali", "Mukti", "Lohit Bengali", "Geeza Pro", "Arabic Typesetting", "Noto Sans Arabic", "Scheherazade New", sans-serif; --bz-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } /* Bangla and Arabic system fonts are shrunk a little (size-adjust) so their glyphs sit at the same visual size as the Latin text around them. */ @font-face { font-family: "Nirmala UI"; src: local("Nirmala UI"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Vrinda"; src: local("Vrinda"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Hind Siliguri"; src: local("Hind Siliguri"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Kohinoor Bangla"; src: local("Kohinoor Bangla"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Noto Sans Bengali"; src: local("Noto Sans Bengali"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Mukti"; src: local("Mukti"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Lohit Bengali"; src: local("Lohit Bengali"); size-adjust: 90%; unicode-range: U+0980-09FF; } @font-face { font-family: "Geeza Pro"; src: local("Geeza Pro"); size-adjust: 85%; unicode-range: U+0600-06FF; } @font-face { font-family: "Noto Sans Arabic"; src: local("Noto Sans Arabic"); size-adjust: 85%; unicode-range: U+0600-06FF; } @font-face { font-family: "Arabic Typesetting"; src: local("Arabic Typesetting"); size-adjust: 85%; unicode-range: U+0600-06FF; } @font-face { font-family: "Scheherazade New"; src: local("Scheherazade New"); size-adjust: 85%; unicode-range: U+0600-06FF; } /* Reset and base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ul, ol { list-style: none; } /* Default-tag resets: elements that carry their own UA styling and are used bare (no .bz- class) in places like tool-option fieldsets - a fieldset with no class must look like plain flow content, not a boxed browser widget. Anything that DOES want a border/box is a class (.bz-seg, .bz-msg, etc.), never the bare element. */ fieldset { border: none; min-width: 0; } legend { padding: 0; } button, input, select, textarea, optgroup { font: inherit; color: inherit; } body { margin: 0; display: flex; flex-direction: column; min-height: 100dvh; font-family: var(--bz-font); font-size: var(--bz-fs-body); color: var(--bz-primary); background: var(--bz-bg); } .bz-skip-link { position: absolute; top: -100px; left: 0; z-index: 999; padding: 10px 18px; background: var(--bz-primary); color: var(--bz-bg); font-size: var(--bz-fs-sm); font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .bz-skip-link:focus { top: 0; } .bz-drawer-divider > span, .bz-signup-or { font-size: 11px; font-weight: 600; line-height: 1; color: var(--bz-muted); text-transform: uppercase; letter-spacing: 0.07em; } .bz-sep-row { display: flex; align-items: center; flex-wrap: wrap; } .bz-sep-row span[aria-hidden] { margin-inline: 8px; color: var(--bz-line); } /* Utilities */ .bz-hidden { display: none !important; } /* Hidden on screen, still read by assistive tech. Not display:none / visibility:hidden, which would remove the element from the accessibility tree. */ .bz-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } .bz-offscreen { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .bz-text-sm { font-size: var(--bz-fs-sm); color: var(--bz-muted); } .bz-text-xs { font-size: var(--bz-fs-xs); color: var(--bz-muted); } /* Icons. Each .bz-icon-* only names its shape (--bz-icon); the mask and the size live once on .bz-icon, and the colour is currentColor. */ .bz-icon, .bz-row::after { display: inline-block; vertical-align: middle; width: 10px; height: 10px; background-color: currentColor; flex-shrink: 0; mask: var(--bz-icon) center / contain no-repeat; } .bz-icon-chevron, .bz-row::after { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E"); } .bz-icon-search { width: 16px; height: 16px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .bz-icon-mail { width: 18px; height: 18px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); } .bz-icon-fb { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z'/%3E%3C/svg%3E"); } .bz-icon-yt { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); } .bz-icon-ig { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5.8A4.2 4.2 0 1 0 16.2 12 4.2 4.2 0 0 0 12 7.8zm6.4-1.9a1 1 0 1 0 1 1 1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); } .bz-icon-tt { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); } .bz-icon-wa { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.8 11.8 0 0 0 12 0C5.4 0 .1 5.3.1 11.9c0 2.1.6 4.2 1.7 6L0 24l6.3-1.7c1.8 1 3.8 1.5 5.8 1.5 6.6 0 11.9-5.3 11.9-11.9 0-3.2-1.3-6.2-3.5-8.4zM12 21.3c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4A9.4 9.4 0 1 1 21.4 12 9.4 9.4 0 0 1 12 21.3z'/%3E%3Cpath d='M17 14.6c-.3-.2-1.7-.8-2-1s-.5-.2-.7.1-.8 1-1 1.2-.4.2-.7.1a6.7 6.7 0 0 1-2.1-1.3 8 8 0 0 1-1.4-1.7c-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.4.3-.6.1-.2 0-.4 0-.6s-.7-1.7-1-2.3c-.3-.6-.6-.5-.8-.5h-.7c-.2 0-.6.1-.9.4s-1.1 1.1-1.1 2.7 1.1 3.2 1.3 3.5c.2.3 2.2 3.3 5.3 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.1-1.4-.1-.2-.3-.3-.6-.5z'/%3E%3C/svg%3E"); } .bz-icon-key { width: 20px; height: 20px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.8-9.8M16 7l3 3M14 9l2 2'/%3E%3C/svg%3E"); } .bz-icon-image { width: 20px; height: 20px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='m21 15-5-5-9 9'/%3E%3C/svg%3E"); } .bz-icon-pdf { width: 20px; height: 20px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E"); } .bz-icon-trophy { width: 20px; height: 20px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v4a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5H4a1 1 0 0 0-1 1c0 3 2 5 4 5'/%3E%3Cpath d='M17 5h3a1 1 0 0 1 1 1c0 3-2 5-4 5'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); } .bz-icon-upload { width: 20px; height: 20px; --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E"); } /* Header */ .bz-header { display: flex; align-items: center; gap: 12px; padding-inline: var(--bz-pad); padding-block: 14px; border-bottom: var(--bz-border); background: var(--bz-bg); position: sticky; top: 0; z-index: 200; } /* .bz-brand takes all the leftover space via margin-inline-end: auto, which keeps every sibling that follows (subscribe, menu) grouped together at the trailing edge with the header's own gap between them - the same result .bz-header's old justify-content: space-between gave for two children, but one that still works now that there are three. */ .bz-brand { display: flex; flex-direction: column; gap: 2px; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bz-primary); text-decoration: none; white-space: nowrap; margin-inline-end: auto; } .bz-brand:hover { color: var(--bz-muted); } /* Title Case comes from text-transform, not from rewriting SITE_TAGLINE's case in .env - capitalize() fixes it however the value is typed there. Size + tracking are both nudged up together so the line's rendered width sits close to BLOGGER ZIA's above it, rather than reading as an afterthought under the much heavier brand wordmark. */ .bz-tagline { font-size: var(--bz-fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: capitalize; color: var(--bz-muted); } /* Doubled with .bz-btn on purpose: the shared .bz-btn (padding, font-size, min-width) is defined far below this rule with the same specificity, so a bare .bz-btn-community lost to it and rendered at body size, 10px padding and a 9rem floor even in the icon-only layout. */ .bz-btn.bz-btn-community { height: 40px; padding-inline: 16px; font-size: var(--bz-fs-sm); text-transform: uppercase; flex-shrink: 0; } /* Sticky header, so the icon-only fallback (no extra row, no lost width) stays out of the way on every scroll position rather than just once. */ @media ( max-width: 600px ) { .bz-btn-community-label { display: none; } /* min-width: 0 - the site-wide .bz-btn floor (9rem) would otherwise beat this 40px and stretch the icon-only button. */ .bz-btn.bz-btn-community { width: 40px; min-width: 0; padding-inline: 0; } } .bz-btn-menu { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; } .bz-btn-menu span { display: block; width: 22px; height: 2px; background: var(--bz-primary); border-radius: var(--bz-radius); box-shadow: 0 -7px 0 var(--bz-primary), 0 7px 0 var(--bz-primary); } /* Nav drawer (right-side slide-in). Closed = inert + off-canvas; script.js toggles .is-open. */ .bz-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 500; } .bz-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .bz-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--bz-bg); border-left: var(--bz-border); transform: translateX(100%); transition: transform 0.25s ease, box-shadow 0.25s ease; z-index: 501; display: flex; flex-direction: column; } .bz-drawer.is-open { transform: translateX(0); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); } .bz-no-scroll { overflow: hidden; } .bz-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-inline: 24px; padding-block: 14px; border-bottom: var(--bz-border); } .bz-drawer-head strong { font-size: var(--bz-fs-body); } .bz-btn-close { width: 32px; height: 32px; border: none; background: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--bz-primary); } .bz-drawer-body { flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .bz-drawer-body > * { flex-shrink: 0; } .bz-drawer-footer { position: sticky; bottom: 0; z-index: 2; padding: 15px 20px; background: var(--bz-bg); border-top: var(--bz-border); } .bz-drawer-divider { position: relative; border-top: var(--bz-border); } .bz-drawer-divider > span { position: absolute; top: 0; left: 12px; transform: translateY(-50%); padding: 0 8px; background: var(--bz-bg); } .bz-drawer-footer + .bz-drawer-divider { margin-top: 14px; } /* "View all" sits on the divider line, opposite the label: same knockout background so the line breaks around it, same 12px inset as the label. */ .bz-drawer-divider > a { position: absolute; top: 0; right: 12px; transform: translateY(-50%); padding: 0 8px; background: var(--bz-bg); font-size: var(--bz-fs-xs); line-height: 1; color: var(--bz-muted); text-decoration: none; transition: color var(--bz-transition); } .bz-drawer-divider > a:hover { color: var(--bz-primary); } .bz-drawer-divider > a:focus-visible { outline: 2px solid var(--bz-primary); outline-offset: 2px; } /* Chrome buttons (header + drawer Subscribe) are uppercase like the brand and Prev/Next; content buttons ("Visit site") stay sentence case. */ .bz-drawer-footer .bz-btn { text-transform: uppercase; } .bz-drawer-main { --bz-drawer-gap: 64px; /* above every group divider and above the sticky footer */ min-height: calc(100% - var(--bz-cta-h)); padding: 20px 20px var(--bz-drawer-gap); } /* Drawer menu. The nav groups run edge to edge (the negative margin cancels .bz-drawer-main's padding), so each label-on-the-line divider and each row's hover is a nudge (see below), not a surface. Rows are separated by a hairline that stops at the 20px padding (36px, the text indent, inside a submenu), drawn as a ::before so the row can stay full width; the last row of a list has none. The dividers separate the groups (a big gap above, a small one below, so a label reads as belonging to the list under it). Only an entry with children (Tools) gets .bz-drawer-toggle, a chevron button at the row's end: the link takes the rest of the row and the chevron only expands. Hover moves the label 4px right and darkens it; there is no background. */ .bz-drawer-navs { margin-inline: -20px; margin-top: 4px; } .bz-drawer-navs .bz-drawer-divider { margin-top: var(--bz-drawer-gap); } .bz-drawer-list { list-style: none; margin: 0; padding: 12px 0 0; } .bz-drawer-list li { position: relative; } .bz-drawer-list li + li::before, .bz-drawer-list .bz-drawer-sub li::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--bz-line); pointer-events: none; } .bz-drawer-list .bz-drawer-sub li::before { left: 36px; } /* The line above the FIRST submenu item is the parent row's bottom line, so it keeps the parent's 20px inset; only the lines between submenu items indent. */ .bz-drawer-list .bz-drawer-sub li:first-child::before { left: 20px; } .bz-drawer-list a { display: block; padding: 13px 20px; font-size: var(--bz-fs-md); font-weight: 400; line-height: 1.4; color: var(--bz-primary); text-decoration: none; transition: padding-left var(--bz-transition), color var(--bz-transition); } .bz-drawer-list a:hover { padding-left: 24px; color: var(--bz-primary-h); } .bz-drawer-list a:focus-visible, .bz-drawer-toggle:focus-visible { outline: 2px solid var(--bz-primary); outline-offset: -2px; } .bz-drawer-list a[aria-current="page"] { color: var(--bz-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--bz-primary); } /* A compact group (This site) sets its links in two columns and drops the per-row hairlines, which would otherwise be drawn across the top of the second column. */ .bz-drawer-list.is-compact { display: grid; grid-template-columns: 1fr 1fr; } .bz-drawer-list.is-compact li + li::before { content: none; } .bz-drawer-list.is-compact a { padding: 11px 20px; font-size: var(--bz-fs-sm); font-weight: 400; } .bz-drawer-list.is-compact a:hover { padding-left: 24px; } .bz-drawer-row { display: flex; align-items: stretch; } .bz-drawer-row > a { flex: 1 1 auto; } .bz-drawer-toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; border: 0; background: none; color: var(--bz-muted); cursor: pointer; transition: color var(--bz-transition); } .bz-drawer-toggle:hover { color: var(--bz-primary); } /* The shared chevron points right; closed = down, open = up. */ .bz-drawer-toggle .bz-icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 0.25s ease; } .is-open > .bz-drawer-row .bz-drawer-toggle .bz-icon { transform: rotate(-90deg); } /* Height animates through the grid row (0fr -> 1fr). A collapsed list is visibility:hidden, so its links are not tabbable. */ .bz-drawer-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .is-open > .bz-drawer-sub { grid-template-rows: 1fr; } .bz-drawer-sub > ul { list-style: none; min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.25s; } .is-open > .bz-drawer-sub > ul { visibility: visible; transition-delay: 0s; } .bz-drawer-sub a { padding: 11px 20px 11px 36px; font-size: var(--bz-fs-sm); font-weight: 400; } .bz-drawer-sub a:hover { padding-left: 40px; } .bz-drawer-sub a[aria-current="page"] { font-weight: 600; } /* Page shell */ .bz-main { flex: 1 0 auto; width: 100%; max-width: calc(650px + var(--bz-pad) * 2); margin-inline: auto; padding-inline: var(--bz-pad); padding-block: clamp(32px, 6vw, 64px); } /* Every public page is one 650px column: the width is on
itself, so an article, a list page, a breadcrumb and the post navigation need no width of their own. The rhythm below is one top margin between
's direct children (the page head and the content under it, with no
wrapper on the list pages). */ .bz-main > * + * { margin-top: var(--bz-gap); } :is(.bz-main > article > h1, .bz-page-head h1) { font-size: clamp(calc(var(--bz-fs-lg) * 1.6), 4vw, calc(var(--bz-fs-lg) * 1.8)); font-weight: 700; line-height: 1.6; margin: 0; text-box-trim: trim-start; text-box-edge: cap alphabetic; } /* Header-internal flow (h1, optional intro, meta pills): same single-direction, top-margin-only pattern as everywhere else, one level deeper again. h1 is always first, so it carries no margin of its own either - whichever of these blocks is actually present picks up its own margin-top from whichever block ends up before it, so removing any one of them (say, a post with no intro) never leaves a stray double-gap or a missing one. */ .bz-page-head > * + * { margin-top: 1.25rem; } /* Was .bz-intro - it only ever appeared inside a .bz-page-head, so scoping by tag instead removes a class name the parent selector already implied. Plain body font/color, no muted override - it's page-head's own summary text, not secondary metadata. */ .bz-page-head p { font-size: var(--bz-fs-body); line-height: 1.6; } /* The breadcrumb (alone, or in its row with the language toggle) is a direct child of
, outside the article, right before the article or the page head: the one gap between them, overriding the container's own top-margin rhythm. */ .bz-main > :is(.bz-breadcrumb, .bz-split-row) + * { margin-top: 1rem; } /* Breadcrumb (left) and language toggle (right) share one line at every width: the breadcrumb truncates (its crumbs shrink), the toggle never wraps or shrinks. */ /* Text on the left, one control on the right: the breadcrumb and its language toggle, a page title and its filter button. */ .bz-split-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .bz-split-row :is(.bz-breadcrumb, h1) { min-width: 0; } .bz-split-row .bz-lang-toggle { flex-shrink: 0; } /* Language toggle (front/single.php): one bordered box on the breadcrumb's row (.bz-split-row), shown only when a Bangla version exists: [ English | Bangla ]. It is a control, not a fact, so it is kept out of the meta strip. One --bz-border box with the default --bz-radius and a divider between the segments, so there is no border inside a border. The current language is the segment on a --bz-surface fill with --bz-primary text; the other is a link in --bz-muted. No weight change: bold Bangla looks heavy beside regular English. English is always the first segment, so nothing moves when the reader switches. It sits outside the article, so the content link rule never reaches it. */ .bz-lang-toggle { display: inline-flex; align-items: stretch; border: var(--bz-border); border-radius: var(--bz-radius); font-size: var(--bz-fs-sm); line-height: 1.3; } .bz-lang-toggle > * { padding: 0.2em 0.75em; text-decoration: none; white-space: nowrap; } /* The segments carry the box's inner radius themselves (no overflow:hidden, which would clip the link's tap area below). */ .bz-lang-toggle > :first-child { border-radius: var(--bz-radius-in) 0 0 var(--bz-radius-in); } .bz-lang-toggle > :last-child { border-radius: 0 var(--bz-radius-in) var(--bz-radius-in) 0; } .bz-lang-toggle > * + * { border-left: var(--bz-border); } .bz-lang-toggle a { position: relative; color: var(--bz-muted); transition: color var(--bz-transition); } /* The box is small, so the link's tap area is stretched 6px up and down with an invisible pseudo-element - the visible size stays put. */ .bz-lang-toggle a::after { content: ""; position: absolute; inset: -6px 0; } .bz-lang-toggle a:hover { color: var(--bz-primary); } .bz-lang-toggle [aria-current] { background: var(--bz-surface); color: var(--bz-primary); } .bz-lang-toggle a:focus-visible { outline: 2px solid var(--bz-primary); outline-offset: 2px; } /* Plain text, not a pill: a breadcrumb is orientation (how you got here), never an action, so it must not read as a clickable chip like the real chips (.bz-affiliate-note). Sits above the title. */ .bz-breadcrumb { display: flex; flex-wrap: nowrap; /* overrides .bz-sep-row's wrap: one line, the tail truncates */ white-space: nowrap; align-items: center; gap: 0.4em; margin: 0; font-size: var(--bz-fs-sm); color: var(--bz-muted); max-width: 100%; } .bz-breadcrumb a { color: inherit; text-decoration: none; flex-shrink: 0; } .bz-breadcrumb a:hover { text-decoration: underline; } /* The shared separator colour (--bz-line) is what a divider wants, but on a pill's own grey fill it all but vanishes; inside a pill it takes the text's muted colour, and the pill's gap does the spacing. */ .bz-breadcrumb.bz-sep-row span[aria-hidden] { margin-inline: 0; color: var(--bz-muted); } .bz-breadcrumb .bz-crumb-tail { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* The current page repeats the

right below, so on wide screens it is capped instead of showing the whole title; on narrow ones flex-shrink above truncates it to whatever room the row has left. */ .bz-breadcrumb [aria-current] { max-width: 32ch; } /* Meta strip - the one facts row under a page head (post, directory entry, tool): small muted text, each item an optional leading icon. The two hairlines above and below are what separate the head from the content, so nothing else has to. Plain wrapping row; at most three items keeps it to a single line. */ .bz-meta-strip { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-block: 11px; border-block: var(--bz-border); font-size: var(--bz-fs-sm); line-height: 1.5; color: var(--bz-muted); } .bz-meta-strip > span { display: inline-flex; align-items: center; gap: 6px; } .bz-meta-strip .bz-icon { width: 15px; height: 15px; } /* Links in the strip (a post's tags) read as the strip's muted text, like the breadcrumb's: no underline until hover. */ .bz-meta-strip a { color: inherit; text-decoration: none; } .bz-meta-strip a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Article column and vertical rhythm. The article itself is .bz-content on posts, so it also holds the breadcrumb, the pager and the gallery: rules that select descendants (links, lists) carry a :not() opt-out for those components. */ .bz-content { font-size: var(--bz-fs-body); line-height: var(--bz-lh-prose); color: var(--bz-primary); text-box-trim: trim-end; text-box-edge: text alphabetic; } .bz-main > article > * + * { margin-top: var(--bz-gap); } .bz-main > article > * + h2 { margin-top: 2.5em; } .bz-main > article > * + h3 { margin-top: 2em; } /* Tool pages wrap their controls in a
(front/tools/*.php) - the rule above only spans DIRECT children of
, so without this, everything inside that (drop zone, table, fieldset, buttons) sits flush against its neighbour with no gap at all. Same one-value, top-margin-only pattern, just scoped one level deeper. The site search box (.bz-search) is exempt: it is a single flex row, and a top margin on its button pushed the button out of the box on the 404 page, the one place the box sits inside an
. */ .bz-main > article form:not(.bz-search) > * + *, #bz-rwp-results-section > * + * { margin-top: var(--bz-gap); } .bz-content > * + * { margin-top: var(--bz-gap); } .bz-content > * + h2 { margin-top: 2.5em; } .bz-content > * + h3 { margin-top: 2em; } .bz-main > article > * + .bz-content > h2:first-child { margin-top: 2.5em; } .bz-main > article > * + .bz-content > h3:first-child { margin-top: 2em; } /* Headings are typed per article, prose or not (FAQ and tool-page headings included). */ .bz-main > article h2 { font-size: var(--bz-fs-h2); font-weight: 700; line-height: 1.45; } .bz-main > article h3 { font-size: var(--bz-fs-lg); font-weight: 700; line-height: 1.45; } .bz-main > article h4 { font-size: var(--bz-fs-body); font-weight: 700; line-height: 1.45; } .bz-main > article h5 { font-size: var(--bz-fs-body); font-weight: 600; line-height: 1.45; } .bz-main > article h6 { font-size: var(--bz-fs-sm); font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bz-muted); } /* Lists, links, quotes, code, media, tables */ .bz-content ul:not(.bz-gallery-grid, .bz-list, .bz-files) { list-style-type: disc; padding-left: 1.6em; } .bz-content ol { list-style-type: decimal; padding-left: 1.6em; } .bz-content ul ul, .bz-content ol ul { list-style-type: circle; } .bz-content ul:not(.bz-gallery-grid, .bz-list, .bz-files) li + li, .bz-content ol li + li, .bz-content li > ul, .bz-content li > ol { margin-top: 1em; } /* ONE LINK RULE for content: --bz-link, no underline; on hover --bz-link-h and an underline. Opt-outs keep their own style: buttons, list rows, the pager, and the meta strip (muted, below). The header, drawers and footer are outside .bz-content and have their own rules. */ .bz-content a:not(.bz-btn, .bz-row a, .bz-pager a, .bz-meta-strip a) { color: var(--bz-link); text-decoration: none; transition: color var(--bz-transition); } .bz-content a:not(.bz-btn, .bz-row a, .bz-pager a, .bz-meta-strip a):hover { color: var(--bz-link-h); text-decoration: underline; text-underline-offset: 2px; } .bz-content blockquote { padding: 0.65rem 1.25rem; border-left: 3px solid var(--bz-link); background: #f3f6fe; color: var(--bz-primary); font-style: italic; } .bz-content blockquote > :first-child { margin-top: 0; } .bz-content blockquote > * + * { margin-top: var(--bz-gap); } .bz-content pre { padding: 1rem 1.15rem; background: #14161a; color: #e6e8eb; border-radius: var(--bz-radius); overflow-x: auto; font-family: var(--bz-font-mono); font-size: var(--bz-fs-sm); line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .bz-content code { font-family: var(--bz-font-mono); font-size: 0.88em; background: var(--bz-surface); border: var(--bz-border); border-radius: var(--bz-radius); padding: 0.15em 0.4em; } .bz-content pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } .bz-content img { max-width: 100%; height: auto; border-radius: var(--bz-radius); } .bz-content figcaption { font-size: var(--bz-fs-sm); color: var(--bz-muted); text-align: center; margin-top: 0.5em; } /* Editor-written modifiers: alignment, text colour, highlight (allowlisted in post-sanitize.php) */ .bz-content .bz-align-left { text-align: left; } .bz-content .bz-align-center { text-align: center; } .bz-content .bz-align-right { text-align: right; } .bz-content .bz-align-justify { text-align: justify; } .bz-content .bz-text-red { color: #c0392b; } .bz-content .bz-text-orange { color: #b45309; } .bz-content .bz-text-green { color: #15803d; } .bz-content .bz-text-blue { color: var(--bz-link); } .bz-content .bz-text-purple { color: #7e22ce; } .bz-content .bz-text-teal { color: #0f766e; } .bz-content .bz-text-gray { color: var(--bz-muted); } .bz-content .bz-text-white { color: #ffffff; } .bz-content .bz-hl-yellow { background: #fef3c7; } .bz-content .bz-hl-green { background: #d1fae5; } .bz-content .bz-hl-blue { background: #dbeafe; } .bz-content .bz-hl-pink { background: #fce7f3; } .bz-content .bz-hl-orange { background: #ffedd5; } .bz-content .bz-hl-purple { background: #f3e8ff; } .bz-content .bz-hl-gray { background: var(--bz-surface); } /* Solid background, not a pastel tint -- this is the site's actual primary color (--bz-primary, a near-black), not --bz-link. It used to read var(--bz-link) here, which meant picking "Primary" in the editor's Highlight swatch silently rendered as blue instead of the site's real brand color -- an old naming mix-up (see admin-editor.js's HL_COLORS comment, fixed alongside this). White text is baked into the rule itself rather than left to a separately-applied bz-text-white, since a solid dark block needs light text to be readable regardless of what text color (if any) the author also picked. */ .bz-content .bz-hl-primary { background: var(--bz-primary); color: var(--bz-bg); } /* A common "warning/danger" callout tint, added alongside the palette trim above -- same pastel family as yellow/green/blue/pink/orange/ purple, not a saturated red (which would fight with .bz-text-red used inside it). */ .bz-content .bz-hl-red { background: #fee2e2; } .bz-content [class*="bz-hl-"] { padding: 0.05em 0.15em; border-radius: var(--bz-radius); } /* Superscript/subscript -- the browser default renders these at full line-height, which pushes the line apart wherever one appears. This is the standard fix (used by most CSS resets): shrink the glyph and pull it off the baseline via position, not vertical-align, so line-height stays untouched. */ .bz-content sup, .bz-content sub { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; } .bz-content sup { top: -0.5em; } .bz-content sub { bottom: -0.25em; } /* Other content elements: rule, footer note, featured image, tables, and the dl quick-facts list */ .bz-content hr { border: none; border-top: var(--bz-border); } .bz-content footer { color: var(--bz-muted); font-style: italic; } .bz-featured-image { display: block; width: 100%; height: auto; border: var(--bz-border); border-radius: var(--bz-radius); } .bz-content table { width: 100%; border-collapse: collapse; font-size: var(--bz-fs-sm); } .bz-content th, .bz-content td { text-align: left; padding: 0.55rem 0.75rem; border: var(--bz-border); } .bz-content th { background: var(--bz-surface); font-weight: 600; } /* The dl quick-facts list: a bordered, rounded box whose rows alternate --bz-surface and white (a row is a dt + dd pair, so the odd dt and the odd dd share the grey). Label and value are the same size and colour; the label is semibold, the value regular, so the two read apart without a size change (and share a baseline side by side). The rows' fill reaches the box edge, hence the side padding on the cells and overflow:hidden for the corners. Under 600px the value drops under its label (one column, same styles). */ .bz-content dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); border: var(--bz-border); border-radius: var(--bz-radius); overflow: hidden; line-height: 1.7; } .bz-content dl dt, .bz-content dl dd { padding-block: 0.75rem; } .bz-content dl dt { padding-left: 1rem; padding-right: clamp(1rem, 5vw, 3rem); font-weight: 600; } .bz-content dl dd { padding-right: 1rem; overflow-wrap: break-word; } .bz-content dl dt:nth-of-type(odd), .bz-content dl dd:nth-of-type(odd) { background: var(--bz-surface); } @media ( max-width: 600px ) { .bz-content dl { grid-template-columns: minmax(0, 1fr); } .bz-content dl dt { padding-block: 0.75rem 0; padding-right: 1rem; } .bz-content dl dd { padding: 0 1rem 0.75rem; } } /* Editor-inserted embeds. Responsive without a wrapper: aspect-ratio + width:100%. */ .bz-content audio { display: block; width: 100%; margin-top: var(--bz-gap); } .bz-content iframe.bz-embed-yt { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; margin-top: var(--bz-gap); border: 0; border-radius: var(--bz-radius); } /* FAQ / accordion: native
, styled by element so any
in an article looks right whether or not the editor wrote a class. ONE look everywhere: service pages (inside a
), tool pages and posts/products (children of .bz-content). Items get a uniform 16px rhythm, so the flow gap is reset between two of them. Two things used to make a post's accordion roomier than a service page's: 1. .bz-content sets line-height: var(--bz-lh-prose) (2). The row is a flex line sized by its tallest child, and the +/- sign is 1.3em, so at line-height 2 the sign alone was ~47px tall. The row now sets its own line-height, so the surrounding prose setting no longer reaches it. 2. The flow rule .bz-content > * + * puts 1.75em above the first item, while a service page puts 1rem under its heading. The heading-to-list gap is now 1rem everywhere. The answer keeps the prose line-height on purpose: it is reading text. The sign is generated content, which some screen readers speak ("plus"). The second content declaration gives it an empty alternative text; a browser that does not know that syntax drops it and keeps the first, so the sign never disappears. */ .bz-main > article details { border-bottom: var(--bz-border); padding: 16px 0; } .bz-main > article details + details { margin-top: 0; } /* Top hairline on the first item of every run of items, not just the first
of the parent. */ .bz-main > article details:not(details + details) { border-top: var(--bz-border); } .bz-main > article :is(h2, h3, h4) + details { margin-top: 1rem; } .bz-main > article summary { cursor: pointer; font-weight: 600; list-style: none; line-height: 1.4; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bz-main > article summary::-webkit-details-marker { display: none; } .bz-main > article summary::after { content: '+'; content: '+' / ''; flex-shrink: 0; font-weight: 400; font-size: 1.3em; color: var(--bz-muted); } .bz-main > article details[open] summary::after { content: '\2212'; content: '\2212' / ''; } .bz-main > article details p { margin-top: 10px; line-height: var(--bz-lh-prose); } /* End of a post (partials/post-nav.php): previous / next as a pair of rows, then "More in {category}" with a link to the whole archive and the related entries as more rows. All of it is .bz-list / .bz-row, so a related entry looks exactly like it does on the archive page. */ .bz-post-nav { display: grid; gap: clamp(40px, 6vw, 56px); } .bz-post-nav, .bz-main > .bz-related { margin-top: clamp(40px, 6vw, 56px); } .bz-related { display: grid; gap: 24px; } .bz-related > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .bz-related h2 { font-size: var(--bz-fs-lg); line-height: 1.3; } .bz-related > header a { flex-shrink: 0; font-size: var(--bz-fs-sm); color: var(--bz-muted); text-decoration: none; } .bz-related > header a:hover { color: var(--bz-primary); } /* Footer and social row */ .bz-footer { padding-inline: var(--bz-pad); padding-block: 18px; border-top: var(--bz-border); text-align: center; font-size: var(--bz-fs-sm); color: var(--bz-muted); } .bz-footer a { color: var(--bz-primary); text-decoration: none; } .bz-footer a:hover { text-decoration: underline; } .bz-social-row { display: flex; align-items: center; justify-content: center; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); } .bz-social-row a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #6b7280; transition: background var(--bz-transition); } .bz-social-row a:hover { background: var(--bz-surface); } .bz-social-row a:focus-visible { outline: 2px solid var(--bz-primary); outline-offset: 1px; } .bz-social-row .bz-icon { width: 14px; height: 14px; transition: opacity var(--bz-transition); } .bz-social-row a:hover .bz-icon { opacity: 0.7; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Pagination (partials/pagination.php), styled by the markup it already carries: links are , the current page is [aria-current], the ellipsis is [aria-hidden], the previous link is [rel=prev]. */ .bz-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin-block-start: 28px; } .bz-pager > :is(a, [aria-current]) { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding-inline: 8px; border: var(--bz-border); border-radius: var(--bz-radius); color: var(--bz-primary); text-decoration: none; font-size: var(--bz-fs-sm); font-variant-numeric: tabular-nums; } .bz-pager > a:hover { background: var(--bz-surface); border-color: #bbb; } .bz-pager .bz-icon { width: 16px; height: 16px; } .bz-pager [rel="prev"] .bz-icon { rotate: 180deg; } .bz-pager > [aria-current] { background: var(--bz-surface); border-color: #bbb; cursor: default; } .bz-pager > [aria-hidden] { padding-inline: 4px; opacity: 0.6; } /* Empty state and focus ring (:focus-visible, so keyboard users get it and mouse clicks do not) */ .bz-empty { padding: 24px; text-align: center; opacity: 0.7; } :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Listings: page head, search bar, card grid (search results; category pages are .bz-list rows, below) */ /* No margin-bottom here on purpose - see the single-direction margin note at .bz-main > * + * / .bz-main > article > * + *. Spacing to whatever follows (grid, form, article content) is that block's own margin-top, not this header pushing down from above it. */ /* Icon page-heads - an icon tile beside the title (tool pages, front/tools/ *.php) and a directory section's own single-post page (front/directory- single.php - Vault today, any future section named in BZ_DIRECTORY_CATEGORY_SLUGS next). Same shape both times: icon left, title+tagline as one text block on the right, meta pills spanning the full width on their own line below - so one modifier now covers both instead of a grid version (.is-tool) and a flex version (.bz-vault-head) doing the same job two different ways. gap does the spacing here, not margin - .bz-page-head's own top-margin rhythm is turned off below so it doesn't stack on top of gap. */ .bz-page-head.is-icon { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .bz-page-head.is-icon > * + * { margin-top: 0; } /* The title+tagline block. It wraps as one unit on narrow screens (the icon stays put, this drops below it) rather than the tagline running under the title at icon width. Its own children get a small, tight gap of their own - see the note below on why they can't rely on the h1 rule's margin: 0 the way a direct-child page-head h1 does. */ .bz-head-text { flex: 1 1 220px; min-width: 0; } .bz-head-text > * { margin: 0; } .bz-head-text > * + * { margin-top: 0.35rem; } /* flex-basis: 100% forces the meta strip onto its own wrapped line under the icon+title row instead of trailing beside them. */ .bz-page-head.is-icon > .bz-meta-strip { flex-basis: 100%; } /* Icon tile - one square component shared by the tool hub list + tool page header (.is-glyph: a fixed brand-color tile carrying one white line-icon) and a directory entry's rows + page header (an uploaded logo or cover; an entry with none gets a .is-letter tile, its title's first letter - see bz_directory_icon_tile()). A tile is always a square: width AND height are fixed, and an image is cropped to fill it (object-fit: cover), so whatever ratio an uploaded image has, every row in a list is the same height. (Before v137 the height was auto, and a tall image made its row tall.) */ .bz-icon-tile { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--bz-radius); overflow: hidden; } .bz-icon-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .bz-icon-tile.is-glyph { background: var(--bz-primary); } .bz-icon-tile.is-glyph .bz-icon { background-color: var(--bz-bg); } /* Letter tile: a directory entry with no logo. Same primary fill as .is-glyph, one letter in the body colour. One colour for every entry on purpose - the letter tells rows apart, a hue per title would only add noise. */ .bz-icon-tile.is-letter { background: var(--bz-primary); color: var(--bz-bg); font-size: 1.125rem; font-weight: 600; line-height: 1; } .bz-icon-tile.is-lg.is-letter { font-size: 1.5rem; } /* One shared "large" size for page-head use (tool pages + a directory entry's page): one modifier, one number. */ .bz-icon-tile.is-lg { width: 56px; height: 56px; } .bz-icon-tile.is-lg.is-glyph .bz-icon { width: 24px; height: 24px; } /* List rows: the one design for every vertical list of links - the tool hub and "Explore More Tools", every category page (sub-categories or posts), related entries, and previous / next.
  • holds an optional .bz-icon-tile, then a plain
    : the title link and an optional line. The chevron is the row's own ::after. The title link is stretched over the whole row, so the row is one big target. A catalog row with a link (.has-btn) ends in an icon-only .bz-btn.is-icon instead of the chevron, lifted above the stretched link as a second, independent link: a 40px square, so a narrow phone never squeezes the title into a sliver. .is-pair on the list sets previous / next side by side; they stack when there is no room, without a media query. */ /* minmax(0, 1fr), not the implicit auto track: an auto track grows to its widest row's unbreakable text (the nowrap line), which pushed the whole list past the 650px column and cut the lines off mid-word instead of ending them with an ellipsis. */ .bz-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .bz-list.is-pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bz-cell, 15rem)), 1fr)); } /* Wider cells: two to a row on a desktop instead of four (the homepage's service rows). */ .bz-list.is-lg { --bz-cell: 24rem; } .bz-row { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px; border: var(--bz-border); border-radius: var(--bz-radius); transition: border-color var(--bz-transition), transform var(--bz-transition); } .bz-row:hover, .bz-product.is-link:hover { border-color: var(--bz-primary); transform: translateY(-2px); } .bz-row::after { content: ""; align-self: center; width: 20px; height: 20px; color: var(--bz-muted); transition: translate var(--bz-transition); } .bz-row:hover::after { translate: 3px; } /* A row with an outbound button (.has-btn, a catalog row with a link) hands its right edge to the button; every other row, catalog or not, ends in the chevron. */ .bz-row.has-btn::after { display: none; } .bz-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .bz-row a:not(.bz-btn) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-weight: 600; line-height: 1.6; color: inherit; text-decoration: none; } .bz-row a:not(.bz-btn)::after, .bz-product.is-link h3 a::after { content: ""; position: absolute; inset: 0; } /* The stretched link would ring only its own text; the row takes the ring instead. */ .bz-row a:not(.bz-btn):focus-visible { outline: none; } .bz-row:has(a:not(.bz-btn):focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; } .bz-row small { font-size: var(--bz-fs-sm); line-height: 1.6; color: var(--bz-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bz-row .bz-btn { position: relative; z-index: 1; flex-shrink: 0; } /* The section's name above a search result's title (partials/post-row.php, $bz_row_eyebrow): a label, not a second line of text - small, muted, one line, so it reads as "where this is from" and the title stays the first thing in the row. */ .bz-row-eyebrow { font-size: var(--bz-fs-xs); font-weight: 600; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bz-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bz-row.is-prev { flex-direction: row-reverse; } .bz-row.is-prev::after { rotate: 180deg; } .bz-row.is-prev:hover::after { translate: -3px; } .bz-row.is-next > div { align-items: flex-end; text-align: right; } /* Affiliate-disclosure note (partials/disclosure-note.php): small print in a dashed, square-cornered box with an info icon - deliberately unlike the pills (solid, fully rounded, filled) so it never reads as one more piece of metadata. Smallest type size on the scale. Selector is .bz-page-head p.bz-affiliate-note (0,2,1) so that it out-ranks, .bz-page-head p's body-size rule. */ .bz-page-head p.bz-affiliate-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border: 1px dashed var(--bz-line); border-radius: var(--bz-radius); font-size: var(--bz-fs-xs); line-height: 1.6; color: var(--bz-muted); } /* The visitor's keyword under the search page's title (front/search.php): their own text, of any length, so it breaks anywhere rather than push the column wider. Same (0,2,1) as above, to out-rank .bz-page-head p. */ .bz-page-head p.bz-search-query { font-size: var(--bz-fs-sm); color: var(--bz-muted); overflow-wrap: anywhere; } .bz-affiliate-note .bz-icon { width: 14px; height: 14px; margin-top: 2px; } .bz-page-head.is-icon > .bz-affiliate-note { flex-basis: 100%; } .bz-icon-info { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); } /* Icons for the meta strip (same mask technique as above). */ .bz-icon-calendar { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E"); } .bz-icon-edit { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); } .bz-icon-clock { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } .bz-icon-tag { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); } .bz-icon-lock { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } .bz-icon-user-x { --bz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M18 8l5 5M23 8l-5 5'/%3E%3C/svg%3E"); } /* The post's CTA button: the LAST thing in the article (front/single.php), a

    holding one ordinary .bz-btn - the same button, and the same height, as one added in the editor - in two states. At rest - a post without "Sticky button" ticked, or a sticky one that has scrolled to its place at the end - it is the full width of the column, flat. While floating (.is-sticky, not yet .is-docked) it is a compact pill at the bottom of the screen: position: sticky keeps it there while the article is read and lets it rest at the article's end. script.js adds .is-docked when it arrives (it watches a zero-height marker it places right after the paragraph, .bz-cta-sentinel), and the pill widens into the column. Same height in both states, so nothing around it moves; only the width and the shadow change. Without script.js a sticky button just stays a pill. z-index sits under the header (200) and the drawer (500). The bottom offset clears the iPhone home bar; scroll-padding keeps a focused link from hiding behind it. Its top margin is the article's own flow rule (.bz-main > article > * + *), like every block. The disclosure is NOT here: it is the note under the head. */ .bz-cta-bar .bz-btn { display: flex; width: 100%; padding-block: var(--bz-btn-py-l); } .bz-cta-bar.is-sticky { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 100; } /* max-width, not width, is what changes: it animates between two lengths in every browser. */ .bz-cta-bar.is-sticky .bz-btn { max-width: 22rem; margin-inline: auto; box-shadow: 0 4px 16px rgb(0 0 0 / 0.18); transition: max-width 0.25s ease, box-shadow 0.25s ease, transform var(--bz-transition), background var(--bz-transition), color var(--bz-transition); } .bz-cta-bar.is-sticky.is-docked .bz-btn { max-width: 100%; box-shadow: none; } /* No margin: the article's flow rule would otherwise push this marker 28px down and leave a gap. */ .bz-main > article > .bz-cta-sentinel { height: 0; margin: 0; } html:has(.bz-cta-bar.is-sticky) { scroll-padding-bottom: 6rem; } @media (prefers-reduced-motion: reduce) { .bz-cta-bar.is-sticky .bz-btn { transition: none; } } /* Buttons (shared: editor CTA, tool actions, signup form). .is-block is the full-width action button: a