/* * Equibee Capital Advisors - layout for everything narrower than a wide monitor. * * The page markup came over from WordPress laid out for a desktop, and a few of * its habits do not survive a smaller screen: the menu opens as a slim column * inside the header's right-hand cell, boxed sections lose their side padding * the moment the viewport passes 768px, headings keep a desktop left indent that * throws them off centre, and paired form fields stay side by side until they * are too small to read. * * Every rule is inside a width query. The bands, and why they end where they do: * * up to 1399px side gutters - above this the container's own max-width leaves * a gutter, so a 1440px-and-wider desktop is untouched * 1025-1365px the desktop nav bar, which does not fit a small laptop * up to 1024px anything to do with the menu - the nav plugin swaps to its * hamburger at 1025px, so these must line up with that * up to 767px page content - Elementor's own phone breakpoint * * Sizes inside those bands are fluid (clamp/vw) rather than fixed, so a 320px * phone, a 430px phone and a 1180px tablet each get a proportionate layout * instead of the same one three times. * * Loaded last on every page from inc/head.php, which is why plain selectors win * over the plugin stylesheets and only the inline Elementor rules need !important. */ /* --------------------------------------------------------- 1. Side gutters */ /* * Elementor gives a boxed section 18px of side padding below 768px and nothing * at all above it, leaning on the container's max-width to keep content off the * edge. That works on a wide monitor and nowhere else: between a tablet and a * 1366px laptop the viewport is narrower than the 1350px container, the padding * is gone, and headings sit flush against the glass. * * One fluid gutter covers the whole range instead of a step at each breakpoint. * It stops at 1400px because from there the max-width alone leaves 25px a side, * which keeps every screen a desktop visitor is likely to use exactly as it was. */ @media (max-width: 1399px) { .elementor-section-boxed > .elementor-container { padding-left: clamp(18px, 3vw, 32px); padding-right: clamp(18px, 3vw, 32px); } /* A boxed section nested in another one would inset its content twice. */ .elementor-section-boxed .elementor-section-boxed > .elementor-container { padding-left: 0; padding-right: 0; } /* A full-width section has no boxed container to pad, and it should not get one - it is what lets a hero background run to both edges. Most of them hold a boxed section inside that takes the gutter above; where they do not, as on /about-equibee-ipo/, the words themselves ran into the edge. So the gutter goes on the copy, and only on copy sitting directly in the section, which is what "not inside a nested boxed section" looks like as a selector. */ .elementor-section-full_width > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading > .elementor-widget-container, .elementor-section-full_width > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor > .elementor-widget-container { padding-left: clamp(18px, 3vw, 32px) !important; padding-right: clamp(18px, 3vw, 32px) !important; } } /* ------------------------------------------------- 2. The nav bar's own band */ /* * The nav plugin swaps to its hamburger at 1024px, so from 1025px up the full * bar is back - but at 20px a side and 15px of margin either side of seven items * it needs about 1015px of the row, and on a 1180px screen the logo leaves it * 971px. The items overflowed leftwards and "Home" printed on top of the logo, * while "About Us" and "Contact Us" broke onto two lines. * * The band between the plugin's breakpoint and the width where the bar fits on * its own is the one place a min-width query belongs in this file. Type and * spacing shrink through it; from 1366px the bar fits at its own size again. */ @media (min-width: 1025px) and (max-width: 1365px) { .premium-nav-widget-container .premium-nav-menu-container > ul { flex-wrap: nowrap; } .premium-nav-widget-container .premium-nav-menu-container > ul > li { margin-left: 8px !important; margin-right: 8px !important; } .premium-nav-widget-container .premium-nav-menu-container > ul > li > .premium-menu-link { padding-left: 6px !important; padding-right: 6px !important; font-size: 16px !important; white-space: nowrap; } /* The About Us and Services panels are a fixed 1000px centred on the nav, and the nav sits in the right-hand half of the header beside the logo. On a 1025px screen that hung 50px of the panel past the right edge. Hanging it from the nav's right edge instead keeps it on screen at every width in this band, and the width only has to fit inside the gutters. */ .premium-nav-menu-container .premium-mega-content-container { left: auto !important; right: 0 !important; width: min(1000px, calc(100vw - 48px)) !important; transform: none !important; } } /* ---------------------------------------------------------------- 3. Global */ @media (max-width: 1024px) { /* A long unbroken word (a URL, a company name) used to push the whole page sideways; breaking it is always better than a horizontally scrolling site. */ body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } img, video, iframe, embed, object { max-width: 100%; } h1, h2, h3, h4, h5, h6, p, li, td, th, a { overflow-wrap: break-word; } } /* ------------------------------------------------------- 4. The mobile menu */ @media (max-width: 1024px) { /* The panel is taken out of the flow rather than left in it: in the flow it inherits the width of the header cell it sits in - about half the screen - and shoves the hero down the page as it opens. --eq-hdr-h is the height of the header, measured in assets/js/mobile.js; the fallback keeps the panel in a sensible place if that script has not run yet. */ .premium-mobile-menu-container { display: none !important; } .premium-hamburger-toggle.premium-toggle-opened ~ .premium-mobile-menu-container { display: block !important; position: fixed; top: var(--eq-hdr-h, 88px); left: 0; right: 0; width: 100%; max-height: calc(100vh - var(--eq-hdr-h, 88px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 9999; background: #ffffff; border-top: 3px solid #f37320; box-shadow: 0 18px 40px rgba(1, 16, 57, .18); padding: 6px 0 14px; } /* A hamburger is a 20px glyph; the area you have to hit should not be. */ .premium-nav-widget-container .premium-hamburger-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px 8px 12px; font-size: 16px; } .premium-nav-widget-container .premium-hamburger-toggle i { margin-right: 8px; font-size: 20px; } /* The list is laid out for a horizontal bar: pushed to the right-hand end, with 20px of air around every item to space them along it. Stacked, that air becomes a 90px gap between one row and the next. */ .premium-mobile-menu-container .premium-main-mobile-menu { justify-content: flex-start !important; align-items: stretch !important; } /* Top-level rows: full width, one under the other, hairline between. */ .premium-mobile-menu-container .premium-main-mobile-menu > li { display: block; width: 100%; margin: 0 !important; border-bottom: 1px solid #eceef3; } .premium-mobile-menu-container .premium-main-mobile-menu > li:last-child { border-bottom: 0; } .premium-mobile-menu-container .premium-menu-link { display: flex !important; align-items: center; justify-content: space-between !important; width: 100%; min-height: 52px; margin: 0 !important; padding: 14px 20px !important; font-size: 16px !important; line-height: 1.35 !important; font-weight: 600; text-align: left !important; color: #011039 !important; } .premium-mobile-menu-container .premium-active-item > .premium-menu-link, .premium-mobile-menu-container .current-menu-item > .premium-menu-link { color: #f37320 !important; background: #fdf6f1; } /* The caret sits at the far edge of the row, so a parent reads as "there is something behind this" rather than as a stray glyph after the label. */ .premium-mobile-menu-container .premium-dropdown-icon { flex: 0 0 auto; margin: 0 0 0 12px !important; font-size: 14px; color: #6b7896; transition: transform .2s ease; } .premium-mobile-menu-container .premium-active-menu > .premium-menu-link .premium-dropdown-icon { transform: rotate(180deg); color: #f37320; } /* Second level, for items whose children are a plain list. Mega items are excluded: they carry both a sub-menu and a mega panel holding a different set of links, and opening both listed "Our Firm" twice. The mega panel is what the desktop menu shows, so that is the one that opens here too. */ .premium-mobile-menu-container .premium-sub-menu { width: 100%; background: #f7f8fb; } .premium-mobile-menu-container li.premium-active-menu:not(.premium-mega-nav-item) > .premium-sub-menu { display: flex !important; } .premium-mobile-menu-container .premium-sub-menu .premium-menu-link { min-height: 46px; padding: 12px 20px 12px 36px !important; font-size: 15px !important; font-weight: 500; color: #26355c !important; border-top: 1px solid #e7eaf1; } } /* -------------------------------------------- 5. Mega panels inside the menu */ /* * About Us and Services open an Elementor "mega" panel instead of a list, and it * arrives sized for a desktop drop-down: 1000px wide, 40px of padding, 24px * headings - which on a phone wrapped in the middle of a word. Its links are the * same ones the desktop menu offers, so the panel stays and is re-proportioned * rather than swapped for the plain sub-menu, which lists different pages. */ @media (max-width: 1024px) { .premium-mobile-menu-container .premium-mega-content-container { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-shadow: none !important; } .premium-mobile-menu-container .premium-mega-content-container .elementor-section { margin: 0 !important; padding: 8px 20px 12px 36px !important; box-shadow: none !important; } .premium-mobile-menu-container .premium-mega-content-container .elementor-container { max-width: 100% !important; padding: 0 !important; } .premium-mobile-menu-container .premium-mega-content-container .elementor-column, .premium-mobile-menu-container .premium-mega-content-container .elementor-widget-wrap { margin: 0 !important; padding: 0 !important; } .premium-mobile-menu-container .premium-mega-content-container .elementor-widget { margin: 0 !important; } /* Each column of the panel opens with a plain heading naming it ("IPO Services") and then lists its links as headings too. Sized alike they all read as links, so the bare heading is dressed down to a label and only the ones wrapping an keep link weight and a row's worth of height. */ .premium-mobile-menu-container .premium-mega-content-container .elementor-heading-title { margin: 0 !important; padding: 8px 0 2px; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .6) !important; } .premium-mobile-menu-container .premium-mega-content-container .elementor-heading-title a { display: block; padding: 11px 0; font-size: 15px; font-weight: 500; letter-spacing: normal; text-transform: none; color: #ffffff; } /* That rule was a divider between desktop columns; stacked, it would sit under the first link on its own. */ .premium-mobile-menu-container .premium-mega-content-container .elementor-element-populated { border: 0 !important; } } /* Only a phone needs the panel's columns in a single file. A tablet holding the same panel at 700-1000px has room to keep them side by side, and Elementor's own layout already does that above its 767px breakpoint. */ @media (max-width: 767px) { .premium-mobile-menu-container .premium-mega-content-container .elementor-column { width: 100% !important; } } /* A phone on its side has about 390px of height to give the panel. Trimming the rows keeps more than three of them above the fold. */ @media (max-width: 1024px) and (max-height: 520px) { .premium-mobile-menu-container .premium-menu-link { min-height: 44px; padding-top: 10px !important; padding-bottom: 10px !important; } .premium-mobile-menu-container .premium-mega-content-container .elementor-heading-title a { padding: 8px 0; } } /* ------------------------------------------------------- 6. Page typography */ @media (max-width: 767px) { /* Interior page titles carry a 70px left pad from the desktop layout, and it is what pushed "Our Team" and "Testimonials" off centre in their banners. */ .elementor-widget-heading > .elementor-widget-container, .elementor-widget-text-editor > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; } /* Heading sizes are deliberately left alone. Nearly every title on the site is an h2 - page banners, card labels and sme-ipo's big "01"-"06" step numbers alike - so a blanket cap flattens all three to one size. They wrap on a phone, but no page overflows its width, so their own sizes stand. */ .elementor-widget-text-editor, .elementor-widget-text-editor p { font-size: 15px; line-height: 1.65; } /* A card title that has wrapped onto two lines ends up almost touching the paragraph under it, because the gap was set for a one-line desktop title. */ .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 10px; } } /* ------------------------------------------------------------- 7. The forms */ /* * Name/Email and Phone/Company are a hard 50/50 pair. On a phone each half was * too narrow to read what had been typed into it; on a 768px tablet, where the * form shares the row with the address panel, each half came out at 165px. * * Rather than pick a width to stack at, the pair is given a readable minimum and * allowed to wrap: side by side wherever both halves clear 220px, one per row as * soon as they cannot. A phone stacks them, an iPad in portrait stacks them, an * iPad in landscape and every desktop keeps the pair - and nothing has to be * re-tuned if the column around it ever changes width. */ .services-row { display: flex !important; flex-wrap: wrap; } .services-column { flex: 1 1 220px; width: auto !important; } @media (max-width: 1024px) { .ekit-form input[type="text"], .ekit-form input[type="email"], .ekit-form input[type="tel"], .ekit-form select, .ekit-form textarea, .wpcf7-form-control { width: 100%; min-height: 48px; font-size: 16px; /* below 16px iOS zooms the page in on focus */ } .ekit-form textarea.wpcf7-form-control { min-height: 120px; } } @media (max-width: 767px) { .services-column { padding: 0 !important; } .wpcf7-form-control.wpcf7-submit { width: 100%; min-height: 50px; } /* On the service pages a "Contact Us" button ends one column and the form opens the next. Side by side that needed no gap; stacked, the button's edge met the first field's. */ .elementor-widget-wrap > .elementor-widget-button:last-child { margin-bottom: 20px; } .wpcf7-response-output { margin: 14px 0 0 !important; font-size: 14px; } } /* ------------------------------------------------------------ 8. Data tables */ /* * The IPO tables are far wider than a phone and already sit in a scrolling box, * but nothing said so - the last column just ran off the edge looking broken. * assets/js/mobile.js wraps each one and marks it .is-scrollable when it really * does overflow; the fade and the line under it are the affordance. */ @media (max-width: 767px) { .eq-tablewrap { position: relative; } .eq-tablewrap.is-scrollable::after { content: ""; position: absolute; top: 0; right: 0; bottom: 26px; width: 34px; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96)); } .eq-tablewrap.is-scrollable > .eq-table-hint { display: block; } .eq-table-hint { margin-top: 8px; font-size: 12px; color: #6b7896; text-align: right; } .eael-data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .eael-data-table-wrap::-webkit-scrollbar { height: 6px; } .eael-data-table-wrap::-webkit-scrollbar-thumb { background: #c3cadb; border-radius: 3px; } .eael-data-table th, .eael-data-table td { white-space: nowrap; padding: 12px 14px !important; font-size: 14px !important; } } /* -------------------------------------------------------- 9. Page furniture */ @media (max-width: 767px) { /* Testimonials: the logo is pinned to the card's top right corner, and at this width the name runs underneath it - "Shravan Laxmichand" ended half behind the Durlax mark. Put it back in the flow and it sits above the name, which then has the whole card width to itself. */ .eael-testimonial-item img.eael-testimonial-logo { position: static !important; float: none !important; display: block; max-width: 120px !important; height: auto; margin: 0 0 14px !important; } .eael-testimonial-user { font-size: 18px !important; line-height: 1.35 !important; } /* Reports: the two buttons share a row, and 24px of side padding left "View Report" too little room for its label. It wrapped, "PDF" did not, and the pair came out at two different heights. Trimming the padding fits both labels on one line; the min-height then makes them the same size. !important because the page's own rule for these carries an id chain. */ .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px !important; padding-left: 14px !important; padding-right: 14px !important; text-align: center; } .elementor-widget-image img { height: auto; } } /* ----------------------------------------------------------- 10. Tap targets */ @media (max-width: 1024px) { .elementor-social-icon, .ekit_social_media a, .elementskit-social-media a { min-width: 40px; min-height: 40px; } .elementor-icon-list-item a { padding-top: 3px; padding-bottom: 3px; } } /* The hint element is added to every table on every width, so it is hidden by default here rather than inside the phone query - a desktop table has room for all its columns and nothing to say about swiping. */ .eq-table-hint { display: none; } /* The page behind the open menu is locked, so it cannot slide underneath it. */ html.eq-menu-open, html.eq-menu-open body { overflow: hidden; } /* The call/WhatsApp/LinkedIn bubbles are pinned at z-index 99999 and floated in front of the open menu, over whichever row they landed on. */ html.eq-menu-open .chaty, html.eq-menu-open [class*="chaty-widget"] { display: none !important; } /* --------------------------------------------------------------------------- * Copy is centred on a phone. * * The desktop layouts set alignment per widget, page by page, and a lot of it * is left - the process cards on the service pages, the report card titles, the * testimonial quotes. On a 390px column that reads as a ragged mix, so headings * and body copy centre below 768px. * * !important because each of those page stylesheets names its own widget id and * outweighs anything written by class alone. This file is the last one loaded, * so it is the one place that can say this once instead of listing every id. * * The header and footer are put back: the menu rows read as a list and belong * on the left, and the footer's link columns are laid out to the left already. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementskit-infobox, .eael-testimonial-item, .eael-testimonial-item .eael-testimonial-user, .eael-testimonial-item .eael-testimonial-text { text-align: center !important; } /* The stars are a flex row, so they need centring rather than text-align. */ .eael-testimonial-item .testimonial-star-rating { justify-content: center; } .elementor-15 .elementor-widget-heading .elementor-heading-title, .elementor-15 .elementor-widget-text-editor, .elementor-106 .elementor-widget-heading .elementor-heading-title, .elementor-106 .elementor-widget-text-editor { text-align: left !important; } } /* --------------------------------------------------------------------------- * Stacked cards need a gap between them. * * Every one of these card sets is a row of columns on desktop, where the space * between them is horizontal - a side margin, or the column gap. Stacked into * one column on a phone that space disappears and the cards sit edge to edge. * Each set gets the same 22px below every card so the rhythm is the same * whichever page you are on. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* Service pages: the six numbered process cards. */ .elementor-element.elementor-column.hero-three-sec > .elementor-element-populated { margin-bottom: 22px !important; } /* Home: the three Why Choose cards. */ .elementor-8 .elementor-element-e95a69e .elementskit-infobox, .elementor-8 .elementor-element-f00c78c .elementskit-infobox, .elementor-8 .elementor-element-073352d .elementskit-infobox { margin-bottom: 22px; } /* Testimonials: the two quote cards. */ .eael-testimonial-item.simple-layout { margin-bottom: 22px; } /* About Us: the six IPO-process cards. */ .elementor-349 .elementor-element-0c80159 > .elementor-element-populated, .elementor-349 .elementor-element-356f240 > .elementor-element-populated, .elementor-349 .elementor-element-dafacdd > .elementor-element-populated, .elementor-349 .elementor-element-66e0c11 > .elementor-element-populated, .elementor-349 .elementor-element-02f419e > .elementor-element-populated, .elementor-349 .elementor-element-ecf0247 > .elementor-element-populated { margin-bottom: 22px; } /* Reports: the cards already carry 26px; bring them to the same 22px. */ .elementor-4083 .elementor-element.elementor-element-9dbe7db > .elementor-container > .elementor-column { margin-bottom: 22px; } } /* --------------------------------------------------------------------------- * Headings centre, prose reads from the left. * * Everything was centred, and on a 390px column that is what makes a paragraph * look ragged: every line starts and ends somewhere different, so the eye has no * edge to come back to on the next line. A heading is one or two lines and * centres fine; a paragraph of five does not. * * So headings, names and the star row stay centred and the running text goes * left. Phones only - the desktop layouts are untouched. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .elementor-widget-text-editor, .elementskit-infobox .box-body > p, .eael-testimonial-item .eael-testimonial-text, .eael-testimonial-item .eael-testimonial-text p { text-align: left !important; } /* ...and the short lines stay in the middle. */ .elementor-widget-heading .elementor-heading-title, .elementskit-infobox .elementskit-info-box-title, .eael-testimonial-item .eael-testimonial-user, .eael-testimonial-item .eael-testimonial-user-company { text-align: center !important; } }