that carries its own colour */
.button.primary:not(.is-outline) span,
.button.primary.is-outline:hover span,
.button.checkout span,
.button.wc-forward span,
.button.wc-backward span,
.quick-view span{color:inherit!important}
/* ---------- 38. HERO BACKGROUND — kill the brown wash ---------------------
Additional CSS (DB) has:
.hero-native{ background:
linear-gradient(90deg,rgba(11,11,11,.95),rgba(11,11,11,.18)), <- veil dies at .18
radial-gradient(circle at 76% 56%,rgba(255,91,22,.3),…), <- 30% orange
radial-gradient(circle at 90% 20%,rgba(255,91,22,.22),…) } <- + 22% orange
Two strong orange radials with nothing holding them back = brown mud across the right
half. Orange at meaningful alpha over near-black ALWAYS reads brown; keep Blaze glows
tight and low-alpha (same lesson as the Scrapyard hero and the deal-card overlay).
`.section.hero-native` = (0,2,0) and beats the DB's `.hero-native` (0,1,0), so this
wins without touching Additional CSS. */
/* NO ORANGE IN THE SECTION. Any orange over near-black is brown — there is no alpha
low enough to be both visible and not muddy across a large area. The Blaze glow
belongs BEHIND THE OBJECT only (.zed-hero-object::before), where it's tight, small,
and reads as light spill off the product. The field itself stays pure Ink + texture.
(Attempt #1 kept a .17 radial under a .66 veil and still came out brown.) */
/* No veil. The 90deg Ink gradient only ever existed to hold back the orange wash;
with the orange gone it is Ink over Ink — it does nothing but add a faint smudge.
Pure Ink + diagonal texture. Depth comes from the light pool behind the object. */
.section.hero-native{
background:
repeating-linear-gradient(135deg,#111 0 26px,#0b0b0b 26px 52px)!important}
/* ---------- 39. HERO OBJECT (knockout product image) ----------------------
For a BACKGROUND-REMOVED (transparent PNG/WebP) product image in a hero slide.
Drop `zed-hero-object` into the [ux_image] element's Class field (Advanced tab).
The point: the product floats in the Wasteland — no frame, no photo edges. It is
oversized, bleeds toward the right edge, catches a Blaze rim-glow from behind, and
throws a real shadow. A rectangular catalog photo will NOT work here; it needs the
background knocked out, or you just get a framed placeholder.
drop-shadow() (not box-shadow) so the shadow follows the object's alpha silhouette,
not its bounding box — that's the whole trick. */
.zed-hero-object{position:relative;z-index:2}
.zed-hero-object .img-inner{overflow:visible!important;background:none!important}
/* SIZE: no transform. `object-fit:contain` + the [ux_image] `height` already fit the
object to the slide. A scale() with transform-origin:center right (the old v1.5.0
rule) inflated it 28% and pushed it past the right edge, clipping the case corner.
Size the object with the ux_image height field, not CSS scale. */
.zed-hero-object img{
object-fit:contain!important;
/* Two shadows: a tight contact shadow that defines the silhouette, and a soft
ambient one for depth. drop-shadow (not box-shadow) so both follow the alpha
outline rather than the bounding box — that's what stops it looking pasted on. */
filter:
drop-shadow(0 10px 14px rgba(0,0,0,.55))
drop-shadow(0 34px 46px rgba(0,0,0,.45))
contrast(1.04) saturate(1.02)}
/* LIGHT POOL behind the object.
Key insight: you cannot see a BLACK shadow on a BLACK field. The page is #0B0B0B, so
a black drop-shadow has nothing darker to become — it was invisible by construction.
On a dark field, objects separate by LIGHT, not shadow. So lift the area behind the
object with a soft NEUTRAL pool; the contact shadow then has a surface to fall on,
and the Blaze warmth rides on top.
Neutral (white at low alpha) = grey. A warm/orange pool at this size would go BROWN. */
.zed-hero-object::before{content:"";position:absolute;z-index:-1;pointer-events:none;
inset:0 -8% 0 -8%;
background:
/* BLAZE-LED. The warm layer does the work; the neutral lift is only there to give
the drop-shadow a surface. Lead with the neutral instead and it reads as a grey
smudge behind the product rather than light coming off it. */
radial-gradient(ellipse 44% 46% at 50% 48%,
rgba(255,91,22,.85) 0%,rgba(255,91,22,.26) 46%,transparent 68%),
radial-gradient(ellipse 62% 64% at 50% 50%,
rgba(255,255,255,.18) 0%,rgba(255,255,255,.07) 50%,transparent 74%);
/* Light blur only. The gradients ALREADY have soft falloff — a heavy blur on top just
dilutes the lift until it's invisible. That (plus alphas that were far too low) is
why v1.6.0's pool rendered correctly and still couldn't be seen. */
filter:blur(16px)}
/* ground shadow — centred under the object so it isn't levitating */
.zed-hero-object::after{content:"";position:absolute;z-index:-1;pointer-events:none;
left:20%;right:20%;bottom:4%;height:22px;
background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 74%);
filter:blur(12px)}
/* ---------- 39b. HERO SPREAD (scattered parts, not a single object) --------
For a hero image that is a SCATTER — several separate items spread across the frame
with gaps (e.g. the Rearden muzzle-device flat-lay), rather than one object with a
coherent silhouette.
`zed-hero-object` is WRONG for these, for three reasons:
• Its centred light pool lights the EMPTY MIDDLE of the bounding box, where there
is nothing to light.
• Its ground shadow implies the object is resting on something. A scatter isn't.
• The pool assumes a LIGHT subject (the tan MRE case popped against Ink). Dark
nitride/bronze hardware sinks into the Ink field instead — it needs lifting, not
a glow behind it.
So this variant: brighten the metal so it reads at all, a WIDE FLAT ambient rather
than a centred pool, no ground shadow, and a tighter shadow per silhouette (drop-
shadow follows the alpha, so it traces every part individually). */
.zed-hero-spread{position:relative;z-index:2}
.zed-hero-spread .img-inner{overflow:visible!important;background:none!important}
.zed-hero-spread img{
object-fit:contain!important;
/* dark hardware on Ink needs LIFTING — this is the opposite of the MRE case, which
was light and only needed separating */
filter:
brightness(1.22) contrast(1.12) saturate(1.14)
drop-shadow(0 6px 10px rgba(0,0,0,.6))
drop-shadow(0 18px 26px rgba(0,0,0,.4))}
/* WIDE, FLAT ambient — covers the whole spread evenly instead of pooling in the middle.
Low alpha and broad, so it lifts the field the parts sit on without becoming a blob. */
.zed-hero-spread::before{content:"";position:absolute;z-index:-1;pointer-events:none;
inset:-6%;
background:
radial-gradient(ellipse 70% 70% at 50% 50%,
rgba(255,91,22,.20) 0%,rgba(255,91,22,.07) 50%,transparent 72%),
radial-gradient(ellipse 78% 78% at 50% 50%,
rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 55%,transparent 78%);
filter:blur(30px)}
/* NO ground shadow — a scatter isn't resting on anything, and faking it reads as a
smudge under the parts. */
@media (max-width:849px){
.zed-hero-spread::before{inset:0;filter:blur(20px)}
}
@media (max-width:849px){
.zed-hero-object::before{inset:10% 0 10% 0;filter:blur(18px)}
.zed-hero-object::after{display:none}
}
/* ---------- 40. DEAL BANNER — NATIVE UX BUILDER ELEMENTS -------------------
The banners are built from discrete Flatsome elements ([ux_text], [ux_html]) rather
than one raw-HTML blob, so each line is individually clickable/editable in UX Builder
and Luke can drop a button or swap copy without touching code.
[ux_text class="x"] renders
— the class lands on the WRAPPER, not the . Our brand rules target the element
itself, so they must be re-pointed at the inner
or nothing applies. And `.dark p`
(0,1,1) still beats a single class, so keep the doubled-class trick. */
.zed-deal-banner .zed-stamp.zed-stamp p,
.zed-deal-banner .zed-h1.zed-h1 p,
.zed-deal-banner .zed-sub.zed-sub p,
.zed-deal-banner .zed-deadpan.zed-deadpan p{margin:0}
.zed-deal-banner .zed-stamp p{
display:inline-block;font-family:var(--sten);text-transform:uppercase;letter-spacing:.04em;
font-size:12px;color:var(--caut)!important;border:2px solid var(--caut);padding:5px 11px;
transform:rotate(-2deg);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.zed-deal-banner .zed-stamp{margin-bottom:14px}
.zed-deal-banner .zed-h1 p{
font-family:var(--head);text-transform:uppercase;font-weight:400;line-height:.92;
font-size:52px;color:var(--bone)!important}
.zed-deal-banner .zed-h1 .zed-blaze{color:var(--blaze)!important}
.zed-deal-banner .zed-h1{margin-bottom:10px}
.zed-deal-banner .zed-sub p{
font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:19px;
color:#d6d6d6!important}
.zed-deal-banner .zed-sub{margin-bottom:6px}
.zed-deal-banner .zed-deadpan p{
font-family:var(--type);font-size:14px;color:var(--coyote)!important;line-height:1.45}
.zed-deal-banner .zed-deadpan{margin-bottom:16px}
/* ---------- 40b. COUPON STRIP ----------------------------------------------
The "how do I actually get this deal" line. Deliberately concrete: the code, what it
does, and when it dies. A deal banner that doesn't say how to claim it is decoration. */
.zed-coupon-strip{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:12px 16px;border:1px dashed #3a3a3a;border-radius:var(--radius);
background:rgba(11,11,11,.55);width:fit-content;max-width:100%}
.zed-coupon-label{
font-family:var(--sten);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--gray)}
.zed-coupon-strip .zed-code-chip{
margin:0;align-self:auto;
font-family:var(--sten);font-size:14px;letter-spacing:.08em;
background:var(--ink);border:2px dashed var(--caut);color:var(--caut)!important;
padding:8px 13px;border-radius:var(--radius);cursor:pointer;
-webkit-user-select:all;user-select:all}
.zed-coupon-strip .zed-code-chip:hover{background:var(--caut);color:var(--ink)!important;border-style:solid}
.zed-coupon-terms{
font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
font-size:12.5px;color:#b4b4b4}
@media (max-width:549px){
.zed-deal-banner .zed-h1 p{font-size:34px}
.zed-coupon-strip{gap:8px;padding:10px 12px}
}
/* ============================================================
§41 GEAR SCHOOL callout card
A branded "read the guide" block injected on PDPs + relevant
archives (armor categories, Rearden brand) by functions.php,
and placeable anywhere via [zed_gear_school]. Dark Ink card so
it pops on the light PDP/shop pages; Blaze accent + Ink-label
button (reuses the §37 .button.primary canon).
============================================================ */
.zed-gs-card{
display:flex; gap:18px; align-items:center;
margin:24px 0; padding:20px 22px;
background:#0B0B0B;
border-left:5px solid #FF5B16;
border-radius:6px;
box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.zed-gs-card .zed-gs-emblem{
flex:0 0 auto; width:76px; height:76px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center;
border:2px solid #FF5B16; border-radius:6px;
font-family:"Black Ops One",Impact,sans-serif;
font-size:14px; line-height:1.02; letter-spacing:.02em;
color:#FF5B16;
}
.zed-gs-card .zed-gs-body{flex:1 1 auto; min-width:0}
.zed-gs-card .zed-gs-eyebrow{
margin:0 0 5px!important;
font-family:"Black Ops One",Impact,sans-serif;
font-size:11px!important; letter-spacing:.18em; text-transform:uppercase;
color:#F5C518!important;
}
.zed-gs-card .zed-gs-title{
margin:0 0 7px!important;
font-family:"Barlow Condensed","Barlow",sans-serif; font-weight:800;
font-size:25px!important; line-height:1.04; letter-spacing:.01em; text-transform:uppercase;
color:#F1F1F2!important;
}
.zed-gs-card .zed-gs-text{
margin:0 0 13px!important;
font-family:"Barlow",sans-serif; font-weight:400;
font-size:15px!important; line-height:1.5;
color:#CFD3D8!important;
}
.zed-gs-card .zed-gs-btn{margin:0!important}
@media (max-width:549px){
.zed-gs-card{flex-direction:column; align-items:flex-start; gap:14px; padding:18px}
.zed-gs-card .zed-gs-title{font-size:22px!important}
}
/* === END ZED BRAND LAYER === */