/* ========================================================================== tools.css - shared polish for the rebuilt (instant, client-side) generators Loaded on every /generator/* page (see generator.php). Additive only - never overrides base layout, just upgrades the result box, adds the "instant" badge, related-tools links, live-preview panes and FAQ blocks that the rebuilt tools use. Uses the existing brand palette so it reads as part of the site, not a bolt-on. ========================================================================== */ :root{ --hb-blue: #5d8dfb; --hb-blue-dark: #2b3a67; --hb-blue-tint: #f0f5ff; --hb-blue-border: #95bceb; --hb-coral: #ed6a5a; --hb-ink: #1c0f0d; --hb-bg: #f5f8fc; } /* ---- wider container for generator pages only -------------------------- The site's own #pagewrap/#pagewrapinside cap all pages at 1200px, which suits narrow reading content (articles, marketing pages) but only leaves ~90-140px of slack for this two-column form+preview layout (650px form + 30px gap + a preview/results column). Since tools.css loads only on /generator/* pages, this override is safe to apply without touching the width of any other page on the site. */ #pagewrap,#pagewrapinside{ max-width:1400px; } /* ---- "updates instantly" badge, sits near the form heading ------------- */ .hb-instant-badge{ display:inline-flex;align-items:center;gap:6px; background:var(--hb-blue-tint);color:var(--hb-blue-dark); border:1px solid var(--hb-blue-border);border-radius:20px; padding:4px 12px;font-size:.78rem;font-weight:700;letter-spacing:.2px; margin:0 0 14px; } .hb-instant-badge .hb-dot{ width:7px;height:7px;border-radius:50%;background:#2eb872;flex-shrink:0; animation:hbPulse 1.8s ease-in-out infinite; } @keyframes hbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,184,114,.5); } 50%{ box-shadow:0 0 0 5px rgba(46,184,114,0); } } /* ---- show/hide toggle next to a password field -------------------------- */ /* The base site's .contactfield .input rule sets width:100% on every text input, which left no room for the toggle beside it - it wrapped onto its own line, sitting awkwardly right under the field. Narrowing the input itself (rather than widening its container) keeps the toggle inline. */ .contactfield input.hb-pw-input{ width:75%!important;display:inline-block; } .hb-pw-toggle{ display:inline-block;margin-left:8px;vertical-align:middle;font-size:.78rem;font-weight:700; color:var(--hb-blue-dark);cursor:pointer;user-select:none; border:1px solid var(--hb-blue-border);border-radius:14px;padding:3px 10px; background:var(--hb-blue-tint); } .hb-pw-toggle:hover{ background:var(--hb-blue-border); color:#fff; } @media(max-width:480px){ /* Too narrow for a 75/25 split to leave the toggle any real room - back to full width with the toggle on its own line underneath. */ .contactfield input.hb-pw-input{ width:100%!important;display:block; } .hb-pw-toggle{ margin-left:0;margin-top:6px; } } /* ---- result box: header bar over the existing #generated_code textarea - */ /* .contentDiv / .code_area / .text_copy_div are the framework's existing classes (used by every generator, rebuilt or not) - restyled here rather than duplicated, so the upgrade reaches every tool that shares them. */ .contentDiv{ border-radius:10px;border-color:var(--hb-blue-border); box-shadow:0 1px 3px rgba(43,58,103,.08); } .hb-result-head{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:8px;margin:-10px -10px 10px;padding:10px 14px; background:var(--hb-blue-tint);border-bottom:1px solid var(--hb-blue-border); border-radius:9px 9px 0 0; } .hb-result-head h4{ margin:0;font-size:.85rem;font-weight:800;letter-spacing:.3px; color:var(--hb-blue-dark);text-transform:uppercase; } .code_area{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:.88rem;line-height:1.55;border-radius:8px; background:#fbfcff;border:1px solid #e3e9f7 !important; padding:12px !important; } .text_copy_div{ /* Not --hb-blue - white text on it fails WCAG AA contrast (3.15:1); this shade keeps the hue but passes (~5:1). */ background:#3d68d8;color:#fff;border:none;border-radius:6px; padding:8px 16px;font-weight:700;font-size:.85rem;cursor:pointer; display:inline-flex;align-items:center;gap:6px;transition:background .2s,transform .1s; /* On a phone, "Copy code to clipboard" and "Email me this code" don't fit on one line and wrap - margin only on one side left them flush against each other with no gap once stacked. This covers both the side-by-side and wrapped cases the same way. */ margin:4px 8px 4px 0; } .text_copy_div:hover{ background:#3660cc; } .text_copy_div:active{ transform:scale(.97); } .text_copy_div::before{ content:"⧉"; font-size:1rem; } .text_copy_div.hb-email-code-btn::before{ content:"\2709"; } /* Not #2eb872 (the "live"-badge dot's green) - white text on it is only 2.56:1, well under WCAG AA's 4.5:1 minimum. This shade passes (~5:1). */ .text_copy_div.text_copied_div{ background:#188049; } .text_copy_div.text_copied_div::before{ content:"✓"; } /* ---- live visual preview pane (banners, dropdowns, iframes, etc.) ------ */ .hb-preview{ margin:14px 0 18px;border:1px dashed var(--hb-blue-border);border-radius:10px; background: linear-gradient(45deg,#eef2fb 25%,transparent 25%) 0 0/16px 16px, linear-gradient(-45deg,#eef2fb 25%,transparent 25%) 0 0/16px 16px, linear-gradient(45deg,transparent 75%,#eef2fb 75%) 0 0/16px 16px, linear-gradient(-45deg,transparent 75%,#eef2fb 75%) 0 0/16px 16px, #fff; padding:20px;min-height:70px;max-height:420px;display:flex;align-items:center;justify-content:center; overflow:auto; } /* Previews whose content can grow arbitrarily long (many converted lines, a long plain-English summary) should scroll top-aligned once they hit the cap above, not stay vertically centred - centring only reads right while the content is shorter than the box itself. */ .hb-preview.hb-preview-top-align{ align-items:flex-start; } .hb-preview-label{ font-size:.75rem;font-weight:800;color:var(--hb-blue-dark); text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px; } /* ---- .hb-preview-pin: a standalone block placed just BEFORE #generator_form (not inside .hb-result-panel) so it can behave two different ways per breakpoint without moving it in the DOM: - Below 1080px (form stacks full-width): normal flow, right where it sits in the markup - at the top of the form - with position:sticky so it rides up and sticks under the site header (z-index:2000 !important - hence 2001 here, not the old fixed overlay's 1000, which is why it used to render BEHIND the header) once you scroll past it into the form. - From 1080px up: floated right with the same width/offset math as .hb-result-panel, so it lands in the same right-hand column above the code box. Floating it to the opposite side from #generator_form (which floats left) means it still ends up on the right even though it now comes BEFORE the form in source order - opposite-side floats don't depend on document order the way same-side floats do. This is the behaviour for pages where .hb-preview-pin stands alone (audio-tag, crontab, iframe, html-banner, html-drop-down-menu, disable-hotlinking, convert-text-to-html). Meta tags also shows .hb-result-panel at the same time, and overrides this with CSS Grid instead - see the .hb-generator-columns comment further below. */ /* Wraps just the preview/form/results area (not the FAQ/related-tools that follow) so it - not the much taller #div_generator_form around the whole page - is what bounds .hb-preview-pin's and .hb-result-panel's sticky positioning below. Without this, "sticky" is free to keep pinning them in place while you scroll through the FAQ underneath, since technically the FAQ was still inside the same containing block. */ .hb-generator-columns{ position:relative; } /* #email_me_div is the site's existing "email me this code" modal (class.GeneratorItemHelper.php/base.js) - its base stylesheet rule is position:absolute;height:100%, sized against the nearest positioned ancestor. On a page using .hb-generator-columns (itself position:relative), that ancestor is this component rather than the whole page, so the overlay would only cover its height instead of the full viewport. Fixed positioning sidesteps needing a positioned ancestor at all, and the raised z-index keeps it above this page's own sticky elements (z-index:2001). */ #email_me_div{ position:fixed!important;z-index:3000; } /* The base stylesheet gives #email_me_content margin but no width cap, so on a wide desktop screen the modal stretches to nearly the full viewport width - way too wide for what's just an email field and a button. Overriding only the left/right margins here (not the full shorthand) leaves the base rule's own top/bottom spacing untouched. */ #email_me_content{ max-width:480px;margin-left:auto!important;margin-right:auto!important; } .hb-preview-pin{ position:sticky;top:0;z-index:2001;background:#fff; padding-top:2px;margin-top:32px;margin-bottom:14px; } .hb-preview-live{ display:flex;align-items:center;gap:6px; font-size:.72rem;font-weight:800;color:var(--hb-blue-dark); text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px; } .hb-preview-live .hb-dot{ width:7px;height:7px;border-radius:50%;background:#2eb872;flex-shrink:0; animation:hbPulse 1.8s ease-in-out infinite; } .hb-preview-pin.hb-preview-hidden{ display:none; } /* Mobile only (hidden at 1080px+ below, where the side-by-side layout already makes the relationship obvious) - on a phone this preview is the first thing on the page, easy to mistake for the whole tool rather than realising the actual fields are further down. */ .hb-preview-mobile-hint{ background:var(--hb-blue-tint);border:1px solid var(--hb-blue-border); border-radius:8px;padding:10px 12px;margin-bottom:12px; font-size:.85rem;color:var(--hb-blue-dark);line-height:1.4; } .hb-jump-to-form-btn{ display:block;margin-top:6px;background:none;border:none;padding:0; color:var(--hb-blue-dark);font-weight:800;font-size:.85rem; text-decoration:underline;cursor:pointer;font-family:inherit; } .hb-preview-dismiss{ float:right;background:none;border:none;color:var(--hb-blue-dark); font-weight:700;font-size:.78rem;cursor:pointer;padding:0; text-decoration:underline; } /* display:none by default (inline, so it wins) until the dismiss handler in base.js .show()s it. */ .hb-preview-reopen{ border:1px dashed var(--hb-blue-border);border-radius:10px; background:var(--hb-blue-tint);color:var(--hb-blue-dark); font-weight:700;font-size:.85rem;padding:10px 14px; cursor:pointer;text-align:center;width:100%;margin-bottom:14px; } /* The 570/680px offsets below match the site's own #generator_form width (540/650px) plus this column's 30px margin exactly, leaving zero slack - any tiny rounding difference between this stylesheet's assumptions and the base one (e.g. a fraction-of-a-pixel calc() rounding, or an extra scrollbar width) is then enough to push this float onto its own line below the form instead of beside it in a narrow band of viewport widths. This affects pages (audio-tag, crontab, iframe, html-banner, html-drop-down-menu, disable-hotlinking, convert-text-to-html) where .hb-preview-pin is the ONLY right-column element and stands alone as a float - meta tags (below) no longer works this way. */ @media (min-width:1080px){ .hb-preview-pin{ float:right;width:calc(100% - 610px);min-width:380px; margin:0 0 14px 30px;top:20px; } .hb-preview-dismiss,.hb-preview-reopen,.hb-preview-mobile-hint{ display:none!important; } } @media (min-width:1200px){ .hb-preview-pin{ width:calc(100% - 720px); } } /* .hb-generator-columns: meta tags' own two-column layout. Three different narrow bands (1200-1320px, then still 1260-1320px with more buffer, then 1080-1184px), then a persistent gap under a short preview, all traced back to the same root problem: #generator_form spanning both of column 2's rows so it could sit beside both .hb-preview-pin and .hb-result-panel at once. A spanning item forces CSS Grid to distribute its extra height across every row it spans - min-content on row 1 was supposed to opt it out of that, but didn't hold up in practice. Removed the spanning (and the two-row grid) entirely. #generator_form and .hb-right-col-js (below) are now each a single, non-spanning item - row 1's height is just whichever of the two is naturally taller, no distribution math involved, so there's nothing left to distort it. .hb-right-col-js is built by JS (metaSyncColumnLayout() below) rather than existing in the markup: .hb-preview-pin and .hb-result-panel are deliberately not DOM-adjacent (preview sits before #generator_form, results after it) so that below 1080px, with no grid active, you get the natural mobile reading order (live preview above the form you're filling in, results below it once you've generated them) instead of dumping both above the form. At 1080px+ the script moves them into one shared wrapper so only IT needs to be sticky, avoiding the two of them fighting over the same top offset the way independent stickiness did - then moves them back apart below 1080px (including on resize across the breakpoint, e.g. rotating a tablet). */ @media (min-width:1080px){ .hb-generator-columns{ display:grid;grid-template-columns:1fr minmax(380px,480px); column-gap:30px;align-items:start;margin-top:32px; } .hb-generator-columns #generator_form{ grid-column:1;grid-row:1; float:none;width:auto!important;margin:0!important; } .hb-right-col-js{ grid-column:2;grid-row:1; position:sticky;top:20px;z-index:2001; } .hb-right-col-js .hb-preview-pin, .hb-right-col-js .working_item.hb-result-panel{ position:static;float:none;width:auto;margin:0 0 14px;top:auto; } } /* On a phone, the form's own Reset/Clear buttons sit right above this panel's dashed-border hint box - the base site's .working_item margin (10px top) collapses against the form's own margin-bottom (25px) rather than adding to it, so the visible gap is really only 25px, which reads as "immediately under" given how much visual weight both button-like sections have. Widened here; already correctly zeroed at 1080px+ where this panel is a grid item instead (see .hb-generator-columns above). */ @media (max-width:1079px){ .working_item.hb-result-panel{ margin-top:32px; } /* This convenience Generate button (a second copy, inside the results hint) only earns its place at 1080px+, where the results panel is sticky beside the form - it lets you generate without scrolling all the way down to the form's own Generate button first. Below 1080px the results panel sits right after the form instead (not stickily beside it), so this would just be a second button sitting right next to the real one for no reason. */ .hb-desktop-only-btn{ display:none!important; } /* Hidden by default on a phone - it sits right under the form's own Generate button there (not beside the form, sticky, the way it is at 1080px+), so telling you to "click Generate" again is redundant with the button you likely just used. metaRenderCode()/ metaClearForAnotherPage() in the script below force this back to block/'' respectively once there's an actual reason to show it (regenerate-after-editing) or to hide it again (cleared). */ .hb-result-hint{ display:none; } /* Added by metaRenderCode() once you've generated - un-pins the preview so it scrolls away normally instead of eating screen space above the code you actually came to see. metaClearForAnotherPage() removes the class again. */ #meta_preview_pin.hb-preview-unstuck{ position:static; } } /* ---- placeholder shown in the result panel before Generate is clicked -- */ .hb-result-hint{ border:1px dashed var(--hb-blue-border);border-radius:10px; background:var(--hb-blue-tint);color:var(--hb-blue-dark); padding:16px 18px;text-align:center;font-size:.9rem;line-height:1.5; margin-bottom:14px; } .hb-result-hint strong{ color:var(--hb-blue-dark); } .hb-result-hint .button{ margin-top:12px; } /* ---- meta-tag generator: social share preview cards --------------------- Mimics how Facebook/LinkedIn (Open Graph) and Twitter/X actually render a shared link, so changes to the social fields are visible immediately - not just the raw meta tags. */ .hb-social-label{ font-size:.7rem;font-weight:800;color:#8a93a6;text-transform:uppercase; letter-spacing:.4px;margin:14px 0 6px; } .hb-social-card{ border:1px solid #dfe3ea;border-radius:8px;overflow:hidden; background:#fff;font-family:Helvetica,Arial,sans-serif; max-width:420px;margin:0 auto; } .hb-social-card-img{ width:100%;aspect-ratio:1.91/1;background:#e9ecf2 center/cover no-repeat; display:flex;align-items:center;justify-content:center; color:#9aa3b5;font-size:.75rem; } .hb-social-card-body{ padding:9px 12px;background:#f2f3f5; } .hb-social-card-domain{ font-size:.72rem;color:#65676b;text-transform:uppercase;letter-spacing:.2px; } .hb-social-card-title{ font-size:.92rem;font-weight:700;color:#050505;margin:2px 0; line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .hb-social-card-desc{ font-size:.8rem;color:#65676b;line-height:1.3; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .hb-social-card-via{ font-size:.72rem;color:#8a8f99;margin-top:2px; } /* Twitter/X "summary" card type is a smaller horizontal layout (thumbnail left, text right) instead of the big-image vertical layout used for "summary_large_image" (and by Facebook/LinkedIn, which don't have a small-card equivalent). */ .hb-social-card.hb-social-card-horizontal{ display:flex;max-width:420px; } .hb-social-card-horizontal .hb-social-card-img{ width:100px;aspect-ratio:auto;flex-shrink:0; } .hb-social-card-horizontal .hb-social-card-body{ flex:1;min-width:0; } .hb-social-card-note{ font-size:.82rem;color:#5b6472;font-style:italic; } /* ---- character counters, shown directly under any field with a recommended length (page title, description, social title/description etc) - right-aligned immediately under the box, as its own small pill so it reads as live feedback rather than blending into the explanatory .nota text below it. */ .hb-char-count{ display:block;text-align:right;margin:6px 0 8px; font-variant-numeric:tabular-nums; } .hb-char-count-ok,.hb-char-count-over{ display:inline-block;padding:2px 10px;border-radius:12px; font-size:.75rem;font-weight:800; } .hb-char-count-ok{ background:var(--hb-blue-tint);color:var(--hb-blue-dark); } .hb-char-count-over{ background:#fdeceb;color:#b3261e; } /* ---- non-blocking "doesn't look like a full URL" warning --------------- These fields stay optional (someone may not want to enter their URL at all) so this only ever warns, never prevents Generate. */ .hb-url-warn{ display:block;background:#fdeceb;color:#b3261e;border-radius:6px; padding:4px 10px;margin:0 0 6px;font-size:.8rem;font-weight:700; } /* ---- a short list of checkboxes (e.g. "which platforms to allow") ------- One per line reads fine for 2-3 items, but wastes space and takes longer to scan once there are 6+ - two columns fits comfortably on one phone width and keeps the list roughly square instead of a long single strip. */ .hb-checkbox-grid{ display:grid;grid-template-columns:1fr 1fr;column-gap:12px;margin-top:8px; } .checkbox_item{ display:block;text-align:left;padding:2px 0; } /* ---- "?" link next to a short inline hint - jumps to (and opens) the matching FAQ entry below, so the fuller explanation stays one click away instead of living permanently under the field. */ .hb-help-link{ display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%; background:var(--hb-blue-tint);color:var(--hb-blue-dark)!important; font-size:.72rem;font-weight:800;text-decoration:none!important; margin-left:5px;vertical-align:middle;cursor:pointer; border:none;padding:0;font-family:inherit; flex-shrink:0; } .hb-help-link:hover{ background:var(--hb-blue-border); } /* A select is normally full-width (.contactfield .input{width:100%}, the base site's own rule) which leaves no room on the line for a trailing "?" button and pushes it onto its own line below instead of beside the dropdown. Only kicks in for a select immediately followed by the button, so a viewport-style help link nested inside its own note div is unaffected. */ .contactfield:has(> select + .hb-help-link){ display:flex;align-items:center; } .contactfield:has(> select + .hb-help-link) > select{ width:auto!important;flex:1 1 auto;min-width:0; } /* Popover shown on click of a .hb-help-link - positioned in JS (base.js), appended once to and reused for whichever link is open. */ #hb_tooltip{ position:fixed;z-index:3000;max-width:260px; background:#fff;color:#1c0f0d;border:1px solid var(--hb-blue-border); border-radius:8px;padding:10px 12px;font-size:.8rem;line-height:1.45; box-shadow:0 4px 16px rgba(43,58,103,.2); display:none; } #hb_tooltip.hb-tooltip-visible{ display:block; } /* ---- placeholder shown where the code box will appear, before Generate is clicked - gives the result panel some visual weight from the start instead of a blank gap under the hint/Generate button, and signals where the output will land once it exists. */ .hb-result-placeholder{ border:2px dashed #dbe3f5;border-radius:10px; padding:36px 20px;text-align:center;color:#9aa3b5;font-size:.85rem; } .hb-result-placeholder-icon{ font-size:1.5rem;font-weight:800;margin-bottom:8px;opacity:.6; font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; } /* ---- crontab generator: next-run-times panel ---------------------------- */ .hb-cron-nextruns{ margin-top:14px;padding-top:12px;border-top:1px dashed var(--hb-blue-border); } .hb-cron-nextruns strong{ color:var(--hb-blue-dark); } .hb-cron-nextruns ol{ margin:8px 0 0; padding-left:22px; } .hb-cron-nextruns li{ margin-bottom:4px; font-variant-numeric:tabular-nums; } .hb-cron-nextruns .hb-cron-none{ color:#8a5a00; font-weight:600; } .hb-cron-presets{ margin-top:14px;padding-top:12px;border-top:1px dashed var(--hb-blue-border); } .hb-cron-preset-btn{ display:inline-block;margin:0 6px 6px 0;padding:6px 12px; background:var(--hb-blue-tint);border:1px solid var(--hb-blue-border); border-radius:20px;color:var(--hb-blue-dark);font-size:.8rem;font-weight:700; cursor:pointer;transition:background .15s; } .hb-cron-preset-btn:hover{ background:#3d68d8;color:#fff;border-color:#3d68d8; } /* ---- "common mistakes" callout, shown above the form ------------------- */ .hb-mistakes{ background:#fff8ec;border:1px solid #f0d9a8;border-radius:10px; padding:16px 20px;margin:16px 0; } .hb-mistakes h2{ font-size:1rem;color:#8a5a00;margin:0 0 10px; } .hb-mistakes ul{ margin:0;padding-left:20px; } .hb-mistakes li{ margin-bottom:8px;line-height:1.5; } .hb-mistakes .wrong{ color:#b3261e;text-decoration:line-through;font-family:monospace; } .hb-mistakes .right{ color:#1e7d32;font-family:monospace;font-weight:700; } /* ---- minimal rich-text editor (contenteditable + toolbar) ---- */ .hb-rte-toolbar{ margin-bottom:6px; } .hb-rte-btn{ font-size:.85rem;min-width:34px;padding:5px 10px;margin:0 6px 6px 0; background:#fff;color:var(--hb-blue-dark);border:1px solid var(--hb-blue-border); border-radius:4px;cursor:pointer; } .hb-rte-btn:hover{ background:var(--hb-blue-tint); } .hb-rte-sep{ display:inline-block;width:1px;height:22px;background:var(--hb-blue-border); margin:0 8px 6px 2px;vertical-align:middle; } .hb-rte-color-btn{ display:inline-flex;align-items:center;justify-content:center;position:relative; font-size:.85rem;font-weight:700;min-width:34px;height:32px;padding:0 10px;margin:0 6px 6px 0; background:#fff;color:var(--hb-blue-dark);border:1px solid var(--hb-blue-border); border-radius:4px;cursor:pointer;box-sizing:border-box; } .hb-rte-color-btn:hover{ background:var(--hb-blue-tint); } .hb-rte-color-btn input[type="color"]{ position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0; } .hb-rte{ min-height:160px;width:100%;box-sizing:border-box;padding:10px 12px; overflow-y:auto;line-height:1.5; } .hb-rte:focus{ outline:2px solid var(--hb-blue);outline-offset:-1px; } .hb-rte h1,.hb-rte h2,.hb-rte h3{ margin:0 0 8px; } .hb-rte p{ margin:0 0 8px; } /* ---- related tools -------------------------------------------------- */ .hb-related{ margin:34px 0 10px; } .hb-related h2{ font-size:1.15rem;color:var(--hb-blue-dark);margin-bottom:12px; } .hb-related-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } .hb-related-card{ display:block;background:#fff;border:1px solid #e3e9f7;border-radius:10px; padding:14px 16px;text-decoration:none !important;transition:border-color .15s,transform .1s; } .hb-related-card:hover{ border-color:var(--hb-blue); transform:translateY(-1px); } .hb-related-card strong{ display:block;color:var(--hb-blue-dark);font-size:.95rem;margin-bottom:4px; } .hb-related-card span{ display:block;color:#5b6472;font-size:.82rem;line-height:1.4; } /* ---- About section: plain readable prose moved below the generator ----- (kept as normal paragraphs, not an accordion like .hb-faq below it - the two are visually separate sections, each with their own top divider). */ .hb-about-section{ margin:40px 0 0;padding-top:24px;border-top:1px solid var(--hb-blue-border); } .hb-about-section h2{ font-size:1.15rem;color:var(--hb-blue-dark);margin-bottom:10px; } .hb-about-section p{ color:#3a3f4b;line-height:1.6;margin:0 0 14px; } /* ---- FAQ ------------------------------------------------------------- */ .hb-faq{ margin:40px 0 30px;padding-top:24px;border-top:1px solid var(--hb-blue-border); } .hb-faq h2{ font-size:1.15rem;color:var(--hb-blue-dark);margin-bottom:10px; } .hb-faq details{ background:#fff;border:1px solid #e3e9f7;border-radius:8px; padding:12px 16px;margin-bottom:8px; } .hb-faq summary{ cursor:pointer;font-weight:700;color:var(--hb-ink);list-style:none; display:flex;align-items:center;justify-content:space-between;gap:10px; } .hb-faq summary::-webkit-details-marker{ display:none; } .hb-faq summary::after{ content:"+";font-size:1.3rem;font-weight:400;color:var(--hb-blue);flex-shrink:0; } .hb-faq details[open] summary::after{ content:"\2212"; } .hb-faq details p{ margin:10px 0 2px;color:#3a3f4b;line-height:1.55; } /* ---- collapsed, secondary form section (e.g. "Website rating") - for a field group most visitors never need, so it doesn't compete for attention with the fields everyone actually fills in. Lighter-weight than .hb-faq's own details styling, which is meant for full cards. */ .generatorsegbox details.hb-collapsible-section{ grid-column:1 / -1;border-top:1px solid #eef1f8;padding-top:14px;margin-top:4px; } .generatorsegbox details.hb-collapsible-section summary{ cursor:pointer;font-weight:600;color:#3a3f4b;list-style:none; display:flex;align-items:center;gap:8px;font-size:.88rem; } .generatorsegbox details.hb-collapsible-section summary::-webkit-details-marker{ display:none; } .generatorsegbox details.hb-collapsible-section summary::after{ content:"+";font-size:1.1rem;font-weight:400;color:var(--hb-blue); } .generatorsegbox details.hb-collapsible-section[open] summary::after{ content:"\2212"; } @media (max-width:640px){ .hb-related-grid{ grid-template-columns:1fr; } .hb-result-head{ flex-direction:column;align-items:flex-start; } } /* ========================================================================== Form modernization - .generatorsegbox/.segboxheader/.contactlabel/ .contactfield/.input/.button are the framework's own shared classes, used by every generator (rebuilt or not), styled quite dated by default (flat grey section bars, uppercase arrow buttons, unstyled checkboxes, square inputs). Restyled here rather than in the base stylesheet, so it only reaches generator pages (where tools.css loads) and never touches admin screens or the contact form, which share these same class names. The underlying float-based label/field layout is left alone (proven, low-risk) - only appearance changes, plus a mobile stack fallback. ========================================================================== */ .generatorsegbox{ background:#fff;border:1px solid #e3e9f7;border-radius:12px; padding:20px 24px 22px;margin-bottom:18px; box-shadow:0 1px 3px rgba(43,58,103,.06); } .segboxheader{ background:var(--hb-blue-tint)!important;border-radius:10px; padding:11px 18px!important;margin-bottom:14px; border:1px solid var(--hb-blue-border); } .segboxheader .section_heading{ font-weight:800;margin:0;color:var(--hb-blue-dark); font-size:.82rem;letter-spacing:.4px;text-transform:uppercase; } /* Groups related fields inside ONE box (e.g. "Font" / "Box and border" inside a single "Button" section) rather than giving every group its own full header + card - a page with several of these style clusters (button, dropdown, hover...) turns into a wall of near-identical boxes if each gets the full .segboxheader treatment instead. */ .hb-subheader{ margin:18px 0 10px; } .hb-subheader:first-of-type{ margin-top:0; } .hb-subheader h4{ margin:0 0 8px;padding-top:12px;border-top:1px solid #eef1f8; font-size:.72rem;font-weight:800;color:#6b7488; letter-spacing:.5px;text-transform:uppercase; } .hb-subheader:first-of-type h4{ padding-top:0;border-top:none; } /* Top-aligned labels (label above its field, full width) rather than the old side-by-side 40/60 float split - consistently tests faster completion and fewer errors than left-aligned labels once a form has more than a handful of fields, which nearly every generator does here. Carved out for .url_items_div, which is a different pattern entirely (two independent fields side by side in a repeatable row, e.g. "text shown" + "value sent through" pairs) and keeps its existing layout. */ .contactlabel{ font-weight:600;color:#3a3f4b;font-size:.88rem; float:none;width:100%;display:block;padding:0 0 6px; } .contactfield{ float:none;width:100%; } .url_items_div .contactlabel,.url_items_div .contactfield{ float:left;width:49%;display:block;padding:3px 0;margin-right:5px; } .url_items_div .contactlabel{ padding-top:9px; } .contactfield .input, .generatorsegbox select.input, .generatorsegbox textarea.input{ border:1px solid #dbe3f5;border-radius:7px;padding:8px 10px!important; transition:border-color .15s,box-shadow .15s; } /* The base site forces every non-checkbox/radio input to width:100% of its field container - harmless with the old 60%-wide floated .contactfield, but now that fields are full-width top-aligned (above), that stretched short fields (a number box, a color swatch) across the entire ~540-650px form column, making the form look far wider than its content needs. Text inputs, selects and textareas still benefit from the room and stay full width; only the genuinely small field types are capped here. */ .contactfield input[type="number"].input, .contactfield input.jscolor{ width:auto!important;max-width:160px!important; } .generatorsegbox .input:focus{ border-color:var(--hb-blue)!important;outline:0!important; box-shadow:0 0 0 3px rgba(93,141,251,.18); } .generatorsegbox input[type="checkbox"], .generatorsegbox input[type="radio"]{ accent-color:var(--hb-blue);width:15px;height:15px;vertical-align:middle; } /* Hand-rolled radio/checkbox labels (robots options, website rating, yes/no toggles etc. across several generators) aren't wrapped in .contactlabel, so without this they inherit the base site's 1.1rem body font - notably larger than every other label/note in the modernized form. */ .generatorsegbox label{ font-size:.88rem;font-weight:400;color:#3a3f4b; } .generatorsegbox .nota,.generatorsegbox .note{ color:#5b6472;text-align:left;margin-top:8px; } .buttonrow .button, .generatorsegbox .button, .hb-result-hint .button{ float:none;display:inline-block;text-transform:none; /* Buttons here are inline-block with no gap of their own, so on a narrow screen where they wrap onto their own line (e.g. "Clear for another page" below "Reset") they'd otherwise sit right on top of each other with no breathing room. */ margin:6px 8px; /* Not --hb-blue (#5d8dfb) - white text on it is only 3.15:1, which fails WCAG AA's 4.5:1 minimum for text this size. This shade keeps the same hue but is dark enough to pass (~5:1). */ background:#3d68d8;color:#fff!important;border:none; border-radius:8px;padding:10px 22px;font-weight:700;font-size:.9rem; transition:background .15s,transform .1s; } .buttonrow .button:after,.generatorsegbox .button:after,.hb-result-hint .button:after{ content:none; } .buttonrow .button:hover,.generatorsegbox .button:hover,.hb-result-hint .button:hover{ background:#3660cc;color:#fff;border-color:transparent; } .buttonrow .button:active,.generatorsegbox .button:active,.hb-result-hint .button:active{ transform:scale(.98); } .buttonrow input[value="Reset"],.generatorsegbox input[value="Reset"]{ background:#fff;color:var(--hb-blue-dark)!important;border:1px solid var(--hb-blue-border); } .buttonrow input[value="Reset"]:hover,.generatorsegbox input[value="Reset"]:hover{ background:var(--hb-blue-tint);color:var(--hb-blue-dark)!important; } /* ---- two-per-row layout for short fields, on screens wide enough to fit them side by side -------------------------------------------------- Only .hb-compact rows (colour swatches, number/pixel/style dropdowns, font-family - anything that's always short, marked in class.GeneratorItemHelper.php) pair up; everything else (text fields, textareas, radio/checkbox groups) keeps spanning the full width, same as before. CSS Grid is used rather than floating these because every .formrow already carries clear:both (clear/.clearthis, from the base stylesheet) - float and clear are simply ignored on grid items, so that pre-existing clear never gets in the way here. 700px is independent of the page's own two-column breakpoint (1080px, where #generator_form starts floating beside the results) - it's just "is there room for two short fields", which can be true even while the form is still stacked full-width below 1080px. */ /* Below 700px .generatorsegbox isn't display:grid (see below), so rows just stack in normal flow - which gives .formrow no vertical gap at all between consecutive rows (e.g. Open Graph tags directly above Twitter/X tags, with no space between the dropdown and the next row's label). The grid below adds its own row-gap once active, so this only needs to cover the range where that grid isn't. */ @media (max-width:699px){ .generatorsegbox .formrow{ margin-bottom:14px; } } @media (min-width:700px){ /* Applies recursively, not just to .generatorsegbox itself: several generators wrap a conditional sub-group (e.g. "border_items_audio", shown only once a border style is picked) in a plain, unclassed div that isn't itself a .formrow. :has() finds any such div - at any nesting depth - that directly contains .formrow children and grids it too, so a border-width/color pair nested two levels down pairs up exactly like top-level rows do, without needing to know every generator's own wrapper div IDs ahead of time. */ .generatorsegbox, .generatorsegbox div:has(> .formrow){ display:grid;grid-template-columns:1fr 1fr; column-gap:20px;row-gap:14px;align-items:start; } /* A wrapper div is both a grid CONTAINER for its own .formrow children (rule above) and a grid ITEM of whichever grid it's sitting inside (.generatorsegbox, or another wrapper if nested deeper) - without this it would default to spanning only one column as an item, halving the width available to its own two-column children a second time. */ .generatorsegbox div:has(> .formrow), .generatorsegbox .formrow:not(.hb-compact){ grid-column:1 / -1; } /* A bare intro/instruction line sitting directly in .generatorsegbox (not wrapped in a .formrow) is neither a .formrow nor a div with .formrow children, so neither rule above catches it - left alone it becomes a plain auto-placed grid item and pairs up beside whatever comes right after it instead of spanning the full row above it. */ .generatorsegbox > .note, .generatorsegbox > .nota{ grid-column:1 / -1; } /* Escape hatch for a .hb-compact row (a