/* =============================================================================
site.css - design-system CANDIDATES, staged on the website.
-----------------------------------------------------------------------------
These are new cx-* components written for the CXLogiq landing page that the
site kit doesn't ship yet. They obey the same law as the kit: var(--cx-...)
tokens only, no hard-coded colours or fonts, both themes handled by the
tokens themselves.
WHY THIS FILE EXISTS
`pnpm site-sync` replaces only cxlogiq.css, cx-hero.js, cx-masthead.js,
README.txt, fonts/ and assets/ - so a file with this name is never touched
and survives every sync. Each block below is a self-contained lift into the
design system's packages/ui/components.css. Once a block has been ported and
the kit regenerated, DELETE it from here; anything left in this file is
by definition still waiting to go home.
Loaded AFTER cxlogiq.css so a candidate can extend a shipped component.
========================================================================== */
/* ----- Hero, split layout: copy left, picture right ------------------------ */
/* The shipped hero has ONE artwork slot, anchored top-left behind the copy: a
wash that dissolves into the gradient and gives the dark brand corner its
texture. This variant ADDS a second slot on the right, beside the headline,
for a picture that is meant to be looked at rather than felt. The two are
different jobs and the split hero uses both at once.
Usage:
<- wash, left
...
Slot order matters: cx-hero.js parallaxes the FIRST .cx-hero__media it
finds, so the left wash keeps the scroll behaviour it has always had.
Either slot ships fine empty - the gradient and constellation carry the
hero on their own.
KNOWN ISSUE, deliberately parked (decision pending, 2026-07-25)
---------------------------------------------------------------
In LIGHT theme the headline sits on the left wash and does not have enough
contrast. Measured against the composited pixels behind the glyph boxes:
"Right platform." (--cx-text) 1.68:1, 35% of the line under 3:1
"Right partner." (--cx-accent-deep) 1.01:1, 76% of the line under 3:1
3:1 is the minimum for text this size. Dark theme is fine (~1%). The cause
is the combination, not either piece: the shipped hero puts the copy in the
CENTRE, past the dense part of the wash, and the split layout moves it hard
left onto it. Three fixes were considered - extend the dark brand corner
under the copy (tried, rejected on looks), tighten the wash's mask so it
stops short of the headline, or fade the wash in light theme only. Pick one
before launch, or the light-theme headline ships hard to read. */
.cx-hero--split .cx-hero__copy {
/* Must track the picture column, not just cap at a fixed width: the picture
takes 46vw off the right, and the copy starts at 4vw, so anything wider
than ~50vw runs underneath it. 46vw keeps a margin either side. */
max-width: min(560px, 46vw);
}
.cx-hero__media--right {
left: auto;
right: 0;
top: 0;
width: min(46%, 620px);
height: 100%;
/* Dissolve on the INWARD edges (left and bottom) so the picture melts into
the hero gradient instead of ending on a seam. Anchored right-of-centre,
the mirror of the base slot's top-left anchor. */
-webkit-mask-image: radial-gradient(120% 110% at 100% 38%, #000 42%, transparent 78%);
mask-image: radial-gradient(120% 110% at 100% 38%, #000 42%, transparent 78%);
}
/* Below ~980px the two columns stop fitting side by side. The picture stands
down and the hero falls back to exactly what the kit does on small screens:
the left-hand wash behind full-width copy. Stacking both slots would put two
images at the top of the same phone screen, fighting each other. */
@media (max-width: 980px) {
.cx-hero__media--right {
display: none;
}
.cx-hero--split .cx-hero__copy {
max-width: none;
}
}
/* ----- Stats: the proof band ----------------------------------------------- */
/* A row of hard numbers, no prose. Deliberately NOT panels - the page already
leans on cards, and a proof band needs to read as a different kind of
statement. The accent rule on the left of each figure is the whole design.
Usage:
40+
Genesys Cloud deployments
...
*/
.cx-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 26px 32px;
}
.cx-stat {
border-left: 2px solid var(--cx-border-strong);
padding-left: 18px;
}
.cx-stat__num {
margin: 0;
font-family: var(--cx-font-display);
font-weight: 800;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--cx-accent-deep);
}
.cx-stat__label {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--cx-text-muted);
}
/* ----- Panel body text ------------------------------------------------------ */
/* The muted paragraph inside a .cx-panel, under the __head. The site kit ships
__title and __hint but nothing for a real body paragraph, so every page has
been repeating the same inline style. This is that style, named. */
.cx-panel__body {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--cx-text-muted);
}
/* A second paragraph in the same panel needs its own top margin. */
.cx-panel__body + .cx-panel__body {
margin-top: 10px;
}
/* ----- Section, tinted variant ---------------------------------------------- */
/* A tinted section so consecutive sections read as distinct blocks without
needing artwork. Alternate it; using it on every section defeats the point.
This replaced a run of style="padding-top: 0" hacks that were being used to
glue sections together because they had no other way to tell them apart. */
.cx-section--alt {
background: var(--cx-surface-2);
border-top: 1px solid var(--cx-border);
border-bottom: 1px solid var(--cx-border);
}
/* ----- Quote: the statement block ------------------------------------------- */
/* One idea, set large, with an accent rule. Breaks up a run of card grids and
gives a page somewhere to put its strongest sentence. __attr is for
attribution when it holds a customer quote. */
.cx-quote {
border-left: 3px solid var(--cx-accent);
padding: 4px 0 4px 24px;
margin: 0;
}
.cx-quote p {
margin: 0;
font-size: clamp(17px, 1.9vw, 21px);
font-weight: 600;
line-height: 1.5;
color: var(--cx-text);
}
.cx-quote__attr {
margin: 12px 0 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cx-text-dim);
}
/* ----- Tick list ------------------------------------------------------------ */
/* A short list of what you get. The tick is drawn by CSS, so pages stop
hand-writing check-mark entities into markup. */
.cx-ticklist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.cx-ticklist li {
position: relative;
padding-left: 30px;
font-size: 14px;
line-height: 1.6;
color: var(--cx-text-muted);
}
/* The ring. */
.cx-ticklist li::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 17px;
height: 17px;
border-radius: 50%;
border: 1.5px solid var(--cx-accent);
}
/* The tick inside it: two borders of a box, rotated 45 degrees. */
.cx-ticklist li::after {
content: '';
position: absolute;
left: 6px;
top: 7.5px;
width: 4px;
height: 8px;
border: solid var(--cx-accent);
border-width: 0 1.7px 1.7px 0;
transform: rotate(45deg);
}