/* * Hello DigiPlus — global stylesheet. * * Scope rule for this file: only things that must be true everywhere, and * things Elementor cannot express. Per-section and per-component styling * belongs in Elementor global classes (the dp- prefix), not here — those live * in the kit so they stay editable in the editor. * * Contents * 1. Design tokens * 2. Base document * 3. Accessibility * * Fonts are NOT declared here. General Sans is an Elementor Custom Font and * owners / owners-wide come from Elementor's Adobe Fonts project (jcl1caz). * Declaring them again in the theme loaded a second Typekit kit and a second * copy of General Sans. */ /* --------------------------------------------------------------- 2. Tokens */ /* * Mirrors the Figma variables in "DigiPlus 2026 — Approved Design". * Elementor global variables cover most of this; these exist so hand-written * CSS in this file and in templates can reference the same values. */ :root { /* Brand */ --dp-violet: #4600a8; /* * The white header's separation from a white page: a hairline to draw the * edge, plus a soft fall so it reads as a layer above the content rather * than a ruled line. Single-sourced because three rules need the same * value — at rest, scrolled, and the light+solid combination. */ --jsx-header-shadow: 0 1px 0 rgba( 11, 6, 24, 0.07 ), 0 4px 16px rgba( 11, 6, 24, 0.07 ); --dp-blue: #4600ff; --dp-light-blue: #46bcff; --dp-violet-deep: #18036a; --dp-marker-cyan: #00c8ff; /* Surfaces */ --dp-white: #ffffff; --dp-black: #000000; --dp-lavender: #e4e0f4; /* the quiet step used to alternate consecutive light bands */ --dp-lavender-soft: #f3f1fa; /* Text */ --dp-text-on-light: #15131f; --dp-text-on-light-muted: #575269; --dp-text-on-dark: #ffffff; --dp-text-on-dark-muted: #d5ccf2; /* Lines */ --dp-line-on-light: #d9d6e3; --dp-line-on-dark: #ffffff; /* Type */ --dp-font-display: "owners-wide", sans-serif; --dp-font-subhead: "owners", sans-serif; --dp-font-body: "General Sans", sans-serif; /* Layout — 1240 container inside 100px gutters at 1440 */ --dp-container: 1240px; --dp-gutter: 100px; --dp-gutter-mobile: 20px; } /* ----------------------------------------------------------------- 3. Base */ body { font-family: var(--dp-font-body); color: var(--dp-text-on-light); background-color: var(--dp-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Images in Elementor containers occasionally inherit an intrinsic width that * defeats the layout; this keeps them fluid without needing a utility class. */ img { max-width: 100%; height: auto; } /* -------------------------------------------------------- 4. Accessibility */ /* * WCAG 2.2 AA is the floor for this build. Hello Elementor does not ship a * visible focus style strong enough to pass on both light and dark sections, * so one is declared here for every focusable element. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--dp-light-blue); outline-offset: 2px; border-radius: 2px; } /* Respect a reduced-motion preference across everything, including Elementor's own animations. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Skip link — Hello renders one but leaves it visually unstyled when focused. */ .skip-link:focus { background: var(--dp-white); color: var(--dp-text-on-light); padding: 12px 20px; z-index: 100000; } /* --------------------------------------------------- 5. Two-tone headings */ /* * The approved design sets the final words of most display headings in a brand * colour ("Redefining Digital *Entertainment*", "Our *Values*", "We Are * *DigiPlus*"). Elementor sanitises `style` and `class` off inline markup inside * heading widgets, so a bare is all that survives — the colour is applied * here instead. Wrap the accented words in a in the heading text. */ .jsx-display-hero span, .jsx-display-section span, .jsx-display-sub span, .jsx-display-statement span { color: var(--brand-light-blue); } /* On light grounds the accent is the deeper brand blue; light blue fails contrast there. */ .jsx-on-light span { color: var(--brand-blue); } /* --------------------------------- 6. Shortcode-rendered data blocks */ /* * [dp_financials] and [dp_proof] are rendered through Elementor's shortcode * dynamic tag inside a paragraph widget. That widget's sanitiser keeps * but STRIPS every attribute, so the class names the shortcode emits never * reach the page. The host widget's own global class does survive, so these * blocks are styled structurally from it. Markup order is fixed by the * shortcode in inc/dynamic-data.php — keep the two in step. * * figures host > span = the row * > span > span = one figure * > span:nth-child(1) = value * > span:nth-child(2) = label * > span:nth-child(3) = delta */ .jsx-figures-host > span { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; } .jsx-figures-host > span > span { display: block; border-left: 1px solid var(--dp-line-on-light); padding-left: 30px; padding-right: 24px; } .jsx-figures-host > span > span:first-child { border-left: 0; padding-left: 0; } .jsx-figures-host > span > span > span { display: block; font-family: var(--dp-font-body); } .jsx-figures-host > span > span > span:nth-child(1) { font-family: var(--dp-font-display); font-size: 46px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--dp-text-on-light); } .jsx-figures-host > span > span > span:nth-child(2) { font-size: 16px; line-height: 1.5; color: var(--dp-text-on-light); } .jsx-figures-host > span > span > span:nth-child(3) { font-size: 13px; line-height: 1.4; margin-top: 4px; color: var(--dp-text-on-light-muted); } /* proof host > span:first-child = the row, > span:last-child = the note */ .jsx-proof-host > span:first-child { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.28); padding-top: 34px; } .jsx-proof-host > span:first-child > span { display: block; border-left: 1px solid rgba(255, 255, 255, 0.28); padding-left: 40px; padding-right: 40px; } .jsx-proof-host > span:first-child > span:first-child { border-left: 0; padding-left: 0; } .jsx-proof-host > span:first-child > span > span:nth-child(1) { display: block; font-family: var(--dp-font-display); font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--dp-text-on-dark); } /* the award column is set smaller in the design */ .jsx-proof-host > span:first-child > span:nth-child(3) > span:nth-child(1) { font-size: 24px; font-weight: 500; line-height: 1.25; } .jsx-proof-host > span:first-child > span > span:nth-child(2) { display: block; font-family: var(--dp-font-body); font-size: 13px; line-height: 1.4; color: var(--dp-text-on-dark-muted); } .jsx-proof-host > span:last-child { display: block; font-family: var(--dp-font-body); font-size: 11px; line-height: 1.4; margin-top: 22px; color: rgba(255, 255, 255, 0.55); } @media (max-width: 1024px) { .jsx-figures-host > span { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .jsx-figures-host > span > span:nth-child(odd) { border-left: 0; padding-left: 0; } .jsx-figures-host > span > span > span:nth-child(1) { font-size: 36px; } .jsx-proof-host > span:first-child { grid-template-columns: 1fr 1fr; row-gap: 26px; } .jsx-proof-host > span:first-child > span:nth-child(odd) { border-left: 0; padding-left: 0; } .jsx-proof-host > span:first-child > span > span:nth-child(1) { font-size: 30px; } } @media (max-width: 767px) { /* * Two up rather than stacked. The vertical rules come off entirely at this * width — a 1px divider plus its 30px inset costs more of a 375px screen * than it earns — so the column gap is what separates the pairs instead. */ .jsx-figures-host > span { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 28px; } .jsx-figures-host > span > span { border-left: 0; padding-left: 0; padding-right: 0; } /* * Two up, same as the figures. The award sits on its own full-width row * below: "Digital Operator of the Year" is far longer than the two figures * beside it and in a half column it wraps to three lines and unbalances the * pair above it. */ .jsx-proof-host > span:first-child { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 24px; } .jsx-proof-host > span:first-child > span { border-left: 0; padding-left: 0; padding-right: 0; } .jsx-proof-host > span:first-child > span:nth-child(3) { grid-column: 1 / -1; } } /* ------------------------------------------- 8. Routing rows + hover preview */ /* * The four routing rows are children 1-4 of .jsx-routing-rows; the four preview * panels are children 5-8, in the same order. Because the panels follow the * rows in the DOM, the general sibling combinator drives the whole interaction * with no JavaScript — hovering row N reveals panel N. Keeping them as siblings * is load-bearing: reorder the children and the pairing breaks. * * Every position is counted `of .e-con`, i.e. among the real elements only. In the Elementor * editor the container's first child is an injected `.elementor-element-overlay`, which pushed * Responsible Gaming (row 4) to child 5 — a preview-panel slot — so the editor hid it (2026-10-04). */ .jsx-routing-rows { position: relative; } .jsx-routing-rows > :nth-child(n + 5 of .e-con) { position: absolute; top: -40px; right: 0; width: 460px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms; box-shadow: 0 24px 60px rgba(8, 4, 40, 0.38); } /* * Keep the panel open while the pointer is on it, otherwise moving across to * click the link cancels the row's :hover and the panel vanishes underneath the * cursor. The panel sits ON TOP of the rows, so entering it always ends the * row's hover — the panel's own :hover has to take over in the same frame. * It is only interactive while shown; hidden it stays pointer-events: none so * it never blocks the rows beneath it. */ .jsx-routing-rows > :nth-child(n + 5 of .e-con):hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .jsx-routing-rows > :nth-child(1 of .e-con):hover ~ :nth-child(5 of .e-con), .jsx-routing-rows > :nth-child(1 of .e-con):focus-within ~ :nth-child(5 of .e-con), .jsx-routing-rows > :nth-child(2 of .e-con):hover ~ :nth-child(6 of .e-con), .jsx-routing-rows > :nth-child(2 of .e-con):focus-within ~ :nth-child(6 of .e-con), .jsx-routing-rows > :nth-child(3 of .e-con):hover ~ :nth-child(7 of .e-con), .jsx-routing-rows > :nth-child(3 of .e-con):focus-within ~ :nth-child(7 of .e-con), .jsx-routing-rows > :nth-child(4 of .e-con):hover ~ :nth-child(8 of .e-con), .jsx-routing-rows > :nth-child(4 of .e-con):focus-within ~ :nth-child(8 of .e-con) { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } /* The panel overlays the right of the rows, so pull the row text clear of it. */ .jsx-routing-rows > :nth-child(-n + 4 of .e-con) > :first-child { max-width: 700px; } /* No hover on touch, and no room for a 460px overlay — show nothing. */ @media (hover: none), (max-width: 1024px) { .jsx-routing-rows > :nth-child(n + 5 of .e-con) { display: none; } .jsx-routing-rows > :nth-child(-n + 4 of .e-con) > :first-child { max-width: none; } } /* ------------------------------------------------ 9. Mid-width corrections */ /* * Elementor's breakpoints jump 1024 -> desktop, so between 1025px and the * 1240px container width there was no side gutter at all and content ran to * the viewport edge. Everything below 1340 gets a real gutter. */ /* Elementor writes `.elementor.elementor .jsx-container { padding-inline: 0 }` for the desktop variant, so these need matching specificity AND the logical properties it actually sets, or they are simply outranked. */ @media (max-width: 1339px) { .elementor.elementor .jsx-container { padding-inline-start: 40px; padding-inline-end: 40px; } } @media (max-width: 767px) { .elementor.elementor .jsx-container { padding-inline-start: 20px; padding-inline-end: 20px; } } /* ----------------------------------------------------- 10. Header collapse */ /* * The header collapses when it MEASURES that it no longer fits, not at a * hard-coded width. inc/../custom.js compares the logo + nav + icons against * the available container width and toggles .is-compact. That keeps it correct * at any viewport, any font size, and survives adding or renaming a nav item — * a fixed breakpoint would silently start overlapping again the moment the nav * got one link longer. */ .jsx-header-toggle { display: none; appearance: none; border: 0; padding: 10px; cursor: pointer; color: #fff; line-height: 0; flex: 0 0 auto; } /* paint only — the compact/open/light-header rules still own its colour */ .jsx-header-toggle, .jsx-header-toggle:hover, .jsx-header-toggle:focus { background: none; } .jsx-header-toggle svg { display: block; } .jsx-header-inner > :nth-child(2), .jsx-header-inner > :nth-child(3) { flex: 0 0 auto; min-width: 0; } /* --- compact state --------------------------------------------------- */ .jsx-header-inner.is-compact .jsx-header-toggle { display: block; } /* * Compact, custom.js lifts the search icon out of the social group and drops * it in just before the hamburger, so it becomes the 4th child of the bar. The * two rules below hide children 2 and 3 (the nav and that social group); the * search sits outside both and stays in the bar, which is the point. */ .jsx-header-inner.is-compact > .jsx-search-toggle { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; /* * Sit next to the hamburger, not adrift in the middle. * * The bar is `justify-content: space-between`, and compact it has only * three visible items — logo, search, toggle — so the free space was split * either side of the search and left it stranded mid-header. The auto * margin swallows all of that space ahead of the icon instead, which parks * search and the toggle together at the right end, the bar's own 24px gap * between them. */ margin-inline-start: auto; } .jsx-header-inner.is-compact > :nth-child(2) { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 40px 8px; background: #0b0526; } .jsx-header-inner.is-compact > :nth-child(2) > * { width: 100%; } .jsx-header-inner.is-compact > :nth-child(3) { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 0 34px 20px; background: #0b0526; transform: translateY(var(--jsx-menu-h, 0px)); } .jsx-header-inner.is-compact.is-open > :nth-child(2) { display: flex; } .jsx-header-inner.is-compact.is-open > :nth-child(3) { display: flex; } @media (max-width: 767px) { .jsx-header-inner.is-compact > :nth-child(2) { padding-left: 20px; padding-right: 20px; } .jsx-header-inner.is-compact > :nth-child(3) { padding-left: 14px; padding-right: 14px; } } /* ------------------------------------------- 11. Two-column sections, mid width */ /* * The 1440 design uses fixed pixel columns (720/1fr, 526/1fr, 552/1fr, 470/1fr). * Elementor's next breakpoint down is 1024, so between 1025 and 1240 those * columns get crushed rather than collapsing. Anything carrying .jsx-split * stacks below 1200 instead. */ @media (max-width: 1199px) { .elementor.elementor .jsx-split { grid-template-columns: 1fr !important; gap: 44px !important; } } /* The hero headline sits above the proof row; spacing comes from the column's own gap, so the proof must not also push itself down with an auto margin. */ .jsx-proof-host { margin-top: 0 !important; } /* ------------------------------------------------------- 12. Careers panel */ /* * The 1440 design floats a 552x620 photo across a violet panel that bleeds off * the right edge. Below 1200 the grid stacks (see .jsx-split), which would drop * the white copy outside the panel onto white — so the whole section becomes * the violet surface instead and the floating panel is removed. */ @media (max-width: 1199px) { .elementor.elementor .jsx-careers { background-color: var(--dp-blue); padding-top: 0; padding-bottom: 72px; } /* the absolutely-positioned panel is the section's first child */ .elementor.elementor .jsx-careers > :first-child { display: none; } .elementor.elementor .jsx-careers img { margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; height: 420px !important; border-radius: 0 !important; } .elementor.elementor .jsx-careers .jsx-container { padding-left: 0; padding-right: 0; } .elementor.elementor .jsx-careers .jsx-container > * { gap: 0 !important; } /* re-inset the copy once the container padding is removed */ .elementor.elementor .jsx-careers .jsx-container > * > :last-child { padding: 44px 40px 8px; } } @media (max-width: 767px) { .elementor.elementor .jsx-careers .jsx-container > * > :last-child { padding: 36px 20px 8px; } .elementor.elementor .jsx-careers img { height: 300px !important; } } /* --------------------- 13. Container inside header/footer templates (note) */ /* * NOTE: Elementor does NOT emit a global-.css for theme templates. It * aggregates their classes into the PAGE's global-.css via the * `elementor/document/related_posts` filter, and deliberately skips embedded * documents so they do not produce their own file. So the absence of * global-14403-*.css is correct behaviour, not a bug — the header's classes are * inside global-14405-*.css. Do not mirror the type classes here; that only * creates two sources of truth. */ /* --------------------- 13. Header/footer container, stated explicitly */ /* * The header and footer must sit on exactly the same 1240 band as the page. * Stated here rather than relying on the class alone, because these templates * are separate documents and a single missed rule puts the social icons * outside the grid while the logo still looks correct. */ .elementor-location-header .jsx-header-inner, .elementor-location-footer .jsx-container { width: 100%; max-width: 1240px; margin-inline: auto; box-sizing: border-box; } .elementor-location-header .jsx-header-inner { position: relative; } @media (max-width: 1339px) { .elementor-location-header .jsx-header-inner, .elementor-location-footer .jsx-container { padding-inline: 40px; } } @media (max-width: 767px) { .elementor-location-header .jsx-header-inner, .elementor-location-footer .jsx-container { padding-inline: 20px; } } /* ------------------------------------- 14. Atomic containers as flex children */ /* * MEASURED CAUSE of the header's escaping social icons. * * Every atomic container carries Elementor's `.e-con`, which applies the kit's * content width (1240px) as an explicit `width`. Inside a flex row that makes * each child 1240px wide, so `justify-content: space-between` pushed the icon * group to x=2761 on a 1440 viewport. `flex: 0 0 auto` does not help: a * flex-basis of `auto` resolves to `width`, which was still 1240px. * * Containers that are laid out as flex children must size to their content. */ .elementor-location-header .jsx-header-inner > .e-con { --width: auto; width: auto; max-width: none; } /* * Same rule bites absolutely-positioned containers: the Careers panel is * anchored with left AND right, so it must size from those, not from * --width: 100% (which made it 124px wider than the viewport and put a * horizontal scrollbar on the whole page). */ .elementor.elementor .jsx-careers > .e-con:first-child { --width: auto; width: auto; } /* ------------------------------------------------------------ 15. Hero */ /* * Readability in the hero is not a single scrim — the approved design uses * three layers, and all three values are taken from Figma, not invented: * * 1. the video itself over black: 32% in the design, 48% on 2026-10-09 (Jun: "make the hero * section video overlay lighter"), then 100% the same day (Jun: "make the homepage video * opacity 1"). 48% was the most the scrims below allow for AA: on a fully white frame the * headline zone kept ~5.3:1 and the figures row ~4.6:1. At 100% only the two scrims darken the * video, so the brightest frames drop the white text below 4.5:1. Accepted at Jun's request; * strengthen the scrims, not the opacity, if contrast has to be restored. * 2. a vertical scrim black .88 -> .34 -> .32 -> .58 in the design. It never rendered (under * the video, see ::before below), so the contrast figures in 1. overstated the margin; since * 2026-10-09 ::before is a header-only top shade instead. * 3. a horizontal scrim black .50 -> .38 -> 0 -> 0 * * The hero loop is a bright, fast-cut gaming montage, so the video opacity is * doing most of the work; without it no scrim alone makes the headline legible * on the brightest frames. */ .jsx-hero { background-color: #000; } .jsx-hero video, .jsx-hero .e-background-video__video { opacity: 1; } /* * ▼▼▼ EXPERIMENTAL (Jun, 2026-10-11: "this is experemental options") — not approved for the client yet. * To remove: delete everything from this line down to the "▲▲▲ END EXPERIMENTAL" marker. Nothing else * depends on it; the hero then renders exactly as before. * * Darker by default, full brightness on hover (Jun, 2026-10-11: "darken a bit the gradient by default to * make header and hero text more visible but when mouse hover the video hero section bring back the current * gradient"). Done as a brightness filter on the video rather than by editing the scrims, so the gradients * stay exactly as they are and the hover state is precisely the previous look. 0.75 = a 25% black wash. * * Hover only where a real pointer can hover: phones and tablets keep the darker, more legible version. * The header is outside .jsx-hero, so moving up to the menu dims the video again while it is being read. */ .jsx-hero video { filter: brightness( 0.75 ); transition: filter 600ms ease; } @media ( hover: hover ) and ( pointer: fine ) { .jsx-hero:hover video { filter: none; } } @media ( prefers-reduced-motion: reduce ) { .jsx-hero video { transition: none; } } /* ▲▲▲ END EXPERIMENTAL — hero hover brightness */ /* * Shadow behind the hero headline (Jun, 2026-10-11: "add shadow to this text to make it more visible * without change the whole section gradient overlay opacity"). The video runs at full opacity, so on * light frames (the white "digiplus" wall sign) the white title had nothing behind it. * * filter: drop-shadow on the h1, NOT text-shadow: the line-reveal wraps each line in an * overflow:hidden .jsx-line box (6.4px bottom padding), which would clip a soft text-shadow into * hard horizontal bands. The h1 itself is overflow:visible, and drop-shadow shades its finished, * composited output, so the shadow spills past the line boxes and follows the reveal as it plays. * Two layers: a tight one that defines the letter edges, a wide one that lifts the block. */ .jsx-hero .jsx-display-hero { filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.5 ) ) drop-shadow( 0 4px 24px rgba( 0, 0, 0, 0.55 ) ); } /* * iOS draws its own round play button over a video whose autoplay it refused (Low Power Mode, seen on * Jun's iPhone 2026-10-11). On the hero it sat on the headline and read as a broken player. Hidden: the * first frame still shows, and the first tap anywhere starts the loop (inc/enqueue.php fallback). * * One rule per pseudo-element on purpose: a browser that does not know one of them drops the whole * selector list, and the overlay button is Chrome-on-Android only, so a combined rule would be * discarded by Safari — the one browser this is for. */ .jsx-hero video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } .jsx-hero video::-webkit-media-controls { display: none !important; } .jsx-hero video::-webkit-media-controls-overlay-play-button { display: none !important; } .jsx-hero::before, .jsx-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* * Top shade behind the header menu (Jun, 2026-10-09: "add subtle gradient shadows from the top to * the header menu text will more visible"; the client wants the video itself fully visible). * * This pseudo used to hold the design's full-height vertical scrim (.88 -> .34 -> .32 -> .58), but * it never rendered: it sat at z-index 0 like the video's media layer and comes first in the DOM, so * the video painted over it. Turning that scrim on now would darken the whole video, which is the * opposite of the brief, so it is replaced by a shade over the header band only. z-index 1 lifts it * over the video; the content wrapper (also z-index 1, later in the DOM) still paints above it. * Sized in px, not %, so it tracks the header rather than the hero's height. */ .jsx-hero::before { z-index: 1; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.18) 100px, rgba(0, 0, 0, 0) 220px ); } /* horizontal — keeps the left-hand headline and figures clear of the imagery */ .jsx-hero::after { background: linear-gradient( to right, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100% ); } /* content sits above both scrims */ .jsx-hero > .e-background-video-content { position: relative; z-index: 1; } .jsx-hero > .e-background-video-controls { z-index: 2; } /* Proof row rules, per the design: 1px #FFF at 28%, dividers at 20%. */ .jsx-proof-host > span:first-child { border-top-color: rgba(255, 255, 255, 0.28); } .jsx-proof-host > span:first-child > span { border-left-color: rgba(255, 255, 255, 0.20); } .jsx-proof-host > span:first-child > span > span:nth-child(2) { color: #D5CCF2; } .jsx-proof-host > span:last-child { color: #D5CCF2; opacity: 0.55; } /* ------------------------------------------------ 16. Button + link arrows */ /* * The Figma Button/Primary carries an arrow-right vector, as does the preview * card's text link. Drawn with CSS rather than an extra element so the arrow * inherits the label colour and cannot fall out of sync with it. */ .jsx-btn-primary::after, .jsx-link-arrow::after { content: ""; width: 15px; height: 12px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--jsx-arrow) no-repeat center / contain; mask: var(--jsx-arrow) no-repeat center / contain; transition: transform 160ms ease-out; } :root { /* * The kit's own button radius: `.elementor-kit-1247 button { 80px }`. Every * button on the site is a pill because of it, which is why the category * control reads as one and an 8px search field beside it did not. Declared * here so the two controls cannot drift apart; if the kit's value changes, * this is the one line to follow it. */ --jsx-control-radius: 80px; /* the search glyph, inlined for the same reason as the arrow: no request */ --jsx-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%23575269' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23575269' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); --jsx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12' fill='none'%3E%3Cpath d='M1 6h12M8.5 1.5 13 6l-4.5 4.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --jsx-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.5v8.5M8 10 4.6 6.6M8 10l3.4-3.4M2.2 13.8h11.6' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --jsx-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a4.5 4.5 0 0 0-4.5 4.5c0 3.2 4.5 8.5 4.5 8.5s4.5-5.3 4.5-8.5A4.5 4.5 0 0 0 8 1.5Zm0 6.2A1.7 1.7 0 1 1 8 4.3a1.7 1.7 0 0 1 0 3.4Z'/%3E%3C/svg%3E"); --jsx-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5h12a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5Zm.9 1.3L8 8.6l5.1-3.8H2.9Z'/%3E%3C/svg%3E"); --jsx-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.3 1.8c.4 0 .8.3 1 .7l.9 2.1c.2.4.1.9-.2 1.2l-.9.8a8.3 8.3 0 0 0 3.3 3.3l.8-.9c.3-.3.8-.4 1.2-.2l2.1.9c.4.2.7.6.7 1v2.1c0 .7-.6 1.3-1.3 1.2A12.3 12.3 0 0 1 1.8 3.1c-.1-.7.5-1.3 1.2-1.3h2.3Z'/%3E%3C/svg%3E"); } .jsx-btn-primary:hover::after, .jsx-link-arrow:hover::after { transform: translateX(3px); } /* The secondary button has no arrow in the design. */ .jsx-btn-secondary::after { content: none; } /* ------------------------------------------- 17. Routing rows, hover colour */ /* * The design turns the hovered row light blue and shows a light-blue bar on the * left, not just the bar. :focus-within keeps it reachable by keyboard. */ .jsx-routing-rows > :nth-child(-n + 4 of .e-con):hover :is(h1,h2,h3,h4,p,span,a), .jsx-routing-rows > :nth-child(-n + 4 of .e-con):focus-within :is(h1,h2,h3,h4,p,span,a) { color: var(--dp-light-blue); } .jsx-routing-rows > :nth-child(-n + 4 of .e-con):hover svg, .jsx-routing-rows > :nth-child(-n + 4 of .e-con):focus-within svg { color: var(--dp-light-blue); } /* ------------------------------------------------------ 18. News meta row */ /* * Rendered by [dp_post_meta]. Attributes are stripped from shortcode output by * the paragraph widget, so this is styled structurally from .jsx-meta-host: * host > span = the row * > span:nth-child(1) = quarter-circle marker * > span:nth-child(2) = date * > span:nth-child(n+3) = category chips */ .jsx-meta-host > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .jsx-meta-host > span > span:nth-child(1) { width: 13px; height: 13px; flex: 0 0 auto; background-color: var(--dp-marker-cyan); /* quarter disc, flat edges top and left — the brand's holding shape */ border-bottom-right-radius: 13px; } .jsx-meta-host > span > span:nth-child(2) { font-family: var(--dp-font-body); font-size: 13px; line-height: 1.4; color: var(--dp-text-on-light-muted); margin-right: 6px; } /* * `:is(span, a)` because the chips are LINKS now. They are matched by position * rather than class (attributes are stripped from shortcode output by the * paragraph widget), so widening the element list is the only way to keep the * pill once the tag changed — a bare `span:nth-child(n+3)` silently stopped * matching and the chips fell back to plain text in the default link red. */ .jsx-meta-host > span > :is( span, a ):nth-child(n + 3) { font-family: var(--dp-font-body); font-size: 12px; line-height: 1.4; padding: 5px 10px; border-radius: 4px; background-color: var(--dp-blue); color: #fff; white-space: nowrap; text-decoration: none; transition: background-color 120ms ease; } .jsx-meta-host > span > a:nth-child(n + 3):hover, .jsx-meta-host > span > a:nth-child(n + 3):focus-visible { background-color: var(--dp-violet); color: #fff; } /* On the image card the meta sits on photography. */ .jsx-news-side > *:nth-child(3) .jsx-meta-host > span > span:nth-child(2) { color: #fff; } /* ------------------------------------------- 19. News side column layout */ /* * Figma 38:147-38:153: the right-hand column reads compact / image card / * compact, and the image card is the MIDDLE one. The loop has no offset, so it * fetches four and the first (a duplicate of the featured article) is hidden — * which makes the image card :nth-child(3), not (2). The other two hide their * thumbnail and read as text rows. * * Spacing is not set here: the loop layout is a flex column with * justify-content: space-between, so the three cards distribute themselves over * whatever height the featured card sets. That lands within ~10px of the * design's 51/40 gaps and survives a headline wrapping to an extra line. */ /* :not(:last-child): the Elementor editor renders a loop as its one template card, and hiding that left nothing on the homepage to select or edit (2026-10-04). Live there are always three. */ .jsx-news-side > *:nth-child(1):not(:last-child) { display: none; } .jsx-news-side > *:not(:nth-child(3)) img { display: none; } /* design draws the two text rows 20px narrower than the image card */ .jsx-news-side > *:not(:nth-child(3)) { max-width: 440px; } /* * Every card in this column is 18/1.35 regular (38:148, 38:152) — lighter than * the featured card's 20/600. Headlines clamp to two lines, as the design draws * them: it truncates both the image card and the second compact card. */ .elementor.elementor .jsx-news-side :is(h3, h3 a) { font-size: 18px; line-height: 1.35; font-weight: 400; letter-spacing: -0.09px; } .elementor.elementor .jsx-news-side h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jsx-news-side > *:nth-child(3) { position: relative; border-radius: 12px; overflow: hidden; padding: 0; min-height: 220px; justify-content: flex-end; } .jsx-news-side > *:nth-child(3) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .jsx-news-side > *:nth-child(3) > :not(img) { position: relative; z-index: 1; padding-inline: 24px; } .jsx-news-side > *:nth-child(3) > :nth-child(2) { padding-top: 90px; } .jsx-news-side > *:nth-child(3) > :last-child { padding-bottom: 20px; } /* * Figma 38:151 washes the WHOLE card from 25% to 85% — it does not start * transparent. The headline sits mid-card, not at the foot, so a scrim that * only darkens the bottom third leaves it on bare photography. */ .jsx-news-side > *:nth-child(3)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 0, 71, 0.25) 0%, rgba(13, 0, 71, 0.85) 100%); z-index: 0; } .jsx-news-side > *:nth-child(3) :is(h3, a) { color: #fff !important; } /* the design draws no rules between the text rows */ /* the active filter carries the marker */ .jsx-tab-active { display: inline-flex; align-items: center; gap: 9px; } .jsx-tab-active::before { content: ""; width: 13px; height: 13px; background-color: var(--dp-marker-cyan); border-bottom-right-radius: 13px; flex: 0 0 auto; } /* --------------------------------------------- 20. Routing row hover bar */ /* * Figma: the hover indicator is a 3x60 bar, vertically CENTRED in the row — * not a full-height left border — and the label shifts 32px to clear it. * Drawn as a pseudo-element so it can be shorter than the row. */ .jsx-routing-rows > :nth-child(-n + 4 of .e-con)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60px; background-color: var(--dp-light-blue); opacity: 0; transition: opacity 160ms ease-out; } .jsx-routing-rows > :nth-child(-n + 4 of .e-con):hover::before, .jsx-routing-rows > :nth-child(-n + 4 of .e-con):focus-within::before { opacity: 1; } /* the label shifts clear of the bar; the arrow stays put */ .jsx-routing-rows > :nth-child(-n + 4 of .e-con) > :first-child { transition: padding-left 160ms ease-out; padding-left: 0; } .jsx-routing-rows > :nth-child(-n + 4 of .e-con):hover > :first-child, .jsx-routing-rows > :nth-child(-n + 4 of .e-con):focus-within > :first-child { padding-left: 32px; } /* --------------------------------- 21. Financial figures, positive deltas */ /* * Figma colours a rise in brand blue and leaves a fall (and plain period * labels like "FY2025") in muted text. The delta is the third span in each * figure; :has() keys off the leading "+" the parser writes. */ .jsx-figures-host > span > span > span:nth-child(3) { color: var(--dp-text-on-light-muted); } /* a rise emits an empty marker span first: hide it, colour the delta after it */ .jsx-figures-host > span > span > span:nth-child(3):empty { display: none; } .jsx-figures-host > span > span > span:nth-child(4) { display: block; font-family: var(--dp-font-body); font-size: 13px; line-height: 1.4; margin-top: 4px; color: var(--dp-blue); } /* --------------------------------- 22. Product card scrim */ /* * Figma gives every product card a bottom scrim (I38:129;8:3) so the white * description reads over the artwork — 320px tall, transparent to 66% black. * Without it the copy sits on raw photography and the contrast is unpredictable * per card. The card body is position:relative, so the pseudo-element lands * above the card's absolutely-positioned background image but below the body's * own children, which is exactly the design's stacking order. */ .jsx-product-cards > .e-con > .e-con::before { content: ""; position: absolute; top: auto; /* Elementor's own .e-con::before sets top: 0 — reset it, or */ left: 0; /* the 320px block anchors to the TOP of the card instead */ right: 0; bottom: 0; height: 320px; z-index: -1; /* an absolutely-positioned ::before otherwise paints ABOVE the lockup and the copy; -1 keeps it inside the body's stacking context (so still over the card artwork) but behind the text */ background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0.66) 100% ); pointer-events: none; } /* ------------------------------------------ 23. Latest News filter tabs */ /* * The active pill's colour is set per-element in Elementor, so it cannot follow * a class the script moves at runtime. These rules take it over for all six. * Elementor emits global classes at .elementor .g-xxx (0,2,0), so the prefix is * needed to out-weigh them. */ /* * The pills are rendered by assets/js/news-filter.js from the saved tab config, * so the label, count and order all come from Settings -> Latest News Tabs. * That means their sizing can no longer come from Elementor's per-element * classes — it lives here, matching what the builder produced: 44px tall, * 14px sides, 16/1.7 General Sans. */ .elementor.elementor .jsx-news-tabs > span { display: flex; align-items: center; height: 44px; padding: 0 14px; font-family: var(--dp-font-body); font-size: 16px; line-height: 1.7; color: var(--dp-text-on-light-muted); cursor: pointer; user-select: none; white-space: nowrap; transition: color 120ms ease; } .elementor.elementor .jsx-news-tabs > span.jsx-tab-active { color: var(--dp-text-on-light); } .elementor.elementor .jsx-news-tabs > span:hover { color: var(--dp-text-on-light); } /* the pills are spans, so they need a visible focus ring of their own */ .elementor.elementor .jsx-news-tabs > span:focus-visible { outline: 2px solid var(--dp-blue); outline-offset: 2px; border-radius: 4px; } /* * Cards with no featured image are served the brand placeholder (media 14488) * by hello_digiplus_fallback_thumbnail(), so there is no empty state to style * here any more. The old violet-gradient fallback has been removed. */ /* * Hold the featured headline at two lines. Without this a filter whose top * story has a short headline collapses it to one line, shrinking the card by * 26px and shifting the whole page below the section every time a tab is * clicked. Two lines is what the design draws, and it truncates beyond that. */ .elementor.elementor .jsx-news-featured h3 { min-height: 2.6em; } .elementor.elementor .jsx-news-featured h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* announcement target for the filter; visible to screen readers only */ .jsx-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------- 24. Search overlay (69:3) */ /* * Figma 69:3. A white panel drops from the top of the viewport over a dimmed * page; the site header stays put and turns white on top of it. * * The panel's height is NOT the design's fixed 486px. The design draws five * suggested terms on one row; the client's ACF list holds seven, which wraps to * two. min-height keeps the drawn proportion when the list is short and lets it * grow when it is not. */ .jsx-search[hidden] { display: none; } .jsx-search { position: fixed; inset: 0; z-index: 9000; } .jsx-search__dim { position: absolute; inset: 0; background-color: rgba(11, 6, 24, 0.72); animation: jsx-search-fade 180ms ease both; } .jsx-search__panel { position: absolute; top: 0; left: 0; right: 0; min-height: 486px; padding: 172px 0 60px; background-color: #fff; box-shadow: 0 18px 48px rgba(8, 0, 31, 0.3); animation: jsx-search-drop 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes jsx-search-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes jsx-search-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .jsx-search__dim, .jsx-search__panel { animation: none; } } /* * Figma stacks a Close icon underneath the Contact button at identical * coordinates, so as drawn the overlay has NO visible way out. It also sits in * the top 80px, which the live header now occupies and paints over. * * So the close moves into the panel's own content area, on the same 100px * grid as everything else and clear of the header band. Escape, the dim and * the header's search icon (which toggles) all close it as well. */ .jsx-search__close { position: absolute; top: 100px; right: 100px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dp-text-on-light-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .jsx-search__close:hover, .jsx-search__close:focus { background-color: #f3f2f7; color: var(--dp-text-on-light); } .jsx-search__form { display: flex; align-items: center; gap: 24px; padding-bottom: 38px; border-bottom: 1px solid var(--dp-line-on-light); } /* * The placeholder is -30% from the Figma 44px at EVERY width above iPad * portrait (Jun, desktop + iPad landscape): 44 -> 31, tracking -0.66 -> -0.46, * because the original value was drawn for 44px display type and pinches at 31. */ .jsx-search .jsx-search__input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; font-family: var(--dp-font-display); font-size: 31px; line-height: 1.15; letter-spacing: -0.46px; color: var(--dp-text-on-light); } .jsx-search .jsx-search__input::placeholder { color: var(--dp-text-on-light-muted); opacity: 1; } .jsx-search .jsx-search__input:focus { outline: none; } .jsx-search__form:focus-within { border-bottom-color: var(--dp-blue); } /* * hello-elementor's reset paints EVERY button crimson on hover AND focus: * assets/css/reset.css * button:hover, button:focus, [type=submit]:hover, [type=submit]:focus * { background-color: #c36; color: #fff } * * Ours are icon buttons on white, so that is a red disc with a white glyph — * and on :focus a keyboard user gets it too. Naming the states on our own base * rules is what beats it: identical specificity (0,1,1), and this file loads * after the parent theme, so the tie goes our way. Any new