/* ========================================================== Novareboot Power Systems Ltd — brand overrides Logo sizing + responsiveness fixes on top of the base theme. Keep this file last in the so it wins the cascade. ========================================================== */ /* Equal-size images across every card/section — the template only ever set width:100% on these, with no height control, which was fine when every image shipped pre-cropped to the same ratio. Real photos vary in orientation (portrait phone shots vs. landscape stock), so without a fixed aspect-ratio + object-fit:cover, each grid item sizes itself off its own image and the row goes ragged. Locking width + aspect-ratio together makes every image in a given family the same height too. */ .srex-portfolio-two__item img, .srex-portfolio__item img, .srex-blog-one__post__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .blog-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .single_latest_blog img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .srex-about-us-two__left-content__img img, .srex-about-us-two__right-content__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* Header logo (full lockup incl. tagline) */ .ud-main-menu__logo img, .ud-side-popup__header-logo img { max-height: 60px; width: auto; height: auto; } /* Sticky header: fixed to the viewport, swaps to a Deep Navy background with the white logo/nav once the page is scrolled. */ .srex-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1001; } body { padding-top: 96px; } @media (max-width: 767px) { body { padding-top: 76px; } } .srex-header.sticky-top { background-color: #0F2747 !important; } .ud-main-menu__logo .nrb-logo-white { display: none; } .srex-header.sticky-top .ud-main-menu__logo .nrb-logo-default { display: none; } .srex-header.sticky-top .ud-main-menu__logo .nrb-logo-white { display: inline-block; } .srex-header.sticky-top .ud-main-menu ul > li > a { color: #fff; } .srex-header.sticky-top .ud-main-menu ul > li > a:hover { color: #F5B400; } /* The mobile off-canvas menu backdrop sits BELOW the fixed header (so the header stays crisp/undimmed instead of getting darkened along with the rest of the page), while the off-canvas panel itself sits above both. */ .overlay { z-index: 1000; } .ud-side-popup { z-index: 1002; } /* Footer logo */ .srex-footer-two__links__logo img { max-height: 64px; width: auto; height: auto; } @media (max-width: 991px) { .ud-main-menu__logo img, .ud-side-popup__header-logo img { max-height: 48px; } .srex-footer-two__links__logo img { max-height: 52px; } } @media (max-width: 575px) { .ud-main-menu__logo img, .ud-side-popup__header-logo img { max-height: 40px; } .srex-footer-two__links__logo img { max-height: 44px; } } /* Decorative "frame" watermark icon (About, Premium Services, Portfolio, Blog and Newsletter sections) — shrink it down and fade it into the section background instead of a bold, oversized logo mark. */ .srex-section__frame, .srex-about-us-two__img, .srex-service-two__frame, .srex-portfolio-two__frame, .srex-blog-two__frame { width: 64px; height: auto; opacity: 0.1; pointer-events: none; } @media (max-width: 767px) { .srex-section__frame, .srex-about-us-two__img, .srex-service-two__frame, .srex-portfolio-two__frame, .srex-blog-two__frame { width: 44px; } } /* Preloader — Novareboot icon + wordmark fading in and out while the page loads */ .nrb-preloader { position: fixed; inset: 0; z-index: 99999; background: #FFFFFF; display: flex; align-items: center; justify-content: center; transition: opacity .35s ease, visibility .35s ease; } .nrb-preloader__inner { display: flex; flex-direction: column; align-items: center; } .nrb-preloader__icon { width: 56px; height: auto; animation: nrb-fade 1.8s ease-in-out infinite; } .nrb-preloader__text { margin-top: 14px; font-size: 32px; font-weight: 900; letter-spacing: 4px; color: #0F2747; animation: nrb-fade 1.8s ease-in-out infinite; animation-delay: .3s; } .nrb-preloader--hidden { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes nrb-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nrb-preloader__icon, .nrb-preloader__text { animation: none; } } /* Single-H1-per-page fix: these blocks originally used

, demoted to

in markup — restyle to match so nothing visually changes. */ .single_pro_details h2, .single_ser_details h2 { margin: 30px 0; font-size: 48px; } .srex_contact_content h2 { font-size: 40px; margin-bottom: 25px; } /* Product cards (Products page) — photo + title + description */ .nrb-product-card { background: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 25px rgba(15, 39, 71, 0.08); height: 100%; } .nrb-product-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .nrb-product-card__body { padding: 24px; } .nrb-product-card__body h3 { color: #0F2747; font-size: 20px; margin-bottom: 10px; } .nrb-product-card__body p { color: #4B5563; margin-bottom: 0; } a.nrb-product-card { display: block; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } a.nrb-product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15, 39, 71, 0.15); } a.nrb-product-card:hover .nrb-product-card__body h3 { color: #F5B400; } /* Header "Get a Quote" buttons (replaces the old chat/phone block on desktop, sits beside the hamburger icon on mobile) */ .srex-header__quote-btn { margin-left: 20px; } .srex-header__quote-btn-mobile { padding: 6px 10px !important; font-size: 10.5px !important; line-height: 1.4 !important; white-space: nowrap; margin-right: 10px; } /* Card icons — Font Awesome glyphs standing in for the template's generic icon SVGs, sized to match the circular icon badges already in the design. */ .srex-info-box__item__img i, .srex-support__item img + i, .srex-support__item i, .srex-stats__item__icon i { font-size: 34px; color: #0F2747; } .srex-support__item i { font-size: 40px; } .srex-stats__item__icon i { font-size: 40px; color: #F5B400; } /* Footer text contrast — several footer elements inherit Charcoal Gray or Deep Navy text colors meant for light backgrounds (the global default is navy body text), which is nearly unreadable against the footer's own navy background. The link list even only turned readable on :hover. Force a light, legible color everywhere in the footer instead. */ .srex-footer-two__links__logo__text, .srex-footer__newsletter p, .srex-footer__bottom p { color: rgba(255, 255, 255, 0.75); } .footer-two .srex-footer__links__wrapper li a, .srex-footer__bottom__links li a { color: rgba(255, 255, 255, 0.75) !important; } .footer-two .srex-footer__links__wrapper li a:hover, .srex-footer__bottom__links li a:hover { color: #F5B400 !important; } /* Compact contact details, moved from their own full-width footer row into the Newsletter column so the footer takes up less vertical space. */ .nrb-footer-contact { margin-top: 18px; } .nrb-footer-contact p { display: flex; align-items: center; gap: 8px; color: #fff; opacity: 0.85; font-size: 13px; margin-bottom: 8px; } .nrb-footer-contact p:last-child { margin-bottom: 0; } .nrb-footer-contact i { color: #F5B400; width: 14px; text-align: center; flex-shrink: 0; } .nrb-footer-contact a { color: #fff; } .nrb-footer-contact a:hover { color: #F5B400; } /* Solar Accessories — auto-sliding image tiles (Products page) */ .nrb-accessories-slider { margin-top: 50px; } .nrb-accessories-slider__item { padding: 10px; } .nrb-accessories-slider__item img { width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; display: block; box-shadow: 0 4px 20px rgba(15, 39, 71, 0.12); } .nrb-accessories-slider__item p { text-align: center; margin: 16px 0 0; font-weight: 700; color: #0F2747; } .nrb-accessories-slider .slick-track { display: flex; align-items: stretch; } .nrb-accessories-slider .slick-slide { height: auto; } /* Equal-height cards — Bootstrap's .row is already flex with align-items:stretch, so every .col-* in a row is already the same height as its tallest sibling. These cards just need to actually fill that column instead of shrinking to their own content, so a card with a longer title/description doesn't end up taller than its neighbours. */ .srex-info-box__item, .srex-blog-one__post { display: flex; flex-direction: column; } /* "Read More" / "Learn More" links (shared by info-box cards and blog cards) — a small, consistent gap above them, not pinned to the bottom of the card, so it doesn't leave a large empty gap on a stretched card. */ .srex-info-box__more { margin-top: 10px; padding-top: 0; } /* Card titles and descriptions vary in length card to card, which is what was actually pushing "Read More" out of horizontal alignment across a row (not just the stretched card height). Give the title a reserved two-line height so a one-line title doesn't sit shorter than a neighbouring two-line title, and clamp the description to a fixed number of lines — with an ellipsis on anything longer — so every card in a row has the exact same text-block height above "Read More". Full copy is still available on the relevant details page. */ .srex-info-box__item > p, .srex-blog-one__post h3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .srex-info-box__item > p { -webkit-line-clamp: 3; line-clamp: 3; min-height: 72px; } .srex-blog-one__post h3 { -webkit-line-clamp: 2; line-clamp: 2; min-height: 56px; } /* Simple icon+label rows — keep their existing horizontal (d-flex) layout, just stretch to match the tallest sibling in the row. */ .srex-support__item, .srex-stats__item { height: 100%; } /* Blog cards (homepage "From Our Solar Knowledge Hub") — two bugs caused by the flex-column equal-height treatment above: 1. The thumbnail is a flex child with no protected size, so the flex algorithm was free to shrink it down to a sliver to make room for the rest of the card's content. 2. The category pill is `position:absolute; top:45%`, originally sized against just the image — now that the card itself is tall (to match its neighbours), 45% lands in the middle of the card and overlaps the date/title text instead of sitting on the image. Fix: stop the image from shrinking, and turn the pill into a normal, auto-sized element in the flow instead of an absolutely-positioned one. */ .srex-blog-one__post__img { flex-shrink: 0; } /* The four thumbnails come from different source photos with different native aspect ratios (the "Panel Performance" card reuses a portrait project photo, the other three are landscape) — without a fixed height that one image renders much taller than its siblings, which in turn drags the whole card (and its equal-height row) taller too. Crop all of them to the same height instead. */ .srex-blog-one__post__img img { height: 200px; object-fit: cover; } .srex-blog-two__post__badge { position: static; align-self: flex-start; display: inline-block; width: auto; height: auto; padding: 6px 16px; margin-top: 16px; border-radius: 999px; line-height: normal; } .srex-blog-two__post__badge h6 { margin-bottom: 0; font-size: 12px; white-space: nowrap; } /* ========================================================== New homepage / about / blog sections ========================================================== */ /* "Why Solar?" benefit cards (homepage) and reused for simple icon+label grids elsewhere. */ .nrb-benefit-card { background: #E5E7EB; border-radius: 16px; padding: 30px 20px; text-align: center; height: 100%; transition: all 0.3s ease-in-out; } .nrb-benefit-card:hover { background: #fff; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .nrb-benefit-card__icon { width: 64px; height: 64px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: all 0.3s ease-in-out; } .nrb-benefit-card:hover .nrb-benefit-card__icon { background: #E5E7EB; } .nrb-benefit-card__icon i { font-size: 26px; color: #0F2747; } .nrb-benefit-card p { margin: 0; font-weight: 700; color: #0F2747; } /* "Our Project Process" (homepage) — numbered step cards in a plain, equal-height grid (same pattern as the other card grids on the site). */ .nrb-process { margin-top: 50px; } .nrb-process__step { height: 100%; text-align: center; background: #E5E7EB; border-radius: 16px; padding: 30px 20px; transition: all 0.3s ease-in-out; } .nrb-process__step:hover { background: #fff; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); } .nrb-process__step__number { width: 50px; height: 50px; background: #F5B400; color: #0F2747; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; margin: 0 auto 16px; } .nrb-process__step h3 { color: #0F2747; font-size: 18px; margin-bottom: 10px; } .nrb-process__step p { color: #4B5563; margin-bottom: 0; font-size: 14px; } /* "Why Novareboot?" contrast band (homepage) */ .nrb-why-band { background: #0F2747; padding: 80px 0; position: relative; z-index: -1; } /* The newsletter box that follows it has a built-in -100px top margin, designed to float up over whatever section originally preceded it. Now that this navy band sits there instead, that pull-up needs to be cancelled out or the newsletter box overlaps the band above it. */ .nrb-why-band + .srex-news-letter { margin-top: 0; } @media (max-width: 767px) { .nrb-why-band + .srex-news-letter { margin-top: 0; } } .nrb-why-band .srex-section__head { margin-bottom: 0; } .nrb-why-band .srex-section__head__badge { color: #F5B400; } .nrb-why-band .srex-section__head__title { color: #fff; max-width: 700px; margin: 0 auto 30px; } .nrb-why-band__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 0; margin: 0; list-style: none; } .nrb-why-band__tags li { background: rgba(255, 255, 255, 0.08); border: 1px solid #F5B400; color: #fff; padding: 12px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; } /* Section intro paragraph — used under a centered section heading */ .srex-section__head__desc { color: #4B5563; max-width: 640px; margin: 0 auto; } /* Reusable pill/chip grid — "Did You Know?" topics (blog page) and "Industries We Serve" (about page). */ .nrb-chip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; } .nrb-chip-list li { display: flex; align-items: center; gap: 10px; background: #E5E7EB; color: #0F2747; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: all 0.3s ease-in-out; } .nrb-chip-list li:hover { background: #0F2747; color: #fff; } .nrb-chip-list li:hover i { color: #F5B400; } .nrb-chip-list li i { color: #F5B400; font-size: 16px; } /* Row-to-row breathing space for the card grids above. Bootstrap rows are flex containers with align-items:stretch — when a card is stretched to height:100% of its column, its own margin-bottom stops creating any visible gap before the next wrapped row (the stretch swallows it), so two rows of cards end up flush against each other with zero space between. The fix is to add the gap at the row level instead, via Bootstrap's own gutter-y variable, which applies as margin-top on each column and isn't affected by the child's stretched height. */ .srex-info-box .row, .srex-blog-one .row, .srex-blog-two .row, .srex-stats__items .row { --bs-gutter-y: 30px; } /* Button rows that hold two side-by-side CTAs (hero, etc.) — the text itself never wraps inside a button (see .srex-btn white-space:nowrap and its fluid font-size), but on very narrow screens two full-size buttons still won't both fit on one line. Let the row wrap to a new line there instead of squeezing/overflowing either button. */ .srex-hero-two__box .d-flex.gap-4 { flex-wrap: wrap; row-gap: 12px; } /* Solar calculator hero section (homepage) */ .nrb-calc-hero { background: linear-gradient(135deg, rgba(15, 39, 71, 0.93) 0%, rgba(26, 58, 99, 0.9) 100%), url(../images/real/panel-mount-tool.jpg) center center/cover no-repeat; padding: 80px 20px; border-radius: 20px; margin: 0 auto 60px; max-width: 1320px; overflow: hidden; } @media (max-width: 767px) { .nrb-calc-hero { padding: 44px 14px; border-radius: 14px; } } .nrb-calc-hero .container, .nrb-calc-hero .row, .nrb-calc-hero [class^="col-"] { min-width: 0; } .nrb-calc-hero .srex-section__head__badge { color: #F5B400; } .nrb-calc-hero__content h2 { color: #fff; font-size: 40px; margin: 14px 0 18px; } @media (max-width: 767px) { .nrb-calc-hero__content h2 { font-size: 30px; } } .nrb-calc-hero__content p { color: rgba(255, 255, 255, 0.8); max-width: 480px; margin-bottom: 28px; font-size: 16px; line-height: 28px; } .nrb-calc-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; } .nrb-calc-hero__btn-outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; } .nrb-calc-hero__btn-outline:hover { background: #fff; color: #0F2747; } .nrb-calc-hero__badges { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; margin: 0; } .nrb-calc-hero__badges li { color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .nrb-calc-hero__badges i { color: #F5B400; } .nrb-calc-hero__card { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); min-width: 0; max-width: 100%; box-sizing: border-box; } @media (max-width: 767px) { .nrb-calc-hero__card { padding: 20px; margin-top: 30px; } } .nrb-calc-hero__card h4 { color: #0F2747; font-size: 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .nrb-calc-hero__card h4 i { color: #F5B400; } .nrb-calc-hero__card label { display: block; font-size: 13px; font-weight: 700; color: #0F2747; margin-bottom: 8px; } .nrb-calc-hero__card input[type="text"], .nrb-calc-hero__card input[type="number"], .nrb-calc-hero__card select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 14px 22px; border: 1px solid #E5E7EB; border-radius: 10px; color: #0F2747; margin-bottom: 18px; font-size: 16px; line-height: 28px; } .nrb-calc-hero__toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 18px; } .nrb-calc-hero__toggle__opt { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px 6px; font-weight: 700; font-size: 13px; color: #4B5563; cursor: pointer; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 400px) { .nrb-calc-hero__toggle__opt { font-size: 12px; padding: 10px 4px; } } .nrb-calc-hero__toggle__opt input { display: none; } .nrb-calc-hero__toggle__opt:has(input:checked) { border-color: #F5B400; background: rgba(245, 180, 0, 0.08); color: #0F2747; } .nrb-calc-hero__toggle__opt i { color: #F5B400; } .nrb-calc-hero__prefixed { display: flex; align-items: center; border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 18px; overflow: hidden; max-width: 100%; } .nrb-calc-hero__prefixed span { padding: 0 14px; color: #4B5563; font-weight: 700; flex-shrink: 0; } .nrb-calc-hero__prefixed input { border: none !important; margin-bottom: 0 !important; border-radius: 0 !important; padding-left: 0 !important; min-width: 0; flex: 1 1 auto; } .nrb-calc-hero__submit { width: 100%; justify-content: center; display: flex; align-items: center; gap: 10px; } .nrb-calc-hero__stat { text-align: center; border-top: 1px solid #E5E7EB; margin-top: 24px; padding-top: 20px; } .nrb-calc-hero__stat span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #4B5563; margin-bottom: 6px; } .nrb-calc-hero__stat h3 { color: #0F2747; font-size: 20px; margin: 0; } /* Terms & Conditions / Privacy Policy prose */ .nrb-legal__updated { color: #4B5563; font-style: italic; margin-bottom: 30px; } .nrb-legal h2 { font-size: 22px; color: #0F2747; margin-top: 40px; margin-bottom: 14px; } .nrb-legal p { color: #4B5563; margin-bottom: 16px; line-height: 1.8; } .nrb-legal ul { margin: 0 0 20px; padding-left: 20px; } .nrb-legal ul li { color: #4B5563; line-height: 1.8; margin-bottom: 8px; list-style: disc; } .nrb-legal strong { color: #0F2747; } .nrb-legal a { color: #0F2747; text-decoration: underline; } .nrb-legal a:hover { color: #F5B400; } .nrb-legal__disclaimer { margin-top: 40px; padding: 18px 20px; background: #E5E7EB; border-left: 3px solid #F5B400; border-radius: 8px; font-size: 13px; font-style: italic; } /* About Us section portrait image (About page + homepage) — cap the height so a tall/portrait source photo doesn't tower over the text column. */ .srex-about-us-two__right-content__img { width: 100%; height: 420px; object-fit: cover; display: block; } @media (max-width: 991px) { .srex-about-us-two__right-content__img { height: 320px; } } /* Services page "Contact Section" image */ .srex-contact--three .srex-contact__img img { width: 100%; height: 380px; object-fit: cover; display: block; border-radius: 20px; } @media (max-width: 767px) { .srex-contact--three .srex-contact__img img { height: 260px; } } /* Project detail page — each project gets its own lead photo instead of one generic full-width image at the top of the whole page. */ .nrb-project-detail { padding-top: 40px; margin-top: 40px; border-top: 1px solid #E5E7EB; } .nrb-project-detail:first-child { padding-top: 0; margin-top: 0; border-top: none; } .nrb-project-detail__img { width: 100%; height: 420px; object-fit: cover; border-radius: 20px; display: block; margin-bottom: 30px; } @media (max-width: 767px) { .nrb-project-detail__img { height: 240px; } } /* Testimonial photo — swaps in step with the testimonial slider (see custom.js afterChange handler) instead of showing one static image regardless of which quote is active. All three images share the same position:absolute placement from the base theme; only the active one is visible, cross-fading in as the slide changes. */ /* Testimonial photo — rebuilt from scratch on plain, well-supported CSS (aspect-ratio + object-fit + a simple overlapping badge). No absolute positioning tied to a decorative shape image's pixel dimensions, no CSS masking — both of those broke in practice. This scales normally in document flow at every screen size. */ .nrb-testimonial-visual { position: relative; max-width: 400px; margin: 0 0 40px auto; } @media (max-width: 767px) { .nrb-testimonial-visual { margin: 0 auto 50px; } } .nrb-testimonial-visual__frame { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 39, 71, 0.18); } .nrb-testimonial-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; } .nrb-testimonial-visual__img.is-active { opacity: 1; } .nrb-testimonial-visual__badge { position: absolute; left: -20px; bottom: -24px; background: #0F2747; color: #fff; border-radius: 16px; padding: 18px 26px; display: flex; align-items: center; gap: 14px; max-width: 85%; box-shadow: 0 12px 30px rgba(15, 39, 71, 0.3); } .nrb-testimonial-visual__badge i { color: #F5B400; font-size: 22px; flex-shrink: 0; } .nrb-testimonial-visual__badge__text { min-width: 0; } .nrb-testimonial-visual__badge h3 { color: #fff; font-size: 16px; line-height: 1.4; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nrb-testimonial-visual__badge span { display: block; color: rgba(255, 255, 255, 0.75); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 575px) { .nrb-testimonial-visual__badge { left: -10px; bottom: -18px; padding: 12px 18px; } .nrb-testimonial-visual__badge h3 { font-size: 14px; } } /* Prevent horizontal overflow on small screens */ html, body { max-width: 100%; overflow-x: hidden; } img { max-width: 100%; height: auto; }