/* ========================================================================== OSG skin — overrides on top of the steelcity template (style.css) Loaded last in . Scoped to OSG-specific helper classes only so the underlying template CSS stays intact. ========================================================================== */ /* --- Mobile: kill horizontal scroll from the off-canvas menu ---------------- */ /* The slide-in drawer (.mobile-menu-main) is position:fixed and parked at right:-320px. Because it's fixed, body{overflow-x:hidden} cannot clip it, so its edge pokes ~16px past the viewport. Clipping at the root removes it. */ html { overflow-x: hidden; } /* --- Homepage hero: full-bleed background image with overlaid caption ------- */ .osg-home-hero { position: relative; padding: 132px 0 140px; overflow: hidden; } .osg-home-hero-bg { position: absolute; inset: 0; z-index: 0; } .osg-home-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .osg-home-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16, 28, 40, 0.55) 0%, rgba(16, 28, 40, 0.48) 45%, rgba(16, 28, 40, 0.72) 100%); } .osg-home-hero .container { position: relative; z-index: 2; } .osg-home-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; } .osg-home-hero-eyebrow { display: inline-block; background: rgba(255, 255, 255, 0.16); color: #ffffff; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 100px; margin-bottom: 24px; } .osg-home-hero-title { color: #ffffff; font-size: 64px; line-height: 1.05; margin-bottom: 22px; text-shadow: 0 2px 30px rgba(8, 35, 62, 0.4); } .osg-home-hero-lead { color: rgba(255, 255, 255, 0.9); font-size: 20px; line-height: 1.6; max-width: 680px; margin: 0 auto 32px; } .osg-home-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* buttons sit inline here, not stacked under copy — drop the template's top gap */ .osg-home-hero-actions .common-btn { margin-top: 0; } /* outline button ships with black text; make it legible on the dark hero */ .osg-home-hero-actions .common-btn.border-btn { color: #ffffff; border-color: rgba(255, 255, 255, 0.65); } .osg-home-hero-actions .common-btn.border-btn:hover { background-color: #ffffff; border-color: #ffffff; color: var(--primary); } @media (max-width: 991px) { .osg-home-hero { padding: 104px 0 112px; } .osg-home-hero-title { font-size: 50px; } } @media (max-width: 575px) { .osg-home-hero { padding: 80px 0 86px; } .osg-home-hero-eyebrow { margin-bottom: 18px; } .osg-home-hero-title { font-size: 36px; } .osg-home-hero-lead { font-size: 17px; } .osg-home-hero-actions { gap: 10px; } } /* --- White section backgrounds (template ships these as light grey #F3F3F3) --- */ .header-area-one, .about-us-area-one, .services-area-one { background-color: #ffffff !important; } /* --- Logos (OSG logo PNGs are ~377x294, near-square — must be height-capped) --- */ .osg-nav-logo { height: 50px !important; max-height: 50px !important; width: auto !important; display: block; } .mobile-menu-area .osg-nav-logo, .offcanvas-menu-info .osg-nav-logo { height: 44px !important; max-height: 44px !important; } .osg-foot-logo { height: 60px !important; max-height: 60px !important; width: auto !important; margin-bottom: 22px; } /* keep the sticky nav row a tidy fixed height so the square logo can't stretch it */ .header-area-one .navbar .navbar-brand { padding-top: 0; padding-bottom: 0; } /* --- FontAwesome icons swapped in for the template's orange stock SVGs --- */ .osg-fa-icon { color: var(--primary); font-size: 46px; line-height: 1; display: inline-block; } .osg-badge-icon { font-size: 40px; } /* credentials band icons sit left of the text — fixed width so heads align */ .counter-one-item .icon .osg-cred-icon { font-size: 42px; width: 56px; text-align: center; margin-right: 6px; } /* --- Service rows: uniform thumbnail height so rows align regardless of photo AR --- */ .services-area-one .service-item-one .image img { height: 190px; object-fit: cover; border-radius: 5px; } /* --- Repurposed "active customer" badge: holds a word, not a big number --- */ .about-us-area-one .active-customer .number.osg-badge-head { font-size: 26px; line-height: 1.1; margin-bottom: 2px; letter-spacing: 0.5px; } /* widen the floating badge a touch so the credential subtitle fits on one line */ .about-us-area-one .active-customer { width: 320px; } /* --- Repurposed counter band: real credentials (words) instead of digits --- */ /* equal-height cards so all four align regardless of 1- vs 2-line subtitle */ .counter-area-one .counter-one-item { min-height: 104px; padding: 18px 20px; } .counter-one-item .info .counter-number.osg-cred-head { font-size: 26px; line-height: 1.15; letter-spacing: 0.3px; white-space: nowrap; margin-bottom: 4px; } .counter-one-item .info p { font-size: 14px; line-height: 1.3; margin-bottom: 0; } @media (max-width: 1199px) { .counter-one-item .info .counter-number.osg-cred-head { font-size: 23px; } } /* --- CTA band: keep the headline tidy in its narrow column --- */ .get-updates-area-one .get-updates-info .title { font-size: 30px; line-height: 1.25; margin-bottom: 10px; } .get-updates-area-one .contact-info .text .title { font-size: 17px; margin-bottom: 4px; } /* --- Recent work: clean frameless rotating photos (no caption bar, no border) --- */ .recent-work-area-one .project-item-one .info { display: none !important; } /* uniform card images: every photo same size regardless of native AR, no rounded border */ .recent-work-area-one .project-item-one .image { border-radius: 0 !important; } .recent-work-area-one .project-item-one .image img { height: 340px; width: 100%; object-fit: cover; border-radius: 0 !important; display: block; } /* --- Testimonials: Google logo badge --- */ .testimonial-item-one .testimonial-avatar .osg-google-logo { width: 38px; height: 38px; margin-right: 12px; flex-shrink: 0; } /* --- Supplier image-credit note (aluminium Aluna pages) --- */ .osg-courtesy-note { margin-top: 18px; margin-bottom: 0; font-size: 13px; opacity: 0.65; color: #ffffff; } /* --- Contact map embed sits in the messages image slot --- */ .messages-area-one .osg-map-embed { height: 100%; min-height: 400px; } .messages-area-one .osg-map-embed iframe { width: 100%; height: 100%; min-height: 400px; border: 0; border-radius: 5px; display: block; } /* --- Our Work gallery: category band spacing + clickable tiles --- */ .osg-gallery-area .osg-gallery-group { padding-top: 26px; } .osg-gallery-area .project-item-one .image a { display: block; overflow: hidden; } .osg-gallery-area .project-item-one .image img { transition: transform 0.5s ease; } .osg-gallery-area .project-item-one:hover .image img { transform: scale(1.05); } /* --- Our Work: Before & After comparison cards --- */ .osg-ba-area .osg-ba-card { background: #ffffff; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 28px rgba(15, 79, 143, 0.10); margin-bottom: 30px; height: calc(100% - 30px); } .osg-ba-area .osg-ba-pair { display: flex; } .osg-ba-area .osg-ba-pair figure { position: relative; flex: 1 1 50%; margin: 0; } .osg-ba-area .osg-ba-pair img { width: 100%; height: 240px; object-fit: cover; display: block; } .osg-ba-area .osg-ba-pair figure:first-child::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: #ffffff; } .osg-ba-area .osg-ba-tag { position: absolute; left: 14px; top: 14px; background: var(--primary); color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding: 5px 13px; border-radius: 100px; } .osg-ba-area .osg-ba-tag.after { background: #0F4F8F; } .osg-ba-area .osg-ba-meta { padding: 16px 22px 18px; } .osg-ba-area .osg-ba-meta h3 { font-size: 18px; margin: 0 0 4px; } .osg-ba-area .osg-ba-meta p { margin: 0; font-size: 14px; opacity: 0.7; } @media (max-width: 575px) { .osg-ba-area .osg-ba-pair img { height: 180px; } } /* --- Heading-order accessibility fixes (visual parity) ---------------------- Body h4s became h3.osg-h4 (no h2->h4 skips); keep the old h4 sizing. Header phone h6 became p.osg-head-phone; keep the old h6 look. */ h3.osg-h4 { font-size: 24px; } @media (min-width: 992px) and (max-width: 1399.98px) { h3.osg-h4 { font-size: 22px; } } .header-area-one .header-right-info .help-number .info .osg-head-phone { font-family: var(--heading-font-family); color: var(--heading-font-color); font-weight: 700; font-size: 18px; line-height: 1.5em; margin: 0; padding: 0; } .header-area-one .header-right-info .help-number .info .osg-head-phone a { color: inherit; } .header-area-one .header-right-info .help-number .info .osg-head-phone:hover a { color: var(--primary); } /* the CTA strip label is not a link; don't let the template h3:hover recolour it */ .get-updates-area-one .update-area-bg-one .contact-info .text h3.osg-h4:hover { color: var(--white); } /* --- Footer design credit --- */ .footer-bottom .copyright .osg-design-credit { margin: 4px 0 0; font-size: 13px; opacity: 0.85; } .footer-bottom .copyright .osg-design-credit a { color: #4DA6FF; /* brand blue lifted for contrast on the black footer */ text-decoration: none; } .footer-bottom .copyright .osg-design-credit a:hover { text-decoration: underline; } /* --- Brochure download rows reuse .working-process-item; make them feel clickable --- */ a.working-process-item { text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } a.working-process-item:hover { transform: translateY(-3px); } a.working-process-item .number h3 { color: var(--primary); }