/* Informula v4 — design tokens and the shared page skin.
Page JSON carries only the semantic classes below; colours live here. */
:root{
--inf-step-1:#173255; --inf-step-2:#20738C; --inf-step-3:#0B7C8C;
--inf-step-4:#2F9CA5; --inf-step-5:#6AC2B9;
--inf-gold:#D8BC78; --inf-gold-dk:#917226;
--inf-ink:#1E1E1E; --inf-body:#6F756D;
--inf-surface:#FFFFFF; --inf-surface-alt:#F5F5F5;
--inf-dark-band:linear-gradient(135deg,#0D0D0D 0%,#16293B 60%,#20738C 100%);
}
/* SCOPING CONTRACT: .inf-band-dark is a DEFAULT, not an override. It paints a
dark ground and white text for descendants that set no colour of their own.
Anything set in Elementor wins — its per-page CSS is more specific than these
plain class rules, and nothing here is !important any more. That is the point:
the editor is the source of truth, this file only says what happens when the
editor says nothing. A container that wants a light background simply sets one
(or drops .inf-band-dark); a widget that wants its own colour just sets it.
The trap that follows from this: a widget carrying a leftover DARK colour
inside a dark band now wins and turns unreadable. Leave such settings empty. */
/* --- dark gradient band ------------------------------------------------- */
.inf-band-dark{background-color:#0D0D0D;}
/* Text defaults are applied at WIDGET-WRAPPER level, never on the inner
or
.elementor-heading-title. That is deliberate and load-bearing:
- Elementor writes a text-editor's colour on the widget wrapper and lets it
inherit. A rule that paints the inner
directly beats an inherited value
no matter how specific the other selector is, so `.inf-band-dark p` would
silently outrank the editor even with no !important. Matching the wrapper
instead puts both rules on the same footing, and Elementor's per-element
selector (.elementor-123 .elementor-element.elementor-element-abc, 0-3-0)
wins over this one (0-2-0).
- Headings need the extra .elementor-widget-heading step. Without it this
rule is 0-2-0, exactly level with the kit's global
`.elementor-widget-heading .elementor-heading-title`, and the kit — printed
after this file — would win on source order and drag every band heading
back to the global gold. At 0-3-0 the band beats the kit global while still
losing to Elementor's per-element rule at 0-4-0. */
.inf-band-dark,
.inf-band-dark .elementor-widget-text-editor,
.inf-band-dark .elementor-widget-heading .elementor-heading-title,
.inf-band-dark li, .inf-band-dark span,
.inf-band-dark h1, .inf-band-dark h2, .inf-band-dark h3, .inf-band-dark h4{color:#FFFFFF;}
/* Opt-out for elements that must keep their brand colour inside a dark band
(e.g. page 84's gold section heading). Declared after the blanket rule so
equal specificity resolves in this rule's favour by source order. */
.inf-band-dark .inf-keep-accent,
.inf-band-dark .inf-keep-accent .elementor-heading-title,
.inf-band-dark .inf-keep-accent.elementor-widget-heading .elementor-heading-title{color:var(--inf-gold);}
.inf-band-dark a:not(.elementor-button){color:var(--inf-step-5);}
/* --- colour progression -------------------------------------------------
Put .inf-prog-N on a column/section to set its accent, then .inf-accent on
the box that should carry it. */
.inf-prog-1{--inf-acc:var(--inf-step-1);}
.inf-prog-2{--inf-acc:var(--inf-step-2);}
.inf-prog-3{--inf-acc:var(--inf-step-3);}
.inf-prog-4{--inf-acc:var(--inf-step-4);}
.inf-prog-5{--inf-acc:var(--inf-step-5);}
/* Accent bar for boxes that are ALREADY styled cards — every target on these
pages sets its own background, radius and padding, so we must not restyle
them, only tint them.
THE ONE SURVIVING !important IN THIS FILE. Elementor gives a container a
single border colour for all four sides; this rule needs a 4px accent bar on
the left while the other three stay the card's own 1px grey. That cannot be
expressed in the editor at all, so the CSS has to win here. Measured on page
74: left 4px accent, top 1px #E5E5E5. If you ever need to change it, change
it here — the editor cannot. */
.inf-accent{
border-left:4px solid var(--inf-acc,var(--inf-step-2))!important;
transition:box-shadow .25s ease, transform .25s ease;
}
.inf-accent:hover{box-shadow:0 8px 26px rgba(0,0,0,.13);transform:translateY(-2px);}
/* A nested box inside a dark band keeps its own light background, which leaves
the band's forced-white text unreadable. Turn it into a translucent surface. */
.inf-band-dark .inf-surface{
background-color:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.16);
}
/* SCOPING CONTRACT: .inf-check styles EVERY
and
beneath it. Generators
must put it on the narrowest container that holds only checklist items — never
on a whole section that also contains intro paragraphs. */
/* --- check list (Home's results style) --------------------------------- */
.inf-check ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.inf-check ul li, .inf-check p{position:relative;padding-left:26px;}
.inf-check ul li::before, .inf-check p::before{
content:"";position:absolute;left:0;top:.35em;width:15px;height:15px;border-radius:50%;
background:var(--inf-acc,var(--inf-step-2));
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* --- reveal on scroll ---------------------------------------------------
The hidden state is gated behind .inf-js, which the plugin sets from an
inline head script. If that never runs — JS error, blocked request, JS off —
the content simply stays visible instead of disappearing. Never hide content
by default and rely on script to bring it back. */
.inf-js .inf-reveal{opacity:0;transform:translateY(16px);
transition:opacity .55s ease, transform .55s ease;}
.inf-js .inf-reveal.inf-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
.inf-js .inf-reveal{opacity:1!important;transform:none!important;transition:none!important;}
}
/* --- geometry motif ------------------------------------------------------
The circuit-line decoration Home already carries on its lead section, made
reusable. Two tints because a background layer cannot be recoloured by a
variable — the light one is for pale sections, the brighter one for the dark
gradient bands, where teal at 20% would disappear.
SCOPING CONTRACT: a container that gets a CSS background-image also needs
Elementor's `e-no-lazyload` class, or Elementor blanks it with
`background-image:none!important` until the container scrolls into view. */
:root{
--inf-geo-light:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22420%22%20viewBox%3D%220%200%20640%20420%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22rgba(47,156,165,0.20)%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M0%2060h150l50%2050h180l40-30h220%22%2F%3E%3Cpath%20d%3D%22M0%20150h110l60-45h160l50%2050h260%22%2F%3E%3Cpath%20d%3D%22M40%20240h140l45%2040h170l50-35h195%22%2F%3E%3Cpath%20d%3D%22M0%20330h180l55-40h190l45%2045h170%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba(47,156,165,0.30)%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2260%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22105%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22240%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22395%22%20cy%3D%22280%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22330%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22425%22%20cy%3D%22290%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22180%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--inf-geo-dark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22420%22%20viewBox%3D%220%200%20640%20420%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22rgba(106,194,185,0.26)%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M0%2060h150l50%2050h180l40-30h220%22%2F%3E%3Cpath%20d%3D%22M0%20150h110l60-45h160l50%2050h260%22%2F%3E%3Cpath%20d%3D%22M40%20240h140l45%2040h170l50-35h195%22%2F%3E%3Cpath%20d%3D%22M0%20330h180l55-40h190l45%2045h170%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba(106,194,185,0.40)%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2260%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22105%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22240%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22395%22%20cy%3D%22280%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22330%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22425%22%20cy%3D%22290%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22180%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--inf-geo-pos:right -80px top 40px;
}
/* Every dark band gets the motif as a second background layer, painted over
the gradient. Listing both layers keeps the gradient in the same rule.
OPT-OUT: .inf-own-bg suppresses the skin's background entirely. An uploaded
image no longer needs it — Elementor's per-page rule already outranks this
one — but the class still earns its keep when a container wants NO skin
background at all while staying a dark band. */
.inf-band-dark:not(.inf-own-bg){
background-image:var(--inf-geo-dark),var(--inf-dark-band);
background-repeat:no-repeat,no-repeat;
background-position:var(--inf-geo-pos),center center;
background-size:auto,cover;
}
/* Standalone motif for sections that keep their own flat background. Pair it
with .inf-geo-bright on a dark one — teal at 20% all but vanishes on black. */
.inf-geo:not(.inf-band-dark){
background-image:var(--inf-geo-light);
background-repeat:no-repeat;background-position:var(--inf-geo-pos);
}
.inf-geo.inf-geo-bright:not(.inf-band-dark){background-image:var(--inf-geo-dark);}
.inf-geo-left{--inf-geo-pos:left -80px bottom 40px;}
/* --- full-bleed motif + colour variants (client feedback 2026-09-10) ------
The inline SVG above is one small badge parked in a corner. The client asked
for the same artwork spanning the WHOLE background in some places, and in a
second colour — gold on the dark bands.
Two corner layers, not one stretched image: the artwork carries circular
nodes, and a single layer sized to the section would have to stretch (ovals)
or crop (the corner art is the only art there is). Opposite corners scale by
width alone, so the nodes stay round at every band height.
`img/tech-element-{b,g}{1,2}.png` are the supplied variations — b = teal,
g = gold, 1 = the top-left piece, 2 = the bottom-right one. The pre-composed
1200x600 `tech-full-1/2.png` ship alongside them for anyone who wants the
single-layer version in an Elementor background picker. */
:root{
--inf-geo-a:url("img/tech-element-b1.png");
--inf-geo-b:url("img/tech-element-b2.png");
/* Cap the px size so the lines do not go coarse on a very wide screen. */
--inf-geo-full-size:min(48%,620px);
}
/* Colour variant. Only swaps the two URLs, so it composes with every rule
below instead of duplicating them. */
.inf-geo-gold{
--inf-geo-a:url("img/tech-element-g1.png");
--inf-geo-b:url("img/tech-element-g2.png");
}
/* The full-bleed artwork rides on ::before, not on background-image, for one
reason: at full width its long horizontal traces run straight through the
body copy and read as strike-through. A pseudo-element can be dimmed as a
whole; a background layer cannot (there is no per-layer opacity in CSS).
z-index:-1 rather than lifting the children: the painting order puts a
negative-z descendant ABOVE the parent's own background and BELOW its in-flow
content, which is exactly where decoration belongs — and it leaves every
child's positioning untouched.
`isolation:isolate` is what makes that true, and it is NOT optional. A
negative-z child is painted inside the nearest ancestor STACKING CONTEXT, and
`position:relative` alone (z-index:auto) does not create one — so without
isolation the motif escapes upward and lands behind the band's own gradient,
invisible. Verified: dropping isolation blanks the pattern on screen.
Elementor uses ::before on a container for its background OVERLAY control.
Setting an overlay in the editor therefore replaces this motif rather than
stacking with it. That is the documented ladder (the editor outranks the
skin), not a bug — but it is the one place a container cannot have both. */
.inf-band-dark:not(.inf-own-bg).inf-geo-full{
background-image:var(--inf-dark-band);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
position:relative;isolation:isolate;
}
.inf-band-dark:not(.inf-own-bg).inf-geo-full::before,
.inf-geo:not(.inf-band-dark).inf-geo-full::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--inf-geo-a),var(--inf-geo-b);
background-repeat:no-repeat,no-repeat;
background-position:left -2% top -10%,right -2% bottom -10%;
background-size:var(--inf-geo-full-size),var(--inf-geo-full-size);
opacity:.5;
}
/* Same treatment for a section that keeps its own flat background. */
.inf-geo:not(.inf-band-dark).inf-geo-full{position:relative;isolation:isolate;}
/* The motif is decoration, not content: it only crowds narrow screens. */
@media(max-width:1024px){
.inf-band-dark:not(.inf-own-bg){background-image:var(--inf-dark-band);}
.inf-geo:not(.inf-band-dark){background-image:none;}
.inf-band-dark:not(.inf-own-bg).inf-geo-full::before,
.inf-geo:not(.inf-band-dark).inf-geo-full::before{background-image:none;}
}
/* --- checklist rows ------------------------------------------------------
A row holding one check icon and one line of copy is a bullet, not a card:
`.inf-accent`'s 4px left bar reads as a broken blockquote there. Carry the
colour progression on the check mark instead. */
/* The doubled .elementor-icon is a specificity device, not a typo. Elementor's
own frontend.min.css carries `.elementor-view-framed .elementor-icon
{background-color:transparent}` at 0-2-0 and is printed AFTER this file, so a
plain `.inf-bullet .elementor-icon` (also 0-2-0) loses on source order and the
check reverts to a hollow outline. Repeating the class lifts this to 0-3-0:
it now beats Elementor's framework default while still losing to a per-element
colour the editor writes (also 0-3-0, but printed later). Framework defaults
lose, your settings win — which is the whole contract of this file. */
.inf-bullet .elementor-icon.elementor-icon{
background-color:var(--inf-acc,var(--inf-step-2));
border-color:var(--inf-acc,var(--inf-step-2));
color:#FFFFFF;
}
.inf-bullet .elementor-icon.elementor-icon svg{fill:#FFFFFF;}