/* ============================================================= BAANA - MODERN MOBILE-FIRST STYLESHEET Clean, responsive, accessible. Works with Bootstrap 5. ============================================================= */ /* ========================= 1. ROOT VARIABLES (mobile-first) ========================= */ :root { /* Colors */ --baana-primary: #0d6efd; /* Blue */ --baana-secondary: #0dcaf0; /* Cyan blue */ --baana-dark: #212529; --baana-light: #f8f9fa; --baana-gray: #6c757d; --color-primary: #0d6efd; /* Blue */ --color-primary-hover: #0b5ed7; /* Darker blue */ --color-secondary: #084298; /* Deep blue */ --color-accent: #0dcaf0; /* Cyan blue */ --color-accent-2: #60a5fa; /* Light blue */ --color-tertiary: #3b82f6; /* Medium blue */ --color-complementary: #1d4ed8; /* Royal blue */ --color-light: #f8fafc; /* page background */ --color-dark: #0f1724; /* primary text on light bg */ --color-muted: #64748b; --color-border: #e2e8f0; /* Layout & sizing */ --container-max: 1200px; --sidebar-width: 250px; --sidebar-collapsed-width: 70px; /* Radii & shadows */ --radius-sm: .5rem; --radius: .75rem; --card-radius: 1rem; --box-shadow-sm: 0 4px 8px rgba(0,0,0,0.12); --box-shadow-md: 0 6px 20px rgba(2,6,23,0.08); --elev: 0 6px 20px rgba(2,6,23,0.08); /* Typography */ --font-main: 'Inter', sans-serif; --font-heading: font-family: 'Montserrat', sans-serif; /* Using Montserrat for headings */ --font-ui: "Montserrat", "Open Sans", Arial, sans-serif; /* Timing */ --transition-duration: 250ms; --transition-cubic: cubic-bezier(.2,.9,.3,1); /* Spacing scale */ --sp-xxs: 0.25rem; --sp-xs: 0.5rem; --sp-sm: 0.75rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2.5rem; /* Breakpoints (used in media queries) */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; /* heros Heights */ --banner-primary-height: 600px; /* desktop hero */ --banner-primary-md: 420px; /* tablet */ --banner-primary-sm: 300px; /* phone */ --banner-secondary-height: 360px; /* desktop secondary */ --banner-secondary-md: 260px; /* tablet */ --banner-secondary-sm: 180px; /* phone */ } /* Dark mode override using prefers-color-scheme */ @media (prefers-color-scheme: dark) { :root { --color-light: #071124; --color-dark: #e6eef8; --color-muted: #9aa8bf; --color-border: rgba(255,255,255,0.06); --box-shadow-md: 0 10px 30px rgba(2,6,23,0.5); } } /* Optional manual dark class (apply to or ) */ :root.dark { --color-light: #071124; --color-dark: #e6eef8; --color-muted: #9aa8bf; --color-border: rgba(255,255,255,0.06); } /* --------------------------------------------------------- PRIMARY HERO CAROUSEL (Full height, immersive) --------------------------------------------------------- */ #heroCarousel .banner-image { height: var(--banner-primary-height); max-height: 85vh; width: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease, height 0.3s ease; } #heroCarousel .hero-overlay { background: linear-gradient( to right, rgba(13, 110, 253, 0.7) 40%, /* Blue tint */ rgba(0, 0, 0, 0.2) 100% ); position: absolute; inset: 0; z-index: 1; } #heroCarousel .carousel-caption { top: 50%; transform: translateY(-50%); text-align: left; z-index: 2; padding: 1rem 1.5rem; border-left: 4px solid #fff; max-width: 50%; } #heroCarousel .carousel-caption h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 0.5rem; } #heroCarousel .carousel-caption p { font-size: clamp(1rem, 1.8vw, 1.25rem); } /* --------------------------------------------------------- SECONDARY BANNER (Shorter height) --------------------------------------------------------- */ #secondaryBanner .banner-image { height: var(--banner-secondary-height); max-height: 45vh; width: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease, height 0.3s ease; } #secondaryBanner .hero-overlay { background: linear-gradient( to right, rgba(13, 110, 253, 0.7) 40%, /* Blue overlay */ rgba(0, 0, 0, 0.2) 100% ); position: absolute; inset: 0; z-index: 1; } #secondaryBanner .carousel-caption { top: 50%; transform: translateY(-50%); text-align: left; z-index: 2; padding: 0.75rem 1rem; max-width: 48%; border-left: 3px solid var(--color-complementary, #0d6efd); } #secondaryBanner .carousel-caption .display-6 { font-size: clamp(1.2rem, 2.8vw, 1.6rem); } #secondaryBanner .carousel-caption .lead { font-size: clamp(0.9rem, 1.6vw, 1.05rem); } /* --------------------------------------------------------- RESPONSIVE ADJUSTMENTS --------------------------------------------------------- */ @media (max-width: 991.98px) { #heroCarousel .banner-image { height: var(--banner-primary-md); } #secondaryBanner .banner-image { height: var(--banner-secondary-md); } #heroCarousel .carousel-caption, #secondaryBanner .carousel-caption { max-width: 70%; } } @media (max-width: 575.98px) { #heroCarousel .banner-image { height: var(--banner-primary-sm); } #secondaryBanner .banner-image { height: var(--banner-secondary-sm); } #heroCarousel .carousel-caption, #secondaryBanner .carousel-caption { left: 5%; max-width: 85%; border-left: none; padding-left: 0.5rem; } #heroCarousel .carousel-caption h1, #secondaryBanner .carousel-caption .display-6 { font-size: 1.1rem; } #heroCarousel .carousel-caption p, #secondaryBanner .carousel-caption .lead { font-size: 0.95rem; } } /* ========================= 2. RESET & BASE ========================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--font-main); color: var(--color-dark); background: var(--color-light); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings */ h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 var(--sp-md) 0; } h1 { font-size: clamp(1.6rem, 3.6vw, 3rem); } h2 { font-size: clamp(1.4rem, 3vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 2.4vw, 2rem); } p { margin: 0 0 1rem 0; } /* Links */ a { color: inherit; text-decoration: none; transition: color var(--transition-duration) var(--transition-cubic), transform 200ms; font-family: var(--font-ui); } a:hover, a:focus { color: var(--color-primary); transform: translateY(-2px); } /* Accessibility focus */ :focus { outline: none; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent); outline-offset: 3px; border-radius: 6px; } /* Prefers reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ========================= 3. LAYOUT CONTAINERS & UTILITIES ========================= */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-md); } .row-gap { gap: var(--sp-md); } .text-center { text-align: center !important; } .text-muted { color: var(--color-muted) !important; } .fw-bold { font-weight: 700 !important; } .small { font-size: .9rem; } .lead { font-size: 1.05rem; color: var(--color-muted); } /* Spacing helpers */ .mb-1 { margin-bottom: var(--sp-xs) !important; } .mb-2 { margin-bottom: var(--sp-sm) !important; } .mb-3 { margin-bottom: var(--sp-md) !important; } .p-2 { padding: var(--sp-sm) !important; } .p-3 { padding: var(--sp-md) !important; } /* Reusable center */ .center { display: flex; align-items: center; justify-content: center; } /* Screen-reader only */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================= 4. FORM CONTROLS ========================= */ input, textarea, select, .form-control, .form-select { font-family: var(--font-ui); border-radius: var(--radius); border: 1px solid var(--color-border); padding: .65rem .9rem; font-size: 1rem; transition: box-shadow var(--transition-duration) var(--transition-cubic), border-color var(--transition-duration) var(--transition-cubic); background: #fff; color: inherit; } input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 12%, transparent); outline: none; } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .invalid-feedback { color: var(--color-accent); } /* ========================= 5. BUTTONS ========================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; border: 0; transition: transform var(--transition-duration) var(--transition-cubic), box-shadow var(--transition-duration) var(--transition-cubic), opacity var(--transition-duration); box-shadow: var(--elev); background: var(--color-primary); color: #fff; } .btn:active { transform: translateY(0); } .btn:focus { box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 20%, transparent); } .btn:hover { transform: translateY(-3px); } .btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; } .btn-secondary { background: var(--color-secondary); color: #fff; } .btn-warning { background: var(--color-accent); color: #111; } .btn-outline-primary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-outline-primary:hover { background: var(--color-primary); color: #fff; } /* Full width CTAs on mobile */ .btn-block { width: 100%; } @media (min-width: var(--bp-sm)) { .btn-block { width: auto; } } /* Small button */ .btn-sm { padding: .45rem .65rem; font-size: .95rem; } /* Gradient CTA utility */ .btn-gradient { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); color: #fff; border: 0; } /* ========================= 6. HERO ========================= */ .hero { position: relative; padding: var(--sp-lg) var(--sp-md); border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 85%, white), var(--color-secondary)); color: #fff; overflow: hidden; box-shadow: var(--box-shadow-md); text-align: center; } .hero::before { content: ""; position: absolute; inset: 0; background: url('../img/hero-bg.jpg') center/cover no-repeat; opacity: .08; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero .eyebrow { font-weight: 700; letter-spacing: .02em; opacity: .95; } .hero .btn { min-width: 140px; } /* Background-video support */ .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-text { opacity: 0; transform: translateY(30px); animation: fadeInUp 1s forwards ease-out; } .animate-text:nth-child(2) { animation-delay: .5s; } /* ========================= 7. CARDS ========================= */ .card { background-color: #fff; border-radius: var(--card-radius); box-shadow: var(--box-shadow-sm); padding: 1.5rem; margin: 1rem; border: 1px solid var(--color-border); transition: transform var(--transition-duration) var(--transition-cubic), box-shadow var(--transition-duration) var(--transition-cubic), border-color var(--transition-duration) var(--transition-cubic); } .card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow-md); border-color: transparent; } .card.no-elev { box-shadow: none; border: 1px solid var(--color-border); } .card-body { padding: var(--sp-md); } /* Feature cards */ .card-feature .bi { font-size: 1.6rem; } .card-feature h5 { margin: .5rem 0; font-weight: 600; } /* Pricing variants */ .pricing-card { border-left: 4px solid transparent; } .pricing-card.primary { border-color: var(--color-primary); } .pricing-card.success { border-color: var(--color-tertiary); } .pricing-card.warning { border-color: var(--color-accent); } .pricing-card.danger { border-color: #ef4444; } /* ========================= 8. BADGES & UTILITIES ========================= */ .subject-badge { display: flex; align-items: center; justify-content: center; padding: .55rem; border-radius: .6rem; font-weight: 700; box-shadow: 0 6px 18px rgba(2,6,23,0.04); min-height: 56px; } /* Semantic backgrounds (avoid !important unless necessary) */ .bg-primary { background: var(--color-primary); color: #fff; } .bg-secondary { background: var(--color-secondary); color: #fff; } .bg-success { background: var(--color-tertiary); color: #fff; } .bg-warning { background: var(--color-accent); color: #111; } .bg-info { background: #3b82f6; color: #fff; } .bg-danger { background: #ef4444; color: #fff; } .bg-dark { background: var(--color-dark); color: #fff; } /* Text color utilities */ .text-abana-light { color: var(--color-light); } .text-abana-primary { color: var(--color-primary); } .text-abana-secondary { color: var(--color-secondary); } .text-abana-accent { color: var(--color-accent); } /* ========================= 9. NAVBAR & MEGA-MENU ========================= */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; transition: all .3s ease; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.06); border-bottom: 2px solid var(--color-complementary); background: transparent; color: var(--color-dark); } .navbar-brand { border: 3px solid var(--baana-primary); border-radius: 45px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 8px; background: #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.06); transition: all 0.3s ease-in-out; } .navbar-brand:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.10); background: var(--baana-primary-light); } .navbar.fixed-top { z-index: 1030; } .navbar-brand img { transition: transform .3s ease; border-radius: 50%; } .navbar-brand:hover img { transform: scale(1.1); } .navbar-nav .nav-link { color: #333; padding: .75rem 1.25rem; transition: color .3s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--color-primary); } /* Mega menu */ .mega-menu { position: static; } .mega-menu-content { display: none; width: 100%; max-width: 80%; margin: 0 auto; border-radius: .75rem; padding: 2rem; background: #fff; } .mega-menu-content .container { max-width: 1200px; } .mega-menu-content .d-flex { transition: background-color .3s ease, transform .3s ease; border-radius: .5rem; padding: 1rem; } .mega-menu-content .d-flex:hover { transform: translateX(5px); } /* Responsive breakpoints for mega menu */ @media (min-width: 992px) { .mega-menu-content { position: absolute; top: 100%; left: 0; right: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } } @media (max-width: 991.98px) { .mega-menu-content { position: static !important; width: 100% !important; padding: 0.5rem 0.75rem 1.5rem; /* slightly less top/bottom padding */ background: transparent; /* cleaner look - submenu blends with navbar bg */ box-shadow: none; border: none; border-radius: 0; margin: 0; } /* Make each item look like a proper mobile submenu item */ .mega-menu-content .d-flex { padding: 0.9rem 1rem; margin-bottom: 0.5rem; background: #fff; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* Optional but recommended - slight indent to show it's a submenu */ .mega-menu-content .container { padding-left: 1.5rem; padding-right: 0; } /* Better hover/tap feedback on mobile */ .mega-menu-content .d-flex:hover, .mega-menu-content .d-flex:focus { background: rgba(13, 110, 253, 0.08); transform: translateX(4px); } } /* Icon helper */ .icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; transition: transform .3s ease; } .d-flex:hover .icon { transform: scale(1.1); } /* ========================= 10. CAROUSEL (testimonials & hero) & CAPTIONS ========================= */ .carousel-item { transition: transform .45s ease, opacity .45s ease; } .carousel-control-prev, .carousel-control-next { width:46px; height:46px; background: rgba(0,0,0,.45); border-radius:999px; top:50%; transform: translateY(-50%); display:flex; align-items:center; justify-content:center; } .carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--color-complementary); border-radius:50%; width:40px; height:40px; } /* Caption */ .carousel-caption { position: absolute; top: 50%; left: 10%; max-width: 50%; transform: translateY(-50%); z-index: 2; text-align: left; border-left: 3px solid var(--color-complementary); } .carousel-caption h1, .carousel-caption p { text-shadow: 2px 2px 4px rgba(0,0,0,.6); } /* Indicators */ .carousel-indicators button { background-color: var(--color-complementary); width: 15px; height: 15px; border-radius: 50%; transition: background-color .3s; } .carousel-indicators .active { background-color: #fff; transform: scale(1.2); } /* Image / banner */ .banner-image { height: 600px; object-fit: cover; transition: transform .5s ease-in-out; } .carousel-item:hover .banner-image { transform: scale(1.05); } /* Responsive tweaks for small screens */ @media (max-width: 768px) { .banner-image { height: 400px; } .carousel-caption { max-width: 70%; left: 5%; } .carousel-caption h1 { font-size: 1.5rem; } .carousel-caption p { font-size: 1rem; } } /* ========================= 11. CTA STRIP ========================= */ .cta-strip { padding: var(--sp-md); border-radius: .5rem; margin: var(--sp-md) 0; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); color: #fff; text-align: center; } .cta-strip .btn { margin-top: .5rem; } /* ========================= 12. FOOTER ========================= */ footer { background: var(--color-dark); color: color-mix(in srgb, var(--color-light) 20%, transparent); padding: 3rem 0 1.5rem; } footer a { color: color-mix(in srgb, var(--color-light) 50%, transparent); transition: color var(--transition-duration); } footer a:hover { color: var(--color-tertiary); } footer .social-icons a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,0.04); margin: 0 .4rem; transition: transform var(--transition-duration); } footer .social-icons a:hover { transform: translateY(-3px); background: var(--color-secondary); color: #fff; } /* ========================= 13. MEDIA / VIDEO THUMBS & GALLERY ========================= */ #remoteVideos video { max-width: 300px; max-height: 200px; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,6,23,0.25); } #localVideoContainer { border: 3px solid #fff; transition: transform var(--transition-duration); } #localVideoContainer:hover { transform: scale(1.03); } /* ========================= 14. ANIMATIONS & REVEALS ========================= */ .fade-in { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 420ms ease; } .fade-in.visible { opacity: 1; transform: none; } /* ========================= 15. SCROLLBAR (optional) ========================= */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); } /* ========================= 16. COMPONENTS: cards, lists, tables, accordions, forms (small tweaks) ========================= */ .list-group-item { transition: background var(--transition-duration) var(--transition-cubic); } .list-group-item:hover { background: color-mix(in srgb, var(--color-light) 95%, var(--color-primary)); } .table th { font-weight: 600; text-transform: uppercase; font-size: .85rem; } .accordion-button { font-weight: 600; font-size: 1.1rem; } .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-light)); color: var(--color-primary); } .accordion-body { font-size: .95rem; } /* Progress bar */ .progress { background: var(--color-border); border-radius: var(--radius); overflow: hidden; } .progress-bar { transition: width .5s ease; } /* ========================= 17. HELPERS & SMALL COMPONENTS (service cards, counters etc) ========================= */ .service-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .service-card { background: #fff; border-radius: 8px; display:flex; flex-direction:column; height:100%; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform .3s ease, box-shadow .3s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0,0,0,0.12); } .service-image { object-fit: cover; height: 200px; width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; } .service-content { padding: 20px; display:flex; flex-direction:column; flex-grow:1; } /* Counter section */ .members-counter-section { background: linear-gradient(135deg, var(--color-tertiary), var(--color-complementary)); color: #fff; padding: 4rem 0; text-align:center; position: relative; overflow: hidden; } .members-counter-section .container { position: relative; z-index: 1; } .counter-number { font-size: 3.5rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; display:inline-block; animation: countUp 2s ease-out; } @keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================= 18. PRELOADER, BACK-TO-TOP, 404, SIGNATURE PAD & AUTH ========================= */ .preloader { position: fixed; inset: 0; background: rgba(255,255,255,.9); z-index: 9999; display:flex; justify-content:center; align-items:center; transition: opacity .3s ease, visibility .3s ease; } .preloader.hidden { opacity: 0; visibility: hidden; } .spinner-border { width: 3rem; height: 3rem; border-width: 4px; } .back-to-top-btn { position: fixed; bottom: 20px; right: 20px; background: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 15px; cursor:pointer; display:none; font-size: 16px; z-index: 100; } .back-to-top-btn:hover { background: #0056b3; } .not-found-container { text-align:center; background:#fff; padding:3rem; max-width:500px; width:100%; border-radius:8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .not-found-container h1 { font-size: 3rem; color: #e74c3c; margin-bottom: .5rem; } .not-found-container p { font-size: 1.2rem; color: #666; margin-bottom: 1.5rem; } /* Signature pad area */ #signature-pad { border: 1px solid #ccc; width: 100%; height: 150px; border-radius: var(--radius); } /* Auth */ .auth-container { background: #fff; padding: 40px; border-radius: var(--card-radius); box-shadow: var(--box-shadow-sm); width: 100%; max-width: 420px; margin: 40px auto; border: 2px solid var(--color-accent-2); } .member-card { transition: transform .3s, box-shadow .3s; } .member-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,.15)!important; } .member-img { width: 100px; height: 100px; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,.1); } .profile-img { width: 180px; height: 180px; object-fit: cover; border: 6px solid #fff; box-shadow: 0 8px 16px rgba(0,0,0,.1); } .info-label { font-weight: 600; color: #495057; } .pub-card { transition: all .3s; } .pub-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,.1); } .pub-card { transition: all .3s; } .pub-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.1); } .thumb { height: 160px; object-fit: cover; } /* ========================= 19. RESPONSIVE TWEAKS ========================= */ @media (min-width: var(--bp-sm)) { .hero { padding: calc(var(--sp-xl) + 1rem); } .btn { padding: .75rem 1.1rem; } } @media (min-width: var(--bp-md)) { .container { padding-inline: 2rem; } .subject-badge { min-height: 64px; } } @media (min-width: var(--bp-lg)) { .container { padding-inline: 3rem; } } /* ========================= ENHANCED RESPONSIVE TEXT FOR SECONDARY BANNER ========================= */ /* 1. Allow text to wrap and prevent overflow */ #secondaryBanner .carousel-caption { max-width: 90%; /* More flexible than fixed % */ word-wrap: break-word; /* Break long words */ overflow-wrap: anywhere; /* Modern wrap-anywhere */ hyphens: auto; /* Optional: hyphenate long words */ padding: 0.75rem 1rem; line-height: 1.3; /* Tighter line height for small screens */ } /* 2. Improve font scaling with better clamp + viewport units */ #secondaryBanner .carousel-caption .display-6 { font-size: clamp(1rem, 4vw + 0.5rem, 1.8rem); /* Min: 1rem, Preferred: scales with viewport, Max: 1.8rem */ } #secondaryBanner .carousel-caption .lead { font-size: clamp(0.85rem, 3.5vw, 1.1rem); margin-top: 0.35rem; } /* 3. Ultra-small screen adjustments (below 400px) */ @media (max-width: 400px) { #secondaryBanner .carousel-caption { max-width: 95%; left: 2.5% !important; padding: 0.5rem; text-align: center; /* Center for balance */ border-left: none; /* Remove border on tiny screens */ } #secondaryBanner .carousel-caption .display-6 { font-size: clamp(0.9rem, 5vw, 1.4rem); line-height: 1.2; } #secondaryBanner .carousel-caption .lead { font-size: clamp(0.75rem, 3vw, 1rem); display: -webkit-box; -webkit-line-clamp: 2; /* Limit to 2 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } /* 4. Optional: Shrink caption container on very narrow screens */ @media (max-width: 350px) { #secondaryBanner .carousel-caption { font-size: 0.8rem; } #secondaryBanner .carousel-caption .display-6 { font-size: 1rem; } #secondaryBanner .carousel-caption .lead { font-size: 0.7rem; -webkit-line-clamp: 1; } } .profile-card { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 2rem; margin-bottom: 2rem; } .benefit-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .benefit-card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .form-label { font-weight: 600; } .alert { margin-bottom: 1.5rem; } .sidebar { background-color: #f8f9fa; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: sticky; top: 20px; } .sidebar-header { border-bottom: 1px solid #dee2e6; } .nav-link { color: #333; padding: 0.75rem 1rem; border-radius: 6px; transition: all 0.3s ease; } .nav-link:hover { background-color: #e9ecef; color: #007bff; } .nav-link.active { background-color: #007bff; color: white !important; } .nav-link i { width: 20px; text-align: center; } @media (max-width: 991px) { .sidebar { padding: 0.5rem; } .collapse.show + .sidebar-header .fa-bars::before { content: "\f00d"; /* Change to X icon when expanded */ } } @media (max-width: 767px) { .sidebar { margin-bottom: 1.5rem; } } .benefit-card .icon { transition: transform 0.3s ease; } .benefit-card:hover .icon { transform: scale(1.2) rotate(5deg); } .subject-badge { font-weight: 800; font-size: 1.8rem; } .bg-gradient-primary { background: linear-gradient(180deg, var(--color-primary), var(--color-complementary)); } .icon-wrapper { width: 64px; height: 64px; background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-radius: 50%; position: relative; margin: 0 auto; } .icon-wrapper::before { content: ''; position: absolute; inset: 8px; background: color-mix(in srgb, var(--color-primary) 15%, transparent); border-radius: 50%; z-index: 1; } .mission-card { transition: all 0.35s ease; border-left: 4px solid transparent; } .mission-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-md); border-left-color: var(--color-primary); } .mission-card .icon-wrapper i { transition: transform 0.3s ease; } .mission-card:hover .icon-wrapper i { transform: scale(1.2); } .blockquote { font-family: var(--font-heading); line-height: 1.4; } @media (max-width: 767.98px) { .display-4 { font-size: 2.3rem; } .icon-wrapper { width: 56px; height: 56px; } .icon-wrapper i { font-size: 1.8rem; } } .vision-statement { font-size: 1.1rem; line-height: 1.75; position: relative; } .vision-statement::before { content: '“'; position: absolute; top: -20px; left: -15px; font-size: 6rem; color: color-mix(in srgb, var(--color-primary) 15%, transparent); font-family: var(--font-heading); font-weight: 700; z-index: 0; } .vision-statement .blockquote { position: relative; z-index: 1; } .vision-card { transition: all 0.35s ease; } .vision-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-md); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); } .vision-card .icon-wrapper { width: 70px; height: 70px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: all 0.3s ease; } .vision-card:hover .icon-wrapper { background: color-mix(in srgb, var(--color-primary) 20%, transparent); transform: scale(1.1); } .border-abana-primary { border-color: var(--color-primary) !important; } @media (max-width: 767.98px) { .display-4 { font-size: 2.3rem; } .vision-statement { padding: 2rem !important; font-size: 1rem; } .vision-statement::before { font-size: 4rem; top: -10px; left: -5px; } } .leader-img { object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.3s ease; } .leader-card:hover .leader-img { transform: scale(1.08); } .leader-card, .committee-card { transition: all 0.35s ease; } .leader-card:hover, .committee-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-md); } .icon-wrapper { width: 64px; height: 64px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .committee-card:hover .icon-wrapper { background: color-mix(in srgb, var(--color-primary) 20%, transparent); } .badge { font-size: 0.9rem; } @media (max-width: 767.98px) { .leader-img { width: 100px; height: 100px; } .display-5 { font-size: 2rem; } } .profile-photo { max-width:180px; height:auto; border-radius:50%; object-fit:cover; } .section { margin-top:2rem; } .nav-tabs .nav-link.active { background:#0d6efd; color:#fff; } .post-card { border: 1px solid #e1e5e9; border-radius: 12px; margin-bottom: 1.5rem; } .comment-card { background: #f8f9fa; border-radius: 8px; padding: 0.75rem; margin: 0.5rem 0; } .reply-form { margin-left: 40px; display: none; } .like-btn { cursor: pointer; } .like-btn.liked { color: #0d6efd; } .notification-badge { font-size: 0.7rem; top: -8px; right: -8px; } /* =========== Members-area specific tweaks =========== */ /* Avatar sizes aligned to existing variables */ .avatar-wrapper { width: 92px; height: 92px; flex-shrink: 0; } .profile-photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(2,6,23,0.06); } /* Card spacing override (members area feels dense otherwise) */ .profile-card { padding: 1.25rem; margin-bottom: 1.25rem; border-radius: calc(var(--card-radius) - .2rem); } .profile-card .card-body { padding: 1rem; } /* Benefit cards using your design tokens */ .benefit-card { background: linear-gradient(180deg,#fff,#fbfdff); border-radius: .9rem; border: 1px solid var(--color-border); transition: transform var(--transition-duration) var(--transition-cubic), box-shadow var(--transition-duration) var(--transition-cubic); } .benefit-card .icon-wrapper { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:1.25rem; background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); } .benefit-card:hover { transform: translateY(-8px); box-shadow: 0 14px 30px rgba(2,6,23,0.06); } /* Make quick stats clean */ .card.no-elev { border-radius: .7rem; border: 1px solid color-mix(in srgb, var(--color-primary) 6%, transparent); padding: .6rem; background: linear-gradient(180deg,#fff,#f7fbff); } /* Offcanvas sidebar tweaks */ .offcanvas { --bs-offcanvas-width: 300px; } .offcanvas .sidebar { padding: 0; box-shadow: none; background: transparent; } .offcanvas .nav-link { display: block; padding: .75rem 0; border-radius: 6px; } /* Accordion small screens */ @media (max-width: 575.98px) { .benefit-card { padding: .85rem; } .profile-card { padding: .9rem; } .avatar-wrapper, .profile-photo { width: 78px; height: 78px; } .offcanvas { --bs-offcanvas-width: 100%; } } /* Accessibility focus styles tuned for your palette */ .benefit-card:focus, .benefit-card:focus-within, .card.no-elev:focus { outline: 3px solid color-mix(in srgb, var(--color-primary) 20%, transparent); outline-offset: 3px; border-radius: .85rem; } /* Reduce motion for hover on touch devices */ @media (hover: none) { .benefit-card:hover { transform: none; box-shadow: 0 6px 14px rgba(2,6,23,0.04); } } /* Slightly stronger CTA on small screens */ @media (max-width: 768px) { .btn-gradient { padding-left: 1.05rem; padding-right: 1.05rem; } .btn-gradient.btn-sm { padding: .5rem .9rem; font-size: .95rem; } } /* Improve list readability inside benefit cards */ .benefit-card ul { padding-left: 1.15rem; margin-bottom: 0.6rem; } /* Enhanced Styling */ .members-counter-section { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); position: relative; min-height: 80vh; display: flex; align-items: center; } .bg-decoration { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.1) 0%, transparent 50%); pointer-events: none; } .counter-wrapper { position: relative; z-index: 2; } .counter-number { font-family: 'Montserrat', 'Inter', system-ui, sans-serif; font-weight: 900; letter-spacing: -0.04em; text-shadow: 0 0 40px rgba(220, 38, 38, 0.4); min-height: 140px; } .counter-plus { animation: pulse 2s infinite; } .counter-text { line-height: 1.7; opacity: 0.95; } .join-btn { background: linear-gradient(45deg, #dc2626, #ef4444); border: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3); } .join-btn:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 40px rgba(220, 38, 38, 0.5); background: linear-gradient(45deg, #b91c1c, #dc2626); } .join-btn .btn-glint { position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transform: skewX(-25deg); transition: 0.6s; } .join-btn:hover .btn-glint { left: 100%; } .hover-lift { transition: transform 0.4s ease; } /* Pulse animation for + sign */ @keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .maxch-80 { max-width: 80ch; } /* Responsive adjustments */ @media (max-width: 768px) { .counter-number { font-size: 4.5rem !important; } .members-counter-section { min-height: 70vh; } }