@charset "UTF-8"; /* ------------------------------------------------------------------ Layout hardening for the legacy "default1" theme. Loaded LAST in so these rules win over common/pc/wap.css. Additive only — no edits to the generated theme CSS. Tiers: 1. Global — sticky nav, CTA button, overflow guard (all sizes) 2. <=1000px — WapHead is a fixed 60px header (mobile + tablet) 3. <=749px — mobile-only section stacking ------------------------------------------------------------------ */ /* Stop iOS/Android from auto-inflating font sizes (oversized text + overflow on real phones). Use overflow-x:clip rather than hidden so position:sticky keeps working (hidden makes a scroll container and breaks sticky descendants; clip does not). */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; } body { overflow-x: clip; } /* ---- Always-visible primary nav ------------------------------------ The theme ships CSS for a fixed nav (.fixed .indexNav) but no JS ever adds the class, so the desktop nav just scrolls away. Make it sticky so it stays pinned to the top on scroll at every width. It stays in flow, so the hero is never hidden under it. */ .indexNav { position: sticky !important; top: 0 !important; z-index: 100 !important; /* Light shadow so the bar reads as floating above the (often white) content instead of dissolving into it. */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* The mobile/tablet hamburger header is fixed; keep it pinned. */ .WapHead { position: fixed !important; top: 0 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* ---- Consistent CTA button on every viewport ---------------------- One tidy button design everywhere instead of the oversized pill that wrapped to two lines. */ .bannerTxthref { display: inline-block !important; width: auto !important; white-space: nowrap; margin: 26px 0 0 !important; padding: 13px 32px !important; line-height: 1.2 !important; font-size: 16px !important; font-weight: 600; letter-spacing: 0.02em; border-radius: 6px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); } /* ---- Inline flow for bold text ------------------------------------- common.css makes every inline text element display:inline-block, so punctuation straight after a can wrap onto its own line (e.g. a lone full stop under "How We Deliver Real Value For You" and on the About page). Restore normal inline flow for bold text inside paragraphs and list items. */ p strong, p b, li strong, li b { display: inline; } /* ---- Global link affordance -------------------------------------- Every clickable link gets an obvious cue: light gold on hover (desktop) and a brighter gold on press (click/tap, all devices). The cards and the hero CTA keep their own richer cues, so they're excluded here. --ysl is a lightened tint of the brand gold. */ :root { --ysl: #d4bd7f; } a { transition: color 0.2s ease, opacity 0.2s ease; } a:hover, a:active { color: var(--ysl) !important; } a:active { opacity: 0.75; } .indexCpOl > li a:hover, .indexCpOl > li a:active, .bannerTxthref:hover, .bannerTxthref:active { color: var(--ps) !important; opacity: 1; } /* Contact cards: keep the card's own gold text cue. */ .ContactRight ul li a:hover, .ContactRight ul li a:active { color: var(--ys) !important; opacity: 1; } /* Footer Quick link, Services + Contact: light gold on hover, brand gold while clicked/tapped. Prefixed with .footA so it outranks the mobile footer's `color:#fff !important` reset (which blocked the global cue). */ .footA .footAB a:hover, .footA .footAD a:hover, .footA .footAC a:hover { color: var(--ysl) !important; opacity: 1; } .footA .footAB a:active, .footA .footAD a:active, .footA .footAC a:active { color: var(--ys) !important; opacity: 1; } /* ---- Service-page accordion (.PageZhedie) --------------------------- Hover cue only: the dropdown titles turn light gold on hover. Click behaviour is untouched (expand + the theme's own open-item styling). Scoped to hover-capable devices so taps don't leave a stuck highlight. */ .PageZhedie dt { cursor: pointer; } .PageZhedie dt h3 { transition: color 0.2s ease; } @media (hover: hover) { .PageZhedie dt:hover h3 { color: var(--ysl) !important; } } /* ---- Global button affordance -------------------------------------- Buttons (contact SEND, footer Sign Up, hero CTA) brighten + lift on hover and press down on click/tap. */ button, .bannerTxthref { transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } button:hover, .bannerTxthref:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); cursor: pointer; } button:active, .bannerTxthref:active { filter: brightness(0.92); transform: translateY(1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } @media (prefers-reduced-motion: reduce) { a, button, .bannerTxthref { transition: none; } button:hover, button:active, .bannerTxthref:hover, .bannerTxthref:active { transform: none; } } /* ---- Service "icon + text" cards ----------------------------------- Desktop keeps the theme's icon-left / text-right layout, but with the icon vertically centred against the text (the theme had align-items commented out, so the icon stuck to the top). */ @media screen and (min-width: 750px) { .ServicesBJQTxtImgs .box > ul > li { align-items: center; } } /* ================================================================== Mobile + tablet (<= 1000px): WapHead is a fixed 60px header and the desktop nav is hidden. The hero must clear that header and use the full width, or the title gets clipped and cramped. ================================================================== */ @media screen and (max-width: 1000px) { img, video, iframe, table { max-width: 100%; height: auto; } /* Burger-menu items must read as tappable to mobile browsers — cursor:pointer is the signal iOS uses to fire click events on elements it doesn't consider interactive (e.g. the +/- expander). */ .WapNav > ul > li > a, .WapNav > ul > li > i { cursor: pointer; } /* Highlight the Services item while its submenu is open (the theme marks the +/- icon with .this when expanded). Kept as separate rules: a browser without :has() support drops only that rule, not the icon's. */ .WapNav > ul > li > i.this { color: var(--ys) !important; } .WapNav > ul > li:has(> i.this) > a { color: var(--ys) !important; } /* Burger-menu Services submenu cue: light gold on hover, brand gold while tapped (:active last so it wins during the press). Lives in this block because the burger menu is used up to 1000px, not just on phones. */ .WapNav > ul > li > ul > li > a { transition: color 0.2s ease; } .WapNav > ul > li > ul > li > a:hover { color: var(--ysl) !important; } .WapNav > ul > li > ul > li > a:active { color: var(--ys) !important; } .banner img { height: 82vh !important; } .bannerTxt { position: absolute !important; width: 100% !important; left: 0 !important; top: auto !important; bottom: 0 !important; height: calc(100% - 60px) !important; /* clear the 60px fixed header */ align-items: center !important; /* vertical centre in the area below the header */ } .bannerTxt .bannerTxtNr { width: 88% !important; margin: 0 auto !important; } .bannerTxt h2 { font-size: 30px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; } .bannerTxt p { font-size: 17px !important; line-height: 1.5 !important; margin: 18px 0 0 !important; padding: 0 !important; opacity: 0.92; } /* The theme hides most content with an inline visibility:hidden and only reveals it via a jQuery scroll handler, which can mis-fire on touch / small screens and leave sections blank. Force them visible (CSS !important beats the inline style). */ .indexCpOl > li, .indexAUl > li, .AboutUL > ul > li, .bannerTxtNrtxt, .lanmubannerTxtBj, .AboutTxtBjcontent, .indexAUlTxt, .indexCpTitle, .AboutULBJQ, .ServicesTxtImgsBJQ, .PageZhedieRight, .indexAboutTxt .BJQ, .aboutListTxt, .YouServicesBJQImgR, .ContactRight, .YouServicesBJQImgL, .aboutListImg, .PageZhedieLeft, .ContactLeft, .ServicesBJQTxtImgs .box > ul > li, .indexAboutImg { visibility: visible !important; } } /* ================================================================== Mobile only (<= 749px) ================================================================== */ @media screen and (max-width: 749px) { /* Smaller hero title on phones. */ .bannerTxt h2 { font-size: 25px !important; } .bannerTxt p { font-size: 16px !important; } /* Banner bottom "V" wave: the theme sits it at bottom:-10px and the SVG doesn't fill its box, so the point of the V lands a few px below the banner image and gets cut flat. Pin it to the banner bottom and let the SVG fill, so the V tapers to a clean point. Applies to every banner (homepage .banner and inner-page .lanmubanner). */ .bannerEndImg { bottom: 0 !important; height: 42px !important; line-height: 0 !important; } .bannerEndImg svg { display: block !important; width: 100% !important; height: 100% !important; } /* ---- Mobile slide-in menu (WapNav) ------------------------------- Bigger, centred, full-width items for easy tapping. Each item's link fills the whole row, so tapping anywhere on the line follows it (and for "Services" that expands the submenu — see the +/- indicator). */ .WapNav > ul { width: 100% !important; margin: 0 !important; } .WapNav > ul > li { position: relative; justify-content: center !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .WapNav > ul > li > a { width: 100% !important; height: auto !important; text-align: center !important; font-size: 21px !important; line-height: 58px !important; } /* +/- expander becomes a right-aligned indicator, out of the flex flow, so the link can be full width and the whole line stays tappable. */ .WapNav > ul > li > i { position: absolute !important; right: 22px; top: 0; line-height: 58px !important; } /* Submenu (Services) items: centred, comfortably tappable. */ .WapNav > ul > li > ul { width: 100%; } .WapNav > ul > li > ul > li > a { width: 100% !important; text-align: center !important; font-size: 16px !important; line-height: 46px !important; color: rgba(255, 255, 255, 0.85) !important; transition: color 0.2s ease; } /* Fixed pixel widths that overflow phones (service detail pages). */ .PageZhedieRight, .PageZhedieLeft { width: 100% !important; } .PageZhedieRight img { max-width: 100%; } /* About page: wap.css sets `.About strong { font-size: var(--h2) }`, inflating every bold phrase to heading size on phones. Bold text should match its surrounding paragraph. */ .About strong { font-size: inherit !important; line-height: inherit !important; } /* Service "icon + text" cards: stack on phones with the icon centred, then heading and full-width text below. */ .ServicesBJQTxtImgs .box > ul > li { display: block !important; padding: 22px 20px !important; } .ServicesBJQTxtImgs .box > ul > li > em { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 0 10px !important; text-align: center !important; } .ServicesBJQTxtImgs .box > ul > li > em img { width: 84px !important; height: 84px !important; display: inline-block !important; } .ServicesBJQTxtImgsTxt { width: 100% !important; } .ServicesBJQTxtImgs .box > ul > li h3 { font-size: 19px !important; padding: 4px 0 8px !important; } .ServicesBJQTxtImgs .box > ul > li p { font-size: 15px !important; line-height: 1.55 !important; } /* "How We Deliver" block: kill the 80px top padding (the gap below the hero) and stack cleanly (text, then the circular image). */ .indexAbout { padding-top: 32px !important; } .indexAbout .indexAboutTxt { display: flex !important; flex-direction: column !important; align-items: center !important; } .indexAbout .indexAboutTxt .BJQ { order: 1; padding: 0 !important; } .indexAbout .indexAboutImg { order: 2; margin-top: 24px; } /* ---- Footer ------------------------------------------------------- The theme hides the whole footer body on phones (.footBNr{display:none}), leaving only a bare copyright bar. Show it as a clean single column — quick links, services, contact — and hide the redundant company block, the newsletter form, and the empty Category column. The theme's own mobile footer CSS collapsed the sections to ~90px (flex shrink), which clipped the contact text; forcing full width fixes that. */ .footA .footBNr { display: block !important; } .footA .footBNr > div { width: 100% !important; max-width: 100% !important; float: none !important; margin-bottom: 22px !important; } .footA .footAA, .footA .footEmail, .footA #footCP { display: none !important; } .footA h4 { font-size: 16px !important; padding: 0 0 12px !important; margin: 0 !important; } .footA .footAB .footflex, .footA .footAD .footflex { display: block !important; } .footA .footAB a, .footA .footAD a { display: block !important; width: 100% !important; white-space: normal !important; font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 9px !important; color: #fff !important; } .footA .footAC ul li { display: flex !important; flex-wrap: nowrap !important; /* keep the icon beside the text (theme wrapped it) */ width: 100% !important; overflow: visible !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 12px !important; } .footA .footAC ul li span { width: 22px !important; flex: 0 0 22px !important; } .footA .footAC ul li p { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; /* let the address wrap inside its column instead of below the icon */ overflow: visible !important; white-space: normal !important; padding: 0 !important; } .footA .footAC ul li p a { font-size: 14px !important; } .footA .footAC ul li p em { display: block !important; color: var(--ys) !important; font-size: 12px !important; font-style: normal !important; } /* Centre the copyright + ABN line, and size it so the copyright statement fits on one line + ABN on a second (was wrapping to three lines). */ .footA .copyrightLeft a, .footA .copyrightLeft a em { display: block !important; width: 100% !important; text-align: center !important; font-size: 11px !important; line-height: 1.6 !important; } } /* ================================================================== Mobile scroll-reveal (IntersectionObserver, added by LegacyLayout JS). One-time fade + rise as each section enters view — smooth, no per-scroll work. The `hy-reveal` class is only applied on <=1000px, so these rules never affect desktop. If JS doesn't run, the class is never added and content stays fully visible. ================================================================== */ .hy-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .hy-reveal.hy-reveal--in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hy-reveal, .hy-reveal.hy-reveal--in { opacity: 1 !important; transform: none !important; transition: none !important; } }