/* BizFolderz - fonts + the shared header ONLY. Every layout rule below is scoped to .bfz-* classes, which exist only inside bfz-header.php (our own markup). Nothing here targets any of the site's own elements, so it cannot move page content. The single exception is the one .header hide rule at the bottom. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap'); /* ---------- FONTS ---------- */ html,body,h1,h2,h3,h4,h5,h6,p,a,span,div,li,td,th,label,small,strong,b,em, button,input,select,textarea{ font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif !important; } h1,h2,h3,h4{font-weight:300 !important;letter-spacing:-.02em !important} h5,h6{font-weight:400 !important} p,li,td,label,a,span,div{font-weight:400 !important} strong,b{font-weight:500 !important} button,.btn,input[type=submit],.auth-btn{font-weight:400 !important} /* ---------- SHARED HEADER (our markup only) ---------- */ .bfz-head{background:#0b1b2a;border-bottom:1px solid #1d3b4e;position:sticky;top:0;z-index:900} .bfz-head-in{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;height:58px} .bfz-brand{display:block;line-height:1.15;white-space:nowrap;text-decoration:none} .bfz-logo{font-size:19px;font-weight:500;letter-spacing:-.02em;color:#1686e8} .bfz-logo span{color:#19b76a} .bfz-slogan{display:block;font-size:10px;font-weight:400;color:#9fb2c1} .bfz-nav{display:flex;align-items:center;gap:2px;flex:1;margin-left:6px} .bfz-nav>a,.bfz-drop-btn{padding:8px 11px;font-size:14px;font-weight:400;color:#9fb2c1; background:none;border:0;border-radius:4px;cursor:pointer;white-space:nowrap;text-decoration:none;font-family:inherit} .bfz-nav>a:hover,.bfz-drop-btn:hover,.bfz-nav>a.on{color:#f3f8fb} .bfz-drop{position:relative;display:flex;align-items:center;height:58px} .bfz-mega{display:none;position:absolute;left:0;top:58px;width:700px;background:#0b1b2a; border:1px solid #1d3b4e;border-top:0;border-radius:0 0 4px 4px;padding:20px; grid-template-columns:repeat(3,1fr);gap:22px;z-index:950} .bfz-drop:hover .bfz-mega,.bfz-drop:focus-within .bfz-mega,.bfz-mega.open{display:grid} .bfz-mega h4{font-size:12px;font-weight:400;color:#9fb2c1;margin:0 0 9px;padding-bottom:8px; border-bottom:1px solid #1d3b4e;letter-spacing:0} .bfz-mega a{display:block;padding:5px 7px;font-size:14px;font-weight:400;color:#f3f8fb; border-radius:4px;text-decoration:none} .bfz-mega a:hover{background:#0e2436;color:#1686e8} .bfz-cta{display:flex;gap:7px;align-items:center;margin-left:auto} .bfz-login{padding:7px 13px;font-size:13px;font-weight:400;border:1px solid #28536a; border-radius:4px;color:#f3f8fb;background:transparent;text-decoration:none} .bfz-signup{padding:7px 13px;font-size:13px;font-weight:400;background:#1686e8;color:#fff; border:1px solid #1686e8;border-radius:4px;text-decoration:none} .bfz-burger{display:none;width:32px;height:32px;align-items:center;justify-content:center; background:transparent;border:1px solid #28536a;border-radius:4px;cursor:pointer;padding:0} .bfz-burger i{display:block;width:14px;height:1px;background:#f3f8fb;position:relative} .bfz-burger i:before,.bfz-burger i:after{content:"";position:absolute;left:0;width:14px;height:1px;background:#f3f8fb} .bfz-burger i:before{top:-4.5px} .bfz-burger i:after{top:4.5px} @media(max-width:900px){ .bfz-head-in{padding:0 14px;gap:10px;height:54px} .bfz-nav{display:none;position:absolute;top:54px;left:0;right:0;flex-direction:column; align-items:stretch;gap:0;background:#0b1b2a;border-bottom:1px solid #1d3b4e; padding:8px;max-height:76vh;overflow-y:auto;margin-left:0} .bfz-nav.open{display:flex} .bfz-nav>a,.bfz-drop-btn{width:100%;text-align:left;padding:11px 12px} .bfz-drop{display:block;height:auto} .bfz-mega{position:static;width:auto;grid-template-columns:1fr;gap:10px;border:0; padding:0 0 8px 12px;background:transparent} .bfz-burger{display:inline-flex} .bfz-login{display:none} } /* the one rule that touches site markup: hide the old duplicate bar ONLY on pages where our shared nav is present */ /* Hide the page's OWN header wherever the shared nav is present. Two shapes exist in this codebase and both are covered:
- 44 pages
(no class) - products.php only index.php also uses a bare
but has no .bfz-head, so it is untouched and keeps its own nav. These rules ONLY hide - they never restyle a page's markup, which is what broke the layout earlier. */ body:has(.bfz-head) .header{display:none !important} body:has(.bfz-head) header:not(.bfz-head){display:none !important} /* ---------- SIZE CORRECTION ---------- The type is now lighter and smaller, so the old padding reads as oversized. ONLY padding / font-size / line-height are set here. Deliberately no width, height, display, position, margin, grid or flex - those are what broke the layout previously. */ .card,.box,.panel,.tile,.module,.product-card,.price-card,.form-card, .info-box,.detail-card,.step-box,.track-box,.summary,.review, [class*="-card"],[class*="-box"]{padding:20px !important} .btn,button,input[type=submit],.auth-btn,.button,a.btn{ padding:9px 16px !important;font-size:14px !important;line-height:1.2 !important} input,select,textarea{padding:9px 11px !important;font-size:15px !important} .badge,.tag,.chip,.pill,.status{padding:3px 8px !important;font-size:12px !important} @media(max-width:900px){ .card,.box,.panel,.tile,.module,.product-card,.price-card,.form-card, .info-box,.detail-card,.step-box,.track-box,.summary,.review, [class*="-card"],[class*="-box"]{padding:15px !important} .btn,button,input[type=submit],.auth-btn,.button,a.btn{padding:8px 14px !important;font-size:13px !important} } /* ---------- ONE HEADER EVERYWHERE ---------- Every page had its own hand-built header, all different. The shared bfz-header.php is now included on ALL pages, so each page's own header is hidden. These rules only HIDE - they never restyle. */ body:has(.bfz-head) .header, body:has(.bfz-head) header:not(.bfz-head), body:has(.bfz-head) .topbar, body:has(.bfz-head) .site-header, body:has(.bfz-head) .navbar{display:none !important} /* about-us kept a "Back to Home" button from its old header area - redundant now that Home is in the shared nav. The "Back to Home" buttons on service-success / tax-success are end-of-flow CTAs and are deliberately NOT touched. */ body:has(.bfz-head) .back-btn{display:none !important} /* ---------- HEADER BOX LOCK ---------- .bfz-head is a
, so any page rule like header{padding:14px} inflates it. index.php did exactly that: 87px tall vs a 58px inner bar. Pin our own header's box so no page stylesheet can change its height. Scoped entirely to .bfz-* - touches no page markup. */ header.bfz-head{ padding:0 !important;margin:0 !important; height:60px !important;min-height:60px !important;max-height:60px !important; display:block !important;box-sizing:border-box !important; border:0 !important;border-bottom:1px solid #1d3b4e !important; box-shadow:none !important;background:#0b1b2a !important} .bfz-head-in{ height:60px !important;max-width:1240px !important;margin:0 auto !important; padding:0 20px !important;display:flex !important;align-items:center !important; gap:18px !important;box-sizing:border-box !important} .bfz-head *{box-sizing:border-box} .bfz-head nav,.bfz-head .bfz-brand,.bfz-head .bfz-cta{margin:0 !important} .bfz-drop{height:60px !important} .bfz-mega{top:60px !important} @media(max-width:900px){ header.bfz-head{height:56px !important;min-height:56px !important;max-height:56px !important} .bfz-head-in{height:56px !important;padding:0 14px !important} .bfz-drop{height:auto !important} .bfz-nav{top:56px !important} } /* ---------- HERO VISUAL REMOVED ---------- Owner: "remove just the box and the human, the writing box, it looks ugly". The text was overflowing under the photo and two bullets were empty. .hero is a 2-column grid, so the empty column must collapse to 1fr or the copy would sit in half the width. ONLY grid-template-columns is changed - padding is left exactly as the page set it. The animated background (.bf-hero-3d) is KEPT. */ .hero-visual{display:none !important} .hero:has(.hero-visual){grid-template-columns:1fr !important} /* homepage only - affiliate hero keeps its 2 columns for the calculator */ .hero:has(.hero-visual) > div:not(.bf-hero-3d){max-width:760px} /* ==================== LIGHT THEME ==================== Owner asked for the whole site white. Site was 12 dark pages and 6 light ones, so customers saw the brand flip mid-purchase. COLOUR ONLY - no layout properties on page markup. Every rule below was tested live in-browser before deploying; the invisible-text count was driven to zero first. Kept deliberately dark: the footer and the chat launcher. */ :root{--bfl-ink:#0A1F33;--bfl-muted:#5C6B7A;--bfl-line:#E3E8ED; --bfl-soft:#F6F8FA;--bfl-blue:#2A6FE8;--bfl-green:#0B7A47} html,body{background:#FFFFFF !important;color:var(--bfl-ink) !important} section,.section,.hero,.hero-wrap,.wrap,.wrapper,.container,.content,.inner, .full,.band,article{background-color:transparent !important;background-image:none !important} /* all text dark first... */ h1,h2,h3,h4,h5,h6,p,li,td,th,label,span,div,small,strong,b,em,figcaption,dt,dd{ color:var(--bfl-ink) !important} /* ...then restore what must not be dark */ a{color:var(--bfl-blue) !important} .btn,button,input[type=submit],.button,.auth-btn,.bfz-signup,.signup-btn, .btn *,button *,.bfz-signup *{color:#FFFFFF !important} .btn.gray,.btn-ghost,.secondary,.bfz-login,.login-btn, .bfz-login *,.btn.gray *{color:var(--bfl-ink) !important} .muted,.sub,.subtitle,.desc,.description,small,.small,.note,.hint,.caption, .pkg-small,.pkg-time,.bfz-slogan,label{color:var(--bfl-muted) !important} /* surfaces */ .card,.box,.panel,.tile,.price-card,.form-card,.summary,.fee-breakdown,.alert, .notice,.well,.block,.module,.step-box,.track-box,.appointment-cta,.review, .item-card,.order-card,.doc-card,.process,.info-box,.detail-card,.upload-box, .product-card,.stat,.hero-stat,[class*="-card"],[class*="-box"]{ background:#FFFFFF !important;background-image:none !important; border:1px solid var(--bfl-line) !important;color:var(--bfl-ink) !important} .fee-row,.row-alt,.list-row,.info-item,.checkline,.summary-row,.line-item, .steps,.stepper,.progress,tbody tr:nth-child(even){ background:var(--bfl-soft) !important;background-image:none !important; border-color:var(--bfl-line) !important} input,select,textarea{background:#FFFFFF !important;color:var(--bfl-ink) !important; border:1px solid #CBD5DF !important} input::placeholder,textarea::placeholder{color:#8A9BAA !important} select option{background:#FFFFFF;color:var(--bfl-ink)} table,th,td{border-color:var(--bfl-line) !important} thead th{background:var(--bfl-soft) !important;color:var(--bfl-muted) !important} hr,.divider,.sep{border-color:var(--bfl-line) !important;background:var(--bfl-line) !important} /* homepage "What Do You Want To Do?" module */ .service-tabs{background:var(--bfl-soft) !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .service-tabs .service-tab,.service-tabs .service-tab h3,.service-tabs .service-tab *{ color:var(--bfl-muted) !important;background:#FFFFFF !important;border-color:var(--bfl-line) !important} .service-tabs .service-tab.active,.service-tabs .service-tab.active h3, .service-tabs .service-tab.active *{color:var(--bfl-blue) !important; background:#F0F6FF !important;border-color:var(--bfl-blue) !important} .service-panels-wrap,.service-panel,.service-panel-top,.service-panel-top *, .service-grid,.service-grid .service-item,.service-grid .service-item *{color:var(--bfl-ink) !important} .service-panel,.service-panel-top{background:#FFFFFF !important;background-image:none !important} .service-grid .service-item{background:#FFFFFF !important;border:1px solid var(--bfl-line) !important} .service-grid .service-item:hover{background:var(--bfl-soft) !important;border-color:var(--bfl-blue) !important} /* other homepage blocks that were dark */ .about-home,.promo-banner{background:var(--bfl-soft) !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .about-home *,.promo-banner *{color:var(--bfl-ink) !important} .about-home p,.promo-banner p,.about-home .muted,.promo-banner .muted{color:var(--bfl-muted) !important} .promo-banner .btn,.promo-banner button{color:#FFFFFF !important} /* header in light */ header.bfz-head{background:#FFFFFF !important;border-bottom:1px solid var(--bfl-line) !important} .bfz-nav>a,.bfz-drop-btn{color:var(--bfl-muted) !important} .bfz-nav>a:hover,.bfz-nav>a.on,.bfz-drop-btn:hover{color:var(--bfl-ink) !important} .bfz-mega{background:#FFFFFF !important;border-color:var(--bfl-line) !important} .bfz-mega a{color:var(--bfl-ink) !important} .bfz-mega a:hover{background:var(--bfl-soft) !important;color:var(--bfl-blue) !important} .bfz-mega h4{color:var(--bfl-muted) !important;border-bottom-color:var(--bfl-line) !important} .bfz-logo{color:var(--bfl-blue) !important} .bfz-logo span{color:var(--bfl-green) !important} .bfz-login,.bfz-burger{border-color:#CBD5DF !important} .bfz-burger i,.bfz-burger i:before,.bfz-burger i:after{background:var(--bfl-ink) !important} /* the dark animated canvas reads as a dark slab on white */ .bf-hero-3d,.bf-hero-canvas{display:none !important} /* ---------- LIGHT THEME - PER PAGE FIXES ---------- Found by auditing all 22 pages in-browser for dark surfaces and white-on-white text. Each selector below was measured, not guessed. */ /* some pages force color:#fff on headings with higher specificity than a bare h1/h2 selector, so raise ours above them */ body h1,body h2,body h3,body h4,body h5,body h6, .hero h1,.hero h2,.hero h3,section h1,section h2,section h3, .section h1,.section h2,.section h3{color:var(--bfl-ink) !important} body summary,details summary,summary,summary *{color:var(--bfl-ink) !important} details{background:#FFFFFF !important;border:1px solid var(--bfl-line) !important} /* about-us.php */ .life-node,.team-visual{background:var(--bfl-soft) !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .life-node *,.team-visual *{color:var(--bfl-ink) !important} /* affiliate.php */ .calculator,.calc-total,.feature,.commission-item,.step,.final-cta{ background:var(--bfl-soft) !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .calculator *,.calc-total *,.feature *,.commission-item *,.step *,.final-cta *{ color:var(--bfl-ink) !important} .calculator .muted,.feature p,.commission-item p,.step p,.final-cta p{color:var(--bfl-muted) !important} .calc-total,.calc-total *{color:var(--bfl-blue) !important} .final-cta .btn,.final-cta button,.calculator .btn{color:#FFFFFF !important} /* products.php brand panels */ .brand-panel,.brand-panel.faris-brand,.brand-panel.whitelabel-brand{ background:#FFFFFF !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .brand-panel *{color:var(--bfl-ink) !important} .whitelabel-logo-text span,.whitelabel-logo-text{color:var(--bfl-ink) !important} /* ---------- LIGHT THEME - FINAL TWO ---------- */ /* about-us: tiles inside .impact-row and .commit-list */ .hero-card .impact-row > div,.commit-list > div{ background:var(--bfl-soft) !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .hero-card .impact-row > div *,.commit-list > div *{color:var(--bfl-ink) !important} .hero-card,.impact-row,.commit-list{background-image:none !important} /* products: the White-Label wordmark span */ .whitelabel-logo-text,.whitelabel-logo-text span, .whitelabel-logo-text *{color:var(--bfl-ink) !important} /* products.php whitelabel wordmark - page CSS sets #f4f8fb with higher specificity than .whitelabel-logo-text span, so out-specify it */ html body .whitelabel-logo-text, html body .whitelabel-logo-text span, html body .whitelabel-logo-text *{ color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} html body .whitelabel-brand .white-label-name, html body .product-card.whitelabel .white-label-name, html body .whitelabel-logo-text .white-label-name{ color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} /* ---------- FOOTER STAYS DARK ---------- REGRESSION FIX: the "all text dark" rule above also darkened the footer, but the footer background stayed dark (#050d16) - so it became dark-on-dark and unreadable. Restore light text inside the footer only. */ footer,footer *{color:#C2D3E4 !important} footer h1,footer h2,footer h3,footer h4,footer h5,footer h6, footer strong,footer b,footer .footer-social-title{color:#FFFFFF !important} footer a{color:#C2D3E4 !important} footer a:hover{color:#FFFFFF !important} footer p,footer .brand-slogan,footer .footer-slogan,footer small, footer .muted{color:#8AA3BB !important} footer .logo,footer .brand-logo-text{color:#FFFFFF !important} footer .logo span,footer .brand-logo-text span{color:#3FD693 !important} footer .btn,footer button{color:#FFFFFF !important} /* ---------- LOGO MARQUEE ---------- "Businesses We Helped Build" was a static 4-column grid with the logo stacked above the name. Owner wants logo + name SIDE BY SIDE, scrolling. bfz-header.php clones the cards once so this loops with no gap. Pauses on hover, and respects prefers-reduced-motion. */ .logo-section{overflow:hidden !important} .logo-wall{ display:flex !important; grid-template-columns:none !important; width:max-content !important; max-width:none !important; gap:14px !important; margin:0 !important; animation:bfzMarquee 42s linear infinite; will-change:transform; } .logo-wall:hover{animation-play-state:paused} @keyframes bfzMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .real-logo-card{ flex:0 0 auto !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; min-height:0 !important; padding:14px 20px !important; border-radius:4px !important; background:#FFFFFF !important; border:1px solid var(--bfl-line) !important; box-shadow:none !important; backdrop-filter:none !important; } .real-logo-card:hover{transform:none !important;box-shadow:none !important;border-color:var(--bfl-blue) !important} .real-logo-card img{height:30px !important;max-width:110px !important} .real-logo-card span{ font-size:14px !important;font-weight:500 !important; color:var(--bfl-ink) !important;text-align:left !important;white-space:nowrap !important} @media(prefers-reduced-motion: reduce){ .logo-wall{animation:none;width:auto !important;flex-wrap:wrap !important;justify-content:center} } @media(max-width:900px){ .real-logo-card{padding:11px 15px !important} .real-logo-card img{height:24px !important} .real-logo-card span{font-size:13px !important} } /* ---------- PSEUDO-ELEMENT SLABS ---------- THE BUG MY AUDITS KEPT MISSING: sections paint a dark slab with section::before { background:#07121f }. getComputedStyle(el) does not see pseudo-elements, so every "0 dark surfaces" reading was wrong. Neutralise those backgrounds; the pseudo-elements themselves are left in place so any decorative sizing/positioning still works. */ section::before,section::after, .section::before,.section::after, .hero::before,.hero::after, .logo-section::before,.logo-section::after, .bf-reviews::before,.bf-reviews::after, main::before,main::after{ background-color:transparent !important; background-image:none !important; } /* ==================== EVERY DARK ELEMENT ==================== Generated from a scan of 30 live pages measuring computed background colour AND ::before/::after pseudo-elements. 51 selectors found. Grouped by what each one is. Colour only - no layout. */ /* -- decorative dark blobs/glows that read as smudges on white: hide -- */ .bf-hero-orb,.bf-hero-grid,.bf-hero-beam,.bf-hero-cube, .team-depth-glow,.team-depth-grid{display:none !important} /* -- dark gradient overlays painted by pseudo-elements: neutralise -- */ .bf-banner-slide::after,.bf-type-line::before,.service-tab::after, .life-node::after,.product-card::before,.product-card::after, .brand-panel::before,.team-visual::after,.calculator::before, .calc-total::after,.pkg-card::before,.visual-card::after, .hero-visual::before,.hero-visual::after{ background:transparent !important;background-image:none !important} /* -- dark surfaces: go white/soft with a hairline -- */ .thumb,.visual-card,.about-primary,.popup-content,.popup-image, .engine-core,.vision,.commission,.white-label-product,.pkg-card, .maisha-logo-text,.calculator,.calc-total,.life-node,.team-visual{ background:#FFFFFF !important;background-image:none !important; border:1px solid var(--bfl-line) !important} .thumb,.visual-card,.about-primary,.popup-content,.engine-core,.vision, .commission,.white-label-product,.pkg-card{color:var(--bfl-ink) !important} .thumb *,.visual-card *,.about-primary *,.popup-content *,.engine-core *, .vision *,.commission *,.white-label-product *,.pkg-card *{color:var(--bfl-ink) !important} /* .thumb is a blog thumbnail wrapper: images inside must not get a border */ .thumb img{border:0 !important} /* -- dark gradient text on wordmarks: make solid ink -- */ .brand-slogan,.slogan,.maisha-logo-text,.maisha-logo-text *{ background:none !important;background-image:none !important; -webkit-background-clip:initial !important;background-clip:initial !important; color:var(--bfl-muted) !important;-webkit-text-fill-color:var(--bfl-muted) !important} .maisha-logo-text,.maisha-logo-text *{color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} /* -- small chips that were dark navy: light tint, dark text -- */ .pill,.tag,.badge,.chip{background:#EEF3F9 !important;background-image:none !important; color:var(--bfl-blue) !important;border:1px solid #D6E2F0 !important} .pill *,.tag *,.badge *,.chip *{color:var(--bfl-blue) !important} /* -- icon tiles: light tint, brand-blue glyph -- */ .icon,.folder-icon,.feature .icon,.card .icon{ background:#EEF3F9 !important;background-image:none !important; color:var(--bfl-blue) !important;border:1px solid #D6E2F0 !important} .icon svg,.folder-icon svg{stroke:var(--bfl-blue);width:22px;height:22px} /* -- gradient buttons: keep brand colour, guarantee white text -- */ .cta,.open-btn,.popup-btn,.cta *,.open-btn *,.popup-btn *{color:#FFFFFF !important} /* -- review dots were bare boxes: make them small pills -- */ .bf-review-dot,.dot{width:22px !important;height:4px !important;border-radius:2px !important; background:#D6DEE7 !important;border:0 !important;padding:0 !important;margin:0 3px !important} .bf-review-dot.active,.bf-review-dot.is-active,.bf-review-dot[aria-current], .dot.active,.dot.is-active{background:var(--bfl-blue) !important} /* -- modal backdrops and avatars: intentionally left as they are -- */ /* ---------- SECONDARY / OUTLINE BUTTONS ---------- The gradient-button rule forced white text on every .cta, including .cta.secondary which has a WHITE background -> invisible. Outline buttons get ink text and a visible border. */ .cta.secondary,.cta.secondary *,.secondary,.secondary *, .btn.secondary,.btn.secondary *,.btn-outline,.btn-outline *, .btn.gray,.btn.gray *,.btn-ghost,.btn-ghost *,.bfz-login{ color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} .cta.secondary,.secondary,.btn.secondary,.btn-outline,.btn.gray,.btn-ghost{ background:#FFFFFF !important;background-image:none !important; border:1px solid #CBD5DF !important} .cta.secondary:hover,.secondary:hover,.btn-outline:hover,.btn-ghost:hover{ border-color:var(--bfl-blue) !important;color:var(--bfl-blue) !important} .cta.secondary:hover *,.secondary:hover *,.btn-outline:hover *{color:var(--bfl-blue) !important} /* ---------- PROMO BANNER SLIDES ---------- Each slide used a dark PHOTO as its background with white text on top. On a white site, dark text over a dark photo is unreadable and the photo reads as a dark slab. Drop the photo; keep the slide as a clean light panel with ink text and the brand-blue button. */ .bf-banner-slide,.bf-banner-slides,.promo-banner{ background-image:none !important;background:var(--bfl-soft) !important; border:1px solid var(--bfl-line) !important} .bf-banner-slide img,.bf-banner-slide picture,.bf-banner-slide video{display:none !important} .bf-banner-slide,.bf-banner-slide *{color:var(--bfl-ink) !important;text-shadow:none !important} .bf-banner-slide p,.bf-banner-slide .sub,.bf-banner-slide small{color:var(--bfl-muted) !important} .bf-banner-slide h1,.bf-banner-slide h2,.bf-banner-slide h3{color:var(--bfl-ink) !important} .bf-banner-slide .btn,.bf-banner-slide a.btn,.bf-banner-slide button, .bf-banner-slide .btn *,.bf-banner-slide button *{ background:var(--bfl-blue) !important;color:#FFFFFF !important;border-color:var(--bfl-blue) !important} /* BANNER BUTTON (any tag): the slide's call-to-action carries no .btn class, so match any link/button/role=button inside a slide, excluding the dots */ .bf-banner-slide a:not([class*="dot"]),.bf-banner-slide button:not([class*="dot"]), .bf-banner-slide [role="button"],.promo-banner > a,.promo-banner .banner-btn,.promo-banner .promo-btn{ display:inline-block;background:var(--bfl-blue) !important;background-image:none !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important; border:1px solid var(--bfl-blue) !important;border-radius:4px !important; padding:10px 18px !important;font-size:14px !important;font-weight:400 !important;text-decoration:none !important} .bf-banner-slide a:not([class*="dot"]) *,.bf-banner-slide button:not([class*="dot"]) *{color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important} /* blog card meta/excerpt must not drop below readable contrast */ [class*="card"] p,[class*="card"] .excerpt,[class*="card"] .meta,[class*="card"] time,[class*="card"] small{ color:var(--bfl-muted) !important} /* card meta spans (dates, read-time) were #b3b3b3-ish - lift to muted */ [class*="card"] span:not(.btn):not([class*="btn"]):not(.tag):not(.pill):not(.badge){color:var(--bfl-muted) !important} [class*="card"] h1 span,[class*="card"] h2 span,[class*="card"] h3 span{color:inherit !important} /* ==================== OWNER ROUND 3 ==================== */ /* 1. "Book an Appointment" button had gone white-on-white */ .appointment-btn,.appointment-cta button,.appointment-cta a.btn{ background:var(--bfl-blue) !important;background-image:none !important;color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;border:1px solid var(--bfl-blue) !important; box-shadow:none !important;padding:11px 20px !important;font-size:14px !important;border-radius:4px !important} .appointment-btn *{color:#FFFFFF !important} /* 2. Dark borders around every section looked heavy. Sections: no border. Cards keep only a faint hairline. */ section,.section,.hero,.wrap,.wrapper,.container,.content,.inner,.logo-section,.bf-reviews, .service-panels-wrap,.service-panel,.promo-banner,.about-home{border:0 !important;box-shadow:none !important;outline:0 !important} .card,.box,.panel,.tile,.product-card,.price-card,.form-card,.stat,.hero-stat,.feature,.trust-card, .real-logo-card,.service-item,.thumb,.visual-card,.engine-core,.life-node,.team-visual, .commission-item,.step,.calculator,[class*="-card"],[class*="-box"]{border-color:#EDF0F3 !important} .bf-review-card,[class*="review-card"]{border:1px solid #EDF0F3 !important;box-shadow:none !important} /* 3. Review arrows: no dark box, just the arrow glyph */ .bf-review-arrow{background:transparent !important;background-image:none !important;border:0 !important; color:var(--bfl-ink) !important;box-shadow:none !important;width:34px !important;height:34px !important;font-size:20px !important} .bf-review-arrow:hover{color:var(--bfl-blue) !important;background:transparent !important} /* 4. Review quote text was too light */ .bf-review-card p,.bf-review-card blockquote,.bf-review-card q,.bf-review-text,.bf-review-quote, .bf-review-track p,[class*="review-card"] p{color:#2C3E4E !important;opacity:1 !important} /* 5. Biz Modules brand wordmarks: same two-tone as the site logo (blue + green); White-Label gets its own colour (violet) to stand apart */ .faris-logo-text{color:var(--bfl-blue) !important;-webkit-text-fill-color:var(--bfl-blue) !important; background:none !important;background-image:none !important} .faris-logo-text .crm{color:var(--bfl-green) !important;-webkit-text-fill-color:var(--bfl-green) !important} .maisha-logo-text,.maisha-logo-text *{color:var(--bfl-blue) !important;-webkit-text-fill-color:var(--bfl-blue) !important; background:none !important;background-image:none !important} .maisha-logo-text .erp,.maisha-logo-text span:last-child{color:var(--bfl-green) !important;-webkit-text-fill-color:var(--bfl-green) !important} html body .whitelabel-logo-text .white-label-name{color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} html body .whitelabel-logo-text .white-label-product{color:#6D28D9 !important;-webkit-text-fill-color:#6D28D9 !important; background:none !important;background-image:none !important;border:0 !important} .faris-logo-text,.maisha-logo-text,.whitelabel-logo-text{border:0 !important;box-shadow:none !important;background:transparent !important} /* 7. Headings were oversized on some pages (affiliate h1 = 64px). Cap at Stripe's 44px. */ h1{font-size:clamp(30px,4vw,44px) !important;line-height:1.12 !important} h2,.section-title{font-size:clamp(24px,3vw,32px) !important} h3{font-size:clamp(18px,2vw,22px) !important} /* 8. Calculator: no mouse-parallax, held top-right with a soft shadow */ .calculator{transform:none !important;transition:none !important;position:sticky !important;top:88px !important; box-shadow:0 12px 32px rgba(10,31,51,.08),0 1px 2px rgba(10,31,51,.05) !important; border:1px solid #EDF0F3 !important;background:#FFFFFF !important} .calculator *{transform:none !important} /* 9. Kill decorative animations site-wide; keep only the logo marquee */ *,*::before,*::after{animation:none !important} .logo-wall{animation:bfzMarquee 42s linear infinite !important} .reveal,.fade-in,.fade-up,[data-reveal],[data-aos]{opacity:1 !important;transform:none !important;visibility:visible !important;transition:none !important} .reveal *{opacity:1 !important;visibility:visible !important} .trust-card,.partner-headline,.investor-headline{opacity:1 !important;transform:none !important} /* ---------- BLOG PAGE + PRODUCTS CANVAS ---------- blogs.php: .card:hover used var(--panel2) = dark navy -> card went dark on hover/click. .meta span chips were hardcoded navy. */ .card:hover,.card:focus-within,.card.active,.card.is-active{ background:#FFFFFF !important;background-image:none !important;border-color:var(--bfl-blue) !important} .card:hover *,.card:focus-within *{color:inherit} .card:hover h1,.card:hover h2,.card:hover h3{color:var(--bfl-ink) !important} .card:hover p{color:var(--bfl-muted) !important} .meta span,.card .meta span,.meta .chip,.post-meta span{ background:#EEF3F9 !important;background-image:none !important;color:var(--bfl-blue) !important; -webkit-text-fill-color:var(--bfl-blue) !important;border:1px solid #D6E2F0 !important; border-radius:4px !important;padding:3px 9px !important;font-size:12px !important} /* products.php: the orbit "round round animation" is a canvas - remove it */ .investor-canvas,canvas.investor-canvas{display:none !important} /* ==================== CSS VARIABLE OVERRIDE ==================== The pages define their own dark palette as custom properties and use them in hover states, variants and pseudo-elements (e.g. .card:hover { background: var(--panel2) }). Scanning computed colours cannot see inside var(). Redefining the variables themselves turns every such rule light in one go. Found by scanning all 77 PHP files locally: 16 dark values across --bg --panel --panel2 --line --night --night-2 and their --bf-* twins. Text variables flipped to ink. */ :root,body{ --bg:#FFFFFF !important; --bf-bg:#FFFFFF !important; --night:#FFFFFF !important; --night-2:#F6F8FA !important; --panel:#FFFFFF !important; --bf-panel:#FFFFFF !important; --panel2:#F6F8FA !important; --bf-panel-2:#F6F8FA !important; --panel-2:#F6F8FA !important; --surface:#FFFFFF !important; --card:#FFFFFF !important; --card-bg:#FFFFFF !important; --line:#E3E8ED !important; --bf-line:#E3E8ED !important; --border:#E3E8ED !important; --text:#0A1F33 !important; --bf-text:#0A1F33 !important; --fg:#0A1F33 !important; --heading:#0A1F33 !important; --muted:#5C6B7A !important; --bf-muted:#5C6B7A !important; --blue:#2A6FE8 !important; --bf-blue:#2A6FE8 !important; --green:#0B7A47 !important; --bf-green:#0B7A47 !important; } /* ---------- PRODUCTS PAGE BUTTONS ---------- .faris-btn / .maisha-btn / .soon-btn had white text on a transparent background (invisible on white). .detail-btn / .site-link were navy "black buttons". Primary = brand blue filled; secondary = outline. */ .product-card .btn.faris-btn,.product-card .btn.maisha-btn,.product-card .btn.soon-btn, .btn.faris-btn,.btn.maisha-btn,.btn.soon-btn{ background:var(--bfl-blue) !important;background-image:none !important;color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;border:1px solid var(--bfl-blue) !important;box-shadow:none !important} .btn.soon-btn{background:#94A3B8 !important;border-color:#94A3B8 !important;cursor:default} .product-card .btn.detail-btn,.product-card .btn.site-link,.btn.detail-btn,.btn.site-link{ background:#FFFFFF !important;background-image:none !important;color:var(--bfl-ink) !important; -webkit-text-fill-color:var(--bfl-ink) !important;border:1px solid #CBD5DF !important;box-shadow:none !important} .btn.detail-btn:hover,.btn.site-link:hover{border-color:var(--bfl-blue) !important;color:var(--bfl-blue) !important;-webkit-text-fill-color:var(--bfl-blue) !important} .product-card .btn *{color:inherit !important;-webkit-text-fill-color:inherit !important} /* about-us: animated dots/lines canvas behind the hero - decorative motion, remove */ .about-flow-canvas,canvas.about-flow-canvas{display:none !important} /* any other decorative background canvases site-wide (charts/maps excluded by class) */ canvas[class*="flow"],canvas[class*="hero"],canvas[class*="bg"],canvas[class*="particle"],canvas[class*="orbit"]{display:none !important} /* coming-soon disabled look (needs the 3-class specificity to win) */ .product-card .btn.soon-btn,html body .btn.soon-btn{background:#CBD5DF !important;border-color:#CBD5DF !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;cursor:default !important;pointer-events:none} /* AFFILIATE HERO 2-COL: copy left, calculator top-right */ .hero:has(.calculator){grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr) !important;align-items:start !important;gap:40px !important} .hero:has(.calculator) .calculator{margin-top:0 !important;width:100% !important;max-width:520px !important;justify-self:end !important} @media(max-width:900px){.hero:has(.calculator){grid-template-columns:1fr !important}.hero:has(.calculator) .calculator{position:static !important;max-width:none !important}} /* ==================== COMPACT AND SQUARE ==================== Owner: "no cards, no round boxes, everything square, big text as small as possible, modern, organised." Type + radius + shadow + padding only. No widths, no display, no positioning on page markup. */ /* --- radius: zero everywhere; only avatars stay round --- */ *,*::before,*::after{border-radius:0 !important} .bf-review-avatar,.avatar,.av,.user-avatar{border-radius:50% !important} /* --- shadows: none, except the calculator the owner asked to keep raised --- */ *,*::before,*::after{box-shadow:none !important} .calculator{box-shadow:0 12px 32px rgba(10,31,51,.08),0 1px 2px rgba(10,31,51,.05) !important} /* --- type scale: small and tight --- */ h1{font-size:clamp(24px,2.6vw,32px) !important;line-height:1.15 !important;letter-spacing:-.02em !important;font-weight:500 !important;margin:0 0 10px !important} h2,.section-title,.sec-title{font-size:clamp(19px,2vw,24px) !important;line-height:1.2 !important;letter-spacing:-.015em !important;font-weight:500 !important;margin:0 0 8px !important} h3{font-size:17px !important;line-height:1.3 !important;font-weight:500 !important;margin:0 0 6px !important} h4{font-size:15px !important;font-weight:500 !important;margin:0 0 4px !important} h5,h6{font-size:13px !important;font-weight:500 !important} p,li,td,th,label,a,span,div,dd,dt,figcaption,blockquote,q{font-size:14px !important;line-height:1.5 !important} input,select,textarea,button,.btn{font-size:13px !important} small,.small,.muted,.note,.hint,.caption,.meta,.meta *,time,.pkg-small,.pkg-time,.stat span,.hero-stat span{font-size:12px !important} .badge,.tag,.pill,.chip,.status,.meta span,.kicker,.eyebrow{font-size:11px !important;padding:2px 7px !important;letter-spacing:.02em} /* children of headings must follow the heading, not the generic span/div size */ h1 *,h2 *,h3 *,h4 *,.section-title *{font-size:inherit !important;line-height:inherit !important;font-weight:inherit !important} /* things that are meant to be larger than body */ .bfz-logo{font-size:18px !important} .stat b,.stat strong,.hero-stat b,.hero-stat strong,.stat-number,.big-number{font-size:22px !important;font-weight:500 !important} .pkg-price{font-size:22px !important;font-weight:500 !important} .price,.total,.total *,.amount,.calc-total *,.grand-total{font-size:16px !important;font-weight:500 !important} .bf-review-avatar{font-size:13px !important} /* a .section-title used as a band INSIDE a card is a label, not a heading */ .card .section-title,.box .section-title,.panel .section-title,.form-card .section-title{ font-size:11px !important;letter-spacing:.1em !important;text-transform:uppercase !important; color:var(--bfl-muted) !important;font-weight:500 !important;padding:8px 0 !important;margin:14px 0 8px !important; background:transparent !important;border:0 !important;border-bottom:1px solid #EDF0F3 !important} /* lead paragraphs under hero headings */ .hero p,.lead,.sub,.subtitle,.hero-copy p{font-size:15px !important;line-height:1.5 !important} /* --- flat square panels instead of cards --- */ .card,.box,.panel,.tile,.price-card,.form-card,.summary,.fee-breakdown,.alert,.notice,.well, .block,.module,.step-box,.track-box,.appointment-cta,.review,.item-card,.order-card,.doc-card, .process,.info-box,.detail-card,.upload-box,.product-card,.stat,.hero-stat,.feature,.trust-card, .commission-item,.step,.calculator,.engine-core,.life-node,.team-visual,.visual-card,.thumb, [class*="-card"],[class*="-box"]{ border:1px solid #EDF0F3 !important;background:#FFFFFF !important;padding:16px !important} .real-logo-card{padding:10px 16px !important} .service-grid .service-item{padding:12px 14px !important} .bf-review-card,[class*="review-card"]{padding:16px !important} /* --- form controls: square, tight --- */ input,select,textarea{padding:8px 10px !important;border:1px solid #D5DCE3 !important;min-height:0 !important;height:auto !important;line-height:1.35 !important} label{margin-bottom:4px !important;font-weight:500 !important} .btn,button,input[type=submit],.auth-btn,.button,.cta,.appointment-btn{padding:8px 14px !important;line-height:1.3 !important;font-weight:500 !important} /* --- step indicators: square --- */ .step-dot,.step-number,.steps span,.stepper span{width:26px !important;height:26px !important;line-height:26px !important;font-size:12px !important} /* --- vertical rhythm: tighter sections --- */ section,.section{padding-top:36px !important;padding-bottom:36px !important} .hero{padding-top:40px !important;padding-bottom:40px !important} @media(max-width:900px){ h1{font-size:22px !important}h2,.section-title{font-size:18px !important}h3{font-size:16px !important} p,li,td,th,label,a,span,div{font-size:13px !important} section,.section{padding-top:24px !important;padding-bottom:24px !important} .hero{padding-top:24px !important;padding-bottom:24px !important} .card,.box,.panel,[class*="-card"],[class*="-box"]{padding:12px !important} } /* ---------- HEADING SIZE - HIGH SPECIFICITY ---------- Pages set e.g. .hero h1{font-size:56px!important}. A bare h1 selector loses that fight even with !important. These out-rank every page rule. */ html body h1,html body .hero h1,html body section h1,html body .section h1,html body .hero-copy h1, html body .hero-text h1,html body .container h1,html body .wrap h1,html body main h1,html body article h1{ font-size:clamp(24px,2.6vw,32px) !important;line-height:1.15 !important;letter-spacing:-.02em !important;font-weight:500 !important} html body h2,html body .hero h2,html body section h2,html body .section h2,html body .container h2,html body .wrap h2,html body main h2, html body .section-title,html body .sec-title{ font-size:clamp(19px,2vw,24px) !important;line-height:1.2 !important;letter-spacing:-.015em !important;font-weight:500 !important} html body h3,html body section h3,html body .container h3,html body .wrap h3,html body main h3{font-size:17px !important;font-weight:500 !important} html body h4{font-size:15px !important;font-weight:500 !important} html body h1 *,html body h2 *,html body h3 *,html body .animated-text,html body .hero h1 span{ font-size:inherit !important;line-height:inherit !important;font-weight:inherit !important} /* hero lead text and eyebrow kickers on every page */ html body .hero p,html body .hero .sub,html body .hero-copy p,html body .lead,html body .subtitle{font-size:15px !important;line-height:1.5 !important} html body .kicker,html body .eyebrow,html body .hero-kicker{font-size:11px !important;letter-spacing:.1em !important} /* buttons: square already; make absolutely sure no page pill survives */ html body .btn,html body button,html body a.btn,html body .cta,html body .auth-btn,html body input[type=submit]{border-radius:0 !important} /* WORDMARKS + PRODUCTS HERO GAP */ html body .faris-logo-text,html body .maisha-logo-text,html body .whitelabel-logo-text, html body .faris-logo-text *,html body .maisha-logo-text *,html body .whitelabel-logo-text *{ font-size:22px !important;line-height:1.2 !important;font-weight:500 !important;letter-spacing:-.01em !important} html body .brand-panel .white-label-product{font-size:22px !important} html body .brand-panel small,html body .brand-panel .tagline,html body .brand-panel p{font-size:11px !important;letter-spacing:.08em !important} /* products hero kept a tall min-height for the removed canvas */ .hero:has(.investor-canvas){min-height:0 !important} .hero:has(.investor-canvas) .hero-copy{padding:0 !important} /* ---------- BRAND WORDMARK COLOURS (from the real sites) ---------- fariscrm.com: F.A.R.I.S ink + CRM bright blue maishaerp.com: Maisha blue + ERP purple */ html body .faris-logo-text,html body .faris-logo-text *{color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} html body .faris-logo-text .crm{color:#2D8CFF !important;-webkit-text-fill-color:#2D8CFF !important} html body .maisha-logo-text,html body .maisha-logo-text *{color:#2563EB !important;-webkit-text-fill-color:#2563EB !important} html body .maisha-logo-text .erp{color:#7C3AED !important;-webkit-text-fill-color:#7C3AED !important} /* login/signup pages: decorative colour glows painted by body::before/after */ body::before,body::after{background:none !important;background-image:none !important} /* ---------- PRODUCT FEATURES AS NUMBERED LIST ---------- Owner: "instead of box put it like list 1 2 3 and text line with icon". Scoped to the three product cards on products.php only. */ html body .product-card .feature-grid{display:flex !important;flex-direction:column !important;gap:0 !important; counter-reset:bfzf;margin:6px 0 14px !important;padding:0 !important;border:0 !important;background:transparent !important} html body .product-card .feature{display:flex !important;align-items:flex-start !important;gap:10px !important; padding:8px 0 !important;margin:0 !important;border:0 !important;border-bottom:1px solid #EDF0F3 !important; background:transparent !important;counter-increment:bfzf;font-size:13px !important;font-weight:500 !important; color:var(--bfl-ink) !important;line-height:1.4 !important} html body .product-card .feature:last-child{border-bottom:0 !important} html body .product-card .feature::before{content:counter(bfzf);flex:0 0 auto;width:20px;height:20px;line-height:20px; text-align:center;font-size:11px;font-weight:500;background:#EEF3F9;color:var(--bfl-blue);border:1px solid #D6E2F0;margin-top:1px} html body .product-card .feature span{display:inline !important;font-size:13px !important;font-weight:400 !important; color:var(--bfl-muted) !important;margin:0 !important} html body .product-card .feature span::before{content:" \2014 ";color:#B8C4D0} /* the small 2x2 sub-tiles on the white-label card use the same pattern */ html body .product-card .whitelabel-grid,html body .product-card .wl-grid{display:flex !important;flex-direction:column !important;gap:0 !important} /* drop-shadow filters on cards (about-us engine card etc.) - flat means none */ .card,.hero-card,.engine-core,.visual-card,.calculator-wrap,[class*="-card"],[class*="-box"],.panel,.box{filter:none !important;-webkit-filter:none !important} /* WORDMARK SPANS - beat the :not() chain (each :not adds specificity) */ html body .product-card .faris-logo-text span.crm.crm.crm.crm.crm.crm.crm{color:#2D8CFF !important;-webkit-text-fill-color:#2D8CFF !important} html body .product-card .maisha-logo-text span.erp.erp.erp.erp.erp.erp.erp{color:#7C3AED !important;-webkit-text-fill-color:#7C3AED !important} html body .product-card .whitelabel-logo-text span.white-label-product.white-label-product.white-label-product.white-label-product.white-label-product.white-label-product.white-label-product{color:#6D28D9 !important;-webkit-text-fill-color:#6D28D9 !important} html body .product-card .whitelabel-logo-text span.white-label-name.white-label-name.white-label-name.white-label-name.white-label-name.white-label-name.white-label-name{color:var(--bfl-ink) !important;-webkit-text-fill-color:var(--bfl-ink) !important} /* ---------- REVEAL-ON-SCROLL SAFETY NET ---------- Pages pre-hide content (opacity:0 + translateY) and fade it in with a CSS animation once .in-view/.show is added. With animations disabled the fade never runs and content stays invisible. Force visible. */ html body .product-card,html body article,html body .card,html body .feature,html body .trust-card, html body .stat,html body .hero-stat,html body .commission-item,html body .step,html body .life-node, html body .blog-card,html body .service-item,html body .real-logo-card,html body .bf-review-card, html body [class*="in-view"],html body [class*="reveal"],html body [class*="fade-"],html body [class*="rise"], html body [class*="slide-up"],html body [class*="animate"],html body [data-aos],html body [data-reveal]{ opacity:1 !important;transform:none !important;visibility:visible !important;animation:none !important} /* ---------- CHAT LAUNCHER ---------- white, flat, square like the rest */ html body .chat-launcher,html body [class*="chat-launcher"],html body .chat-widget,html body .chat-box{ background:#FFFFFF !important;background-image:none !important;color:var(--bfl-ink) !important; border:1px solid #D5DCE3 !important;border-radius:0 !important;box-shadow:0 6px 20px rgba(10,31,51,.10) !important; padding:8px 12px !important} html body .chat-launcher *,html body [class*="chat-launcher"] *,html body .chat-widget *{color:var(--bfl-ink) !important; font-size:13px !important;border-radius:0 !important} html body .chat-launcher small,html body .chat-launcher .sub,html body .chat-launcher p, html body .chat-launcher span:last-child{color:var(--bfl-muted) !important;font-size:12px !important} html body .chat-launcher .chat-logo{ background:var(--bfl-blue) !important;background-image:none !important;color:#FFFFFF !important; width:34px !important;height:34px !important;line-height:34px !important;text-align:center;font-size:12px !important;font-weight:500 !important} html body .chat-header,html body [class*="chat-head"]{background:#FFFFFF !important;color:var(--bfl-ink) !important;border-bottom:1px solid #EDF0F3 !important} html body .chat-header *,html body [class*="chat-head"] *{color:var(--bfl-ink) !important} html body .chat-send,html body .chat-form button,html body [class*="chat"] button[type=submit]{background:var(--bfl-blue) !important;color:#FFFFFF !important} html body .chat-send *,html body [class*="chat"] button[type=submit] *{color:#FFFFFF !important} /* CHAT LAUNCHER TITLE - the title is a ; keep it plain text */ html body .chat-launcher strong,html body .chat-launcher b,html body .chat-launcher .chat-title{ background:none !important;background-image:none !important;color:var(--bfl-ink) !important; width:auto !important;height:auto !important;line-height:1.3 !important;text-align:left !important; font-size:13px !important;font-weight:500 !important;display:block !important;padding:0 !important} html body .chat-launcher .chat-logo{background:var(--bfl-blue) !important;color:#FFFFFF !important; width:34px !important;height:34px !important;line-height:34px !important;text-align:center !important; font-size:12px !important;font-weight:500 !important;flex:0 0 34px !important} /* ---------- FOOTER LIGHT + PLAN TABLE COMPACT ---------- */ /* footer: owner wants it white too */ html body footer{background:#F6F8FA !important;background-image:none !important;border-top:1px solid #E3E8ED !important; color:var(--bfl-ink) !important;padding:32px 0 18px !important} html body footer,html body footer *{color:var(--bfl-ink) !important} html body footer p,html body footer .brand-slogan,html body footer .footer-slogan,html body footer small, html body footer .muted,html body footer .footer-bottom,html body footer .copyright{color:var(--bfl-muted) !important} html body footer a{color:#33475B !important} html body footer a:hover{color:var(--bfl-blue) !important} html body footer h1,html body footer h2,html body footer h3,html body footer h4,html body footer .footer-social-title{ color:var(--bfl-ink) !important;font-size:13px !important;font-weight:500 !important;letter-spacing:.02em} html body footer .logo,html body footer .brand-logo-text{color:var(--bfl-blue) !important;font-size:18px !important} html body footer .logo span,html body footer .brand-logo-text span{color:var(--bfl-green) !important} html body footer .social a,html body footer [class*="social"] a{background:#FFFFFF !important;border:1px solid #D5DCE3 !important;color:var(--bfl-ink) !important} html body footer .social a svg,html body footer [class*="social"] svg{fill:var(--bfl-ink) !important;stroke:var(--bfl-ink) !important} html body footer hr,html body footer .footer-divider{border-color:#E3E8ED !important;background:#E3E8ED !important} /* plan table: no inner scroll box, tight header, small prices, plain labels */ html body .package-comparison{max-height:none !important;overflow:visible !important;border:1px solid #E3E8ED !important; box-shadow:none !important;margin-top:6px !important} html body .package-head{background:#F6F8FA !important;border-bottom:1px solid #E3E8ED !important} html body .package-head > div,html body .package-label{padding:10px 12px !important} html body .package-label{font-size:13px !important;font-weight:500 !important;background:#F6F8FA !important} html body .pkg-name{font-size:12px !important;font-weight:500 !important;letter-spacing:.04em;text-transform:uppercase; color:var(--bfl-muted) !important;background:transparent !important;border:0 !important;padding:0 !important;margin:0 0 4px !important;display:block} html body .pkg-price{font-size:20px !important;font-weight:500 !important;line-height:1.1 !important;margin:0 !important} html body .pkg-small{font-size:11px !important;color:var(--bfl-muted) !important;margin:2px 0 4px !important} html body .pkg-time{font-size:11px !important;background:transparent !important;border:0 !important;padding:0 !important; color:var(--bfl-green) !important;margin:0 !important} html body .package-comparison .feature-row,html body .package-comparison [class*="row"]{border-bottom:1px solid #EDF0F3 !important} html body .package-comparison .feature-row > div,html body .package-comparison [class*="cell"]{padding:8px 12px !important;font-size:13px !important} html body .package-comparison .feature-name,html body .package-comparison .feature-title{font-size:13px !important;font-weight:500 !important} html body .package-comparison .feature-desc,html body .package-comparison small{font-size:11.5px !important;color:var(--bfl-muted) !important} html body .package-comparison .selected,html body .package-comparison .is-selected,html body .package-comparison .active-col{ border:1px solid var(--bfl-blue) !important;background:#F5F9FF !important} html body .package-comparison .addon-chip,html body .package-comparison .addon,html body .package-comparison .pill{ background:#FFF7ED !important;color:#9A5B00 !important;border:1px solid #F5DEB8 !important;font-size:11px !important;padding:2px 6px !important} /* MARQUEE DRIVEN BY JS (bfz-header.php) - no CSS animation on the wall */ html body .logo-wall{animation:none !important;transition:none !important} /* ============================================================ MOBILE (8 Sep 2026). The pages carry their own phone rules written as `html body X {... !important}`, which out-rank the theme's plain selectors below 900px - so the dark hero photo, dark stat boxes, dark service items and the dark nav panel all came back on phones. :not(#_) lifts every selector here to id-level specificity. ============================================================ */ @media (max-width:900px){ html body .hero:not(#_),html body section.hero:not(#_){background:#FFFFFF !important;background-image:none !important;min-height:0 !important;padding:28px 16px !important} html body .hero:not(#_)::before,html body .hero:not(#_)::after{display:none !important} html body .hero-stat:not(#_){background:#FFFFFF !important;border:1px solid var(--bfl-line) !important;box-shadow:none !important} html body .hero-stat:not(#_) *{color:var(--bfl-ink) !important} html body .mobile-cat-btn:not(#_),html body .mobile-cat-services:not(#_){background:#FFFFFF !important;color:var(--bfl-ink) !important;border:1px solid var(--bfl-line) !important;box-shadow:none !important} html body .mobile-cat-btn:not(#_) *{color:var(--bfl-ink) !important} html body .service-item:not(#_),html body .service-tab:not(#_),html body .service-panel:not(#_),html body .service-panel-top:not(#_),html body .mega-menu:not(#_),html body .bfz-mega:not(#_),html body .visual-card:not(#_),html body .bf-story-card:not(#_){background:#FFFFFF !important;background-image:none !important;color:var(--bfl-ink) !important;border:1px solid var(--bfl-line) !important;box-shadow:none !important} html body .service-item:not(#_) *,html body .service-tab:not(#_) *,html body .service-panel:not(#_) *:not(.btn):not(button):not(.cta){color:var(--bfl-ink) !important} html body .service-tab.active:not(#_),html body #services .service-tab.active:not(#_){background:var(--bfl-soft) !important;border-color:var(--bfl-blue) !important} html body .service-tab:not(#_)::before,html body #services .service-tab:not(#_)::before{color:var(--bfl-blue) !important} html body #bfzNav:not(#_),html body nav.bfz-nav:not(#_){background:#FFFFFF !important;border:1px solid var(--bfl-line) !important;box-shadow:none !important} html body .bfz-nav:not(#_)>a,html body .bfz-drop-btn:not(#_){color:var(--bfl-ink) !important;background:#FFFFFF !important;border:0 !important;border-bottom:1px solid var(--bfl-line) !important;font-size:13px !important} html body .bfz-nav:not(#_)>a.on{color:var(--bfl-blue) !important} html body .bfz-burger:not(#_),html body .mobile-menu-btn:not(#_){background:transparent !important;border:1px solid var(--bfl-line) !important;color:var(--bfl-ink) !important} html body .bfz-burger:not(#_) i,html body .bfz-burger:not(#_) i::before,html body .bfz-burger:not(#_) i::after{background:var(--bfl-ink) !important} html body .promo-banner:not(#_),html body .bf-banner-slide:not(#_){background-image:none !important} html body .login-btn:not(#_),html body .account-btn:not(#_),html body .signup-btn:not(#_){background:var(--bfl-blue) !important;color:#FFFFFF !important} html body .kicker:not(#_){color:var(--bfl-muted) !important} html body h1:not(#_){font-size:22px !important;line-height:1.25 !important} html body h2:not(#_){font-size:18px !important} html body p:not(#_),html body li:not(#_){font-size:13px !important} } /* MOBILE 2 - index.php also has `html body #services .service-tab h3` (id-level) phone rules; double :not(#_) out-ranks them. Plus: no text glow on phones. */ @media (max-width:900px){ html body .service-tab:not(#_):not(#_) *,html body #services .service-tab:not(#_):not(#_) h3,html body .service-item:not(#_):not(#_) *,html body .mobile-cat-btn:not(#_):not(#_) *,html body .service-panel:not(#_):not(#_) h3{color:var(--bfl-ink) !important} html body .service-tab.active:not(#_):not(#_) *,html body #services .service-tab.active:not(#_):not(#_) h3{color:var(--bfl-blue) !important} html body *:not(#_):not(#_){text-shadow:none !important} } /* MOBILE 3 - index.php styles the phone nav as a right-hand slide-in drawer (nav{transform/right/width}); the shared header's panel inherits that and half of it sits off-screen. Pin it full-width under the header. */ @media (max-width:900px){ html body nav.bfz-nav:not(#_):not(#_){position:absolute !important;top:56px !important;left:0 !important;right:0 !important;width:100% !important;max-width:none !important;height:auto !important;max-height:calc(100vh - 56px) !important;overflow:auto !important;transform:none !important;translate:none !important;margin:0 !important;padding:6px 10px !important;flex-direction:column !important;align-items:stretch !important} html body nav.bfz-nav:not(#_):not(#_)>a,html body nav.bfz-nav:not(#_):not(#_) .bfz-drop-btn{display:block !important;width:100% !important;min-height:40px !important;padding:11px 8px !important} } /* ============================================================ HOME ACCORDION (8 Sep 2026) - "What Do You Want To Do?" becomes compact rows with line icons that slide open (bfzHomeAccordion in bfz-header.php). ============================================================ */ html body #services.bfz-acc .service-tabs:not(#_):not(#_){display:block !important;max-width:920px !important;margin:0 auto !important;border:1px solid var(--bfl-line) !important;border-bottom:0 !important;gap:0 !important} html body #services.bfz-acc .service-tab:not(#_):not(#_){display:grid !important;grid-template-columns:20px auto minmax(0,1fr) 16px !important;align-items:center !important;column-gap:12px !important;padding:11px 14px !important;margin:0 !important;border:0 !important;border-bottom:1px solid var(--bfl-line) !important;border-radius:0 !important;background:#FFFFFF !important;box-shadow:none !important;min-height:0 !important;cursor:pointer !important;text-align:left !important} html body #services.bfz-acc .service-tab:not(#_):not(#_):hover,html body #services.bfz-acc .service-tab.active:not(#_):not(#_){background:var(--bfl-soft) !important} html body #services.bfz-acc .service-tab:not(#_):not(#_)::before,html body #services.bfz-acc .service-tab:not(#_):not(#_)::after{display:none !important;content:none !important} html body #services.bfz-acc .service-tab:not(#_):not(#_) h3{font-size:14px !important;font-weight:500 !important;margin:0 !important;color:var(--bfl-ink) !important;letter-spacing:0 !important;text-transform:none !important} html body #services.bfz-acc .service-tab:not(#_):not(#_) p{font-size:12px !important;margin:0 !important;color:var(--bfl-muted) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body #services.bfz-acc .service-tab:not(#_):not(#_) .bfz-ico{width:20px;height:20px;color:var(--bfl-blue) !important} html body #services.bfz-acc .service-tab:not(#_):not(#_) .bfz-chev{width:16px;height:16px;color:var(--bfl-muted) !important;transition:transform .3s cubic-bezier(.4,0,.2,1) !important} html body #services.bfz-acc .service-tab.active:not(#_):not(#_) .bfz-chev{transform:rotate(180deg) !important} html body #services.bfz-acc .service-panel:not(#_):not(#_){display:block !important;overflow:hidden !important;max-height:none !important;height:0;transition:height .32s cubic-bezier(.4,0,.2,1) !important;margin:0 !important;padding:0 !important;border:0 !important;border-bottom:1px solid var(--bfl-line) !important;border-radius:0 !important;box-shadow:none !important;background:#FFFFFF !important;width:auto !important;max-width:none !important;opacity:1 !important;visibility:visible !important;transform:none !important} html body #services.bfz-acc .service-panel:not(.active):not(#_):not(#_){border-bottom:0 !important} html body #services.bfz-acc .service-panel-top:not(#_):not(#_),html body #services.bfz-acc .service-panels-wrap:not(#_):not(#_){display:none !important} html body #services.bfz-acc .service-grid:not(#_):not(#_){display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important;padding:6px 8px 10px !important;margin:0 !important} html body #services.bfz-acc .service-item:not(#_):not(#_){display:grid !important;grid-template-columns:18px minmax(0,1fr) !important;column-gap:10px !important;align-items:start !important;padding:9px 10px !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;min-height:0 !important;text-decoration:none !important} html body #services.bfz-acc .service-item:not(#_):not(#_):hover{background:var(--bfl-soft) !important} html body #services.bfz-acc .service-item:not(#_):not(#_)::before,html body #services.bfz-acc .service-item:not(#_):not(#_)::after{display:none !important;content:none !important} html body #services.bfz-acc .service-item:not(#_):not(#_) .bfz-ico{width:18px;height:18px;grid-row:1/3;margin-top:1px;color:var(--bfl-blue) !important} html body #services.bfz-acc .service-item:not(#_):not(#_) strong{display:block;font-size:13px !important;font-weight:500 !important;color:var(--bfl-ink) !important;margin:0 !important;line-height:1.3 !important} html body #services.bfz-acc .service-item:not(#_):not(#_) span{display:block;font-size:11.5px !important;color:var(--bfl-muted) !important;margin:0 !important;line-height:1.35 !important} @media (max-width:900px){ html body #services.bfz-acc .service-grid:not(#_):not(#_){grid-template-columns:1fr !important} html body #services.bfz-acc .service-tab:not(#_):not(#_){grid-template-columns:20px minmax(0,1fr) 16px !important} html body #services.bfz-acc .service-tab:not(#_):not(#_) p{display:none !important} } /* MOBILE 4 (8 Sep 2026) - phone menu: pages + Login/Sign Up only (no service groups), square line-icon burger; LLC package tabs readable */ html body .bfz-m-auth{display:none} @media (max-width:900px){ html body nav.bfz-nav:not(#_):not(#_) .bfz-drop{display:none !important} html body nav.bfz-nav:not(#_):not(#_)>a.bfz-m-auth{display:block !important;margin-top:0 !important} html body nav.bfz-nav:not(#_):not(#_)>a.bfz-m-signup{color:var(--bfl-blue) !important} html body .bfz-cta:not(#_):not(#_) .bfz-login,html body .bfz-cta:not(#_):not(#_) .bfz-signup{display:none !important} html body .bfz-burger:not(#_):not(#_){width:36px !important;height:36px !important;padding:0 !important;margin:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border:1px solid var(--bfl-line) !important;background:#FFFFFF !important;color:var(--bfl-ink) !important;border-radius:0 !important;box-shadow:none !important} html body .bfz-burger:not(#_):not(#_) svg{width:20px !important;height:20px !important;stroke:currentColor !important;fill:none !important} html body .bfz-burger:not(#_):not(#_) i{display:none !important} html body .mobile-package-tab:not(#_):not(#_){background:#FFFFFF !important;color:var(--bfl-ink) !important;border:1px solid var(--bfl-line) !important;font-weight:500 !important;font-size:13px !important;box-shadow:none !important;border-radius:0 !important} html body .mobile-package-tab.active:not(#_):not(#_){background:var(--bfl-blue) !important;color:#FFFFFF !important;border-color:var(--bfl-blue) !important} html body .mobile-package-price-card:not(#_):not(#_){background:#FFFFFF !important;border:1px solid var(--bfl-line) !important;border-radius:0 !important;box-shadow:none !important} html body .mobile-package-price-card:not(#_):not(#_) *{color:var(--bfl-ink) !important} html body .mobile-package-price-card.active:not(#_):not(#_){border-color:var(--bfl-blue) !important;background:var(--bfl-soft) !important} } /* invisible text in boxes (all widths): step numbers on every service page, "coming soon" button on products */ html body .soon-btn:not(#_):not(#_){color:var(--bfl-muted) !important;background:var(--bfl-soft) !important;border:1px solid var(--bfl-line) !important} html body .step-dot.active:not(#_):not(#_),html body .dot.active:not(#_):not(#_){color:#FFFFFF !important;background:var(--bfl-blue) !important;border-color:var(--bfl-blue) !important} /* HOME ACCORDION 2 - the page already draws one generic building icon in every service row; hide it (bfz-home.js adds a per-service line icon) and pin icon / title / text to their grid cells */ html body #services.bfz-acc .service-item:not(#_):not(#_)>svg:not(.bfz-ico),html body #services.bfz-acc .service-item:not(#_):not(#_)>i,html body #services.bfz-acc .service-item:not(#_):not(#_)>img{display:none !important} html body #services.bfz-acc .service-item:not(#_):not(#_)>.bfz-ico{grid-column:1 !important;grid-row:1 / 3 !important;width:18px !important;height:18px !important;margin:1px 0 0 !important} html body #services.bfz-acc .service-item:not(#_):not(#_)>strong{grid-column:2 !important;grid-row:1 !important} html body #services.bfz-acc .service-item:not(#_):not(#_)>span{grid-column:2 !important;grid-row:2 !important;width:auto !important} html body #services.bfz-acc .service-item:not(#_):not(#_){grid-template-rows:auto auto !important} html body #services.bfz-acc .service-tab:not(#_):not(#_)>.bfz-ico{width:20px !important;height:20px !important;margin:0 !important} /* MOBILE 5 - burger icon lines were inheriting a white stroke from the old dark header rules */ html body .bfz-burger:not(#_):not(#_) svg,html body .bfz-burger:not(#_):not(#_) svg line{stroke:var(--bfl-ink) !important;color:var(--bfl-ink) !important;fill:none !important;opacity:1 !important} /* ROUND CHAT BUTTON + CHAT COLOURS (8 Sep 2026, owner) - WhatsApp-style round blue launcher, white bubble text on blue */ html body .chat-launcher:not(#_):not(#_){width:56px !important;height:56px !important;padding:0 !important;gap:0 !important;border-radius:50% !important;background:var(--bfl-blue) !important;border:0 !important;box-shadow:0 6px 18px rgba(42,111,232,.35) !important;display:flex !important;align-items:center !important;justify-content:center !important;right:20px !important;bottom:20px !important;transform:none !important;backdrop-filter:none !important;overflow:visible !important} html body .chat-launcher:not(#_):not(#_) .chat-text{display:none !important} html body .chat-launcher:not(#_):not(#_) .chat-logo{width:56px !important;height:56px !important;background:transparent !important;border:0 !important;border-radius:50% !important;font-size:0 !important;color:transparent !important;position:relative !important;margin:0 !important;box-shadow:none !important} html body .chat-launcher:not(#_):not(#_) .chat-logo::before{content:"" !important;position:absolute !important;inset:0 !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center/26px 26px no-repeat !important;display:block !important} html body .chat-launcher:not(#_):not(#_) .chat-count{font-size:11px !important;color:#FFFFFF !important;width:20px !important;height:20px !important;top:-2px !important;right:-2px !important;background:#DC2626 !important;border:2px solid #FFFFFF !important;border-radius:50% !important;line-height:1 !important;align-items:center !important;justify-content:center !important} html body .chat-messages .msg.customer:not(#_):not(#_),html body .chat-messages .msg.customer:not(#_):not(#_) *{background:var(--bfl-blue) !important;color:#FFFFFF !important} html body .chat-messages .msg.admin:not(#_):not(#_){background:#FFFFFF !important;color:var(--bfl-ink) !important;border:1px solid var(--bfl-line) !important} html body .chat-messages .msg.admin:not(#_):not(#_) *{color:var(--bfl-ink) !important} @media (max-width:900px){ html body .bfz-head .bfz-cta:not(#_):not(#_){margin-left:auto !important} html body .bfz-head-in:not(#_):not(#_){display:flex !important;justify-content:space-between !important;align-items:center !important} html body .chat-launcher:not(#_):not(#_){width:50px !important;height:50px !important;right:14px !important;bottom:14px !important} html body .chat-launcher:not(#_):not(#_) .chat-logo{width:50px !important;height:50px !important} } /* MOBILE 6 (owner) - on phones hide the promo banner ("Your Business Journey Starts Here") and the "One Platform. Endless Possibilities." block */ @media (max-width:900px){ html body .promo-banner:not(#_):not(#_),html body section:has(> .promo-banner):not(#_):not(#_),html body #aboutBizFolderz:not(#_):not(#_){display:none !important} } /* unread badge: the page shows "0" until its first chat-fetch; only show it once the JS has set display:flex (unread > 0) */ html body .chat-launcher:not(#_):not(#_) .chat-count:not([style*="flex"]){display:none !important} /* LOGO (8 Sep 2026) - owner's BF mark (bf-logo.png, transparent) beside the wordmark; favicons in bfz-header.php */ html body .bfz-brand:not(#_):not(#_){display:grid !important;grid-template-columns:auto auto !important;grid-template-rows:auto auto !important;align-items:center !important;column-gap:9px !important;row-gap:0 !important;text-decoration:none !important} html body .bfz-brand:not(#_):not(#_) .bfz-logo-img{grid-column:1 !important;grid-row:1 / 3 !important;height:34px !important;width:auto !important;display:block !important;margin:0 !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;filter:none !important} html body .bfz-brand:not(#_):not(#_) .bfz-logo{grid-column:2 !important;grid-row:1 !important;line-height:1.1 !important} html body .bfz-brand:not(#_):not(#_) .bfz-slogan{grid-column:2 !important;grid-row:2 !important;line-height:1.1 !important} @media (max-width:900px){ html body .bfz-brand:not(#_):not(#_) .bfz-logo-img{height:28px !important} } /* LOGO 2 (owner) - smaller mark; wordmark colours taken from the mark itself (blue "Biz", green "Folderz") so they match */ html body .bfz-brand:not(#_):not(#_) .bfz-logo-img{height:24px !important} html body .bfz-brand:not(#_):not(#_) .bfz-logo{color:#2A6FE8 !important;font-weight:500 !important;font-size:17px !important;letter-spacing:-.2px !important} html body .bfz-brand:not(#_):not(#_) .bfz-logo span{color:#46BD2E !important;font-weight:500 !important} html body .bfz-brand:not(#_):not(#_) .bfz-slogan{color:var(--bfl-muted) !important;font-size:10.5px !important} @media (max-width:900px){ html body .bfz-brand:not(#_):not(#_) .bfz-logo-img{height:22px !important} html body .bfz-brand:not(#_):not(#_) .bfz-logo{font-size:15px !important} } /* ============================================================ CHAT WIDGET 2 (8 Sep 2026) - WhatsApp-style support chat on the site (behaviour in bfz-home.js > bfzChat). Flat, DM Sans, blue/white. ============================================================ */ html body .chat-box:not(#_):not(#_){width:372px !important;height:580px !important;max-height:calc(100vh - 110px) !important;border-radius:0 !important;border:1px solid var(--bfl-line) !important;box-shadow:0 12px 40px rgba(10,31,51,.18) !important;flex-direction:column !important;overflow:hidden !important;bottom:88px !important;right:20px !important;background:#FFFFFF !important;padding:0 !important} html body .chat-head:not(#_):not(#_){background:var(--bfl-blue) !important;color:#FFFFFF !important;padding:10px 12px !important;display:flex !important;align-items:center !important;gap:10px !important;border:0 !important;flex:none !important} html body .chat-head:not(#_):not(#_)::before{content:"";width:40px;height:36px;border-radius:9px;background:#FFFFFF url("/bf-logo.png?v=4") center/26px auto no-repeat;flex:none;display:block} html body .chat-head:not(#_):not(#_)>div{flex:1 1 auto;min-width:0} html body .chat-head:not(#_):not(#_) strong{display:block;font-size:14px !important;font-weight:500 !important;color:#FFFFFF !important;line-height:1.2 !important} html body .chat-head:not(#_):not(#_) small{display:block;font-size:11px !important;color:rgba(255,255,255,.88) !important;line-height:1.3 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body .chat-head:not(#_):not(#_) small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#46BD2E;margin-right:5px;vertical-align:middle} html body .chat-close:not(#_):not(#_){background:transparent !important;border:0 !important;color:#FFFFFF !important;width:30px !important;height:30px !important;font-size:22px !important;line-height:1 !important;border-radius:0 !important;flex:none !important;cursor:pointer;opacity:.9} html body .chat-messages:not(#_):not(#_){background:#EEF2F6 !important;padding:12px !important;display:flex !important;flex-direction:column !important;gap:4px !important;flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important} html body .chat-messages:not(#_):not(#_) .bfz-day{align-self:center;font-size:11px;color:var(--bfl-muted);background:#FFFFFF;border:1px solid var(--bfl-line);padding:2px 8px;margin:4px 0 6px} html body .chat-messages:not(#_):not(#_) .msg{max-width:82% !important;padding:7px 10px 4px !important;font-size:13.5px !important;line-height:1.4 !important;border-radius:8px !important;margin:0 !important;position:relative;overflow-wrap:anywhere;white-space:pre-wrap;box-shadow:none !important} html body .chat-messages:not(#_):not(#_) .msg.customer{background:var(--bfl-blue) !important;color:#FFFFFF !important;align-self:flex-end;margin-left:auto !important;border-bottom-right-radius:2px !important;border:0 !important} html body .chat-messages:not(#_):not(#_) .msg.customer *{color:#FFFFFF !important} html body .chat-messages:not(#_):not(#_) .msg.admin{background:#FFFFFF !important;color:var(--bfl-ink) !important;border:0 !important;align-self:flex-start;margin-right:auto !important;border-bottom-left-radius:2px !important;box-shadow:0 1px 1px rgba(0,0,0,.06) !important} html body .chat-messages:not(#_):not(#_) .msg.admin *{color:var(--bfl-ink) !important} html body .chat-messages:not(#_):not(#_) .bfz-time{display:block;font-size:10px !important;opacity:.7;text-align:right;margin-top:2px;line-height:1.2 !important} html body .chat-messages:not(#_):not(#_) .msg.bfz-pending{opacity:.65} html body .chat-form:not(#_):not(#_){padding:8px 10px 6px !important;border-top:1px solid var(--bfl-line) !important;background:#FFFFFF !important;display:grid !important;grid-template-columns:minmax(0,1fr) 40px !important;grid-template-areas:"err err" "guest guest" "input send" "status status" !important;column-gap:8px !important;align-items:end !important;flex:none !important} html body .chat-form:not(#_):not(#_) .chat-error{grid-area:err;margin:0 0 6px !important;border-radius:0 !important;font-weight:400 !important;font-size:12px !important;padding:7px 9px !important} html body .chat-form:not(#_):not(#_) .guest-fields{grid-area:guest;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 6px !important} html body .chat-form:not(#_):not(#_) .guest-fields[style*="none"]{display:none !important} html body .chat-form:not(#_):not(#_) .guest-fields input{margin:0 !important;font-size:12.5px !important;padding:8px 9px !important;border:1px solid var(--bfl-line) !important;border-radius:0 !important;width:100% !important;height:auto !important;background:#FFFFFF !important} html body .chat-form:not(#_):not(#_) textarea{grid-area:input;height:38px !important;min-height:38px !important;max-height:110px !important;resize:none !important;padding:9px 12px !important;font-size:13.5px !important;border:1px solid var(--bfl-line) !important;border-radius:20px !important;margin:0 !important;line-height:1.35 !important;background:#F6F8FA !important;width:100% !important;overflow-y:auto !important} html body .chat-form:not(#_):not(#_) textarea:focus{border-color:var(--bfl-blue) !important;background:#FFFFFF !important;outline:none !important} html body .chat-form:not(#_):not(#_) .chat-send-btn{grid-area:send;align-self:end !important;justify-self:center !important;display:inline-block !important;width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;max-width:38px !important;max-height:38px !important;flex:0 0 38px !important;padding:0 !important;margin:0 !important;border-radius:50% !important;background:var(--bfl-blue) !important;color:transparent !important;font-size:0 !important;line-height:0 !important;border:0 !important;position:relative;cursor:pointer;box-shadow:none !important;transition:background .15s ease,transform .12s ease !important} html body .chat-form:not(#_):not(#_) .chat-send-btn:hover:not(:disabled){background:#1f5fd0 !important} html body .chat-form:not(#_):not(#_) .chat-send-btn:active:not(:disabled){transform:scale(.94) !important} html body .chat-form:not(#_):not(#_) .chat-send-btn::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/18px 18px no-repeat} html body .chat-form:not(#_):not(#_) .chat-send-btn:disabled{opacity:.5} html body .chat-form:not(#_):not(#_) .chat-status{grid-area:status;font-size:10.5px !important;color:var(--bfl-muted) !important;text-align:right !important;margin:3px 2px 0 !important;font-weight:400 !important;min-height:0 !important;line-height:1.2 !important} html body .chat-form:not(#_):not(#_) .chat-status:empty{display:none !important} @media (max-width:900px){ html body .chat-box:not(#_):not(#_){width:calc(100vw - 16px) !important;right:8px !important;bottom:72px !important;height:calc(100vh - 88px) !important;max-height:none !important} html body .chat-messages:not(#_):not(#_) .msg{max-width:86% !important} } /* BRAND COLOURS (owner, 8 Sep 2026) - every blue and green on the site now uses the logo's own colours */ :root, body{--bfl-blue:#2A6FE8 !important;--bfl-green:#46BD2E !important;--bfl-soft:#EEF4FE !important} html body .bfz-signup:not(#_):not(#_),html body .btn-primary:not(#_):not(#_),html body .primary-btn:not(#_):not(#_){background:#2A6FE8 !important;border-color:#2A6FE8 !important;color:#FFFFFF !important} html body .bfz-login:not(#_):not(#_){border-color:var(--bfl-line) !important;color:var(--bfl-ink) !important;background:#FFFFFF !important} /* LOGO 3 (owner) - mark sized to the full two-line wordmark block */ html body .bfz-brand:not(#_):not(#_) .bfz-logo-img{height:30px !important;align-self:center !important} html body .bfz-brand:not(#_):not(#_){column-gap:10px !important} @media (max-width:900px){ html body .bfz-brand:not(#_):not(#_) .bfz-logo-img{height:26px !important} } /* ==== HERO: REAL FOOTAGE BEHIND, DRAWN FILM PANEL IN FRONT (8 Sep 2026) ==== Owner wants both. The Mixkit clip fills the whole hero; a white veil keeps the headline readable on the left; the drawn Start/Grow/Manage film keeps its white panel on the right and sits on top of the footage. ========================================================================= */ html body .hero.bfz-hero-has-bg:not(#_):not(#_){ position:relative !important;overflow:hidden !important; background:#FFFFFF !important;background-image:none !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,470px) !important; gap:40px !important;align-items:center !important; min-height:560px !important;height:auto !important;padding:56px 7% !important} html body .hero.bfz-hero-has-bg .bfz-hero-bg:not(#_){ position:absolute !important;inset:0 !important;z-index:0 !important; width:100% !important;height:100% !important; object-fit:cover !important;object-position:60% center !important; border:0 !important;border-radius:0 !important;margin:0 !important;padding:0 !important; pointer-events:none !important} html body .hero.bfz-hero-has-bg .bfz-hero-veil:not(#_){ position:absolute !important;inset:0 !important;z-index:1 !important; display:block !important;pointer-events:none !important; background:linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.82) 32%, rgba(255,255,255,.55) 52%, rgba(255,255,255,.40) 100%) !important} html body .hero.bfz-hero-has-bg > div:not(.bf-hero-3d):not(.hero-visual):not(#_){ position:relative !important;z-index:2 !important;max-width:660px !important} html body .hero.bfz-hero-has-bg .bf-hero-3d:not(#_){display:none !important} /* the drawn film, as a card on top of the footage */ html body .hero.bfz-hero-has-bg .hero-visual:not(#_):not(#_){ display:block !important;position:relative !important;z-index:2 !important; padding:0 !important;margin:0 !important; background:#FFFFFF !important;border:1px solid #E3E8EF !important; border-radius:0 !important;box-shadow:0 18px 44px rgba(10,31,51,.16) !important; backdrop-filter:none !important;overflow:hidden !important; width:100% !important;max-width:470px !important;justify-self:end !important; aspect-ratio:16/9} html body .hero.bfz-hero-has-bg .hero-visual .bfz-hero-vid:not(#_), html body .hero.bfz-hero-has-bg .hero-visual .bfz-hero-still:not(#_){ display:block !important;width:100% !important;height:100% !important; object-fit:cover !important;border:0 !important;background:#FFFFFF !important; border-radius:0 !important;position:static !important} @media (max-width:900px){ /* PHONE: the footage is NOT a cropped backdrop here. object-fit:cover on a tall hero was hiding more than half the frame, so on phones the clip sits in the flow at its own 16:9 shape - the whole picture, nothing cut off - and the copy and the film panel stack underneath it on white. */ html body .hero.bfz-hero-has-bg:not(#_):not(#_){ display:block !important;grid-template-columns:1fr !important; min-height:0 !important;height:auto !important;padding:0 0 26px !important; overflow:visible !important} html body .hero.bfz-hero-has-bg .bfz-hero-bg:not(#_){ position:relative !important;inset:auto !important; width:100% !important;height:auto !important;aspect-ratio:16/9 !important; object-fit:cover !important;object-position:center center !important; display:block !important;margin:0 0 20px !important} html body .hero.bfz-hero-has-bg .bfz-hero-veil:not(#_){display:none !important} /* HOMEPAGE ONLY (it owns .hero-visual; the About hero has .hero-card and keeps its own copy). The headline sits INSIDE the clip: the copy block is laid over the video area, everything in it except the h1 is hidden, the footage is dimmed behind it and the type is white with a shadow so it reads. */ html body .hero.bfz-hero-has-bg:has(.hero-visual):not(#_):not(#_){ position:relative !important} html body .hero.bfz-hero-has-bg:has(.hero-visual) > div:not(.bf-hero-3d):not(.hero-visual):not(#_){ position:absolute !important;top:0 !important;left:0 !important;right:0 !important; width:auto !important;aspect-ratio:16/9 !important;height:auto !important; margin:0 !important;padding:0 22px !important;z-index:3 !important; display:flex !important;flex-direction:column !important;justify-content:center !important; clip-path:none !important;overflow:visible !important;white-space:normal !important; pointer-events:none !important} /* only the headline shows over the footage */ html body .hero.bfz-hero-has-bg:has(.hero-visual) > div:not(.bf-hero-3d):not(.hero-visual) > *:not(h1):not(#_){ display:none !important} /* the headline keeps the site's own blue-to-green gradient - NOT white. It is legible because the clip is washed toward white behind it, not darkened. */ /* the h1 was shrink-to-fit at 159px inside a 331px box, which is why it broke into six short lines. Stretch it and size it for three. */ html body .hero.bfz-hero-has-bg:has(.hero-visual) h1:not(#_):not(#_){ display:block !important;width:100% !important;max-width:100% !important; align-self:stretch !important;margin:0 !important;text-wrap:balance} /* PHONE ONLY: white type on the un-faded clip. The site paints this headline as a gradient with a transparent fill, so BOTH color and -webkit-text-fill-color must be set or it stays gradient. Now that the glyphs are solid white a text-shadow actually renders, which it could not do through a transparent fill - that shadow is what carries the contrast instead of a wash. */ html body .hero.bfz-hero-has-bg:has(.hero-visual) h1:not(#_):not(#_), html body .hero.bfz-hero-has-bg:has(.hero-visual) h1 span:not(#_):not(#_){ font-size:27px !important;line-height:1.2 !important;letter-spacing:-.4px !important; font-weight:800 !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important; background:none !important;background-image:none !important; text-shadow:none !important} /* the last four words carry the logo green */ html body .hero.bfz-hero-has-bg:has(.hero-visual) h1 .bfz-hl-end:not(#_):not(#_){ color:#46BD2E !important;-webkit-text-fill-color:#46BD2E !important; background:none !important;background-image:none !important; text-shadow:none !important} /* the headline rises in once, on load */ @keyframes bfzHeroLineIn{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}} html body .hero.bfz-hero-has-bg:has(.hero-visual) h1:not(#_):not(#_){ animation:bfzHeroLineIn .85s cubic-bezier(.22,.8,.25,1) .12s both !important} @media (prefers-reduced-motion:reduce){ html body .hero.bfz-hero-has-bg:has(.hero-visual) h1:not(#_):not(#_){ animation:none !important;opacity:1 !important;transform:none !important}} /* dim the footage just behind the headline */ html body .hero.bfz-hero-has-bg:has(.hero-visual) .bfz-hero-veil:not(#_):not(#_){ display:block !important;position:absolute !important; top:0 !important;left:0 !important;right:0 !important;bottom:auto !important; aspect-ratio:16/9 !important;height:auto !important;z-index:2 !important; background:linear-gradient(180deg, rgba(6,20,34,.26) 0%, rgba(6,20,34,.36) 55%, rgba(6,20,34,.42) 100%) !important} /* the About hero keeps its words on phones */ html body .hero.bfz-hero-has-bg:not(:has(.hero-visual)) > div:not(.bf-hero-3d):not(#_){ max-width:100% !important;margin:0 !important;padding:0 18px !important; width:auto !important;height:auto !important; clip-path:none !important;overflow:visible !important;white-space:normal !important} html body .hero.bfz-hero-has-bg .hero-visual:not(#_):not(#_){ max-width:100% !important;width:auto !important; justify-self:stretch !important;align-self:stretch !important; flex:0 0 auto !important;height:auto !important;margin:20px 18px 0 !important} } /* index.php attaches a pointermove handler that tilts .hero-visual in 3D and writes an inline transform. An !important declaration outranks an inline style, so this switches the tilt off without touching that script. The old conic-gradient orbit and dark inner panel behind it go too. */ html body .hero-visual:not(#_):not(#_){ transform:none !important;transition:none !important; perspective:none !important;transform-style:flat !important} html body .hero-visual::before, html body .hero-visual::after{ display:none !important;animation:none !important;content:none !important} /* ==================== ABOUT US PAGE (8 Sep 2026) ==================== Footage behind the hero, the mouse-tilt switched off, the banner image moved to the left with the detail beside it, and the full service list. ==================================================================== */ html body .hero.bfz-hero-has-bg .hero-card:not(#_):not(#_), html body .hero-card:not(#_):not(#_){ transform:none !important;transition:none !important; transform-style:flat !important;will-change:auto !important} html body .hero-card > *:not(#_){transform:none !important} html body .team-stage .team-visual:not(#_){transform:none !important} html body .about-flow-canvas:not(#_){display:none !important} /* image left, words right */ html body .bfz-about-split:not(#_){ display:grid !important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important; gap:38px !important;align-items:center !important;text-align:left !important; max-width:1240px !important;margin:0 auto 44px !important} html body .bfz-about-split .team-stage:not(#_){ margin:0 !important;padding:0 !important;max-width:none !important} html body .bfz-about-split .team-visual:not(#_){ margin:0 !important;max-width:none !important;aspect-ratio:4/3 !important} html body .bfz-about-copy:not(#_){text-align:left !important} html body .bfz-about-copy h2:not(#_){ font-size:30px !important;margin:0 0 14px !important;text-align:left !important} html body .bfz-about-copy p:not(#_){ font-size:15px !important;line-height:1.6 !important;margin:0 0 14px !important;text-align:left !important} html body .bfz-about-points:not(#_){ list-style:none !important;margin:18px 0 22px !important;padding:0 !important} html body .bfz-about-points li:not(#_){ position:relative !important;padding:9px 0 9px 22px !important; border-top:1px solid #E3E8EF !important;font-size:14px !important;line-height:1.5 !important} html body .bfz-about-points li:before{ content:"";position:absolute;left:0;top:17px;width:8px;height:8px;background:#2A6FE8} html body .bfz-about-points strong:not(#_){font-weight:600 !important} /* every service we offer */ html body .bfz-all-services:not(#_){text-align:left !important} html body .bfz-all-services h2:not(#_){text-align:center !important} html body .bfz-svc-lead:not(#_){ text-align:center !important;max-width:640px !important;margin:0 auto 30px !important} html body .bfz-svc-grid:not(#_){ display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:26px !important;max-width:1180px !important;margin:0 auto !important} html body .bfz-svc-col:not(#_){border-top:2px solid #2A6FE8 !important;padding-top:14px !important} html body .bfz-svc-col:nth-child(2):not(#_){border-top-color:#16A34A !important} html body .bfz-svc-col h3:not(#_){ font-size:18px !important;margin:0 0 4px !important;text-align:left !important} html body .bfz-svc-col > p:not(#_){ font-size:13px !important;margin:0 0 12px !important;text-align:left !important} html body .bfz-svc-col ul:not(#_){list-style:none !important;margin:0 !important;padding:0 !important} html body .bfz-svc-col li:not(#_){border-bottom:1px solid #E3E8EF !important} html body .bfz-svc-col li a:not(#_){ display:block !important;padding:9px 2px !important;font-size:14px !important; text-decoration:none !important;color:#0A1F33 !important} html body .bfz-svc-col li a:hover{color:#2A6FE8 !important;background:#F6F9FE !important} @media (max-width:900px){ html body .bfz-about-split:not(#_){grid-template-columns:1fr !important;gap:22px !important} html body .bfz-svc-grid:not(#_){grid-template-columns:1fr !important;gap:22px !important} } /* ==================== FOOTER GUTTERS (8 Sep 2026) ==================== The footer carried padding:32px 0 18px - no horizontal padding at all - so the left column sat hard against the window edge. Given the same 7% gutter the rest of the page uses, and a flat 18px on phones. ===================================================================== */ html body footer:not(#_):not(#_), html body .footer:not(#_):not(#_){ padding-left:7% !important;padding-right:7% !important; box-sizing:border-box !important} @media (max-width:900px){ html body footer:not(#_):not(#_), html body .footer:not(#_):not(#_){ padding-left:18px !important;padding-right:18px !important} } /* the logo green, sampled from bf-logo.png: rgb(70,189,46) = #46BD2E. NOTE the "Folderz" wordmark TEXT is a different, darker green (#16A34A) - they are not the same colour, so always sample the mark itself. */ /* ============ NO FLASH OF THE OLD DARK HERO (8 Sep 2026) ============ On refresh the old dark animated hero showed for a beat before flipping to the white one. Cause: every rule that hid it was written under .bfz-hero-has-bg, a class that only exists AFTER bfz-home.js runs, so the browser painted the page's own dark decoration first. These rules do not wait for the class - they apply on the first paint. ==================================================================== */ html body .bf-hero-3d:not(#_):not(#_){display:none !important} html body .hero:has(.hero-visual):not(#_):not(#_){ background:#FFFFFF !important;background-image:none !important} html body .hero-visual:not(#_):not(#_){ background:#FFFFFF !important;background-image:none !important; border-radius:0 !important;box-shadow:none !important} /* the dark story card that used to live inside the panel */ html body .hero-visual .visual-card:not(#_), html body .hero-visual .bf-story-card:not(#_){display:none !important} /* ==================== SERVICE IMAGERY (8 Sep 2026) ==================== Pictures generated in the owner's ChatGPT: the banner slideshow, the "One Platform" band, the popup, and the About gallery. ====================================================================== */ /* --- the banner band: its slide images were display:none, so the whole band rendered as an empty pale block --- */ html body .bfz-slideshow:not(#_){position:absolute !important;inset:0 !important; overflow:hidden !important;z-index:0 !important} html body .bfz-slide:not(#_):not(#_){ display:block !important;position:absolute !important;inset:0 !important; width:100% !important;height:100% !important;object-fit:cover !important; opacity:0 !important;transition:opacity .9s ease !important; border:0 !important;border-radius:0 !important} html body .bfz-slide.on:not(#_):not(#_){opacity:1 !important} /* --- a picture beside the "One Platform" copy --- */ html body .about-home.bfz-band-has-img:not(#_):not(#_){ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,320px) !important; align-items:center !important;gap:30px !important} html body .bfz-band-img:not(#_){ display:block !important;width:100% !important;max-width:320px !important; aspect-ratio:16/9 !important;object-fit:cover !important; border:1px solid #E3E8EF !important;border-radius:0 !important; justify-self:end !important} /* --- the popup's picture panel --- */ html body .popup-image:not(#_):not(#_){ padding:0 !important;overflow:hidden !important;background:#F4F7FB !important; min-height:0 !important} html body .bfz-popup-img:not(#_){ display:block !important;width:100% !important;height:100% !important; aspect-ratio:16/9 !important;object-fit:cover !important; border:0 !important;border-radius:0 !important} /* the popup heading was rgb(244,251,255) - near-white on a white panel, so it read as blank. The body copy was a pale grey for the same reason. */ html body .popup-content h2:not(#_):not(#_), html body .popup-box h2:not(#_):not(#_){color:#0A1F33 !important} html body .popup-content p:not(#_):not(#_), html body .popup-box p:not(#_):not(#_){color:#5B6B7C !important} /* --- the About page gallery --- */ html body .bfz-gallery h2:not(#_){text-align:center !important} html body .bfz-gallery-lead:not(#_){ text-align:center !important;max-width:620px !important;margin:0 auto 26px !important} html body .bfz-gallery-strip:not(#_){ display:grid !important;grid-auto-flow:column !important; grid-auto-columns:minmax(300px,1fr) !important;gap:20px !important; overflow-x:auto !important;scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch !important; padding:2px 2px 14px !important;max-width:1180px !important;margin:0 auto !important; scrollbar-width:thin !important} html body .bfz-shot:not(#_){ margin:0 !important;scroll-snap-align:center !important; border:1px solid #E3E8EF !important;background:#FFFFFF !important;min-width:0 !important} html body .bfz-shot img:not(#_){ display:block !important;width:100% !important;aspect-ratio:16/9 !important; object-fit:cover !important;border:0 !important;border-radius:0 !important} html body .bfz-shot figcaption:not(#_){ padding:12px 14px 14px !important;font-size:13.5px !important; line-height:1.5 !important;color:#5B6B7C !important;text-align:left !important} html body .bfz-shot figcaption strong:not(#_){ display:block !important;color:#0A1F33 !important;font-size:15px !important; font-weight:600 !important;margin-bottom:3px !important} html body .bfz-gallery-dots:not(#_){ display:flex !important;justify-content:center !important;gap:7px !important;margin-top:6px !important} html body .bfz-dot:not(#_){ width:8px !important;height:8px !important;padding:0 !important; border:0 !important;border-radius:0 !important;background:#D5DCE5 !important; cursor:pointer !important;transition:background .2s ease !important} html body .bfz-dot.on:not(#_){background:#2A6FE8 !important} @media (max-width:900px){ html body .about-home.bfz-band-has-img:not(#_):not(#_){ grid-template-columns:1fr !important} html body .bfz-band-img:not(#_){max-width:100% !important;justify-self:stretch !important} html body .bfz-gallery-strip:not(#_){ grid-auto-columns:minmax(260px,86%) !important;gap:14px !important; padding-left:18px !important;padding-right:18px !important} } /* ============ "COMING SOON" BUTTON WAS INVISIBLE (8 Sep 2026) ============ .soon-btn on products.php computed color:rgb(92,107,122) - which looked fine - but -webkit-text-fill-color was rgb(255,255,255), and the FILL WINS. White letters on a #EEF4FE panel, contrast ratio 1.10. A leftover from a gradient-text rule that was never reset when the button went pale. Whenever text looks invisible on this site, check the FILL, not the colour. ======================================================================== */ html body .soon-btn:not(#_):not(#_), html body a.soon-btn:not(#_):not(#_), html body .btn.soon-btn:not(#_):not(#_){ color:#41506180 !important;color:#415061 !important; -webkit-text-fill-color:#415061 !important; background:#EEF4FE !important;background-image:none !important; border:1px solid #D6E2F0 !important; opacity:1 !important;cursor:default !important} /* ------------------------------------------------------------------ FARISCRM STORE BADGES (8 Sep 2026) Sits at the foot of the FarisCRM card on the dark Biz Modules page. The card renders white here, so the label takes the same muted grey the card's own body copy uses, and the badges sit on the ground unplated. ------------------------------------------------------------------ */ html body .bfz-stores:not(#_){ display:block !important;margin-top:18px !important;padding-top:16px !important; border-top:1px solid rgba(15,23,42,.11) !important} html body .bfz-stores-label:not(#_){ display:block !important;margin:0 0 11px !important; font-size:11px !important;font-weight:850 !important;letter-spacing:1.5px !important; text-transform:uppercase !important;line-height:1.3 !important; color:#5C6B7A !important;-webkit-text-fill-color:#5C6B7A !important} html body .bfz-store-row:not(#_){ display:flex !important;flex-wrap:wrap !important; gap:10px !important;align-items:center !important} html body a.bfz-store:not(#_):not(#_){ display:inline-flex !important;align-items:center !important; margin:0 !important;padding:0 !important;border:0 !important; background:none !important;box-shadow:none !important; line-height:0 !important;text-decoration:none !important; transition:transform .2s ease,opacity .2s ease !important} html body a.bfz-store:hover:not(#_):not(#_){ transform:translateY(-2px) !important;opacity:.9 !important} html body a.bfz-store:focus-visible:not(#_){ outline:2px solid #58A6FF !important;outline-offset:3px !important;border-radius:9px !important} html body a.bfz-store img:not(#_){ display:block !important;height:44px !important;width:auto !important; max-width:100% !important;margin:0 !important;border:0 !important;border-radius:0 !important} @media (max-width:430px){ html body a.bfz-store img:not(#_){height:40px !important} } /* ------------------------------------------------------------------ PRODUCT SCREENSHOTS (8 Sep 2026) A framed dashboard capture under each live product's brand panel. width/height on the img reserve the space, so nothing jumps while the picture is still loading. ------------------------------------------------------------------ */ html body .bfz-shot-frame:not(#_){ display:block !important;margin:0 0 18px !important;padding:0 !important} html body .bfz-shot-frame a:not(#_):not(#_){ display:block !important;padding:0 !important;border:0 !important; background:none !important;box-shadow:none !important;line-height:0 !important; border-radius:14px !important;overflow:hidden !important; transition:transform .25s ease,box-shadow .25s ease !important} html body .bfz-shot-frame a:hover:not(#_):not(#_){ transform:translateY(-3px) !important; box-shadow:0 18px 34px rgba(15,23,42,.16) !important} html body .bfz-shot-frame a:focus-visible:not(#_){ outline:2px solid #2A6FE8 !important;outline-offset:3px !important} html body .bfz-shot-frame img:not(#_){ display:block !important;width:100% !important;height:auto !important; margin:0 !important;border:1px solid #DCE5F1 !important; border-radius:14px !important;background:#F4F7FC !important} html body .bfz-shot-frame figcaption:not(#_){ display:block !important;margin:9px 0 0 !important; font-size:11.5px !important;font-weight:700 !important; letter-spacing:.2px !important;line-height:1.4 !important; color:#5C6B7A !important;-webkit-text-fill-color:#5C6B7A !important} /* ------------------------------------------------------------------ "COMING SOON" STORE BADGE (8 Sep 2026) MAISHA ERP's iOS build is still in review. Its Apple badge is shown dimmed with a note under it, so the row keeps both stores in view without pretending the app can be downloaded. The item is a span, not an anchor, so there is nothing to click and nothing to tab to. ------------------------------------------------------------------ */ html body .bfz-store-row:not(#_){align-items:flex-start !important} html body .bfz-store-soon:not(#_):not(#_){ display:inline-flex !important;flex-direction:column !important; align-items:center !important;gap:4px !important; cursor:default !important;transform:none !important} html body .bfz-store-soon:hover:not(#_):not(#_){ transform:none !important;opacity:1 !important} html body .bfz-store-soon img:not(#_){ opacity:.42 !important;filter:grayscale(1) !important} html body .bfz-soon-note:not(#_){ display:block !important;line-height:1.3 !important; font-size:10px !important;font-weight:850 !important; letter-spacing:.9px !important;text-transform:uppercase !important; color:#7A8794 !important;-webkit-text-fill-color:#7A8794 !important} /* ------------------------------------------------------------------ PHONE COUNTRY PICKER (8 Sep 2026) The select is inserted before the existing input by bfz-home.js and both are wrapped in .bfz-phone-row. Sizing is done with flex rather than fixed widths because these 23 forms are styled 23 different ways - the input keeps whatever the page already gave it and simply shares the line. ------------------------------------------------------------------ */ html body .bfz-phone-row:not(#_){ display:flex !important;gap:8px !important; align-items:center !important;width:100% !important} html body .bfz-phone-row > select.bfz-phone-dial:not(#_){ flex:0 0 auto !important;width:auto !important; max-width:44% !important;margin:0 !important} html body .bfz-phone-row > input:not(#_){ flex:1 1 auto !important;min-width:0 !important;margin:0 !important} html body .bfz-phone-note:not(#_){ display:block !important;margin:6px 0 0 !important; font-size:12px !important;line-height:1.4 !important; color:#5C6B7A !important;-webkit-text-fill-color:#5C6B7A !important} html body .bfz-phone-note.ok:not(#_){ color:#177245 !important;-webkit-text-fill-color:#177245 !important} html body .bfz-phone-note.warn:not(#_){ color:#B23124 !important;-webkit-text-fill-color:#B23124 !important} @media (max-width:430px){ html body .bfz-phone-row:not(#_){flex-wrap:wrap !important} html body .bfz-phone-row > select.bfz-phone-dial:not(#_){max-width:100% !important;width:100% !important} html body .bfz-phone-row > input:not(#_){flex:1 1 100% !important} } /* Chat attachment button (8 Sep 2026, rebuilt) The chat form is a named CSS grid - "input send" - so a button with no grid-area was auto-placed into an implicit row of its own ABOVE the box, which is why it looked like a stray empty square. It now shares the "input" cell with the textarea and sits inside the rounded field, with the text padded clear of it. The icon also had its stroke forced to white by an inherited rule, so it was invisible on white - hence the empty box. */ html body .chat-form .bfz-clip:not(#_){ grid-area:input !important;justify-self:start !important;align-self:center !important; z-index:2 !important;position:relative !important; display:inline-flex !important;align-items:center !important;justify-content:center !important; width:30px !important;height:30px !important;flex:0 0 30px !important; margin:0 0 0 7px !important;padding:0 !important; border:0 !important;background:transparent !important;border-radius:50% !important; color:#8a97a6 !important;cursor:pointer !important;box-shadow:none !important; transition:background .15s ease,color .15s ease !important} html body .chat-form .bfz-clip:not(#_) svg{ width:17px !important;height:17px !important;display:block !important; stroke:currentColor !important;fill:none !important} html body .chat-form .bfz-clip:hover:not(#_){background:#eef4fe !important;color:#2a6fe8 !important} html body .chat-form .bfz-clip:active:not(#_){background:#dfeafd !important} html body .chat-form .bfz-clip:focus-visible:not(#_){outline:2px solid #2a6fe8 !important;outline-offset:1px !important} html body .chat-form .bfz-clip:disabled:not(#_){opacity:.45 !important;cursor:default !important;background:transparent !important} html body .chat-form textarea:not(#_){padding-left:44px !important} html body .bfz-clip-note:not(#_){font-size:11.5px !important;color:#7a8794 !important;padding:4px 8px !important;font-style:italic !important} /* Links inside the chat bubbles (9 Sep 2026). The assistant's job ends in handing over an order link, so it has to look like a link and survive being long - order links carry the customer's details as query parameters and are far wider than the bubble. */ html body #chatMessages a.bfz-chat-link:not(#_){ color:#0b63ce !important;text-decoration:underline !important; word-break:break-all !important;overflow-wrap:anywhere !important; font-weight:600 !important;cursor:pointer !important; } html body #chatMessages .msg a.bfz-chat-link:not(#_){color:#0b63ce !important} html body #chatMessages a.bfz-chat-link:hover:not(#_){color:#08479a !important} /* On our own outgoing (blue) bubbles the link has to be light, not navy. */ html body #chatMessages .msg.admin a.bfz-chat-link:not(#_), html body #chatMessages .msg.me a.bfz-chat-link:not(#_){color:inherit !important}