/* =========================================================================== Light theme --------------------------------------------------------------------------- Layered on top of custom.min.css / home.min.css, which between them hold ~1,900 hard-coded background declarations and no :root or custom-property layer to hook into. Nothing in those two files is edited: remove the one that pulls this in and the site is fully dark again. Deliberately dark ("dark islands"): - the header bar and the footer - every hero / banner - sections built on background video or full-bleed imagery - buttons Everything else is light. Because the base files set their colours directly on element selectors, the text rules below need !important to land - the dark islands then re-assert white the same way. ======================================================================== */ .terms-clr .sticky .header__nav--list a { color: #fff !important; } .terms-clr .sticky .nums { color:#fff !important; } .terms-clr .sticky .nums img { filter: brightness(1) !important; } .terms-clr .sticky .drk img { content:unset !important; } .no-home .sticky .header__nav--list a { color: #fff !important; } .no-home .sticky .nums { color:#fff !important; } .no-home .sticky .nums img { filter: brightness(1) !important; } .no-home .sticky .drk img { content:unset !important; } .childMenu__list .childMenu__list--item { color: #000 !important; } .featuredArticlesWrapper__title { color: #000 !important; } .arcSection { DISPLAY: NONE; } .genericHead h6, h1, p { color: #000 !important; } .form__title { color: #000 !important; } .homeHero__descrip h1 { color: #fff !important; } .homeHero__descrip p { color: #fff !important; } .homeServices.section { background: #ffffffa6 !important; } .technologyStackSection { background: #ffffffa6 !important; } .tabcontent .txt-wht { font-weight: 405; } :root { --lt-canvas: #f2f2f5; /* page behind the sections */ --lt-surface: #ffffff; /* section background */ --lt-surface-2: #f7f7f9; /* alternating / inset panels */ --lt-card: #ffffff; /* cards sitting on a section */ --lt-ink: #16161a; /* primary text */ --lt-ink-soft: #54545e; /* body copy, captions */ --lt-line: rgba(20, 20, 24, .26); --lt-line-soft: rgba(20, 20, 24, .14); --lt-shadow: 0 1px 2px rgba(20, 20, 24, .04), 0 8px 24px rgba(20, 20, 24, .06); /* The "We Help A Diverse Clientele" band. The heading sits in one wrapper and the cards in another, so the fill lives here once and both read it - change this single value and the whole band moves together. */ --lt-sticky-bg: #ffffffa6; } /* ---------------------------------------------------------------- 1. base */ body { background-color: var(--lt-canvas); color: var(--lt-ink); } body::-webkit-scrollbar, body::-webkit-scrollbar-track { background-color: var(--lt-surface-2); } /* Text selection. home.min.css sets "::selection { background: linear-gradient(...) }" - but the selection pseudo-element only honours background-COLOR, never an image or a gradient. The gradient was therefore dropped while its "color: #fff" stuck, so selecting anything painted the text white with nothing behind it: invisible on the light page. (Firefox was separately handed #ad0dce, a purple that is not a brand colour at all.) A flat brand red for both. */ ::selection { background-color: #cc0000; color: #fff; } ::-moz-selection { background-color: #cc0000; color: #fff; } /* ------------------------------------------------------- 2. light sections One entry per section that flips. Backgrounds first, then text. */ .whatWeDo, .ourWork, .homePartners, .homeServices, .ourClients, .faqsSection, .technologyStackSection, .missionVision, .serviceDetailMissionVision, .seamlessProcess, .contentWithCounters, .ourProcess, .ourBlogs, /* These two are wrapper divs; the background is painted on the
inside. */ .servicesSliderSection, .servicesSliderSection > .section, .stickyCardsListSection, .stickyCardsListSection > .section, .termsAndConditionsSection, .services_sections, .reviews-main, .tabs-main, .global-presence-sec, .case-studies-challenges, .case-studies-solutions, .case-studies-about-project, .case-studies-results, .case-studies-digital-experience, .case-studies-project-images, .case-studies-testimonials, .case-studies-innerpages, .case-studies-design-brief, .case-studies-imageboxes, .case-studies-concept-development, .case-studies-typography-colors { background: var(--lt-surface) ; color: var(--lt-ink); } /* The radial "spotlight" pseudo-elements these sections paint behind themselves are tuned for black; on white they read as grey smears. */ .missionVision::before, .missionVision::after, .ourBlogs::before, .technologyStackSection::before, .seamlessProcess::before, .homeServices::after { background: none !important; filter: none !important; opacity: 0 !important; } /* Text inside the light sections. */ .whatWeDo :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .ourWork :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .homePartners :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .homeServices :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .ourClients :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .faqsSection :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .technologyStackSection :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .missionVision :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .serviceDetailMissionVision :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .seamlessProcess :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .contentWithCounters :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .ourProcess :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .ourBlogs :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .servicesSliderSection :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .stickyCardsListSection :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .termsAndConditionsSection :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .services_sections :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .reviews-main :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .tabs-main :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .global-presence-sec :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-challenges :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-solutions :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-about-project :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-results :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-digital-experience :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-project-images :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea), .case-studies-testimonials :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, td, th, figcaption, div, button, input, select, textarea) { color: var(--lt-ink) !important; } /* Body copy sits a shade lighter than headings. */ .whatWeDo p, .ourWork p, .homePartners p, .homeServices p, .ourClients p, .faqsSection p, .technologyStackSection p, .missionVision p, .serviceDetailMissionVision p, .seamlessProcess p, .contentWithCounters p, .ourProcess p, .ourBlogs p, .servicesSliderSection p, .termsAndConditionsSection p, .services_sections p, .case-studies-challenges p, .case-studies-solutions p, .case-studies-about-project p, .case-studies-results p, .case-studies-digital-experience p, .case-studies-testimonials p { color: var(--lt-ink-soft) !important; } /* --------------------------------------------------------- 3. dark islands Re-stated after the light rules so anything nested inside a light section keeps its own treatment. */ /* .homeTestimonials is deliberately absent from both lists below. The same class is dark behind video on the homepage but already ships light (#ededed) on the service pages, so forcing either way breaks one of them - left alone it keeps whatever the base stylesheets intended for that page. */ /* .header is not in this list. It ships transparent - the bar you see is the rounded .header__wrapper pill floating over the hero - so filling it turned the whole strip into a solid black band. Its text rule below is enough. */ /* .footer has moved to the light side - see the footer block further down. */ .homeHero, .innerBanner, .videoBanner, .servicesHeroBanner, .case-studies-banner, .contactUsBanner, .thnk-banner, .successSection, .formPopup { background-color: #FFF; color: #fff; } .header :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .homeHero :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .innerBanner :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .videoBanner :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .servicesHeroBanner :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .case-studies-banner :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .contactUsBanner :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .thnk-banner :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea), .successSection :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, b, em, label, div, button, input, select, textarea) { color: #fff ; } /* The services inner-page banner carries a translucent white veil instead of a flat ground colour. .innerBanner is already position:relative in custom.min.css and has no ::before of its own, so inset:0 sizes the veil to the banner and nothing is being overridden. The veil paints above the banner background and below .bannerContent, so the copy over it is unaffected. The banner deliberately does NOT get isolation:isolate. .innerHeroImage is position:absolute with z-index:-1, and this banner is position:relative with z-index:auto, so it forms no stacking context and that negative-z layer escapes to the root, landing behind the banner's own opaque #FFF from the dark-islands block above - which is what keeps the hero photograph out of sight. Isolating would pull the photo back inside and put it on screen; that is not wanted here, so the banner stays a flat ground. */ .servicesHeroBanner.innerBanner::before { content: ""; position: absolute; inset: 0; background-color: #c5c5c51f !important; } /* The banner enquiry form, as a glass panel. The ID scores 1,0,0, so it clears .formPopup__form and the dark-islands fill without needing !important. */ #service-form { background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); } /* Highlighted phrase inside a heading - brand red, so the service name carries the line. Weight is deliberately left alone: the phrase keeps the heading's own weight and the colour does the work. The class is doubled, and that is load-bearing. The light-sections block above addresses its contents as ".technologyStackSection :is(... span ...)", which scores 0,1,1 with !important - a single ".headingAccent" is only 0,1,0 and loses to it, so every accent inside one of those sections stayed black while the one in the banner (which sits in no listed section) went red. Doubling to 0,2,0 clears it everywhere. */ .headingAccent.headingAccent { color: #cc0000 !important; } .megaMenu__item h4 { color: #000 !important; } /* Buttons stay exactly as they are, wherever they land. The class is doubled on purpose. A light section addresses its contents as ".ourWork :is(button, div, span)", which scores 0,1,1 - a single ".primary-btn" is only 0,1,0 and would lose, turning button labels dark on their red fill. ".primary-btn.primary-btn" scores 0,2,0 and wins without needing a parent. */ .primary-btn.primary-btn, .primary-btn.primary-btn *, .submit-btn.submit-btn, .submit-btn.submit-btn *, .verticalPopupBtn.verticalPopupBtn, .verticalPopupBtn.verticalPopupBtn *, .servicesSection__slider--popup-btn.servicesSection__slider--popup-btn, .trigger-btn.trigger-btn, .trigger-btn.trigger-btn * { color: #fff !important; } /* ------------------------------------------------------------ 4. surfaces Cards were dark panels with a white hairline; both need flipping. */ .ourProcess .process-cards__container .process__card, .servicesSliderSection .servicesSection__slider--card, .whatWeDo .presenceList, .faqsSection .faqsList__item, .technologyStackSection .tech-box-img, .stickyCardsList--card, .counter-box, .image-box-wrapper { background-color: var(--lt-card) !important; border-color: var(--lt-line) !important; /*box-shadow: var(--lt-shadow);*/ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* The hairline is drawn as a white gradient behind a mask - recolour it. .tech-box-img::before is deliberately NOT in this list. It looks similar in the stylesheet but it is the blurred colour glow sitting behind each logo, not a border: flattening its filter and painting it grey turned it into a solid grey square in the middle of every tile. */ .ourProcess .process-cards__container .process__card::before, .servicesSliderSection .servicesSection__slider--card::before { background: var(--lt-line) !important; filter: none !important; } /* Separators that were white-on-black. */ .contentWithCounters .countersWrapper .item__left::after, .accordianWrapper, .faqsList__item { border-color: var(--lt-line) !important; } .contentWithCounters .countersWrapper .item__left::after { background-color: var(--lt-ink) !important; } /* Edge fades on the logo marquee were painted black. */ .whatWeDo__slider::before { background: linear-gradient(to right, var(--lt-surface), transparent) !important; } .whatWeDo__slider::after { background: linear-gradient(to left, var(--lt-surface), transparent) !important; } /* ------------------------------------------- 5. white artwork on white bg 321 of the site's 542 SVGs are drawn in white, plus the monochrome client and press logos. brightness(0) paints them solid black and leaves the alpha channel alone, which is what these flat marks need. Photographs and multi-colour artwork are left untouched. */ .ourClients .client-list .img-wrapper img, .whatWeDo__slider--slideImg img, .accordianWrapper .icon img, .arrow-btn img, .faqsList__item img, .presenceList__list--item img, .seamlessProcess img[src$=".svg"], .ourProcess img[src$=".svg"], .contentWithCounters img[src$=".svg"], .case-studies-results img[src$=".svg"] { filter: brightness(0); } /* Flat white marks in the tech-stack tiles. Found by reading every file under assets/svg/technology and checking its fill values: 32 of them carry no colour at all - every fill in the file is white. That was correct when the tile was a dark panel; on the light one they are completely invisible, which is what made the Node.js tile look broken and was silently true of 31 others nobody had hit yet. brightness(0) paints them solid black and leaves the alpha channel alone, the same treatment the other flat white SVGs in this file get; the slight opacity lift keeps them from reading heavier than the coloured logos beside them. Matched on file name, so no markup changes and no per-icon classes. (A further ~180 icons contain SOME white among other colours. Those are left alone deliberately - there the white is detail inside a coloured mark, and blanket-darkening would wreck them. Node.js was one of those and was fixed in the file itself instead: its three white wordmark paths are now #3C3C3C.) */ .technologyStackSection .tech-box-img img[src$="/adzooma.svg"], .technologyStackSection .tech-box-img img[src$="/apache-cordova.svg"], .technologyStackSection .tech-box-img img[src$="/buffer.svg"], .technologyStackSection .tech-box-img img[src$="/chatwoot.svg"], .technologyStackSection .tech-box-img img[src$="/dall-e-2.svg"], .technologyStackSection .tech-box-img img[src$="/etl.svg"], .technologyStackSection .tech-box-img img[src$="/google-notebook-lm.svg"], .technologyStackSection .tech-box-img img[src$="/gpt-4o.svg"], .technologyStackSection .tech-box-img img[src$="/haro.svg"], .technologyStackSection .tech-box-img img[src$="/langchain.svg"], .technologyStackSection .tech-box-img img[src$="/lang-chain.svg"], .technologyStackSection .tech-box-img img[src$="/laragon.svg"], .technologyStackSection .tech-box-img img[src$="/lisp.svg"], .technologyStackSection .tech-box-img img[src$="/mailchimp.svg"], .technologyStackSection .tech-box-img img[src$="/notion.svg"], .technologyStackSection .tech-box-img img[src$="/obs-studio.svg"], .technologyStackSection .tech-box-img img[src$="/pinecone.svg"], .technologyStackSection .tech-box-img img[src$="/quantcast.svg"], .technologyStackSection .tech-box-img img[src$="/rive.svg"], .technologyStackSection .tech-box-img img[src$="/runway-ml.svg"], .technologyStackSection .tech-box-img img[src$="/solidity.svg"], .technologyStackSection .tech-box-img img[src$="/symfony.svg"], .technologyStackSection .tech-box-img img[src$="/toonboom-harmony.svg"], .technologyStackSection .tech-box-img img[src$="/toon-boom-harmony.svg"], .technologyStackSection .tech-box-img img[src$="/typeforms.svg"], .technologyStackSection .tech-box-img img[src$="/unreal-engine.svg"], .technologyStackSection .tech-box-img img[src$="/viddyoze.svg"], .technologyStackSection .tech-box-img img[src$="/voiceflow.svg"], .technologyStackSection .tech-box-img img[src$="/vyper.svg"], .technologyStackSection .tech-box-img img[src$="/web3-js.svg"], .technologyStackSection .tech-box-img img[src$="/wit-ai.svg"], .technologyStackSection .tech-box-img img[src$="/x-Twitter-ads-platform.svg"] { filter: brightness(0) !important; opacity: .78 !important; } /* Popup close buttons. Both of these hover to "background: #ad0dce" in the base files - a purple that is not a brand colour anywhere on this site. It is the same stray value that was sitting in the ::selection rule further up. Swapped for the brand gradient the primary buttons use, so the control matches everything else. Two selectors because there are two popups: the enquiry form and the services slider's detail panel. The slider one is gated to 1200px and up in the base, which is why its own hover only exists there. */ .formPopup__closeBtn:hover, .servicesSliderSection .popupContent__closeBtn:hover { background: linear-gradient(213deg, #8e0000 -39.81%, #cc0000 85.21%) !important; } /* FAQ toggles, matched to the accordion toggles above. Those got a pale disc with a hairline and an ink arrow. The FAQ ones never had a disc to restyle: the base gives ".faqsList__question .icon" only "width: .8125em; flex-shrink: 0", so the arrow sat bare on the row. The whole circle is built here, copying the accordion's own 2.04925em so the two controls are the same size on the page. The img needs pinning back to its old width - the base sets it to 100%, which was fine in a 13px box and would fill the entire disc now. The rotate-45 the base applies on .active rides on the img and is untouched. */ .faqsSection .faqsList__question .icon { width: 2.04925em !important; height: 2.04925em; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lt-surface-2); border: 1px solid var(--lt-line); overflow: hidden; } .faqsSection .faqsList__question .icon img { width: .8125em !important; height: auto; } /* Hover on the process cards - deliberately a different gesture from the "Difference We Deliver" cards above, which outline in red and cast a shadow. Here a brand-red bar wipes in along the bottom edge instead. It hangs off .process__card::after, the one pseudo-element free on this component (::before is the masked hairline), and animates on transform so it is a compositor job rather than a layout one. The base already lifts the card by 1em at 1200px and up and this file already eases the icon from grey to red, so the bar is the third thing that moves and the trio reads as one gesture. scaleX from a left origin needs the card to clip, which it does not by default, so overflow is set here - the card has nothing that overflows it. */ @media (min-width: 1200px) { .ourProcess .process-cards__container .process__card { overflow: hidden; } .ourProcess .process-cards__container .process__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #8e0000, #cc0000); transform: scaleX(0); transform-origin: left center; transition: transform .45s ease; pointer-events: none; } .ourProcess .process-cards__container .process__card:hover::after { transform: scaleX(1); } } /* Hover on the "Difference We Deliver" cards. The base already lifts the card by .625em at 1200px and up, but on the light page that lift reads as almost nothing: the card is white on near-white with a hairline, so moving it up eight pixels changes very little. The lift is kept and given something to cast - a soft red-tinted shadow - plus the hairline and the title turn brand red, so the card that is under the cursor is obvious. The hairline is .servicesSection__slider--card::before, a gradient behind a mask rather than a real border, which is why the colour goes on background. Gated to the same 1200px breakpoint the base uses for its lift: below that these are touch-scrolled cards and there is no hover to speak of. */ @media (min-width: 1200px) { .servicesSliderSection .servicesSection__slider--card { transition: transform .4s ease, box-shadow .4s ease; } .servicesSliderSection .servicesSection__slider--card:hover { box-shadow: 0 1.1em 2.2em -.55em rgba(204, 0, 0, .2); } .servicesSliderSection .servicesSection__slider--card:hover::before { background: rgba(204, 0, 0, .5) !important; } .servicesSliderSection .servicesSection__slider--card:hover .servicesSection__slider--title { color: #cc0000 !important; transition: color .3s ease; } } /* Accordion rows had nothing separating them. The base files give .accordianWrapper padding-bottom and margin-bottom but no border at all, so on the light page the items ran together as one column of text with no sign of where one ended and the next began. (The "border-color" this file sets on .accordianWrapper further up was therefore a no-op - a colour with no width draws nothing.) A hairline at --lt-line-soft is enough to separate them without turning the list into a table. */ .accordianWrapper { border-bottom: 1px solid var(--lt-line-soft) !important; } /* Process-card headings were being cut off. The markup tags them ".line-clamp-1", which the base files implement as a one-line -webkit-box with an ellipsis. Most of these titles do not fit one line at the card's width, so they arrived as "Design &...", "Integration &...", "Testing &..." - the card named nothing you could read. The clamp is removed rather than raised to two lines: across the 126 pages that carry this section there are 163 distinct titles and the longest runs to 43 characters, so any fixed line count is a guess that will clip something. The cards sit in a grid, so rows still align when one title wraps and its neighbour does not. display needs !important because the base sets "display: -webkit-box !important". */ .ourProcess .process-cards__container .process__card .process__card--title { display: block !important; -webkit-line-clamp: unset; overflow: visible; text-overflow: clip; } /* The process-card icons. These are not covered by the blanket rule above - the base file addresses them as ".ourProcess .process-cards__container .process__card .icon-wrapper img", which is 0,4,1 and outranks it. They also carried two faults on a light card, both inherited from the dark design where the card was rgba(43,43,43,.6): hover filter: ... invert(1) -> white icon on a white card below 1200px filter: ... invert(1) -> white at rest, so on tablet and phone the icons never appeared Resting state is a mid grey at every width, and hover eases to brand red over .45s. The red has to be a filter chain rather than a colour property, because these are SVGs and CSS cannot reach inside them. The chain's painted output was sampled off a render: resting #8c8c8c, hover #d50000 against the brand #cc0000 - exact on green and blue, nine points high on red. The last brightness() in the chain is the lightness dial; it started at 101%, which measured #ff0401, and 80% brought it onto the brand. */ .ourProcess .process-cards__container .process__card .icon-wrapper img { filter: grayscale(100%) brightness(0) invert(.55) !important; transition: filter .45s ease !important; } .ourProcess .process-cards__container .process__card:hover .icon-wrapper img { filter: brightness(0) saturate(100%) invert(13%) sepia(88%) saturate(5760%) hue-rotate(2deg) brightness(80%) contrast(115%) !important; } /* The section keeps the flat #ffffffa6 set near the top of this file - the marble background that briefly sat here has been removed. */ /* The tech-stack tiles: softer coloured glow inside, and a pedestal under each tile so it reads as standing on a surface. Each technology sets its own colour in custom.min.css across four layers - the tile's inset rim, the blurred blob behind the logo (::before), the .shadow layer's inset rim, and .shadow__wrapper::after. There are 334 of those colour sets, so nothing here restates a colour: the blob is simply turned down, and the pedestal is neutral white for every tile. Two layers wash colour across the inside of a tile: the blurred blob behind the logo (::before) and .shadow__wrapper::after, a blurred bar of the same colour pinned along the tile's bottom edge. Both are turned right down. The inset rims on .tech-box-img and .shadow are deliberately left alone - those draw the tile's coloured edge, which is what still identifies each one. */ .technologyStackSection .swiper-slide .tech-box-wrapper .tech-box-img::before { opacity: .12 !important; } .technologyStackSection .swiper-slide .tech-box-wrapper .tech-box-img .shadow__wrapper::after { opacity: .4 !important; } /* The pedestal each tile stands on. It hangs off .tech-box-wrapper::before, and both of those choices matter: - the WRAPPER, not .tech-box-img. The tile ships overflow:hidden, so anything drawn on it that reaches past its edge is clipped - the pedestal sits below that edge by definition and simply never appeared. The wrapper sets no overflow of its own, so it can draw outside the tile. - ::before, not ::after. Both the pedestal and the tile end up in the positioned layer, so paint order is DOM order: ::before comes first and the tile lands on top of it, which is what sells the tile as standing on the slab. With ::after the pedestal would cover the tile's bottom edge and its coloured rim with it. (z-index:-1 is not the answer either - the wrapper is z-index:auto, so a negative-z child escapes to the root and paints behind the section.) The gradient is what makes it read as a solid slab rather than a flat bar: near-white across the top face, stepping to grey at the front edge. */ .technologyStackSection .swiper-slide .tech-box-wrapper { position: relative; } .technologyStackSection .swiper-slide .tech-box-wrapper::before { content: ""; position: absolute; left: 50%; top: 10.55em; transform: translateX(-50%); width: 118%; height: 1.6em; /* A full ellipse rather than a rounded rectangle - the slab is meant to read as a round disc seen at a shallow angle, so the ends curve all the way. */ border-radius: 50%; background: linear-gradient(180deg, #ffffff 0%, #fafafb 42%, #ececed 72%, #dedee2 100%); box-shadow: 0 .45em .75em -.15em rgba(20, 20, 24, .13), 0 .08em .18em rgba(20, 20, 24, .07); pointer-events: none; /* matches the .5s ease the tile itself animates with, so the slab travels in step with it instead of snapping to the new position */ transition: top .5s ease, height .5s ease; } /* On hover the tile grows from 11.14em to 20.25em tall, and the pedestal has to follow or it stays stranded at the old height, hidden behind the bigger tile. Width needs no rule: the slab is a percentage of the wrapper, which grows with the slide on its own. Same breakpoint the base file gates its hover with. */ @media (min-width: 1200px) { .technologyStackSection .swiper-slide:hover .tech-box-wrapper::before { top: 19.6em; height: 2.35em; } } @media (max-width: 991.98px) { .technologyStackSection .swiper-slide .tech-box-wrapper::before { top: 7.1em; height: 1.05em; } } /* The tech-stack tiles carry their own coloured glow, so their logos stay. */ .technologyStackSection .tech-box-img img { filter: none; } /* The same press-logo strip also runs along the bottom of the dark hero banner. There the white marks are already correct, so the blackening above has to be undone - and the edge fades, which this file repaints white for the light sections, would be two white smears across the banner. */ .innerBanner .whatWeDo__slider--slideImg img { filter: none !important; } .innerBanner .whatWeDo__slider::before, .innerBanner .whatWeDo__slider::after { display: none !important; } /* The portfolio tab marker is a white arrow drawn as a background image on the pseudo-element, so the filter goes on the pseudo-element rather than the button. */ .ourWork__tab::before { filter: brightness(0); } /* On black the active tab was white against grey. On the light page the resting tabs are soft ink and the active one takes the brand red, so the selection is obvious without relying on brightness alone. */ .ourWork__tab { color: var(--lt-ink-soft) !important; } .ourWork__tab.active { color: #cc0000 !important; font-weight: 500; } /* The arrow marker is a background image on the pseudo-element, so it cannot take a colour property - it needs the same solved filter chain the process icons use, whose painted output was measured at #d50000 against the brand #cc0000. Restated here because the blanket brightness(0) above would otherwise keep the active tab's arrow black while its label turned red. */ .ourWork__tab.active::before { filter: brightness(0) saturate(100%) invert(13%) sepia(88%) saturate(5760%) hue-rotate(2deg) brightness(80%) contrast(115%); } /* ------------------------------------------------- 7. stragglers Found by walking every rendered page and flagging any text whose contrast against its painted background fell below 2.2:1. */ /* The industry cards. The stylesheets scope these to .stickyCardsListWrapper, not the .stickyCardsListSection the markup wraps them in, so the section-level rules above never reached the headings, counters or service links. .stickyCardsHead is the heading half of the same band - the wrapper around "We Help A Diverse Clientele...". It is a hook added to the markup on all 127 pages that carry this section, alongside the .stickyCardsListSection class it already had. That original class is listed among the light sections further up, where it picks up the opaque --lt-surface, which is why the heading came out flat white while the cards below it sat on the translucent fill. Both halves now read the same token, so the band is one continuous colour. The fill is translucent, so it must be painted exactly once. The heading half is two boxes - the wrapper div and a
inside it that covers the wrapper edge to edge - and the light-sections block above paints both. Giving both the token stacked two 65% whites on top of each other and the band came out at #fefefe against the cards' #fafafc: the same colour on paper, visibly lighter on screen. The wrapper carries the fill; the inner section is cleared so nothing paints over it. (The cards half has no inner .section, so it is a single layer already.) */ .stickyCardsListWrapper, .stickyCardsListWrapper .section, .stickyCardsHead { background: var(--lt-sticky-bg) !important; } .stickyCardsHead > .section { background: transparent !important; } .stickyCardsListWrapper :is(h1, h2, h3, h4, h5, h6, span, li, a, strong, b, em, label, div, button) { color: var(--lt-ink) !important; } .stickyCardsListWrapper p { color: var(--lt-ink-soft) !important; } .stickyCardsListWrapper .stickyCardsList--card--services p a::after { background: var(--lt-ink) !important; } /* Case-study copy cards carry their own near-black fill inside a light section. */ .cards__grid .card, .card.content__card { background-color: var(--lt-card) !important; border-color: var(--lt-line) !important; } .cards__grid .card :is(h1, h2, h3, h4, h5, h6, span, li, a, div), .card.content__card :is(h1, h2, h3, h4, h5, h6, span, li, a, div) { color: var(--lt-ink) !important; } .cards__grid .card p, .card.content__card p { color: var(--lt-ink-soft) !important; } /* The services fly-out panels. These are drawn as rgba(0,0,0,.4) over what used to be a black page, which on white reads as flat grey - and the light-section text rule then darkened their labels on top of it. They are their own dark surface, so they get a solid fill and white text back. */ /* Pages whose first section is light carry .lightTop on the body. The header floats transparent over that section, so its white mark and labels land on a near-white band and disappear. Measured by sampling what is actually painted under the header: case-studies/, reviews, privacy-policy, terms-and-condition. The logo is swapped rather than filtered. It is white lettering plus a red "DESIGN" and a red rule, so brightness(0) would flatten the red away too; logo-dark.png recolours only the white strokes and leaves the red alone. */ .lightTop .header__logo img { content: url("../images/logo-dark.png"); } .lightTop .header__nav--listAnchor, .lightTop .header__nav--listAnchor span, .lightTop .header__contactBtnsWrapper a, .lightTop .header__nav--list li a { color: var(--lt-ink) !important; } /* The underline that slides in under a nav item is drawn in white. */ .lightTop .header__nav--listAnchor::before { background: var(--lt-ink) !important; } /* The mail glyph is a white SVG. */ .lightTop .header__contactBtnsWrapper .contactBtn img { filter: brightness(0); } /* "Speak to an expert" keeps its red fill and white label. */ .lightTop .primary-btn.primary-btn, .lightTop .primary-btn.primary-btn * { color: #fff !important; } /* Once scrolled, the header condenses into a pill filled with rgba(0,0,0,.3). Over the old black page that read as dark; over a light one it is pale grey with white nav text on it. Same pill, same blur, just opaque enough to keep the labels legible now that the page behind it is white. */ @media (min-width: 1200px) { .header.sticky .header__wrapper { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, .3); } } /* Only the panels get a fill. The