/* BurrowUp site styles — forest / loam / sunrise */ /* Inline SVG icons: Font Awesome Free 6.5.2 by Fonticons, Inc. (icons licensed CC BY 4.0). Sized in em so they follow the surrounding font-size/color like the old icon font did. */ .bu-ico { display: inline-block; height: 1em; vertical-align: -0.125em; fill: currentColor; flex-shrink: 0; overflow: visible; } :root { --bu-forest: #1f4d36; --bu-forest-deep: #143424; --bu-moss: #2f6e4f; --bu-loam: #5a3e2b; --bu-clay: #8a5a3b; --bu-sun: #f2a541; --bu-sun-soft: #fbd9a0; --bu-cream: #fbf7ef; --bu-sand: #f4ede0; --bu-ink: #1c2a21; --bu-shadow: 0 10px 30px -12px rgba(20, 52, 36, 0.35); --bu-header-h: 68px; } body { background: var(--bu-cream); } h1, h2, h3 { color: var(--bu-ink); letter-spacing: -0.01em; } .bu-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; } @media (min-width: 768px) { .bu-container { padding: 0 24px; } } /* Buttons (brand) */ .bu-btn-primary { background: var(--bu-forest); border-color: var(--bu-forest); color: #fff; } .bu-btn-primary:hover { background: var(--bu-forest-deep); border-color: var(--bu-forest-deep); color: #fff; } .bu-btn-sun { background: var(--bu-sun); border: 2px solid var(--bu-sun); color: var(--bu-ink); } .bu-btn-sun:hover { background: #e8932a; border-color: #e8932a; color: var(--bu-ink); } .bu-btn-outline { background: transparent; border: 2px solid var(--bu-forest); color: var(--bu-forest); } .bu-btn-outline:hover { background: var(--bu-forest); color: #fff; } .bu-btn-ghost-light { background: transparent; border: 2px solid rgba(255,255,255,.6); color: #fff; } .bu-btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; } .bu-btn { border-radius: 999px; gap: 8px; } /* Header */ .bu-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(251, 247, 239, 0.94); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border-color); } .bu-header-container { display: flex; align-items: center; justify-content: space-between; height: var(--bu-header-h); gap: 16px; } .logo a, .logo { display: flex; align-items: center; gap: 10px; color: var(--bu-ink); text-decoration: none; } .logo-mark { width: 38px; height: 38px; flex: none; } /* Wordmark is outlined SVG (Fraunces 700 at the old 1.45rem / -0.02em setting) so it never swaps fonts on load */ .logo-word { display: block; flex: none; height: calc(1.45rem * 1.233); width: auto; aspect-ratio: 10132 / 2466; } .logo-word .w1 { fill: var(--bu-forest); } .logo-word .w2 { fill: var(--bu-clay); } .bu-header nav { display: flex; align-items: center; gap: 28px; } .bu-nav-links { display: flex; list-style: none; gap: 24px; margin: 0; padding: 0; } .bu-nav-links li { margin: 0; } .bu-nav-link { color: var(--text-primary); font-weight: 500; font-size: .98rem; padding: 6px 0; border-bottom: 2px solid transparent; } .bu-nav-link:hover, .bu-nav-link.active { color: var(--bu-forest); border-bottom-color: var(--bu-sun); } .bu-nav-actions { display: flex; gap: 10px; } .bu-nav-actions .bu-btn { padding: 8px 18px; font-size: .95rem; } .bu-nav-actions-mobile { display: none; } .bu-mobile-menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .bu-mobile-menu-toggle span { display: block; width: 24px; height: 2px; background: var(--bu-ink); transition: transform .25s, opacity .25s; } .bu-mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bu-mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .bu-mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .bu-mobile-menu-toggle { display: flex; order: 3; } .bu-nav-actions-desktop { display: none; } .bu-header nav { display: none; position: absolute; top: var(--bu-header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px; background: var(--bu-cream); padding: 16px; border-bottom: 1px solid var(--border-color); box-shadow: var(--bu-shadow); } .bu-header nav.active { display: flex; } .bu-nav-links { flex-direction: column; gap: 4px; } .bu-nav-link { display: block; padding: 12px 4px; border-bottom: 1px solid var(--border-color); } .bu-nav-actions-mobile { display: flex; } .bu-nav-actions-mobile .bu-btn { flex: 1; } } /* Hero */ .bu-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff3dc 0%, var(--bu-cream) 55%); padding: 48px 0 0; } .bu-hero-grid { display: grid; gap: 32px; align-items: center; } @media (min-width: 900px) { .bu-hero-grid { grid-template-columns: 1.1fr .9fr; padding-bottom: 24px; } .bu-hero { padding-top: 72px; } } .bu-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border-color); color: var(--bu-loam); padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; margin-bottom: 18px; } .bu-eyebrow .bu-ico { color: var(--bu-sun); } .bu-hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: 18px; } .bu-hero h1 .accent { color: var(--bu-forest); font-style: italic; } .bu-hero-sub { font-size: 1.12rem; color: var(--text-secondary); max-width: 34em; } .bu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; } .bu-hero-actions .bu-btn { padding: 14px 26px; } .bu-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--text-secondary); } .bu-trust li { margin: 0; display: flex; align-items: center; gap: 6px; } .bu-trust .bu-ico { color: var(--bu-moss); } .bu-strata { display: block; width: 100%; height: auto; margin-top: 32px; } /* Hero preview card */ .bu-preview { background: #fff; border-radius: 20px; box-shadow: var(--bu-shadow); padding: 20px; border: 1px solid var(--border-color); } .bu-preview-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .bu-preview-head strong { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 1.15rem; color: var(--bu-ink); } .bu-preview-head span { font-size: .8rem; color: var(--text-muted); } .bu-preview-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 0; border-top: 1px dashed var(--border-color); font-size: .92rem; } .bu-preview-row .bar { grid-column: 1 / -1; height: 8px; background: var(--bu-sand); border-radius: 999px; overflow: hidden; } .bu-preview-row .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--bu-moss), var(--bu-sun)); border-radius: 999px; } .bu-preview-foot { margin-top: 12px; padding: 12px; background: var(--bu-sand); border-radius: 12px; display: flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--bu-ink); } .bu-preview-foot .bu-ico { color: var(--bu-forest); font-size: 1.2rem; } /* Sections */ .bu-section { padding: 56px 0; } @media (min-width: 768px) { .bu-section { padding: 80px 0; } } .bu-section-alt { background: var(--bu-sand); } .bu-section-dark { background: var(--bu-forest-deep); color: #e9efe9; } .bu-section-dark h2, .bu-section-dark h3 { color: #fff; } .bu-section-dark p { color: #c9d6cc; } .bu-section-head { max-width: 720px; margin: 0 auto 36px; text-align: center; } .bu-section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); } .bu-kicker { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bu-clay); margin-bottom: 10px; } .bu-section-dark .bu-kicker { color: var(--bu-sun); } .bu-grid-3 { display: grid; gap: 18px; } .bu-grid-2 { display: grid; gap: 18px; } @media (min-width: 768px) { .bu-grid-3 { grid-template-columns: repeat(3, 1fr); } .bu-grid-2 { grid-template-columns: repeat(2, 1fr); } } .bu-tile { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 24px; transition: transform .2s, box-shadow .2s; } .bu-tile:hover { transform: translateY(-3px); box-shadow: var(--bu-shadow); } .bu-tile h3 { font-size: 1.3rem; margin-bottom: 8px; } .bu-tile p { margin-bottom: 0; } .bu-tile-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: var(--bu-sand); color: var(--bu-forest); font-size: 1.35rem; } .bu-tile-icon.sun { background: #fff1d6; color: #b86b10; } .bu-tile-icon.clay { background: #f3e2d6; color: var(--bu-loam); } /* Strategy cards */ .bu-strategy { position: relative; padding-top: 30px; } .bu-strategy .tag { position: absolute; top: -12px; left: 24px; background: var(--bu-forest); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: .04em; } .bu-strategy.hybrid .tag { background: var(--bu-sun); color: var(--bu-ink); } .bu-strategy.small .tag { background: var(--bu-clay); } .bu-strategy ul { padding-left: 0; list-style: none; margin: 14px 0 0; } .bu-strategy li { display: flex; gap: 8px; font-size: .95rem; color: var(--text-secondary); } .bu-strategy li .bu-ico { color: var(--bu-moss); margin-top: 5px; } /* Steps (tunnel) */ .bu-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: step; } .bu-step { position: relative; padding: 0 0 28px 64px; margin: 0; } .bu-step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--bu-sun); color: var(--bu-ink); font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; } .bu-step::after { content: ''; position: absolute; left: 21px; top: 48px; bottom: 4px; border-left: 2px dashed rgba(242,165,65,.55); } .bu-step:last-child::after { display: none; } .bu-step h3 { font-size: 1.2rem; margin-bottom: 6px; } /* Stats */ .bu-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: center; } @media (min-width: 768px) { .bu-stats { grid-template-columns: repeat(4, 1fr); } } .bu-stat strong { display: block; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 2.2rem; color: var(--bu-sun); line-height: 1.1; } .bu-stat span { font-size: .9rem; color: #c9d6cc; } /* CTA band */ .bu-cta-band { background: linear-gradient(120deg, var(--bu-forest) 0%, var(--bu-moss) 100%); border-radius: 24px; padding: 36px 22px; text-align: center; color: #fff; position: relative; overflow: hidden; } .bu-cta-band h2 { color: #fff; font-size: clamp(1.6rem, 4.5vw, 2.3rem); } .bu-cta-band p { color: #dbe7de; max-width: 36em; margin: 0 auto 22px; } .bu-cta-band .bu-btn { padding: 14px 28px; } .bu-cta-band::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(242,165,65,.55), rgba(242,165,65,0) 70%); } /* Page hero (inner pages) */ .bu-page-hero { background: linear-gradient(180deg, #fff3dc 0%, var(--bu-cream) 100%); padding: 44px 0 28px; text-align: center; } .bu-page-hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 10px; } .bu-page-hero p { max-width: 40em; margin: 0 auto; font-size: 1.05rem; } /* Planner */ .bu-planner { display: grid; gap: 20px; } @media (min-width: 1000px) { .bu-planner { grid-template-columns: 420px 1fr; align-items: start; } } .bu-panel { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 20px; } .bu-panel h2 { font-size: 1.35rem; margin-bottom: 4px; } .bu-panel .hint { font-size: .88rem; color: var(--text-muted); margin-bottom: 14px; } .bu-debt { border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: var(--bu-cream); } .bu-debt-top { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .bu-debt-top input { flex: 1; } .bu-debt-fields { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 6px; } .bu-debt label { display: block; font-size: .75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } .bu-debt input, .bu-extra input { width: 100%; padding: 10px 10px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; font-family: inherit; color: var(--text-primary); } .bu-debt input:focus, .bu-extra input:focus { outline: none; border-color: var(--bu-forest); box-shadow: 0 0 0 3px rgba(31,77,54,.12); } .bu-debt input.invalid { border-color: var(--color-error); background: #fff6f5; } .bu-remove { flex: none; width: 40px; height: 40px; border: 1px solid var(--border-color); background: #fff; border-radius: 10px; color: var(--text-muted); cursor: pointer; } .bu-remove:hover { color: var(--color-error); border-color: var(--color-error); } .bu-add { width: 100%; border: 2px dashed var(--border-color-hover); background: transparent; border-radius: 12px; padding: 12px; font-weight: 600; color: var(--bu-forest); cursor: pointer; font-family: inherit; font-size: .95rem; } .bu-add:hover { border-color: var(--bu-forest); background: var(--bu-sand); } .bu-extra { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); } .bu-extra label { font-weight: 600; font-size: .95rem; display: block; margin-bottom: 6px; } .bu-money { position: relative; } .bu-money::before { content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .95rem; } .bu-money input { padding-left: 22px; } .bu-pct { position: relative; } .bu-pct::after { content: '%'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .95rem; } .bu-pct input { padding-right: 20px; padding-left: 8px; } .bu-money input, .bu-pct input { min-width: 0; } .bu-planner-msg { margin-top: 12px; font-size: .9rem; border-radius: 10px; padding: 10px 12px; display: none; } .bu-planner-msg.show { display: block; } .bu-planner-msg.error { background: #fdecea; color: #9b1c1c; } .bu-planner-msg.warn { background: #fff4e0; color: #7a4a06; } .bu-results { display: grid; gap: 14px; } @media (min-width: 700px) { .bu-results { grid-template-columns: repeat(3, 1fr); } } .bu-result { background: #fff; border: 2px solid var(--border-color); border-radius: 18px; padding: 18px; position: relative; } .bu-result.best { border-color: var(--bu-sun); box-shadow: 0 10px 28px -14px rgba(242,165,65,.8); } .bu-result .badge { display: none; position: absolute; top: -12px; right: 14px; background: var(--bu-sun); color: var(--bu-ink); font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em; } .bu-result.best .badge { display: inline-block; } .bu-result h3 { font-size: 1.1rem; margin-bottom: 2px; } .bu-result .sub { font-size: .82rem; color: var(--text-muted); margin-bottom: 12px; } .bu-metric { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px dashed var(--border-color); font-size: .92rem; } .bu-metric b { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 1.15rem; color: var(--bu-ink); } .bu-order { list-style: none; counter-reset: ord; padding: 0; margin: 10px 0 0; font-size: .88rem; } .bu-order li { counter-increment: ord; display: flex; gap: 8px; margin-bottom: 6px; color: var(--text-secondary); } .bu-order li::before { content: counter(ord); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bu-sand); color: var(--bu-forest); font-weight: 700; font-size: .75rem; display: grid; place-items: center; } .bu-results-empty { background: #fff; border: 2px dashed var(--border-color-hover); border-radius: 18px; padding: 32px 18px; text-align: center; color: var(--text-muted); } .bu-results-empty .bu-ico { font-size: 2rem; color: var(--bu-sun); margin: 0 auto 10px; display: block; } .bu-insight { margin-top: 14px; background: var(--bu-forest-deep); color: #e9efe9; border-radius: 18px; padding: 18px; display: flex; gap: 14px; align-items: flex-start; } .bu-insight .bu-ico { color: var(--bu-sun); font-size: 1.4rem; margin-top: 2px; } .bu-insight p { color: #dbe7de; margin: 0; } .bu-insight .bu-btn { margin-top: 12px; } .bu-disclaimer { font-size: .8rem; color: var(--text-muted); margin-top: 14px; } /* Pricing / free */ .bu-price-card { background: #fff; border: 2px solid var(--bu-forest); border-radius: 22px; padding: 28px 22px; max-width: 520px; margin: 0 auto; text-align: center; box-shadow: var(--bu-shadow); } .bu-price { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 4rem; color: var(--bu-forest); line-height: 1; } .bu-price small { font-size: 1rem; color: var(--text-muted); font-family: 'DM Sans', 'DM Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .bu-check-list { list-style: none; padding: 0; text-align: left; margin: 20px 0; } .bu-check-list li { display: flex; gap: 10px; } .bu-check-list .bu-ico { color: var(--bu-moss); margin-top: 5px; } /* Accordion overrides */ .bu-accordion { max-width: 800px; margin: 0 auto; } .bu-accordion-item { background: #fff; border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 10px; overflow: hidden; } /* Auth & forms */ .bu-auth { min-height: calc(100vh - 260px); min-height: calc(100svh - 260px); display: flex; align-items: center; justify-content: center; padding: 40px 0; background: radial-gradient(circle at 80% 0%, #fff1d6 0, rgba(255,241,214,0) 45%), var(--bu-cream); } .bu-auth-box { width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--border-color); border-radius: 22px; padding: 28px 20px; box-shadow: var(--bu-shadow); position: relative; overflow: hidden; } @media (min-width: 600px) { .bu-auth-box { padding: 36px 32px; } } .bu-auth-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--bu-forest), var(--bu-moss) 55%, var(--bu-sun)); } .bu-auth-head { text-align: center; margin-bottom: 22px; } .bu-auth-head .logo-mark { width: 52px; height: 52px; margin: 0 auto 10px; display: block; } .bu-auth-head h1 { font-size: 1.8rem; margin-bottom: 6px; } .bu-auth-head p { margin: 0; font-size: .95rem; } .bu-form-row { display: grid; gap: 0 12px; } @media (min-width: 520px) { .bu-form-row { grid-template-columns: 1fr 1fr; } } .bu-form-label.required::after { content: ' *'; color: var(--color-error); } .bu-consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bu-cream); margin-bottom: 12px; } .bu-consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--bu-forest); } .bu-consent label { font-size: .78rem; line-height: 1.5; color: var(--text-secondary); cursor: pointer; } .bu-auth-links { text-align: center; font-size: .92rem; margin-top: 16px; } .payment-error-badge { display: none; margin-top: 12px; background: #fdecea; color: #9b1c1c; border-radius: 10px; padding: 10px 12px; font-size: .92rem; } /* Legal */ .bu-legal { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 24px 18px; } @media (min-width: 768px) { .bu-legal { padding: 40px 44px; } } .bu-legal h2 { font-size: 1.3rem; margin-top: 28px; } .bu-legal h2:first-of-type { margin-top: 0; } .bu-legal p, .bu-legal li { font-size: .97rem; } .bu-legal .updated { font-size: .9rem; color: var(--text-muted); } .bu-callout { background: var(--bu-sand); border-left: 4px solid var(--bu-sun); border-radius: 10px; padding: 14px 16px; margin: 16px 0; } .bu-callout p:last-child { margin-bottom: 0; } /* Contact */ .bu-contact-grid { display: grid; gap: 20px; } @media (min-width: 900px) { .bu-contact-grid { grid-template-columns: 1.3fr .7fr; } } .bu-contact-item { display: flex; gap: 12px; margin-bottom: 16px; } .bu-contact-item .bu-ico { color: var(--bu-forest); font-size: 1.1rem; margin-top: 4px; width: 20px; } .bu-contact-item p { margin: 0; } /* Footer */ .bu-footer { background: var(--bu-forest-deep); color: #c9d6cc; padding: 48px 0 24px; } .bu-footer-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (min-width: 900px) { .bu-footer-container { grid-template-columns: 1.6fr repeat(4, 1fr); } } .bu-footer-brand { grid-column: 1 / -1; } @media (min-width: 900px) { .bu-footer-brand { grid-column: auto; } } .bu-footer-brand .logo-word .w1 { fill: #fff; } .bu-footer-brand .logo-word .w2 { fill: var(--bu-sun); } .bu-footer-brand p { color: #a9bcae; font-size: .9rem; margin-top: 10px; max-width: 26em; } .bu-footer h4 { font-family: 'DM Sans', 'DM Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bu-sun); margin-bottom: 12px; } .bu-footer-links { list-style: none; padding: 0; margin: 0; } .bu-footer-links li { margin-bottom: 8px; } .bu-footer-links a { color: #dbe7de; font-size: .93rem; } .bu-footer-links a:hover { color: #fff; text-decoration: underline; } .bu-footer-contact { font-size: .88rem; line-height: 1.7; color: #a9bcae; } .bu-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 18px; font-size: .82rem; color: #a9bcae; } .bu-footer-bottom p { color: #a9bcae; margin-bottom: 6px; font-size: .82rem; } /* 404 */ .bu-404 { text-align: center; padding: 64px 0; } .bu-404 .big { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: clamp(5rem, 20vw, 9rem); color: var(--bu-forest); line-height: 1; } /* Modal-ish success */ .bu-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: .95rem; } .bu-status.success { display: block; background: #e7f4ec; color: #14532d; } .bu-status.pending { display: block; background: #f3efe6; color: #4a3a2c; } .bu-status.error { display: block; background: #fdecea; color: #9b1c1c; } /* ---- UX audit fixes (2026-11-03) ---- */ /* Native controls don't inherit the page font by default (signup button rendered in Arial) */ button, input, select, textarea { font-family: inherit; } /* Skip link for keyboard users */ .bu-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--bu-forest); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .15s; } .bu-skip:focus { top: 12px; } /* Consistent, visible keyboard focus on brand colors */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--bu-sun); outline-offset: 2px; border-radius: 6px; } input[type="checkbox"]:focus-visible { outline: 3px solid var(--bu-sun); outline-offset: 2px; } .bu-footer a:focus-visible { outline-color: var(--bu-sun-soft); } /* Lock background scroll while the mobile menu is open */ /* Lock only (its overflow applies to the viewport). Also hiding body would make body its own scroll container and un-stick the sticky header in WebKit. Older iOS: touchmove is blocked in site.js. */ @media (max-width: 900px) { html.bu-menu-open { overflow: hidden; overscroll-behavior: none; } html.bu-menu-open .bu-header { background: var(--bu-cream); } } /* 44px minimum tap targets */ .bu-btn { min-height: 44px; } .bu-nav-actions .bu-btn { min-height: 40px; } @media (max-width: 900px) { .bu-nav-actions .bu-btn { min-height: 44px; } } .bu-footer-links li { margin-bottom: 0; } .bu-footer-links a { display: inline-block; padding: 9px 0; } .bu-remove { width: 44px; height: 44px; } #results { scroll-margin-top: calc(var(--bu-header-h) + 16px); } /* SMS / terms consent must stay clearly legible (carrier review) */ .bu-consent label { font-size: .875rem; line-height: 1.55; } .bu-consent input { width: 20px; height: 20px; margin-top: 2px; } /* Planner result cards: stack label over value when a card is narrow (3-up desktop) */ .bu-result { container-type: inline-size; } @container (max-width: 260px) { .bu-metric { flex-direction: column; align-items: flex-start; gap: 2px; } .bu-metric b { font-size: 1.25rem; } } .bu-order li { justify-content: space-between; } .bu-order li span { flex: 1; min-width: 0; } .bu-order li em { font-style: normal; white-space: nowrap; color: var(--text-muted); font-size: .82rem; } /* Mobile shortcut from the form down to the results */ .bu-jump { display: none; margin-top: 14px; width: 100%; } @media (max-width: 999px) { .bu-jump { display: inline-flex; } } /* Sticky header: keep anchor targets (#sms, #results, #main) and scrollIntoView clear of it. Scoped to main (not html scroll-padding): WebKit applies html scroll-padding when focusing controls inside the sticky header itself, jumping the page up by the header height. */ main, main * { scroll-margin-top: calc(var(--bu-header-h) + 16px); } .bu-legal-jump { font-size: .92rem; background: var(--bu-sand); border-radius: 10px; padding: 10px 14px; } .bu-404-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .logo { min-height: 44px; } .bu-footer-contact a { display: inline-block; padding: 8px 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* FAQ headers are