/* ispac.in CMS + design polish — built by tools/bundle.py from 2 files. Do not edit by hand. */ /* ===== assets/cms.css ===== */ /* --------------------------------------------------------------------------- CMS additions — nothing here changes the approved design. 1. A page whose main heading is carried by a content block renders it as an

so every page has exactly one. These rules give that

the theme's own H2 metrics at every breakpoint, so the type size does not move. 2. Small helpers for the search page's pagination. --------------------------------------------------------------------------- */ #Content h1.mfn-as-h2 { font-size: 40px; line-height: 50px; font-weight: 700; letter-spacing: 0px; margin: 0 0 20px; } @media only screen and (min-width: 768px) and (max-width: 959px) { #Content h1.mfn-as-h2 { font-size: 34px; line-height: 43px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #Content h1.mfn-as-h2 { font-size: 30px; line-height: 38px; } } @media only screen and (max-width: 479px) { #Content h1.mfn-as-h2 { font-size: 24px; line-height: 30px; } } #Content .pagination { margin: 30px 0 0; } #Content .pagination a, #Content .pagination span.current { display: inline-block; min-width: 36px; padding: 7px 10px; margin: 0 3px; border: 1px solid #e3e3e3; border-radius: 4px; text-align: center; } #Content .pagination span.current { background: var(--ispac-accent, #f07c1f); border-color: var(--ispac-accent, #f07c1f); color: #fff; } /* --------------------------------------------------------------------------- Dropdown safety. The theme positions a submenu at `left:0` of its parent, so on a wide screen the last few menu items push their panel past the window edge and it gets clipped. Anchoring the last two items' panels to their right edge keeps every dropdown on screen at any width. --------------------------------------------------------------------------- */ #Top_bar #menu ul.menu > li.submenu { position: relative; } #Top_bar #menu ul.menu > li.submenu > ul.sub-menu { min-width: 200px; } #Top_bar #menu ul.menu > li.submenu:nth-last-child(-n+3) > ul.sub-menu { left: auto; right: 0; } @media (max-width: 1240px) { #Top_bar #menu ul.menu > li.submenu > ul.sub-menu { left: auto; right: 0; } } /* the mobile drawer keeps the theme's own stacked behaviour */ #Header_wrapper.mfn-mobile-open #menu ul.menu > li.submenu > ul.sub-menu { right: auto; left: auto; } /* --------------------------------------------------------------------------- Mobile menu. The theme's own slide-in drawer (#Side_slide, from the `mobile-side-slide` body class) is the mobile menu — it already carries the full menu and expands sub-items. The flat build also shipped a hand-rolled fallback that opened a second menu inside the header; the CMS drops that script, and these rules make sure its leftover styles can never show a duplicate menu behind the drawer. --------------------------------------------------------------------------- */ #Header_wrapper.mfn-mobile-open #menu { display: none !important; } #Side_slide #menu ul li .menu-toggle { cursor: pointer; } /* ===== assets/custom.css ===== */ /* site overrides — put slider / contact-form / tweak CSS here (keep it out of the pages) */ /* Betheme equal-height valign-middle pulls columns up via translateY(-50%), overlapping the previous section/hero when the theme's equalize JS is absent. Neutralize the transform at all widths (matches Betheme's own responsive reset). */ .equal-height-wrap .mcb-wrap .mcb-wrap-inner{top:0!important;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important} /* mfn-mobile-menu-fix — Betheme's mobile hamburger relies on its JS to open the menu; in a frozen build that JS is unreliable, so tapping does nothing. These rules + MOBILE_MENU_JS toggle a `mfn-mobile-open` class on #Header_wrapper with no dependency on Betheme JS. Only active when the class is set (added solely by tapping the hamburger, which is hidden on desktop), so the desktop horizontal menu is untouched. */ #Header_wrapper.mfn-mobile-open #Top_bar{position:relative} #Header_wrapper.mfn-mobile-open #menu{display:block!important;position:absolute;left:0;right:0;top:100%;background:#fff;z-index:99999;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:80vh;overflow:auto} #Header_wrapper.mfn-mobile-open #menu>ul.menu{display:block!important;width:100%} #Header_wrapper.mfn-mobile-open #menu ul.menu>li{display:block!important;float:none!important;width:100%!important;margin:0!important;border-bottom:1px solid rgba(0,0,0,.08)} #Header_wrapper.mfn-mobile-open #menu ul.menu li a{display:block!important;padding:14px 22px!important;color:#222!important;line-height:1.3!important} #Header_wrapper.mfn-mobile-open #menu ul.sub-menu{position:static!important;display:none;left:auto;top:auto;box-shadow:none;min-width:0;background:rgba(0,0,0,.03)} #Header_wrapper.mfn-mobile-open #menu li.mfn-sub-open>ul.sub-menu{display:block!important} #Header_wrapper.mfn-mobile-open #menu ul.sub-menu li a{padding-left:42px!important} .responsive-menu-toggle{cursor:pointer} /* --- contact form (replaces Contact Form 7; theme styling kept) --- */ #ispac-contact .ispac-cap{display:flex;align-items:center;gap:12px} #ispac-contact .ispac-cap-q{font-size:17px;font-weight:700;letter-spacing:1px;background:#f4f4f4;border:1px solid #ddd;border-radius:4px;padding:11px 16px;white-space:nowrap;user-select:none} #ispac-contact .ispac-cap input{flex:1} #ispac-contact .ispac-hp{position:absolute;left:-9999px} #ispac-contact .wpcf7-response-output{display:none;margin:12px 0 0;padding:10px 14px;border-radius:4px} #ispac-contact .cf-ok{display:block;border:1px solid #46b450;background:#f1f9f1;color:#2b6b2f} #ispac-contact .cf-err{display:block;border:1px solid #dc3232;background:#fdf2f2;color:#a12020} /* ====================================================================== DESIGN POLISH — ispac.in (layout only; colours/content untouched) ====================================================================== */ /* ---------- 1. Blog grid: equal cards, small title, date beside it ------ */ #Content .posts_group.grid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:30px; } #Content .posts_group.grid{position:static !important; height:auto !important} #Content .posts_group.grid .post-item{ width:auto !important; margin:0 !important; float:none !important; position:static !important; left:auto !important; top:auto !important; transform:none !important; display:flex; flex-direction:column; background:#fff; border:1px solid #ececec; border-radius:8px; overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; } #Content .posts_group.grid .post-item:hover{ box-shadow:0 10px 28px rgba(0,0,0,.09); transform:translateY(-2px); } #Content .posts_group.grid .post-item .date_label{display:none} #Content .posts_group.grid .image_frame{margin:0 !important; border:0 !important} #Content .posts_group.grid .image_frame .image_wrapper{ aspect-ratio:16/10; overflow:hidden; line-height:0; background:#f3f3f3; } #Content .posts_group.grid .image_frame .image_wrapper > a{display:block;height:100%} #Content .posts_group.grid .image_frame img{ width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .45s ease; } #Content .posts_group.grid .post-item:hover .image_frame img{transform:scale(1.05)} #Content .posts_group.grid .post-desc-wrapper{flex:1; display:flex; padding:0} #Content .posts_group.grid .post-desc{ flex:1; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto 1fr auto; column-gap:14px; padding:16px 18px 6px; } #Content .posts_group.grid .post-title{grid-column:1; grid-row:1; margin:0} #Content .posts_group.grid .post-title h4.entry-title{ font-size:17px !important; line-height:1.45 !important; margin:0 !important; font-weight:600; letter-spacing:0; } #Content .posts_group.grid .post-title h4.entry-title a{color:#2b2b2b} #Content .posts_group.grid .post-title h4.entry-title a:hover{color:var(--ispac-accent,#f07c1f)} #Content .posts_group.grid .post-head{grid-column:2; grid-row:1; margin:0} #Content .posts_group.grid .post-head .post-meta, #Content .posts_group.grid .post-head .author-date, #Content .posts_group.grid .post-head .date{ margin:0 !important; padding:0 !important; border:0 !important; font-size:12px; line-height:1.45; color:#9a9a9a; white-space:nowrap; } #Content .posts_group.grid .post-head .post-date{font-size:12px; color:#9a9a9a} #Content .posts_group.grid .post-head i{font-size:12px; margin-right:3px} #Content .posts_group.grid .post-excerpt{grid-column:1/-1; grid-row:2; margin:8px 0 0; font-size:14px; color:#6f6f6f} #Content .posts_group.grid .post-footer{ grid-column:1/-1; grid-row:4; margin:14px 0 0; padding:10px 0 4px; border-top:1px solid #f0f0f0; font-size:13px; display:flex; align-items:center; justify-content:space-between; gap:10px; } #Content .posts_group.grid .post-footer > *{ float:none !important; margin:0 !important; padding:0 !important; width:auto !important; border:0 !important; white-space:nowrap; } /* ---------- 2. WordPress galleries: tidy masonry, nothing cropped ------- */ #Content .gallery{ display:block !important; columns:3; column-gap:16px; margin:0 0 26px !important; } /* a single-image gallery (the chapter certificates) — left aligned, not full bleed */ #Content .gallery.gallery-columns-1{columns:1; max-width:560px; margin-left:0 !important; margin-right:auto !important} #Content .gallery.gallery-columns-1 .gallery-item{margin-bottom:0 !important} #Content .gallery.gallery-columns-2{columns:2} #Content .gallery.gallery-columns-4, #Content .gallery.gallery-columns-5{columns:4} /* the theme's masonry JS absolutely-positions these and stamps an inline height on the container — neutralise both so the CSS columns can work */ #Content .gallery.masonry{position:static !important; height:auto !important} #Content .gallery .gallery-item{ width:100% !important; max-width:100% !important; margin:0 0 16px !important; float:none !important; position:static !important; left:auto !important; top:auto !important; right:auto !important; transform:none !important; display:block !important; break-inside:avoid; page-break-inside:avoid; overflow:hidden; } #Content .gallery .gallery-icon{margin:0 !important; padding:0 !important} #Content .gallery .gallery-icon a{ display:block; line-height:0; overflow:hidden; border-radius:6px; background:#f3f3f3; border:1px solid #ececec; } #Content .gallery .gallery-icon img{ width:100% !important; height:auto !important; display:block; border:0 !important; padding:0 !important; margin:0 !important; transition:transform .45s ease; } #Content .gallery .gallery-icon a:hover img{transform:scale(1.04)} #Content .gallery .gallery-caption{ font-size:13px; line-height:1.5; color:#7a7a7a; margin:8px 2px 0; padding:0; } @media(max-width:1024px){#Content .gallery,#Content .gallery.gallery-columns-4{columns:2}} @media(max-width:600px){#Content .gallery,#Content .gallery.gallery-columns-2, #Content .gallery.gallery-columns-3,#Content .gallery.gallery-columns-4{columns:1}} /* ---------- 3. Team / chapter member cards ----------------------------- */ .mcb-wrap-inner:has(> .column_our_team){ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:stretch; } .mcb-wrap-inner:has(> .column_our_team.one-half){grid-template-columns:repeat(2,1fr)} /* chapter committees: 6 compact cards per row */ .mcb-wrap-inner:has(> .column_our_team:not(.one-third)){grid-template-columns:repeat(6,1fr); gap:18px} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)) .desc_wrapper{padding:12px 12px 14px} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)) .desc_wrapper h4{font-size:14px !important; line-height:1.35} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)) .desc_wrapper .subtitle{font-size:12px; margin:0 0 8px !important} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)) .desc_wrapper hr.hr_color{width:32px; margin:0 0 8px !important} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)) .desc_wrapper .desc{font-size:13px; line-height:1.55} @media(max-width:1280px){.mcb-wrap-inner:has(> .column_our_team:not(.one-third)){grid-template-columns:repeat(4,1fr)}} @media(max-width:1024px){.mcb-wrap-inner:has(> .column_our_team){grid-template-columns:repeat(2,1fr)} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)){grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.mcb-wrap-inner:has(> .column_our_team:not(.one-third)){grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.mcb-wrap-inner:has(> .column_our_team){grid-template-columns:1fr} .mcb-wrap-inner:has(> .column_our_team:not(.one-third)){grid-template-columns:repeat(2,1fr)}} .mcb-wrap-inner:has(> .column_our_team) > .column{ width:auto !important; margin:0 !important; float:none !important; } .mcb-wrap-inner:has(> .column_our_team) > .column:not(.column_our_team){grid-column:1/-1} .column_our_team{display:flex} .column_our_team .team{ display:flex; flex-direction:column; width:100%; border:1px solid #ececec; border-radius:10px; overflow:hidden; background:#fff; transition:box-shadow .25s ease, transform .25s ease; } .column_our_team .team:hover{box-shadow:0 10px 26px rgba(0,0,0,.08); transform:translateY(-2px)} .column_our_team .image_frame, .column_our_team .image_frame .image_wrapper{ margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .column_our_team .image_frame .image_wrapper{ aspect-ratio:1/1; overflow:hidden; line-height:0; background:#f2f2f2; } .column_our_team .image_frame img{ width:100% !important; height:100% !important; object-fit:cover; object-position:center 18%; display:block; } .column_our_team .desc_wrapper{flex:1; display:flex; flex-direction:column; padding:16px 18px 20px} .column_our_team .desc_wrapper h4{font-size:17px !important; line-height:1.4; margin:0 0 4px !important; font-weight:600} .column_our_team .desc_wrapper .subtitle{margin:0 0 12px !important; font-size:13px; color:#9a9a9a} .column_our_team .desc_wrapper hr.hr_color{margin:0 0 12px !important; width:46px} .column_our_team .desc_wrapper .desc{font-size:14px; line-height:1.6; color:#6f6f6f} /* ---------- 0. Compact header ------------------------------------------ */ /* the theme ships a 120px logo in a ~150px bar; tighten it without changing the layout or hiding anything */ #Action_bar{padding:4px 0 !important} #Action_bar .contact_details li, #Action_bar .social li{line-height:30px !important; font-size:13px} #Top_bar{padding:0 !important; box-shadow:0 1px 0 rgba(0,0,0,.06)} #Top_bar .container{min-height:0 !important} #Top_bar .column{margin:0 !important} #Top_bar #logo{ height:auto !important; min-height:0 !important; line-height:0 !important; padding:10px 0 !important; margin:0 !important; } #Top_bar #logo img{max-height:64px !important; height:auto !important; width:auto !important} #Top_bar .top_bar_left, #Top_bar .top_bar_right{height:auto !important; background:none !important} #Top_bar .menu_wrapper{margin:0 !important} #Top_bar .menu > li > a{padding:0 !important; height:auto !important} #Top_bar .menu > li > a > span:not(.description){ line-height:84px !important; padding:0 13px !important; font-size:15px; } #Top_bar .menu > li > a span.description{display:none} #Top_bar .secondary_menu_wrapper{display:none} .header_placeholder{height:0 !important} /* Google-translate button — switched off site-wide */ #glt-translate-trigger, #glt-toolbar, #glt-footer, #flags, #google_language_translator, .goog-te-banner-frame, .skiptranslate{display:none !important} body{top:0 !important} #Header_wrapper{background-position:center top} @media(max-width:1240px){#Top_bar .menu > li > a > span:not(.description){padding:0 9px !important; font-size:14px}} @media(max-width:768px){#Top_bar #logo img{max-height:52px !important} #Top_bar #logo{padding:8px 0 !important}} /* ---------- 4. Related posts (bottom of every news post) --------------- */ #Content .section-post-related .section-related-ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } #Content .section-post-related .section-related-ul.col-3{grid-template-columns:repeat(3,1fr)} #Content .section-post-related .section-related-ul.col-2{grid-template-columns:repeat(2,1fr)} @media(max-width:1024px){#Content .section-post-related .section-related-ul, #Content .section-post-related .section-related-ul.col-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){#Content .section-post-related .section-related-ul, #Content .section-post-related .section-related-ul.col-3{grid-template-columns:1fr}} #Content .section-post-related h4{font-size:20px; margin:0 0 20px} #Content .post-related{ width:auto !important; margin:0 !important; float:none !important; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto 1fr auto; background:#fff; border:1px solid #ececec; border-radius:8px; overflow:hidden; padding:0 0 16px; transition:box-shadow .25s ease, transform .25s ease; } #Content .post-related:hover{box-shadow:0 10px 28px rgba(0,0,0,.09); transform:translateY(-2px)} #Content .post-related .single-photo-wrapper{grid-column:1/-1; grid-row:1; margin:0 0 14px !important} #Content .post-related .image_frame{margin:0 !important; padding:0 !important; border:0 !important} #Content .post-related .image_wrapper{ aspect-ratio:16/10; overflow:hidden; line-height:0; background:#f3f3f3; } #Content .post-related .image_wrapper > a{display:block; height:100%} #Content .post-related .image_wrapper img{ width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .45s ease; } #Content .post-related:hover .image_wrapper img{transform:scale(1.05)} #Content .post-related .date_label{ grid-column:2; grid-row:2; align-self:start; position:static !important; background:none !important; box-shadow:none !important; color:#9a9a9a !important; font-size:12px; line-height:1.5; font-weight:400; padding:0 16px 0 0 !important; margin:0 !important; border:0 !important; white-space:nowrap; } #Content .post-related .desc{display:contents} #Content .post-related .desc > h4{ grid-column:1; grid-row:2; margin:0 !important; padding:0 6px 0 16px; font-size:16px !important; line-height:1.45 !important; font-weight:600; } #Content .post-related .desc > h4 a{color:#2b2b2b} #Content .post-related .desc > h4 a:hover{color:var(--ispac-accent,#f07c1f)} #Content .post-related .desc > hr.hr_color{ grid-column:1/-1; grid-row:3; width:auto !important; margin:14px 16px 0 !important; } #Content .post-related .desc > .button{ grid-column:1/-1; grid-row:5; justify-self:start; margin:14px 0 0 16px !important; } /* ---------- 5. Lightbox (shared by every gallery) ---------------------- */ .ig-lb{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.93);display:none;align-items:center;justify-content:center} .ig-lb.on{display:flex} .ig-lb img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:3px} .ig-lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer; width:48px;height:48px;line-height:1;font-size:30px;border-radius:50%;padding:0; display:flex;align-items:center;justify-content:center;transition:background .2s ease} .ig-lb button:hover{background:rgba(255,255,255,.28)} .ig-lb .ig-close{top:18px;right:18px;font-size:26px} .ig-lb .ig-prev{left:18px;top:50%;transform:translateY(-50%)} .ig-lb .ig-next{right:18px;top:50%;transform:translateY(-50%)} .ig-lb .ig-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:14px;letter-spacing:1px} @media(max-width:600px){.ig-lb button{width:38px;height:38px;font-size:22px} .ig-lb .ig-prev{left:6px}.ig-lb .ig-next{right:6px}} /* ---------- thumbnail grid used by the rebuilt photo gallery ---------- */ .ispac-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 24px} .ispac-gallery .ig-item{display:block;overflow:hidden;border-radius:6px;background:#f2f2f2;aspect-ratio:4/3;line-height:0;font-size:0;margin:0;border:1px solid #ececec} .ispac-gallery .ig-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .ispac-gallery .ig-item:hover img{transform:scale(1.06)} @media(max-width:600px){.ispac-gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}