/* CartCraft FX - effect styles.
* Namespace: everything lives under .ccfx-. Nothing here targets theme or
* Elementor selectors, so the classes can be dropped on any element from the
* Advanced tab without side effects.
* Portions adapted from react-bits (MIT).
*
* Palette: accent #FF8E2B, light line #FFB765, page navy #0B1227.
*/
:root {
--ccfx-accent: #FF8E2B;
--ccfx-line: #FFB765;
--ccfx-navy: #0B1227;
}
/* ====================================================================
* SPECULAR - rim light that follows the pointer (canvas is injected by JS)
* Use: add class ccfx-specular to a button or link.
* ==================================================================== */
.ccfx-specular {
position: relative;
}
.ccfx-specular > .ccfx-specular__fx {
position: absolute;
inset: -20px;
pointer-events: none;
z-index: 0;
line-height: 0;
}
.ccfx-specular > .ccfx-specular__fx canvas {
display: block;
width: 100%;
height: 100%;
}
/* Fallback whenever the canvas is skipped (touch, reduced motion, context
* budget reached, no WebGL): a plain thin rim in the same colour family. */
.ccfx-specular--static {
box-shadow: inset 0 0 0 1px var(--ccfx-specular-rim, rgba(255, 183, 101, 0.22));
}
/* ====================================================================
* LOGO LOOP - endless marquee row
* Markup:
*
*
*
*
*
*
* Deliberately not the metallic class from mm-rb.css: that one replaces
* the logo with a steel gradient, which would wipe out brand colours
* like the red Melitta shield. Here the logo keeps every pixel and only
* gains a moving highlight on top.
* Knobs: --ccx-gloss-strength (how strongly the band reads), --ccx-gloss-speed,
* --ccx-gloss-delay (stagger several logos against each other).
*
* The sweep is laid over the box of the image, not over the box of the
* host: an Elementor image widget is often taller or wider than the
* picture inside it, and a mask that is centred in the wrong box makes
* the highlight drift off the logo. The runtime writes the measured
* offsets into the four variables below and refreshes them on resize.
* -------------------------------------------------------------------- */
.ccx-logogloss {
position: relative;
}
.ccx-logogloss::after {
content: "";
position: absolute;
top: var(--ccx-gloss-top, 0px);
left: var(--ccx-gloss-left, 0px);
width: var(--ccx-gloss-w, 100%);
height: var(--ccx-gloss-h, 100%);
-webkit-mask: var(--ccx-gloss-img) no-repeat center / contain;
mask: var(--ccx-gloss-img) no-repeat center / contain;
/* The band shades the logo first and then lights it up, which is what a
* reflection on metal does. A pure white highlight would be invisible here,
* because five of the six client logos are already white and nothing gets
* brighter than white. Hard light reads the band as a lightness curve
* instead: everything below mid grey darkens the logo, everything above it
* brightens, and mid grey itself changes nothing. The hue of the logo comes
* through untouched, so the red Melitta shield stays red. */
background: linear-gradient(
115deg,
rgb(128, 128, 128) 36%,
rgb(94, 101, 120) 45%,
rgb(242, 246, 252) 50%,
rgb(94, 101, 120) 55%,
rgb(128, 128, 128) 64%
);
background-size: 300% 100%;
background-position: 165% 0;
mix-blend-mode: hard-light;
opacity: var(--ccx-gloss-strength, 0.68);
pointer-events: none;
z-index: 2;
animation: ccx-logo-shine var(--ccx-gloss-speed, 6s) ease-in-out infinite;
animation-delay: var(--ccx-gloss-delay, 0s);
}
/* Without a known image there is nothing to clip the sweep to, so the
* highlight stays away rather than painting a bright rectangle. */
.ccx-logogloss:not([style*="--ccx-gloss-img"])::after { display: none; }
@keyframes ccx-logo-shine {
0%, 100% { background-position: 165% 0; }
50% { background-position: -65% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ccx-logogloss::after { animation: none; opacity: 0; }
}
/* --------------------------------------------------------------------
* TWO GUARDS AGAINST SIDEWAYS SCROLL
*
* 1. Gradient headlines carry a horizontal padding with a matching
* negative margin. On a shrink to fit box that cancels out, but a
* headline that already spans its column ends up wider than the
* column and pushes the page open - at 140px type that is 11px on
* each side. Vertically the padding is what keeps ascenders and
* descenders inside the painted area, so only the horizontal half
* goes. Seven class names beat the six the base rule uses.
*
* 2. The glow ring is an absolutely positioned box that reaches past
* its card. Below 1024px the wide cards are not clipped any more and
* that box widens the page. Pulling the ring box back onto the card
* costs nothing visually: the visible ring sits on the card border in
* either case, and the soft bloom around it is a box shadow, which
* paints outside regardless.
* -------------------------------------------------------------------- */
.ccx-gt-head.ccx-gt-head.ccx-gt-head.ccx-gt-head.ccx-gt-head.ccx-gt-head.ccx-gt-head {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
@media (max-width: 1024px) {
.mmrb-glowcard { --gc-pad: 0px; }
}
/* ====================================================================
* REFERENCE BLOCKS, ROUND TWO (21.08.2026)
* Effect settings for the small parts of the six reference blocks. The
* layout of those blocks lives in the stylesheet of the two section
* containers; only the knobs of the effect layer belong here, so both
* pages share one definition.
* ==================================================================== */
/* The visible pill of a technology badge is drawn on the box inside the
* widget, so the widget itself has square corners and the glow ring would
* trace a rectangle around a pill. The radius on the widget costs nothing
* visually - the widget has no background of its own - and gives the ring
* the shape it should follow. Same reason as the section eyebrows above. */
.ccref-badge { border-radius: 999px; }
/* A 30px pill and a 44px tile are far smaller than the cards this glow was
* built for. Two adjustments keep it in scale: a tight aura, and a rim that
* only appears once the pointer is really close. The onset threshold works
* out to roughly 85px of approach instead of 150px, so passing the column
* does not light up all three tiles at once. */
.mmrb-glowcard.ccx-glow-small {
--gc-pad: 12px;
--edge-sensitivity: 55;
}
/* Below 1024px the aura box is pulled back onto the element, for the same
* reason as the general rule at the end of this file: the wide blocks are no
* longer clipped there and a box reaching past them widens the page. */
@media (max-width: 1024px) {
.mmrb-glowcard.ccx-glow-small { --gc-pad: 0px; }
}
/* Client logos: a slower run than the default, and the band pulled back a
* little so it stays a reflection rather than a flash. The offset per block
* is set in the section stylesheet, so the six logos never shine at the same
* moment. */
.ccref-badgerow .ccx-logogloss {
--ccx-gloss-strength: 0.72;
--ccx-gloss-speed: 7s;
}
/* Secondary buttons on /references/: the travelling light runs a touch
* slower and thinner than the default, so it stays a hint next to the
* pointer glint the same button already carries. */
.ccref-btnghost .ccx-starborder {
--ccx-star-color: #ffb765;
--ccx-star-speed: 6s;
--ccx-star-thickness: 12px;
--ccx-star-spread: 34%;
--ccx-star-opacity: 0.85;
}
/* --------------------------------------------------------------------
* GHOST NUMERAL, MOVED TO THE RIGHT EDGE OF THE TEXT COLUMN
*
* The big 1 to 6 of the reference blocks is an ::after on .ccref-content.
* The section stylesheet of both pages parks it at left:-26px, which is
* exactly where the client logo and the first headline lines sit. Measured
* at 1440px: 85 of the 101px wide 1, and 170 to 197 of the 181 to 211px
* wide 2 to 6, end up behind that text. At five percent white almost
* nothing of the numeral survives there.
*
* Flipping the offset to the right moves it into the only free part of the
* column. The headline box is capped at 520px while the column runs 672px
* at 1440px, so its last 152px carry no text at all. The covered share
* drops to nothing for the 1 and to 37 to 60px of left flank for 2 to 6.
*
* right:0 and not a negative pull, because the glyphs bring their own side
* bearing: the ink of 2 to 6 stops one to eight pixels short of the box
* edge, so the numeral optically lands on the same line the technology
* pill and the bullet rows end on. Nothing reaches past the column, which
* is what keeps the page free of sideways scroll.
*
* The vertical value belongs to the same move. The technology pill ends
* 30px below the top of this column and starts between x 558 and 584, so
* it stands inside the range the numeral now occupies. Kept at the old
* -36px the ink would begin at y 18 to 23 and the pill would print across
* the numeral. top:0 puts the ink at y 54 to 59 instead: 24 to 29px of air
* below the pill, and 22 to 79px above the first bullet icon, tightest on
* the ImmoScout24 block whose bullet list starts highest.
*
* From 1025px up only. That is where picture and text stand side by side
* and the text column has a free right hand side. Below it the card stacks
* into a single column, the technology pill sits alone in the top right
* corner and the numeral would land straight on it, so the placement of
* the section stylesheet stays untouched there.
*
* Four class names because the section stylesheet reaches the numeral
* through the page and the section container. Matching specificity plus
* the later position in the load order settles the tie.
* -------------------------------------------------------------------- */
@media (min-width: 1025px) {
.ccref-card .ccref-content.ccref-content.ccref-content::after {
top: 0;
left: auto;
right: 0;
}
* BULLET ICONS - same colour world as the app sections
*
* The app sections further down the home page carry the same kind of
* bullet icon: a small rounded tile filled with a vertical two tone
* orange, #FF8E2B at the top over #CE5904 at the bottom, a bright rim
* and a pale glyph on it. Those tiles are vector art, so their colours
* are written into the page and always land exactly.
*
* The six reference blocks use the same motif, but as flat pictures, and
* the orange in those pictures was exported washed out: measured on the
* page the top of a reference tile sits at #D19164 against #FA8F36 on an
* app tile, barely half the chroma. That is what makes the row read
* brown and heavy next to everything else.
*
* The picture carries its own tile, so the colour cannot be fixed where
* it belongs. Two steps do it from here instead:
*
* 1. Brightness before saturation, and the order is the point. Brightness
* runs first and lifts the pale glyph the whole way to white; saturate
* leaves a white pixel untouched, so the chroma boost lands on the
* orange and not on the symbol. The other way round the warm glyph
* would turn orange along with the tile.
* 2. A thin wash of the app gradient over the picture. Saturation alone
* cannot reach the app tile: it only ever takes blue away, and these
* pictures hold so much of it that the top stays pale long after the
* lower half has gone hot and red. The wash carries the actual app
* colours, so it pulls the whole tile the last step towards them, and
* it takes the glare off the now white glyph at the same time, which
* is what the app tiles do with their own pale symbol.
*
* The wash is strongest at the top and nearly gone at the bottom, because
* that is where the two pictures disagree. The top of a reference tile
* still holds the pale blue the saturation left behind and needs the most
* correction; the bottom has already run past the app colour into a hotter
* red and only wants a light hand to sit back down.
*
* The wash sits on the widget box because that box is exactly as wide as
* the picture on every screen size. Height comes from padding, which
* resolves against that same width, so the square follows the picture
* from 28px down to 26px without a second set of numbers. It is scaled
* back by a hair as well: the corner of the drawn tile is a continuous
* curve that border-radius cannot trace, and pulling the wash inside the
* picture keeps it off the dark frame around it. The pixel that stays
* clear is the bright rim of the tile, which is meant to stay bright.
* -------------------------------------------------------------------- */
.ccref-ico.ccref-ico.ccref-ico.ccref-ico.ccref-ico img {
filter: brightness(1.14) saturate(1.50);
}
.ccref-ico.ccref-ico.ccref-ico.ccref-ico > .elementor-widget-container {
position: relative;
}
.ccref-ico.ccref-ico.ccref-ico.ccref-ico > .elementor-widget-container::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 0;
padding-bottom: 100%;
transform: translateY(-50%) scale(0.94);
border-radius: 26%;
background: linear-gradient(
180deg,
rgba(255, 142, 43, 0.26) 0%,
rgba(255, 152, 60, 0.12) 55%,
rgba(214, 102, 26, 0.10) 100%
);
pointer-events: none;
}