/* ============================================================ नई उम्मीद (New Options) — Master Stylesheet Brand: skills, opportunity, royal blue + green + gold ============================================================ */ :root { /* Primary brand = royal blue (replaces former orange role). Variable names kept for backward compatibility across the site. */ --mf-orange: #1E5BA8; /* royal blue (primary) */ --mf-orange-dk: #14437D; /* deep navy blue */ --mf-orange-sf: #E3EDF9; /* soft blue tint */ --mf-yellow: #FFC845; /* bright golden yellow (accent) */ --mf-yellow-dk: #E0A41B; --mf-red: #C8102E; --mf-blue: #1E5BA8; --mf-blue-dk: #14437D; --mf-green: #2E8B57; --mf-cream: #F2F6FB; /* soft blue-tint backdrop */ --mf-cream-2: #F8FBFE; --mf-ink: #16243A; /* deep navy ink */ --mf-grey: #6B7B95; --mf-line: #D6E0EE; --mf-shadow-sm: 0 4px 14px rgba(20,67,125,.08); --mf-shadow-md: 0 10px 28px rgba(20,67,125,.12); --mf-shadow-lg: 0 22px 48px rgba(30,91,168,.20); --mf-radius: 12px; --mf-bg: #fff; /* page background */ --mf-surface: #fff; /* cards / raised surfaces */ } /* ===== Dark mode (toggled via ) ===== */ html[data-theme="dark"] { --mf-ink: #e6edf6; /* body text -> light */ --mf-grey: #9fb0c8; --mf-cream: #131c2b; /* light section bg -> dark */ --mf-cream-2: #0f1722; --mf-line: #27344c; --mf-bg: #0b1320; /* page background */ --mf-surface: #16202f; /* cards */ --mf-shadow-sm: 0 4px 14px rgba(0,0,0,.45); --mf-shadow-md: 0 10px 28px rgba(0,0,0,.55); --mf-shadow-lg: 0 22px 48px rgba(0,0,0,.6); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--mf-ink); background: var(--mf-bg); line-height: 1.65; transition: background-color .25s ease, color .25s ease; font-size: clamp(13.5px, 1.4vw, 14.5px); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.25; } h1 { font-size: clamp(1.65rem, 5vw, 3rem); } h2 { font-size: clamp(1.25rem, 4vw, 2.1rem); } h3 { font-size: clamp(1.05rem, 2.6vw, 1.4rem); } h4 { font-size: clamp(0.95rem, 2.2vw, 1.2rem); } h5 { font-size: clamp(0.9rem, 1.8vw, 1.1rem); } h6 { font-size: clamp(0.82rem, 1.4vw, 0.92rem); } .lead { font-size: clamp(0.95rem, 2.1vw, 1.12rem); line-height: 1.6; } .display-1 { font-size: clamp(2.5rem, 8vw, 5rem); } .display-4 { font-size: clamp(1.75rem, 5vw, 3rem); } .display-5 { font-size: clamp(1.5rem, 4.4vw, 2.6rem); } .display-6 { font-size: clamp(1.3rem, 3.5vw, 2.2rem); } a { color: var(--mf-orange); text-decoration: none; transition: color .2s; } a:hover { color: var(--mf-orange-dk); } img { max-width: 100%; height: auto; } .page-fade { animation: fadeIn .35s ease both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===== Buttons ===== Primary action = blue (.btn-primary, .btn-outline-primary) Donate CTA = vibrant yellow (.btn-donate) — pops against blue site */ .btn-donate { background: var(--mf-yellow); color: var(--mf-blue-dk); font-weight: 700; border-radius: 30px; padding: 8px 20px; border: 0; transition: all .25s; display: inline-flex; align-items: center; gap: 6px; } .btn-donate:hover, .btn-donate:focus { background: var(--mf-yellow-dk); color: var(--mf-blue-dk); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,200,69,.55); } .btn-primary { background: var(--mf-orange); border-color: var(--mf-orange); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--mf-orange-dk); border-color: var(--mf-orange-dk); color: #fff; } .btn-outline-primary { color: var(--mf-orange); border-color: var(--mf-orange); } .btn-outline-primary:hover { background: var(--mf-orange); border-color: var(--mf-orange); color: #fff; } /* ===== Utility top bar ===== */ .utility-bar { background: var(--mf-blue); color: #fff; padding: 8px 0; font-size: 13px; } .utility-bar a { color: #fff; } .utility-bar a:hover { color: var(--mf-yellow); } .utility-bar i { margin-right: 4px; } /* ===== Main navbar ===== */ .main-navbar { background: #fff; box-shadow: var(--mf-shadow-sm); padding: 5px 0; transition: padding .2s, box-shadow .2s; } .main-navbar.scrolled { padding: 5px 0; box-shadow: var(--mf-shadow-md); } .navbar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--mf-orange-dk); } .brand-tagline { font-size: 11px; color: var(--mf-grey); letter-spacing: .03em; } .main-navbar .nav-link { color: var(--mf-ink); font-weight: 500; padding: 8px 14px !important; position: relative; /* Google Translate returns some labels lowercase (home, events) — keep the menu consistently Title Case. No effect on Devanagari (no letter case). */ text-transform: capitalize; } .main-navbar .nav-link:hover, .main-navbar .nav-link.active { color: var(--mf-orange); } .main-navbar .nav-link.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--mf-orange); } .dropdown-menu { border: 0; box-shadow: var(--mf-shadow-md); border-radius: 8px; padding: 6px; } .dropdown-item { padding: 8px 14px; border-radius: 6px; font-size: 14px; text-transform: capitalize; } .dropdown-item:hover { background: var(--mf-cream); color: var(--mf-orange); } .nav-donate-mobile { font-size: 13px; padding: 6px 14px; } /* सदस्य बनें CTA — blue counterpart of the yellow donate button */ .btn-join { background: var(--mf-blue); color: #fff; font-weight: 700; border-radius: 30px; padding: 8px 20px; border: 0; transition: all .25s; display: inline-flex; align-items: center; gap: 6px; } .btn-join:hover, .btn-join:focus { background: var(--mf-blue-dk); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,91,168,.45); } .nav-join-mobile { font-size: 13px; padding: 6px 14px; } /* Hamburger (3 lines) — keep it clearly visible on light & dark navbar */ .main-navbar .navbar-toggler { border: 2px solid var(--mf-blue); border-radius: 10px; padding: 6px 10px; background: transparent; opacity: 1; } .main-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(30,91,168,.3); } .main-navbar .navbar-toggler-icon { width: 1.3em; height: 1.3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231E5BA8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } html[data-theme="dark"] .main-navbar .navbar-toggler { border-color: var(--mf-yellow); } html[data-theme="dark"] .main-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23FFC845' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* ===== Hero ===== */ .hero { position: relative; min-height: 78vh; background: linear-gradient(135deg, var(--mf-cream) 0%, #DCE8F7 100%); padding: 80px 0; overflow: hidden; } .hero-slim { min-height: 13.7vh; background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk)); color: #fff; padding: 22px 0; display: flex; align-items: center; } /* capitalize: Google Translate returns page titles/breadcrumbs lowercase (e.g. "photo gallery", "home"); Title Case keeps them tidy. No effect on Hindi. */ .hero-slim h1 { color: #fff; text-transform: capitalize; } .hero-slim .lead { color: rgba(255,255,255,.92); } .breadcrumb { background: transparent; } .breadcrumb a { color: rgba(255,255,255,.85); } .breadcrumb-item { text-transform: capitalize; } .breadcrumb-item.active { color: #fff; } /* ===== Section utilities ===== */ .section { padding: 80px 0; } .section-sm { padding: 50px 0; } .section-cream { background: var(--mf-cream); } .section-dark { background: var(--mf-ink); color: #fff; } .eyebrow { display: inline-block; color: var(--mf-orange); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; } .section-heading { position: relative; margin-bottom: 12px; } .section-heading::after { content: ''; display: block; width: 60px; height: 3px; background: var(--mf-orange); margin-top: 12px; border-radius: 3px; } .text-center .section-heading::after { margin-left: auto; margin-right: auto; } /* ===== Focus area cards ===== */ .focus-card { display: block; background: #fff; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); padding: 26px 22px; height: 100%; transition: all .3s; color: var(--mf-ink); } .focus-card:hover { transform: translateY(-6px); box-shadow: var(--mf-shadow-lg); border-color: var(--mf-orange); color: var(--mf-ink); } .focus-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 14px; } .focus-link { color: var(--mf-orange); font-weight: 600; font-size: 14px; } /* ===== Campaign cards ===== */ .campaign-card { background: #fff; border-radius: var(--mf-radius); overflow: hidden; box-shadow: var(--mf-shadow-sm); transition: all .3s; display: flex; flex-direction: column; } .campaign-card:hover { transform: translateY(-6px); box-shadow: var(--mf-shadow-lg); } .campaign-image { position: relative; height: 220px; overflow: hidden; background: linear-gradient(135deg, var(--mf-cream), var(--mf-orange-sf)); } .campaign-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .campaign-card:hover .campaign-image img { transform: scale(1.05); } .campaign-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 80px; } .campaign-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; } .campaign-category { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.95); color: var(--mf-orange-dk); padding: 4px 10px; border-radius: 14px; font-size: 11px; font-weight: 600; } .campaign-body { flex: 1; display: flex; flex-direction: column; } .campaign-title { color: var(--mf-ink); margin-bottom: 8px; } .campaign-summary { flex: 1; } .campaign-progress .progress { height: 8px; background: var(--mf-cream); border-radius: 4px; } /* ===== Trustee cards ===== */ .trustee-card { background: #fff; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); padding: 28px 20px; transition: all .3s; } .trustee-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-md); } .trustee-avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 700; font-family: 'Playfair Display', serif; } .trustee-role { font-weight: 600; color: var(--mf-orange); } .trustee-bio { color: var(--mf-grey); } /* ===== Stats / counter band ===== */ .stat-band { background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk)); color: #fff; padding: 60px 0; text-align: center; } .stat-num { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; font-family: 'Playfair Display', serif; line-height: 1; } .stat-label { font-size: 14px; opacity: .9; margin-top: 6px; } /* ===== CTA bands ===== */ .cta-band { background: linear-gradient(135deg, var(--mf-blue), var(--mf-blue-dk)); color: #fff; padding: 70px 0; text-align: center; } .cta-band h2 { color: #fff; } .cta-band .btn-donate { background: var(--mf-yellow); color: var(--mf-ink); } .cta-band .btn-donate:hover { background: #fff; } /* ===== Newsletter band ===== */ .newsletter-band { background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%); color: #fff; } .newsletter-band h3 { color: #fff; } /* ===== Footer ===== */ .site-footer { background: #1A1410; color: #D1C7B8; } .footer-heading { color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: #D1C7B8; font-size: 14px; } .footer-links a:hover { color: var(--mf-orange); } .footer-contact { list-style: none; padding: 0; margin: 0; font-size: 13px; } .footer-contact li { margin-bottom: 10px; padding-left: 24px; position: relative; line-height: 1.5; } .footer-contact li i { position: absolute; left: 0; top: 4px; color: var(--mf-orange); } .footer-contact a { color: #D1C7B8; } .footer-contact a:hover { color: var(--mf-orange); } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; margin-right: 6px; transition: all .2s; } .footer-social a:hover { background: var(--mf-orange); transform: translateY(-2px); } .footer-divider { border-color: rgba(255,255,255,.1); } /* Legal-links row */ .footer-legal-links { list-style: none; padding: 0; margin: 0 0 6px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; } .footer-legal-links li { display: inline-flex; align-items: center; } .footer-legal-links li:not(:last-child)::after { content: '·'; margin-left: 18px; color: rgba(255,255,255,.35); } .footer-legal-links a { color: #D1D8E5; text-decoration: none; transition: color .2s; } .footer-legal-links a:hover { color: var(--mf-yellow); } @media (max-width: 575.98px) { .footer-legal-links { font-size: 12px; gap: 4px 10px; } .footer-legal-links li:not(:last-child)::after { margin-left: 10px; } } /* ===== Sticky donate FAB ===== */ .donate-fab { position: fixed; bottom: 24px; right: 24px; background: var(--mf-orange); color: #fff; padding: 12px 22px; border-radius: 30px; display: flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: 0 12px 28px rgba(30,91,168,.45); z-index: 99; animation: fabPulse 2.4s infinite; } .donate-fab:hover { background: var(--mf-orange-dk); color: #fff; transform: scale(1.05); } @keyframes fabPulse { 0%, 100% { box-shadow: 0 12px 28px rgba(30,91,168,.45); } 50% { box-shadow: 0 12px 28px rgba(30,91,168,.45), 0 0 0 12px rgba(30,91,168,.12); } } @media (max-width: 575.98px) { .donate-fab { left: 16px; right: 16px; bottom: 16px; justify-content: center; padding: 14px; border-radius: 12px; } .fab-label { font-size: 15px; } } /* ===== Back to top ===== */ .back-to-top { position: fixed; bottom: 90px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--mf-blue); color: #fff; border: 0; display: none; align-items: center; justify-content: center; z-index: 98; box-shadow: var(--mf-shadow-md); transition: all .3s; } .back-to-top.visible { display: flex; } .back-to-top:hover { background: var(--mf-blue-dk); transform: translateY(-3px); } @media (max-width: 575.98px) { .back-to-top { bottom: 80px; right: 16px; } } /* ===== Donor wall, gallery, etc utilities ===== */ .gallery-item { position: relative; border-radius: var(--mf-radius); overflow: hidden; cursor: pointer; height: 240px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .gallery-item:hover img { transform: scale(1.06); } .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--mf-line); } .timeline-item { position: relative; margin-bottom: 30px; } .timeline-item::before { content: ''; position: absolute; left: -28px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--mf-orange); box-shadow: 0 0 0 4px rgba(30,91,168,.18); } .credential-card { background: #fff; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); padding: 24px; text-align: center; height: 100%; transition: all .3s; } .credential-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-md); } .credential-card i { font-size: 32px; color: var(--mf-orange); } /* Event card with image */ .event-card { display: flex; flex-direction: column; } .event-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .event-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .event-card:hover .event-card-media img { transform: scale(1.05); } .event-card-badge { position: absolute; top: 12px; left: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .event-card-body { padding: 20px 22px 22px; } /* ============================================================ Responsive — mobile-first font scaling + spacing ============================================================ */ /* Tablet (≤991px) */ @media (max-width: 991.98px) { .hero { min-height: 56vh; padding: 50px 0; } .hero-slim { min-height: auto; padding: 18px 0; } .section { padding: 50px 0; } .section-sm { padding: 32px 0; } .stat-band, .cta-band { padding: 50px 0; } .brand-name { font-size: 15px; } .brand-tagline { font-size: 10px; } /* Trustees */ .trustee-avatar { width: 76px; height: 76px; font-size: 22px; } /* Stat numbers slightly smaller */ .stat-num { font-size: clamp(1.6rem, 5.5vw, 2.3rem); } .stat-label { font-size: 12px; } /* Footer columns */ .site-footer { padding-top: 40px; padding-bottom: 18px; } .footer-heading { margin-bottom: 12px; font-size: 12px; } .footer-links a, .footer-contact { font-size: 12.5px; } } /* Mobile (≤575px) */ @media (max-width: 575.98px) { body { font-size: 13.5px; line-height: 1.6; } /* Tighter section spacing */ .section { padding: 40px 0; } .section-sm { padding: 24px 0; } .hero { padding: 40px 0; } .hero-slim { padding: 14px 0; } .stat-band, .cta-band { padding: 40px 0; } /* Hero swiper text — keep readable */ .hero h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); } .hero .lead { font-size: 13.5px; } /* Hero slide buttons */ .hero .btn-lg, .hero-slim .btn-lg { padding: 7px 16px; font-size: 13px; } /* Section headings underline closer */ .section-heading::after { width: 45px; height: 2px; margin-top: 8px; } .eyebrow { font-size: 10px; letter-spacing: .12em; } /* Cards */ .focus-card { padding: 20px 16px; } .focus-icon { width: 48px; height: 48px; font-size: 20px; } .credential-card { padding: 18px 14px; } .credential-card i { font-size: 26px; } .trustee-card { padding: 20px 14px; } .campaign-card { font-size: 12.5px; } .campaign-image { height: 170px; } .campaign-emoji { font-size: 56px; } .campaign-title { font-size: 15px; } /* Buttons sized for thumb-tap */ .btn-donate, .btn-primary, .btn-outline-primary { padding: 7px 14px; font-size: 13px; } .btn-lg { padding: 9px 20px !important; font-size: 14px !important; } /* Navbar — donate + join buttons + brand stay tight */ .nav-donate-mobile { font-size: 11.5px; padding: 5px 11px; } .nav-join-mobile { font-size: 11.5px; padding: 5px 11px; } .navbar-brand img { height: 38px; width: 38px; } .brand-name { font-size: 14px; } .brand-tagline { display: none; } /* Utility bar text + icons stay snug */ .utility-bar { font-size: 11px; padding: 5px 0; } /* Program feature cards (home page) */ .program-feature-img { height: 160px; } .program-feature-body { padding: 18px 16px; } .program-feature h3 { font-size: 15.5px; } /* Form labels + inputs */ .form-label { font-size: 12.5px; margin-bottom: 4px; } .form-control, .form-select { font-size: 13px; } .form-control-lg, .form-select-lg { font-size: 14px; padding: 7px 11px; } /* Tabs (donate page) */ .pay-tabs .nav-link { padding: 9px 12px; font-size: 11px; } .pay-tabs .nav-link i { font-size: 16px; } .pay-content { padding: 20px 14px; } /* Tables — make compact */ .table { font-size: 12px; } /* Footer */ .site-footer { font-size: 12px; } .footer-heading { font-size: 11.5px; } .footer-social a { width: 32px; height: 32px; } /* FAB / back-to-top sizes */ .donate-fab { padding: 11px; font-size: 13px; } .back-to-top { width: 38px; height: 38px; } } /* Tiny phones (≤360px) */ @media (max-width: 360px) { body { font-size: 13px; } .hero h1 { font-size: 1.35rem; } .section-heading { font-size: 1.1rem; } .program-feature-num { width: 38px; height: 38px; font-size: 16px; } .pay-tabs .nav-link span { display: none; } } /* ===== Navbar logo + 3-line brand name ===== */ /* Strict 5px top + 5px bottom — no extra vertical space anywhere */ .main-navbar .container { padding-top: 0; padding-bottom: 0; } .navbar-brand.logo-with-name, .navbar-brand.logo-only { padding: 0; margin: 0; display: flex; align-items: center; gap: 12px; line-height: 0; /* kills inline-image baseline gap */ } .navbar-brand.logo-with-name img, .navbar-brand.logo-with-name picture img, .navbar-brand.logo-only img, .navbar-brand.logo-only picture img { display: block; /* remove default inline whitespace */ height: 56px !important; width: 56px !important; object-fit: contain; border-radius: 50%; background: #fff; margin: 0; transition: transform .2s ease, box-shadow .2s ease; } .navbar-brand.logo-with-name:hover img, .navbar-brand.logo-only:hover img { transform: scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,.10); } .main-navbar.scrolled .navbar-brand img, .main-navbar.scrolled .navbar-brand picture img { height: 52px !important; width: 52px !important; } /* 3-line brand text — vertically centred, tight line gap */ .brand-text-3 { display: flex; flex-direction: column; justify-content: center; /* tight stacking, no big gaps */ gap: 2px; /* 50% smaller line gap */ height: 56px; /* matches logo */ line-height: 1; font-family: 'Playfair Display', serif; color: var(--mf-blue-dk); letter-spacing: .01em; } .brand-line { display: block; white-space: nowrap; line-height: 1; margin: 0; padding: 0; } .brand-line-1 { font-size: 16px; font-weight: 800; color: var(--mf-blue-dk); } .brand-line-2 { font-size: 14px; font-weight: 700; color: var(--mf-blue); } .brand-line-3 { font-size: 13px; font-weight: 600; color: var(--mf-yellow-dk); letter-spacing: .03em; } /* Dark mode: navbar is dark, so brand text (blue) is low-contrast — make it white */ html[data-theme="dark"] .brand-line-1, html[data-theme="dark"] .brand-line-2 { color: #fff; } html[data-theme="dark"] .brand-line-3 { color: var(--mf-yellow); } /* Admin-only "Change Logo" button next to the navbar logo (shown only when logged in) */ .brand-wrap { position: relative; } .logo-edit-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 6px 12px; border-radius: 20px; background: var(--mf-orange, #F26522); color: #fff !important; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 10px rgba(242,101,34,.35); transition: transform .15s ease, filter .15s ease; } .logo-edit-btn i { font-size: 14px; } .logo-edit-btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff !important; } @media (max-width: 991px) { .logo-edit-btn span { display: none; } /* icon-only on small screens to save space */ .logo-edit-btn { margin-left: 6px; padding: 6px 9px; } } /* Match logo size when navbar is scrolled (52px) */ .main-navbar.scrolled .brand-text-3 { height: 52px; } .main-navbar.scrolled .brand-line-1 { font-size: 15px; } .main-navbar.scrolled .brand-line-2 { font-size: 13px; } .main-navbar.scrolled .brand-line-3 { font-size: 12px; } /* Tablet: shrink text slightly */ @media (max-width: 991.98px) { .brand-line-1 { font-size: 14px; } .brand-line-2 { font-size: 12px; } .brand-line-3 { font-size: 11px; } } /* Phone: hide brand text, show logo only — saves space next to hamburger */ @media (max-width: 575.98px) { .navbar-brand.logo-with-name img, .navbar-brand.logo-with-name picture img, .navbar-brand.logo-only img, .navbar-brand.logo-only picture img { height: 48px !important; width: 48px !important; } .brand-text-3 { display: none; } } /* Footer logo — bigger, centred on the brand column */ .footer-logo img, .footer-logo picture img { height: 120px; width: 120px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 8px 22px rgba(0,0,0,.18); } /* Footer "About Us" section */ .footer-about-section { border-bottom: 1px solid rgba(255,255,255,.12); } .footer-about-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.3); } .footer-about-link { color: var(--mf-yellow); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; } .footer-about-link:hover { color: var(--mf-yellow); gap: 11px; } /* Admin login screen — logo only, centred */ .login-logo.logo-only-center { display: flex; justify-content: center; align-items: center; } .login-logo.logo-only-center img { display: block; } /* Admin sidebar brand — logo only */ .sidebar-brand.sidebar-brand-logo-only { display: flex; justify-content: center; padding: 18px 0; } .sidebar-brand.sidebar-brand-logo-only img { border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); } /* ============================================================ Dark-mode surface overrides (white/hardcoded surfaces -> dark) ============================================================ */ html[data-theme="dark"] body { background: var(--mf-bg); color: var(--mf-ink); } /* Navbar + dropdowns */ html[data-theme="dark"] .main-navbar { background: var(--mf-surface); } html[data-theme="dark"] .dropdown-menu { background: var(--mf-surface); border: 1px solid var(--mf-line); } html[data-theme="dark"] .dropdown-item { color: var(--mf-ink); } html[data-theme="dark"] .dropdown-item:hover { background: var(--mf-cream); color: var(--mf-yellow); } html[data-theme="dark"] .offcanvas { background: var(--mf-surface); color: var(--mf-ink); } /* Cards & raised surfaces (these use hardcoded #fff in light mode) */ html[data-theme="dark"] .credential-card, html[data-theme="dark"] .campaign-card, html[data-theme="dark"] .campaign-body, html[data-theme="dark"] .focus-card, html[data-theme="dark"] .trustee-card, html[data-theme="dark"] .video-card, html[data-theme="dark"] .committee-card, html[data-theme="dark"] .program-card, html[data-theme="dark"] .form-section, html[data-theme="dark"] .panel, html[data-theme="dark"] .card { background: var(--mf-surface) !important; color: var(--mf-ink); border-color: var(--mf-line); } /* Bootstrap utility surfaces */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--mf-surface) !important; color: var(--mf-ink); } html[data-theme="dark"] .text-dark { color: var(--mf-ink) !important; } html[data-theme="dark"] .text-muted { color: var(--mf-grey) !important; } html[data-theme="dark"] .border { border-color: var(--mf-line) !important; } html[data-theme="dark"] hr { border-color: var(--mf-line); } /* Forms */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--mf-cream-2); border-color: var(--mf-line); color: var(--mf-ink); } html[data-theme="dark"] .form-control::placeholder { color: #7e8ea8; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--mf-cream-2); color: var(--mf-ink); border-color: var(--mf-blue); } /* Tables */ html[data-theme="dark"] .table { color: var(--mf-ink); } html[data-theme="dark"] .table th { background: var(--mf-cream); color: var(--mf-ink); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--mf-line); } /* Headings keep readable */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--mf-ink); } html[data-theme="dark"] .section-heading { color: var(--mf-ink); } /* Theme toggle button */ .theme-toggle { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 2px 6px; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; } .theme-toggle:hover { opacity: .8; } .utility-bar .theme-toggle { color: #fff; } /* Membership fee note (join form) — readable in light & dark */ .fee-note { margin-top: 4px; padding: 9px 13px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; background: #FFF6E1; border: 1px solid #F0D98C; color: #6b4e00; } .fee-note strong { color: #A6720A; font-size: 15px; } .fee-note.free { background: #EAF7EF; border-color: #B7E0C6; color: #235c39; } .fee-note.free strong { color: #2E8B57; } html[data-theme="dark"] .fee-note { background: rgba(224,164,27,.16); border-color: rgba(224,164,27,.42); color: #f4e4b8; } html[data-theme="dark"] .fee-note strong { color: #ffd561; } html[data-theme="dark"] .fee-note.free { background: rgba(46,139,87,.18); border-color: rgba(46,139,87,.45); color: #b7eccb; } html[data-theme="dark"] .fee-note.free strong { color: #86e6ab; } /* ============================================================ Google Translate widget (whole-site translation) ============================================================ */ /* Hidden engine element — only loads Google's translation machinery */ .gt-engine { position: absolute !important; left: -9999px !important; top: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; } /* Our wrapper: globe icon + our own language dropdown, sits in the utility bar */ .gtranslate-wrap { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; } .gtranslate-wrap > .bi-translate { color: #fff; font-size: 15px; line-height: 1; } /* Kill Google's injected top "Translated into…" banner + the body-shift it forces. The banner iframe's class is obfuscated & changes, so match any skiptranslate iframe EXCEPT the language-chooser popup (.goog-te-menu-frame). */ iframe.skiptranslate:not(.goog-te-menu-frame), .goog-te-banner-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover { display: none !important; } body { top: 0 !important; position: static !important; } /* Google highlights translated text with a yellow box on hover — remove it */ .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Our language