/* * ProductionVibes — brand layer * * Phase 1 of the structural redesign. CSS only: no `_elementor_data` is * touched by this file, so deactivating the plugin restores the previous * appearance exactly. * * WHY THIS FILE EXISTS, AND WHY IT LOOKS LIKE THIS * * The client's brief was "missing the gist of an event company". Measuring the * seven reference sites they supplied gave three findings: * * 1. Ground ALTERNATION is the single property all seven share. Production * Crew — the closest analogue, and a light-ground site like this one — * rotates eight grounds including a full near-black band. This site was * #EEDFD4 for all 7,873px of the page. * 2. The references let photography bleed. Every image here is boxed inside * a column; the best asset on the site (an Adani stage shot with moving * heads through haze) rendered ~500px wide. * 3. Display type runs 120–164px there against 90px here. * * On (3): the hero could not simply be scaled. Measured with canvas * measureText against the real 810px text box at a 1280px viewport, the * longest word ("Transforming") in Syne Bold 700 overflows above **110px**. * A 150px target was arithmetically impossible in the incumbent face. Bebas * Neue — already loaded by the theme, so free — clears **173px**. That is what * makes the reference scale reachable, and it is why the display face changes. * * NAMESPACE * `pv-*` and the six `--pv-*` custom properties on :root belong to the motion * layer (pv-motion.css). Everything here is `pvx-*`. Do not redefine any * `--pv-*` variable: pv-motion.css loads first and a later :root block would * silently retime every animation on the site. * * SPECIFICITY * Elementor prints per-widget CSS at 0,5,0, e.g. * .elementor-16922 .elementor-element.elementor-element-6368a76 * .pxl-heading .pxl-item--title * Selectors below deliberately key to those generated element classes to reach * the same weight. `!important` appears only where noted, and never on * font-size — sizes stay in `_elementor_data` so they remain adjustable in * Elementor's Style tab, which is the client's stated constraint. * * NO SCOPING CLASS * Unlike pv-motion.css / pv-fixes.css this file is not gated behind a runtime * class. Those layers add `.pv-motion` / `.pv-fixes` from JS, which is correct * for progressive enhancement but would flash Syne before swapping to Bebas. * The plugin's conditional enqueue is this file's on/off switch instead. */ :root { --pvx-ground: #EEDFD4; /* unchanged — the approved primary ground */ --pvx-ink: #0A0E1A; /* 14.80:1 on ground; was #0072B9 at 3.93:1 */ --pvx-ink-soft: #F5EFE9; --pvx-accent: #0072B9; /* was lime #E8FF47; the client removed yellow from the palette entirely. Now identical to --pvx-blue: this site has two colours, ground and blue, plus Ink. */ --pvx-blue: #0072B9; --pvx-display: "Bebas Neue", "Oswald", "Syne", sans-serif; } /* ───────────────────────────────────────────────────────────── 1. DISPLAY TYPE Systemic brand decision, so it is enforced. Sizes are NOT set here — those live in the widget data and stay client-editable. Bebas Neue has no lowercase glyphs, so the uppercase is stated explicitly rather than left to the font to impose silently. ───────────────────────────────────────────────────────────── */ .pxl-heading .pxl-item--title, .elementor-widget-pxl_heading .pxl-item--title { font-family: var(--pvx-display) !important; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.92; } /* Festiva paints headings carrying `.pxl-color-style-1` with a gradient clipped to the glyphs: -webkit-text-fill-color: transparent; background-image: linear-gradient(180deg, var(--primary-color), var(--secondary-color)); background-clip: text; `-webkit-text-fill-color` overrides `color` for the glyph fill, so a heading with that class ignores its Elementor colour entirely — including a global binding. On this site the gradient resolves to beige→lavender, i.e. 1.3:1 on the beige ground. The seven original headings do not carry the class; a heading created from scratch does, which is how the new "Selected Work" heading came out almost invisible. Rather than reverse-engineer the theme's condition for adding it, neutralise the effect so `color` governs, as it does everywhere else. */ .pxl-heading .pxl-item--title.pxl-color-style-1, .pxl-heading .pxl-heading--inner .pxl-item--title.pxl-color-style-1 { -webkit-text-fill-color: currentColor; background-image: none; background-clip: border-box; -webkit-background-clip: border-box; } /* Bebas is a caps face with a tall x-height; at display sizes the default tracking opens up too far. Tighten only where the type is genuinely large. */ .elementor-element-6368a76 .pxl-item--title, .elementor-element-afd863d .pxl-item--title { letter-spacing: -0.005em; } /* The eyebrow is not display type — it stays in the UI face, small and tracked out, the way every reference pairs it with large display. */ .elementor-element-8796285 .pxl-item--title { font-family: "Plus Jakarta Sans", sans-serif !important; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.4; } /* ───────────────────────────────────────────────────────────── 2. GROUND ALTERNATION — the Services band goes near-black `dd8eb09` is already `section-stretched`, so a background-color here spans the full viewport with no layout change at all. This is the dark band the page was missing. ───────────────────────────────────────────────────────────── */ /* `!important` here is load-bearing and must stay paired with the text colours below. Elementor prints .elementor-16922 .elementor-element.elementor-element-dd8eb09:not(…) at 0,4,0, which beats any selector this file can reasonably carry. The first deployment omitted it: the background stayed beige while the copy below went light, leaving that paragraph at roughly 1.2:1 on the live site. Background and foreground in this band flip together or not at all. */ .elementor-16922 .elementor-element.elementor-element-dd8eb09:not(.elementor-motion-effects-element-type-background), .elementor-element-dd8eb09:not(.elementor-motion-effects-element-type-background), .elementor-element-dd8eb09 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: var(--pvx-ink) !important; } /* The heading carries a per-widget colour rule at the same 0,4,0, so it needs the same treatment or it stays blue on near-black at 2.1:1. */ .elementor-16922 .elementor-element.elementor-element-dd8eb09 .pxl-item--title, .elementor-element-dd8eb09 .pxl-item--title, .elementor-element-dd8eb09 .pxl-heading .pxl-item--title { color: var(--pvx-ink-soft) !important; } /* Body copy on the dark band. #F5EFE9 on #0A0E1A is ~16:1. The theme sets the colour at 0,5,0 per widget, hence the override. */ .elementor-element-1477e78 .pxl-text-editor, .elementor-element-1477e78 .pxl-text-editor p, .elementor-element-dd8eb09 .pxl-text-editor, .elementor-element-dd8eb09 .pxl-text-editor p { color: var(--pvx-ink-soft) !important; } /* Bold spans inside that copy carry the blue by default, which drops to 2.1:1 on near-black. With lime gone, the accent IS blue, so it cannot be used here either — these take the soft ink instead (~13:1 on the dark band) and earn emphasis from weight rather than hue. */ .elementor-element-1477e78 .pxl-text-editor strong, .elementor-element-1477e78 .pxl-text-editor b { color: var(--pvx-ink-soft) !important; } /* ───────────────────────────────────────────────────────────── 3. FULL-BLEED PHOTOGRAPHY The Adani stage shot is the most convincing asset on the site and it was rendering ~500px wide inside a 43.61% column. Let it fill the column's full height and run to the viewport edge. Desktop only — at ≤1024 Festiva stacks the columns and a viewport-width negative margin would cause horizontal scroll. ───────────────────────────────────────────────────────────── */ @media (min-width: 1025px) { .elementor-element-2e73f34 > .elementor-container { align-items: stretch; } .elementor-element-357fcfd > .elementor-element-populated { padding: 0; display: flex; } .elementor-element-357fcfd .elementor-widget-container, .elementor-element-357fcfd .pxl-image, .elementor-element-357fcfd .elementor-widget-image { width: 100%; height: 100%; margin: 0; } .elementor-element-f29e3d2 img { width: 100%; height: 100%; min-height: 74vh; object-fit: cover; object-position: center; display: block; border-radius: 0; } /* Run the image off the left edge of the viewport. Measured, not assumed: the inner section's .elementor-container resolves to 1140px centred, so at any viewport above that the gap from the screen edge to the column is exactly (100vw - 1140px) / 2 — 150px at 1440. Shift the column left by that gap and grow it by the same amount, so the left edge reaches 0 while the right edge does not move. Because the two cancel, this cannot introduce horizontal scroll. max() pins the bleed at 0 below 1140px, and the enclosing media query keeps it off tablet and mobile entirely, where Festiva stacks the columns. The width override needs !important: Elementor prints the column width inside its own min-width:768px block at a specificity this cannot reach. */ .elementor-element-357fcfd { --pvx-bleed: max(0px, calc((100vw - 1140px) / 2)); margin-left: calc(-1 * var(--pvx-bleed)); width: calc(43.61% + var(--pvx-bleed)) !important; } /* Give the copy column breathing room now that the image is flush. */ .elementor-element-d6ea58e > .elementor-element-populated { padding-left: 64px; padding-right: 32px; } } /* ───────────────────────────────────────────────────────────── 3b. FAQ ANSWER COPY Publishing the FAQ section exposed a pre-existing failure that was invisible while the section was hidden: the accordion body inherits the blue global, which is #0072B9 on the beige ground — 3.93:1 at 18px regular, under the 4.5:1 floor for body text. #00639F is the value the earlier accessibility pass established for body copy (4.91:1); reusing it keeps one body colour on the page rather than introducing a third. `!important` because Elementor prints .elementor-16922 .elementor-element.elementor-element-2952c3f .pxl-accordion .pxl-item--content at 0,5,0. ───────────────────────────────────────────────────────────── */ /* Updated: this was #00639F, which was correct while blue *was* the body colour. Section 10 moved body copy to #2E2A26, so the FAQ answers now use the same value as every other paragraph on the light ground. */ .elementor-element-2952c3f .pxl-accordion .pxl-item--content, .elementor-element-2952c3f .pxl-accordion .pxl-item--content p, .pxl-accordion .pxl-item--content { color: #2e2a26 !important; } /* The rotated email rail in the hero's right column, widget 762290c. It is real contact information rather than decoration, and at 20px regular in the blue global it measured 3.93:1. */ .elementor-element-762290c .pxl-text-editor, .elementor-element-762290c .pxl-text-editor a, .elementor-element-762290c a { color: #00639f !important; } /* Same failure, different widget: the team section uses Elementor's native image-box, whose description inherits the blue global — 3.93:1 at 20px regular. Pre-existing rather than introduced here, but it sits directly below headings that now measure 14.80:1, so leaving it would be the most conspicuous remaining gap on the page. */ .elementor-image-box-description, .elementor-widget-image-box .elementor-image-box-description { color: #00639f !important; } /* ───────────────────────────────────────────────────────────── 3c. THE DARK PASSAGE — PREVIEW, scoped to staging (page 17622) Delete the `` prefixes to ship site-wide. The first pass produced ground alternation but not a rhythm: beige 75.2%, one 194px lime stripe and one 924px dark band, then 5,476 unbroken beige pixels to the footer. The marquee floated between two beige sections and read as bolted on. The fix is contiguity, not more stripes. Marquee, work grid and counters join the Services band as one continuous dark passage — the part of the page that is about the work — and beige returns for the human half: team, testimonials, FAQ, clients. One decision the eye can read instead of three interruptions. Work-on-dark is also just the right treatment: twelve event photographs against near-black is what every one of the seven reference sites does with its imagery. Trusted By deliberately stays beige. Two of its eight logos have light backgrounds flattened in — Red Chillies #FFFFFF and Times of India #F7F7F7, neither transparent — so a dark band there would show white boxes. ───────────────────────────────────────────────────────────── */ .elementor-element-pvwork01:not(.elementor-motion-effects-element-type-background), .elementor-element-c3b0db2:not(.elementor-motion-effects-element-type-background) { background-color: var(--pvx-ink) !important; } /* The "Selected Work" heading sits inside the dark passage, so it takes the light ink. It is coloured here rather than in the widget data because Elementor emits no colour rule for it at all — neither a `__globals__` binding nor a literal `title_color` produced one; only the font-size and layout rules appear in the generated CSS. Without this it falls through to the theme's `h1..h6 { color: white }`, which happened to be right on dark and was 1.3:1 on beige. Consequence worth knowing: this one heading's colour is not adjustable from the Style tab. Its text and sub-title still are, which is the constraint that actually matters. */ .elementor-element-pvworkhead .pxl-item--title, .elementor-element-pvworkhead .pxl-heading .pxl-item--title { color: var(--pvx-ink-soft); -webkit-text-fill-color: var(--pvx-ink-soft); } .elementor-element-pvworkhead .pxl-item--subtitle, .elementor-element-pvworkhead .pxl-item--subtext { color: rgba(245, 239, 233, 0.72) !important; } /* Counters: the numeral goes bright, the label goes quiet. The accent is blue now and blue on near-black is 2.1:1, so the numeral takes soft ink at full opacity and the label the same colour at 0.72 — the contrast between them is opacity and size, not hue. */ .elementor-element-c3b0db2 .elementor-counter-number-wrapper, .elementor-element-c3b0db2 .elementor-counter-number, .elementor-element-c3b0db2 .elementor-counter-number-prefix, .elementor-element-c3b0db2 .elementor-counter-number-suffix { color: var(--pvx-ink-soft) !important; } .elementor-element-c3b0db2 .elementor-counter-title { color: rgba(245, 239, 233, 0.72) !important; } /* The theme's 1px decorative rules are drawn for a light ground and vanish on dark. Lift them to a faint light grid so the passage keeps its structure. */ .elementor-element-pvwork01 .pxl-divider-vertical span, .elementor-element-c3b0db2 .pxl-divider-vertical span { background: rgba(245, 239, 233, 0.07); } /* ───────────────────────────────────────────────────────────── 4. ACCENT There is no third colour any more. The site is beige #EEDFD4, blue #0072B9 and Ink #0A0E1A. --pvx-accent now resolves to the blue, so the two rules that matter are: blue is a FILL on the dark band (white on it, 5.18:1) and TEXT only on the ground (3.93:1 — large text only). Never blue text on near-black: 2.1:1. ───────────────────────────────────────────────────────────── */ /* Theme buttons label themselves with the beige global, which is 3.93:1 on the blue fill at 20px regular — under the 4.5:1 body floor. White is 5.11:1 on the same fill. Applies to the hero "Partner With Us" and the FAQ "Connect Now?", both of which only became visible again once the motion layer stopped overwriting `.btn::before`. */ /* `!important`: Elementor prints .elementor-16922 .elementor-element.elementor-element-df429cb .pxl-button .pxl--btn-text at 0,5,0, which this cannot reach without it. */ .pxl-button a.btn .pxl--btn-text, .pxl-button a.btn { color: #ffffff !important; } /* Lime is 17.26:1 against Ink text, but only 1.17:1 against the beige ground — so a lime pill on beige has an essentially invisible edge, which fails the 3:1 floor for the boundary of a UI component. An Ink ring gives the shape a 14.80:1 edge. Not needed on the dark band, where lime-on-Ink is already 17.26:1, hence the explicit exclusion. */ /* `!important`: the theme ships `.elementor a { box-shadow: none }` at 0,2,0, which beats a single class. */ .pv-cta-repair { box-shadow: inset 0 0 0 2px #0a0e1a !important; } .elementor-element-dd8eb09 .pxl-button a, .elementor-element-dd8eb09 .pxl-button .btn { box-shadow: none; } /* The Services CTA sits on the dark band. It is a FILL, so blue works here where blue text would not: white on #0072B9 is 5.18:1, and the button's own edge gives it a 3:1 boundary against the near-black. */ .elementor-element-8bca765 .pxl-button a, .elementor-element-8bca765 .pxl-button .btn { background: #0072B9 !important; } .elementor-element-8bca765 .pxl-button .pxl--btn-text, .elementor-element-8bca765 .pxl-button .btn, .elementor-element-8bca765 .pxl-button .btn span, .elementor-element-8bca765 .pxl-button .btn i { color: #ffffff !important; } /* ───────────────────────────────────────────────────────────── 5. SHOWCASE GRID — styling for the Phase 3 repeater conversion pxl_showcase_grid renders the caption in an h5 BELOW the image and injects a decorative .pxl-item--dots. These rules restore the gradient caption overlay the hand-written tiles had, so the conversion is invisible to the eye while making the content editable from the dashboard. Inert until that widget exists. ───────────────────────────────────────────────────────────── */ .pxl-showcase-grid .pxl-item--dots { display: none; } .pxl-showcase-grid .pxl-grid-item { margin-bottom: 14px; } .pxl-showcase-grid .pxl-item--inner { position: relative; overflow: hidden; border-radius: 14px; background: #d8c9be; } .pxl-showcase-grid .pxl-item--image { aspect-ratio: 4 / 3; overflow: hidden; } .pxl-showcase-grid .pxl-item--image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .pxl-showcase-grid .pxl-item--inner:hover .pxl-item--image img { transform: scale(1.04); } /* Caption lifted out of flow and laid over the foot of the image. */ .pxl-showcase-grid .pxl-item--title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 16px 14px; font-family: var(--pvx-display) !important; font-size: 19px; line-height: 1.15; letter-spacing: 0.01em; background: linear-gradient( to top, rgba(0, 18, 32, 0.9) 0%, rgba(0, 18, 32, 0.55) 48%, rgba(0, 18, 32, 0) 100% ); } .pxl-showcase-grid .pxl-item--title a { color: #ffffff; text-decoration: none; } /* ───────────────────────────────────────────────────────────── 6. MARQUEE — for the Phase 3 counter-rotating pair The theme widget has no overflow guard and no reduced-motion handling. Both are added here. Inert until the widget exists. ───────────────────────────────────────────────────────────── */ /* The theme ships marquee CSS in pxl-style.min.css but does not load it on this page — Elementor's conditional asset loading only enqueues what the widgets on the page declare, and pxl_text_slip declares no stylesheet. The rendered result was every service name stacked vertically at `animation-name: none`. Rather than fight the loader, the band is defined here in full. Structure emitted by templates/pxl_text_slip/layout-1.php: .pxl-text-slip > .pxl-item--container > .pxl-item--inner x2 The second .pxl-item--inner is an exact duplicate of the first — that is the theme's seamless-loop trick, and it is what makes translating the container by exactly -50% loop without a visible seam. */ .elementor-widget-pxl_text_slip, .pxl-text-slip { overflow: hidden; max-width: 100vw; } .pvx-marquee-band .pxl-item--container { display: flex; width: max-content; will-change: transform; } .pvx-marquee-band .pxl-item--inner { display: flex; flex: 0 0 auto; } .pvx-marquee-band .pxl-item--text { display: inline-flex; align-items: center; white-space: nowrap; margin: 0; padding: 14px 26px; font-family: var(--pvx-display) !important; text-transform: uppercase; letter-spacing: 0.02em; } /* A separator so the services read as a list rather than one long string. */ .pvx-marquee-band .pxl-item--text::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 26px; border-radius: 50%; background: currentColor; opacity: 0.55; } @keyframes pvx-marquee-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes pvx-marquee-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .pvx-marquee-band .pxl-slide-to-left .pxl-item--container { animation: pvx-marquee-left 26s linear infinite; } .pvx-marquee-band .pxl-slide-to-right .pxl-item--container { animation: pvx-marquee-right 32s linear infinite; } /* Band colours. The widget's own background_color / text_color controls emitted nothing, so they are set here, keyed to the two widget ids. Recoloured to the two brand colours: a blue band carrying beige, and a beige band carrying blue. Blue-on-beige is 3.93:1 — comfortably over the 3:1 large-text floor at the marquee's 46px, but this type must not be shrunk. The pair still runs in opposite directions; that counter-rotation is the effect. */ .elementor-element-pvmqa .pxl-text-slip { background: #0072B9; } .elementor-element-pvmqa .pxl-item--text { color: var(--pvx-ground) !important; } .elementor-element-pvmqb .pxl-text-slip { background: var(--pvx-ground); } .elementor-element-pvmqb .pxl-item--text { color: #0072B9 !important; } /* ───────────────────────────────────────────────────────────── 7. REDUCED MOTION The theme's marquee and the hover scale above both animate unconditionally. Neither respects the user's setting on its own. ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pxl-showcase-grid .pxl-item--image img, .pxl-showcase-grid .pxl-item--inner:hover .pxl-item--image img { transition: none; transform: none; } /* The marquee is the one piece of motion here a visitor cannot look away from, so it is also the one that most needs an off switch. */ .pvx-marquee-band .pxl-item--container, .pvx-marquee-band .pxl-slide-to-left .pxl-item--container, .pvx-marquee-band .pxl-slide-to-right .pxl-item--container { animation: none !important; transform: none !important; } } /* ───────────────────────────────────────────────────────────── 8. OUR TEAM — compression The section ran 2,683px: a third of the whole page, and the single longest beige run on it, sitting immediately after the dark passage. That imbalance is what made the page read as two halves. It was not carrying content to justify the height. Nine people, and only one of them (the founder) has a bio at all — 490 characters out of 2,683 pixels. The rest are name and role. The height came from a 2-column grid of 545px cells with 273px portraits and 60px row gaps, five rows deep. Four columns at ~200px brings it to roughly 900px with nothing removed. Worth knowing for comparison: neither productioncrew.in nor procam.in carries a team block on the homepage at all. Portraits stay on beige deliberately. They were shot on phones in different rooms — the filenames are still WhatsApp-Image-2025-08-02-at-… — and a dark ground is far less forgiving of mismatched lighting than a light one. ───────────────────────────────────────────────────────────── */ @media (min-width: 1025px) { .elementor-element-ef7812f > .e-con-inner { grid-template-columns: repeat(4, 1fr) !important; gap: 40px 24px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .elementor-element-ef7812f > .e-con-inner { grid-template-columns: repeat(3, 1fr) !important; gap: 32px 20px !important; } } /* Portrait sizing. Elementor prints `.elementor-image-box-img { width: 50% }` per widget at 0,5,0. In the old 545px cell that resolved to a 272px portrait; in the new 259px cell it collapsed them to 130px, which is too small to read as a face. The wrapper is freed to fill its cell and the cap moves onto the image. */ .elementor-element-d220163 .elementor-image-box-img { width: 100% !important; margin-bottom: 14px !important; } .elementor-element-d220163 .elementor-image-box-img img { width: 100%; max-width: 190px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; /* The theme rounds these to full circles and that is left alone — a circular crop is the most forgiving frame for portraits shot in nine different rooms on nine different phones. */ } /* 32px was display-scale for a two-column layout; at four columns it wraps most of these names onto three lines. The colour has to change with the size, not after it. These names are #0072B9, which is 3.93:1 on the beige ground — a pass at 32px only because that clears the 24px large-text threshold and its 3:1 bar. Dropping to 21px moves them under the 4.5:1 body rule and would have failed. Ink is 14.80:1 and matches every other heading on the page. */ .elementor-element-d220163 .elementor-image-box-title { font-size: 21px !important; line-height: 1.25 !important; margin-bottom: 4px !important; color: var(--pvx-ink) !important; } .elementor-element-d220163 .elementor-image-box-title span { display: block; font-size: 14px; font-weight: 400; opacity: 0.72; letter-spacing: 0.04em; text-transform: uppercase; } /* The founder's bio is the only one on the page. Clamped rather than removed, so the section keeps a uniform row height. */ .elementor-element-d220163 .elementor-image-box-description { font-size: 15px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* 60/100 was proportionate to a 2,683px section, not a 900px one. */ .elementor-element-d220163 { padding-top: 70px !important; padding-bottom: 80px !important; } /* ───────────────────────────────────────────────────────────── 9. FOOTER LINKS The footer's links and contact details use the beige global on the #0072B9 band — #EEDFD4 on that blue is 3.93:1, which passes nothing at 15–16px. The earlier accessibility pass lifted footer *body* copy to rgba(255,255,255,0.94) but not the links, so the nav column and the email address were left behind. White on the same blue is 5.11:1. Scoped to