in the bar, so the old tagline rule .footer__bottom p:last-child (weight 500/600) was catching it */ html body .footer .footer__bottom p { font-weight: 400; } /* Footer contact block without its Address / Phone / Email labels (removed on request 2026-09-10): a small gap keeps the three lines apart. */ .footer__contact p + p { margin-top: 10px; } /* ===================================================================== CONSENT ERROR BELOW THE ROW (2026-09-10) script.js now places the consent error AFTER the consent label instead of inside its flex row, where it was a squeezed third column on phones. Indented to line up with the consent text (22px box + 10px gap) and pushed clear of the 6px red outline drawn round the row in error. ===================================================================== */ .form-consent + .form-error { margin: 14px 0 0 32px; } /* ===================================================================== HUMAN CHECK (Cloudflare Turnstile, 2026-09-10) Sits between the consent row and the status line on both forms. It uses interaction-only appearance, so for almost every visitor nothing shows; when Cloudflare does want a click, a full-width box appears here. While invisible, a negative margin cancels the form 16px row gap so the empty widget adds no space above the button. script.js adds .is-shown when Cloudflare is about to show a challenge, restoring normal spacing. ===================================================================== */ .form-card .cf-turnstile { margin-top: -16px; } .form-card .cf-turnstile.is-shown { margin-top: 0; } /* ===================================================================== CAREERS FORM WIDTH ON PHONES (2026-09-11) The careers form card has no border, background or shadow, yet it kept 24px side padding (the plain layer that zeroes card padding skips it). On a 375px phone that left the fields 287px wide, narrower than the 300px minimum of the Cloudflare human check, so its box stuck out past the fields. Dropping the side padding on phones gives the form the full column (335px at 375, 320px at 360) and lines the fields up with the section heading. Desktop keeps its padding. ===================================================================== */ @media (max-width: 600px) { html body .form-card.careers-form-card { padding-left: 0; padding-right: 0; } } /* ===================================================================== FOOTER SOCIAL LINKS (2026-09-11) LinkedIn is now a real link (https://www.linkedin.com/company/sartechindia/). The placeholder rules above only style , so links get the same look: navy icon, 22px, brand colour and a 2px lift on hover, plus a pointer cursor and a visible keyboard focus ring. YouTube and X are still placeholders until their profile URLs exist (Instagram was removed 2026-10-03). ===================================================================== */ html body .footer .social a { display: inline-flex; color: var(--color-primary); text-decoration: none; cursor: pointer; border-radius: 4px; transition: color 0.2s, transform 0.2s; } html body .footer .social a:hover { transform: translateY(-2px); } html body .footer .social a.so-linkedin:hover { color: #0A66C2; } html body .footer .social a:focus-visible { outline: 2px solid #0070D9; outline-offset: 3px; } /* ===================================================================== PRISMATECH TEXT WIDTHS (2026-09-14) Headings, subheadings and body copy use the same desktop widths as the Prismatech site, so text fills the 1180px container instead of sitting in narrow 520-840px columns: page title block 1100, intro paragraph 900, section heading block 1100 with its lead paragraph full width, About intro paragraphs 900, CTA block 1000 (its paragraph stays 520, as on Prismatech), legal pages the full content width (Prismatech .prose), product overview prose 900. Prismatech narrows section heads to 820px at 1500px and wider; that part is deliberately not copied. Specificity: each rule beats the older plain/layout layers, which top out at (0,3,1), without !important. ===================================================================== */ html body .page-intro__inner.page-intro__inner { width: min(1100px, 100%); } html body .page-intro__description.page-intro__description { max-width: 900px; } html body .head.head.head { max-width: 1100px; } html body .head.head .lead.lead { max-width: none; } html body .quality-head.quality-head { max-width: 1100px; } html body .quality-head.quality-head :is(.lead, .sub) { max-width: none; } html body .about-intro.about-intro.about-intro { max-width: 900px; } html body .cta .cta__inner.cta__inner { max-width: 1000px; } html body .process__sub.process__sub { max-width: 1100px; } html body .work-with-us.work-with-us p { max-width: 1100px; } html body .legal.legal { max-width: none; } html body .pdp-prose { max-width: 900px; } /* Legal and 404 title block (plain .page-hero with .inner, used by privacy, terms and 404 only) gets the same widths as the other page titles: 1100px block, 900px line under the heading, like Prismatech legal pages. The contact page keeps its own 1200px .contact-page .page-hero .inner. */ html body:not(.contact-page) .page-hero .inner.inner { max-width: 1100px; } html body:not(.contact-page) .page-hero .inner p { max-width: 900px; } /* 404 page (2026-09-14): the text-to-buttons gap was 192px (hero padding 92 + section padding 48 + actions margin 34). Now about 40px. Scoped to the .not-found-actions section so privacy/terms, which share the has-dark-hero body class, are untouched. */ html body .page-hero:has(+ .not-found-actions) { padding-bottom: 24px; } html body .section.not-found-actions { padding-top: 0; } html body .not-found-actions .page-intro__actions { margin-top: 0; } /* ===================================================================== PRODUCT HERO: STACKED AND CENTRED (2026-09-16) Both product pages had a two-column hero (copy left, image right). Now: image on top (centred, max 760px), then kicker, heading and lead centred beneath it. `order: -1` moves the figure visually without moving the down in the markup. ===================================================================== */ html body .pdp-hero.pdp-hero { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; } html body .pdp-hero .pdp-figure { order: -1; width: 100%; max-width: 760px; } html body .pdp-hero .pdp-hero__copy { max-width: 900px; text-align: center; } html body .pdp-hero .pdp-hero__copy .lead { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; } /* Product sub-nav (Overview / Features / ...) is sticky under the header, so it needs a solid white ground - page text was scrolling through it. The plain layer clears .pdp-subnav backgrounds with !important, so this rule needs both higher specificity and !important. Still borderless. */ html body .pdp-subnav.pdp-subnav.pdp-subnav { background-color: #fff !important; } /* NOTE: the class is repeated THREE times on purpose. The plain layer's :is(...) list contains two-class arguments (e.g. .legal .updated), so :is() takes (0,2,0) and the whole rule scores (0,3,1) - a two-class override at (0,2,2) loses to it even with !important. */ /* ===================================================================== HEADING / TEXT CONSISTENCY PASS (2026-09-16) 1. Page titles were 49px on the marketing pages (.page-intro h1, which a later layer scales by viewport) but 45px on privacy, terms and the two product pages, which still used the base --fs-h1. All four now use the same scale. 2. Legal body copy was 20px across the full 1124px content width, giving very long lines. Prismatech sets its full-width .prose at 16.5px/1.78; the legal pages now match that. ===================================================================== */ html body .page-hero h1, html body .pdp-hero__copy .h1 { font-size: clamp(34px, 3.4vw, 56px); } html body .legal.legal p, html body .legal.legal li { font-size: 16.5px; line-height: 1.78; } /* ===================================================================== PAGE HERO BAND (2026-09-16) Shared, reusable hero used by Products, Capabilities and Industries. The page passes its artwork as a property on the section itself: .... The artwork is purely decorative, so it is a CSS background with no and nothing for a screen reader to announce. Text stays real HTML. Desktop holds the artwork's 3:1 shape so both edge illustrations stay visible; phones drop the image for a pale ground behind centred copy. ===================================================================== */ .hero-band { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: clamp(56px, 7vw, 96px) 28px; background-color: #EAF4FC; /* pale blue, matches the art */ background-image: var(--hero-band-image, none); background-repeat: no-repeat; background-position: center; background-size: cover; } .hero-band__inner { width: 100%; max-width: 560px; margin: 0 auto; text-align: center; } html body .hero-band h1 { margin: 0; color: var(--color-primary); font-size: clamp(30px, 3.2vw, 50px); line-height: 1.14; letter-spacing: -1px; font-weight: 600; text-wrap: balance; } html body .hero-band h1 .accent { color: inherit; } html body .hero-band .hero-band__text { margin: 16px auto 0; max-width: 520px; color: var(--body-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; } /* desktop: keep the 3:1 band so neither glass panel is cropped away */ @media (min-width: 981px) { .hero-band { aspect-ratio: 3 / 1; min-height: 340px; max-height: 560px; padding-block: 40px; } } @media (min-width: 1400px) { .hero-band__inner { max-width: 640px; } html body .hero-band .hero-band__text { max-width: 600px; } } /* tablet: shallower band and narrower copy, clear of the illustrations */ @media (min-width: 641px) and (max-width: 980px) { .hero-band { aspect-ratio: 5 / 2; min-height: 300px; padding: 44px 24px; } .hero-band__inner { max-width: 440px; } html body .hero-band .hero-band__text { max-width: 420px; } } /* phones: artwork hidden so it never competes with the text */ @media (max-width: 640px) { .hero-band { background-image: none; background-color: #F7FAFD; padding: 52px 20px 44px; } .hero-band__inner { max-width: 100%; } html body .hero-band .hero-band__text { max-width: 100%; } } /* ============================================================ CAREERS HERO - new isometric artwork (2026-09-16) The artwork is cropped to its own edges, so the hero field has to match its white canvas or a seam shows at the contained edges. The old warm-grey field belonged to the previous image. ============================================================ */ html body .page-hero--careers.page-hero--careers { background-color: #fff; } /* The previous artwork carried its own top padding; this one starts ~24px from the frame, so the inset that clears the 76px header has to grow. Contained and height-limited at desktop, the scaled top margin is only ~16px, so 76px of inset lands the artwork at ~92px. */ @media (min-width: 769px) { html body .page-hero--careers.page-hero--careers .hero__image { top: 76px; height: calc(100% - 76px); } } /* ============================================================ CONTACT HERO - new support illustration (2026-09-16) Replaces the layered navy parallax artwork. The illustration is cropped to its own edges on a white canvas, so the hero field turns white and the image is contained and centred, the same treatment the careers hero uses. ============================================================ */ html body.contact-page .contact-hero.contact-hero { background-color: #fff; background-image: none; } html body.contact-page .contact-hero.contact-hero .hero__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } /* clear the 76px header, as on careers */ @media (min-width: 769px) { html body.contact-page .contact-hero.contact-hero .hero__image { top: 76px; height: calc(100% - 76px); } } /* ============================================================ HOME HERO - keep the operator in frame on phones and tablets The worker sits in the right third of the photo (hands ~63%, face ~81% of its width). A centred cover crop keeps only the middle 38-60% below 981px, which cut them out. 88% keeps the face, hands and the press they work at in frame from 360px up. ============================================================ */ @media (max-width: 980px) { html body .page-hero--home .hero__image { object-position: 88% center; } } /* ============================================================ HERO BAND ON PHONES - show the cover artwork The phone rule above switched the artwork off. The cover's graphics sit in its top-left and bottom-right corners with an empty centre, so it can stay behind the text. A little more vertical padding lets both corners show above and below it. ============================================================ */ @media (max-width: 640px) { html body .hero-band.hero-band { background-image: var(--hero-band-image, none); background-size: cover; background-position: center; padding: 68px 20px 60px; } } /* ============================================================ ILLUSTRATED HEROES ON PHONES - image in normal flow Contact and Careers contained their artwork inside a hero whose height follows the screen height (min 50svh), so the artwork floated at a different spot on every phone, with empty bands above and below it or tucked up under the header. Below 769px the image now sits in flow at its own proportions, full width, straight under the header, and the page intro follows it. ============================================================ */ @media (max-width: 768px) { html body.contact-page .contact-hero.contact-hero, html body .page-hero--careers.page-hero--careers { display: block; height: auto; min-height: 0; max-height: none; margin-top: 0; padding: 16px 20px 0; } html body.contact-page .contact-hero.contact-hero .hero__image, html body .page-hero--careers.page-hero--careers .hero__image { position: relative; inset: auto; top: auto; width: 100%; max-width: 560px; height: auto; margin: 0 auto; } } /* ============================================================ ONE HERO SIZE ON PHONES (2026-09-16) Every page's hero is the same box below 641px: full screen width, directly under the header, and one shared height that scales with the screen width. Before this, heroes ran from 257px to 422px tall on the same 390px phone. - photo heroes (Home, About): the photo covers the box - illustrated heroes (Careers, Contact) and product pages: the artwork is contained and centred in the box - text heroes (Products, Capabilities, Industries, Privacy, Terms, 404): copy centred; the box only grows if a very narrow screen cannot fit the copy ============================================================ */ @media (max-width: 640px) { :root { --m-hero-h: clamp(280px, 82vw, 380px); } /* photo heroes */ html body .page-hero--home.page-hero--home, html body .page-hero--about.page-hero--about { height: var(--m-hero-h); min-height: 0; max-height: none; margin-top: 0; padding: 0; } /* illustrated heroes */ html body .page-hero--careers.page-hero--careers, html body.contact-page .contact-hero.contact-hero { position: relative; display: block; height: var(--m-hero-h); min-height: 0; max-height: none; margin-top: 0; padding: 0; } html body .page-hero--careers.page-hero--careers .hero__image, html body.contact-page .contact-hero.contact-hero .hero__image { position: absolute; top: 16px; left: 20px; right: auto; bottom: auto; width: calc(100% - 40px); height: calc(100% - 32px); max-width: none; margin: 0; object-fit: contain; object-position: center; } /* text heroes: Products, Capabilities, Industries */ html body .hero-band.hero-band { min-height: var(--m-hero-h); height: auto; padding: 28px 20px; } /* text heroes: Privacy, Terms, 404 */ html body section.page-hero:not(.page-hero--immersive) { display: flex; align-items: center; justify-content: center; min-height: var(--m-hero-h); height: auto; margin-top: 0; padding: 28px 20px; box-sizing: border-box; } html body section.page-hero:not(.page-hero--immersive) .inner { width: 100%; } /* product pages: the product image gets the same box */ html body .pdp-hero-wrap.pdp-hero-wrap { padding-top: 0; } /* minmax(0, 1fr): a plain 1fr column grows to the image's natural width (1200px+), which pushed the page into sideways scroll */ html body .pdp-hero.pdp-hero { grid-template-columns: minmax(0, 1fr); } html body .pdp-hero.pdp-hero > * { min-width: 0; } html body .pdp-hero.pdp-hero .pdp-figure { display: flex; align-items: center; justify-content: center; width: calc(100% + 40px); max-width: none; margin: 0 -20px; height: var(--m-hero-h); padding: 16px 20px; box-sizing: border-box; } html body .pdp-hero.pdp-hero .pdp-figure img { width: 100%; height: 100%; min-width: 0; max-width: 100%; object-fit: contain; } } /* ====================================================================== SARTECH BRAND SYSTEM v1.0 (2026-09-17) From Sartech_Brand_Kit_v1.0: new S-mark logo, palette and Manrope. - Midnight Navy carries text and authority, Sartech Blue carries recognition: buttons, number discs, icons, focus and active states. - Steel for body copy, Mist and Cloud for tinted surfaces. - Manrope: headings SemiBold 600, UI and labels Medium 500, body 400. - Logo: supplied gradient artwork only, never below 160px wide. Earlier layers were re-pointed in place (navy fills to blue, navy text to midnight); this layer re-bases every shared token onto the kit. ====================================================================== */ :root { /* brand kit tokens, as supplied in Sartech_Brand_Tokens.css */ --sartech-blue: #0070d9; --sartech-signal-blue: #0085e9; --sartech-deep-blue: #0051a9; --sartech-midnight-navy: #10283f; --sartech-steel: #52606d; --sartech-mist: #eaf4fc; --sartech-cloud: #f7fafd; --sartech-white: #ffffff; --sartech-gradient: linear-gradient(180deg, #0085e9 0%, #0051a9 100%); --sartech-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* site tokens re-based onto the kit */ --font: var(--sartech-font); --color-primary: var(--sartech-midnight-navy); --color-primary-hover: var(--sartech-deep-blue); --color-primary-soft: var(--sartech-mist); --color-accent: var(--sartech-blue); --color-accent-ink: var(--sartech-blue); --color-accent-soft: var(--sartech-mist); --color-background: var(--sartech-white); --color-background-soft: var(--sartech-cloud); --color-surface: var(--sartech-white); --color-text: var(--sartech-midnight-navy); --color-text-muted: var(--sartech-steel); --color-border: #dce6f0; --ink: var(--sartech-midnight-navy); --label: var(--sartech-midnight-navy); --body: var(--sartech-steel); --body-2: var(--sartech-steel); --muted: var(--sartech-steel); --faint: #8a96a3; --navy: var(--sartech-midnight-navy); --navy-deep: var(--sartech-midnight-navy); --blue: var(--sartech-blue); --blue-2: var(--sartech-blue); --cyan: var(--sartech-blue); --cyan-ink: var(--sartech-blue); --cyan-light: var(--sartech-mist); --bg: var(--sartech-white); --bg-alt: var(--sartech-cloud); --bg-soft: var(--sartech-cloud); --line: #e3ebf3; --line-2: #e3ebf3; --line-soft: #edf2f7; --line-input: #dce6f0; --chip: var(--sartech-cloud); --chip-line: #e3ebf3; --chip-blue: var(--sartech-mist); --chip-blue-line: #dce6f0; --grad-accent: linear-gradient(100deg, var(--sartech-blue), var(--sartech-blue)); --grad-navy: linear-gradient(180deg, var(--sartech-midnight-navy), var(--sartech-midnight-navy)); --conic: conic-gradient(from 160deg, var(--sartech-blue), var(--sartech-signal-blue), var(--sartech-blue)); } html body { font-family: var(--sartech-font); font-weight: 400; } html body ::selection { background: rgba(0, 112, 217, 0.18); } /* --- type weights: headings 600, UI and labels 500, body 400 --- */ html body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3) { font-weight: 600 !important; } html body :is(.btn, .form-submit, .drawer__cta, .nav a, .nav-dropdown a, .drawer a, .field label, .form-consent, .kicker, .pdp-subnav a, .spec-chips span, .pill) { font-weight: 500 !important; } /* the current page in the nav: SemiBold and Sartech Blue */ html body .nav a.is-active, html body .nav a[aria-current="page"], html body .drawer a.is-active, html body .drawer a[aria-current="page"] { font-weight: 600 !important; color: var(--sartech-blue) !important; } /* Display line height from the kit: 56 / 64 */ html body :is(h1, .h1) { line-height: 1.143 !important; } /* --- recognition blue on icons and small accents --- */ html body :is(.industry-card__ic, .about-value__ic, .hero-badge__ic) svg { color: var(--sartech-blue); } /* --- logo: supplied artwork, 160px minimum width (4.59:1, so 35px tall) --- */ html body .header .brand img { height: 36px; width: auto; } @media (max-width: 980px) { html body .header .brand img { height: 35px; } } html body .footer__brand, html body .footer .footer__brand { height: 36px; width: auto; } /* ====================================================================== HEADER: SOLID WHITE (2026-09-17) The transparent-at-the-top header (Polaris-style, with the hero sliding up behind it) was removed at the user's request the same day. The bar is solid white on every page and at every scroll position, heroes start below it, and a soft shadow appears once the page scrolls. ====================================================================== */ html body .header.header.header.header { background: #fff !important; background-color: #fff !important; background-image: none !important; box-shadow: none !important; transition: box-shadow 0.3s ease; } html body .header.header.header.header.is-scrolled { box-shadow: 0 4px 28px rgba(16, 40, 63, 0.07) !important; } /* ====================================================================== BACK TO TOP: SARTECH BLUE ON HOVER AND PRESS (2026-09-17) White circle at rest; hover, keyboard focus and press fill it with Sartech Blue and a white arrow (Deep Blue while pressed). ====================================================================== */ html body .to-top.to-top.to-top { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.25s ease, transform 0.25s ease; } html body .to-top.to-top.to-top:is(:hover, :focus-visible) { background-color: var(--sartech-blue) !important; border-color: var(--sartech-blue) !important; color: #fff !important; } html body .to-top.to-top.to-top:active { background-color: var(--sartech-deep-blue) !important; border-color: var(--sartech-deep-blue) !important; color: #fff !important; } /* menu icon on the white bar */ html body .header.header.header.header .headerbar .menu-btn { color: var(--sartech-blue) !important; } /* (0,6,2): beats the old image-hero rule (0,5,0) */ /* ====================================================================== POLARIS-STYLE COLOUR (2026-09-17), in Sartech colours Measured on polarisgrids.com: every heading in a deep blue (#0A3690), nav links and carets in the brand blue (#144BBD), dropdown items in a dark neutral, body copy in slate. Mapped onto the brand kit: - headings (page, section, card, footer titles): Deep Blue #0051A9 - nav links, dropdown carets, menu icon, phone menu links: Sartech Blue - dropdown and phone sub-menu items: Midnight Navy, Sartech Blue on hover - body copy stays Steel; white still sits over the Home/About photos (those rules were raised to (0,8,3) so these cannot override them) ====================================================================== */ html body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3) { color: var(--sartech-deep-blue) !important; } /* top-level nav on the white bar */ html body .header.header.header.header .nav.nav.nav > a, html body .header.header.header.header .nav.nav.nav > .nav-item > a, html body .header.header.header.header .nav.nav.nav > .nav-item > .nav-caret { color: var(--sartech-blue) !important; } html body .header.header.header.header .nav.nav.nav > a:hover, html body .header.header.header.header .nav.nav.nav > .nav-item > a:hover { color: var(--sartech-deep-blue) !important; } /* dropdown panel items */ html body .header .nav .nav-dropdown.nav-dropdown a { color: var(--sartech-midnight-navy) !important; } html body .header .nav .nav-dropdown.nav-dropdown a:hover, html body .header .nav .nav-dropdown.nav-dropdown a.is-active { color: var(--sartech-blue) !important; background: none !important; } /* phone menu */ html body .drawer.drawer > a:not(.drawer__cta), html body .drawer.drawer .drawer-sub__row > a, html body .drawer.drawer .drawer-sub__row .nav-caret { color: var(--sartech-blue) !important; } html body .drawer.drawer .drawer-sub__menu a { color: var(--sartech-midnight-navy) !important; } html body .drawer.drawer .drawer-sub__menu a:hover, html body .drawer.drawer .drawer-sub__menu a.is-active { color: var(--sartech-blue) !important; } /* footer column titles are , not headings */ html body .footer .footer-title.footer-title { color: var(--sartech-deep-blue) !important; } /* the closing call-to-action band's heading is pinned by the plain layer at (0,2,2) !important; this outranks it */ html body:not(.contact-page) .cta.cta h2 { color: var(--sartech-deep-blue) !important; } /* item titles that are not heading tags take the heading blue too: home Quality & Testing items, Capabilities process steps, and the How It Works steps on both product pages */ html body .quality-item.quality-item > span, html body .process-step.process-step > strong, html body .pdp-step.pdp-step > strong { color: var(--sartech-deep-blue) !important; } /* ABOUT: intro and "Who We Are" merged into one block (2026-09-17); the Vision / Mission / Commitment cards follow it at Home's 44px gap */ html body .page-intro--about.page-intro--about { padding-bottom: 0 !important; } html body .section#company { padding-top: 44px !important; } /* the bar is content-sized: between ~981 and ~1049px the Contact button hides and it shrank to 68px, so heroes pulled up by --header-h (76px) started 8px above the viewport. Hold it at 76px at every width. */ html body .header .headerbar { min-height: var(--header-h); box-sizing: border-box; } /* ====================================================================== LUCIDE ICONS (2026-09-17) Every interface icon is now a Lucide line icon (24px grid, round caps), inlined as SVG; only the four social brand marks keep their logos. One treatment for the icon-over-title cards (Home + Industries industry cards, Vision / Mission / Commitment, product application cards): a 32px Sartech Blue icon with a 1.75 stroke, 14px above a Deep Blue SemiBold title. The old 50px empty tile is gone, which is what left the labels floating far below their icons. ====================================================================== */ html body .lucide { flex-shrink: 0; } html body .industry-card__ic.industry-card__ic.industry-card__ic, html body .about-value__ic.about-value__ic.about-value__ic { width: auto !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 auto 14px !important; padding: 0 !important; color: var(--sartech-blue) !important; display: flex !important; justify-content: center; } html body .industry-card__ic.industry-card__ic.industry-card__ic svg, html body .about-value__ic.about-value__ic.about-value__ic svg, html body .pdp-app-card.pdp-app-card.pdp-app-card svg { width: 32px !important; height: 32px !important; stroke-width: 1.75; color: var(--sartech-blue) !important; } /* industry and application titles read as card titles */ html body .industry-card.industry-card.industry-card > span, html body .pdp-app-card.pdp-app-card.pdp-app-card > span { color: var(--sartech-deep-blue) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.4; } html body button.industry-card.industry-card:hover > span { color: var(--sartech-blue) !important; } /* one 14px icon-to-title gap: the cards are flex columns with a 14px gap, so the icon wrapper itself carries no bottom margin */ html body .industry-card.industry-card .industry-card__ic.industry-card__ic.industry-card__ic { margin: 0 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; } html body .about-value.about-value .about-value__ic.about-value__ic.about-value__ic { margin: 0 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; } html body .about-value.about-value h3 { margin-top: 0 !important; } html body .pdp-app-card.pdp-app-card.pdp-app-card { gap: 14px !important; } /* new high-resolution logo (Logo Main, 4.40:1): 36px tall is 158px wide, so phones use 36px too to stay at the kit's ~160px minimum */ @media (max-width: 980px) { /* matched to prismatech.co.in, whose phone header logo is 33px tall (148.5 x 33 at 390px wide); ours is 147 x 33 at the same width */ html body .header .brand img { height: 33px; } } /* ====================================================================== PRODUCT PAGES: COVER HERO WITH THE PRODUCT PHOTO (2026-09-17) Monochrome LCD and LED Backlight open with the same hero-band cover as Products, Capabilities and Industries, but the band holds the product photo; the page title (h1) and its description sit under the Product Overview heading, where the photo was first placed. ====================================================================== */ html body .hero-band__inner--figure.hero-band__inner--figure { max-width: 760px; height: 100%; display: flex; align-items: center; justify-content: center; } html body .hero-band__figure { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } html body .hero-band__figure img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; } @media (min-width: 981px) { /* the band is clamp(340px, 33.333vw, 560px) tall with 40px padding top and bottom */ html body .hero-band__figure, html body .hero-band__figure img { max-height: min(360px, calc(clamp(340px, 33.333vw, 560px) - 100px)); } } /* the LCD photo sits on a white background; multiply lets the cover show through the white so no white box appears (the backlight PNG is already transparent) */ html body .hero-band__figure img[src*="sartech-monochrome-lcd"] { mix-blend-mode: multiply; } @media (max-width: 980px) { html body .hero-band__figure img { max-height: 240px; } } @media (max-width: 640px) { html body .hero-band__figure img { max-height: 220px; } } html body .pdp-title { max-width: 900px; margin: 0 auto 44px; text-align: center; } html body .pdp-title h1 { margin: 0; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.143; letter-spacing: -1px; } html body .pdp-title .pdp-title__text { margin: 16px auto 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: var(--sartech-steel); } @media (max-width: 640px) { html body .pdp-title { margin-bottom: 28px; } } /* phone header gutters matched to prismatech.co.in: 20px each side (ours were 28px, so the logo sat 8px further in) */ @media (max-width: 980px) { html body .header .headerbar { padding-left: 20px; padding-right: 20px; } } /* Careers "Why Sartech" cards: same icon treatment as the Vision / Mission / Commitment and industry cards — a 32px Sartech Blue Lucide icon, 14px above the title. Uses its own class because .cap-card__ic is the numbered badge. */ html body .cap-card__glyph { display: flex; justify-content: center; margin: 0 0 14px; padding: 0; color: var(--sartech-blue); } html body .cap-card__glyph svg { width: 32px; height: 32px; stroke-width: 1.75; color: var(--sartech-blue); }
..
, not headings */ html body .footer .footer-title.footer-title { color: var(--sartech-deep-blue) !important; } /* the closing call-to-action band's heading is pinned by the plain layer at (0,2,2) !important; this outranks it */ html body:not(.contact-page) .cta.cta h2 { color: var(--sartech-deep-blue) !important; } /* item titles that are not heading tags take the heading blue too: home Quality & Testing items, Capabilities process steps, and the How It Works steps on both product pages */ html body .quality-item.quality-item > span, html body .process-step.process-step > strong, html body .pdp-step.pdp-step > strong { color: var(--sartech-deep-blue) !important; } /* ABOUT: intro and "Who We Are" merged into one block (2026-09-17); the Vision / Mission / Commitment cards follow it at Home's 44px gap */ html body .page-intro--about.page-intro--about { padding-bottom: 0 !important; } html body .section#company { padding-top: 44px !important; } /* the bar is content-sized: between ~981 and ~1049px the Contact button hides and it shrank to 68px, so heroes pulled up by --header-h (76px) started 8px above the viewport. Hold it at 76px at every width. */ html body .header .headerbar { min-height: var(--header-h); box-sizing: border-box; } /* ====================================================================== LUCIDE ICONS (2026-09-17) Every interface icon is now a Lucide line icon (24px grid, round caps), inlined as SVG; only the four social brand marks keep their logos. One treatment for the icon-over-title cards (Home + Industries industry cards, Vision / Mission / Commitment, product application cards): a 32px Sartech Blue icon with a 1.75 stroke, 14px above a Deep Blue SemiBold title. The old 50px empty tile is gone, which is what left the labels floating far below their icons. ====================================================================== */ html body .lucide { flex-shrink: 0; } html body .industry-card__ic.industry-card__ic.industry-card__ic, html body .about-value__ic.about-value__ic.about-value__ic { width: auto !important; height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 auto 14px !important; padding: 0 !important; color: var(--sartech-blue) !important; display: flex !important; justify-content: center; } html body .industry-card__ic.industry-card__ic.industry-card__ic svg, html body .about-value__ic.about-value__ic.about-value__ic svg, html body .pdp-app-card.pdp-app-card.pdp-app-card svg { width: 32px !important; height: 32px !important; stroke-width: 1.75; color: var(--sartech-blue) !important; } /* industry and application titles read as card titles */ html body .industry-card.industry-card.industry-card > span, html body .pdp-app-card.pdp-app-card.pdp-app-card > span { color: var(--sartech-deep-blue) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.4; } html body button.industry-card.industry-card:hover > span { color: var(--sartech-blue) !important; } /* one 14px icon-to-title gap: the cards are flex columns with a 14px gap, so the icon wrapper itself carries no bottom margin */ html body .industry-card.industry-card .industry-card__ic.industry-card__ic.industry-card__ic { margin: 0 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; } html body .about-value.about-value .about-value__ic.about-value__ic.about-value__ic { margin: 0 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; } html body .about-value.about-value h3 { margin-top: 0 !important; } html body .pdp-app-card.pdp-app-card.pdp-app-card { gap: 14px !important; } /* new high-resolution logo (Logo Main, 4.40:1): 36px tall is 158px wide, so phones use 36px too to stay at the kit's ~160px minimum */ @media (max-width: 980px) { /* matched to prismatech.co.in, whose phone header logo is 33px tall (148.5 x 33 at 390px wide); ours is 147 x 33 at the same width */ html body .header .brand img { height: 33px; } } /* ====================================================================== PRODUCT PAGES: COVER HERO WITH THE PRODUCT PHOTO (2026-09-17) Monochrome LCD and LED Backlight open with the same hero-band cover as Products, Capabilities and Industries, but the band holds the product photo; the page title (h1) and its description sit under the Product Overview heading, where the photo was first placed. ====================================================================== */ html body .hero-band__inner--figure.hero-band__inner--figure { max-width: 760px; height: 100%; display: flex; align-items: center; justify-content: center; } html body .hero-band__figure { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } html body .hero-band__figure img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; } @media (min-width: 981px) { /* the band is clamp(340px, 33.333vw, 560px) tall with 40px padding top and bottom */ html body .hero-band__figure, html body .hero-band__figure img { max-height: min(360px, calc(clamp(340px, 33.333vw, 560px) - 100px)); } } /* the LCD photo sits on a white background; multiply lets the cover show through the white so no white box appears (the backlight PNG is already transparent) */ html body .hero-band__figure img[src*="sartech-monochrome-lcd"] { mix-blend-mode: multiply; } @media (max-width: 980px) { html body .hero-band__figure img { max-height: 240px; } } @media (max-width: 640px) { html body .hero-band__figure img { max-height: 220px; } } html body .pdp-title { max-width: 900px; margin: 0 auto 44px; text-align: center; } html body .pdp-title h1 { margin: 0; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.143; letter-spacing: -1px; } html body .pdp-title .pdp-title__text { margin: 16px auto 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: var(--sartech-steel); } @media (max-width: 640px) { html body .pdp-title { margin-bottom: 28px; } } /* phone header gutters matched to prismatech.co.in: 20px each side (ours were 28px, so the logo sat 8px further in) */ @media (max-width: 980px) { html body .header .headerbar { padding-left: 20px; padding-right: 20px; } } /* Careers "Why Sartech" cards: same icon treatment as the Vision / Mission / Commitment and industry cards — a 32px Sartech Blue Lucide icon, 14px above the title. Uses its own class because .cap-card__ic is the numbered badge. */ html body .cap-card__glyph { display: flex; justify-content: center; margin: 0 0 14px; padding: 0; color: var(--sartech-blue); } html body .cap-card__glyph svg { width: 32px; height: 32px; stroke-width: 1.75; color: var(--sartech-blue); }