/* ============================================================================
BB TOOLS DESIGN SYSTEM (v1)
Single source of truth for every Billbooks free tool. New tools include this
file and use these classes only, no per-tool restyling. See TOOLS_BRAND_GUIDELINE.md.
Page skeleton every tool follows:
[nav header] partials/brand-header.php
...all SEO copy + FAQ, same width...
[interlinking] partials/other-tools.php
[footer] partials/tool-footer.php
============================================================================ */
:root {
--bb-tool-max: 900px; /* one width for every tool box + its content */
--bb-ink: #16213a; /* headings, labels, primary buttons */
--bb-text: #333; /* body copy */
--bb-muted: #6b7280; /* subtitles, helper text */
--bb-accent: #00bcd9; /* brand cyan (highlights only) */
--bb-box-border: #e6e6e6; /* the tool box stroke */
--bb-box-radius: 16px;
--bb-box-shadow: 0 6px 24px rgba(0,0,0,.05);
--bb-field-border: #d7d7d7;
--bb-field-focus: #16213a;
--bb-field-radius: 10px;
--bb-radius-pill: 999px;
--bb-danger: #d33a2f;
--bb-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--bb-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Layout -------------------------------------------------------------------- */
.bb-tool { max-width: var(--bb-tool-max); margin: 0 auto; padding: 40px 16px 0; }
.bb-tool-box { background: #fff; border: 1px solid var(--bb-box-border); border-radius: var(--bb-box-radius); box-shadow: var(--bb-box-shadow); padding: 32px; margin-top: 4px; }
.bb-tool-content { max-width: var(--bb-tool-max); margin: 44px auto 0; padding: 0 16px; }
@media (max-width: 560px) { .bb-tool { padding-top: 26px; } .bb-tool-box { padding: 22px 18px; } }
/* Titles -------------------------------------------------------------------- */
.bb-tool-h1 { font-family: var(--bb-sans); font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--bb-ink); margin: 0 0 10px; }
.bb-tool-sub { font-family: var(--bb-sans); font-size: 17px; line-height: 1.6; color: var(--bb-muted); margin: 0 0 22px; }
@media (max-width: 560px) { .bb-tool-h1 { font-size: 24px; } .bb-tool-sub { font-size: 15.5px; } }
/* Content typography (SEO copy outside the box) ----------------------------- */
.bb-tool-content h2 { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--bb-ink); margin: 34px 0 14px; }
.bb-tool-content h3 { font-size: 19px; font-weight: 700; color: var(--bb-ink); margin: 26px 0 10px; }
.bb-tool-content p, .bb-tool-content li { font-size: 16.5px; line-height: 1.65; color: var(--bb-text); }
.bb-tool-content p { margin-bottom: 14px; }
.bb-tool-content ul, .bb-tool-content ol { padding-left: 20px; margin-bottom: 16px; }
.bb-tool-content li { margin-bottom: 8px; }
/* Fields -------------------------------------------------------------------- */
.bb-field { margin-bottom: 16px; }
.bb-label { display: block; font-family: var(--bb-sans); font-size: 14px; font-weight: 600; color: var(--bb-ink); margin-bottom: 6px; }
.bb-hint { display: block; font-size: 13px; color: var(--bb-muted); margin-top: 5px; }
.bb-input, .bb-select, .bb-textarea,
.bb-tool-box .form-control, .bb-tool-box .form-select {
width: 100%; box-sizing: border-box; font-family: var(--bb-sans); font-size: 15px; color: var(--bb-text);
background: #fff; border: 1.5px solid var(--bb-field-border); border-radius: var(--bb-field-radius); padding: 12px 14px;
transition: border-color .15s ease;
}
.bb-input:focus, .bb-select:focus, .bb-textarea:focus,
.bb-tool-box .form-control:focus, .bb-tool-box .form-select:focus {
outline: none; border-color: var(--bb-field-focus); box-shadow: none;
}
.bb-input::placeholder, .bb-textarea::placeholder { color: #9aa1ac; }
.bb-textarea { min-height: 84px; resize: vertical; }
.bb-select, .bb-tool-box select.form-control, .bb-tool-box .form-select {
appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2316213a' stroke-width='2' d='M1 1.5 6 6l5-4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
/* Validation ---------------------------------------------------------------- */
.bb-input.is-invalid, .bb-select.is-invalid, .bb-textarea.is-invalid,
.bb-tool-box .form-control.is-invalid, .was-validated .bb-tool-box .form-control:invalid { border-color: var(--bb-danger); }
.bb-error, .bb-tool-box .invalid-feedback { display: block; color: var(--bb-danger); font-size: 13px; margin-top: 5px; }
/* Buttons ------------------------------------------------------------------- */
.bb-btn {
display: inline-block; font-family: var(--bb-sans); font-size: 16px; font-weight: 600; line-height: 1;
background: var(--bb-ink); color: #fff; border: 1.5px solid var(--bb-ink); border-radius: var(--bb-radius-pill);
padding: 14px 30px; cursor: pointer; text-decoration: none; transition: background .15s ease, opacity .15s ease;
}
.bb-btn:hover, .bb-btn:focus { background: #24304d; border-color: #24304d; color: #fff; }
.bb-btn-sm { font-size: 14px; padding: 9px 20px; }
.bb-btn-lg { font-size: 17px; padding: 16px 36px; }
.bb-btn-secondary { background: #fff; color: var(--bb-ink); }
.bb-btn-secondary:hover, .bb-btn-secondary:focus { background: #f4f6fa; color: var(--bb-ink); border-color: var(--bb-ink); }
/* CTA card (used inside content) ------------------------------------------- */
.bb-cta { text-align: center; background: #f0f7ff; border-radius: 16px; padding: 40px 24px; margin: 44px 0 8px; }
.bb-cta h2 { margin: 0 0 8px; }
.bb-cta p { margin: 0 0 20px; color: var(--bb-muted); }
.bb-cta .bb-fine { font-size: 14px; color: var(--bb-muted); margin: 14px 0 0; }
/* FAQ (shared squared accordion, black bars via .faq-title-bg) -------------- */
.bb-faq .accordion-item { border: none !important; border-radius: 0 !important; margin-bottom: 8px; }
.bb-faq .accordion-button { border-radius: 0 !important; box-shadow: none !important; }
.bb-faq .accordion-body { background: #f6f7f9; }