/* ==========================================================================
Pixels Productions — client revision round, Sept 2026
Loaded on every page, after the theme CSS. Nothing here edits vendor files,
so a Pelicula/Elementor update cannot wipe it.
Palette is defined once below and is the client's exact brand palette.
Note that cream also lives in ~336 inline style="color:#E2E0D7" attributes
in the HTML, so re-tinting cream means sweeping those too, not just this
file (20_global.py is what writes them).
========================================================================== */
:root {
--px-cream: #E2E0D7; /* replaces pure white for all typography */
--px-cream-soft: rgba(226, 224, 215, 0.72);
--px-cream-dim: rgba(226, 224, 215, 0.45);
--px-blood: #9C2016; /* brand BLOOD — the one red */
--px-red: var(--px-blood); /* alias, kept so older rules still read */
--px-navy: #151935; /* Contact hero scrim */
--px-navy-rgb: 21, 25, 53; /* same value, for rgba() with an alpha */
--px-navy-line: #222855; /* NAVY at +8.8pts lightness */
--px-electric: #1A43F3; /* brand ELECTRIC — unused, kept for the record */
}
/* These are the client's exact brand values, confirmed against the brand book
(brand assets p2): INK #000000, CREAM #E2E0D7, NAVY #151935,
ELECTRIC #1A43F3, BLOOD #9C2016. Nothing here is an approximation any more,
so do not "tune" them.
The book prints ELECTRIC's hex as #E4E2D9, which is cream — the swatch
itself measures #1A43F3. The printed value is a typo; ELECTRIC is unused on
the site so far either way.
--px-navy-line is the only derived value: it is the hover box's 1px border,
NAVY lifted 8.8 lightness points, the same lift the previous pair used.
KNOWN TRADE-OFF: BLOOD is built to be a solid fill on a cream page, and
this site is black. As a large fill it is strong — the cream knockout on
top measures 6.03:1 — but as a 1-2px hairline on black it measures 2.63:1,
under the 3:1 WCAG floor for UI components. The active-page mark and the
opener lines are those hairlines. This is the client's stated colour, so it
stands; if those indicators ever need to read harder, thicken them rather
than inventing a lighter red that is not in the palette. */
/* --------------------------------------------------------------------------
1. TYPOGRAPHY COLOUR — white -> cream/off-white
IMPORTANT: the dark pages get their white from inline style="color:#FFFFFF"
attributes, and those were rewritten to cream in the HTML itself. Do NOT add
blanket `h1..h6 { color: cream }` rules here: the single-post template
(post-*.html) is a LIGHT page — white background, near-black headings, grey
body — and a blanket override makes that text invisible.
Only genuinely-white-on-dark chrome belongs below.
-------------------------------------------------------------------------- */
/* The theme flags dark-background pages with body.qodef-header--light and
forces the nav to #fff !important there. Single posts and archives do NOT
carry that class — they print #111 nav on a white header — so recolour only
the light-on-dark case, matching the theme's specificity to win.
(The 1px menu mark is painted with `currentColor`, so it follows this
automatically; no separate rule needed.) */
body.qodef-header--light #qodef-page-header #qodef-page-header-inner
.qodef-header-navigation > ul > li > a {
color: var(--px-cream) !important;
}
/* theme buttons print white label text on a solid fill */
.qodef-theme-button,
button[type="submit"],
input[type="submit"],
#qodef-page-footer input[type="email"] {
color: var(--px-cream);
}
/* The card chrome the theme paints #fff from its own stylesheet, so no inline
style was there to rewrite and these survived the first retint. Audited in
the browser rather than grepped: 20 nodes were still pure white — project
and post card titles, every "READ MORE" and "CONTACT US" label, the "share"
captions, and the struck word inside a post title.
Scoped to body.qodef-header--light, which is the theme's own flag for a
dark-background page. It is exact here: index/about/services/ourwork/blog/
contact and the portfolio pages carry it, while post-*, category-*,
archive-* and author-* (the LIGHT template, near-black text on white) do
not — and painting cream there would make them unreadable. That is the same
trap the note at the top of this section warns about. */
body.qodef-header--light .qodef-m-text,
body.qodef-header--light .qodef-social-title,
body.qodef-header--light .qodef-custom-styles {
color: var(--px-cream);
}
/* The card titles and their meta needed MORE SPECIFICITY, not another
selector. The winning declaration was
.qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-content
at (0,3,0) — set on the content wrapper, with the title inheriting from it —
so `body.qodef-header--light .qodef-e-title-link` at (0,2,1) lost and the
titles stayed white. Going through .qodef-shortcode (always an ancestor of
these lists) makes it (0,3,1), which wins without resorting to !important.
The anchors are listed separately because they do NOT inherit: the theme's
`a, p a { color: #111 }` beats inheritance, so the author and category links
need naming in their own right. */
body.qodef-header--light .qodef-shortcode .qodef-e-content,
body.qodef-header--light .qodef-shortcode .qodef-e-content a,
body.qodef-header--light .qodef-shortcode .qodef-e-title-link,
body.qodef-header--light .qodef-shortcode .qodef-e-info-author-label,
body.qodef-header--light .qodef-shortcode .qodef-e-info-author-link,
body.qodef-header--light .qodef-shortcode .swiper-button-text,
body.qodef-header--light .qodef-shortcode .swiper-pagination-current-slide,
body.qodef-header--light .qodef-shortcode .swiper-pagination-total-slides {
color: var(--px-cream);
}
/* The card families needed their own rules because the theme paints them
through its `skin--light` flag — its name for "this component sits on a dark
ground, so print it white" — at (0,4,1):
.qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-title
which outranks anything routed through .qodef-shortcode. Mirroring the
theme's own selector shape and prefixing `body` takes it to (0,4,2), which
wins by one element without `!important`.
Chasing these one at a time is the wrong instinct: `skin--light` is a whole
family, so the fix is written against the family. Anything new that still
comes out white will be a component the theme flags the same way — find its
rule, mirror its shape, add `body`. */
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-title,
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-title a,
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-excerpt,
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-info,
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-info-item,
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-info-item a,
body .qodef-blog.qodef-skin--light article .qodef-e-inner .qodef-e-read-more,
body .qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-content-inner *,
body .qodef-navigation-skin--light .qodef-e-title-link,
body .qodef-shortcode .qodef-navigation .swiper-button-text,
body .qodef-shortcode .swiper-pagination .swiper-pagination-current-slide,
body .qodef-shortcode .swiper-pagination .swiper-pagination-total-slides {
color: var(--px-cream);
}
/* The blog index is the METRO layout, which paints its own meta white through
a third family — not `skin--light` at all:
.qodef-blog.qodef-item-layout--metro article
.qodef-e-info.qodef-info--bottom .qodef-e-info-item a (0,5,2)
Mirrored with a `body` prefix to reach (0,5,3). Both the --top and --bottom
info rows are covered because the index uses --top while the cards elsewhere
use --bottom. */
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info a,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info .qodef-e-info-item,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info .qodef-e-info-item a,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info.qodef-info--top .qodef-e-info-item,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info.qodef-info--top .qodef-e-info-item a,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info.qodef-info--bottom .qodef-e-info-item,
body .qodef-blog.qodef-item-layout--metro article .qodef-e-info.qodef-info--bottom .qodef-e-info-item a {
color: var(--px-cream);
}
/* --------------------------------------------------------------------------
2. HEADER — menu centred, and it STAYS clear of the logo
The header is a flex row of logo / nav / opener. The logo (300px) and the
opener (~39px) are different widths, so the theme's space-between pushes the
nav ~118px right of true centre.
An earlier fix pinned the nav with `position:absolute; left:50%`. That
centred it, but taking it out of flow meant the logo no longer pushed it:
the nav is 803px wide, so it starts overlapping the logo as soon as
(viewport - 803) / 2 < 325, i.e. **below ~1453px** — measured at 87px of
overlap at 1280 and 214px at 1025. Tablet-width desktop windows had the menu
sitting on top of the logo.
The fix is to centre it IN FLOW instead: give the logo and the opener equal
flex space either side, and the nav lands dead centre by construction. It
can never overlap, because flex shrinks the flanks rather than letting items
cross. The nav's own padding then tightens between 1025px and 1500px so all
three still fit at the narrow end.
-------------------------------------------------------------------------- */
@media only screen and (min-width: 1025px) {
/* equal flanks => the nav is centred without leaving the flow */
#qodef-page-header-inner > .qodef-header-logo-link,
#qodef-page-header-inner > .qodef-widget-holder {
flex: 1 1 0;
min-width: 0;
}
#qodef-page-header-inner > .qodef-widget-holder {
display: flex;
justify-content: flex-end;
/* the theme puts margin-left:24px here; with equal flanks that asymmetry
lands the nav exactly half of it (12px) left of centre */
margin-left: 0;
}
#qodef-page-header-inner > .qodef-header-navigation {
flex: 0 1 auto;
min-width: 0;
}
/* the theme pins the logo at flex-shrink:0 and a fixed width; let it scale
down rather than force an overflow */
#qodef-page-header .qodef-header-logo-link img {
max-width: 100%;
object-fit: contain;
}
}
/* Between 1025 and 1500 the three items cannot all sit at full size — at
1025px the nav alone is 803px against a 300px logo. Tighten the nav's item
padding across that range so everything fits without the logo shrinking. */
@media only screen and (min-width: 1025px) and (max-width: 1500px) {
.qodef-header-navigation > ul > li {
padding: 0 clamp(9px, 1.5vw, 31px);
}
}
/* --------------------------------------------------------------------------
3. NAVIGATION — red mark on the active page
An earlier round painted a navy box behind the hovered item; the client has
since asked for it to go, so HOVER IS THE THEME'S OWN again: a 1px rule in
currentColor that sweeps across the label
(`> a:hover > span:before { transform: scaleX(1) }`). Because it is
currentColor it stays legible on both templates — cream on the dark pages,
#111 on the light single-post header.
Three rules went with the box and must NOT come back on their own:
* position:relative on the , which only existed to be the box's
containing block (the theme leaves the static, and this nav has no
dropdowns that would need it),
* position/z-index on the , to lift the label above the box — the theme
already sets position:relative on both the and its , and the
is what the mark is measured against,
* a forced cream hover label, which only existed so #111 text would not
vanish against the navy. Without the box that rule would paint cream on
the white header and make the hovered item invisible.
-------------------------------------------------------------------------- */
/* ACTIVE PAGE: the mark turns red (the label keeps its own colour).
Two ids to outrank the theme's own `.qodef-header--light ... !important`. */
body #qodef-page-header #qodef-page-header-inner
.qodef-header-navigation > ul > li.current-menu-item > a > span:before,
body #qodef-page-header #qodef-page-header-inner
.qodef-header-navigation > ul > li.current_page_item > a > span:before,
body #qodef-page-header #qodef-page-header-inner
.qodef-header-navigation > ul > li.px-current > a > span:before {
background-color: var(--px-red) !important;
transform: scaleX(1) !important;
height: 2px; /* theme draws it at 1px */
/* Strike through the OPTICAL middle of the caps, not the middle of the line
box. Those are not the same place and the gap is visible.
Measured on the live nav at 17px Bebas Neue: ascent 16, descent 6, cap
height 12, line-height 26. So half-leading is (26-22)/2 = 2, the baseline
sits 18 down, the caps run 6..18, and their centre is 12 — while the line
box centre is 13. Bebas is uppercase-only, so the descent is space the
text never uses, and `top: 50%` drops the rule below the glyphs.
The correction is (ascent - descent - capHeight) / 2, which cancels
line-height entirely and so holds at every breakpoint:
(16 - 6 - 12) / 2 = -1px at 17px = -0.059em.
The extra -1px is half the rule's own 2px height, to centre the bar
itself rather than hang it from its top edge. */
top: calc(50% - 0.059em - 1px);
}
/* mobile menu gets the same active colour */
.qodef-mobile-header-navigation li.current-menu-item > a,
.qodef-mobile-header-navigation li.px-current > a {
color: var(--px-red);
}
/* --------------------------------------------------------------------------
3b. SIDE-AREA MENU — the slide-out panel's link list
#menu-main-menu-pj-5 is the nav widget inside #qodef-side-area. The theme
gives its items no vertical rhythm at all, so the links sit almost on top of
each other.
-------------------------------------------------------------------------- */
/* Measured with the panel actually open at 1600x900: six items, each
33px of text (22px/1.5) plus 9px top and bottom, so a 51px pitch and only
18px of air between links. The whole list spanned 327->633, which is 306px
of a 900px panel — 327px empty above it and 267px below. There is plenty of
room, so the spacing is roughly doubled.
Still expressed as a vh clamp rather than a fixed value, because this panel
is full-height and the list has to survive a short viewport (a landscape
phone, a 13" laptop with browser chrome). At the 2.6vh rate the list is
~479px tall at 900px, ~416px at 700px and ~354px at 500px — comfortable at
every one. The 26px ceiling stops it sprawling on a tall desktop display. */
#qodef-side-area .widget_nav_menu ul.menu > li,
#qodef-side-area-inner ul.menu > li {
margin: 0;
padding: clamp(12px, 2.6vh, 26px) 0;
}
#qodef-side-area .widget_nav_menu ul.menu > li > a,
#qodef-side-area-inner ul.menu > li > a {
display: inline-block;
line-height: 1.5;
}
/* Safety net: if the panel ever does run out of height — more menu items, a
very short viewport — let it scroll rather than clip the last link. */
#qodef-side-area-inner {
max-height: 100%;
overflow-y: auto;
}
/* --------------------------------------------------------------------------
4. SIDE INDICATORS — the two opener lines, white -> red
Navy was the other option the brief allowed, but the header sits on black
here, where navy is effectively invisible. Swap var(--px-red) for
var(--px-navy) below if the client prefers it on a lighter header.
-------------------------------------------------------------------------- */
.qodef-opener-icon .qodef-m-line,
.qodef-side-area-opener .qodef-m-line,
#qodef-side-area-close .qodef-m-line {
background-color: var(--px-red) !important;
}
/* the mobile header draws the same two-line opener as an inline SVG with a
hardcoded fill, so it needs its own rule */
.qodef-mobile-header-opener svg path,
.qodef-mobile-header-opener svg polygon {
fill: var(--px-red) !important;
}
/* the sticky back-to-top arrow on the right edge */
.qodef-sticky-right .qodef-icon-elegant-icons,
#qodef-back-to-top .qodef-icon-elegant-icons,
.qodef-back-to-top .qodef-icon-elegant-icons {
color: var(--px-red) !important;
}
/* --------------------------------------------------------------------------
5. CLIENT LOGO CAROUSEL — no prev/next, no counter
The markup is injected by Qode's swiper init at runtime, so these are
belt-and-braces alongside the JS removal in pixels-edits.js.
-------------------------------------------------------------------------- */
.elementor-widget-pelicula_core_clients_list .qodef-navigation,
.elementor-widget-pelicula_core_clients_list .swiper-button-next,
.elementor-widget-pelicula_core_clients_list .swiper-button-prev,
.elementor-widget-pelicula_core_clients_list .swiper-pagination,
.elementor-widget-pelicula_core_clients_list .swiper-pagination-current-slide,
.elementor-widget-pelicula_core_clients_list .swiper-pagination-total-slides,
.px-clients-holder .qodef-navigation,
.px-clients-holder .swiper-button-next,
.px-clients-holder .swiper-button-prev,
.px-clients-holder .swiper-pagination {
display: none !important;
}
/* reclaim the space the counter column used to occupy */
.elementor-widget-pelicula_core_clients_list .qodef-grid-inner {
width: 100%;
}
/* --------------------------------------------------------------------------
6. HIGHLIGHTED WORDS — the brand's mark
The brand does NOT emphasise by turning a word red. It knocks the word out
of a solid BLOOD block and slants it — "WHO /WE ARE./" on company profile
p3 — and uses the slant on its own where a block would be too heavy
("WORK /PROCESS./", p15). So the mark here is: Blood block, cream knockout,
italic.
Geometry started from that lockup, where the block is 1.22x the cap height
and starts 0.12 cap-heights above the cap line. Bebas Neue metrics: cap
0.711em, ascent 0.956em, so the cap line sits 0.245em below the content-box
top and the baseline 0.956em below it.
These ARE the measured reference values — the block was opened up over two
rounds and then brought back here at the client's request:
above cap 0.086em => top = 0.245 - 0.086 = 0.159em
below baseline 0.070em => height = (0.956 + 0.070) - 0.159
= 0.867em (1.22x cap)
sides 0.08em left / 0.10em right
Keep all four moving together or the word stops looking optically centred
in the block.
Do NOT "correct" these back to the 1.22x reference — the looseness is
deliberate.
To resize: pick the padding you want above the cap and below the baseline,
then re-derive top and height with the two formulas above. Changing
background-size alone just stretches the block off-centre. Nothing clips it
— every ancestor is overflow:visible — so it is free to grow.
Painted as a background-image, not a pseudo-element: the theme wraps each
animated word in an overflow:hidden span, which would clip an absolutely
positioned block. box-decoration-break keeps the block whole if the mark
ever wraps across two lines.
-------------------------------------------------------------------------- */
.px-accent,
.px-mark {
--px-mark-fill: var(--px-blood);
background-image: linear-gradient(var(--px-mark-fill), var(--px-mark-fill));
background-repeat: no-repeat;
background-size: 100% 0.867em;
background-position: 0 0.159em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 0.1em 0 0.08em; /* a touch more on the right: the synthesised
oblique leans the last glyph outward */
color: var(--px-cream) !important;
font-style: italic;
}
/* Bebas Neue ships no italic, so the browser synthesises the oblique. That is
fine for a geometric condensed face, but it does not re-space the glyphs —
hence the asymmetric padding above rather than a symmetric box. */
/* The theme's JS re-splits every .qodef-m-title into per-word spans for its
reveal animation, throwing away any markup nested inside the heading. The
static .px-accent span therefore cannot survive inside a heading, so
pixels-edits.js re-wraps the target word as .px-mark after each split.
.px-accent above still covers the headings the theme does not touch
(Contact, Our Work), where the span is left alone. */
/* NAVY variant of the mark — same block, different fill.
Used on "visuals" in the Showreel heading on the home page.
HEADS UP: that heading sits on a near-black ground (~#0C0C0A), and NAVY
against it is 1.14:1, so the block itself is all but invisible — the word
reads, because cream on NAVY is 12.99:1, but the highlight does not announce
itself the way the BLOOD one does. This is what was asked for. If it needs
to actually show, --px-mark-fill is the single knob:
var(--px-navy-line) #222855 1.40:1 (still very quiet)
var(--px-electric) #1A43F3 2.93:1 (reads, and is brand)
BLOOD is 2.45:1 on the same ground for reference. */
.px-accent-navy,
.px-mark--navy {
--px-mark-fill: var(--px-navy);
}
/* STRIKETHROUGH. The theme emphasises a word by wrapping it in
.qodef-custom-styles, which pelicula-core styles as
`text-decoration: line-through` — that is where the rule through "visuals"
comes from. The title-split throws that span away along with everything else
nested in the heading, and the .px-mark the JS builds in its place does not
inherit it, so the strike has to be re-applied here.
Driven by data-px-mark-strike on the heading, so it lands only on words that
had it — TRUSTED, 2019, "to make" and "films" are not struck through. */
.px-mark--strike {
text-decoration: line-through;
}
/* --------------------------------------------------------------------------
6b. CLUTCH ICON
Clutch isn't in Elegant Icons / Ionicons / FontAwesome, so it ships as an
inline SVG. Sized in em so it matches the icon-font glyphs beside it
whatever font-size the slider layer sets.
-------------------------------------------------------------------------- */
.px-icon-clutch {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.px-icon-clutch .px-clutch-svg {
width: 1.05em;
height: 1.05em;
display: block;
color: inherit;
transition: color 0.25s ease;
}
.px-icon-clutch:hover .px-clutch-svg {
color: var(--px-red);
}
/* --------------------------------------------------------------------------
6c. EDITORIAL POST BODY (the five new blog articles)
Measured column + real subheads, so a long read stays readable instead of
running the full content width like the imported lorem posts did.
-------------------------------------------------------------------------- */
/* NOTE: single posts render on the LIGHT template (white page, #111 headings,
#7a7a7a body). These colours deliberately match that template, not the cream
used on the dark pages. */
.px-post-body {
max-width: 44em;
}
.px-post-body p {
color: #7a7a7a;
margin: 0 0 1.5em;
line-height: 1.85;
}
/* standfirst: the opening paragraph carries a little more weight */
.px-post-body p:first-child {
color: #4a4a4a;
font-size: 1.12em;
line-height: 1.7;
}
.px-post-h3 {
color: #111111;
margin: 2.4em 0 0.75em;
letter-spacing: 0.02em;
}
.px-post-h3:first-child {
margin-top: 0;
}
/* --------------------------------------------------------------------------
7. CONSISTENCY PASS
-------------------------------------------------------------------------- */
/* selection + focus in brand colours rather than browser blue */
::selection { background: var(--px-red); color: var(--px-cream); }
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--px-red);
outline-offset: 3px;
}
/* the theme leaves a hairline of pure white on footer/section dividers */
#qodef-page-footer-bottom-area {
border-top-color: rgba(226, 224, 215, 0.12) !important;
}
/* consistent page-title block spacing across all templates */
.qodef-page-title .qodef-m-content {
padding-top: 0;
}
/* --------------------------------------------------------------------------
8. CTA BUTTONS — hover fills with BLOOD
See _build-scripts/48_cta_hover.py for the half of this that is NOT CSS.
Short version: the label and border colours on hover are written as INLINE
styles by qi-addons' JS from the element's data-hover-* attributes, so they
are set there, not here. What belongs here is the fill and a fallback.
-------------------------------------------------------------------------- */
/* The fill is a panel parked below the button that slides up on hover. The
theme paints it #fff for the outlined skin; this is the one declaration that
actually changes what the hover looks like. */
.qodef-button.qodef-layout--with-bg-holder.qodef-layout--outlined .qodef-btn-bg-holder,
.qodef-button.qodef-layout--with-bg-holder.qodef-layout--outlined.qodef-skin--light .qodef-btn-bg-holder {
background-color: var(--px-blood);
}
/* Fallback for the label/border if the addon JS never runs — without it a
no-JS hover would leave black-on-blood from the theme's own rule. Cream on
blood measures 6.1:1. */
.qodef-button.qodef-layout--outlined:hover,
.qodef-button.qodef-layout--outlined:hover.qodef-skin--light {
color: var(--px-cream);
border-color: var(--px-blood);
}
/* The textual CTAs ("Read More", "Contact Us") had NO hover state at all —
measured, colour and border were identical at rest and on hover. They are
links that look like buttons, so they get the same blood cue rather than a
fill they have no box for. */
.qodef-button.qodef-layout--textual:hover,
.qodef-button.qodef-layout--textual:hover .qodef-m-text,
body.qodef-header--light .qodef-button.qodef-layout--textual:hover .qodef-m-text {
color: var(--px-blood);
}
/* the theme draws a rule under the textual label; move it with the text */
.qodef-button.qodef-layout--textual:hover .qodef-m-text:after,
.qodef-button.qodef-layout--textual:hover .qodef-m-text:before {
background-color: var(--px-blood);
}