/* ========================================================================== MBBC — Business Website Stylesheet Reuses existing --ibh-* design tokens from style.css (Child Theme base) and layers admin-editable --mbbc-* tokens on top (set inline in by mbbc_inline_css_vars(), from MBBC Site Content → Design Colors). ========================================================================== */ :root{ --mbbc-primary: var(--ibh-brand-2, #0a4fa8); --mbbc-secondary: var(--ibh-brand-3, #083d8a); --mbbc-accent: var(--ibh-gold, #ffc107); --mbbc-bg: var(--ibh-bg-page, #f4f8fd); --mbbc-text: var(--ibh-text-dark, #1e293b); --mbbc-section-padding: 30px 0; --mbbc-section-padding-sm: 16px 0; --mbbc-card-padding: 16px; --mbbc-radius: var(--ibh-radius-lg, 16px); --mbbc-radius-sm: var(--ibh-radius-md, 10px); --mbbc-max-width: var(--ibh-max-width, 1200px); --mbbc-gap: 16px; --mbbc-gradient: linear-gradient(135deg, var(--mbbc-primary) 0%, var(--mbbc-primary) 55%, var(--mbbc-secondary) 100%); } .mbbc-section-inner{ max-width: var(--mbbc-max-width); margin: 2px auto; padding: 0 12px !important; } .mbbc-section{ padding: var(--mbbc-section-padding); } @media (max-width: 782px){ .mbbc-section{ padding: var(--mbbc-section-padding-sm); } } .mbbc-heading{ font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--mbbc-text); margin: 0 0 8px; position: relative; } /* ================================== Home page par Section Heading Label ke niche driver likhta hai blue aur gold color mein + Button Design Control ================================== */ .mbbc-heading::after{ content: "" !important; display: block !important; width: 280px !important; height: 3px !important; margin-top: 6px !important; border-radius: 10px !important; background: linear-gradient( 90deg, transparent 0%, rgba(10,79,168,.08) 10%, rgba(10,79,168,.35) 25%, var(--mbbc-accent) 50%, rgba(10,79,168,.35) 75%, rgba(10,79,168,.08) 90%, transparent 100% ) !important; box-shadow: 0 0 10px rgba(10,79,168,.18) !important; } .mbbc-contact .mbbc-heading::after, .mbbc-contact-cta .mbbc-heading::after, .mbbc-newsletter .mbbc-heading::after{ display: none !important; } .mbbc-heading-center{ text-align: center; } .mbbc-heading-center::after{ margin-left: auto; margin-right: auto; } .mbbc-heading-light{ color: #fff; } .mbbc-heading-light::after{ margin-left: 0; } .mbbc-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 10px 28px !important; border-radius: var(--ibh-radius-pill, 50px); font-weight: 700; font-size: 15px; text-decoration: none; transition: var(--ibh-transition, .18s ease); border: 2px solid transparent; cursor: pointer; } .mbbc-btn-primary{ background: var(--mbbc-primary); color: #fff; box-shadow: var(--ibh-shadow-md); } .mbbc-btn-primary:hover{ background: var(--mbbc-secondary); color: #fff; transform: translateY(-2px); } .mbbc-btn-accent{ background: var(--mbbc-accent); color: #1a1a1a; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .mbbc-btn-accent:hover{ filter: brightness(1.05); transform: translateY(-2px); color:#1a1a1a; } .mbbc-btn-white{ background: #fff; color: var(--mbbc-primary); border-color: #fff; } .mbbc-btn-white:hover{ background: transparent; color: #fff; } .mbbc-center-cta{ text-align: center; margin-top: 32px; } /* ========================================================================== 1. ANNOUNCEMENT RIBBON ========================================================================== */ .mbbc-ribbon{ background: var(--mbbc-secondary); color: #fff; font-size: 14px; } .mbbc-ribbon-inner{ max-width: var(--mbbc-max-width); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; } .mbbc-ribbon-track{ position: relative; flex: 1; min-height: 22px; overflow: hidden; } .mbbc-ribbon-slide{ display: none; align-items: center; gap: 10px; flex-wrap: wrap; } .mbbc-ribbon-slide.is-active{ display: flex; } .mbbc-ribbon-badge{ display: inline-flex; align-items: center; gap: 6px; background: var(--mbbc-accent); color: #1a1a1a; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: var(--ibh-radius-pill, 50px); flex-shrink: 0; } .mbbc-ribbon-badge svg{ width: 13px; height: 13px; } .mbbc-ribbon-link{ color: var(--mbbc-accent); font-weight: 700; text-decoration: underline; white-space: nowrap; } .mbbc-ribbon-link svg{ width: 13px; height: 13px; vertical-align: -2px; } .mbbc-ribbon-nav{ background: rgba(255,255,255,.15); border: none; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .mbbc-ribbon-nav svg{ width: 14px; height: 14px; transform: rotate(180deg); } .mbbc-ribbon-nav.mbbc-ribbon-next svg{ transform: none; } /* Header CTA button (injected into existing header.php actions bar) */ .mbbc-header-cta{ background: var(--mbbc-accent); color: #1a1a1a !important; font-weight: 700; padding: 9px 18px; border-radius: var(--ibh-radius-pill, 50px); font-size: 14px; text-decoration: none; white-space: nowrap; } .mbbc-header-cta:hover{ filter: brightness(1.05); } @media (max-width: 600px){ .mbbc-header-cta{ display: none; } } /* ========================================================================== 3. HERO + STATS ========================================================================== */ .mbbc-hero{ background: var(--mbbc-gradient, linear-gradient(135deg,#1e6fd9,#0a4fa8 60%,#083d8a)); padding: 56px 0 0; position: relative; overflow: visible; } .mbbc-hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--mbbc-gap); align-items: center; padding-bottom: 48px; } .mbbc-hero-greeting{ color: rgba(255,255,255,.85); font-size: 20px; margin: 0 0 4px; } .mbbc-hero-name{ color: #fff; font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; margin: 0 0 18px; line-height: 1.15; } .mbbc-hero-name .mbbc-hero-hoon{ color: var(--mbbc-accent); } .mbbc-hero-intro{ color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.8; max-width: 560px; margin: 0 0 26px; } .mbbc-hero-ctas{ display: flex; gap: 14px; flex-wrap: wrap; } .mbbc-hero-media{ text-align: center; } .mbbc-hero-img{ max-width: 100%; height: auto; border-radius: var(--mbbc-radius); } .mbbc-stats-bar{ background: #fff; border-radius: var(--mbbc-radius); box-shadow: var(--ibh-shadow-lg); display: grid; grid-template-columns: repeat(4, 1fr); transform: translateY(20%); overflow: hidden; } .mbbc-stat-card{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 12px; border-right: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); } .mbbc-stat-card:last-child{ border-right: none; } .mbbc-stat-icon{ width: 30px; height: 30px; color: var(--mbbc-primary); } .mbbc-stat-icon svg{ width: 100%; height: 100%; } .mbbc-stat-number{ font-size: 22px; font-weight: 800; color: var(--mbbc-text); } .mbbc-stat-label{ font-size: 12.5px; color: var(--ibh-text-muted, #64748b); } @media (max-width: 900px){ .mbbc-hero-grid{ grid-template-columns: 1fr; text-align: center; } .mbbc-hero-ctas{ justify-content: center; } .mbbc-hero-intro{ margin-left: auto; margin-right: auto; } } /* Extra top padding on the section right after the hero, to clear the overlapping stats bar (which sits at margin-bottom:-40px above). */ .mbbc-hero + .mbbc-section{ margin-top: 56px; } /* ========================================================================== 4. INTRO + VIDEO ========================================================================== */ .mbbc-intro-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .mbbc-intro-text{ color: var(--ibh-text-body, #334155); line-height: 1.85; font-size: 16px; } .mbbc-intro-text p{ margin: 0 0 14px; } .mbbc-intro-copy .mbbc-btn{ margin-top: 10px; } .mbbc-video-frame{ position: relative; padding-top: 56.25%; border-radius: var(--mbbc-radius); overflow: hidden; box-shadow: var(--ibh-shadow-lg); } .mbbc-video-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 900px){ .mbbc-intro-grid{ grid-template-columns: 1fr; } } /* ========================================================================== 5. SERVICES ========================================================================== */ .mbbc-services-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mbbc-gap); margin-top: 36px; } .mbbc-service-card{ background: var(--ibh-bg-card, #fff); border: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); border-radius: var(--mbbc-radius); padding: 30px 22px; text-align: center; text-decoration: none; color: inherit; transition: var(--ibh-transition, .18s ease); display: block; } a.mbbc-service-card:hover{ transform: translateY(-4px); box-shadow: var(--ibh-shadow-md); border-color: transparent; } .mbbc-service-icon{ width: 66px; height: 66px; margin: 0 auto 16px; color: var(--mbbc-primary); background: var(--mbbc-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .mbbc-service-icon svg{ width: 32px; height: 32px; } .mbbc-service-title{ font-size: 17px; font-weight: 700; color: var(--mbbc-text); margin: 0 0 8px; } .mbbc-service-desc{ font-size: 14px; color: var(--ibh-text-muted, #64748b); line-height: 1.7; margin: 0; } @media (max-width: 900px){ .mbbc-services-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px){ .mbbc-services-grid{ grid-template-columns: 1fr; } } /* ========================================================================== 6. UPCOMING SEMINAR ========================================================================== */ .mbbc-seminar-box{ background: var(--mbbc-bg); border: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); border-radius: var(--mbbc-radius); display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; } .mbbc-seminar-info{ padding: var(--mbbc-card-padding) 34px; } .mbbc-seminar-meta{ margin: 18px 0; display: flex; flex-direction: column; gap: 10px; } .mbbc-seminar-meta > div{ display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .mbbc-seminar-meta dt{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mbbc-primary); font-size: 14px; } .mbbc-seminar-meta dt svg{ width: 15px; height: 15px; } .mbbc-seminar-meta dd{ margin: 0; color: var(--mbbc-text); font-weight: 600; font-size: 14px; } .mbbc-seminar-desc{ color: var(--ibh-text-muted, #64748b); margin: 0 0 18px; } .mbbc-seminar-media{ min-height: 240px; } .mbbc-seminar-img{ width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px){ .mbbc-seminar-box{ grid-template-columns: 1fr; } .mbbc-seminar-media{ order: -1; min-height: 200px; } } /* ========================================================================== Carousels (shared: Articles / Testimonials) ========================================================================== */ .mbbc-carousel{ display: flex; align-items: center; gap: 10px; margin-top: 36px; } .mbbc-carousel-track{ display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 4px 4px 14px; flex: 1; } .mbbc-carousel-track::-webkit-scrollbar{ height: 6px; } .mbbc-carousel-track::-webkit-scrollbar-thumb{ background: #9EA4D1 !important; border-radius: 4px; } .mbbc-carousel-nav{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ibh-border, rgba(10,79,168,.12)); background: #fff; color: var(--mbbc-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--ibh-shadow-sm); } .mbbc-carousel-nav svg{ width: 18px; height: 18px; } @media (max-width: 640px){ .mbbc-carousel-nav{ display: none; } } /* 7. Articles */ .mbbc-article-card{ flex: 0 0 280px; scroll-snap-align: start; background: #E7EEFF; border: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); border-radius: var(--mbbc-radius); overflow: hidden; text-decoration: none; color: inherit; transition: var(--ibh-transition, .18s ease); display: block; } .mbbc-article-card:hover{ transform: translateY(-4px); box-shadow: var(--ibh-shadow-md); } .mbbc-article-thumb{ aspect-ratio: 16/10; overflow: hidden; background: var(--mbbc-bg); } .mbbc-article-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } .mbbc-article-thumb-fallback{ width: 100%; height: 100%; background: var(--mbbc-gradient); } .mbbc-article-body{ padding: 16px 18px 20px; } .mbbc-article-title{ font-size: 15.5px; font-weight: 700; color: var(--mbbc-text); margin: 0 0 8px; line-height: 1.4; } .mbbc-article-excerpt{ font-size: 13.5px; color: var(--ibh-text-muted, #64748b); line-height: 1.6; margin: 0 0 10px; } .mbbc-article-readmore{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--mbbc-primary); } .mbbc-article-readmore svg{ width: 13px; height: 13px; } /* 8. Testimonials */ .mbbc-testimonial-card{ flex: 0 0 320px; scroll-snap-align: start; background: #E7EEFF; border: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); border-radius: var(--mbbc-radius); padding: 26px 24px; } .mbbc-testimonial-text{ font-size: 14.5px; color: var(--ibh-text-body, #334155); line-height: 1.8; margin: 0 0 18px; min-height: 96px; } .mbbc-testimonial-person{ display: flex; align-items: center; gap: 12px; } .mbbc-testimonial-photo img{ width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; } .mbbc-testimonial-person strong{ display: block; font-size: 14px; color: var(--mbbc-text); } .mbbc-testimonial-person small{ font-size: 12px; color: var(--ibh-text-muted, #64748b); } /* ========================================================================== 9. AWARDS ========================================================================== */ .mbbc-awards-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mbbc-gap); margin-top: 36px; } .mbbc-award-card{ background: #fff; border: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); border-radius: var(--mbbc-radius); overflow: hidden; } .mbbc-award-img img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .mbbc-award-body{ padding: 18px 20px; } .mbbc-award-body h3{ font-size: 16px; margin: 0 0 8px; color: var(--mbbc-text); } .mbbc-award-body p{ font-size: 13.5px; color: var(--ibh-text-muted, #64748b); line-height: 1.7; margin: 0 0 8px; } .mbbc-award-meta{ font-size: 12.5px; font-weight: 700; color: var(--mbbc-primary) !important; } @media (max-width: 900px){ .mbbc-awards-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .mbbc-awards-grid{ grid-template-columns: 1fr; } } /* ========================================================================== 10. VISION, MISSION & TEAM ========================================================================== */ .mbbc-vmt-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mbbc-gap); margin-top: 32px; } .mbbc-vmt-card{ background: var(--mbbc-bg); border-radius: var(--mbbc-radius); padding: 26px 24px; text-align: center; } .mbbc-vmt-card h3{ color: var(--mbbc-primary); font-size: 17px; margin: 0 0 10px; } .mbbc-vmt-card p{ font-size: 14px; color: var(--ibh-text-body, #334155); line-height: 1.7; margin: 0; } @media (max-width: 760px){ .mbbc-vmt-grid{ grid-template-columns: 1fr; } } /* ========================================================================== 11. QUICK CONTACT ========================================================================== */ .mbbc-contact{ background: var(--mbbc-gradient); padding: 22px 6px !important; position: relative; overflow: hidden; } .mbbc-contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .mbbc-contact-details p, .mbbc-contact-cta p{ font-size: 16px; } .mbbc-contact-details p{ color: #fff; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .mbbc-contact-details p svg{ width: 18px; height: 18px; color: var(--mbbc-accent); flex-shrink: 0; } .mbbc-contact-details a{ color: #fff; text-decoration: none; } .mbbc-contact-cta p{ color: rgba(255,255,255,.85); margin: 0 0 18px; line-height: 1.7; } @media (max-width: 760px){ .mbbc-contact-grid{ grid-template-columns: 1fr; } } /* ========================================================================== 12. MEMBERSHIP ========================================================================== */ .mbbc-membership-box{ background: var(--mbbc-bg); border-radius: var(--mbbc-radius); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: var(--mbbc-card-padding) 34px; } .mbbc-membership-copy p{ color: var(--ibh-text-body, #334155); margin: 0 0 18px; line-height: 1.7; } .mbbc-membership-qr img{ width: 200px; height: 200px; object-fit: contain; border-radius: var(--mbbc-radius-sm); border: 1px solid var(--ibh-border, rgba(10,79,168,.12)); background: #fff; padding: 8px; } @media (max-width: 700px){ .mbbc-membership-box{ grid-template-columns: 1fr; text-align: center; } .mbbc-membership-qr{ justify-self: center; } } /* ========================================================================== 13. NEWSLETTER — inside Footer, full width. Works with both the built-in fallback form AND The Newsletter Plugin's [newsletter_form] shortcode. ========================================================================== */ .mbbc-newsletter-box{ text-align: center; } .mbbc-newsletter-box p{ color: rgba(255,255,255,.68); max-width: 480px; margin: 0 auto 18px; } .mbbc-newsletter-form{ width: 100% !important; max-width: none !important; margin: 0 !important; } .mbbc-newsletter-fallback, .mbbc-newsletter-form .tnp, .mbbc-newsletter-form form{ display: flex !important; flex-direction: column !important; gap: 9px !important; width: 100% !important; } .mbbc-newsletter-fallback input[type="email"], .mbbc-newsletter-form input.tnp-email, .mbbc-newsletter-form input[name="ne"]{ width: 100% !important; padding: 11px 16px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.25) !important; background: rgba(255,255,255,.10) !important; color: #fff !important; font-size: 14px !important; outline: none !important; box-sizing: border-box !important; margin: 0 !important; } .mbbc-newsletter-fallback input[type="email"]:focus, .mbbc-newsletter-form input.tnp-email:focus{ border-color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.16) !important; } .mbbc-newsletter-fallback button, .mbbc-newsletter-form input.tnp-submit, .mbbc-newsletter-form .tnp-submit, .mbbc-newsletter-form input[type="submit"]{ width: 100% !important; padding: 12px !important; border-radius: 16px !important; border: none !important; background: #fff !important; color: var(--mbbc-primary) !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(0,0,0,.20) !important; margin: 0 !important; } .mbbc-newsletter-fallback button:hover, .mbbc-newsletter-form input.tnp-submit:hover, .mbbc-newsletter-form .tnp-submit:hover{ background: #dbeafe !important; } /*Newsletter Heading lable Hide*/ .mbbc-newsletter .mbbc-heading{ display: none !important; } /* ========================================================================== 14. FOOTER ========================================================================== */ .mbbc-footer{ background: var(--mbbc-secondary); color: rgba(255,255,255,.85); padding-top: 10px; position: relative; overflow: hidden; } .mbbc-footer::before{ content: ""; position: absolute; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,193,7,.10) 0%, transparent 70%); bottom: -220px; left: -120px; pointer-events: none; } .mbbc-footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; position: relative; z-index: 1; } .mbbc-footer-logo{ margin-bottom: 14px; } .mbbc-footer-logo img{ max-width: 150px; width: 100%; height: auto; display: block; } .mbbc-footer-about-img{ margin: 4px 0 14px; } .mbbc-footer-about-img img{ max-width: 100%; border-radius: var(--mbbc-radius-sm); display: block; } .mbbc-footer-about p{ font-size: 14px; line-height: 1.8; margin: 0; } .mbbc-footer h4{ color: #fff; font-size: 18px; margin: 0 0 16px; } .mbbc-footer-links ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .mbbc-footer-links a{ color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; } .mbbc-footer-links a:hover{ color: var(--mbbc-accent); } .mbbc-footer-social p{ font-size: 15px; margin: 0 0 14px; } .mbbc-footer-social-icons{ display: flex; gap: 10px; } .mbbc-footer-social-icons a{width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; } .mbbc-footer-social-icons svg{ width: 16px; height: 16px; fill: currentColor; } .mbbc-footer-social-icons a:hover{ background: var(--mbbc-accent); color: #1a1a1a; } .mbbc-footer-divider-gold{ max-width: 350px; height: 2px; margin: 32px auto 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--mbbc-accent) 50%, transparent); position: relative; z-index: 1; } .mbbc-footer-newsletter-wrap{ position: relative; z-index: 1; } .mbbc-footer-divider-full{ height: 1px; background: rgba(255,255,255,.14); width: 100%; position: relative; z-index: 1; } .mbbc-footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; position: relative; z-index: 1; } /*------ Copyright section-------*/ .mbbc-footer-bottom-inner{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 15px; } /*------ Copyright Link -------*/ .mbbc-footer-bottom-inner > div:first-child{ font-size: 14px; } .mbbc-footer-legal a{ color: rgba(255,255,255,.75); text-decoration: none; margin: 0 4px; } .mbbc-footer-legal a:hover{ color: var(--mbbc-accent); } @media (max-width: 860px){ .mbbc-footer-grid{ grid-template-columns: 1fr 1fr; } .mbbc-footer-about{ grid-column: 1/-1; } } @media (max-width: 560px){ .mbbc-footer-grid{ grid-template-columns: 1fr; } .mbbc-footer-bottom-inner{ flex-direction: column; text-align: center; } .mbbc-footer-logo img{ max-width: 120px; margin: 0 auto; } .mbbc-footer-about{ text-align: center; } } /* -------------------------------------------------------------------------- 15. RIBBON — continuous RTL marquee, always ABOVE the header (fixes the overlap: ribbon is sticky at the very top with the higher z-index, and the header's own sticky offset is pushed down by the ribbon's fixed height — see the .site-header override near the bottom of this file). -------------------------------------------------------------------------- */ :root{ --mbbc-ribbon-h: 55px; } @media (max-width: 600px){ :root{ --mbbc-ribbon-h: 50px; } } .mbbc-ribbon{ position: sticky; top: 0; z-index: 1001; height: var(--mbbc-ribbon-h); line-height: 1; margin: 0; display: flex; align-items: center; overflow: hidden; } .mbbc-ribbon-track{ width: 100%; height: 100%; overflow: hidden; display: flex; white-space: nowrap; } .mbbc-ribbon-strip{ display: inline-flex; align-items: center; flex-shrink: 0; animation: mbbc-marquee 28s linear infinite; padding-right: 60px; } .mbbc-ribbon:hover .mbbc-ribbon-strip{ animation-play-state: paused; } @keyframes mbbc-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-100%); } } .mbbc-ribbon-item{ display: inline-flex; align-items: center; gap: 10px; margin-right: 60px; font-size: 14px; } .mbbc-ribbon-cta{ background: var(--mbbc-accent); color: #1a1a1a !important; font-weight: 700; padding: 5px 16px; border-radius: var(--ibh-radius-pill, 50px); text-decoration: none !important; font-size: 13px; } @media (prefers-reduced-motion: reduce){ .mbbc-ribbon-strip{ animation: none; } } /* =================================================== 16. Push the sticky header down by exactly the ribbon's height, so the two stack cleanly with zero overlap at any scroll position (desktop + mobile). ====================================================== */ .mbbc-sticky-head{ position: sticky; top: 0; z-index: 1001; } .site-header.ibh-header{ position: relative !important; margin: 0 !important; padding-top: 5px !important; padding-bottom: 4px !important; } /* -------------------------------------------------------------------------- 17. HERO — tighter spacing, bottom curve/blend on the photo, stats bar floating ~80% inside / ~20% below the hero (not a separate section). -------------------------------------------------------------------------- */ .mbbc-hero{ padding-top: 40px; padding-bottom: 0; } .mbbc-hero-grid{ padding-bottom: 24px; } .mbbc-hero-greeting{ margin-bottom: 2px; } .mbbc-hero-name{ margin-bottom: 10px; } .mbbc-hero-intro{ margin-bottom: 18px; } .mbbc-hero-media{ position: relative; } .mbbc-hero-media::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to bottom, rgba(10,79,168,0) 0%, var(--mbbc-primary) 92%); border-radius: 0 0 var(--mbbc-radius) var(--mbbc-radius); -webkit-mask-image: radial-gradient(120% 100% at 50% 100%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 100%, #000 55%, transparent 100%); pointer-events: none; } .mbbc-hero-img{ display: block; position: relative; } .mbbc-stats-bar{ position: relative; z-index: 5; } .mbbc-hero + .mbbc-section{ margin-top: 0; padding-top: calc(var(--mbbc-section-padding-sm, 40px) + 28px); } @media (min-width: 783px){ .mbbc-hero + .mbbc-section{ padding-top: calc(64px + 40px); } } .mbbc-stat-icon{ width: 44px; height: 44px; } .mbbc-stat-icon svg{ width: 24px; height: 24px; } .mbbc-stat-number{ font-size: 24px; } @media (max-width: 640px){ .mbbc-stats-bar{ grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; transform: translateY(10%); } .mbbc-stat-card{ padding: 12px 4px; gap: 4px; border-bottom: none; } .mbbc-stat-icon{ width: 32px; height: 32px; } .mbbc-stat-icon svg{ width: 22px; height: 22px; } .mbbc-stat-number{ font-size: 17px; } .mbbc-stat-label{ font-size: 9.5px; line-height: 1.3; } } @media (max-width: 640px){ .mbbc-intro{ padding-top: 12px !important; } } /* -------------------------------------------------------------------------- 18. SECTION SEPARATION — each homepage block reads as its own card. -------------------------------------------------------------------------- */ .mbbc-intro, .mbbc-seminar-section, .mbbc-vmt{ background: var(--mbbc-bg); } .mbbc-services, .mbbc-articles{ background: #fff; } .mbbc-intro, .mbbc-services, .mbbc-seminar-section, .mbbc-articles, .mbbc-testimonials, .mbbc-awards, .mbbc-vmt{ border-top: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); border-bottom: 1px solid var(--ibh-border-soft, rgba(10,79,168,.08)); box-shadow: var(--ibh-shadow-sm); position: relative; } /* -------------------------------------------------------------------------- 19. SEMINAR CAROUSEL — same box design, one card per seminar. -------------------------------------------------------------------------- */ .mbbc-seminar-carousel .mbbc-seminar-track{ gap: 14px; } .mbbc-seminar-track .mbbc-seminar-box{ flex: 0 0 min(100%, 720px); scroll-snap-align: start; margin: 0; } .mbbc-seminar-track-single{ display: block; } .mbbc-seminar-title{ color: var(--mbbc-text); font-size: 19px; font-weight: 800; margin: 0 0 14px; } /* -------------------------------------------------------------------------- 20. AWARDS CAROUSEL — sized like a carousel item (was a static grid card). -------------------------------------------------------------------------- */ .mbbc-award-card{ flex: 0 0 260px; scroll-snap-align: start; margin: 0; } /* -------------------------------------------------------------------------- 21. VISION / MISSION / TEAM — compact single block. -------------------------------------------------------------------------- */ .mbbc-vmt-compact{ text-align: center; max-width: 780px; } .mbbc-vmt-text{ font-size: 15.5px; line-height: 1.9; color: var(--ibh-text-body, #334155); margin: 18px 0 0; } /* -------------------------------------------------------------------------- 22. MOBILE FULL-WIDTH FIX — homepage sections use the full viewport width regardless of any GeneratePress container/padding constraints on #primary/.content-area. Inner content still respects --mbbc-max-width via .mbbc-section-inner, so desktop readability is unaffected. -------------------------------------------------------------------------- */ html{ overflow-x: hidden; } .mbbc-front-page .mbbc-hero, .mbbc-front-page .mbbc-section{ width: 100%; margin-left: 0; margin-right: 0; } @media (max-width: 782px){ .mbbc-section-inner{ padding: 0 16px; } } /* -------------------------------------------------------------------------- 23. CAROUSEL EDGE-TO-EDGE — Controls the horizontal spacing between the carousel and its container boundaries. -------------------------------------------------------------------------- */ /* Mobile: Control the left/right space around the carousel. */ @media (max-width: 640px){ .mbbc-carousel{ width: calc(100% + 32px); margin-left: -16px !important; margin-right: -16px !important; } .mbbc-carousel-track{ padding-left: 16px; padding-right: 16px; } } /* Desktop/Laptop: Control the left/right space around the carousel. */ @media (min-width: 641px){ .mbbc-carousel{ width: calc(100% + 24px); margin-left: -12px !important; margin-right: -12px !important; } .mbbc-carousel-track{ padding-left: 0; padding-right: 0; } }