/* ========================================================================== FULL-PAGE VIDEO BACKGROUND -- PRODUCTION STYLESHEET, VERSION 3 File: /css/fullpage-video.css Class: body.video-page Created: 09 August 2026 WHAT THIS IS The permanent replacement for the two pilot stylesheets. It takes the background video out of the hero strip and makes it the background of the whole page, then repairs every panel and every piece of text that assumed a white page underneath it. HOW IT IS TURNED ON A page gets the treatment only if its tag carries class="video-page". No other page can be affected by anything in this file. WHAT IS IN VERSION 1 Only rules that are either GENERIC (they apply to any page and cannot assume a layout) or PROVEN (carried over unchanged from the two pilots that were reviewed and approved on screen). Nothing here was written for a page that has not been read. Rules for the services pages, the homepages and the marketing pages are added in later versions, after each group has been surveyed. VERSION STRING Load this file as /css/fullpage-video.css?v=3 and raise the number on every future change. Without it, returning visitors keep an old copy from their browser's cache and see a half-updated page. ========================================================================== */ /* -------------------------------------------------------------------------- 1. LET THE PAGE SHOW THROUGH The site's normal body background is solid white. Make it see-through so the video behind it is visible. -------------------------------------------------------------------------- */ body.video-page { background: transparent; } /* -------------------------------------------------------------------------- 2. PIN THE VIDEO AND ITS OVERLAY TO THE WINDOW "fixed" = glued to the window, does not scroll with the page. "inset: 0" = stretch to all four edges of the window. Negative z-index = sit behind everything else on the page. The overlay is a dark tint that keeps light text legible over the footage. The dark navy background colour on .video-bg addresses the intermittent grey band reported on the services pilot. The theory is that the grey is the video element itself before its first frame paints. This makes any such flash dark navy instead of grey. It did not appear during the legal pilot, which is encouraging but not proof -- the band was always intermittent. Cost is nothing, so it stays either way. -------------------------------------------------------------------------- */ body.video-page .video-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 1; background: #0a1628; } body.video-page .video-overlay { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.62) 100%); z-index: -1; } /* -------------------------------------------------------------------------- 3. REDUCED-MOTION FALLBACK Some people set their operating system to "reduce motion" because moving images make them ill. CSS can hide a video but it cannot stop it playing, so /js/video-page.js removes the video element entirely for those visitors and adds the class below. With no video behind it, the page needs a solid background of its own. -------------------------------------------------------------------------- */ body.video-page.video-page-static { background: #0a1628; } /* -------------------------------------------------------------------------- 4. HERO SECTION The hero normally paints a solid block over the video. Remove it. No min-height rule is written here. Several pages set their own height INSIDE the HTML tag, and an inline style beats any stylesheet rule, so such a rule could never fire on those pages. Writing one would create the false impression that hero height is controlled from here. -------------------------------------------------------------------------- */ body.video-page .page-hero { background: transparent; } /* -------------------------------------------------------------------------- 5. CONTENT SECTIONS -- ALL FOUR KINDS The site uses four different section backgrounds, and they do not all need the same treatment: .section-py (27 on site) no background rule at all .section-py.bg-white (43 on site) Bootstrap's, carries !important .section-py.bg-section (27 on site) yours, var(--gray-50), near-white .section-py.bg-blue-dark (25 on site) yours, var(--blue-900), dark "section-py-sm" is a SEPARATE class, not a variation of "section-py". CSS matches class names exactly, so both must be named. rgba(10,22,40,.72) = the site's dark navy at 72% opacity, i.e. 28% see-through. Reviewed and approved on both pilots. NOTE ON !important The first rule needs none: it outweighs your own .bg-section and .bg-blue-dark rules on selector weight alone. The second rule targets Bootstrap's .bg-white, which carries !important -- a "no arguments" flag that beats any rule without it. The only way past it is to carry the same flag. That is why it appears in the second rule and nowhere else here. -------------------------------------------------------------------------- */ body.video-page .section-py, body.video-page .section-py-sm { background: rgba(10,22,40,.72); } body.video-page .section-py.bg-white, body.video-page .section-py-sm.bg-white { background: rgba(10,22,40,.72) !important; } /* -------------------------------------------------------------------------- 6. TEXT REPAIR IN EVERY PREVIOUSLY-LIGHT SECTION [WIDENED IN v2] WHAT CHANGED AND WHY Version 1 flipped text light only inside .bg-section. That was inherited from the services pilot, which did the same job with two ID selectors, #connectcore and #codeworks. #connectcore happens to also carry bg-section, so it survived the translation from IDs to classes. #codeworks is a PLAIN section-py, so it fell out of the net -- silently, because CSS never warns you when a rule is simply missing. Section 5 above turns EVERY section into a dark navy panel: plain section-py, bg-white, bg-section and bg-blue-dark alike. So every one of them needs light text, not only bg-section. Twenty-four sections across the eight services pages depend on this. bg-white needs no separate mention -- every bg-white section on this site also carries section-py, confirmed by grep. Bootstrap's !important sits on the background only, never on text, so no !important is needed below. bg-blue-dark sections were already light. Restating them costs nothing. "section-py-sm" is a SEPARATE class, not a variation of "section-py". CSS matches class names exactly, so both are named in every rule. PLACEMENT MATTERS -- DO NOT MOVE THIS BLOCK These rules carry the same weight as the card rules in section 12. When two rules weigh the same, the one written LATER in the file wins. Section 12 must stay BELOW this block, or every card silently loses its own text colours. Never append this block to the end of the file. -------------------------------------------------------------------------- */ body.video-page .section-py, body.video-page .section-py-sm, body.video-page .bg-section { color: #e8eef7; } body.video-page .section-py h1, body.video-page .section-py h2, body.video-page .section-py h3, body.video-page .section-py h4, body.video-page .section-py h5, body.video-page .section-py h6, body.video-page .section-py .section-title, body.video-page .section-py-sm h1, body.video-page .section-py-sm h2, body.video-page .section-py-sm h3, body.video-page .section-py-sm h4, body.video-page .section-py-sm h5, body.video-page .section-py-sm h6, body.video-page .section-py-sm .section-title, body.video-page .bg-section h1, body.video-page .bg-section h2, body.video-page .bg-section h3, body.video-page .bg-section h4, body.video-page .bg-section h5, body.video-page .bg-section h6, body.video-page .bg-section .section-title { color: #ffffff; } body.video-page .section-py p, body.video-page .section-py li, body.video-page .section-py em, body.video-page .section-py td, body.video-page .section-py th, body.video-page .section-py-sm p, body.video-page .section-py-sm li, body.video-page .section-py-sm em, body.video-page .section-py-sm td, body.video-page .section-py-sm th, body.video-page .bg-section p, body.video-page .bg-section li, body.video-page .bg-section em, body.video-page .bg-section td, body.video-page .bg-section th { color: rgba(232,238,247,.90); } body.video-page .section-py strong, body.video-page .section-py-sm strong, body.video-page .bg-section strong { color: #ffffff; } /* -------------------------------------------------------------------------- 7. LONG-FORM POLICY COPY Carried over unchanged from the approved legal pilot. Applies to the legal and terms pages, where paragraphs sit directly on the panel with no card underneath them. Opacity .90 rather than the .88 used on cards: long-form reading needs more contrast than a two-line card blurb. -------------------------------------------------------------------------- */ body.video-page .legal-section { background: transparent; color: #e8eef7; } body.video-page .legal-section h2, body.video-page .legal-section h3, body.video-page .legal-section h4, body.video-page .legal-section .section-title { color: #ffffff; } body.video-page .legal-section p, body.video-page .legal-section li, body.video-page .legal-section em { color: rgba(232,238,247,.90); } body.video-page .legal-section strong { color: #ffffff; } body.video-page .legal-section a { color: #7dd3fc; } body.video-page .legal-section a:hover { color: #bae6fd; } /* -------------------------------------------------------------------------- 8. STICKY SUB-NAVIGATION BARS Two kinds exist: the policy bar on legal pages, which writes background:var(--blue-800) inside its HTML tag, and the pillar nav on the services pages, which is labelled for screen readers. An inline style beats every stylesheet rule regardless of weighting, so !important is the only thing that overrides one. backdrop-filter blurs whatever passes behind the bar, so the footage reads as texture rather than as competing detail. -------------------------------------------------------------------------- */ body.video-page div[style*="--blue-800"] { background: rgba(10,22,40,.82) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.video-page nav[aria-label="Service sections"] { background: rgba(10,22,40,.82) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* -------------------------------------------------------------------------- 9. PALE PANELS WRITTEN INLINE Several pages set a panel background inside the HTML tag as background:var(--gray-50) with a --gray-200 border -- a pale grey card, near-invisible on a dark page. NOTE ON THE SELECTOR: the closing bracket in "var(--gray-50)" matters. Searching for "--gray-50" alone would ALSO match "--gray-500", because the shorter name is contained inside the longer one. Including the bracket makes the match exact. -------------------------------------------------------------------------- */ body.video-page div[style*="var(--gray-50)"] { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* -------------------------------------------------------------------------- 10. TEXT COLOURED INSIDE THE HTML TAG Roughly 111 pieces of text across the site carry their colour inline. Every one of them is currently dark or mid-tone, chosen for a white page. Only !important overrides an inline style. Counts found across the site: --blue-500 about 47, --gray-500 about 46, --gray-700 ten, --gray-300 eight, --blue-700 one group. -------------------------------------------------------------------------- */ body.video-page [style*="var(--gray-500)"], body.video-page [style*="var(--gray-700"], body.video-page [style*="var(--gray-300)"] { color: rgba(232,238,247,.85) !important; } body.video-page a[style*="var(--blue-500)"], body.video-page [style*="var(--blue-500)"] { color: #7dd3fc !important; } body.video-page [style*="--blue-700"] { color: #ffffff !important; } body.video-page div[style*="--blue-700"] { background: rgba(14,165,233,.18) !important; border-color: rgba(14,165,233,.45) !important; } /* -------------------------------------------------------------------------- 11. UTILITY CLASSES THAT FORCE THEIR OWN COLOUR Two of these carry !important and would otherwise stay dark: style.css line 220 .text-blue { color: var(--blue-500) !important; } Bootstrap .text-muted { colour forced !important } -------------------------------------------------------------------------- */ body.video-page .text-blue { color: #7dd3fc !important; } body.video-page .text-muted { color: rgba(232,238,247,.82) !important; } /* -------------------------------------------------------------------------- 12. CARDS Carried over unchanged from the approved services pilot. Inactive until the services pages are switched on -- no legal or terms page has a card. WHY THE SELECTORS REPEAT THE ID style.css line 1065 contains section#connectcore .card-eiddi { ... } . An ID outranks any number of classes, so a rule written only with classes loses to it silently and does nothing at all. Repeating the ID gives our rule equal ID rank plus one extra class, which breaks the tie our way. Colours are copied from the site's own .card-eiddi-dark rule. This is the established dark card, not a new design. -------------------------------------------------------------------------- */ body.video-page .card-eiddi, body.video-page section#techfusion .card-eiddi, body.video-page section#connectcore .card-eiddi, body.video-page section#codeworks .card-eiddi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #e8eef7; } body.video-page .card-eiddi:hover, body.video-page section#techfusion .card-eiddi:hover, body.video-page section#connectcore .card-eiddi:hover, body.video-page section#codeworks .card-eiddi:hover { background: rgba(255,255,255,.1); border-color: rgba(59,130,246,.4); box-shadow: none; } body.video-page .card-eiddi h1, body.video-page .card-eiddi h2, body.video-page .card-eiddi h3, body.video-page .card-eiddi h4, body.video-page .card-eiddi h5, body.video-page .card-eiddi h6, body.video-page section#connectcore .card-eiddi h4, body.video-page section#codeworks .card-eiddi h4, body.video-page section#techfusion .card-eiddi h4 { color: #ffffff; } body.video-page .card-eiddi p, body.video-page section#connectcore .card-eiddi p, body.video-page section#codeworks .card-eiddi p, body.video-page section#techfusion .card-eiddi p { color: rgba(232,238,247,.88); } body.video-page .card-eiddi .text-muted, body.video-page section#connectcore .card-eiddi .text-muted, body.video-page section#codeworks .card-eiddi .text-muted { color: rgba(232,238,247,.78) !important; } /* The accent taglines are forced to var(--blue-500) by style.css line 1085, which carries !important. Overriding it needs both a heavier selector and a matching !important. Cyan reads clearly on the dark card; mid-blue does not. */ body.video-page section#connectcore .card-eiddi p[style*="--accent"], body.video-page section#codeworks .card-eiddi p[style*="--accent"], body.video-page section#techfusion .card-eiddi p[style*="--accent"] { color: var(--accent) !important; } /* The round icon badge was a pale blue disc with a mid-blue icon -- too bright against a dark card. The SVG uses stroke="currentColor", so setting the colour here recolours the icon itself. */ body.video-page .card-icon, body.video-page section#techfusion .card-icon, body.video-page section#connectcore .card-icon, body.video-page section#codeworks .card-icon { background: rgba(59,130,246,.18); color: #7dd3fc; } /* -------------------------------------------------------------------------- 13. FOOTER The point of the whole exercise: no background of its own, so the links and the bottom line sit directly on the moving footage. The .footer-bottom scrim is deliberate. On eiddidispatch.com the bottom line goes soft where it crosses pale scenery. This stops that happening. -------------------------------------------------------------------------- */ body.video-page #site-footer { background: transparent !important; border-top: 1px solid rgba(255,255,255,.14); } body.video-page .footer-bottom { background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* ========================================================================== STILL NOT WRITTEN -- needs a survey first, do not guess .notice-bar style.css line 966, background var(--blue-50). Lives on us/index.html, which is batch 4 and has not been read. It is a CLASS, so section 14A does not reach it -- 14A matches inline styles only. Write a rule when batch 4 is surveyed, not before. .video-hero the three homepages. min-height:100vh, a different case from .page-hero entirely. 404 pages inline background AND display:flex on the tag. Marketing pages batch 3 -- about, careers, esg, partners, insights, value, vision, contact, engage, why-eiddi. None read yet. ========================================================================== */ /* -------------------------------------------------------------------------- 14. PALE PANELS AND OUTLINE BUTTONS [REPLACED 12 AUGUST 2026] WHAT CHANGED AND WHY The 11 August version kept every pale panel pale and forced its text dark. Seen on screen on 12 August, that produced a page with light boxes floating among dark ones, and it needed a separate text-repair rule for every pale panel anyone happened to find. It was rejected as inconsistent. This version does the opposite, and is much shorter for it: every pale panel becomes the same translucent dark box the site's own dark cards already use. Once a panel is dark, sections 5, 6, 10 and 12 colour its text correctly by themselves, so roughly fifty lines of per-panel text repair are gone. The rule to carry into batches 3 and 4: on a video page there are no light surfaces. Anything pale is a defect, not a design choice. -------------------------------------------------------------------------- */ /* 14A. PALE PANELS WRITTEN INSIDE THE HTML TAG Two pale backgrounds are written directly into tags on the pages already converted: background:var(--blue-50) the box holding the three buttons at the foot of /terms/, /pk/terms/ and /us/terms/ background:var(--blue-50,#eff6ff) the "Accepted Payment Methods" panel, four pages (3 US, 1 PK) TRAP, CHECKED BY READING THE STRING RATHER THAN ASSUMING IT: "linear-gradient(180deg,var(--blue-50),white)" CONTAINS the exact text "var(--blue-50)". Without the :not() below, this rule would also catch the two gradient cards and wipe the blue border that marks the primary service. Neither form can match the other, and neither can match var(--blue-500): in "var(--blue-50," the comma stops it, in "var(--blue-50)" the bracket does. An inline style beats any stylesheet rule, so !important is the only way in. */ body.video-page div[style*="var(--blue-50)"]:not([style*="linear-gradient"]), body.video-page div[style*="var(--blue-50,#eff6ff)"] { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* 14B. THE TWO PALE GRADIENT CARDS us/services/index.html lines 43 and 97. Section 12 already gives every .card-eiddi a dark translucent background, but an inline gradient beats a stylesheet, so these two stayed white. THE BLUE BORDER IS KEPT DELIBERATELY. Together with the solid blue "Primary Service" badge it is what marks the lead service. It does not also need a different background colour -- that is precisely what made the card look skipped rather than promoted. pk/services/index.html has none of these cards: grep count 0. */ body.video-page .card-eiddi[style*="linear-gradient(180deg,var(--blue-50),white)"] { background: rgba(255,255,255,.06) !important; border-color: var(--blue-400) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* The round icon tile on that card is a SOLID blue square written inline, while the two cards beside it use the translucent tile from section 12. The selector names .card-icon, so the "Primary Service" badge -- which carries the same inline colour -- is untouched and stays solid blue. */ body.video-page .card-icon[style*="var(--blue-400)"] { background: rgba(59,130,246,.18) !important; color: #7dd3fc !important; } /* 14C. PALE PANELS DEFINED IN style.css These are classes rather than inline styles, so no !important is needed: two classes plus an element outweighs the single class in style.css. .legal-alert style.css 734 background var(--blue-50), text var(--blue-800). The callout at the head of every legal and terms page. Its own dark blue text, plus section 6 turning its white, left it unreadable on the pale box. Darkening fixes both at once. .badge-eiddi style.css 398 background var(--blue-50), text var(--blue-600). The small capability pills on the service cards. The 4px blue left border on .legal-alert is left alone -- it reads correctly against dark navy and is a useful marker. The two badges that carry an inline background -- "Primary Service" and "By Industry" -- are NOT affected. An inline style beats this rule and no !important is used, so they stay solid blue. That is intended. */ body.video-page .legal-alert { background: rgba(255,255,255,.06); color: rgba(232,238,247,.90); } body.video-page .badge-eiddi { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #7dd3fc; } /* 14D. THE PAYMENT PILLS .payment-pill is defined inside the page's OWN